diff --git a/Yi.Pure.Vue3/.browserslistrc b/Yi.Pure.Vue3/.browserslistrc
new file mode 100644
index 00000000..40bd99ce
--- /dev/null
+++ b/Yi.Pure.Vue3/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.dockerignore b/Yi.Pure.Vue3/.dockerignore
new file mode 100644
index 00000000..0376edde
--- /dev/null
+++ b/Yi.Pure.Vue3/.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
diff --git a/Yi.Pure.Vue3/.editorconfig b/Yi.Pure.Vue3/.editorconfig
new file mode 100644
index 00000000..ea6e20f5
--- /dev/null
+++ b/Yi.Pure.Vue3/.editorconfig
@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/Yi.Pure.Vue3/.env b/Yi.Pure.Vue3/.env
new file mode 100644
index 00000000..09344c15
--- /dev/null
+++ b/Yi.Pure.Vue3/.env
@@ -0,0 +1,5 @@
+# 平台本地运行端口号
+VITE_PORT = 8848
+
+# 是否隐藏首页 隐藏 true 不隐藏 false （勿删除，VITE_HIDE_HOME只需在.env文件配置）
+VITE_HIDE_HOME = false
diff --git a/Yi.Pure.Vue3/.env.development b/Yi.Pure.Vue3/.env.development
new file mode 100644
index 00000000..90d1146f
--- /dev/null
+++ b/Yi.Pure.Vue3/.env.development
@@ -0,0 +1,8 @@
+# 平台本地运行端口号
+VITE_PORT = 8848
+
+# 开发环境读取配置文件路径
+VITE_PUBLIC_PATH = /
+
+# 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
+VITE_ROUTER_HISTORY = "hash"
diff --git a/Yi.Pure.Vue3/.env.production b/Yi.Pure.Vue3/.env.production
new file mode 100644
index 00000000..84e60861
--- /dev/null
+++ b/Yi.Pure.Vue3/.env.production
@@ -0,0 +1,13 @@
+# 线上环境平台打包路径
+VITE_PUBLIC_PATH = /
+
+# 线上环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
+VITE_ROUTER_HISTORY = "hash"
+
+# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
+VITE_CDN = false
+
+# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
+# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+VITE_COMPRESSION = "none"
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.env.staging b/Yi.Pure.Vue3/.env.staging
new file mode 100644
index 00000000..65b57e3c
--- /dev/null
+++ b/Yi.Pure.Vue3/.env.staging
@@ -0,0 +1,16 @@
+# 预发布也需要生产环境的行为
+# https://cn.vitejs.dev/guide/env-and-mode.html#modes
+# NODE_ENV = development
+
+VITE_PUBLIC_PATH = /
+
+# 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
+VITE_ROUTER_HISTORY = "hash"
+
+# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
+VITE_CDN = true
+
+# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
+# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
+VITE_COMPRESSION = "none"
diff --git a/Yi.Pure.Vue3/.gitattributes b/Yi.Pure.Vue3/.gitattributes
new file mode 100644
index 00000000..00ff609a
--- /dev/null
+++ b/Yi.Pure.Vue3/.gitattributes
@@ -0,0 +1,2 @@
+public/wasm/capture.worker.js linguist-language=Vue
+public/wasm/index.js linguist-language=Vue
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.github/ISSUE_TEMPLATE/bug_report.yml b/Yi.Pure.Vue3/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 00000000..aff0c8f5
--- /dev/null
+++ b/Yi.Pure.Vue3/.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://pure-admin.github.io/pure-admin-doc/) (Have you read [documentation](https://pure-admin.github.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
diff --git a/Yi.Pure.Vue3/.github/ISSUE_TEMPLATE/config.yml b/Yi.Pure.Vue3/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 00000000..3ba13e0c
--- /dev/null
+++ b/Yi.Pure.Vue3/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1 @@
+blank_issues_enabled: false
diff --git a/Yi.Pure.Vue3/.github/workflows/linter.yml b/Yi.Pure.Vue3/.github/workflows/linter.yml
new file mode 100644
index 00000000..2dbbcb1f
--- /dev/null
+++ b/Yi.Pure.Vue3/.github/workflows/linter.yml
@@ -0,0 +1,52 @@
+name: Lint Code
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Lint Code
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        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
+          pnpm typecheck
+        env:
+          VALIDATE_ALL_CODEBASE: false
+          DEFAULT_BRANCH: main
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/Yi.Pure.Vue3/.github/workflows/pages.yml b/Yi.Pure.Vue3/.github/workflows/pages.yml
new file mode 100644
index 00000000..7085c8eb
--- /dev/null
+++ b/Yi.Pure.Vue3/.github/workflows/pages.yml
@@ -0,0 +1,42 @@
+name: Build and Deploy
+permissions:
+  contents: write
+on:
+  push:
+    branches:
+      - pages
+      
+jobs:
+  deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.com/
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9
+          run_install: false
+
+      - 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
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.gitignore b/Yi.Pure.Vue3/.gitignore
new file mode 100644
index 00000000..423ed2b8
--- /dev/null
+++ b/Yi.Pure.Vue3/.gitignore
@@ -0,0 +1,22 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.eslintcache
+report.html
+vite.config.*.timestamp*
+
+yarn.lock
+npm-debug.log*
+.pnpm-error.log*
+.pnpm-debug.log
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+tsconfig.tsbuildinfo
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.gitpod.yml b/Yi.Pure.Vue3/.gitpod.yml
new file mode 100644
index 00000000..57324a3b
--- /dev/null
+++ b/Yi.Pure.Vue3/.gitpod.yml
@@ -0,0 +1,5 @@
+ports:
+  - port: 3344
+    onOpen: open-preview
+tasks:
+  - init: pnpm install && pnpm serve
diff --git a/Yi.Pure.Vue3/.husky/commit-msg b/Yi.Pure.Vue3/.husky/commit-msg
new file mode 100644
index 00000000..5ee2d163
--- /dev/null
+++ b/Yi.Pure.Vue3/.husky/commit-msg
@@ -0,0 +1,8 @@
+#!/bin/sh
+
+# shellcheck source=./_/husky.sh
+. "$(dirname "$0")/_/husky.sh"
+
+PATH="/usr/local/bin:$PATH"
+
+npx --no-install commitlint --edit "$1"
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.husky/common.sh b/Yi.Pure.Vue3/.husky/common.sh
new file mode 100644
index 00000000..5f0540b7
--- /dev/null
+++ b/Yi.Pure.Vue3/.husky/common.sh
@@ -0,0 +1,9 @@
+#!/bin/sh
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+# Workaround for Windows 10, Git Bash and Pnpm
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi
diff --git a/Yi.Pure.Vue3/.husky/pre-commit b/Yi.Pure.Vue3/.husky/pre-commit
new file mode 100644
index 00000000..6e229ea3
--- /dev/null
+++ b/Yi.Pure.Vue3/.husky/pre-commit
@@ -0,0 +1,10 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+[ -n "$CI" ] && exit 0
+
+PATH="/usr/local/bin:$PATH"
+
+# Perform lint check on files in the staging area through .lintstagedrc configuration
+pnpm exec lint-staged
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.lintstagedrc b/Yi.Pure.Vue3/.lintstagedrc
new file mode 100644
index 00000000..ebf359aa
--- /dev/null
+++ b/Yi.Pure.Vue3/.lintstagedrc
@@ -0,0 +1,20 @@
+{
+  "*.{js,jsx,ts,tsx}": [
+    "prettier --cache --ignore-unknown  --write",
+    "eslint --cache --fix"
+  ],
+  "{!(package)*.json,*.code-snippets,.!({browserslist,npm,nvm})*rc}": [
+    "prettier --cache --write--parser json"
+  ],
+  "package.json": ["prettier --cache --write"],
+  "*.vue": [
+    "prettier --write",
+    "eslint --cache --fix",
+    "stylelint --fix --allow-empty-input"
+  ],
+  "*.{css,scss,html}": [
+    "prettier --cache --ignore-unknown --write",
+    "stylelint --fix --allow-empty-input"
+  ],
+  "*.md": ["prettier --cache --ignore-unknown --write"]
+}
diff --git a/Yi.Pure.Vue3/.markdownlint.json b/Yi.Pure.Vue3/.markdownlint.json
new file mode 100644
index 00000000..d628d441
--- /dev/null
+++ b/Yi.Pure.Vue3/.markdownlint.json
@@ -0,0 +1,11 @@
+{
+  "default": true,
+  "MD003": false,
+  "MD033": false,
+  "MD013": false,
+  "MD001": false,
+  "MD025": false,
+  "MD024": false,
+  "MD007": { "indent": 4 },
+  "no-hard-tabs": false
+}
diff --git a/Yi.Pure.Vue3/.npmrc b/Yi.Pure.Vue3/.npmrc
new file mode 100644
index 00000000..dddf8bc0
--- /dev/null
+++ b/Yi.Pure.Vue3/.npmrc
@@ -0,0 +1,4 @@
+shell-emulator=true
+shamefully-hoist=true
+enable-pre-post-scripts=false
+strict-peer-dependencies=false
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.nvmrc b/Yi.Pure.Vue3/.nvmrc
new file mode 100644
index 00000000..47465842
--- /dev/null
+++ b/Yi.Pure.Vue3/.nvmrc
@@ -0,0 +1 @@
+v20.15.0
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.prettierignore b/Yi.Pure.Vue3/.prettierignore
new file mode 100644
index 00000000..1667337a
--- /dev/null
+++ b/Yi.Pure.Vue3/.prettierignore
@@ -0,0 +1 @@
+src/views/system/menu/README.md
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/.prettierrc.js b/Yi.Pure.Vue3/.prettierrc.js
new file mode 100644
index 00000000..775d970a
--- /dev/null
+++ b/Yi.Pure.Vue3/.prettierrc.js
@@ -0,0 +1,9 @@
+// @ts-check
+
+/** @type {import("prettier").Config} */
+export default {
+  bracketSpacing: true,
+  singleQuote: false,
+  arrowParens: "avoid",
+  trailingComma: "none"
+};
diff --git a/Yi.Pure.Vue3/.stylelintignore b/Yi.Pure.Vue3/.stylelintignore
new file mode 100644
index 00000000..0c34e619
--- /dev/null
+++ b/Yi.Pure.Vue3/.stylelintignore
@@ -0,0 +1,4 @@
+/dist/*
+/public/*
+public/*
+src/style/reset.scss
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/CHANGELOG.en_US.md b/Yi.Pure.Vue3/CHANGELOG.en_US.md
new file mode 100644
index 00000000..af4d69e8
--- /dev/null
+++ b/Yi.Pure.Vue3/CHANGELOG.en_US.md
@@ -0,0 +1,928 @@
+# 5.8.0 (2024-08-19)
+
+### 🎫 Feat
+
+- Added a second button permission command (judged based on the `permissions` field returned by the login interface)
+- Functional pop-up box `ReDialog` adds whether to enable the `loading` loading animation function after clicking the confirmation button
+- `PureTableBar` component adds full screen and exit full screen functions
+- `VxeTableBar` component adds full screen and exit full screen functions
+- The OK button of the `ReDialog` component provides the close button animation `closeLoading` function
+- Add development environment code debugging `vite-plugin-vue-inspector` plug-in to improve development experience
+- Added `vite-plugin-checker` plugin for stricter type and `eslint` verification
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the current tab cannot be closed after configuring the routing attribute `fixedTag` to `false`
+- Fixed the issue where `logo` cannot be hidden in top menu mode
+
+### 🍏 Perf
+
+- Optimize type hints for custom instructions
+- Optimize the press enter login function on the login page
+- Optimize the mask level of the left menu on the mobile side
+- Optimize system management-permission function style of role management
+- Upgraded dependencies, compatible with the latest version of `element-plus`
+
+# 5.7.0 (2024-06-04)
+
+### 🎫 Feat
+
+- Add Google style tabs
+
+### 🐞 Bug fixes
+
+- Fixed the issue where the text exceeds and is not hidden after the menu is folded in Firefox browser
+
+# 5.6.0 (2024-05-14)
+
+### ✔️ Refactor
+
+- Upgrade `pnpm` to `v9` version, requiring `pnpm` version `>=9`
+
+### 🐞 Bug fixes
+
+- Fixed the issue where clicking on an external link would jump twice
+
+### 🍏 Perf
+
+- Optimize `ReSegmented` component
+
+# 5.5.0 (2024-05-07)
+
+### 📄 Docs
+
+The addresses of the document site and full version preview site have been changed!
+
+- The latest document site address: https://pure-admin.github.io/pure-admin-doc
+- The latest full version preview site address: https://pure-admin.github.io/vue-pure-admin
+
+### ✔️ Refactor
+
+- Reconstruct the `layout` file naming convention to make it more readable
+
+### 🎫 Feat
+
+- Add new component `ReVxeTableBar` to be used with `vxe-table`
+
+### 🐞 Bug fixes
+
+- Fixed the issue where the background color is white when `FixedHeader` is set to `false` in dark mode
+- Fixed the problem of delayed closing of functional pop-up window `ReDialog` when clicking the cancel button
+
+### 🍏 Perf
+
+- Optimize account settings-avatar upload function
+
+# 5.4.0 (2024-04-18)
+
+### 🎫 Feat
+
+- Add global disabled attribute `disabled` to `ReSegmented` component
+- Added mind map examples
+- Functional pop-up box `ReDialog` adds `Popconfirm` bubble confirmation box
+- `pure-table` adds `headerSlot` custom header slot usage example
+- The route adds a configurable `fixedTag` attribute, which determines whether the current menu name is fixedly displayed on the tab and cannot be closed.
+- Added account setting function page and compatible with mobile terminals
+- Upgrade `eslint9` and related compatibility processing
+- Added global configuration `MaxTagsLevel` property to set the maximum number of open tabs
+- Full coverage of the internationalization of the core code of the framework (only the internationalization of the business code needs to be processed)
+
+### 🐞 Bug fixes
+
+- Fixed the issue where columns cannot be dragged normally when there are multiple `RePureTableBar` components on a page
+- Fixed the problem of icon display style after the third-level menu is folded to the left
+- Fixed the issue where the font color does not take effect after refreshing the account settings page
+- Fixed the issue where the `refreshToken` parameter is empty when calling the refresh `token` interface
+
+### 🍏 Perf
+
+- Optimize login interface
+- Optimize the logic of obtaining the top menu
+- Optimize request whitelist logic and be compatible with more scenarios
+- Simplified export and import usage in `store` files
+- Removed unnecessary `cloc` tool dependency package, which uses the `GPL` open source license and is controversial
+- Optimize the types of `post` and `get` utility functions in `src/utils/http` files
+
+# 5.3.0 (2024-03-28)
+
+### ✔️ Refactor
+
+- Reconstruct internationalized file naming conventions and demo pages with code location hints
+
+### 🎫 Feat
+
+- Add `MQTT` example
+- Added `docx` and `excel` file preview examples
+- The `ReSegmented` segmented controller has a new `size` attribute, which can set three sizes
+- The `RePureTableBar` component and `pure-admin-table` support international switching of table headers
+
+# 5.2.0 (2024-03-22)
+
+### ✔️ Refactor
+
+- Place the full screen button at the top to make it visible and easy to operate
+
+### 🎫 Feat
+
+- Added `v-ripple` command (water ripple effect)
+- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
+- Added roaming guidance based on `ElTour`
+- Improve role management-menu permission function, novel interactive experience
+- Add system monitoring-online users
+- Add system monitoring-login log
+- Add system monitoring-operation log
+- Add system monitoring-system log
+- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
+- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
+- Add [vue-flow](https://vueflow.dev/) flow chart example
+- Add virtual table example
+- Added Gantt chart example
+- Add graphic verification code example
+- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
+- Add a folding and expanding menu function on the middle right side of the left menu
+
+### 🐞 Bug fixes
+
+- Fixed the scroll bar issue when clicking on the registration page under `windwos`
+- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
+- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
+- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
+
+### 🍏 Perf
+
+- All pages of system management and system monitoring are compatible with mobile terminals
+
+# 5.1.0 (2024-03-02)
+
+### ✔️ Refactor
+
+- Reconstruct the tab page `UI` to make it more convenient to click the close button
+
+### 🎫 Feat
+
+- Added multi-select card example
+- The menu supports all browser behaviors of right-clicking on the `a` tag (opening links in new tabs, new windows, dragging and dropping to open in new tabs, etc.)
+- Added search history and collection functions to menu search
+
+### 🐞 Bug fixes
+
+- Fixed the problem of scroll bars appearing on the login page under `windows` system
+
+### 🍏 Perf
+
+- Standardize the naming rules when registering local icons to better match the icon selector
+
+# 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
+
+- Add a `demo` example combined with `Form` for the functional pop-up box component
+- wrapper `el-col` component of `element-plus`
+- Add `beforeCancel` and `beforeSure` callbacks to the functional popup component, which can suspend the closing of the popup
+- Improve `System Management-Department Management` page
+- Optimize `PureTableBar` component, add drag and drop function for column display
+
+### 🐞 Bug fixes
+
+- Fix the problem that the page cache still exists when you click the tab to reload after turning on `keepAlive`
+- Fix the problem that the left menu will flicker after refreshing the tab in the mixed mode menu
+
+### 🍏 Perf
+
+- Optimize home page layout
+- Dependency update to `vue3.3+` and remove `unplugin-vue-define-options` plugin
+
+# 4.0.0 (2023-05-09)
+
+[View 4.0.0 version optimization details](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)
+
+### ✔️ Refactor
+
+- Use `css` pseudo-class `before` to refactor the activation background of the menu, similar to [ant.design-menu](https://ant.design/components/menu-cn#components-menu-demo-inline-collapsed)
+
+### 🎫 Feat
+
+- Optimize the extra icon on the right side of the menu name to support more icon rendering modes
+- Configurable home menu display and hide
+- Promote the namespace of the local reactive store into the global configuration
+- Added functional popup components and `demo` examples, making it easier to use
+- `PureTableBar` component adds column display function
+
+### 🐞 Bug fixes
+
+- Fixed the `echarts` chart on the home page not adapting to the container when the menu is collapsed or expanded
+- Fixed the problem that when there is only one submenu, the search function cannot find the submenu
+- Fix the problem that the global configuration `Theme` is empty cache for `light` and re-login theme configuration does not take effect
+- Fixed the problem that the search boxes were not automatically gathered after the menu search function pop-up box was opened
+- Fixed the problem of toolbar button text display after pressing `ESC` to exit full screen
+- Fix the problem of `tooltip` click penetration in the notification bar of the mobile terminal
+- Fixed the problem that the text is not displayed when switching to `horizontal` navigation mode after the left menu is collapsed
+- Fixed the problem that the status cannot be reset when closing other tabs when navigating `tab`
+- Fix the page hot update error caused by uninitialized environment variables in the `getHistoryMode` function
+- Fixed too many `tabs` in the navigation, which caused the tabs on the left to be closed and could not be displayed normally
+- Fixed the problem of full-screen error reporting when clicking on the content area
+- Fixed the problem that the left navigation bar is always loading after opening `showLink:false` page under hybrid navigation and refreshing
+- Fixed the left navigation memory overflow problem caused by calling `initRouter` function in mixed mode navigation
+- Fixed the problem that the cached page was not destroyed when closing the left, right, other, and all tab operations
+- Fix the problem that the route passes parameters through `query` or `params`, and the cache invalidation problem occurs when the tab page is closed after the cache is enabled
+- Fixed the problem that the breadcrumbs could not find the parent path in the `params` route parameter passing mode
+
+### 🍏 Perf
+
+- Optimize `buttons` named slot of `RePureTableBar` component
+- Optimize navigation style and menu collapse animation
+- Optimize the extra icon on the right side of the menu name to support more icon rendering modes
+- Optimize `logo` image and text layout and unified configuration
+- After the routing information `showLink` is set to `false`, the current routing information will not be added to the tab
+- Export `addPathMatch` function
+- All `getters` in `pinia` are changed to the official recommended way of writing, and `this` is changed to `state` to automatically deduce the type
+- Adapt to the `api` of the latest version of `pure-table`
+- Ignore `deprecation` warnings for `sourcemap-codec` and `stable` dependencies
+- Remove `"incremental": true` from `tsconfig.json` file
+- Update `stylelint` and related configurations to the latest, strengthen style validation
+- Breadcrumbs are removed from the homepage, and are displayed according to the selected menu. The homepage is no longer fixed in the breadcrumbs, and the routing monitoring of the breadcrumbs page is optimized
+
+# 3.9.7 (2022-12-26)
+
+### 🍏 Perf
+
+- Use `path.posix.resolve` instead of `path.resolve` to avoid drive letter problems when using `electron` in `windows` environment
+- By default, the `CachingAsyncRoutes` dynamic routing cache is turned off locally, making it easier to debug in the development environment. It is not necessary to clear the local cached dynamic routing every time you modify the dynamic routing. It is recommended to enable it in the production environment
+
+# 3.9.6 (2022-12-19)
+
+### 🎫 Chores
+
+- Upgrade `vite4` version
+
+### 🐞 Bug fixes
+
+- Fix the problem that `hmr` of `vite` is slow due to the wrong way of importing `tailwind.css`
+
+### 🍏 Perf
+
+- Update [@pureadmin/theme](https://github.com/pure-admin/pure-admin-theme) to the latest version, bringing more friendly type hints
+- Optimize [PureTableBar](https://github.com/pure-admin/vue-pure-admin/tree/main/src/components/RePureTableBar) component
+- Optimize the business code of the system management page to bring better code reference
+
+# 3.9.5 (2022-12-13)
+
+### ✔️ Refactor
+
+- completely removed `lodash` and its related libraries
+  [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-5-%E7 %89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C% E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%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
+
+- Add `@pureadmin/table` table dynamic column example
+
+### 🐞 Bug fixes
+
+- Fix dynamic route `rank` issue
+- Fix dark theme styling issues
+
+### 🍏 Perf
+
+- optimize the route `rank`, when `rank` does not exist, it will be created automatically according to the order, the home page route will always be the first
+
+# 3.9.4 (2022-12-05)
+
+### ✔️ 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)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` table selector (single select, multiple select) example
+
+# 3.9.3 (2022-12-04)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` pagination and loading animation example
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the refresh page would be blank due to changes in dynamic routes stored in local storage after enabling `CachingAsyncRoutes`
+- Fixed `Tooltip` displayed abnormally after the menu is collapsed
+
+### 🍏 Perf
+
+- Expand the use of local icons, the first launch of the full version reduces `13` requests again
+- When the menu loading is slow, add `loading` animation to optimize user experience
+- Theme initialization is placed in `onBeforeMount` to avoid flashing of the initialization page
+
+# 3.9.2 (2022-12-03)
+
+### 🍏 Perf
+
+- Global coverage of `el-dialog`, `el-drawer`, `el-message-box`, `el-notification` components of `element-plus`The style of the close icon in the upper right corner makes it more vivid [specific modification Code record](https://github.com/pure-admin/vue-pure-admin/commit/c80818d792276666aaea4b18413a0f08777f2ed1)
+- The packaging output information is compatible with different packaging output paths
+- Optimize some animations
+
+# 3.9.1 (2022-12-02)
+
+### 🎫 Feat
+
+- Add `CachingAsyncRoutes` whether to enable dynamic route cache local global configuration, default `true`
+- Add `TooltipEffect` global configuration, you can configure the `effect` attribute of all `el-tooltip` on the platform body, the default `light`, does not affect the business code
+- Add directory, menu text exceeds display `Tooltip` text prompt demo
+
+### 🍏 Perf
+
+- Optimize `initRouter` method, compatible with `sso` scenario
+- Breadcrumb animation style optimization
+
+# 3.9.0 (2022-11-30)
+
+### 🐞 Bug fixes
+
+- Fixed the jitter problem caused by the scroll bar on the page when the text is too long when exiting the full screen
+- Fix some type errors
+
+### 🍏 Perf
+
+- perf: Great optimization of the first screen loading. Compared with the version before `3.9.0`, the first screen requests are reduced by `71`, and the first screen loading resources are reduced by `4.1 MB`
+
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- Add `message` message prompt function, compatible with `Element Plus` and `Ant ​​Design` two `Message` style styles, use and package size are extremely low cost and adapt to dark mode, really fragrant 😂
+
+### 🍏 Perf
+
+- perf: No need to install `@vue/runtime-core`, compatible with `volar` hints of all `element-plus` components
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- Great optimization, remove `@pureadmin/components` and use compatible writing, the package size of the platform is reduced by `0.4` MB before compression is not enabled, and the resource of `2.3` MB is reduced for the first screen request, which is for the [lite version ](https://github.com/pure-admin/pure-admin-thin) is a very big optimization, the streamlined version has synchronized code
+
+# 3.8.0 (2022-11-26)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` multiple data format (deep structure) examples
+- Add `@pureadmin/table` image preview example
+- Add `@pureadmin/table` row and column drag example
+- Add `@pureadmin/table` context menu example
+- Add `@pureadmin/table` export `Excel` example
+- Add `@pureadmin/table` edit cell example
+- Add `@pureadmin/table` watermark example
+- Add `@pureadmin/table` print example
+- Add `@pureadmin/table` embedded `echarts` chart example
+- Add `svgo` to compress all `svg` files on the platform to reduce the size
+
+### 🍏 Perf
+
+- The static routing platform automatically imports without manual import
+- Improved global type hints
+- Optimize `vite` to rely on pre-built configurations in the platform, and the loading speed of page switching is significantly accelerated
+
+# 3.7.1 (2022-11-22)
+
+### 🔥 hotfix
+
+- Fixed the problem that the tab page may not be reset when logging out when the tab page cache is not turned on
+
+# 3.7.0 (2022-11-21)
+
+### ✔️ Refactor
+
+- Replace `driver.js` with `intro.js`
+
+### 🎫 Feat
+
+- Add front-end single sign-on, test address https://pure-admin.github.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/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
+
+- Repair the in-page menu with parameters to jump to each other, the label is not selected and highlighted
+
+### 🍏 Perf
+
+- Removed deprecated `$baseUrl`
+- Compatible importing a certain library leads to `global is not defined` error, importing `src/utils/globalPolyfills.ts` file into `src/main.ts` can solve the problem
+- Remove `@vitejs/plugin-legacy`, `vue3` cannot make it support `ie` through any tool
+
+# 3.6.4 (2022-11-10)
+
+### 🎫 Feat
+
+- Menu icon `icon` supports using online icons
+
+### 🐞 Bug fixes
+
+- Fixed `vxe-button` font color issue after mouse overlay and some other style issues
+
+### 🍏 Perf
+
+- Optimize the routing guard, if you have logged in and there is login information, you cannot jump to the routing whitelist, but continue to stay on the current page
+- Removed `baseURL` and global environment proxy, and can be written directly in `vite.config.ts`, which is convenient and supports multiple proxy addresses
+
+# 3.6.3 (2022-11-01)
+
+### 🎫 Feat
+
+- Static resource classification and packaging
+- Add danmaku component `demo`
+
+### 🐞 Bug fixes
+
+- Fix the `collapse` property added in the latest version of `tailwindcss` conflicts with the platform `class` class name
+- Fix that when the `token` expires, if the page has multiple requests, the `token` will be refreshed repeatedly
+
+# 3.6.2 (2022-10-27)
+
+### ✔️ Refactor
+
+- Replace `/@/` alias with `@/` alias
+
+# 3.6.1 (2022-10-27)
+
+### 🎫 Feat
+
+- Add whether to start `cdn` for packaging to replace the local library configuration, the default `false` does not start
+- Added optional `gzip` and `brotli` compression modes for packaging builds
+
+### 🐞 Bug fixes
+
+- Fix `title` too long display style problem
+- Fix the parent `name` in the route should not be repeated with the child `name`, which will cause redirection to jump `404` problem
+
+### 🍏 Perf
+
+- Upgrade `axios` to the latest version
+
+# 3.6.0 (2022-10-25)
+
+### 🎫 Feat
+
+- Add file download `demo`
+- Add typewriter component `demo`
+- Added `json` editor `demo`
+
+### ✔️ Refactor
+
+- Refactor the permission module, adopt the most commonly used `RBAC` (Role-Based Access List): role-based permission control (User -> Role -> Permission), and update the page permission and button permission `demo` example, button Permissions support three operation modes (judging permissions in component mode, judging permissions in function mode, and judging permissions in instruction mode)
+
+### 🐞 Bug fixes
+
+- Fixed the theme not being emptied when clearing the cache and returning to the login page
+- Fix `menu` display problem in production environment in `horizontal` mode
+- Fixed the problem that the `mix` mixed mode navigation might not be displayed in the left menu of the production environment
+- After the `token` expires, calling the refresh `token` interface will cause an infinite loop
+
+### 🍏 Perf
+
+- Removed uncommon `@apply` from `tailwind.css`
+- Replace `//` comments with `/** */`, which is more friendly to the editor's intellisense
+- Optimize the login enter event
+- Simplified some functions, eliminated useless functions, and optimized page loading speed
+
+# 3.5.0 (2022-9-10)
+
+### 🎫 Feat
+
+- Add `cssnano` to compress the size of `css` when packaging
+- Add `element-plus` seamless scrolling `Table` page demo
+- Open `vscode` bracket pair guide
+
+### ✔️ Refactor
+
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.github.io/pure-admin-doc/pages/tailwindcss/)
+
+### 🐞 Bug fixes
+
+- `token` expires, refresh the infinite loop
+
+### 🍏 Perf
+
+- When resetting the route, clear the cached page
+
+# 3.4.6 (2022-8-23)
+
+### 🐞 Bug fixes
+
+- `process` is not defined in path
+- Fixed an error when dynamic routing `children` is an empty array
+- Fixed `iframe` loading failure
+
+# 3.4.5 (2022-8-22)
+
+### 🐞 Bug fixes
+
+- Fix local responsive storage object setting issue
+
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- Optimized routing
+- Optimized for mobile compatibility
+- Optimized routing parameters (`query`, `params` way to refresh the page does not need to open the tab page cache, the parameters can be retained on the `url` and `tab page`)
+
+# 3.3.5 (2022-8-19)
+
+### 🎫 Feat
+
+- Secondary encapsulation of `Table` of `element-plus` into [@pureadmin/table](https://github.com/pure-admin/pure-admin-table), providing flexible configuration items and integrating into the platform
+- Secondary encapsulation of `Descriptions` of `element-plus` into [@pureadmin/descriptions](https://github.com/pure-admin/pure-admin-descriptions), providing flexible configuration items and integrating into the platform
+- Centralize most of the tools and hooks of the platform to [@pureadmin/utils](https://pure-admin-utils.netlify.app), and delete the code concentrated in this library to reduce the size of the platform
+- Add [unplugin-vue-define-options](https://www.npmjs.com/package/unplugin-vue-define-options) plugin, the page can directly write `defineOptions({name: custom name})`
+- Add project files, language analysis tool [cloc](https://www.npmjs.com/package/cloc)
+- Added landing page internationalization
+- Add full routing configuration table type declaration
+- Add virtual listing page demo
+- Add `PDF` preview page demo
+- Added export `excel` page demo
+- Added blank page demo without `Layout`
+
+### ✔️ Refactor
+
+- Refactored the theme color to adapt to `element-plus` dark mode (also solved the problem that the same element `css` in `3.3.0` and earlier versions was overwritten many times, resulting in poor style debugging)
+- Refactored route reset function
+
+### 🍏 Perf
+
+- The compatible project storage directory is named in Chinese, but we really do not recommend Chinese naming, because a library may not escape the Chinese path, causing the project to crash
+- Optimized interface type
+
+### 🐞 Bug fixes
+
+- Fixed async routes with `showlink` set to `false`, not showing after refresh
+- Fixed vertical navigation menu text being hidden after collapse when there is no `icon`
+
+# 3.3.0 (2022-5-11)
+
+### 🎫 Feat
+
+- Add user management page demo
+- Add role management page demo
+- Add department management page demo
+- Add card list page demo
+- Integrated form designer
+- Added `PPT` demo
+- Added anti-shake interception demo in the function menu
+- Upgrade `wangeditorV5` (and support internationalization and custom themes)
+- Integrate `tauri` version
+- Added barcode function
+- Added QR code function
+- Use the `Cascader` cascade selector in `element-plus` to write a three-level and two-level linkage demo of Chinese provinces and cities
+- Integrate `Swiper` plugin
+- Routing supports passing `component`, representing the component path
+- Added pre-release packaging mode
+- Add [hooks] to close a tag (https://github.com/pure-admin/vue-pure-admin/commit/5e8723a031923e79f507e5a17151d3bd88a51523)
+
+### ✔️ Refactor
+
+- Refactored the landing page to be more inclined to the actual business scenario
+- Use `unocss` instead of `windicss`, `unocss` has better performance in development environment, no memory leaks, and `api` is compatible with `windicss`
+
+### 🍏 Perf
+
+- Optimized the style of the `split-pane` component for the platform
+- Optimize internationalization, no longer pass the `i18n` field in the route, the platform automatically reads the files in the `locales` folder of the root directory for internationalization matching
+- Optimized icon selector
+- Optimize `layout` to display user information [commit](https://github.com/pure-admin/vue-pure-admin/commit/56f9dc85e7fbe0637605c43577c794de9f8968aa)
+
+### 🐞 Bug fixes
+
+- Fix route initialization problem (Cannot access 'constantRoutes' before initialization)
+
+# 3.2.0 (2022-3-22)
+
+### 🎫 Feat
+
+- Icon selection component
+- Menu search function
+- Added results page
+- Extended `element-plus` timeline component
+- Extended `element-plus` tree component to support connecting lines
+- Add tree selector, support single and multiple selection
+
+### 🍏 Perf
+
+- Optimized the error page UI
+- Optimize the internationalization function
+- Optimized routing `rank` sorting, compatible with the case where the value of the `rank` field in the routing `meta` is `null`
+
+### 🐞 Bug fixes
+
+- Fixed the situation where the menu expands and folds will freeze on some computers
+
+# 3.1.0 (2022-3-3)
+
+### 🎫 Feat
+
+- iframe supports dynamic loading
+- Watermark example
+- Print examples (pictures, tables, echarts)
+- Add running and packaging information, use `lodash-unified` to replace `lodash-es`, `lodash-unified` supports `ESM` and is compatible with `CJS`
+
+### 🐞 Bug fixes
+
+- Fixed jumping to another menu page alone in one menu page, the routing page jumped but the tab page was not displayed
+- Fixed the route that returns dynamic level 3 and above in the background, and the menu does not correspond to the page
+
+# 3.0 (2022-2-14)
+
+### 🎫 Feat
+
+- Added mix navigation
+
+### 🐞 Bug fixes
+
+- Fix tab page bug
+
+# 2.9.0 (2022-2-5)
+
+### 🎫 Feat
+
+- Added package size analysis, command `pnpm report`
+
+### 🍏 Perf
+
+- Use `iconify` to introduce icons on demand, optimize icon size, and reduce network requests
+- Optimize the route, the route can not pass `showLink: true`, it is displayed by default
+
+# 2.8.5 (2022-1-21)
+
+### 🎫 Feat
+
+- Added `WindiCSS` support
+- Add online environment remove console plugin `vite-plugin-remove-console`
+
+### ✔️ Refactor
+
+- Replace `@element-plus/icons-vue` with `@iconify-icons/ep`
+
+# 2.8.0(2022-1-4)
+
+### 🎫 Feat
+
+-Added dark theme
+-Add element-plus custom theme
+-Add guide page
+
+### 🍏 Perf
+
+-Optimize internationalization, compatible with the vscode plug-in i18n Ally smart reminder
+-Optimize the back-end return routing structure
+-Optimize local storage, with four built-in buttons `responsive-configure`, `responsive-locale`, `responsive-layout`, `responsive-tags`, which are basic configuration, international configuration, layout configuration, and tab persistent configuration
+
+# 2.7.0(2021-12-18)
+
+### 🎫 Feat
+
+- New tab reuse
+- New message reminder template
+- Added front-end menu tree structure example
+- Refactor routing, optimize permissions modules, and bring a more convenient experience
+- Refactor the env environment and http request to bring a more convenient experience
+- Currently, the tabs of the platform are forced to associate with local storage. The next step is to put the tabs in the memory by default and support configurable persistent tabs
+- Navigation menu icons support fontawesome, iconfont, remixicon, element-plus/icons, custom svg
+- Update font-awesome to version 5.0, because versions below 5.0 are no longer officially maintained, but the platform will still be compatible with font-awesome4 version
+
+### 🍏 Perf
+
+- Optimize the tab page to bring a better interactive experience
+- Routing title supports direct writing in Chinese, which can be separated from internationalization
+- Route history mode is read from env and supports base parameter
+
+# 2.6.0(2021-11-10)
+
+### 🎫 Feat
+
+- Refactored navigation theme color, supports multiple color schemes
+- Refactored login page, illustration style
+
+### 🍏 Perf
+
+- Optimize the navigation style
+- Eliminate strong navigation dependence on vxe-table
+- Synchronously update element-plus, replace Font Icon with SVG Icon
+
+# 2.1.0(2021-10-14)
+
+### 🎫 Feat
+
+- Route animation (each route can add different animations)
+- Extra icons (for example, this is a newly added page, a new icon is displayed in the upper right corner of the routing menu)
+- Extract the default configuration options
+- Perfect type file
+
+### 🐞 Bug fixes
+
+- Fix the issue of element-plus internationalization
+- Fix routing issues
+- Fix navigation adaptation problem
+
+# 2.0.1(2021-9-29)
+
+### 🎫 Feat
+
+- Feat horizontal nav
+
+# 2.0.0(2021-4-13)
+
+### 🎫 Chores
+
+- Release 2.0.0 version
diff --git a/Yi.Pure.Vue3/CHANGELOG.md b/Yi.Pure.Vue3/CHANGELOG.md
new file mode 100644
index 00000000..af4d69e8
--- /dev/null
+++ b/Yi.Pure.Vue3/CHANGELOG.md
@@ -0,0 +1,928 @@
+# 5.8.0 (2024-08-19)
+
+### 🎫 Feat
+
+- Added a second button permission command (judged based on the `permissions` field returned by the login interface)
+- Functional pop-up box `ReDialog` adds whether to enable the `loading` loading animation function after clicking the confirmation button
+- `PureTableBar` component adds full screen and exit full screen functions
+- `VxeTableBar` component adds full screen and exit full screen functions
+- The OK button of the `ReDialog` component provides the close button animation `closeLoading` function
+- Add development environment code debugging `vite-plugin-vue-inspector` plug-in to improve development experience
+- Added `vite-plugin-checker` plugin for stricter type and `eslint` verification
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the current tab cannot be closed after configuring the routing attribute `fixedTag` to `false`
+- Fixed the issue where `logo` cannot be hidden in top menu mode
+
+### 🍏 Perf
+
+- Optimize type hints for custom instructions
+- Optimize the press enter login function on the login page
+- Optimize the mask level of the left menu on the mobile side
+- Optimize system management-permission function style of role management
+- Upgraded dependencies, compatible with the latest version of `element-plus`
+
+# 5.7.0 (2024-06-04)
+
+### 🎫 Feat
+
+- Add Google style tabs
+
+### 🐞 Bug fixes
+
+- Fixed the issue where the text exceeds and is not hidden after the menu is folded in Firefox browser
+
+# 5.6.0 (2024-05-14)
+
+### ✔️ Refactor
+
+- Upgrade `pnpm` to `v9` version, requiring `pnpm` version `>=9`
+
+### 🐞 Bug fixes
+
+- Fixed the issue where clicking on an external link would jump twice
+
+### 🍏 Perf
+
+- Optimize `ReSegmented` component
+
+# 5.5.0 (2024-05-07)
+
+### 📄 Docs
+
+The addresses of the document site and full version preview site have been changed!
+
+- The latest document site address: https://pure-admin.github.io/pure-admin-doc
+- The latest full version preview site address: https://pure-admin.github.io/vue-pure-admin
+
+### ✔️ Refactor
+
+- Reconstruct the `layout` file naming convention to make it more readable
+
+### 🎫 Feat
+
+- Add new component `ReVxeTableBar` to be used with `vxe-table`
+
+### 🐞 Bug fixes
+
+- Fixed the issue where the background color is white when `FixedHeader` is set to `false` in dark mode
+- Fixed the problem of delayed closing of functional pop-up window `ReDialog` when clicking the cancel button
+
+### 🍏 Perf
+
+- Optimize account settings-avatar upload function
+
+# 5.4.0 (2024-04-18)
+
+### 🎫 Feat
+
+- Add global disabled attribute `disabled` to `ReSegmented` component
+- Added mind map examples
+- Functional pop-up box `ReDialog` adds `Popconfirm` bubble confirmation box
+- `pure-table` adds `headerSlot` custom header slot usage example
+- The route adds a configurable `fixedTag` attribute, which determines whether the current menu name is fixedly displayed on the tab and cannot be closed.
+- Added account setting function page and compatible with mobile terminals
+- Upgrade `eslint9` and related compatibility processing
+- Added global configuration `MaxTagsLevel` property to set the maximum number of open tabs
+- Full coverage of the internationalization of the core code of the framework (only the internationalization of the business code needs to be processed)
+
+### 🐞 Bug fixes
+
+- Fixed the issue where columns cannot be dragged normally when there are multiple `RePureTableBar` components on a page
+- Fixed the problem of icon display style after the third-level menu is folded to the left
+- Fixed the issue where the font color does not take effect after refreshing the account settings page
+- Fixed the issue where the `refreshToken` parameter is empty when calling the refresh `token` interface
+
+### 🍏 Perf
+
+- Optimize login interface
+- Optimize the logic of obtaining the top menu
+- Optimize request whitelist logic and be compatible with more scenarios
+- Simplified export and import usage in `store` files
+- Removed unnecessary `cloc` tool dependency package, which uses the `GPL` open source license and is controversial
+- Optimize the types of `post` and `get` utility functions in `src/utils/http` files
+
+# 5.3.0 (2024-03-28)
+
+### ✔️ Refactor
+
+- Reconstruct internationalized file naming conventions and demo pages with code location hints
+
+### 🎫 Feat
+
+- Add `MQTT` example
+- Added `docx` and `excel` file preview examples
+- The `ReSegmented` segmented controller has a new `size` attribute, which can set three sizes
+- The `RePureTableBar` component and `pure-admin-table` support international switching of table headers
+
+# 5.2.0 (2024-03-22)
+
+### ✔️ Refactor
+
+- Place the full screen button at the top to make it visible and easy to operate
+
+### 🎫 Feat
+
+- Added `v-ripple` command (water ripple effect)
+- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
+- Added roaming guidance based on `ElTour`
+- Improve role management-menu permission function, novel interactive experience
+- Add system monitoring-online users
+- Add system monitoring-login log
+- Add system monitoring-operation log
+- Add system monitoring-system log
+- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
+- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
+- Add [vue-flow](https://vueflow.dev/) flow chart example
+- Add virtual table example
+- Added Gantt chart example
+- Add graphic verification code example
+- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
+- Add a folding and expanding menu function on the middle right side of the left menu
+
+### 🐞 Bug fixes
+
+- Fixed the scroll bar issue when clicking on the registration page under `windwos`
+- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
+- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
+- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
+
+### 🍏 Perf
+
+- All pages of system management and system monitoring are compatible with mobile terminals
+
+# 5.1.0 (2024-03-02)
+
+### ✔️ Refactor
+
+- Reconstruct the tab page `UI` to make it more convenient to click the close button
+
+### 🎫 Feat
+
+- Added multi-select card example
+- The menu supports all browser behaviors of right-clicking on the `a` tag (opening links in new tabs, new windows, dragging and dropping to open in new tabs, etc.)
+- Added search history and collection functions to menu search
+
+### 🐞 Bug fixes
+
+- Fixed the problem of scroll bars appearing on the login page under `windows` system
+
+### 🍏 Perf
+
+- Standardize the naming rules when registering local icons to better match the icon selector
+
+# 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
+
+- Add a `demo` example combined with `Form` for the functional pop-up box component
+- wrapper `el-col` component of `element-plus`
+- Add `beforeCancel` and `beforeSure` callbacks to the functional popup component, which can suspend the closing of the popup
+- Improve `System Management-Department Management` page
+- Optimize `PureTableBar` component, add drag and drop function for column display
+
+### 🐞 Bug fixes
+
+- Fix the problem that the page cache still exists when you click the tab to reload after turning on `keepAlive`
+- Fix the problem that the left menu will flicker after refreshing the tab in the mixed mode menu
+
+### 🍏 Perf
+
+- Optimize home page layout
+- Dependency update to `vue3.3+` and remove `unplugin-vue-define-options` plugin
+
+# 4.0.0 (2023-05-09)
+
+[View 4.0.0 version optimization details](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)
+
+### ✔️ Refactor
+
+- Use `css` pseudo-class `before` to refactor the activation background of the menu, similar to [ant.design-menu](https://ant.design/components/menu-cn#components-menu-demo-inline-collapsed)
+
+### 🎫 Feat
+
+- Optimize the extra icon on the right side of the menu name to support more icon rendering modes
+- Configurable home menu display and hide
+- Promote the namespace of the local reactive store into the global configuration
+- Added functional popup components and `demo` examples, making it easier to use
+- `PureTableBar` component adds column display function
+
+### 🐞 Bug fixes
+
+- Fixed the `echarts` chart on the home page not adapting to the container when the menu is collapsed or expanded
+- Fixed the problem that when there is only one submenu, the search function cannot find the submenu
+- Fix the problem that the global configuration `Theme` is empty cache for `light` and re-login theme configuration does not take effect
+- Fixed the problem that the search boxes were not automatically gathered after the menu search function pop-up box was opened
+- Fixed the problem of toolbar button text display after pressing `ESC` to exit full screen
+- Fix the problem of `tooltip` click penetration in the notification bar of the mobile terminal
+- Fixed the problem that the text is not displayed when switching to `horizontal` navigation mode after the left menu is collapsed
+- Fixed the problem that the status cannot be reset when closing other tabs when navigating `tab`
+- Fix the page hot update error caused by uninitialized environment variables in the `getHistoryMode` function
+- Fixed too many `tabs` in the navigation, which caused the tabs on the left to be closed and could not be displayed normally
+- Fixed the problem of full-screen error reporting when clicking on the content area
+- Fixed the problem that the left navigation bar is always loading after opening `showLink:false` page under hybrid navigation and refreshing
+- Fixed the left navigation memory overflow problem caused by calling `initRouter` function in mixed mode navigation
+- Fixed the problem that the cached page was not destroyed when closing the left, right, other, and all tab operations
+- Fix the problem that the route passes parameters through `query` or `params`, and the cache invalidation problem occurs when the tab page is closed after the cache is enabled
+- Fixed the problem that the breadcrumbs could not find the parent path in the `params` route parameter passing mode
+
+### 🍏 Perf
+
+- Optimize `buttons` named slot of `RePureTableBar` component
+- Optimize navigation style and menu collapse animation
+- Optimize the extra icon on the right side of the menu name to support more icon rendering modes
+- Optimize `logo` image and text layout and unified configuration
+- After the routing information `showLink` is set to `false`, the current routing information will not be added to the tab
+- Export `addPathMatch` function
+- All `getters` in `pinia` are changed to the official recommended way of writing, and `this` is changed to `state` to automatically deduce the type
+- Adapt to the `api` of the latest version of `pure-table`
+- Ignore `deprecation` warnings for `sourcemap-codec` and `stable` dependencies
+- Remove `"incremental": true` from `tsconfig.json` file
+- Update `stylelint` and related configurations to the latest, strengthen style validation
+- Breadcrumbs are removed from the homepage, and are displayed according to the selected menu. The homepage is no longer fixed in the breadcrumbs, and the routing monitoring of the breadcrumbs page is optimized
+
+# 3.9.7 (2022-12-26)
+
+### 🍏 Perf
+
+- Use `path.posix.resolve` instead of `path.resolve` to avoid drive letter problems when using `electron` in `windows` environment
+- By default, the `CachingAsyncRoutes` dynamic routing cache is turned off locally, making it easier to debug in the development environment. It is not necessary to clear the local cached dynamic routing every time you modify the dynamic routing. It is recommended to enable it in the production environment
+
+# 3.9.6 (2022-12-19)
+
+### 🎫 Chores
+
+- Upgrade `vite4` version
+
+### 🐞 Bug fixes
+
+- Fix the problem that `hmr` of `vite` is slow due to the wrong way of importing `tailwind.css`
+
+### 🍏 Perf
+
+- Update [@pureadmin/theme](https://github.com/pure-admin/pure-admin-theme) to the latest version, bringing more friendly type hints
+- Optimize [PureTableBar](https://github.com/pure-admin/vue-pure-admin/tree/main/src/components/RePureTableBar) component
+- Optimize the business code of the system management page to bring better code reference
+
+# 3.9.5 (2022-12-13)
+
+### ✔️ Refactor
+
+- completely removed `lodash` and its related libraries
+  [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-5-%E7 %89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C% E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%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
+
+- Add `@pureadmin/table` table dynamic column example
+
+### 🐞 Bug fixes
+
+- Fix dynamic route `rank` issue
+- Fix dark theme styling issues
+
+### 🍏 Perf
+
+- optimize the route `rank`, when `rank` does not exist, it will be created automatically according to the order, the home page route will always be the first
+
+# 3.9.4 (2022-12-05)
+
+### ✔️ 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)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` table selector (single select, multiple select) example
+
+# 3.9.3 (2022-12-04)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` pagination and loading animation example
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the refresh page would be blank due to changes in dynamic routes stored in local storage after enabling `CachingAsyncRoutes`
+- Fixed `Tooltip` displayed abnormally after the menu is collapsed
+
+### 🍏 Perf
+
+- Expand the use of local icons, the first launch of the full version reduces `13` requests again
+- When the menu loading is slow, add `loading` animation to optimize user experience
+- Theme initialization is placed in `onBeforeMount` to avoid flashing of the initialization page
+
+# 3.9.2 (2022-12-03)
+
+### 🍏 Perf
+
+- Global coverage of `el-dialog`, `el-drawer`, `el-message-box`, `el-notification` components of `element-plus`The style of the close icon in the upper right corner makes it more vivid [specific modification Code record](https://github.com/pure-admin/vue-pure-admin/commit/c80818d792276666aaea4b18413a0f08777f2ed1)
+- The packaging output information is compatible with different packaging output paths
+- Optimize some animations
+
+# 3.9.1 (2022-12-02)
+
+### 🎫 Feat
+
+- Add `CachingAsyncRoutes` whether to enable dynamic route cache local global configuration, default `true`
+- Add `TooltipEffect` global configuration, you can configure the `effect` attribute of all `el-tooltip` on the platform body, the default `light`, does not affect the business code
+- Add directory, menu text exceeds display `Tooltip` text prompt demo
+
+### 🍏 Perf
+
+- Optimize `initRouter` method, compatible with `sso` scenario
+- Breadcrumb animation style optimization
+
+# 3.9.0 (2022-11-30)
+
+### 🐞 Bug fixes
+
+- Fixed the jitter problem caused by the scroll bar on the page when the text is too long when exiting the full screen
+- Fix some type errors
+
+### 🍏 Perf
+
+- perf: Great optimization of the first screen loading. Compared with the version before `3.9.0`, the first screen requests are reduced by `71`, and the first screen loading resources are reduced by `4.1 MB`
+
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- Add `message` message prompt function, compatible with `Element Plus` and `Ant ​​Design` two `Message` style styles, use and package size are extremely low cost and adapt to dark mode, really fragrant 😂
+
+### 🍏 Perf
+
+- perf: No need to install `@vue/runtime-core`, compatible with `volar` hints of all `element-plus` components
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- Great optimization, remove `@pureadmin/components` and use compatible writing, the package size of the platform is reduced by `0.4` MB before compression is not enabled, and the resource of `2.3` MB is reduced for the first screen request, which is for the [lite version ](https://github.com/pure-admin/pure-admin-thin) is a very big optimization, the streamlined version has synchronized code
+
+# 3.8.0 (2022-11-26)
+
+### 🎫 Feat
+
+- Add `@pureadmin/table` multiple data format (deep structure) examples
+- Add `@pureadmin/table` image preview example
+- Add `@pureadmin/table` row and column drag example
+- Add `@pureadmin/table` context menu example
+- Add `@pureadmin/table` export `Excel` example
+- Add `@pureadmin/table` edit cell example
+- Add `@pureadmin/table` watermark example
+- Add `@pureadmin/table` print example
+- Add `@pureadmin/table` embedded `echarts` chart example
+- Add `svgo` to compress all `svg` files on the platform to reduce the size
+
+### 🍏 Perf
+
+- The static routing platform automatically imports without manual import
+- Improved global type hints
+- Optimize `vite` to rely on pre-built configurations in the platform, and the loading speed of page switching is significantly accelerated
+
+# 3.7.1 (2022-11-22)
+
+### 🔥 hotfix
+
+- Fixed the problem that the tab page may not be reset when logging out when the tab page cache is not turned on
+
+# 3.7.0 (2022-11-21)
+
+### ✔️ Refactor
+
+- Replace `driver.js` with `intro.js`
+
+### 🎫 Feat
+
+- Add front-end single sign-on, test address https://pure-admin.github.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/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
+
+- Repair the in-page menu with parameters to jump to each other, the label is not selected and highlighted
+
+### 🍏 Perf
+
+- Removed deprecated `$baseUrl`
+- Compatible importing a certain library leads to `global is not defined` error, importing `src/utils/globalPolyfills.ts` file into `src/main.ts` can solve the problem
+- Remove `@vitejs/plugin-legacy`, `vue3` cannot make it support `ie` through any tool
+
+# 3.6.4 (2022-11-10)
+
+### 🎫 Feat
+
+- Menu icon `icon` supports using online icons
+
+### 🐞 Bug fixes
+
+- Fixed `vxe-button` font color issue after mouse overlay and some other style issues
+
+### 🍏 Perf
+
+- Optimize the routing guard, if you have logged in and there is login information, you cannot jump to the routing whitelist, but continue to stay on the current page
+- Removed `baseURL` and global environment proxy, and can be written directly in `vite.config.ts`, which is convenient and supports multiple proxy addresses
+
+# 3.6.3 (2022-11-01)
+
+### 🎫 Feat
+
+- Static resource classification and packaging
+- Add danmaku component `demo`
+
+### 🐞 Bug fixes
+
+- Fix the `collapse` property added in the latest version of `tailwindcss` conflicts with the platform `class` class name
+- Fix that when the `token` expires, if the page has multiple requests, the `token` will be refreshed repeatedly
+
+# 3.6.2 (2022-10-27)
+
+### ✔️ Refactor
+
+- Replace `/@/` alias with `@/` alias
+
+# 3.6.1 (2022-10-27)
+
+### 🎫 Feat
+
+- Add whether to start `cdn` for packaging to replace the local library configuration, the default `false` does not start
+- Added optional `gzip` and `brotli` compression modes for packaging builds
+
+### 🐞 Bug fixes
+
+- Fix `title` too long display style problem
+- Fix the parent `name` in the route should not be repeated with the child `name`, which will cause redirection to jump `404` problem
+
+### 🍏 Perf
+
+- Upgrade `axios` to the latest version
+
+# 3.6.0 (2022-10-25)
+
+### 🎫 Feat
+
+- Add file download `demo`
+- Add typewriter component `demo`
+- Added `json` editor `demo`
+
+### ✔️ Refactor
+
+- Refactor the permission module, adopt the most commonly used `RBAC` (Role-Based Access List): role-based permission control (User -> Role -> Permission), and update the page permission and button permission `demo` example, button Permissions support three operation modes (judging permissions in component mode, judging permissions in function mode, and judging permissions in instruction mode)
+
+### 🐞 Bug fixes
+
+- Fixed the theme not being emptied when clearing the cache and returning to the login page
+- Fix `menu` display problem in production environment in `horizontal` mode
+- Fixed the problem that the `mix` mixed mode navigation might not be displayed in the left menu of the production environment
+- After the `token` expires, calling the refresh `token` interface will cause an infinite loop
+
+### 🍏 Perf
+
+- Removed uncommon `@apply` from `tailwind.css`
+- Replace `//` comments with `/** */`, which is more friendly to the editor's intellisense
+- Optimize the login enter event
+- Simplified some functions, eliminated useless functions, and optimized page loading speed
+
+# 3.5.0 (2022-9-10)
+
+### 🎫 Feat
+
+- Add `cssnano` to compress the size of `css` when packaging
+- Add `element-plus` seamless scrolling `Table` page demo
+- Open `vscode` bracket pair guide
+
+### ✔️ Refactor
+
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.github.io/pure-admin-doc/pages/tailwindcss/)
+
+### 🐞 Bug fixes
+
+- `token` expires, refresh the infinite loop
+
+### 🍏 Perf
+
+- When resetting the route, clear the cached page
+
+# 3.4.6 (2022-8-23)
+
+### 🐞 Bug fixes
+
+- `process` is not defined in path
+- Fixed an error when dynamic routing `children` is an empty array
+- Fixed `iframe` loading failure
+
+# 3.4.5 (2022-8-22)
+
+### 🐞 Bug fixes
+
+- Fix local responsive storage object setting issue
+
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- Optimized routing
+- Optimized for mobile compatibility
+- Optimized routing parameters (`query`, `params` way to refresh the page does not need to open the tab page cache, the parameters can be retained on the `url` and `tab page`)
+
+# 3.3.5 (2022-8-19)
+
+### 🎫 Feat
+
+- Secondary encapsulation of `Table` of `element-plus` into [@pureadmin/table](https://github.com/pure-admin/pure-admin-table), providing flexible configuration items and integrating into the platform
+- Secondary encapsulation of `Descriptions` of `element-plus` into [@pureadmin/descriptions](https://github.com/pure-admin/pure-admin-descriptions), providing flexible configuration items and integrating into the platform
+- Centralize most of the tools and hooks of the platform to [@pureadmin/utils](https://pure-admin-utils.netlify.app), and delete the code concentrated in this library to reduce the size of the platform
+- Add [unplugin-vue-define-options](https://www.npmjs.com/package/unplugin-vue-define-options) plugin, the page can directly write `defineOptions({name: custom name})`
+- Add project files, language analysis tool [cloc](https://www.npmjs.com/package/cloc)
+- Added landing page internationalization
+- Add full routing configuration table type declaration
+- Add virtual listing page demo
+- Add `PDF` preview page demo
+- Added export `excel` page demo
+- Added blank page demo without `Layout`
+
+### ✔️ Refactor
+
+- Refactored the theme color to adapt to `element-plus` dark mode (also solved the problem that the same element `css` in `3.3.0` and earlier versions was overwritten many times, resulting in poor style debugging)
+- Refactored route reset function
+
+### 🍏 Perf
+
+- The compatible project storage directory is named in Chinese, but we really do not recommend Chinese naming, because a library may not escape the Chinese path, causing the project to crash
+- Optimized interface type
+
+### 🐞 Bug fixes
+
+- Fixed async routes with `showlink` set to `false`, not showing after refresh
+- Fixed vertical navigation menu text being hidden after collapse when there is no `icon`
+
+# 3.3.0 (2022-5-11)
+
+### 🎫 Feat
+
+- Add user management page demo
+- Add role management page demo
+- Add department management page demo
+- Add card list page demo
+- Integrated form designer
+- Added `PPT` demo
+- Added anti-shake interception demo in the function menu
+- Upgrade `wangeditorV5` (and support internationalization and custom themes)
+- Integrate `tauri` version
+- Added barcode function
+- Added QR code function
+- Use the `Cascader` cascade selector in `element-plus` to write a three-level and two-level linkage demo of Chinese provinces and cities
+- Integrate `Swiper` plugin
+- Routing supports passing `component`, representing the component path
+- Added pre-release packaging mode
+- Add [hooks] to close a tag (https://github.com/pure-admin/vue-pure-admin/commit/5e8723a031923e79f507e5a17151d3bd88a51523)
+
+### ✔️ Refactor
+
+- Refactored the landing page to be more inclined to the actual business scenario
+- Use `unocss` instead of `windicss`, `unocss` has better performance in development environment, no memory leaks, and `api` is compatible with `windicss`
+
+### 🍏 Perf
+
+- Optimized the style of the `split-pane` component for the platform
+- Optimize internationalization, no longer pass the `i18n` field in the route, the platform automatically reads the files in the `locales` folder of the root directory for internationalization matching
+- Optimized icon selector
+- Optimize `layout` to display user information [commit](https://github.com/pure-admin/vue-pure-admin/commit/56f9dc85e7fbe0637605c43577c794de9f8968aa)
+
+### 🐞 Bug fixes
+
+- Fix route initialization problem (Cannot access 'constantRoutes' before initialization)
+
+# 3.2.0 (2022-3-22)
+
+### 🎫 Feat
+
+- Icon selection component
+- Menu search function
+- Added results page
+- Extended `element-plus` timeline component
+- Extended `element-plus` tree component to support connecting lines
+- Add tree selector, support single and multiple selection
+
+### 🍏 Perf
+
+- Optimized the error page UI
+- Optimize the internationalization function
+- Optimized routing `rank` sorting, compatible with the case where the value of the `rank` field in the routing `meta` is `null`
+
+### 🐞 Bug fixes
+
+- Fixed the situation where the menu expands and folds will freeze on some computers
+
+# 3.1.0 (2022-3-3)
+
+### 🎫 Feat
+
+- iframe supports dynamic loading
+- Watermark example
+- Print examples (pictures, tables, echarts)
+- Add running and packaging information, use `lodash-unified` to replace `lodash-es`, `lodash-unified` supports `ESM` and is compatible with `CJS`
+
+### 🐞 Bug fixes
+
+- Fixed jumping to another menu page alone in one menu page, the routing page jumped but the tab page was not displayed
+- Fixed the route that returns dynamic level 3 and above in the background, and the menu does not correspond to the page
+
+# 3.0 (2022-2-14)
+
+### 🎫 Feat
+
+- Added mix navigation
+
+### 🐞 Bug fixes
+
+- Fix tab page bug
+
+# 2.9.0 (2022-2-5)
+
+### 🎫 Feat
+
+- Added package size analysis, command `pnpm report`
+
+### 🍏 Perf
+
+- Use `iconify` to introduce icons on demand, optimize icon size, and reduce network requests
+- Optimize the route, the route can not pass `showLink: true`, it is displayed by default
+
+# 2.8.5 (2022-1-21)
+
+### 🎫 Feat
+
+- Added `WindiCSS` support
+- Add online environment remove console plugin `vite-plugin-remove-console`
+
+### ✔️ Refactor
+
+- Replace `@element-plus/icons-vue` with `@iconify-icons/ep`
+
+# 2.8.0(2022-1-4)
+
+### 🎫 Feat
+
+-Added dark theme
+-Add element-plus custom theme
+-Add guide page
+
+### 🍏 Perf
+
+-Optimize internationalization, compatible with the vscode plug-in i18n Ally smart reminder
+-Optimize the back-end return routing structure
+-Optimize local storage, with four built-in buttons `responsive-configure`, `responsive-locale`, `responsive-layout`, `responsive-tags`, which are basic configuration, international configuration, layout configuration, and tab persistent configuration
+
+# 2.7.0(2021-12-18)
+
+### 🎫 Feat
+
+- New tab reuse
+- New message reminder template
+- Added front-end menu tree structure example
+- Refactor routing, optimize permissions modules, and bring a more convenient experience
+- Refactor the env environment and http request to bring a more convenient experience
+- Currently, the tabs of the platform are forced to associate with local storage. The next step is to put the tabs in the memory by default and support configurable persistent tabs
+- Navigation menu icons support fontawesome, iconfont, remixicon, element-plus/icons, custom svg
+- Update font-awesome to version 5.0, because versions below 5.0 are no longer officially maintained, but the platform will still be compatible with font-awesome4 version
+
+### 🍏 Perf
+
+- Optimize the tab page to bring a better interactive experience
+- Routing title supports direct writing in Chinese, which can be separated from internationalization
+- Route history mode is read from env and supports base parameter
+
+# 2.6.0(2021-11-10)
+
+### 🎫 Feat
+
+- Refactored navigation theme color, supports multiple color schemes
+- Refactored login page, illustration style
+
+### 🍏 Perf
+
+- Optimize the navigation style
+- Eliminate strong navigation dependence on vxe-table
+- Synchronously update element-plus, replace Font Icon with SVG Icon
+
+# 2.1.0(2021-10-14)
+
+### 🎫 Feat
+
+- Route animation (each route can add different animations)
+- Extra icons (for example, this is a newly added page, a new icon is displayed in the upper right corner of the routing menu)
+- Extract the default configuration options
+- Perfect type file
+
+### 🐞 Bug fixes
+
+- Fix the issue of element-plus internationalization
+- Fix routing issues
+- Fix navigation adaptation problem
+
+# 2.0.1(2021-9-29)
+
+### 🎫 Feat
+
+- Feat horizontal nav
+
+# 2.0.0(2021-4-13)
+
+### 🎫 Chores
+
+- Release 2.0.0 version
diff --git a/Yi.Pure.Vue3/CHANGELOG.zh_CN.md b/Yi.Pure.Vue3/CHANGELOG.zh_CN.md
new file mode 100644
index 00000000..68c4ef65
--- /dev/null
+++ b/Yi.Pure.Vue3/CHANGELOG.zh_CN.md
@@ -0,0 +1,927 @@
+# 5.8.0 (2024-08-19)
+
+### 🎫 Feat
+
+- 新增第二种按钮权限指令（根据登录接口返回的`permissions`字段进行判断）
+- 函数式弹框`ReDialog`添加点击确认按钮后是否开启`loading`加载动画功能
+- `PureTableBar`组件添加全屏和退出全屏功能
+- `VxeTableBar`组件添加全屏和退出全屏功能
+- `ReDialog`组件的确定按钮提供关闭按钮动画`closeLoading`功能
+- 添加开发环境代码调试`vite-plugin-vue-inspector`插件，提升开发体验
+- 添加`vite-plugin-checker`插件，更严格的类型和`eslint`校验
+
+### 🐞 Bug fixes
+
+- 修复配置路由属性`fixedTag`为`false`后当前标签页不可关闭的问题
+- 修复顶部菜单模式下`logo`不可隐藏的问题
+
+### 🍏 Perf
+
+- 优化自定义指令的类型提示
+- 优化登录页回车登录功能
+- 优化移动端左侧菜单遮罩层级
+- 优化系统管理-角色管理的权限功能样式
+- 升级依赖，`element-plus`最新版兼容处理
+
+# 5.7.0 (2024-06-04)
+
+### 🎫 Feat
+
+- 添加谷歌风格的页签
+
+### 🐞 Bug fixes
+
+- 修复在火狐浏览器中菜单折叠后，文字超出未隐藏的问题
+
+# 5.6.0 (2024-05-14)
+
+### ✔️ Refactor
+
+- 升级`pnpm`至`v9`版本，规定`pnpm`版本`>=9`
+
+### 🐞 Bug fixes
+
+- 修复点击外链会跳转两次的问题
+
+### 🍏 Perf
+
+- 优化`ReSegmented`组件
+
+# 5.5.0 (2024-05-07)
+
+### 📄 Docs
+
+文档站和完整版预览站地址更换！
+
+- 最新文档站地址：https://pure-admin.github.io/pure-admin-doc
+- 最新完整版预览站地址：https://pure-admin.github.io/vue-pure-admin
+
+### ✔️ Refactor
+
+- 重构`layout`文件命名规范，更易读
+
+### 🎫 Feat
+
+- 添加新组件`ReVxeTableBar`搭配`vxe-table`使用
+
+### 🐞 Bug fixes
+
+- 修复深色模式下设置`FixedHeader`为`false`时，背景色为白色的问题
+- 修复函数式弹窗`ReDialog`点击取消按钮，延时关闭无效问题
+
+### 🍏 Perf
+
+- 优化账号设置-头像上传功能
+
+# 5.4.0 (2024-04-18)
+
+### 🎫 Feat
+
+- 分段控制器组件添加全局禁用属性`disabled`
+- 添加思维导图示例
+- 函数式弹框`ReDialog`添加`Popconfirm`气泡确认框
+- `pure-table`添加`headerSlot`自定义表头插槽用法示例
+- 路由添加可配置的`fixedTag`属性，作用为当前菜单名称是否固定显示在标签页且不可关闭
+- 添加账户设置功能页面且兼容移动端
+- 升级`eslint9`，相关兼容处理
+- 添加全局配置`MaxTagsLevel`属性，可设置打开标签页最大数
+- 框架核心代码国际化全量覆盖（仅需处理业务代码国际化即可）
+
+### 🐞 Bug fixes
+
+- 修复当一个页面存在多个`RePureTableBar`组件，列无法正常拖动问题
+- 修复三级菜单向左折叠后图标显示样式问题
+- 修复账户设置页面，刷新后字体颜色未生效的问题
+- 修复调用刷新`token`接口时，`refreshToken`参数为空的问题
+
+### 🍏 Perf
+
+- 优化登录接口
+- 优化获取顶级菜单逻辑
+- 优化请求白名单逻辑，兼容更多场景
+- 简化`store`文件中导出和导入用法
+- 移除非必要的`cloc`工具依赖包，它使用`GPL`开源许可证具有争议性
+- 优化`src/utils/http`文件中`post`和`get`工具函数的类型
+
+# 5.3.0 (2024-03-28)
+
+### ✔️ Refactor
+
+- 重构国际化文件命名规范以及演示页加上代码位置提示
+
+### 🎫 Feat
+
+- 添加`MQTT`示例
+- 添加`docx`、`excel`文件预览示例
+- `ReSegmented`分段控制器新增`size`属性，可设置三种尺寸
+- `RePureTableBar`组件搭配`pure-admin-table`支持表头国际化切换
+
+# 5.2.0 (2024-03-22)
+
+### ✔️ Refactor
+
+- 将全屏按钮置于顶部，使其显眼且易于操作
+
+### 🎫 Feat
+
+- 新增`v-ripple`指令(水波纹效果)
+- 内容区添加全局`Stretch`配置，可自定义紧凑页面，轻松找到所需信息
+- 添加基于`ElTour`实现的漫游式引导
+- 完善角色管理-菜单权限功能，新颖的交互体验
+- 添加系统监控-在线用户
+- 添加系统监控-登录日志
+- 添加系统监控-操作日志
+- 添加系统监控-系统日志
+- 添加更多更方便的`pure-admin-table`可编辑表格示例（整体编辑、单行编辑、单元格编辑）
+- `ReSegmented`组件新增`block`属性，可使其适合父元素宽度
+- 添加 [vue-flow](https://vueflow.dev/) 流程图示例
+- 添加虚拟表格示例
+- 添加甘特图示例
+- 添加图形验证码示例
+- 添加表单示例，可通过`JSON`格式配置生成（基础表单、弹框表单、抽屉表单、分步表单、搜索表单）
+- 在左侧菜单右中侧再加一个折叠展开菜单的功能
+
+### 🐞 Bug fixes
+
+- 修复`windwos`下点击注册页面会出现滚动条问题
+- 修复`windows`下页面切换，内容区会出现滚动条问题
+- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
+- 修复系统配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
+
+### 🍏 Perf
+
+- 系统管理、系统监控的所有页面兼容移动端
+
+# 5.1.0 (2024-03-02)
+
+### ✔️ Refactor
+
+- 重构标签页`UI`，点击关闭按钮更方便
+
+### 🎫 Feat
+
+- 添加多选卡片示例
+- 菜单支持`a`标签右键的所有浏览器行为（在新标签页中、新窗口中打开链接，拖拽到新标签页打开等）
+- 菜单搜索新增搜索历史和收藏功能
+
+### 🐞 Bug fixes
+
+- 修复`windows`系统下登录页出现滚动条的问题
+
+### 🍏 Perf
+
+- 规范注册本地图标时的命名规则，使其更好地配合图标选择器
+
+# 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
+
+- 函数式弹框组件添加结合 `Form` 的 `demo` 示例
+- 封装 `element-plus` 的 `el-col` 组件
+- 函数式弹框组件添加 `beforeCancel` 和 `beforeSure` 回调，可暂停弹框的关闭
+- 完善 `系统管理-部门管理` 页面
+- 优化 `PureTableBar` 组件，列展示添加拖拽功能
+
+### 🐞 Bug fixes
+
+- 修复开启 `keepAlive` 后点击标签页的重新加载，页面缓存还存在的问题
+- 修复混合模式菜单下刷新页签后左侧菜单会闪烁一下的问题
+
+### 🍏 Perf
+
+- 优化首页布局
+- 依赖更新到 `vue3.3+` 以及删除 `unplugin-vue-define-options` 插件
+
+# 4.0.0 (2023-05-09)
+
+[查看 4.0.0 版本优化细节](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)
+
+### ✔️ Refactor
+
+- 采用 `css` 伪类 `before` 写法重构菜单的激活背景，类似于 [ant.design-menu](https://ant.design/components/menu-cn#components-menu-demo-inline-collapsed)
+
+### 🎫 Feat
+
+- 优化菜单名称右侧的额外图标，使其支持更多图标渲染模式
+- 可配置首页菜单显示与隐藏
+- 将本地响应式存储的命名空间提升到全局配置中
+- 新增函数式弹框组件以及 `demo` 示例，使用更便捷
+- `PureTableBar` 组件添加列展示功能
+
+### 🐞 Bug fixes
+
+- 修复当菜单折叠或展开时首页 `echarts` 图表未自适应容器
+- 修复当只有一个子菜单时，搜索功能搜索不到该子菜单问题
+- 修复全局配置 `Theme` 为 `light` 清空缓存重新登录主题配置不生效的问题
+- 修复菜单搜索功能弹框打开后搜索框未自动聚集的问题
+- 修复按 `ESC` 退出全屏后，工具栏按钮文案展示问题
+- 修复移动端通知栏 `tooltip` 点击穿透问题
+- 修复当左侧菜单收起后，切换到 `horizontal` 导航模式时文字不展示的问题
+- 修复导航 `tab` 关闭其他标签页无法重置状态问题
+- 修复 `getHistoryMode` 函数中环境变量未初始化带来的页面热更新报错
+- 修复导航 `tab` 过多导致关闭左侧标签页无法正常显示
+- 修复点击内容区全屏报错问题
+- 修复混合导航下打开 `showLink:false` 页面并刷新后，左侧导航栏一直处于加载状态的问题
+- 修复混合模式导航下调用 `initRouter` 函数导致左侧导航内存溢出问题
+- 修复关闭左侧、右侧、其他、全部标签页操作时缓存页面并没有销毁问题
+- 修复路由通过 `query` 或 `params` 传参，开启缓存后关闭标签页缓存失效问题
+- 修复 `params` 路由传参模式下，面包屑无法找到父级路径问题
+
+### 🍏 Perf
+
+- 优化 `RePureTableBar` 组件的 `buttons` 具名插槽
+- 优化导航样式以及菜单折叠动画
+- 优化菜单名称右侧的额外图标，使其支持更多图标渲染模式
+- 优化 `logo` 图和文字布局以及统一配置
+- 路由信息 `showLink` 设置成 `false` 后，当前路由信息不添加到标签页
+- 导出 `addPathMatch` 函数
+- `pinia` 中所有 `getters` 改为官方推荐写法，`this` 改成 `state` 可自动推导类型
+- 适配最新版 `pure-table` 的 `api`
+- 忽略 `sourcemap-codec` 和 `stable` 依赖包的 `deprecation` 警告
+- 从 `tsconfig.json` 文件中移除 `"incremental": true`
+- 更新 `stylelint` 以及相关配置至最新，强化样式校验
+- 面包屑去首页化，根据选择的菜单对应显示，首页不在固定到面包屑里，并优化面包屑页面的路由监听
+
+# 3.9.7 (2022-12-26)
+
+### 🍏 Perf
+
+- 使用 `path.posix.resolve` 替代 `path.resolve` 避免 `windows` 环境下使用 `electron` 出现盘符问题
+- 默认关闭 `CachingAsyncRoutes` 动态路由缓存本地，使其在开发环境下调试更方便，不用每次修改动态路由都要先清空本地缓存的动态路由，更推荐在生产环境开启
+
+# 3.9.6 (2022-12-19)
+
+### 🎫 Chores
+
+- 升级 `vite4` 版本
+
+### 🐞 Bug fixes
+
+- 修复 `tailwind.css` 错误的引入方式导致 `vite` 的 `hmr` 慢的问题
+
+### 🍏 Perf
+
+- 更新 [@pureadmin/theme](https://github.com/pure-admin/pure-admin-theme) 至最新版，带来更友好的类型提示
+- 优化 [PureTableBar](https://github.com/pure-admin/vue-pure-admin/tree/main/src/components/RePureTableBar) 组件
+- 优化系统管理页面业务代码，带来更好的代码参考
+
+# 3.9.5 (2022-12-13)
+
+### ✔️ Refactor
+
+- 完全移除了 `lodash` 和其相关库
+  [点击此处查看为什么移除？如何自行集成？](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%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
+
+- 添加 `@pureadmin/table` 表格动态列示例
+
+### 🐞 Bug fixes
+
+- 修复动态路由 `rank` 问题
+- 修复暗黑主题样式问题
+
+### 🍏 Perf
+
+- 优化路由 `rank` ，当 `rank` 不存在时，根据顺序自动创建，首页路由永远在第一位
+
+# 3.9.4 (2022-12-05)
+
+### ✔️ Refactor
+
+- 完全移除了 `vxe-table`，移除后，完整版整体打包大小减少 `1.82MB`，首启动时长基本和精简版持平 🐮
+  [点击此处查看为什么移除？如何自行集成？](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)
+
+### 🎫 Feat
+
+- 添加 `@pureadmin/table` 表格选择器（单选、多选）示例
+
+# 3.9.3 (2022-12-04)
+
+### 🎫 Feat
+
+- 添加 `@pureadmin/table` 分页和加载动画示例
+
+### 🐞 Bug fixes
+
+- 修复开启 `CachingAsyncRoutes` 后，存入本地存储的动态路由改变造成刷新页面空白的问题
+- 修复菜单折叠后 `Tooltip` 显示异常
+
+### 🍏 Perf
+
+- 扩展本地图标使用方式，完整版首启动再次减少 `13` 个请求
+- 当菜单加载慢时，添加 `loading` 动画，优化用户体验
+- 主题初始化放在 `onBeforeMount` 里，避免初始化页面闪烁
+
+# 3.9.2 (2022-12-03)
+
+### 🍏 Perf
+
+- 全局覆盖 `element-plus` 的 `el-dialog`、`el-drawer`、`el-message-box`、`el-notification` 组件右上角关闭图标的样式，使其表现更鲜明 [具体代码修改记录](https://github.com/pure-admin/vue-pure-admin/commit/c80818d792276666aaea4b18413a0f08777f2ed1)
+- 打包输出信息兼容不同打包输出路径
+- 优化一些动画
+
+# 3.9.1 (2022-12-02)
+
+### 🎫 Feat
+
+- 添加 `CachingAsyncRoutes` 是否开启动态路由缓存本地的全局配置，默认 `true`
+- 添加 `TooltipEffect` 全局配置，可配置平台主体所有 `el-tooltip` 的 `effect` 属性，默认 `light`，不影响业务代码
+- 添加目录、菜单文字超出显示 `Tooltip` 文字提示演示
+
+### 🍏 Perf
+
+- 优化 `initRouter` 方法，兼容 `sso` 场景
+- 面包屑动画样式优化
+
+# 3.9.0 (2022-11-30)
+
+### 🐞 Bug fixes
+
+- 修复退出全屏时文字过长导致页面出现滚动条后带来的抖动问题
+- 修复一些类型错误
+
+### 🍏 Perf
+
+- perf: 首屏加载大优化，对比 `3.9.0` 之前版本，首屏请求减少 `71` 个，首屏加载资源减少 `4.1 MB`
+
+# 3.8.7 (2022-11-28)
+
+### 🍏 Perf
+
+- perf: 打包大优化，请务必升级！使用 `unplugin-vue-define-options` 替换 `unplugin-vue-macros` ，打包速度提升数倍，使用 `unplugin-vue-macros` 以性能中等偏上的 `mac` 为例完整版打包时长为 `6` 分钟 😭，使用 `unplugin-vue-define-options` 替换后，相同电脑下打包时长为 `50` 秒 ☺️
+
+# 3.8.6 (2022-11-27)
+
+### 🎫 Feat
+
+- 添加 `message` 消息提示函数，兼容 `Element Plus` 和 `Ant Design` 两种 `Message` 样式风格，使用和打包大小成本极低并适配暗黑模式，真香 😂
+
+### 🍏 Perf
+
+- perf: 无需安装 `@vue/runtime-core` ，兼容所有 `element-plus` 组件的 `volar` 提示
+
+# 3.8.5 (2022-11-26)
+
+### 🍏 Perf
+
+- 大优化，移除 `@pureadmin/components` 并采用兼容写法，平台打包大小在未启用压缩前对比优化前减少 `0.4` MB , 首屏请求减少 `2.3` MB 的资源，这对于 [精简版](https://github.com/pure-admin/pure-admin-thin) 来说是非常大的优化，精简版已经同步代码
+
+# 3.8.0 (2022-11-26)
+
+### 🎫 Feat
+
+- 添加 `@pureadmin/table` 多种数据格式（深层结构）示例
+- 添加 `@pureadmin/table` 图像预览示例
+- 添加 `@pureadmin/table` 行、列拖拽示例
+- 添加 `@pureadmin/table` 右键菜单示例
+- 添加 `@pureadmin/table` 导出 `Excel` 示例
+- 添加 `@pureadmin/table` 修改单元格示例
+- 添加 `@pureadmin/table` 水印示例
+- 添加 `@pureadmin/table` 打印示例
+- 添加 `@pureadmin/table` 内嵌 `echarts` 图表示例
+- 添加 `svgo` 压缩平台所有 `svg` 文件，减少体积
+
+### 🍏 Perf
+
+- 静态路由平台自动导入，无需手动引入
+- 更完善的全局类型提示
+- 优化 `vite` 依赖预构建在平台里的配置，页面切换加载速度显著加快
+
+# 3.7.1 (2022-11-22)
+
+### 🔥 hotfix
+
+- 修复在未开启标签页缓存时退出登录，可能存在标签页未重置的问题
+
+# 3.7.0 (2022-11-21)
+
+### ✔️ Refactor
+
+- 使用 `intro.js` 替换 `driver.js`
+
+### 🎫 Feat
+
+- 添加前端单点登录，测试地址 https://pure-admin.github.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/platform-config.json` 中配置即可，对于出现左侧菜单模式，菜单展开卡顿的可设置 `MenuArrowIconNoTransition: true` 即可解决
+- 更换表单设计器组件演示
+
+### 🐞 Bug fixes
+
+- 修复页内菜单带参互相跳转，标签没有选中高亮
+
+### 🍏 Perf
+
+- 删除已废弃的 `$baseUrl`
+- 兼容引入某个库导致 `global is not defined` 报错，将 `src/utils/globalPolyfills.ts` 文件引入 `src/main.ts` 即可解决
+- 删除 `@vitejs/plugin-legacy`，`vue3` 无法通过任何工具使其支持 `ie`
+
+# 3.6.4 (2022-11-10)
+
+### 🎫 Feat
+
+- 菜单图标 `icon` 支持使用在线图标
+
+### 🐞 Bug fixes
+
+- 修复 `vxe-button` 鼠标覆盖后字体颜色问题以及一些别的样式问题
+
+### 🍏 Perf
+
+- 优化路由守卫，如果已经登录并存在登录信息后不能跳转到路由白名单，而是继续保持在当前页面
+- 将 `baseURL` 和全局环境代理删除，可直接在 `vite.config.ts` 编写，即方便又支持多个代理地址
+
+# 3.6.3 (2022-11-01)
+
+### 🎫 Feat
+
+- 静态资源分类打包
+- 添加弹幕组件 `demo`
+
+### 🐞 Bug fixes
+
+- 修复 `tailwindcss` 最新版新增的 `collapse` 属性与平台 `class` 类名冲突
+- 修复当 `token` 过期后，如果页面有多个请求会重复刷新 `token`
+
+# 3.6.2 (2022-10-27)
+
+### ✔️ Refactor
+
+- 使用`@/`别名替换`/@/`别名
+
+# 3.6.1 (2022-10-27)
+
+### 🎫 Feat
+
+- 添加打包是否启动`cdn`替换本地库配置，默认`false`不启动
+- 添加打包构建可选`gzip`与`brotli`压缩模式
+
+### 🐞 Bug fixes
+
+- 修复`title`过长显示样式问题
+- 修复路由中父级`name`不应和子级`name`重复，会造成重定向跳转`404`问题
+
+### 🍏 Perf
+
+- 升级`axios`至最新版
+
+# 3.6.0 (2022-10-25)
+
+### 🎫 Feat
+
+- 添加文件下载`demo`
+- 添加打字机组件`demo`
+- 添加`json`编辑器`demo`
+
+### ✔️ Refactor
+
+- 重构权限模块，采用目前最常用的`RBAC`（Role-Based Access List）: 基于角色的权限控制（ 用户 -> 角色 -> 权限 ），并更新页面权限和按钮权限`demo`示例，按钮权限支持三种操作模式（组件方式判断权限、函数方式判断权限、指令方式判断权限）
+
+### 🐞 Bug fixes
+
+- 修复清空缓存并返回登录页时未清空主题
+- 修复`horizontal`模式下`menu`在生产环境显示问题
+- 修复`mix`混合模式导航在生产环境左侧菜单一定机率不显示的问题
+- `token`过期后调用刷新`token`接口会无限循环的问题
+
+### 🍏 Perf
+
+- 从`tailwind.css`中移除不常用的`@apply`
+- 使用`/** */`替换`//`注释，对编辑器的智能提示更友好
+- 优化登录回车事件
+- 简化了一些函数，剔除了无用函数，优化了页面加载速度
+
+# 3.5.0 (2022-9-10)
+
+### 🎫 Feat
+
+- 添加 `cssnano` ，打包时压缩 `css` 体积
+- 添加 `element-plus` 无缝滚动 `Table` 页面 demo
+- 开启 `vscode` 括号对指南
+
+### ✔️ Refactor
+
+- 使用 `tailwindcss` 替换 `unocss`，新增 `tailwindcss` [使用文档](https://pure-admin.github.io/pure-admin-doc/pages/tailwindcss/)
+
+### 🐞 Bug fixes
+
+- `token` 过期，刷新死循环
+
+### 🍏 Perf
+
+- 重置路由时，清空缓存页面
+
+# 3.4.6 (2022-8-23)
+
+### 🐞 Bug fixes
+
+- `process` is not defined in path
+- 修复动态路由`children`为空数组时报错
+- 修复`iframe`加载失败
+
+# 3.4.5 (2022-8-22)
+
+### 🐞 Bug fixes
+
+- 修复本地响应式存储对象设置问题
+
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- 优化路由
+- 优化移动端兼容性
+- 优化路由传参（`query`、`params` 方式刷新页面不需要再开启标签页缓存也能保留参数在`url`和`标签页`上）
+
+# 3.3.5 (2022-8-19)
+
+### 🎫 Feat
+
+- 将 `element-plus` 的 `Table` 二次封装到[@pureadmin/table](https://github.com/pure-admin/pure-admin-table)，提供灵活的配置项并集成到平台里
+- 将 `element-plus` 的 `Descriptions` 二次封装到[@pureadmin/descriptions](https://github.com/pure-admin/pure-admin-descriptions)，提供灵活的配置项并集成到平台里
+- 将平台的大部分工具以及 `hooks` 都集中到[@pureadmin/utils](https://pure-admin-utils.netlify.app)，并删除集中到这个库里的代码，减少平台体积
+- 添加[unplugin-vue-define-options](https://www.npmjs.com/package/unplugin-vue-define-options)插件，页面可直接写 `defineOptions({name: 自定义名称})`
+- 添加项目文件、语言分析工具 [cloc](https://www.npmjs.com/package/cloc)
+- 添加登录页国际化
+- 添加完整路由配置表类型声明
+- 添加虚拟列表页面 demo
+- 添加 `PDF` 预览页面 demo
+- 添加导出 `excel` 页面 demo
+- 添加无 `Layout` 的空白页面 demo
+
+### ✔️ Refactor
+
+- 重构主题色，适配 `element-plus` 暗黑模式（同时也解决了 `3.3.0` 及更低版本中同样的元素 `css` 被多次覆盖，导致样式不好调试的问题）
+- 重构路由重置功能
+
+### 🍏 Perf
+
+- 兼容项目存放目录以中文命名，但我们真心不推荐中文命名，因为可能某个库没有对中文路径做转义处理，导致项目奔溃
+- 优化接口类型
+
+### 🐞 Bug fixes
+
+- 修复路由 `showlink` 为 `false` 的异步路由，刷新后不显示
+- 修复当没有 `icon` 时，垂直导航菜单折叠后文字被隐藏
+
+# 3.3.0 (2022-5-11)
+
+### 🎫 Feat
+
+- 添加用户管理页面 demo
+- 添加角色管理页面 demo
+- 添加部门管理页面 demo
+- 添加卡片列表页面 demo
+- 集成表单设计器
+- 新增`PPT`demo
+- 在功能菜单中新增防抖截流 demo
+- 升级`wangeditorV5`（并支持国际化和自定义主题）
+- 集成`tauri`版本
+- 新增条形码功能
+- 新增二维码功能
+- 使用`element-plus`中的`Cascader`级联选择器编写中国省市区三级、二级联动 demo
+- 集成`Swiper`插件
+- 路由支持传`component`，代表组件路径
+- 添加预发布打包模式
+- 添加关闭某个标签的[hooks](https://github.com/pure-admin/vue-pure-admin/commit/5e8723a031923e79f507e5a17151d3bd88a51523)
+
+### ✔️ Refactor
+
+- 重构登录页，更偏向实际业务场景
+- 使用`unocss`替换`windicss`，`unocss`开发环境下性能更好，没有内存泄露，而且`api`使用上兼容`windicss`
+
+### 🍏 Perf
+
+- 优化平台的`split-pane`组件样式
+- 优化国际化，路由不再传`i18n`字段，平台自动读取根目录`locales`文件夹下文件进行国际化匹配
+- 优化图标选择器
+- 优化`layout`显示用户信息[commit](https://github.com/pure-admin/vue-pure-admin/commit/56f9dc85e7fbe0637605c43577c794de9f8968aa)
+
+### 🐞 Bug fixes
+
+- 修复路由初始化问题（Cannot access 'constantRoutes' before initialization）
+
+# 3.2.0 (2022-3-22)
+
+### 🎫 Feat
+
+- 图标选择组件
+- 菜单搜索功能
+- 添加结果页面
+- 扩展`element-plus`时间线组件
+- 扩展`element-plus`树组件，支持连接线
+- 添加树形选择器，支持单选和多选
+
+### 🍏 Perf
+
+- 优化错误页面 UI
+- 优化国际化功能
+- 优化路由`rank`排序，兼容路由`meta`中`rank`字段值为`null`的情况
+
+### 🐞 Bug fixes
+
+- 修复菜单展开折叠在部分电脑出现卡顿的情况
+
+# 3.1.0 (2022-3-3)
+
+### 🎫 Feat
+
+- iframe 支持动态加载
+- 水印示例
+- 打印示例（图片、表格、echarts）
+- 添加运行、打包信息, 使用`lodash-unified`替换`lodash-es`,`lodash-unified`支持`ESM`同时兼容`CJS`
+
+### 🐞 Bug fixes
+
+- 修复在一个菜单页面内单独跳转到另一个菜单页面，路由页面跳转了但是标签页不显示的情况
+- 修复后台返回动态三级及以上的路由，出现菜单与页面不对应的情况
+
+# 3.0 (2022-2-14)
+
+### 🎫 Feat
+
+- 添加混合导航
+
+### 🐞 Bug fixes
+
+- 修复标签页 bug
+
+# 2.9.0(2022-2-5)
+
+### 🎫 Feat
+
+- 添加打包大小分析，命令`pnpm report`
+
+### 🍏 Perf
+
+- 采用`iconify`按需引入图标，优化图标大小，减少网络请求
+- 优化路由，路由可不传`showLink: true`，默认显示
+
+# 2.8.5(2022-1-21)
+
+### 🎫 Feat
+
+- 添加 `WindiCSS` 支持
+- 添加线上环境删 console 插件`vite-plugin-remove-console`
+
+### ✔️ Refactor
+
+- 使用`@iconify-icons/ep`替换`@element-plus/icons-vue`
+
+# 2.8.0(2022-1-4)
+
+### 🎫 Feat
+
+- 添加暗黑主题
+- 添加 element-plus 自定义主题
+- 添加引导页
+
+### 🍏 Perf
+
+- 优化国际化，兼容 vscode 插件 i18n Ally 智能提醒
+- 优化后端返回路由结构
+- 优化本地存储，内置四个键`responsive-configure`、`responsive-locale`、`responsive-layout`、`responsive-tags`，分别为基本配置、国际化配置、布局配置、标签页持久化配置
+
+# 2.7.0(2021-12-18)
+
+### 🎫 Feat
+
+- 新增标签页复用
+- 新增消息提醒模版
+- 新增前端菜单树结构例子
+- 重构路由，优化权限模块，带来更方便的体验
+- 重构 env 环境和 http 请求，带来更方便的体验
+- 目前平台的标签页强制关联了本地存储，下一步标签页默认放到内存中并支持可配置持久化标签页
+- 导航菜单图标支持 fontawesome、iconfont、remixicon、element-plus/icons、自定义 svg
+- 更新 font-awesome 到 5.0 版本，因为 5.0 以下的版本官方不再维护，但平台依旧会兼容 font-awesome4 版本
+
+### 🍏 Perf
+
+- 优化标签页，带来更好的交互体验
+- 路由 title 支持直接写中文，可脱离国际化
+- 路由历史模式从 env 读取并支持 base 参数
+
+# 2.6.0(2021-11-10)
+
+### 🎫 Feat
+
+- 重构导航主题色，支持多种配色
+- 重构登录页，插画风格
+
+### 🍏 Perf
+
+- 优化导航样式
+- 剔除导航强依赖 vxe-table
+- 同步更新 element-plus，使用 SVG Icon 替换 Font Icon
+
+# 2.1.0(2021-10-14)
+
+### 🎫 Feat
+
+- 路由动画（每个路由都可添加不同动画）
+- 额外图标（比如这个是新加的页面，路由菜单右上角显示个新图标）
+- 抽离默认配置选项
+- 完善类型文件
+
+### 🐞 Bug fixes
+
+- 修复 element-plus 国际化使用问题
+- 修复路由问题
+- 修复导航适配问题
+
+# 2.0.1(2021-9-29)
+
+### 🎫 Feat
+
+- 添加 horizontal 水平模式导航
+
+# 2.0.0(2021-4-13)
+
+### 🎫 Chores
+
+- 发布 2.0.0 版本
diff --git a/Yi.Pure.Vue3/Dockerfile b/Yi.Pure.Vue3/Dockerfile
new file mode 100644
index 00000000..cd6d51a9
--- /dev/null
+++ b/Yi.Pure.Vue3/Dockerfile
@@ -0,0 +1,20 @@
+FROM node:20-alpine as build-stage
+
+WORKDIR /app
+RUN corepack enable
+RUN corepack prepare pnpm@latest --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;"]
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/LICENSE b/Yi.Pure.Vue3/LICENSE
new file mode 100644
index 00000000..6d4889d0
--- /dev/null
+++ b/Yi.Pure.Vue3/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present, pure-admin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Yi.Pure.Vue3/README.en-US.md b/Yi.Pure.Vue3/README.en-US.md
new file mode 100644
index 00000000..65051fc6
--- /dev/null
+++ b/Yi.Pure.Vue3/README.en-US.md
@@ -0,0 +1,243 @@
+<h1>vue-pure-admin</h1>
+
+![GitHub license](https://img.shields.io/github/license/pure-admin/vue-pure-admin?style=flat)
+![GitHub stars](https://img.shields.io/github/stars/pure-admin/vue-pure-admin?color=fa6470&style=flat)
+![GitHub forks](https://img.shields.io/github/forks/pure-admin/vue-pure-admin?style=flat)
+
+**English** | [中文](./README.md)
+
+## Introduction
+
+`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
+
+## R&D philosophy
+
+Seek innovation in stability and see the future in technology
+
+## 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 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 me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)  
+[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
+
+## Nanny-level documents
+
+[Click me to view vue-pure-admin documentation](https://pure-admin.github.io/pure-admin-doc)  
+[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
+
+## Quality service, software outsourcing, sponsorship support
+
+[Click me for details](https://pure-admin.github.io/pure-admin-doc/pages/service/)
+
+## `js` version
+
+[Click me to view js version](https://pure-admin.github.io/pure-admin-doc/pages/js/)
+
+## `max` version
+
+[Click me to view the max version](https://github.com/pure-admin/vue-pure-admin-max)
+
+## Tauri
+
+[Click Watch Tauri](https://github.com/pure-admin/tauri-pure-admin)
+
+## Electron
+
+[Click Watch Electron](https://github.com/pure-admin/electron-pure-admin)
+
+## Preview
+
+[preview station](https://pure-admin.github.io/vue-pure-admin)
+
+`PC`
+
+<p align="center">
+  <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`
+
+<p align="center">
+  <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`
+
+<p align="center">
+  <img alt="PureAdmin" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/5.jpg">
+</p>
+
+### Use Gitpod
+
+Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/pure-admin/vue-pure-admin)
+
+## Install And Use
+
+### 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
+```
+
+#### Pulled from `Gitee`
+
+```bash
+git clone https://gitee.com/yiming_chang/vue-pure-admin.git
+```
+
+### Install dependencies
+
+```bash
+cd vue-pure-admin
+
+pnpm install
+```
+
+### Run platform
+
+```bash
+pnpm dev
+```
+
+### 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)
+
+## How to contribute
+
+You are very welcome to join！[Raise an issue](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) Or submit a Pull Request
+
+**Pull Request:**
+
+1. Fork code!
+2. Create your own branch: `git checkout -b feat/xxxx`
+3. Submit your changes: `git commit -am 'feat(function): add xxxxx'`
+4. Push your branch: `git push origin feat/xxxx`
+5. submit`pull request`
+
+## Special code contributions
+
+Thank you very much for your in-depth understanding of the source code and your outstanding contributions to the `pure-admin` organization ❤️
+
+|                 **Contributor**                 |                                 **SpecificCode**                                 |
+| :---------------------------------------------: | :------------------------------------------------------------------------------: |
+|       [hb0730](https://github.com/hb0730)       |    [code](https://github.com/pure-admin/vue-pure-admin/commits?author=hb0730)    |
+|         [o-cc](https://github.com/o-cc)         |     [code](https://github.com/pure-admin/vue-pure-admin/commits?author=o-cc)     |
+| [yj-liuzepeng](https://github.com/yj-liuzepeng) | [code](https://github.com/pure-admin/vue-pure-admin/commits?author=yj-liuzepeng) |
+|   [skyline523](https://github.com/skyline523)   |  [code](https://github.com/pure-admin/vue-pure-admin/commits?author=skyline523)  |
+| [shark-lajiao](https://github.com/shark-lajiao) | [code](https://github.com/pure-admin/vue-pure-admin/commits?author=shark-lajiao) |
+|      [WitMiao](https://github.com/WitMiao)      |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao)    |
+|     [QFifteen](https://github.com/QFifteen)     |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
+|      [edgexie](https://github.com/edgexie)      |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=edgexie)    |
+|       [way-jm](https://github.com/way-jm)       |    [code](https://github.com/pure-admin/vue-pure-admin/commits?author=way-jm)    |
+
+## 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))
+
+- `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
+
+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 |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
+
+## Maintainer
+
+[xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
+
+## License
+
+Completely free and open source
+
+[MIT © 2020-present, pure-admin](./LICENSE)
+
+## `Star`
+
+Many thanks to the kind individuals who leave a star. Your support is much appreciated :heart:
+
+[![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 @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)
diff --git a/Yi.Pure.Vue3/README.md b/Yi.Pure.Vue3/README.md
new file mode 100644
index 00000000..7eb6ff1e
--- /dev/null
+++ b/Yi.Pure.Vue3/README.md
@@ -0,0 +1,244 @@
+<h1>vue-pure-admin</h1>
+
+![GitHub license](https://img.shields.io/github/license/pure-admin/vue-pure-admin?style=flat)
+![GitHub stars](https://img.shields.io/github/stars/pure-admin/vue-pure-admin?color=fa6470&style=flat)
+![GitHub forks](https://img.shields.io/github/forks/pure-admin/vue-pure-admin?style=flat)
+
+**中文** | [English](./README.en-US.md)
+
+## 简介
+
+`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`
+
+[点我查看非国际化精简版本](https://github.com/pure-admin/pure-admin-thin)  
+[点我查看国际化精简版本](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
+
+## 配套视频
+
+[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)  
+[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
+
+## 配套保姆级文档
+
+[点我查看 vue-pure-admin 文档](https://pure-admin.github.io/pure-admin-doc)  
+[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
+
+## 优质服务、软件外包、赞助支持
+
+[点我查看详情](https://pure-admin.github.io/pure-admin-doc/pages/service/)
+
+## `js` 版本
+
+[点我查看 js 版本](https://pure-admin.github.io/pure-admin-doc/pages/js/)
+
+## `max` 版本
+
+[点我查看 max 版本](https://github.com/pure-admin/vue-pure-admin-max)
+
+## `Tauri` 版本
+
+[点我查看 Tauri 版本](https://github.com/pure-admin/tauri-pure-admin)
+
+## `Electron` 版本
+
+[点我查看 Electron 版本](https://github.com/pure-admin/electron-pure-admin)
+
+## 预览
+
+[点我查看预览](https://pure-admin.github.io/vue-pure-admin)
+
+`PC` 端
+
+<p align="center">
+  <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" 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" src="https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/5.jpg">
+</p>
+
+### 使用 `Gitpod`
+
+在 `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
+```
+
+#### 从 `Gitee` 上拉取
+
+```bash
+git clone https://gitee.com/yiming_chang/vue-pure-admin.git
+```
+
+### 安装依赖
+
+```bash
+cd vue-pure-admin
+
+pnpm install
+```
+
+### 启动平台
+
+```bash
+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)
+
+## 如何贡献
+
+非常欢迎您的加入！[提一个 Issue](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 或者提交一个 `Pull Request`
+
+**Pull Request:**
+
+1. Fork 代码!
+2. 创建自己的分支: `git checkout -b feat/xxxx`
+3. 提交您的修改: `git commit -am 'feat(function): add xxxxx'`
+4. 推送您的分支: `git push origin feat/xxxx`
+5. 提交`pull request`
+
+## 特别代码贡献
+
+非常感谢你们能深入了解源码并对 `pure-admin` 组织作出优秀贡献 ❤️
+
+|                   **贡献人**                    |                                   **具体代码**                                   |
+| :---------------------------------------------: | :------------------------------------------------------------------------------: |
+|       [hb0730](https://github.com/hb0730)       |    [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=hb0730)    |
+|         [o-cc](https://github.com/o-cc)         |     [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=o-cc)     |
+| [yj-liuzepeng](https://github.com/yj-liuzepeng) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=yj-liuzepeng) |
+|   [skyline523](https://github.com/skyline523)   |  [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=skyline523)  |
+| [shark-lajiao](https://github.com/shark-lajiao) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=shark-lajiao) |
+|      [WitMiao](https://github.com/WitMiao)      |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao)    |
+|     [QFifteen](https://github.com/QFifteen)     |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
+|      [edgexie](https://github.com/edgexie)      |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=edgexie)    |
+|       [way-jm](https://github.com/way-jm)       |    [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=way-jm)    |
+
+## `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))
+
+- `feat` 增加新功能
+- `fix` 修复问题/BUG
+- `style` 代码风格相关无影响运行结果的
+- `perf` 优化/性能提升
+- `refactor` 重构
+- `revert` 撤销修改
+- `test` 测试相关
+- `docs` 文档/注释
+- `chore` 依赖更新/脚手架配置修改等
+- `workflow` 工作流改进
+- `ci` 持续集成
+- `types` 类型定义文件更改
+- `wip` 开发中
+
+## 浏览器支持
+
+本地开发推荐使用 `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 |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                                不支持                                                                                                |                                                                                              最后两个版本                                                                                              |                                                                                                   最后两个版本                                                                                                    |                                                                                                 最后两个版本                                                                                                  |                                                                                                 最后两个版本                                                                                                  |
+
+## 维护者
+
+[xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
+
+## 许可证
+
+完全免费开源
+
+[MIT © 2020-present, pure-admin](./LICENSE)
+
+## `Star`
+
+非常感谢留下星星的好心人，感谢您的支持 :heart:
+
+[![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 @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)
diff --git a/Yi.Pure.Vue3/build/cdn.ts b/Yi.Pure.Vue3/build/cdn.ts
new file mode 100644
index 00000000..9e4bfe04
--- /dev/null
+++ b/Yi.Pure.Vue3/build/cdn.ts
@@ -0,0 +1,60 @@
+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
+ * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
+ */
+export const cdn = importToCDN({
+  //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl）
+  prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
+  modules: [
+    {
+      name: "vue",
+      var: "Vue",
+      path: "vue.global.prod.min.js"
+    },
+    {
+      name: "vue-router",
+      var: "VueRouter",
+      path: "vue-router.global.min.js"
+    },
+    {
+      name: "vue-i18n",
+      var: "VueI18n",
+      path: "vue-i18n.runtime.global.prod.min.js"
+    },
+    // 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77）
+    {
+      name: "vue-demi",
+      var: "VueDemi",
+      path: "index.iife.min.js"
+    },
+    {
+      name: "pinia",
+      var: "Pinia",
+      path: "pinia.iife.min.js"
+    },
+    {
+      name: "element-plus",
+      var: "ElementPlus",
+      path: "index.full.min.js",
+      css: "index.min.css"
+    },
+    {
+      name: "axios",
+      var: "axios",
+      path: "axios.min.js"
+    },
+    {
+      name: "dayjs",
+      var: "dayjs",
+      path: "dayjs.min.js"
+    },
+    {
+      name: "echarts",
+      var: "echarts",
+      path: "echarts.min.js"
+    }
+  ]
+});
diff --git a/Yi.Pure.Vue3/build/compress.ts b/Yi.Pure.Vue3/build/compress.ts
new file mode 100644
index 00000000..6178986b
--- /dev/null
+++ b/Yi.Pure.Vue3/build/compress.ts
@@ -0,0 +1,63 @@
+import type { Plugin } from "vite";
+import { isArray } from "@pureadmin/utils";
+import compressPlugin from "vite-plugin-compression";
+
+export const configCompressPlugin = (
+  compress: ViteCompression
+): Plugin | Plugin[] => {
+  if (compress === "none") return null;
+
+  const gz = {
+    // 生成的压缩包后缀
+    ext: ".gz",
+    // 体积大于threshold才会被压缩
+    threshold: 0,
+    // 默认压缩.js|mjs|json|css|html后缀文件，设置成true，压缩全部文件
+    filter: () => true,
+    // 压缩后是否删除原始文件
+    deleteOriginFile: false
+  };
+  const br = {
+    ext: ".br",
+    algorithm: "brotliCompress",
+    threshold: 0,
+    filter: () => true,
+    deleteOriginFile: false
+  };
+
+  const codeList = [
+    { k: "gzip", v: gz },
+    { k: "brotli", v: br },
+    { k: "both", v: [gz, br] }
+  ];
+
+  const plugins: Plugin[] = [];
+
+  codeList.forEach(item => {
+    if (compress.includes(item.k)) {
+      if (compress.includes("clear")) {
+        if (isArray(item.v)) {
+          item.v.forEach(vItem => {
+            plugins.push(
+              compressPlugin(Object.assign(vItem, { deleteOriginFile: true }))
+            );
+          });
+        } else {
+          plugins.push(
+            compressPlugin(Object.assign(item.v, { deleteOriginFile: true }))
+          );
+        }
+      } else {
+        if (isArray(item.v)) {
+          item.v.forEach(vItem => {
+            plugins.push(compressPlugin(vItem));
+          });
+        } else {
+          plugins.push(compressPlugin(item.v));
+        }
+      }
+    }
+  });
+
+  return plugins;
+};
diff --git a/Yi.Pure.Vue3/build/info.ts b/Yi.Pure.Vue3/build/info.ts
new file mode 100644
index 00000000..6d7c8be2
--- /dev/null
+++ b/Yi.Pure.Vue3/build/info.ts
@@ -0,0 +1,57 @@
+import type { Plugin } from "vite";
+import { getPackageSize } from "./utils";
+import dayjs, { type Dayjs } from "dayjs";
+import duration from "dayjs/plugin/duration";
+import gradientString from "gradient-string";
+import boxen, { type Options as BoxenOptions } from "boxen";
+dayjs.extend(duration);
+
+const welcomeMessage = gradientString("cyan", "magenta").multiline(
+  `您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.github.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;
+  let endTime: Dayjs;
+  let outDir: string;
+  return {
+    name: "vite:buildInfo",
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+      outDir = resolvedConfig.build?.outDir ?? "dist";
+    },
+    buildStart() {
+      console.log(boxen(welcomeMessage, boxenOptions));
+      if (config.command === "build") {
+        startTime = dayjs(new Date());
+      }
+    },
+    closeBundle() {
+      if (config.command === "build") {
+        endTime = dayjs(new Date());
+        getPackageSize({
+          folder: outDir,
+          callback: (size: string) => {
+            console.log(
+              boxen(
+                gradientString("cyan", "magenta").multiline(
+                  `🎉 恭喜打包完成（总用时${dayjs
+                    .duration(endTime.diff(startTime))
+                    .format("mm分ss秒")}，打包后的大小为${size}）`
+                ),
+                boxenOptions
+              )
+            );
+          }
+        });
+      }
+    }
+  };
+}
diff --git a/Yi.Pure.Vue3/build/optimize.ts b/Yi.Pure.Vue3/build/optimize.ts
new file mode 100644
index 00000000..9beb4f0e
--- /dev/null
+++ b/Yi.Pure.Vue3/build/optimize.ts
@@ -0,0 +1,63 @@
+/**
+ * 此文件作用于 `vite.config.ts` 的 `optimizeDeps.include` 依赖预构建配置项
+ * 依赖预构建，`vite` 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存，如果没有会读取本地缓存并按需加载
+ * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
+ * 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
+ */
+const include = [
+  "qs",
+  "mitt",
+  "xlsx",
+  "dayjs",
+  "axios",
+  "pinia",
+  "typeit",
+  "swiper",
+  "qrcode",
+  "intro.js",
+  "vue-i18n",
+  "vxe-table",
+  "vue-types",
+  "js-cookie",
+  "vue-tippy",
+  "cropperjs",
+  "jsbarcode",
+  "pinyin-pro",
+  "sortablejs",
+  "swiper/vue",
+  "mint-filter",
+  "@vueuse/core",
+  "vue3-danmaku",
+  "v-contextmenu",
+  "vue-pdf-embed",
+  "wavesurfer.js",
+  "swiper/modules",
+  "china-area-data",
+  "vue-json-pretty",
+  "@logicflow/core",
+  "@pureadmin/utils",
+  "@wangeditor/editor",
+  "responsive-storage",
+  "plus-pro-components",
+  "@howdyjs/mouse-menu",
+  "@logicflow/extension",
+  "vue-virtual-scroller",
+  "@amap/amap-jsapi-loader",
+  "el-table-infinite-scroll",
+  "vue-waterfall-plugin-next",
+  "@infectoone/vue-ganttastic",
+  "@wangeditor/editor-for-vue",
+  "vuedraggable/src/vuedraggable"
+];
+
+/**
+ * 在预构建中强制排除的依赖项
+ * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
+ */
+const exclude = [
+  "@iconify-icons/ep",
+  "@iconify-icons/ri",
+  "@pureadmin/theme/dist/browser-utils"
+];
+
+export { include, exclude };
diff --git a/Yi.Pure.Vue3/build/plugins.ts b/Yi.Pure.Vue3/build/plugins.ts
new file mode 100644
index 00000000..37c8278a
--- /dev/null
+++ b/Yi.Pure.Vue3/build/plugins.ts
@@ -0,0 +1,76 @@
+import { cdn } from "./cdn";
+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 checker from "vite-plugin-checker";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import Inspector from "vite-plugin-vue-inspector";
+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 VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import { genScssMultipleScopeVars } from "../src/layout/theme";
+import { vitePluginFakeServer } from "vite-plugin-fake-server";
+
+export function getPluginsList(
+  VITE_CDN: boolean,
+  VITE_COMPRESSION: ViteCompression
+): PluginOption[] {
+  const lifecycle = process.env.npm_lifecycle_event;
+  return [
+    vue(),
+    // jsx、tsx语法支持
+    vueJsx(),
+    VueI18nPlugin({
+      jitCompilation: false,
+      include: [pathResolve("../locales/**")]
+    }),
+    checker({
+      typescript: true,
+      vueTsc: true,
+      eslint: {
+        lintCommand: `eslint ${pathResolve("../{src,mock,build}/**/*.{vue,js,ts,tsx}")}`,
+        useFlatConfig: true
+      },
+      terminal: false,
+      enableBuild: false
+    }),
+    // 按下Command(⌘)+Shift(⇧)，然后点击页面元素会自动打开本地IDE并跳转到对应的代码位置
+    Inspector(),
+    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: {
+        multipleScopeVars: genScssMultipleScopeVars(),
+        extract: true
+      }
+    }),
+    // svg组件化支持
+    svgLoader(),
+    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 as any)
+  ];
+}
diff --git a/Yi.Pure.Vue3/build/utils.ts b/Yi.Pure.Vue3/build/utils.ts
new file mode 100644
index 00000000..3d778fe6
--- /dev/null
+++ b/Yi.Pure.Vue3/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 wrapperEnv = (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__, wrapperEnv, getPackageSize };
diff --git a/Yi.Pure.Vue3/commitlint.config.js b/Yi.Pure.Vue3/commitlint.config.js
new file mode 100644
index 00000000..eea755d0
--- /dev/null
+++ b/Yi.Pure.Vue3/commitlint.config.js
@@ -0,0 +1,35 @@
+// @ts-check
+
+/** @type {import("@commitlint/types").UserConfig} */
+export default {
+  ignores: [commit => commit.includes("init")],
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "body-leading-blank": [2, "always"],
+    "footer-leading-blank": [1, "always"],
+    "header-max-length": [2, "always", 108],
+    "subject-empty": [2, "never"],
+    "type-empty": [2, "never"],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat",
+        "fix",
+        "perf",
+        "style",
+        "docs",
+        "test",
+        "refactor",
+        "build",
+        "ci",
+        "chore",
+        "revert",
+        "wip",
+        "workflow",
+        "types",
+        "release"
+      ]
+    ]
+  }
+};
diff --git a/Yi.Pure.Vue3/eslint.config.js b/Yi.Pure.Vue3/eslint.config.js
new file mode 100644
index 00000000..b4d48fbc
--- /dev/null
+++ b/Yi.Pure.Vue3/eslint.config.js
@@ -0,0 +1,181 @@
+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: [
+      "**/.*",
+      "dist/*",
+      "*.d.ts",
+      "public/*",
+      "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"
+        }
+      ]
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/index.html b/Yi.Pure.Vue3/index.html
new file mode 100644
index 00000000..37868842
--- /dev/null
+++ b/Yi.Pure.Vue3/index.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <title>vue-pure-admin</title>
+    <link rel="icon" href="/favicon.ico" />
+    <script>
+      window.process = {};
+    </script>
+  </head>
+
+  <body>
+    <div id="app">
+      <style>
+        html,
+        body,
+        #app {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .loader,
+        .loader::before,
+        .loader::after {
+          width: 2.5em;
+          height: 2.5em;
+          border-radius: 50%;
+          animation: load-animation 1.8s infinite ease-in-out;
+          animation-fill-mode: both;
+        }
+
+        .loader {
+          position: relative;
+          top: 0;
+          margin: 80px auto;
+          font-size: 10px;
+          color: #406eeb;
+          text-indent: -9999em;
+          transform: translateZ(0);
+          transform: translate(-50%, 0);
+          animation-delay: -0.16s;
+        }
+
+        .loader::before,
+        .loader::after {
+          position: absolute;
+          top: 0;
+          content: "";
+        }
+
+        .loader::before {
+          left: -3.5em;
+          animation-delay: -0.32s;
+        }
+
+        .loader::after {
+          left: 3.5em;
+        }
+
+        @keyframes load-animation {
+          0%,
+          80%,
+          100% {
+            box-shadow: 0 2.5em 0 -1.3em;
+          }
+
+          40% {
+            box-shadow: 0 2.5em 0 0;
+          }
+        }
+      </style>
+      <div class="loader"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/Yi.Pure.Vue3/locales/en.yaml b/Yi.Pure.Vue3/locales/en.yaml
new file mode 100644
index 00000000..3793277b
--- /dev/null
+++ b/Yi.Pure.Vue3/locales/en.yaml
@@ -0,0 +1,236 @@
+buttons:
+  pureAccountSettings: Account
+  pureLoginOut: LoginOut
+  pureLogin: Login
+  pureOpenSystemSet: Open System Configs
+  pureReload: Reload
+  pureCloseCurrentTab: Close CurrentTab
+  pureCloseLeftTabs: Close LeftTabs
+  pureCloseRightTabs: Close RightTabs
+  pureCloseOtherTabs: Close OtherTabs
+  pureCloseAllTabs: Close AllTabs
+  pureContentFullScreen: Content FullScreen
+  pureContentExitFullScreen: Content ExitFullScreen
+  pureClickCollapse: Collapse
+  pureClickExpand: Expand
+  pureConfirm: Confirm
+  pureSwitch: Switch
+  pureClose: Close
+  pureBackTop: BackTop
+  pureOpenText: Open
+  pureCloseText: Close
+search:
+  pureTotal: Total
+  pureHistory: History
+  pureCollect: Collect
+  pureDragSort: （Drag Sort）
+  pureEmpty: Empty
+  purePlaceholder: Search Menu
+panel:
+  pureSystemSet: System Configs
+  pureCloseSystemSet: Close System Configs
+  pureClearCacheAndToLogin: Clear cache and return to login page
+  pureClearCache: Clear Cache
+  pureOverallStyle: Overall Style
+  pureOverallStyleLight: Light
+  pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
+  pureOverallStyleDark: Dark
+  pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
+  pureOverallStyleSystem: Auto
+  pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
+  pureThemeColor: Theme Color
+  pureLayoutModel: Layout Model
+  pureVerticalTip: The menu on the left is familiar and friendly
+  pureHorizontalTip: Top menu, concise overview
+  pureMixTip: Mixed menu, flexible
+  pureStretch: Stretch Page
+  pureStretchFixed: Fixed
+  pureStretchFixedTip: Compact pages make it easy to find the information you need
+  pureStretchCustom: Custom
+  pureStretchCustomTip: Minimum 1280, maximum 1600
+  pureTagsStyle: Tags Style
+  pureTagsStyleSmart: Smart
+  pureTagsStyleSmartTip: Smart tags add fun and brilliance
+  pureTagsStyleCard: Card
+  pureTagsStyleCardTip: Card tags for efficient browsing
+  pureTagsStyleChrome: Chrome
+  pureTagsStyleChromeTip: Chrome style is classic and elegant
+  pureInterfaceDisplay: Interface Display
+  pureGreyModel: Grey Model
+  pureWeakModel: Weak Model
+  pureHiddenTags: Hidden Tags
+  pureHiddenFooter: Hidden Footer
+  pureMultiTagsCache: MultiTags Cache
+menus:
+  pureHome: Home
+  pureLogin: Login
+  pureEmpty: Empty Page
+  pureTable: Table
+  pureSysManagement: System Manage
+  pureUser: User Manage
+  pureRole: Role Manage
+  pureSystemMenu: Menu Manage
+  pureDept: Dept Manage
+  pureSysMonitor: System Monitor
+  pureOnlineUser: Online User
+  pureLoginLog: Login Log
+  pureOperationLog: Operation Log
+  pureSystemLog: System Log
+  pureEditor: Editor
+  pureAbnormal: Abnormal Page
+  pureFourZeroFour: "404"
+  pureFourZeroOne: "403"
+  pureFive: "500"
+  pureComponents: Components
+  pureDialog: Dialog
+  pureMessage: Message Tips
+  pureVideo: Video
+  pureSegmented: Segmented
+  pureWaterfall: Waterfall
+  pureMap: Map
+  pureDraggable: Draggable
+  pureSplitPane: Split Pane
+  pureText: Text Ellipsis
+  pureElButton: Button
+  pureButton: Button Animation
+  pureCheckButton: Check Button
+  pureCropping: Picture Cropping
+  pureAnimatecss: AnimateCss Selector
+  pureCountTo: Digital Animation
+  pureSelector: Scope Selector
+  pureFlowChart: Flow Chart
+  pureSeamless: Seamless Scroll
+  pureContextmenu: Context Menu
+  pureTypeit: Typeit
+  pureJsonEditor: JSON Editor
+  pureColorPicker: Color Picker
+  pureDatePicker: Date Picker
+  pureDateTimePicker: DateTimePicker
+  pureTimePicker: TimePicker
+  pureTag: Tag
+  pureStatistic: Statistic
+  pureCollapse: Collapse
+  pureGanttastic: Gantt Chart
+  pureProgress: Progress
+  pureUpload: File Upload
+  pureCheckCard: CheckCard
+  pureMenus: MultiLevel Menu
+  pureMenu1: Menu1
+  pureMenu1-1: Menu1-1
+  pureMenu1-2: Menu1-2
+  pureMenu1-2-1: Menu1-2-1
+  pureMenu1-2-2: Menu1-2-2
+  pureMenu1-3: Menu1-3
+  pureMenu2: Menu2
+  purePermission: Permission Manage
+  purePermissionPage: Page Permission
+  purePermissionButton: Button Permission
+  purePermissionButtonRouter: Route return button permission
+  purePermissionButtonLogin: Login interface return button permission
+  pureTabs: Tabs Operate
+  pureGuide: Guide
+  pureAble: Able
+  pureMenuTree: Menu Tree
+  pureVideoFrame: Video Frame Capture
+  pureWavesurfer: Audio Visualization
+  pureRipple: Ripple
+  pureMqtt: Mqtt Client
+  pureOptimize: Debounce、Throttle、Copy、Longpress Directives
+  pureVerify: Captcha
+  pureWatermark: Water Mark
+  purePrint: Print
+  pureDownload: Download
+  pureExternalPage: External Page
+  pureExternalDoc: Docs External
+  pureEmbeddedDoc: Docs Embedded
+  pureExternalLink: Vue-Pure-Admin
+  pureUtilsLink: Pure-Admin-Utils
+  pureColorHuntDoc: ColorHunt
+  pureUiGradients: UiGradients
+  pureEpDoc: Element-Plus
+  pureTailwindcssDoc: Tailwindcss
+  pureVueDoc: Vue3
+  pureViteDoc: Vite
+  purePiniaDoc: Pinia
+  pureRouterDoc: Vue-Router
+  pureAbout: About
+  pureResult: Result Page
+  pureSuccess: Success Page
+  pureFail: Fail Page
+  pureIconSelect: Icon Select
+  pureTimeline: Time Line
+  pureLineTree: LineTree
+  pureList: List Page
+  pureCardList: Card List Page
+  pureDebounce: Debounce & Throttle
+  pureFormDesign: Form Design
+  pureBarcode: Barcode
+  pureQrcode: Qrcode
+  pureCascader: Area Cascader
+  pureSwiper: Swiper Plugin
+  pureVirtualList: Virtual List
+  purePdf: PDF Preview
+  pureExcel: Export Excel
+  pureInfiniteScroll: Table Infinite Scroll
+  pureSensitive: Sensitive Filter
+  purePinyin: PinYin
+  pureDanmaku: Danmaku
+  pureSchemaForm: Form
+  pureTableBase: Base Usage
+  pureTableHigh: High Usage
+  pureTableEdit: Edit Usage
+  pureVxeTable: Virtual Usage
+  pureBoard: Paint Board
+  pureMindMap: Mind Map
+  pureMenuOverflow: Menu Overflow Show Tooltip Text
+  pureChildMenuOverflow: Child Menu Overflow Show Tooltip Text
+status:
+  pureLoad: Loading...
+  pureMessage: Message
+  pureNotify: Notify
+  pureTodo: Todo
+  pureNoMessage: No Message
+  pureNoNotify: No Notify
+  pureNoTodo: No Todo
+login:
+  pureUsername: Username
+  purePassword: Password
+  pureVerifyCode: VerifyCode
+  pureRemember: days no need to login
+  pureRememberInfo: After checking and logging in, will automatically log in to the system without entering your username and password within the specified number of days.
+  pureSure: Sure Password
+  pureForget: Forget Password?
+  pureLogin: Login
+  pureThirdLogin: Third Login
+  purePhoneLogin: Phone Login
+  pureQRCodeLogin: QRCode Login
+  pureRegister: Register
+  pureWeChatLogin: WeChat Login
+  pureAlipayLogin: Alipay Login
+  pureQQLogin: QQ Login
+  pureWeiBoLogin: Weibo Login
+  purePhone: Phone
+  pureSmsVerifyCode: SMS VerifyCode
+  pureBack: Back
+  pureTest: Mock Test
+  pureTip: After scanning the code, click "Confirm" to complete the login
+  pureDefinite: Definite
+  pureLoginSuccess: Login Success
+  pureLoginFail: Login Fail
+  pureRegisterSuccess: Regist Success
+  pureTickPrivacy: Please tick Privacy Policy
+  pureReadAccept: I have read it carefully and accept
+  purePrivacyPolicy: Privacy Policy
+  pureGetVerifyCode: Get VerifyCode
+  pureInfo: Seconds
+  pureUsernameReg: Please enter username
+  purePassWordReg: Please enter password
+  pureVerifyCodeReg: Please enter verify code
+  pureVerifyCodeCorrectReg: Please enter correct verify code
+  pureVerifyCodeSixReg: Please enter a 6-digit verify code
+  purePhoneReg: Please enter the phone
+  purePhoneCorrectReg: Please enter the correct phone number format
+  purePassWordRuleReg: The password format should be any combination of 8-18 digits
+  purePassWordSureReg: Please enter confirm password
+  purePassWordDifferentReg: The two passwords do not match!
+  purePassWordUpdateReg: Password has been updated
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/locales/zh-CN.yaml b/Yi.Pure.Vue3/locales/zh-CN.yaml
new file mode 100644
index 00000000..7be27a8e
--- /dev/null
+++ b/Yi.Pure.Vue3/locales/zh-CN.yaml
@@ -0,0 +1,236 @@
+buttons:
+  pureAccountSettings: 账户设置
+  pureLoginOut: 退出系统
+  pureLogin: 登录
+  pureOpenSystemSet: 打开系统配置
+  pureReload: 重新加载
+  pureCloseCurrentTab: 关闭当前标签页
+  pureCloseLeftTabs: 关闭左侧标签页
+  pureCloseRightTabs: 关闭右侧标签页
+  pureCloseOtherTabs: 关闭其他标签页
+  pureCloseAllTabs: 关闭全部标签页
+  pureContentFullScreen: 内容区全屏
+  pureContentExitFullScreen: 内容区退出全屏
+  pureClickCollapse: 点击折叠
+  pureClickExpand: 点击展开
+  pureConfirm: 确认
+  pureSwitch: 切换
+  pureClose: 关闭
+  pureBackTop: 回到顶部
+  pureOpenText: 开
+  pureCloseText: 关
+search:
+  pureTotal: 共
+  pureHistory: 搜索历史
+  pureCollect: 收藏
+  pureDragSort: （可拖拽排序）
+  pureEmpty: 暂无搜索结果
+  purePlaceholder: 搜索菜单（支持拼音搜索）
+panel:
+  pureSystemSet: 系统配置
+  pureCloseSystemSet: 关闭配置
+  pureClearCacheAndToLogin: 清空缓存并返回登录页
+  pureClearCache: 清空缓存
+  pureOverallStyle: 整体风格
+  pureOverallStyleLight: 浅色
+  pureOverallStyleLightTip: 清新启航，点亮舒适的工作界面
+  pureOverallStyleDark: 深色
+  pureOverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
+  pureOverallStyleSystem: 自动
+  pureOverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
+  pureThemeColor: 主题色
+  pureLayoutModel: 导航模式
+  pureVerticalTip: 左侧菜单，亲切熟悉
+  pureHorizontalTip: 顶部菜单，简洁概览
+  pureMixTip: 混合菜单，灵活多变
+  pureStretch: 页宽
+  pureStretchFixed: 固定
+  pureStretchFixedTip: 紧凑页面，轻松找到所需信息
+  pureStretchCustom: 自定义
+  pureStretchCustomTip: 最小1280、最大1600
+  pureTagsStyle: 页签风格
+  pureTagsStyleSmart: 灵动
+  pureTagsStyleSmartTip: 灵动标签，添趣生辉
+  pureTagsStyleCard: 卡片
+  pureTagsStyleCardTip: 卡片标签，高效浏览
+  pureTagsStyleChrome: 谷歌
+  pureTagsStyleChromeTip: 谷歌风格，经典美观
+  pureInterfaceDisplay: 界面显示
+  pureGreyModel: 灰色模式
+  pureWeakModel: 色弱模式
+  pureHiddenTags: 隐藏标签页
+  pureHiddenFooter: 隐藏页脚
+  pureMultiTagsCache: 页签持久化
+menus:
+  pureHome: 首页
+  pureLogin: 登录
+  pureEmpty: 无Layout页
+  pureTable: 表格
+  pureSysManagement: 系统管理
+  pureUser: 用户管理
+  pureRole: 角色管理
+  pureSystemMenu: 菜单管理
+  pureDept: 部门管理
+  pureSysMonitor: 系统监控
+  pureOnlineUser: 在线用户
+  pureLoginLog: 登录日志
+  pureOperationLog: 操作日志
+  pureSystemLog: 系统日志
+  pureEditor: 编辑器
+  pureAbnormal: 异常页面
+  pureFourZeroFour: "404"
+  pureFourZeroOne: "403"
+  pureFive: "500"
+  pureComponents: 组件
+  pureDialog: 函数式弹框
+  pureMessage: 消息提示
+  pureVideo: 视频
+  pureSegmented: 分段控制器
+  pureWaterfall: 瀑布流无限滚动
+  pureMap: 地图
+  pureDraggable: 拖拽
+  pureSplitPane: 切割面板
+  pureText: 文本省略
+  pureElButton: 按钮
+  pureCheckButton: 可选按钮
+  pureButton: 按钮动效
+  pureCropping: 图片裁剪
+  pureAnimatecss: animate.css选择器
+  pureCountTo: 数字动画
+  pureSelector: 范围选择器
+  pureFlowChart: 流程图
+  pureSeamless: 无缝滚动
+  pureContextmenu: 右键菜单
+  pureTypeit: 打字机
+  pureJsonEditor: JSON编辑器
+  pureColorPicker: 颜色选择器
+  pureDatePicker: 日期选择器
+  pureDateTimePicker: 日期时间选择器
+  pureTimePicker: 时间选择器
+  pureTag: 标签
+  pureStatistic: 统计组件
+  pureCollapse: 折叠面板
+  pureGanttastic: 甘特图
+  pureProgress: 进度条
+  pureUpload: 文件上传
+  pureCheckCard: 多选卡片
+  pureMenus: 多级菜单
+  pureMenu1: 菜单1
+  pureMenu1-1: 菜单1-1
+  pureMenu1-2: 菜单1-2
+  pureMenu1-2-1: 菜单1-2-1
+  pureMenu1-2-2: 菜单1-2-2
+  pureMenu1-3: 菜单1-3
+  pureMenu2: 菜单二
+  purePermission: 权限管理
+  purePermissionPage: 页面权限
+  purePermissionButton: 按钮权限
+  purePermissionButtonRouter: 路由返回按钮权限
+  purePermissionButtonLogin: 登录接口返回按钮权限
+  pureTabs: 标签页操作
+  pureGuide: 引导页
+  pureAble: 功能
+  pureMenuTree: 菜单树结构
+  pureVideoFrame: 视频帧截取-wasm版
+  pureWavesurfer: 音频可视化
+  pureRipple: 波纹(Ripple)
+  pureMqtt: MQTT客户端(mqtt)
+  pureOptimize: 防抖、截流、复制、长按指令
+  pureVerify: 图形验证码
+  pureWatermark: 水印
+  purePrint: 打印
+  pureDownload: 下载
+  pureExternalPage: 外部页面
+  pureExternalDoc: 文档外链
+  pureEmbeddedDoc: 文档内嵌
+  pureExternalLink: vue-pure-admin
+  pureUtilsLink: pure-admin-utils
+  pureColorHuntDoc: 调色板
+  pureUiGradients: 渐变色
+  pureEpDoc: element-plus
+  pureTailwindcssDoc: tailwindcss
+  pureVueDoc: vue3
+  pureViteDoc: vite
+  purePiniaDoc: pinia
+  pureRouterDoc: vue-router
+  pureAbout: 关于
+  pureResult: 结果页面
+  pureSuccess: 成功页面
+  pureFail: 失败页面
+  pureIconSelect: 图标选择器
+  pureTimeline: 时间线
+  pureLineTree: 树形连接线
+  pureList: 列表页面
+  pureCardList: 卡片列表页
+  pureDebounce: 防抖节流
+  pureFormDesign: 表单设计器
+  pureBarcode: 条形码
+  pureQrcode: 二维码
+  pureCascader: 区域级联选择器
+  pureSwiper: Swiper插件
+  pureVirtualList: 虚拟列表
+  purePdf: PDF预览
+  pureExcel: 导出Excel
+  pureInfiniteScroll: 表格无限滚动
+  pureSensitive: 敏感词过滤
+  purePinyin: 汉语拼音
+  pureDanmaku: 弹幕
+  pureSchemaForm: 表单
+  pureTableBase: 基础用法
+  pureTableHigh: 高级用法
+  pureTableEdit: 可编辑用法
+  pureVxeTable: 虚拟滚动
+  pureBoard: 艺术画板
+  pureMindMap: 思维导图
+  pureMenuOverflow: 目录超出显示 Tooltip 文字提示
+  pureChildMenuOverflow: 菜单超出显示 Tooltip 文字提示
+status:
+  pureLoad: 加载中...
+  pureMessage: 消息
+  pureNotify: 通知
+  pureTodo: 待办
+  pureNoMessage: 暂无消息
+  pureNoNotify: 暂无通知
+  pureNoTodo: 暂无待办
+login:
+  pureUsername: 账号
+  purePassword: 密码
+  pureVerifyCode: 验证码
+  pureRemember: 天内免登录
+  pureRememberInfo: 勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统
+  pureSure: 确认密码
+  pureForget: 忘记密码?
+  pureLogin: 登录
+  pureThirdLogin: 第三方登录
+  purePhoneLogin: 手机登录
+  pureQRCodeLogin: 二维码登录
+  pureRegister: 注册
+  pureWeChatLogin: 微信登录
+  pureAlipayLogin: 支付宝登录
+  pureQQLogin: QQ登录
+  pureWeiBoLogin: 微博登录
+  purePhone: 手机号码
+  pureSmsVerifyCode: 短信验证码
+  pureBack: 返回
+  pureTest: 模拟测试
+  pureTip: 扫码后点击"确认"，即可完成登录
+  pureDefinite: 确定
+  pureLoginSuccess: 登录成功
+  pureLoginFail: 登录失败
+  pureRegisterSuccess: 注册成功
+  pureTickPrivacy: 请勾选隐私政策
+  pureReadAccept: 我已仔细阅读并接受
+  purePrivacyPolicy: 《隐私政策》
+  pureGetVerifyCode: 获取验证码
+  pureInfo: 秒后重新获取
+  pureUsernameReg: 请输入账号
+  purePassWordReg: 请输入密码
+  pureVerifyCodeReg: 请输入验证码
+  pureVerifyCodeCorrectReg: 请输入正确的验证码
+  pureVerifyCodeSixReg: 请输入6位数字验证码
+  purePhoneReg: 请输入手机号码
+  purePhoneCorrectReg: 请输入正确的手机号码格式
+  purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
+  purePassWordSureReg: 请输入确认密码
+  purePassWordDifferentReg: 两次密码不一致!
+  purePassWordUpdateReg: 修改密码成功
diff --git a/Yi.Pure.Vue3/mock/asyncRoutes.ts b/Yi.Pure.Vue3/mock/asyncRoutes.ts
new file mode 100644
index 00000000..5ca55597
--- /dev/null
+++ b/Yi.Pure.Vue3/mock/asyncRoutes.ts
@@ -0,0 +1,340 @@
+// 模拟后端动态生成路由
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { system, monitor, permission, frame, tabs } from "@/router/enums";
+
+/**
+ * roles：页面级别权限，这里模拟二种 "admin"、"common"
+ * admin：管理员角色
+ * common：普通角色
+ */
+
+const systemManagementRouter = {
+  path: "/system",
+  meta: {
+    icon: "ri:settings-3-line",
+    title: "menus.pureSysManagement",
+    rank: system
+  },
+  children: [
+    {
+      path: "/system/user/index",
+      name: "SystemUser",
+      meta: {
+        icon: "ri:admin-line",
+        title: "menus.pureUser",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/role/index",
+      name: "SystemRole",
+      meta: {
+        icon: "ri:admin-fill",
+        title: "menus.pureRole",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/menu/index",
+      name: "SystemMenu",
+      meta: {
+        icon: "ep:menu",
+        title: "menus.pureSystemMenu",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/system/dept/index",
+      name: "SystemDept",
+      meta: {
+        icon: "ri:git-branch-line",
+        title: "menus.pureDept",
+        roles: ["admin"]
+      }
+    }
+  ]
+};
+
+const systemMonitorRouter = {
+  path: "/monitor",
+  meta: {
+    icon: "ep:monitor",
+    title: "menus.pureSysMonitor",
+    rank: monitor
+  },
+  children: [
+    {
+      path: "/monitor/online-user",
+      component: "monitor/online/index",
+      name: "OnlineUser",
+      meta: {
+        icon: "ri:user-voice-line",
+        title: "menus.pureOnlineUser",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/login-logs",
+      component: "monitor/logs/login/index",
+      name: "LoginLog",
+      meta: {
+        icon: "ri:window-line",
+        title: "menus.pureLoginLog",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/operation-logs",
+      component: "monitor/logs/operation/index",
+      name: "OperationLog",
+      meta: {
+        icon: "ri:history-fill",
+        title: "menus.pureOperationLog",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/system-logs",
+      component: "monitor/logs/system/index",
+      name: "SystemLog",
+      meta: {
+        icon: "ri:file-search-line",
+        title: "menus.pureSystemLog",
+        roles: ["admin"]
+      }
+    }
+  ]
+};
+
+const permissionRouter = {
+  path: "/permission",
+  meta: {
+    title: "menus.purePermission",
+    icon: "ep:lollipop",
+    rank: permission
+  },
+  children: [
+    {
+      path: "/permission/page/index",
+      name: "PermissionPage",
+      meta: {
+        title: "menus.purePermissionPage",
+        roles: ["admin", "common"]
+      }
+    },
+    {
+      path: "/permission/button",
+      meta: {
+        title: "menus.purePermissionButton",
+        roles: ["admin", "common"]
+      },
+      children: [
+        {
+          path: "/permission/button/router",
+          component: "permission/button/index",
+          name: "PermissionButtonRouter",
+          meta: {
+            title: "menus.purePermissionButtonRouter",
+            auths: [
+              "permission:btn:add",
+              "permission:btn:edit",
+              "permission:btn:delete"
+            ]
+          }
+        },
+        {
+          path: "/permission/button/login",
+          component: "permission/button/perms",
+          name: "PermissionButtonLogin",
+          meta: {
+            title: "menus.purePermissionButtonLogin"
+          }
+        }
+      ]
+    }
+  ]
+};
+
+const frameRouter = {
+  path: "/iframe",
+  meta: {
+    icon: "ri:links-fill",
+    title: "menus.pureExternalPage",
+    rank: frame
+  },
+  children: [
+    {
+      path: "/iframe/embedded",
+      meta: {
+        title: "menus.pureEmbeddedDoc"
+      },
+      children: [
+        {
+          path: "/iframe/colorhunt",
+          name: "FrameColorHunt",
+          meta: {
+            title: "menus.pureColorHuntDoc",
+            frameSrc: "https://colorhunt.co/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/uigradients",
+          name: "FrameUiGradients",
+          meta: {
+            title: "menus.pureUiGradients",
+            frameSrc: "https://uigradients.com/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/ep",
+          name: "FrameEp",
+          meta: {
+            title: "menus.pureEpDoc",
+            frameSrc: "https://element-plus.org/zh-CN/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/tailwindcss",
+          name: "FrameTailwindcss",
+          meta: {
+            title: "menus.pureTailwindcssDoc",
+            frameSrc: "https://tailwindcss.com/docs/installation",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/vue3",
+          name: "FrameVue",
+          meta: {
+            title: "menus.pureVueDoc",
+            frameSrc: "https://cn.vuejs.org/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/vite",
+          name: "FrameVite",
+          meta: {
+            title: "menus.pureViteDoc",
+            frameSrc: "https://cn.vitejs.dev/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/pinia",
+          name: "FramePinia",
+          meta: {
+            title: "menus.purePiniaDoc",
+            frameSrc: "https://pinia.vuejs.org/zh/index.html",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/vue-router",
+          name: "FrameRouter",
+          meta: {
+            title: "menus.pureRouterDoc",
+            frameSrc: "https://router.vuejs.org/zh/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        }
+      ]
+    },
+    {
+      path: "/iframe/external",
+      meta: {
+        title: "menus.pureExternalDoc"
+      },
+      children: [
+        {
+          path: "/external",
+          name: "https://pure-admin.github.io/pure-admin-doc",
+          meta: {
+            title: "menus.pureExternalLink",
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/pureUtilsLink",
+          name: "https://pure-admin-utils.netlify.app/",
+          meta: {
+            title: "menus.pureUtilsLink",
+            roles: ["admin", "common"]
+          }
+        }
+      ]
+    }
+  ]
+};
+
+const tabsRouter = {
+  path: "/tabs",
+  meta: {
+    icon: "ri:bookmark-2-line",
+    title: "menus.pureTabs",
+    rank: tabs
+  },
+  children: [
+    {
+      path: "/tabs/index",
+      name: "Tabs",
+      meta: {
+        title: "menus.pureTabs",
+        roles: ["admin", "common"]
+      }
+    },
+    // query 传参模式
+    {
+      path: "/tabs/query-detail",
+      name: "TabQueryDetail",
+      meta: {
+        // 不在menu菜单中显示
+        showLink: false,
+        activePath: "/tabs/index",
+        roles: ["admin", "common"]
+      }
+    },
+    // params 传参模式
+    {
+      path: "/tabs/params-detail/:id",
+      component: "params-detail",
+      name: "TabParamsDetail",
+      meta: {
+        // 不在menu菜单中显示
+        showLink: false,
+        activePath: "/tabs/index",
+        roles: ["admin", "common"]
+      }
+    }
+  ]
+};
+
+export default defineFakeRoute([
+  {
+    url: "/get-async-routes",
+    method: "get",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          systemManagementRouter,
+          systemMonitorRouter,
+          permissionRouter,
+          frameRouter,
+          tabsRouter
+        ]
+      };
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/mock/list.ts b/Yi.Pure.Vue3/mock/list.ts
new file mode 100644
index 00000000..2212b4ea
--- /dev/null
+++ b/Yi.Pure.Vue3/mock/list.ts
@@ -0,0 +1,455 @@
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+
+export default defineFakeRoute([
+  {
+    url: "/get-card-list",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: {
+          list: [
+            {
+              index: 1,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 2,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "人脸识别",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 3,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 4,
+              isSetup: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "SSL证书",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 5,
+              isSetup: true,
+              type: 3,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 6,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 7,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "CVM",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 8,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 9,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 10,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 11,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 12,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 13,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "云数据库",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 14,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 15,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 16,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 17,
+              isSetup: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 18,
+              isSetup: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "云数据库",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 19,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 20,
+              isSetup: true,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 21,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 22,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 23,
+              isSetup: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "人脸识别",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 24,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "人脸识别",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 25,
+              isSetup: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 26,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 27,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 28,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "云数据库",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 29,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 30,
+              isSetup: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 31,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 32,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 33,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 34,
+              isSetup: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 35,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "云数据库",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 36,
+              isSetup: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 37,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 38,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "云数据库",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 39,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "人脸识别",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 40,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 41,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 42,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 43,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 44,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 45,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 46,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 47,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 48,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            }
+          ]
+        }
+      };
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/mock/login.ts b/Yi.Pure.Vue3/mock/login.ts
new file mode 100644
index 00000000..55897d8f
--- /dev/null
+++ b/Yi.Pure.Vue3/mock/login.ts
@@ -0,0 +1,42 @@
+// 根据角色动态生成路由
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+
+export default defineFakeRoute([
+  {
+    url: "/login",
+    method: "post",
+    response: ({ body }) => {
+      if (body.username === "admin") {
+        return {
+          success: true,
+          data: {
+            avatar: "https://avatars.githubusercontent.com/u/44761321",
+            username: "admin",
+            nickname: "小铭",
+            // 一个用户可能有多个角色
+            roles: ["admin"],
+            // 按钮级别权限
+            permissions: ["*:*:*"],
+            accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
+            refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
+            expires: "2030/10/30 00:00:00"
+          }
+        };
+      } else {
+        return {
+          success: true,
+          data: {
+            avatar: "https://avatars.githubusercontent.com/u/52823142",
+            username: "common",
+            nickname: "小林",
+            roles: ["common"],
+            permissions: ["permission:btn:add", "permission:btn:edit"],
+            accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
+            refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
+            expires: "2030/10/30 00:00:00"
+          }
+        };
+      }
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/mock/map.ts b/Yi.Pure.Vue3/mock/map.ts
new file mode 100644
index 00000000..e8bf3c16
--- /dev/null
+++ b/Yi.Pure.Vue3/mock/map.ts
@@ -0,0 +1,41 @@
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { faker } from "@faker-js/faker/locale/zh_CN";
+
+type mapType = {
+  plateNumber: string;
+  driver: string;
+  orientation: number;
+  lng: number;
+  lat: number;
+};
+
+const mapList = (): Array<mapType> => {
+  const result: Array<mapType> = [];
+  for (let index = 0; index < 200; index++) {
+    result.push({
+      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 defineFakeRoute([
+  {
+    url: "/get-map-info",
+    method: "get",
+    response: () => {
+      return {
+        success: true,
+        data: mapList()
+      };
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/mock/mine.ts b/Yi.Pure.Vue3/mock/mine.ts
new file mode 100644
index 00000000..0f896613
--- /dev/null
+++ b/Yi.Pure.Vue3/mock/mine.ts
@@ -0,0 +1,59 @@
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { faker } from "@faker-js/faker/locale/zh_CN";
+
+export default defineFakeRoute([
+  // 账户设置-个人信息
+  {
+    url: "/mine",
+    method: "get",
+    response: () => {
+      return {
+        success: true,
+        data: {
+          avatar: "https://avatars.githubusercontent.com/u/44761321",
+          username: "admin",
+          nickname: "小铭",
+          email: "pureadmin@163.com",
+          phone: "15888886789",
+          description: "一个热爱开源的前端工程师"
+        }
+      };
+    }
+  },
+  // 账户设置-个人安全日志
+  {
+    url: "/mine-logs",
+    method: "get",
+    response: () => {
+      let list = [
+        {
+          id: 1,
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          summary: "账户登录", // 详情
+          operatingTime: new Date() // 时间
+        },
+        {
+          id: 2,
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          summary: "绑定了手机号码",
+          operatingTime: new Date().setDate(new Date().getDate() - 1)
+        }
+      ];
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/mock/refreshToken.ts b/Yi.Pure.Vue3/mock/refreshToken.ts
new file mode 100644
index 00000000..34d0e876
--- /dev/null
+++ b/Yi.Pure.Vue3/mock/refreshToken.ts
@@ -0,0 +1,27 @@
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+
+// 模拟刷新token接口
+export default defineFakeRoute([
+  {
+    url: "/refresh-token",
+    method: "post",
+    response: ({ body }) => {
+      if (body.refreshToken) {
+        return {
+          success: true,
+          data: {
+            accessToken: "eyJhbGciOiJIUzUxMiJ9.newAdmin",
+            refreshToken: "eyJhbGciOiJIUzUxMiJ9.newAdminRefresh",
+            // `expires`选择这种日期格式是为了方便调试，后端直接设置时间戳或许更方便（每次都应该递增）。如果后端返回的是时间戳格式，前端开发请来到这个目录`src/utils/auth.ts`，把第`38`行的代码换成expires = data.expires即可。
+            expires: "2030/10/30 23:59:59"
+          }
+        };
+      } else {
+        return {
+          success: false,
+          data: {}
+        };
+      }
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/mock/system.ts b/Yi.Pure.Vue3/mock/system.ts
new file mode 100644
index 00000000..5c9172cd
--- /dev/null
+++ b/Yi.Pure.Vue3/mock/system.ts
@@ -0,0 +1,1799 @@
+import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { faker } from "@faker-js/faker/locale/zh_CN";
+
+export default defineFakeRoute([
+  // 用户管理
+  {
+    url: "/user",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          avatar: "https://avatars.githubusercontent.com/u/44761321",
+          username: "admin",
+          nickname: "小铭",
+          phone: "15888886789",
+          email: faker.internet.email(),
+          sex: 0,
+          id: 1,
+          status: 1,
+          dept: {
+            // 部门id
+            id: 103,
+            // 部门名称
+            name: "研发部门"
+          },
+          remark: "管理员",
+          createTime: 1605456000000
+        },
+        {
+          avatar: "https://avatars.githubusercontent.com/u/52823142",
+          username: "common",
+          nickname: "小林",
+          phone: "18288882345",
+          email: faker.internet.email(),
+          sex: 1,
+          id: 2,
+          status: 1,
+          dept: {
+            id: 105,
+            name: "测试部门"
+          },
+          remark: "普通用户",
+          createTime: 1605456000000
+        }
+      ];
+      list = list.filter(item => item.username.includes(body?.username));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      if (body.phone) list = list.filter(item => item.phone === body.phone);
+      if (body.deptId) list = list.filter(item => item.dept.id === body.deptId);
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 用户管理-获取所有角色列表
+  {
+    url: "/list-all-role",
+    method: "get",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          { id: 1, name: "超级管理员" },
+          { id: 2, name: "普通角色" }
+        ]
+      };
+    }
+  },
+  // 用户管理-根据 userId 获取对应角色 id 列表（userId：用户id）
+  {
+    url: "/list-role-ids",
+    method: "post",
+    response: ({ body }) => {
+      if (body.userId) {
+        if (body.userId == 1) {
+          return {
+            success: true,
+            data: [1]
+          };
+        } else if (body.userId == 2) {
+          return {
+            success: true,
+            data: [2]
+          };
+        }
+      } else {
+        return {
+          success: false,
+          data: []
+        };
+      }
+    }
+  },
+  // 角色管理
+  {
+    url: "/role",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          createTime: 1605456000000, // 时间戳（毫秒ms）
+          updateTime: 1684512000000,
+          id: 1,
+          name: "超级管理员",
+          code: "admin",
+          status: 1, // 状态 1 启用 0 停用
+          remark: "超级管理员拥有最高权限"
+        },
+        {
+          createTime: 1605456000000,
+          updateTime: 1684512000000,
+          id: 2,
+          name: "普通角色",
+          code: "common",
+          status: 1,
+          remark: "普通角色拥有部分权限"
+        }
+      ];
+      list = list.filter(item => item.name.includes(body?.name));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      if (body.code) list = list.filter(item => item.code === body.code);
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 角色管理-权限-菜单权限
+  {
+    url: "/role-menu",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          // 外部页面
+          {
+            parentId: 0,
+            id: 100,
+            menuType: 0, // 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）
+            title: "menus.pureExternalPage"
+          },
+          {
+            parentId: 100,
+            id: 101,
+            menuType: 0,
+            title: "menus.pureExternalDoc"
+          },
+          {
+            parentId: 101,
+            id: 102,
+            menuType: 2,
+            title: "menus.pureExternalLink"
+          },
+          {
+            parentId: 101,
+            id: 103,
+            menuType: 2,
+            title: "menus.pureUtilsLink"
+          },
+          {
+            parentId: 100,
+            id: 104,
+            menuType: 1,
+            title: "menus.pureEmbeddedDoc"
+          },
+          {
+            parentId: 104,
+            id: 105,
+            menuType: 1,
+            title: "menus.pureEpDoc"
+          },
+          {
+            parentId: 104,
+            id: 106,
+            menuType: 1,
+            title: "menus.pureTailwindcssDoc"
+          },
+          {
+            parentId: 104,
+            id: 107,
+            menuType: 1,
+            title: "menus.pureVueDoc"
+          },
+          {
+            parentId: 104,
+            id: 108,
+            menuType: 1,
+            title: "menus.pureViteDoc"
+          },
+          {
+            parentId: 104,
+            id: 109,
+            menuType: 1,
+            title: "menus.purePiniaDoc"
+          },
+          {
+            parentId: 104,
+            id: 110,
+            menuType: 1,
+            title: "menus.pureRouterDoc"
+          },
+          // 权限管理
+          {
+            parentId: 0,
+            id: 200,
+            menuType: 0,
+            title: "menus.purePermission"
+          },
+          {
+            parentId: 200,
+            id: 201,
+            menuType: 0,
+            title: "menus.purePermissionPage"
+          },
+          {
+            parentId: 200,
+            id: 202,
+            menuType: 0,
+            title: "menus.purePermissionButton"
+          },
+          {
+            parentId: 202,
+            id: 203,
+            menuType: 3,
+            title: "添加"
+          },
+          {
+            parentId: 202,
+            id: 204,
+            menuType: 3,
+            title: "修改"
+          },
+          {
+            parentId: 202,
+            id: 205,
+            menuType: 3,
+            title: "删除"
+          },
+          // 系统管理
+          {
+            parentId: 0,
+            id: 300,
+            menuType: 0,
+            title: "menus.pureSysManagement"
+          },
+          {
+            parentId: 300,
+            id: 301,
+            menuType: 0,
+            title: "menus.pureUser"
+          },
+          {
+            parentId: 300,
+            id: 302,
+            menuType: 0,
+            title: "menus.pureRole"
+          },
+          {
+            parentId: 300,
+            id: 303,
+            menuType: 0,
+            title: "menus.pureSystemMenu"
+          },
+          {
+            parentId: 300,
+            id: 304,
+            menuType: 0,
+            title: "menus.pureDept"
+          },
+          // 系统监控
+          {
+            parentId: 0,
+            id: 400,
+            menuType: 0,
+            title: "menus.pureSysMonitor"
+          },
+          {
+            parentId: 400,
+            id: 401,
+            menuType: 0,
+            title: "menus.pureOnlineUser"
+          },
+          {
+            parentId: 400,
+            id: 402,
+            menuType: 0,
+            title: "menus.pureLoginLog"
+          },
+          {
+            parentId: 400,
+            id: 403,
+            menuType: 0,
+            title: "menus.pureOperationLog"
+          },
+          {
+            parentId: 400,
+            id: 404,
+            menuType: 0,
+            title: "menus.pureSystemLog"
+          },
+          // 标签页操作
+          {
+            parentId: 0,
+            id: 500,
+            menuType: 0,
+            title: "menus.pureTabs"
+          },
+          {
+            parentId: 500,
+            id: 501,
+            menuType: 0,
+            title: "menus.pureTabs"
+          },
+          {
+            parentId: 500,
+            id: 502,
+            menuType: 0,
+            title: "query传参模式"
+          },
+          {
+            parentId: 500,
+            id: 503,
+            menuType: 0,
+            title: "params传参模式"
+          }
+        ]
+      };
+    }
+  },
+  // 角色管理-权限-菜单权限-根据角色 id 查对应菜单
+  {
+    url: "/role-menu-ids",
+    method: "post",
+    response: ({ body }) => {
+      if (body.id == 1) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 200, 201,
+            202, 203, 204, 205, 300, 301, 302, 303, 304, 400, 401, 402, 403,
+            404, 500, 501, 502, 503
+          ]
+        };
+      } else if (body.id == 2) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 404, 500,
+            501, 502, 503
+          ]
+        };
+      }
+    }
+  },
+  // 菜单管理
+  {
+    url: "/menu",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          // 外部页面
+          {
+            parentId: 0,
+            id: 100,
+            menuType: 0, // 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）
+            title: "menus.pureExternalPage",
+            name: "PureIframe",
+            path: "/iframe",
+            component: "",
+            rank: 7,
+            redirect: "",
+            icon: "ri:links-fill",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 100,
+            id: 101,
+            menuType: 0,
+            title: "menus.pureExternalDoc",
+            name: "PureIframeExternal",
+            path: "/iframe/external",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 101,
+            id: 102,
+            menuType: 2,
+            title: "menus.pureExternalLink",
+            name: "https://pure-admin.github.io/pure-admin-doc",
+            path: "/external",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 101,
+            id: 103,
+            menuType: 2,
+            title: "menus.pureUtilsLink",
+            name: "https://pure-admin-utils.netlify.app/",
+            path: "/pureUtilsLink",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 100,
+            id: 104,
+            menuType: 1,
+            title: "menus.pureEmbeddedDoc",
+            name: "PureIframeEmbedded",
+            path: "/iframe/embedded",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 104,
+            id: 105,
+            menuType: 1,
+            title: "menus.pureEpDoc",
+            name: "FrameEp",
+            path: "/iframe/ep",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "https://element-plus.org/zh-CN/",
+            frameLoading: true,
+            keepAlive: true,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 104,
+            id: 106,
+            menuType: 1,
+            title: "menus.pureTailwindcssDoc",
+            name: "FrameTailwindcss",
+            path: "/iframe/tailwindcss",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "https://tailwindcss.com/docs/installation",
+            frameLoading: true,
+            keepAlive: true,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 104,
+            id: 107,
+            menuType: 1,
+            title: "menus.pureVueDoc",
+            name: "FrameVue",
+            path: "/iframe/vue3",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "https://cn.vuejs.org/",
+            frameLoading: true,
+            keepAlive: true,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 104,
+            id: 108,
+            menuType: 1,
+            title: "menus.pureViteDoc",
+            name: "FrameVite",
+            path: "/iframe/vite",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "https://cn.vitejs.dev/",
+            frameLoading: true,
+            keepAlive: true,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 104,
+            id: 109,
+            menuType: 1,
+            title: "menus.purePiniaDoc",
+            name: "FramePinia",
+            path: "/iframe/pinia",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "https://pinia.vuejs.org/zh/index.html",
+            frameLoading: true,
+            keepAlive: true,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 104,
+            id: 110,
+            menuType: 1,
+            title: "menus.pureRouterDoc",
+            name: "FrameRouter",
+            path: "/iframe/vue-router",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "https://router.vuejs.org/zh/",
+            frameLoading: true,
+            keepAlive: true,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          // 权限管理
+          {
+            parentId: 0,
+            id: 200,
+            menuType: 0,
+            title: "menus.purePermission",
+            name: "PurePermission",
+            path: "/permission",
+            component: "",
+            rank: 9,
+            redirect: "",
+            icon: "ep:lollipop",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 200,
+            id: 201,
+            menuType: 0,
+            title: "menus.purePermissionPage",
+            name: "PermissionPage",
+            path: "/permission/page/index",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 200,
+            id: 202,
+            menuType: 0,
+            title: "menus.purePermissionButton",
+            name: "PermissionButton",
+            path: "/permission/button",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 202,
+            id: 203,
+            menuType: 0,
+            title: "menus.purePermissionButtonRouter",
+            name: "PermissionButtonRouter",
+            path: "/permission/button/router",
+            component: "permission/button/index",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 203,
+            id: 210,
+            menuType: 3,
+            title: "添加",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:add",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 203,
+            id: 211,
+            menuType: 3,
+            title: "修改",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:edit",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 203,
+            id: 212,
+            menuType: 3,
+            title: "删除",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:delete",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 202,
+            id: 204,
+            menuType: 0,
+            title: "menus.purePermissionButtonLogin",
+            name: "PermissionButtonLogin",
+            path: "/permission/button/login",
+            component: "permission/button/perms",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 220,
+            menuType: 3,
+            title: "添加",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:add",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 221,
+            menuType: 3,
+            title: "修改",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:edit",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 222,
+            menuType: 3,
+            title: "删除",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:delete",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          // 系统管理
+          {
+            parentId: 0,
+            id: 300,
+            menuType: 0,
+            title: "menus.pureSysManagement",
+            name: "PureSystem",
+            path: "/system",
+            component: "",
+            rank: 10,
+            redirect: "",
+            icon: "ri:settings-3-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 300,
+            id: 301,
+            menuType: 0,
+            title: "menus.pureUser",
+            name: "SystemUser",
+            path: "/system/user/index",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "ri:admin-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 300,
+            id: 302,
+            menuType: 0,
+            title: "menus.pureRole",
+            name: "SystemRole",
+            path: "/system/role/index",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "ri:admin-fill",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 300,
+            id: 303,
+            menuType: 0,
+            title: "menus.pureSystemMenu",
+            name: "SystemMenu",
+            path: "/system/menu/index",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "ep:menu",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 300,
+            id: 304,
+            menuType: 0,
+            title: "menus.pureDept",
+            name: "SystemDept",
+            path: "/system/dept/index",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "ri:git-branch-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          // 系统监控
+          {
+            parentId: 0,
+            id: 400,
+            menuType: 0,
+            title: "menus.pureSysMonitor",
+            name: "PureMonitor",
+            path: "/monitor",
+            component: "",
+            rank: 11,
+            redirect: "",
+            icon: "ep:monitor",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 400,
+            id: 401,
+            menuType: 0,
+            title: "menus.pureOnlineUser",
+            name: "OnlineUser",
+            path: "/monitor/online-user",
+            component: "monitor/online/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:user-voice-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 400,
+            id: 402,
+            menuType: 0,
+            title: "menus.pureLoginLog",
+            name: "LoginLog",
+            path: "/monitor/login-logs",
+            component: "monitor/logs/login/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:window-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 400,
+            id: 403,
+            menuType: 0,
+            title: "menus.pureOperationLog",
+            name: "OperationLog",
+            path: "/monitor/operation-logs",
+            component: "monitor/logs/operation/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:history-fill",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 400,
+            id: 404,
+            menuType: 0,
+            title: "menus.pureSystemLog",
+            name: "SystemLog",
+            path: "/monitor/system-logs",
+            component: "monitor/logs/system/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:file-search-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          // 标签页操作
+          {
+            parentId: 0,
+            id: 500,
+            menuType: 0,
+            title: "menus.pureTabs",
+            name: "PureTabs",
+            path: "/tabs",
+            component: "",
+            rank: 12,
+            redirect: "",
+            icon: "ri:bookmark-2-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 500,
+            id: 501,
+            menuType: 0,
+            title: "menus.pureTabs",
+            name: "Tabs",
+            path: "/tabs/index",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 500,
+            id: 502,
+            menuType: 0,
+            title: "query传参模式",
+            name: "TabQueryDetail",
+            path: "/tabs/query-detail",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "/tabs/index",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: false,
+            showParent: false
+          },
+          {
+            parentId: 500,
+            id: 503,
+            menuType: 0,
+            title: "params传参模式",
+            name: "TabParamsDetail",
+            path: "/tabs/params-detail/:id",
+            component: "params-detail",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "/tabs/index",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: false,
+            showParent: false
+          }
+        ]
+      };
+    }
+  },
+  // 部门管理
+  {
+    url: "/dept",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          {
+            name: "杭州总公司",
+            parentId: 0,
+            id: 100,
+            sort: 0,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1, // 状态 1 启用 0 停用
+            type: 1, // 1 公司 2 分公司 3 部门
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "郑州分公司",
+            parentId: 100,
+            id: 101,
+            sort: 1,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1,
+            type: 2,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "研发部门",
+            parentId: 101,
+            id: 103,
+            sort: 1,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "市场部门",
+            parentId: 102,
+            id: 108,
+            sort: 1,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "深圳分公司",
+            parentId: 100,
+            id: 102,
+            sort: 2,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1,
+            type: 2,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "市场部门",
+            parentId: 101,
+            id: 104,
+            sort: 2,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "财务部门",
+            parentId: 102,
+            id: 109,
+            sort: 2,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "测试部门",
+            parentId: 101,
+            id: 105,
+            sort: 3,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 0,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "财务部门",
+            parentId: 101,
+            id: 106,
+            sort: 4,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          },
+          {
+            name: "运维部门",
+            parentId: 101,
+            id: 107,
+            sort: 5,
+            phone: "15888888888",
+            principal: faker.person.firstName(),
+            email: faker.internet.email(),
+            status: 0,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "这里是备注信息这里是备注信息这里是备注信息这里是备注信息"
+          }
+        ]
+      };
+    }
+  },
+  // 在线用户
+  {
+    url: "/online-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1,
+          username: "admin",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          loginTime: new Date()
+        },
+        {
+          id: 2,
+          username: "common",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          loginTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.username.includes(body?.username));
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 登录日志
+  {
+    url: "/login-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1,
+          username: "admin",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          status: 1, // 登录状态 1 成功 0 失败
+          behavior: "账号登录",
+          loginTime: new Date()
+        },
+        {
+          id: 2,
+          username: "common",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          status: 0,
+          behavior: "第三方登录",
+          loginTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.username.includes(body?.username));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 操作日志
+  {
+    url: "/operation-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1,
+          username: "admin",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          status: 1, // 操作状态 1 成功 0 失败
+          summary: "菜单管理-添加菜单", // 操作概要
+          module: "系统管理", // 所属模块
+          operatingTime: new Date() // 操作时间
+        },
+        {
+          id: 2,
+          username: "common",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          status: 0,
+          summary: "列表分页查询",
+          module: "在线用户",
+          operatingTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.module.includes(body?.module));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 系统日志
+  {
+    url: "/system-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1, // 日志ID
+          /**
+           * 日志级别
+           * 0 debug调试（最低级别的日志，用于调试和开发阶段）
+           * 1 info信息（默认级别，用于记录一般的信息）
+           * 2 warn警告（表示可能出现的问题或潜在的错误，但不会影响系统的正常运行）
+           * 3 error错误（表示发生了错误，但不会导致系统崩溃）
+           * 4 fatal致命（最高级别的日志，表示发生了严重错误，导致系统无法继续运行）
+           */
+          level: 1,
+          module: "菜单管理", // 所属模块
+          url: "/menu", // 请求接口
+          method: "post", // 请求方法
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          /**
+           * 请求耗时（单位：ms 毫秒）
+           * 正常耗时：一般认为在几百毫秒（0.1-0.5秒）范围内的请求耗时较为正常
+           * 较慢耗时：在1秒以上的耗时可以被认为是较慢的请求，但具体是否较慢还需要根据具体业务场景和性能要求来判断
+           */
+          takesTime: 10,
+          requestTime: new Date() // 请求时间
+        },
+        {
+          id: 2,
+          level: 0,
+          module: "地图",
+          url: "/get-map-info",
+          method: "get",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          takesTime: 1200,
+          requestTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.module.includes(body?.module));
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 系统日志-根据 id 查日志详情
+  {
+    url: "/system-logs-detail",
+    method: "post",
+    response: ({ body }) => {
+      if (body.id == 1) {
+        return {
+          id: 1,
+          level: 1,
+          module: "菜单管理",
+          url: "/menu",
+          method: "post",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          takesTime: 10,
+          responseHeaders: {
+            traceId: "1495502411171032",
+            "Content-Type": "application/json",
+            Connection: "keep-alive",
+            "Keep-Alive": "timeout=5",
+            "Content-Length": 17019
+          },
+          responseBody: {
+            success: true,
+            data: [
+              {
+                parentId: 0,
+                id: 400,
+                menuType: 0,
+                title: "menus.pureSysMonitor",
+                name: "PureMonitor",
+                path: "/monitor",
+                component: "",
+                rank: 11,
+                redirect: "",
+                icon: "ep:monitor",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                fixedTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 401,
+                menuType: 0,
+                title: "menus.pureOnlineUser",
+                name: "OnlineUser",
+                path: "/monitor/online-user",
+                component: "monitor/online/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:user-voice-line",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                fixedTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 402,
+                menuType: 0,
+                title: "menus.pureLoginLog",
+                name: "LoginLog",
+                path: "/monitor/login-logs",
+                component: "monitor/logs/login/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:window-line",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                fixedTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 403,
+                menuType: 0,
+                title: "menus.pureOperationLog",
+                name: "OperationLog",
+                path: "/monitor/operation-logs",
+                component: "monitor/logs/operation/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:history-fill",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                fixedTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 404,
+                menuType: 0,
+                title: "menus.pureSystemLog",
+                name: "SystemLog",
+                path: "/monitor/system-logs",
+                component: "monitor/logs/system/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:file-search-line",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                fixedTag: false,
+                showLink: true,
+                showParent: false
+              }
+            ]
+          },
+          requestHeaders: {
+            Accept: "application/json, text/plain, */*",
+            "Accept-Encoding": "gzip, deflate",
+            "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8,eo;q=0.7",
+            Authorization: "Bearer eyJhbGciOiJIUzUxMiJ9.admin",
+            Connection: "keep-alive",
+            "Content-Length": 0,
+            Cookie:
+              "_ga=GA1.1.231800979.1704562367; _ga_M74ZHEQ1M1=GS1.1.1709299375.7.1.1709299476.0.0.0; Hm_lvt_6a7dac00248d3b6ad8479d7249bb29c5=1709032753,1709359575; Hm_lvt_23a157b7d0d9867f7a51e42628f052f5=1708960489,1709485849,1709879672; authorized-token={%22accessToken%22:%22eyJhbGciOiJIUzUxMiJ9.admin%22%2C%22expires%22:1919520000000}; multiple-tabs=true",
+            Host: "192.168.2.121:8848",
+            Origin: "http://192.168.2.121:8848",
+            Referer: "http://192.168.2.121:8848/",
+            "User-Agent":
+              "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
+            "X-Requested-With": "XMLHttpRequest"
+          },
+          requestBody: {
+            title: "系统监控"
+          },
+          traceId: "1495502411171032",
+          requestTime: new Date()
+        };
+      } else if (body.id == 2) {
+        return {
+          id: 2,
+          level: 0,
+          module: "地图",
+          url: "/get-map-info?plateNumber=豫A59778U",
+          method: "get",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          takesTime: 1200,
+          responseHeaders: {
+            traceId: "2280443117103208",
+            "Content-Type": "application/json",
+            Connection: "keep-alive",
+            "Keep-Alive": "timeout=5",
+            "Content-Length": 28693
+          },
+          responseBody: {
+            plateNumber: "豫A59778U",
+            driver: "子骞",
+            orientation: 289,
+            lng: 113.8564,
+            lat: 34.373
+          },
+          requestHeaders: {
+            Accept: "application/json, text/plain, */*",
+            "Accept-Encoding": "gzip, deflate",
+            "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8,eo;q=0.7",
+            Authorization: "Bearer eyJhbGciOiJIUzUxMiJ9.admin",
+            Connection: "keep-alive",
+            "Content-Length": 0,
+            Cookie:
+              "_ga=GA1.1.231800979.1704562367; _ga_M74ZHEQ1M1=GS1.1.1709299375.7.1.1709299476.0.0.0; Hm_lvt_6a7dac00248d3b6ad8479d7249bb29c5=1709032753,1709359575; Hm_lvt_23a157b7d0d9867f7a51e42628f052f5=1708960489,1709485849,1709879672; authorized-token={%22accessToken%22:%22eyJhbGciOiJIUzUxMiJ9.admin%22%2C%22expires%22:1919520000000}; multiple-tabs=true",
+            Host: "192.168.2.121:8848",
+            Origin: "http://192.168.2.121:8848",
+            Referer: "http://192.168.2.121:8848/",
+            "User-Agent":
+              "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
+            "X-Requested-With": "XMLHttpRequest"
+          },
+          requestBody: null,
+          traceId: "2280443117103208",
+          requestTime: new Date()
+        };
+      }
+    }
+  }
+]);
diff --git a/Yi.Pure.Vue3/package.json b/Yi.Pure.Vue3/package.json
new file mode 100644
index 00000000..bbeedf55
--- /dev/null
+++ b/Yi.Pure.Vue3/package.json
@@ -0,0 +1,199 @@
+{
+  "name": "vue-pure-admin",
+  "version": "5.8.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 && 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 . -r",
+    "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-location node_modules/.cache/stylelint/",
+    "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
+    "prepare": "husky",
+    "preinstall": "npx only-allow pnpm"
+  },
+  "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.1.3",
+    "@infectoone/vue-ganttastic": "^2.3.2",
+    "@logicflow/core": "^1.2.28",
+    "@logicflow/extension": "^1.2.28",
+    "@pureadmin/descriptions": "^1.2.1",
+    "@pureadmin/table": "^3.2.0",
+    "@pureadmin/utils": "^2.4.8",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/core": "^1.39.3",
+    "@vueuse/core": "^10.11.1",
+    "@vueuse/motion": "^2.2.3",
+    "@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.7.3",
+    "china-area-data": "^5.0.1",
+    "cropperjs": "^1.6.2",
+    "dayjs": "^1.11.12",
+    "echarts": "^5.5.1",
+    "el-table-infinite-scroll": "^3.0.6",
+    "element-plus": "^2.8.0",
+    "intro.js": "^7.2.0",
+    "js-cookie": "^3.0.5",
+    "jsbarcode": "^3.11.6",
+    "localforage": "^1.10.0",
+    "mint-filter": "^4.0.3",
+    "mitt": "^3.0.1",
+    "mqtt": "4.3.7",
+    "nprogress": "^0.2.0",
+    "path": "^0.12.7",
+    "pinia": "^2.2.1",
+    "pinyin-pro": "^3.24.2",
+    "plus-pro-components": "^0.1.14",
+    "qrcode": "^1.5.4",
+    "qs": "^6.13.0",
+    "responsive-storage": "^2.2.0",
+    "sortablejs": "^1.15.2",
+    "swiper": "^11.1.9",
+    "typeit": "^8.8.4",
+    "v-contextmenu": "^3.2.0",
+    "v3-infinite-loading": "^1.3.1",
+    "version-rocket": "^1.7.2",
+    "vue": "^3.4.37",
+    "vue-i18n": "^9.13.1",
+    "vue-json-pretty": "^2.4.0",
+    "vue-pdf-embed": "^2.1.0",
+    "vue-router": "^4.4.3",
+    "vue-tippy": "^6.4.4",
+    "vue-types": "^5.1.3",
+    "vue-virtual-scroller": "2.0.0-beta.8",
+    "vue-waterfall-plugin-next": "^2.4.3",
+    "vue3-danmaku": "^1.6.1",
+    "vue3-puzzle-vcode": "^1.1.7",
+    "vuedraggable": "^4.1.0",
+    "vxe-table": "4.6.17",
+    "wavesurfer.js": "^7.8.3",
+    "xgplayer": "^3.0.19",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.4.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/types": "^19.0.3",
+    "@eslint/js": "^9.9.0",
+    "@faker-js/faker": "^8.4.1",
+    "@iconify-icons/ep": "^1.2.12",
+    "@iconify-icons/ri": "^1.2.10",
+    "@iconify/vue": "^4.1.2",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@pureadmin/theme": "^3.2.0",
+    "@types/dagre": "^0.7.52",
+    "@types/gradient-string": "^1.1.6",
+    "@types/intro.js": "^5.1.5",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^20.14.15",
+    "@types/nprogress": "^0.2.3",
+    "@types/qrcode": "^1.5.5",
+    "@types/qs": "^6.9.15",
+    "@types/sortablejs": "^1.15.8",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "autoprefixer": "^10.4.20",
+    "boxen": "^7.1.1",
+    "cssnano": "^7.0.5",
+    "dagre": "^0.8.5",
+    "eslint": "^9.9.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
+    "gradient-string": "^2.0.2",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.8",
+    "postcss": "^8.4.41",
+    "postcss-html": "^1.7.0",
+    "postcss-import": "^16.1.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.3.3",
+    "rimraf": "^5.0.10",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.77.8",
+    "stylelint": "^16.8.1",
+    "stylelint-config-recess-order": "^5.0.1",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "svgo": "^3.3.2",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
+    "vite-plugin-cdn-import": "^1.0.1",
+    "vite-plugin-checker": "^0.7.2",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-fake-server": "^2.1.1",
+    "vite-plugin-remove-console": "^2.2.0",
+    "vite-plugin-router-warn": "^1.0.0",
+    "vite-plugin-vue-inspector": "^5.1.3",
+    "vite-svg-loader": "^5.1.0",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.0.29"
+  },
+  "engines": {
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0",
+    "pnpm": ">=9"
+  },
+  "pnpm": {
+    "allowedDeprecatedVersions": {
+      "are-we-there-yet": "*",
+      "sourcemap-codec": "*",
+      "domexception": "*",
+      "w3c-hr-time": "*",
+      "inflight": "*",
+      "npmlog": "*",
+      "rimraf": "*",
+      "stable": "*",
+      "gauge": "*",
+      "abab": "*",
+      "glob": "*"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "eslint": "9"
+      }
+    }
+  }
+}
diff --git a/Yi.Pure.Vue3/pnpm-lock.yaml b/Yi.Pure.Vue3/pnpm-lock.yaml
new file mode 100644
index 00000000..a6bef9a6
--- /dev/null
+++ b/Yi.Pure.Vue3/pnpm-lock.yaml
@@ -0,0 +1,11537 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@amap/amap-jsapi-loader':
+        specifier: ^1.0.1
+        version: 1.0.1
+      '@howdyjs/mouse-menu':
+        specifier: ^2.1.3
+        version: 2.1.3(vue@3.4.37(typescript@5.5.4))
+      '@infectoone/vue-ganttastic':
+        specifier: ^2.3.2
+        version: 2.3.2(dayjs@1.11.12)(vue@3.4.37(typescript@5.5.4))
+      '@logicflow/core':
+        specifier: ^1.2.28
+        version: 1.2.28
+      '@logicflow/extension':
+        specifier: ^1.2.28
+        version: 1.2.28(canvas@2.11.2)
+      '@pureadmin/descriptions':
+        specifier: ^1.2.1
+        version: 1.2.1(echarts@5.5.1)(element-plus@2.8.0(vue@3.4.37(typescript@5.5.4)))(typescript@5.5.4)
+      '@pureadmin/table':
+        specifier: ^3.2.0
+        version: 3.2.0(element-plus@2.8.0(vue@3.4.37(typescript@5.5.4)))(typescript@5.5.4)
+      '@pureadmin/utils':
+        specifier: ^2.4.8
+        version: 2.4.8(echarts@5.5.1)(vue@3.4.37(typescript@5.5.4))
+      '@vue-flow/background':
+        specifier: ^1.3.0
+        version: 1.3.0(@vue-flow/core@1.39.3(vue@3.4.37(typescript@5.5.4)))(vue@3.4.37(typescript@5.5.4))
+      '@vue-flow/core':
+        specifier: ^1.39.3
+        version: 1.39.3(vue@3.4.37(typescript@5.5.4))
+      '@vueuse/core':
+        specifier: ^10.11.1
+        version: 10.11.1(vue@3.4.37(typescript@5.5.4))
+      '@vueuse/motion':
+        specifier: ^2.2.3
+        version: 2.2.3(rollup@4.20.0)(vue@3.4.37(typescript@5.5.4))
+      '@wangeditor/editor':
+        specifier: ^5.1.23
+        version: 5.1.23
+      '@wangeditor/editor-for-vue':
+        specifier: ^5.1.12
+        version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.4.37(typescript@5.5.4))
+      '@zxcvbn-ts/core':
+        specifier: ^3.0.4
+        version: 3.0.4
+      animate.css:
+        specifier: ^4.1.1
+        version: 4.1.1
+      axios:
+        specifier: ^1.7.3
+        version: 1.7.3
+      china-area-data:
+        specifier: ^5.0.1
+        version: 5.0.1
+      cropperjs:
+        specifier: ^1.6.2
+        version: 1.6.2
+      dayjs:
+        specifier: ^1.11.12
+        version: 1.11.12
+      echarts:
+        specifier: ^5.5.1
+        version: 5.5.1
+      el-table-infinite-scroll:
+        specifier: ^3.0.6
+        version: 3.0.6(typescript@5.5.4)
+      element-plus:
+        specifier: ^2.8.0
+        version: 2.8.0(vue@3.4.37(typescript@5.5.4))
+      intro.js:
+        specifier: ^7.2.0
+        version: 7.2.0
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
+      jsbarcode:
+        specifier: ^3.11.6
+        version: 3.11.6
+      localforage:
+        specifier: ^1.10.0
+        version: 1.10.0
+      mint-filter:
+        specifier: ^4.0.3
+        version: 4.0.3
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
+      mqtt:
+        specifier: 4.3.7
+        version: 4.3.7
+      nprogress:
+        specifier: ^0.2.0
+        version: 0.2.0
+      path:
+        specifier: ^0.12.7
+        version: 0.12.7
+      pinia:
+        specifier: ^2.2.1
+        version: 2.2.1(typescript@5.5.4)(vue@3.4.37(typescript@5.5.4))
+      pinyin-pro:
+        specifier: ^3.24.2
+        version: 3.24.2
+      plus-pro-components:
+        specifier: ^0.1.14
+        version: 0.1.14(element-plus@2.8.0(vue@3.4.37(typescript@5.5.4)))(vue@3.4.37(typescript@5.5.4))
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
+      qs:
+        specifier: ^6.13.0
+        version: 6.13.0
+      responsive-storage:
+        specifier: ^2.2.0
+        version: 2.2.0
+      sortablejs:
+        specifier: ^1.15.2
+        version: 1.15.2
+      swiper:
+        specifier: ^11.1.9
+        version: 11.1.9
+      typeit:
+        specifier: ^8.8.4
+        version: 8.8.4
+      v-contextmenu:
+        specifier: ^3.2.0
+        version: 3.2.0(vue@3.4.37(typescript@5.5.4))
+      v3-infinite-loading:
+        specifier: ^1.3.1
+        version: 1.3.1
+      version-rocket:
+        specifier: ^1.7.2
+        version: 1.7.2
+      vue:
+        specifier: ^3.4.37
+        version: 3.4.37(typescript@5.5.4)
+      vue-i18n:
+        specifier: ^9.13.1
+        version: 9.13.1(vue@3.4.37(typescript@5.5.4))
+      vue-json-pretty:
+        specifier: ^2.4.0
+        version: 2.4.0(vue@3.4.37(typescript@5.5.4))
+      vue-pdf-embed:
+        specifier: ^2.1.0
+        version: 2.1.0(vue@3.4.37(typescript@5.5.4))
+      vue-router:
+        specifier: ^4.4.3
+        version: 4.4.3(vue@3.4.37(typescript@5.5.4))
+      vue-tippy:
+        specifier: ^6.4.4
+        version: 6.4.4(vue@3.4.37(typescript@5.5.4))
+      vue-types:
+        specifier: ^5.1.3
+        version: 5.1.3(vue@3.4.37(typescript@5.5.4))
+      vue-virtual-scroller:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8(vue@3.4.37(typescript@5.5.4))
+      vue-waterfall-plugin-next:
+        specifier: ^2.4.3
+        version: 2.4.3(@types/lodash-es@4.17.12)(vue@3.4.37(typescript@5.5.4))
+      vue3-danmaku:
+        specifier: ^1.6.1
+        version: 1.6.1(vue@3.4.37(typescript@5.5.4))
+      vue3-puzzle-vcode:
+        specifier: ^1.1.7
+        version: 1.1.7
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.4.37(typescript@5.5.4))
+      vxe-table:
+        specifier: 4.6.17
+        version: 4.6.17(vue@3.4.37(typescript@5.5.4))
+      wavesurfer.js:
+        specifier: ^7.8.3
+        version: 7.8.3
+      xgplayer:
+        specifier: ^3.0.19
+        version: 3.0.19(core-js@3.38.0)
+      xlsx:
+        specifier: ^0.18.5
+        version: 0.18.5
+    devDependencies:
+      '@commitlint/cli':
+        specifier: ^19.4.0
+        version: 19.4.0(@types/node@20.14.15)(typescript@5.5.4)
+      '@commitlint/config-conventional':
+        specifier: ^19.2.2
+        version: 19.2.2
+      '@commitlint/types':
+        specifier: ^19.0.3
+        version: 19.0.3
+      '@eslint/js':
+        specifier: ^9.9.0
+        version: 9.9.0
+      '@faker-js/faker':
+        specifier: ^8.4.1
+        version: 8.4.1
+      '@iconify-icons/ep':
+        specifier: ^1.2.12
+        version: 1.2.12
+      '@iconify-icons/ri':
+        specifier: ^1.2.10
+        version: 1.2.10
+      '@iconify/vue':
+        specifier: ^4.1.2
+        version: 4.1.2(vue@3.4.37(typescript@5.5.4))
+      '@intlify/unplugin-vue-i18n':
+        specifier: ^4.0.0
+        version: 4.0.0(rollup@4.20.0)(vue-i18n@9.13.1(vue@3.4.37(typescript@5.5.4)))
+      '@pureadmin/theme':
+        specifier: ^3.2.0
+        version: 3.2.0
+      '@types/dagre':
+        specifier: ^0.7.52
+        version: 0.7.52
+      '@types/gradient-string':
+        specifier: ^1.1.6
+        version: 1.1.6
+      '@types/intro.js':
+        specifier: ^5.1.5
+        version: 5.1.5
+      '@types/js-cookie':
+        specifier: ^3.0.6
+        version: 3.0.6
+      '@types/node':
+        specifier: ^20.14.15
+        version: 20.14.15
+      '@types/nprogress':
+        specifier: ^0.2.3
+        version: 0.2.3
+      '@types/qrcode':
+        specifier: ^1.5.5
+        version: 1.5.5
+      '@types/qs':
+        specifier: ^6.9.15
+        version: 6.9.15
+      '@types/sortablejs':
+        specifier: ^1.15.8
+        version: 1.15.8
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^7.18.0
+        version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4))(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
+      '@typescript-eslint/parser':
+        specifier: ^7.18.0
+        version: 7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.2
+        version: 5.1.2(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))(vue@3.4.37(typescript@5.5.4))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.0.0
+        version: 4.0.0(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))(vue@3.4.37(typescript@5.5.4))
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.20(postcss@8.4.41)
+      boxen:
+        specifier: ^7.1.1
+        version: 7.1.1
+      cssnano:
+        specifier: ^7.0.5
+        version: 7.0.5(postcss@8.4.41)
+      dagre:
+        specifier: ^0.8.5
+        version: 0.8.5
+      eslint:
+        specifier: ^9.9.0
+        version: 9.9.0(jiti@1.21.6)
+      eslint-config-prettier:
+        specifier: ^9.1.0
+        version: 9.1.0(eslint@9.9.0(jiti@1.21.6))
+      eslint-define-config:
+        specifier: ^2.1.0
+        version: 2.1.0
+      eslint-plugin-prettier:
+        specifier: ^5.2.1
+        version: 5.2.1(eslint-config-prettier@9.1.0(eslint@9.9.0(jiti@1.21.6)))(eslint@9.9.0(jiti@1.21.6))(prettier@3.3.3)
+      eslint-plugin-vue:
+        specifier: ^9.27.0
+        version: 9.27.0(eslint@9.9.0(jiti@1.21.6))
+      gradient-string:
+        specifier: ^2.0.2
+        version: 2.0.2
+      husky:
+        specifier: ^9.1.4
+        version: 9.1.4
+      lint-staged:
+        specifier: ^15.2.8
+        version: 15.2.8
+      postcss:
+        specifier: ^8.4.41
+        version: 8.4.41
+      postcss-html:
+        specifier: ^1.7.0
+        version: 1.7.0
+      postcss-import:
+        specifier: ^16.1.0
+        version: 16.1.0(postcss@8.4.41)
+      postcss-scss:
+        specifier: ^4.0.9
+        version: 4.0.9(postcss@8.4.41)
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
+      rimraf:
+        specifier: ^5.0.10
+        version: 5.0.10
+      rollup-plugin-visualizer:
+        specifier: ^5.12.0
+        version: 5.12.0(rollup@4.20.0)
+      sass:
+        specifier: ^1.77.8
+        version: 1.77.8
+      stylelint:
+        specifier: ^16.8.1
+        version: 16.8.1(typescript@5.5.4)
+      stylelint-config-recess-order:
+        specifier: ^5.0.1
+        version: 5.0.1(stylelint@16.8.1(typescript@5.5.4))
+      stylelint-config-recommended-vue:
+        specifier: ^1.5.0
+        version: 1.5.0(postcss-html@1.7.0)(stylelint@16.8.1(typescript@5.5.4))
+      stylelint-config-standard-scss:
+        specifier: ^13.1.0
+        version: 13.1.0(postcss@8.4.41)(stylelint@16.8.1(typescript@5.5.4))
+      stylelint-prettier:
+        specifier: ^5.0.2
+        version: 5.0.2(prettier@3.3.3)(stylelint@16.8.1(typescript@5.5.4))
+      svgo:
+        specifier: ^3.3.2
+        version: 3.3.2
+      tailwindcss:
+        specifier: ^3.4.9
+        version: 3.4.9
+      typescript:
+        specifier: ^5.5.4
+        version: 5.5.4
+      vite:
+        specifier: ^5.4.0
+        version: 5.4.0(@types/node@20.14.15)(sass@1.77.8)
+      vite-plugin-cdn-import:
+        specifier: ^1.0.1
+        version: 1.0.1(rollup@4.20.0)(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))
+      vite-plugin-checker:
+        specifier: ^0.7.2
+        version: 0.7.2(eslint@9.9.0(jiti@1.21.6))(optionator@0.9.4)(stylelint@16.8.1(typescript@5.5.4))(typescript@5.5.4)(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))(vue-tsc@2.0.29(typescript@5.5.4))
+      vite-plugin-compression:
+        specifier: ^0.5.1
+        version: 0.5.1(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))
+      vite-plugin-fake-server:
+        specifier: ^2.1.1
+        version: 2.1.1
+      vite-plugin-remove-console:
+        specifier: ^2.2.0
+        version: 2.2.0
+      vite-plugin-router-warn:
+        specifier: ^1.0.0
+        version: 1.0.0
+      vite-plugin-vue-inspector:
+        specifier: ^5.1.3
+        version: 5.1.3(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))
+      vite-svg-loader:
+        specifier: ^5.1.0
+        version: 5.1.0(vue@3.4.37(typescript@5.5.4))
+      vue-eslint-parser:
+        specifier: ^9.4.3
+        version: 9.4.3(eslint@9.9.0(jiti@1.21.6))
+      vue-tsc:
+        specifier: ^2.0.29
+        version: 2.0.29(typescript@5.5.4)
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@amap/amap-jsapi-loader@1.0.1':
+    resolution: {integrity: sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==}
+
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@babel/code-frame@7.24.7':
+    resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.25.2':
+    resolution: {integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.25.2':
+    resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.25.0':
+    resolution: {integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.24.7':
+    resolution: {integrity: sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.25.2':
+    resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.25.0':
+    resolution: {integrity: sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-member-expression-to-functions@7.24.8':
+    resolution: {integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.22.15':
+    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.24.7':
+    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.25.2':
+    resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.24.7':
+    resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.24.8':
+    resolution: {integrity: sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.25.0':
+    resolution: {integrity: sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-simple-access@7.24.7':
+    resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.24.7':
+    resolution: {integrity: sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.24.8':
+    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.24.7':
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.24.8':
+    resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.25.0':
+    resolution: {integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/highlight@7.24.7':
+    resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.25.3':
+    resolution: {integrity: sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-proposal-decorators@7.24.7':
+    resolution: {integrity: sha512-RL9GR0pUG5Kc8BUWLNDm2T5OpYwSX15r98I0IkgmRQTXuELq/OynH8xtMTMvTJFjXbMWFVTKtYkTaYQsuAwQlQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-async-generators@7.8.4':
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-bigint@7.8.3':
+    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-class-properties@7.12.13':
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-decorators@7.24.7':
+    resolution: {integrity: sha512-Ui4uLJJrRV1lb38zg1yYTmRKmiZLiftDEvZN2iq3kd9kUFU+PttmzTbAFC2ucRk/XJmtek6G23gPsuZbhrT8fQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-attributes@7.24.7':
+    resolution: {integrity: sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-meta@7.10.4':
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-json-strings@7.8.3':
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-jsx@7.24.7':
+    resolution: {integrity: sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3':
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4':
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3':
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3':
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3':
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-top-level-await@7.14.5':
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.24.7':
+    resolution: {integrity: sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.25.2':
+    resolution: {integrity: sha512-lBwRvjSmqiMYe/pS0+1gggjJleUJi7NzjvQ1Fkqtt69hBa/0t1YuW/MLQMAPixfwaQOHUXsd6jeU3Z+vdGv3+A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.25.0':
+    resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/standalone@7.25.3':
+    resolution: {integrity: sha512-uR+EoBqIIIvKGCG7fOj7HKupu3zVObiMfdEwoPZfVCPpcWJaZ1PkshaP5/6cl6BKAm1Zcv25O1rf+uoQ7V8nqA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.25.0':
+    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.25.3':
+    resolution: {integrity: sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.25.2':
+    resolution: {integrity: sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+
+  '@commitlint/cli@19.4.0':
+    resolution: {integrity: sha512-sJX4J9UioVwZHq7JWM9tjT5bgWYaIN3rC4FP7YwfEwBYiIO+wMyRttRvQLNkow0vCdM0D67r9NEWU0Ui03I4Eg==}
+    engines: {node: '>=v18'}
+    hasBin: true
+
+  '@commitlint/config-conventional@19.2.2':
+    resolution: {integrity: sha512-mLXjsxUVLYEGgzbxbxicGPggDuyWNkf25Ht23owXIH+zV2pv1eJuzLK3t1gDY5Gp6pxdE60jZnWUY5cvgL3ufw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/config-validator@19.0.3':
+    resolution: {integrity: sha512-2D3r4PKjoo59zBc2auodrSCaUnCSALCx54yveOFwwP/i2kfEAQrygwOleFWswLqK0UL/F9r07MFi5ev2ohyM4Q==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/ensure@19.0.3':
+    resolution: {integrity: sha512-SZEpa/VvBLoT+EFZVb91YWbmaZ/9rPH3ESrINOl0HD2kMYsjvl0tF7nMHh0EpTcv4+gTtZBAe1y/SS6/OhfZzQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/execute-rule@19.0.0':
+    resolution: {integrity: sha512-mtsdpY1qyWgAO/iOK0L6gSGeR7GFcdW7tIjcNFxcWkfLDF5qVbPHKuGATFqRMsxcO8OUKNj0+3WOHB7EHm4Jdw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/format@19.3.0':
+    resolution: {integrity: sha512-luguk5/aF68HiF4H23ACAfk8qS8AHxl4LLN5oxPc24H+2+JRPsNr1OS3Gaea0CrH7PKhArBMKBz5RX9sA5NtTg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/is-ignored@19.2.2':
+    resolution: {integrity: sha512-eNX54oXMVxncORywF4ZPFtJoBm3Tvp111tg1xf4zWXGfhBPKpfKG6R+G3G4v5CPlRROXpAOpQ3HMhA9n1Tck1g==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/lint@19.2.2':
+    resolution: {integrity: sha512-xrzMmz4JqwGyKQKTpFzlN0dx0TAiT7Ran1fqEBgEmEj+PU98crOFtysJgY+QdeSagx6EDRigQIXJVnfrI0ratA==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/load@19.4.0':
+    resolution: {integrity: sha512-I4lCWaEZYQJ1y+Y+gdvbGAx9pYPavqZAZ3/7/8BpWh+QjscAn8AjsUpLV2PycBsEx7gupq5gM4BViV9xwTIJuw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/message@19.0.0':
+    resolution: {integrity: sha512-c9czf6lU+9oF9gVVa2lmKaOARJvt4soRsVmbR7Njwp9FpbBgste5i7l/2l5o8MmbwGh4yE1snfnsy2qyA2r/Fw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/parse@19.0.3':
+    resolution: {integrity: sha512-Il+tNyOb8VDxN3P6XoBBwWJtKKGzHlitEuXA5BP6ir/3loWlsSqDr5aecl6hZcC/spjq4pHqNh0qPlfeWu38QA==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/read@19.4.0':
+    resolution: {integrity: sha512-r95jLOEZzKDakXtnQub+zR3xjdnrl2XzerPwm7ch1/cc5JGq04tyaNpa6ty0CRCWdVrk4CZHhqHozb8yZwy2+g==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/resolve-extends@19.1.0':
+    resolution: {integrity: sha512-z2riI+8G3CET5CPgXJPlzftH+RiWYLMYv4C9tSLdLXdr6pBNimSKukYP9MS27ejmscqCTVA4almdLh0ODD2KYg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/rules@19.0.3':
+    resolution: {integrity: sha512-TspKb9VB6svklxNCKKwxhELn7qhtY1rFF8ls58DcFd0F97XoG07xugPjjbVnLqmMkRjZDbDIwBKt9bddOfLaPw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/to-lines@19.0.0':
+    resolution: {integrity: sha512-vkxWo+VQU5wFhiP9Ub9Sre0FYe019JxFikrALVoD5UGa8/t3yOJEpEhxC5xKiENKKhUkTpEItMTRAjHw2SCpZw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/top-level@19.0.0':
+    resolution: {integrity: sha512-KKjShd6u1aMGNkCkaX4aG1jOGdn7f8ZI8TR1VEuNqUOjWTOdcDSsmglinglJ18JTjuBX5I1PtjrhQCRcixRVFQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/types@19.0.3':
+    resolution: {integrity: sha512-tpyc+7i6bPG9mvaBbtKUeghfyZSDgWquIDfMgqYtTbmZ9Y9VzEm2je9EYcQ0aoz5o7NvGS+rcDec93yO08MHYA==}
+    engines: {node: '>=v18'}
+
+  '@csstools/css-parser-algorithms@2.7.1':
+    resolution: {integrity: sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^2.4.1
+
+  '@csstools/css-tokenizer@2.4.1':
+    resolution: {integrity: sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==}
+    engines: {node: ^14 || ^16 || >=18}
+
+  '@csstools/media-query-list-parser@2.1.13':
+    resolution: {integrity: sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^2.7.1
+      '@csstools/css-tokenizer': ^2.4.1
+
+  '@csstools/selector-specificity@3.1.1':
+    resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss-selector-parser: ^6.0.13
+
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
+  '@dual-bundle/import-meta-resolve@4.1.0':
+    resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
+
+  '@element-plus/icons-vue@1.1.4':
+    resolution: {integrity: sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  '@element-plus/icons-vue@2.3.1':
+    resolution: {integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  '@esbuild/aix-ppc64@0.19.12':
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.19.12':
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.19.12':
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.19.12':
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.19.12':
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.19.12':
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.19.12':
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.19.12':
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.19.12':
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.19.12':
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.19.12':
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.19.12':
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.19.12':
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.19.12':
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.19.12':
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.19.12':
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.19.12':
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-x64@0.19.12':
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-x64@0.19.12':
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.19.12':
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.19.12':
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.19.12':
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.19.12':
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.4.0':
+    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.11.0':
+    resolution: {integrity: sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.17.1':
+    resolution: {integrity: sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.1.0':
+    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.9.0':
+    resolution: {integrity: sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.4':
+    resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@faker-js/faker@8.4.1':
+    resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
+
+  '@floating-ui/core@1.6.7':
+    resolution: {integrity: sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==}
+
+  '@floating-ui/dom@1.6.10':
+    resolution: {integrity: sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==}
+
+  '@floating-ui/utils@0.2.7':
+    resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
+
+  '@howdyjs/mouse-menu@2.1.3':
+    resolution: {integrity: sha512-oGTwDSs4ZlqYJ+o76/Ye8pePgTMcliEjUkIusZY4ueosCrKXylSuBFIbCZpH6BZDuZQkzKwV5vSgHyG67KyF0w==}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.3.0':
+    resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
+    engines: {node: '>=18.18'}
+
+  '@iconify-icons/ep@1.2.12':
+    resolution: {integrity: sha512-8EJULn048sQq3fvytpQ5j40omnVOdBKpo+sXdYM35NRrqCe1BihxBesMcCOLWaocqkWia6uTQ3cnRHff4ZA11w==}
+
+  '@iconify-icons/ri@1.2.10':
+    resolution: {integrity: sha512-wNaXsQYK55WDUWCbcjvnwnODV4Jtsp+VC0duPanibEVu876TUYf6kdgTGtH7/GErBCNdJuJJbncG7vbOaeQi7w==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/vue@4.1.2':
+    resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
+    peerDependencies:
+      vue: '>=3'
+
+  '@infectoone/vue-ganttastic@2.3.2':
+    resolution: {integrity: sha512-krxHdlZvo4cdS4axQ99qb756RzwieI7LcyY2vAIehJ5Sxd/jz5Pu/vTplTC0Rxqj8T4v1knYPK9uvTMkQYWYng==}
+    peerDependencies:
+      dayjs: ^1.11.5
+      vue: ^3.2.40
+
+  '@intlify/bundle-utils@8.0.0':
+    resolution: {integrity: sha512-1B++zykRnMwQ+20SpsZI1JCnV/YJt9Oq7AGlEurzkWJOFtFAVqaGc/oV36PBRYeiKnTbY9VYfjBimr2Vt42wLQ==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/core-base@9.13.1':
+    resolution: {integrity: sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@9.13.1':
+    resolution: {integrity: sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@9.13.1':
+    resolution: {integrity: sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/unplugin-vue-i18n@4.0.0':
+    resolution: {integrity: sha512-q2Mhqa/mLi0tulfLFO4fMXXvEbkSZpI5yGhNNsLTNJJ41icEGUuyDe+j5zRZIKSkOJRgX6YbCyibTDJdRsukmw==}
+    engines: {node: '>= 14.16'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+      vue-i18n-bridge: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+      vue-i18n-bridge:
+        optional: true
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
+    engines: {node: '>=8'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
+  '@jest/console@27.5.1':
+    resolution: {integrity: sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/core@27.5.1':
+    resolution: {integrity: sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/environment@27.5.1':
+    resolution: {integrity: sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/fake-timers@27.5.1':
+    resolution: {integrity: sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/globals@27.5.1':
+    resolution: {integrity: sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/reporters@27.5.1':
+    resolution: {integrity: sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/source-map@27.5.1':
+    resolution: {integrity: sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/test-result@27.5.1':
+    resolution: {integrity: sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/test-sequencer@27.5.1':
+    resolution: {integrity: sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/transform@27.5.1':
+    resolution: {integrity: sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jest/types@27.5.1':
+    resolution: {integrity: sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@logicflow/core@1.2.28':
+    resolution: {integrity: sha512-xj9zxYsudK9YLI2UrUa9mXWd4tp8z56Rx4il9Fc/baUWEDwogjqCgblSKepGxEgTX2XX2fQIfUrzqEUoWu2VYQ==}
+
+  '@logicflow/extension@1.2.28':
+    resolution: {integrity: sha512-OHaO57SxjNwDDYVAqrJp/fq9g0NDc4elHmZnWGIqLbkbOMJhiU9IUT2WWK6DctUoYzxhGzTR4Ai5S/TFZ9JjGA==}
+
+  '@mapbox/node-pre-gyp@1.0.11':
+    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
+    hasBin: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@nuxt/kit@3.12.4':
+    resolution: {integrity: sha512-aNRD1ylzijY0oYolldNcZJXVyxdGzNTl+Xd0UYyFQCu9f4wqUZqQ9l+b7arCEzchr96pMK0xdpvLcS3xo1wDcw==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  '@nuxt/schema@3.12.4':
+    resolution: {integrity: sha512-H7FwBV4ChssMaeiLyPdVLOLUa0326ebp3pNbJfGgFt7rSoKh1MmgjorecA8JMxOQZziy3w6EELf4+5cgLh/F1w==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@pkgr/core@0.1.1':
+    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
+  '@pureadmin/descriptions@1.2.1':
+    resolution: {integrity: sha512-7jDJuqz8xnhcmwXdWQnBzOYeX2WK27TRFaVgs9AdiRr+DnKb9W+krHByJwQtxo5lg4qyRh4/IWQGEMfhC2ljeQ==}
+    peerDependencies:
+      element-plus: ^2.0.0
+
+  '@pureadmin/table@3.2.0':
+    resolution: {integrity: sha512-5H09KrQDeGpxVxOKCISi65WcT7mSuyhGTHiDcHUcaZFXMkB874ZikDBuNFMUp4ccqyztoD6AAo9Tk/cqCMhbuQ==}
+    peerDependencies:
+      element-plus: ^2.0.0
+
+  '@pureadmin/theme@3.2.0':
+    resolution: {integrity: sha512-SBlTvEl0rmfqTW/mOJUPftvZe4yF+38CJdlBOvVITpehzCytqlG5i8XKpcs8aAR9SVfhcrLVS5Q6xh7xDVQcJQ==}
+
+  '@pureadmin/utils@2.4.8':
+    resolution: {integrity: sha512-7baOiunmno3mlvk7oKIrEvIEVAbJgIrvvMw9EJMOvTmebfn31F5ps9JyIeDzsnVRABZLSEg0iIVVfYe+DGAeqg==}
+    peerDependencies:
+      echarts: '*'
+      vue: '*'
+    peerDependenciesMeta:
+      echarts:
+        optional: true
+      vue:
+        optional: true
+
+  '@rollup/pluginutils@5.1.0':
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.20.0':
+    resolution: {integrity: sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.20.0':
+    resolution: {integrity: sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.20.0':
+    resolution: {integrity: sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.20.0':
+    resolution: {integrity: sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.20.0':
+    resolution: {integrity: sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.20.0':
+    resolution: {integrity: sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.20.0':
+    resolution: {integrity: sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.20.0':
+    resolution: {integrity: sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.20.0':
+    resolution: {integrity: sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.20.0':
+    resolution: {integrity: sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-s390x-gnu@4.20.0':
+    resolution: {integrity: sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.20.0':
+    resolution: {integrity: sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.20.0':
+    resolution: {integrity: sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-win32-arm64-msvc@4.20.0':
+    resolution: {integrity: sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.20.0':
+    resolution: {integrity: sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.20.0':
+    resolution: {integrity: sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@sindresorhus/merge-streams@2.3.0':
+    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
+    engines: {node: '>=18'}
+
+  '@sinonjs/commons@1.8.6':
+    resolution: {integrity: sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==}
+
+  '@sinonjs/fake-timers@8.1.0':
+    resolution: {integrity: sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==}
+
+  '@sxzz/popperjs-es@2.11.7':
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+
+  '@tootallnate/once@1.1.2':
+    resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
+    engines: {node: '>= 6'}
+
+  '@transloadit/prettier-bytes@0.0.7':
+    resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==}
+
+  '@trysound/sax@0.2.0':
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.6.8':
+    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.20.6':
+    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
+
+  '@types/conventional-commits-parser@5.0.0':
+    resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
+
+  '@types/dagre@0.7.52':
+    resolution: {integrity: sha512-XKJdy+OClLk3hketHi9Qg6gTfe1F3y+UFnHxKA2rn9Dw+oXa4Gb378Ztz9HlMgZKSxpPmn4BNVh9wgkpvrK1uw==}
+
+  '@types/estree@1.0.5':
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+
+  '@types/event-emitter@0.3.5':
+    resolution: {integrity: sha512-zx2/Gg0Eg7gwEiOIIh5w9TrhKKTeQh7CPCOPNc0el4pLSwzebA8SmnHwZs2dWlLONvyulykSwGSQxQHLhjGLvQ==}
+
+  '@types/graceful-fs@4.1.9':
+    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
+
+  '@types/gradient-string@1.1.6':
+    resolution: {integrity: sha512-LkaYxluY4G5wR1M4AKQUal2q61Di1yVVCw42ImFTuaIoQVgmV0WP1xUaLB8zwb47mp82vWTpePI9JmrjEnJ7nQ==}
+
+  '@types/intro.js@5.1.5':
+    resolution: {integrity: sha512-TT1d8ayz07svlBcoqh26sNpQaU6bBpdFcCC+IMZHp46NNX2mYAHAVefM3wCmQSd4UWhhObeMjFByw2IaPKOXlw==}
+
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
+  '@types/istanbul-lib-report@3.0.3':
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+
+  '@types/istanbul-reports@3.0.4':
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+
+  '@types/js-cookie@3.0.6':
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.7':
+    resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
+
+  '@types/mousetrap@1.6.15':
+    resolution: {integrity: sha512-qL0hyIMNPow317QWW/63RvL1x5MVMV+Ru3NaY9f/CuEpCqrmb7WeuK2071ZY5hczOnm38qExWM2i2WtkXLSqFw==}
+
+  '@types/node@20.14.15':
+    resolution: {integrity: sha512-Fz1xDMCF/B00/tYSVMlmK7hVeLh7jE5f3B7X1/hmV0MJBwE27KlS7EvD/Yp+z1lm8mVhwV5w+n8jOZG8AfTlKw==}
+
+  '@types/nprogress@0.2.3':
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
+  '@types/prettier@2.7.3':
+    resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==}
+
+  '@types/qrcode@1.5.5':
+    resolution: {integrity: sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==}
+
+  '@types/qs@6.9.15':
+    resolution: {integrity: sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==}
+
+  '@types/sortablejs@1.15.8':
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+
+  '@types/stack-utils@2.0.3':
+    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+
+  '@types/tinycolor2@1.4.6':
+    resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
+
+  '@types/web-animations-js@2.2.16':
+    resolution: {integrity: sha512-ATELeWMFwj8eQiH0KmvsCl1V2lu/qx/CjOBmv4ADSZS5u8r4reMyjCXtxG7khqyiwH3IOMNdrON/Ugn94OUcRA==}
+
+  '@types/web-bluetooth@0.0.14':
+    resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
+
+  '@types/web-bluetooth@0.0.16':
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
+  '@types/yargs-parser@21.0.3':
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+
+  '@types/yargs@16.0.9':
+    resolution: {integrity: sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==}
+
+  '@typescript-eslint/eslint-plugin@7.18.0':
+    resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^7.0.0
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/parser@7.18.0':
+    resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/scope-manager@7.18.0':
+    resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
+  '@typescript-eslint/type-utils@7.18.0':
+    resolution: {integrity: sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/types@7.18.0':
+    resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
+  '@typescript-eslint/typescript-estree@7.18.0':
+    resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/utils@7.18.0':
+    resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+
+  '@typescript-eslint/visitor-keys@7.18.0':
+    resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
+  '@uppy/companion-client@2.2.2':
+    resolution: {integrity: sha512-5mTp2iq97/mYSisMaBtFRry6PTgZA6SIL7LePteOV5x0/DxKfrZW3DEiQERJmYpHzy7k8johpm2gHnEKto56Og==}
+
+  '@uppy/core@2.3.4':
+    resolution: {integrity: sha512-iWAqppC8FD8mMVqewavCz+TNaet6HPXitmGXpGGREGrakZ4FeuWytVdrelydzTdXx6vVKkOmI2FLztGg73sENQ==}
+
+  '@uppy/store-default@2.1.1':
+    resolution: {integrity: sha512-xnpTxvot2SeAwGwbvmJ899ASk5tYXhmZzD/aCFsXePh/v8rNvR2pKlcQUH7cF/y4baUGq3FHO/daKCok/mpKqQ==}
+
+  '@uppy/utils@4.1.3':
+    resolution: {integrity: sha512-nTuMvwWYobnJcytDO3t+D6IkVq/Qs4Xv3vyoEZ+Iaf8gegZP+rEyoaFT2CK5XLRMienPyqRqNbIfRuFaOWSIFw==}
+
+  '@uppy/xhr-upload@2.1.3':
+    resolution: {integrity: sha512-YWOQ6myBVPs+mhNjfdWsQyMRWUlrDLMoaG7nvf/G6Y3GKZf8AyjFDjvvJ49XWQ+DaZOftGkHmF1uh/DBeGivJQ==}
+    peerDependencies:
+      '@uppy/core': ^2.3.3
+
+  '@vitejs/plugin-vue-jsx@4.0.0':
+    resolution: {integrity: sha512-A+6wL2AdQhDsLsDnY+2v4rRDI1HLJGIMc97a8FURO9tqKsH5QvjWrzsa5DH3NlZsM742W2wODl2fF+bfcTWtXw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.0.0
+
+  '@vitejs/plugin-vue@5.1.2':
+    resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.2.25
+
+  '@volar/language-core@2.4.0-alpha.18':
+    resolution: {integrity: sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==}
+
+  '@volar/source-map@2.4.0-alpha.18':
+    resolution: {integrity: sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==}
+
+  '@volar/typescript@2.4.0-alpha.18':
+    resolution: {integrity: sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==}
+
+  '@vue-flow/background@1.3.0':
+    resolution: {integrity: sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/core@1.39.3':
+    resolution: {integrity: sha512-+BUfHshiPubZCa0nhGUpdAsb8kQViHaDx9k3aQWhaOZXG3ZcHe3ZjVAset+uukfog5f64y+tpjbnUaHG7c40yQ==}
+    peerDependencies:
+      vue: ^3.3.0
+
+  '@vue/babel-helper-vue-transform-on@1.2.2':
+    resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
+
+  '@vue/babel-plugin-jsx@1.2.2':
+    resolution: {integrity: sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.2.2':
+    resolution: {integrity: sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@vue/compiler-core@3.4.37':
+    resolution: {integrity: sha512-ZDDT/KiLKuCRXyzWecNzC5vTcubGz4LECAtfGPENpo0nrmqJHwuWtRLxk/Sb9RAKtR9iFflFycbkjkY+W/PZUQ==}
+
+  '@vue/compiler-dom@3.4.37':
+    resolution: {integrity: sha512-rIiSmL3YrntvgYV84rekAtU/xfogMUJIclUMeIKEtVBFngOL3IeZHhsH3UaFEgB5iFGpj6IW+8YuM/2Up+vVag==}
+
+  '@vue/compiler-sfc@3.4.37':
+    resolution: {integrity: sha512-vCfetdas40Wk9aK/WWf8XcVESffsbNkBQwS5t13Y/PcfqKfIwJX2gF+82th6dOpnpbptNMlMjAny80li7TaCIg==}
+
+  '@vue/compiler-ssr@3.4.37':
+    resolution: {integrity: sha512-TyAgYBWrHlFrt4qpdACh8e9Ms6C/AZQ6A6xLJaWrCL8GCX5DxMzxyeFAEMfU/VFr4tylHm+a2NpfJpcd7+20XA==}
+
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
+  '@vue/devtools-api@6.6.3':
+    resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
+
+  '@vue/language-core@2.0.29':
+    resolution: {integrity: sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/reactivity@3.4.37':
+    resolution: {integrity: sha512-UmdKXGx0BZ5kkxPqQr3PK3tElz6adTey4307NzZ3whZu19i5VavYal7u2FfOmAzlcDVgE8+X0HZ2LxLb/jgbYw==}
+
+  '@vue/runtime-core@3.4.37':
+    resolution: {integrity: sha512-MNjrVoLV/sirHZoD7QAilU1Ifs7m/KJv4/84QVbE6nyAZGQNVOa1HGxaOzp9YqCG+GpLt1hNDC4RbH+KtanV7w==}
+
+  '@vue/runtime-dom@3.4.37':
+    resolution: {integrity: sha512-Mg2EwgGZqtwKrqdL/FKMF2NEaOHuH+Ks9TQn3DHKyX//hQTYOun+7Tqp1eo0P4Ds+SjltZshOSRq6VsU0baaNg==}
+
+  '@vue/server-renderer@3.4.37':
+    resolution: {integrity: sha512-jZ5FAHDR2KBq2FsRUJW6GKDOAG9lUTX8aBEGq4Vf6B/35I9fPce66BornuwmqmKgfiSlecwuOb6oeoamYMohkg==}
+    peerDependencies:
+      vue: 3.4.37
+
+  '@vue/shared@3.4.37':
+    resolution: {integrity: sha512-nIh8P2fc3DflG8+5Uw8PT/1i17ccFn0xxN/5oE9RfV5SVnd7G0XEFRwakrnNFE/jlS95fpGXDVG5zDETS26nmg==}
+
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
+  '@vueuse/core@8.9.4':
+    resolution: {integrity: sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+
+  '@vueuse/core@9.13.0':
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
+  '@vueuse/metadata@8.9.4':
+    resolution: {integrity: sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==}
+
+  '@vueuse/metadata@9.13.0':
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+
+  '@vueuse/motion@2.2.3':
+    resolution: {integrity: sha512-QsS9P7MDKFF2j4eDPuo6lezUDPE7MQp4+unBeR2Ym8RkhtMEw/oVbnHPHL986rsmnnlUZkHVSv5kKoHJzjbtmQ==}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
+  '@vueuse/shared@8.9.4':
+    resolution: {integrity: sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+
+  '@vueuse/shared@9.13.0':
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+
+  '@wangeditor/basic-modules@1.1.7':
+    resolution: {integrity: sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      lodash.throttle: ^4.1.1
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+
+  '@wangeditor/code-highlight@1.0.3':
+    resolution: {integrity: sha512-iazHwO14XpCuIWJNTQTikqUhGKyqj+dUNWJ9288Oym9M2xMVHvnsOmDU2sgUDWVy+pOLojReMPgXCsvvNlOOhw==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+
+  '@wangeditor/core@1.1.19':
+    resolution: {integrity: sha512-KevkB47+7GhVszyYF2pKGKtCSj/YzmClsD03C3zTt+9SR2XWT5T0e3yQqg8baZpcMvkjs1D8Dv4fk8ok/UaS2Q==}
+    peerDependencies:
+      '@uppy/core': ^2.1.1
+      '@uppy/xhr-upload': ^2.0.3
+      dom7: ^3.0.0
+      is-hotkey: ^0.2.0
+      lodash.camelcase: ^4.3.0
+      lodash.clonedeep: ^4.5.0
+      lodash.debounce: ^4.0.8
+      lodash.foreach: ^4.5.0
+      lodash.isequal: ^4.5.0
+      lodash.throttle: ^4.1.1
+      lodash.toarray: ^4.4.0
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+
+  '@wangeditor/editor-for-vue@5.1.12':
+    resolution: {integrity: sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==}
+    peerDependencies:
+      '@wangeditor/editor': '>=5.1.0'
+      vue: ^3.0.5
+
+  '@wangeditor/editor@5.1.23':
+    resolution: {integrity: sha512-0RxfeVTuK1tktUaPROnCoFfaHVJpRAIE2zdS0mpP+vq1axVQpLjM8+fCvKzqYIkH0Pg+C+44hJpe3VVroSkEuQ==}
+
+  '@wangeditor/list-module@1.0.5':
+    resolution: {integrity: sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+
+  '@wangeditor/table-module@1.1.4':
+    resolution: {integrity: sha512-5saanU9xuEocxaemGdNi9t8MCDSucnykEC6jtuiT72kt+/Hhh4nERYx1J20OPsTCCdVr7hIyQenFD1iSRkIQ6w==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      lodash.isequal: ^4.5.0
+      lodash.throttle: ^4.1.1
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+
+  '@wangeditor/upload-image-module@1.0.2':
+    resolution: {integrity: sha512-z81lk/v71OwPDYeQDxj6cVr81aDP90aFuywb8nPD6eQeECtOymrqRODjpO6VGvCVxVck8nUxBHtbxKtjgcwyiA==}
+    peerDependencies:
+      '@uppy/core': ^2.0.3
+      '@uppy/xhr-upload': ^2.0.3
+      '@wangeditor/basic-modules': 1.x
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      lodash.foreach: ^4.5.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+
+  '@wangeditor/video-module@1.1.4':
+    resolution: {integrity: sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==}
+    peerDependencies:
+      '@uppy/core': ^2.1.4
+      '@uppy/xhr-upload': ^2.0.7
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+
+  '@zougt/some-loader-utils@1.4.3':
+    resolution: {integrity: sha512-0FsoqSTQ+qOyp6x5Q6LZQ7xVwquEgLYiIStG3L8p0Q2GsGGYKDkOZ0mIpMt67aNdr8XLsbxXjzTl/iHtTz5zcA==}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+
+  '@zxcvbn-ts/core@3.0.4':
+    resolution: {integrity: sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==}
+
+  JSONStream@1.3.5:
+    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
+    hasBin: true
+
+  abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    deprecated: Use your platform's native atob() and btoa() methods instead
+
+  abbrev@1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+
+  acorn-globals@6.0.0:
+    resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn-walk@7.2.0:
+    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@7.4.1:
+    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  acorn@8.12.1:
+    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  adler-32@1.3.1:
+    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
+    engines: {node: '>=0.8'}
+
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  animate.css@4.1.1:
+    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
+
+  ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  aproba@2.0.0:
+    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
+
+  are-we-there-yet@2.0.0:
+    resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-ify@1.0.0:
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  autoprefixer@10.4.20:
+    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  axios@1.7.3:
+    resolution: {integrity: sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==}
+
+  babel-jest@27.5.1:
+    resolution: {integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      '@babel/core': ^7.8.0
+
+  babel-plugin-istanbul@6.1.1:
+    resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
+    engines: {node: '>=8'}
+
+  babel-plugin-jest-hoist@27.5.1:
+    resolution: {integrity: sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  babel-preset-current-node-syntax@1.0.1:
+    resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  babel-preset-jest@27.5.1:
+    resolution: {integrity: sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  boxen@7.1.1:
+    resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
+    engines: {node: '>=14.16'}
+
+  brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browser-process-hrtime@1.0.0:
+    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
+
+  browserslist@4.23.3:
+    resolution: {integrity: sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  bser@2.1.1:
+    resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  bundle-import@0.0.1:
+    resolution: {integrity: sha512-L0z0iPX7t7ff5eZsK7oMEH+Ly2lzJczFKPHwrta6X8SF64a20R3wOrAOYK1MzHZVaWWugg9qlSTVfVwqvQJ2dw==}
+
+  c12@1.11.1:
+    resolution: {integrity: sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==}
+    peerDependencies:
+      magicast: ^0.3.4
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  call-bind@1.0.7:
+    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
+  camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+
+  camelcase@7.0.1:
+    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
+    engines: {node: '>=14.16'}
+
+  caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+
+  caniuse-lite@1.0.30001651:
+    resolution: {integrity: sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==}
+
+  canvas@2.11.2:
+    resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==}
+    engines: {node: '>=6'}
+
+  cfb@1.2.2:
+    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
+    engines: {node: '>=0.8'}
+
+  chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  char-regex@1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+
+  china-area-data@5.0.1:
+    resolution: {integrity: sha512-BQDPpiv5Nn+018ekcJK2oSD9PAD+E1bvXB0wgabc//dFVS/KvRqCgg0QOEUt3vBkx9XzB5a9BmkJCEZDBxVjVw==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
+  citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+
+  cjs-module-lexer@1.3.1:
+    resolution: {integrity: sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==}
+
+  cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
+  cliui@7.0.4:
+    resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+
+  codepage@1.15.0:
+    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
+    engines: {node: '>=0.8'}
+
+  collect-v8-coverage@1.0.2:
+    resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
+
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color-support@1.1.3:
+    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
+    hasBin: true
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
+  commist@1.1.0:
+    resolution: {integrity: sha512-rraC8NXWOEjhADbZe9QBNzLAN5Q3fsTPQtBV+fEVj6xKIgDgNiEVE6ZNfHpZOqfQ21YUzfVNUXLOEZquYvQPPg==}
+
+  compare-func@2.0.0:
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+
+  compatx@0.1.8:
+    resolution: {integrity: sha512-jcbsEAR81Bt5s1qOFymBufmCbXCXbk0Ql+K5ouj6gCyx2yHlu6AgmGIi9HxfKixpUDO5bCFJUHQ5uM6ecbTebw==}
+
+  compute-scroll-into-view@1.0.20:
+    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
+
+  computeds@0.0.1:
+    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  concat-stream@2.0.0:
+    resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
+    engines: {'0': node >= 6.0}
+
+  confbox@0.1.7:
+    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
+
+  consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  console-control-strings@1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+
+  conventional-changelog-angular@7.0.0:
+    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
+    engines: {node: '>=16'}
+
+  conventional-commits-parser@5.0.0:
+    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  core-js@3.38.0:
+    resolution: {integrity: sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==}
+
+  cosmiconfig-typescript-loader@5.0.0:
+    resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
+    engines: {node: '>=v16'}
+    peerDependencies:
+      '@types/node': '*'
+      cosmiconfig: '>=8.2'
+      typescript: '>=4'
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
+  cropperjs@1.6.2:
+    resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==}
+
+  cross-spawn@7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+
+  css-declaration-sorter@6.4.1:
+    resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==}
+    engines: {node: ^10 || ^12 || >=14}
+    peerDependencies:
+      postcss: ^8.0.9
+
+  css-declaration-sorter@7.2.0:
+    resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.0.9
+
+  css-functions-list@3.2.2:
+    resolution: {integrity: sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==}
+    engines: {node: '>=12 || >=16'}
+
+  css-select@4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+
+  css-select@5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
+
+  css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssnano-preset-default@5.2.14:
+    resolution: {integrity: sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  cssnano-preset-default@7.0.5:
+    resolution: {integrity: sha512-Jbzja0xaKwc5JzxPQoc+fotKpYtWEu4wQLMQe29CM0FjjdRjA4omvbGHl2DTGgARKxSTpPssBsok+ixv8uTBqw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  cssnano-preset-lite@2.1.3:
+    resolution: {integrity: sha512-samvnCll/DUVZu0Qc+JH36nt7dlaOT7WjOgg8SbLJ78sp51JZ12s2hyerxrarjPBG4O53rErUtOY2IYLYgBGEQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  cssnano-utils@3.1.0:
+    resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  cssnano-utils@5.0.0:
+    resolution: {integrity: sha512-Uij0Xdxc24L6SirFr25MlwC2rCFX6scyUmuKpzI+JQ7cyqDEwD42fJ0xfB3yLfOnRDU5LKGgjQ9FA6LYh76GWQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  cssnano@5.1.15:
+    resolution: {integrity: sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  cssnano@7.0.5:
+    resolution: {integrity: sha512-Aq0vqBLtpTT5Yxj+hLlLfNPFuRQCDIjx5JQAhhaedQKLNDvDGeVziF24PS+S1f0Z5KCxWvw0QVI3VNHNBITxVQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  csso@4.2.0:
+    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
+    engines: {node: '>=8.0.0'}
+
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  cssom@0.3.8:
+    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+
+  cssom@0.4.4:
+    resolution: {integrity: sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==}
+
+  cssstyle@2.3.0:
+    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
+    engines: {node: '>=8'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d@1.0.2:
+    resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
+    engines: {node: '>=0.12'}
+
+  dagre@0.8.5:
+    resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
+
+  danmu.js@1.1.13:
+    resolution: {integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==}
+
+  dargs@8.1.0:
+    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
+    engines: {node: '>=12'}
+
+  data-urls@2.0.0:
+    resolution: {integrity: sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==}
+    engines: {node: '>=10'}
+
+  dayjs@1.11.12:
+    resolution: {integrity: sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==}
+
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
+  debug@4.3.6:
+    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
+  decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+
+  decompress-response@4.2.1:
+    resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==}
+    engines: {node: '>=8'}
+
+  dedent@0.7.0:
+    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
+
+  delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+
+  destr@2.0.3:
+    resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
+
+  detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+    engines: {node: '>=8'}
+
+  detect-newline@3.1.0:
+    resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
+    engines: {node: '>=8'}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  diff-sequences@27.5.1:
+    resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dom-serializer@1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  dom-zindex@1.0.4:
+    resolution: {integrity: sha512-PNk7u71TJ1C9Lwjjp5nNuQcVWuECFMmr9kZAwi2UbgWUM7jXdTCe4O4x5bhLUa07jpcZUVA5Du3ho7/FXzS9Ng==}
+
+  dom7@3.0.0:
+    resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domexception@2.0.1:
+    resolution: {integrity: sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==}
+    engines: {node: '>=8'}
+    deprecated: Use your platform's native DOMException instead
+
+  domhandler@4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+
+  domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+
+  dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+
+  dotenv@16.4.5:
+    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+    engines: {node: '>=12'}
+
+  downloadjs@1.4.7:
+    resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}
+
+  duplexify@4.1.3:
+    resolution: {integrity: sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  echarts@5.5.1:
+    resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==}
+
+  el-table-infinite-scroll@3.0.6:
+    resolution: {integrity: sha512-rdrEBcSMYpkD0s0jl28KcGZpiIbWzVR2OAf7hBB+c+c08G89jb9d6rOn+y2DuhE1iI1C0pEOlC5/lrP3QceOXg==}
+
+  electron-to-chromium@1.5.6:
+    resolution: {integrity: sha512-jwXWsM5RPf6j9dPYzaorcBSUg6AiqocPEyMpkchkvntaH9HGfOOMZwxMJjDY/XEs3T5dM7uyH1VhRMkqUU9qVw==}
+
+  element-plus@2.1.4:
+    resolution: {integrity: sha512-pcwgDbKUrzyWbixYB/zIbLPLBQ/NPGPJnGXJ+jYozUSthPW4SuriaUGJKgbAE6PDBAtw3IodiT2E2GbiaZLxww==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  element-plus@2.8.0:
+    resolution: {integrity: sha512-7ngapVlVlQAjocVqD4MUKvKXlBneT9DSDk2mmBOSLRFWNm/HLDT15ozmsvUBfy18sajnyUeSIHTtINE8gfrGMg==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  emittery@0.8.1:
+    resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
+    engines: {node: '>=10'}
+
+  emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  end-of-stream@1.4.4:
+    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+
+  entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@5.0.0:
+    resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==}
+    engines: {node: '>=0.12'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+
+  es-define-property@1.0.0:
+    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@0.4.1:
+    resolution: {integrity: sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==}
+
+  es5-ext@0.10.64:
+    resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
+    engines: {node: '>=0.10'}
+
+  es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+
+  es6-symbol@3.1.4:
+    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
+    engines: {node: '>=0.12'}
+
+  esbuild@0.19.12:
+    resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  eslint-config-prettier@9.1.0:
+    resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-define-config@2.1.0:
+    resolution: {integrity: sha512-QUp6pM9pjKEVannNAbSJNeRuYwW3LshejfyBBpjeMGaJjaDUpVps4C6KVR8R7dWZnD3i0synmrE36znjTkJvdQ==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>=8.6.0'}
+
+  eslint-plugin-prettier@5.2.1:
+    resolution: {integrity: sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '*'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
+  eslint-plugin-vue@9.27.0:
+    resolution: {integrity: sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-scope@8.0.2:
+    resolution: {integrity: sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.0.0:
+    resolution: {integrity: sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.9.0:
+    resolution: {integrity: sha512-JfiKJrbx0506OEerjK2Y1QlldtBxkAlLxT5OEcRF8uaQ86noDe2k31Vw9rnSWv+MXZHj7OOUV/dA0AhdLFcyvA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  esniff@2.0.1:
+    resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
+    engines: {node: '>=0.10'}
+
+  espree@10.1.0:
+    resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
+  exit@0.1.2:
+    resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
+    engines: {node: '>= 0.8.0'}
+
+  expect@27.5.1:
+    resolution: {integrity: sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
+  fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.0.1:
+    resolution: {integrity: sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==}
+
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
+  fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+
+  fb-watchman@2.0.2:
+    resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  file-entry-cache@9.0.0:
+    resolution: {integrity: sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==}
+    engines: {node: '>=18'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flat-cache@5.0.0:
+    resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==}
+    engines: {node: '>=18'}
+
+  flatted@3.3.1:
+    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+
+  follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
+    engines: {node: '>=14'}
+
+  form-data@3.0.1:
+    resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
+    engines: {node: '>= 6'}
+
+  form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+
+  frac@1.1.2:
+    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
+    engines: {node: '>=0.8'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  framesync@6.1.2:
+    resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs-extra@11.2.0:
+    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
+    engines: {node: '>=14.14'}
+
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gauge@3.0.2:
+    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.2.0:
+    resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
+
+  get-package-type@0.1.0:
+    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
+    engines: {node: '>=8.0.0'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
+  get-tsconfig@4.7.6:
+    resolution: {integrity: sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==}
+
+  giget@1.2.3:
+    resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==}
+    hasBin: true
+
+  git-raw-commits@4.0.0:
+    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  globby@14.0.2:
+    resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
+    engines: {node: '>=18'}
+
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
+  gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  gradient-string@2.0.2:
+    resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
+    engines: {node: '>=10'}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  graphlib@2.1.8:
+    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.0.3:
+    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+
+  has-unicode@2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
+
+  hash-sum@2.0.0:
+    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  help-me@3.0.0:
+    resolution: {integrity: sha512-hx73jClhyk910sidBB7ERlnhMlFsJJIBqSVMFDwPN8o2v9nmp5KgLq1Xz1Bf1fCMMZ6mPrX159iG0VLy/fPMtQ==}
+
+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  html-encoding-sniffer@2.0.1:
+    resolution: {integrity: sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==}
+    engines: {node: '>=10'}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+
+  html-void-elements@2.0.1:
+    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
+
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+
+  http-proxy-agent@4.0.1:
+    resolution: {integrity: sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==}
+    engines: {node: '>= 6'}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
+  husky@9.1.4:
+    resolution: {integrity: sha512-bho94YyReb4JV7LYWRWxZ/xr6TtOTt8cMfmQ39MQYJ7f/YE268s3GdghGwi+y4zAeqewE5zYLvuhV0M0ijsDEA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  i18next@20.6.1:
+    resolution: {integrity: sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+    engines: {node: '>= 4'}
+
+  immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+
+  immer@9.0.21:
+    resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==}
+
+  immutable@4.3.7:
+    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
+
+  import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+
+  import-from-string@0.0.4:
+    resolution: {integrity: sha512-ZmtWHOGv55OEFb3HxfQH4L4vAR7g3HUm82N5LmvXugiXlaZ1j/epItoUDjQ+gJ+MjNl+apczmCnqGFq8q2CM6w==}
+
+  import-local@3.2.0:
+    resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  import-meta-resolve@3.1.1:
+    resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
+
+  import-meta-resolve@4.1.0:
+    resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  intro.js@7.2.0:
+    resolution: {integrity: sha512-qbMfaB70rOXVBceIWNYnYTpVTiZsvQh/MIkfdQbpA9di9VBfj1GigUPfcCv3aOfsbrtPcri8vTLTA4FcEDcHSQ==}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.15.0:
+    resolution: {integrity: sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==}
+    engines: {node: '>= 0.4'}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
+  is-fullwidth-code-point@5.0.0:
+    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+    engines: {node: '>=18'}
+
+  is-generator-fn@2.1.0:
+    resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
+    engines: {node: '>=6'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hotkey@0.2.0:
+    resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  is-reference@3.0.2:
+    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-text-path@2.0.0:
+    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
+    engines: {node: '>=8'}
+
+  is-typedarray@1.0.0:
+    resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
+
+  is-url@1.2.4:
+    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-instrument@5.2.1:
+    resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@4.0.1:
+    resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+    engines: {node: '>=8'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jest-changed-files@27.5.1:
+    resolution: {integrity: sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-circus@27.5.1:
+    resolution: {integrity: sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-cli@27.5.1:
+    resolution: {integrity: sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jest-config@27.5.1:
+    resolution: {integrity: sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    peerDependencies:
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      ts-node:
+        optional: true
+
+  jest-diff@27.5.1:
+    resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-docblock@27.5.1:
+    resolution: {integrity: sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-each@27.5.1:
+    resolution: {integrity: sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-environment-jsdom@27.5.1:
+    resolution: {integrity: sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-environment-node@27.5.1:
+    resolution: {integrity: sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-get-type@27.5.1:
+    resolution: {integrity: sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-haste-map@27.5.1:
+    resolution: {integrity: sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-jasmine2@27.5.1:
+    resolution: {integrity: sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-leak-detector@27.5.1:
+    resolution: {integrity: sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-matcher-utils@27.5.1:
+    resolution: {integrity: sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-message-util@27.5.1:
+    resolution: {integrity: sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-mock@27.5.1:
+    resolution: {integrity: sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-pnp-resolver@1.2.3:
+    resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==}
+    engines: {node: '>=6'}
+    peerDependencies:
+      jest-resolve: '*'
+    peerDependenciesMeta:
+      jest-resolve:
+        optional: true
+
+  jest-regex-util@27.5.1:
+    resolution: {integrity: sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-resolve-dependencies@27.5.1:
+    resolution: {integrity: sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-resolve@27.5.1:
+    resolution: {integrity: sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-runner@27.5.1:
+    resolution: {integrity: sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-runtime@27.5.1:
+    resolution: {integrity: sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-serializer@27.5.1:
+    resolution: {integrity: sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-snapshot@27.5.1:
+    resolution: {integrity: sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-util@27.5.1:
+    resolution: {integrity: sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-validate@27.5.1:
+    resolution: {integrity: sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-watcher@27.5.1:
+    resolution: {integrity: sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  jest-worker@27.5.1:
+    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
+    engines: {node: '>= 10.13.0'}
+
+  jest@27.5.1:
+    resolution: {integrity: sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jiti@1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+    hasBin: true
+
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
+  js-sdsl@4.3.0:
+    resolution: {integrity: sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-tokens@9.0.0:
+    resolution: {integrity: sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==}
+
+  js-yaml@3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsbarcode@3.11.6:
+    resolution: {integrity: sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==}
+
+  jsdom@16.7.0:
+    resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonc-eslint-parser@2.4.0:
+    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+
+  jsonparse@1.3.1:
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  knitwork@1.1.0:
+    resolution: {integrity: sha512-oHnmiBUVHz1V+URE77PNot2lv3QiYU2zQf1JjOVkMt3YDKGbu8NAFr+c4mcNOhdsGrB/VpVbRwPwhiXrPhxQbw==}
+
+  known-css-properties@0.34.0:
+    resolution: {integrity: sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==}
+
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
+  leven@2.1.0:
+    resolution: {integrity: sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==}
+    engines: {node: '>=0.10.0'}
+
+  leven@3.1.0:
+    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
+    engines: {node: '>=6'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lie@3.1.1:
+    resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
+
+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
+  lilconfig@3.1.2:
+    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lint-staged@15.2.8:
+    resolution: {integrity: sha512-PUWFf2zQzsd9EFU+kM1d7UP+AZDbKFKuj+9JNVTBkhUFhbg4MAt6WfyMMwBfM4lYqd4D2Jwac5iuTu9rVj4zCQ==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  listr2@8.2.4:
+    resolution: {integrity: sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==}
+    engines: {node: '>=18.0.0'}
+
+  local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+
+  localforage@1.10.0:
+    resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
+  lodash-unified@1.0.3:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+
+  lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
+  lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
+  lodash.foreach@4.5.0:
+    resolution: {integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==}
+
+  lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.kebabcase@4.1.1:
+    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
+
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.mergewith@4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+
+  lodash.snakecase@4.1.1:
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
+
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+
+  lodash.throttle@4.1.1:
+    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
+
+  lodash.toarray@4.4.0:
+    resolution: {integrity: sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==}
+
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
+  lodash.upperfirst@4.3.1:
+    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
+  magic-string@0.30.11:
+    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
+
+  make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
+  makeerror@1.0.12:
+    resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
+
+  mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+
+  mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
+  meow@12.1.1:
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
+
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.7:
+    resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-match@1.0.2:
+    resolution: {integrity: sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  mimic-response@2.1.0:
+    resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==}
+    engines: {node: '>=8'}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
+  mint-filter@4.0.3:
+    resolution: {integrity: sha512-CKh2zKv9oFHEmYCXFk5REG2480FBNYixK+hw0mlRd/TgDJVhPpRhHPNhWa3Q6zF1tpE2q7w7y+Ylu1YJusXDpA==}
+
+  mitt@2.1.0:
+    resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  mlly@1.7.1:
+    resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
+
+  mousetrap@1.6.5:
+    resolution: {integrity: sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==}
+
+  mqtt-packet@6.10.0:
+    resolution: {integrity: sha512-ja8+mFKIHdB1Tpl6vac+sktqy3gA8t9Mduom1BA75cI+R9AHnZOiaBQwpGiWnaVJLDGRdNhQmFaAqd7tkKSMGA==}
+
+  mqtt@4.3.7:
+    resolution: {integrity: sha512-ew3qwG/TJRorTz47eW46vZ5oBw5MEYbQZVaEji44j5lAUSQSqIEoul7Kua/BatBW0H0kKQcC9kwUHa1qzaWHSw==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
+  ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  namespace-emitter@2.0.1:
+    resolution: {integrity: sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==}
+
+  nan@2.20.0:
+    resolution: {integrity: sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==}
+
+  nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+
+  node-fetch-native@1.6.4:
+    resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
+
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
+  node-int64@0.4.0:
+    resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
+
+  node-releases@2.0.18:
+    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
+
+  nopt@5.0.0:
+    resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-url@6.1.0:
+    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
+    engines: {node: '>=10'}
+
+  normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  npmlog@5.0.1:
+    resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
+    deprecated: This package is no longer supported.
+
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  number-allocator@1.0.14:
+    resolution: {integrity: sha512-OrL44UTVAvkKdOdRQZIJpLkAdjXGTRda052sN4sO77bKEzYYqWKMBjQvrJFzqygI99gL6Z4u2xctPW1tB8ErvA==}
+
+  nwsapi@2.2.12:
+    resolution: {integrity: sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==}
+
+  nypm@0.3.9:
+    resolution: {integrity: sha512-BI2SdqqTHg2d4wJh8P9A1W+bslg33vOE9IZDY6eR2QC+Pu1iNBVZUqczrd43rJb+fMzHU7ltAYKsEFY/kHMFcw==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  object-inspect@1.13.2:
+    resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
+    engines: {node: '>= 0.4'}
+
+  ohash@1.1.3:
+    resolution: {integrity: sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.0:
+    resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse5@6.0.1:
+    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-to-regexp@6.2.2:
+    resolution: {integrity: sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  path-type@5.0.0:
+    resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
+    engines: {node: '>=12'}
+
+  path2d@0.2.1:
+    resolution: {integrity: sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==}
+    engines: {node: '>=6'}
+
+  path@0.12.7:
+    resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pdfjs-dist@4.5.136:
+    resolution: {integrity: sha512-V1BALcAN/FmxBEShLxoP73PlQZAZtzlaNfRbRhJrKvXzjLC5VaIlBAQUJuWP8iaYUmIdmdLHmt3E2TBglxOm3w==}
+    engines: {node: '>=18'}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pinia@2.2.1:
+    resolution: {integrity: sha512-ltEU3xwiz5ojVMizdP93AHi84Rtfz0+yKd8ud75hr9LVyWX2alxp7vLbY1kFm7MXFmHHr/9B08Xf8Jj6IHTEiQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
+  pinyin-pro@3.24.2:
+    resolution: {integrity: sha512-5tPyLhxT4CZ9dWqQRqm3X5ADdS18Sb2w0ranNBgr6jCrqO4O8gtfuyqG7Y6+1Mre+0n2VlhKDz+3P5oqSLrkOw==}
+
+  pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+
+  pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+
+  pkg-types@1.1.3:
+    resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==}
+
+  plus-pro-components@0.1.14:
+    resolution: {integrity: sha512-+SPOFiY488sEXW6gzj22BKjwEkTWDo3DLyuokLg061PJHdKSMIlLBjYwsi6WAB/tS2bAl0RfjeJiPWCkbMhZCg==}
+    peerDependencies:
+      element-plus: ^2.3.4
+      vue: ^3.2.0
+
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
+  popmotion@11.0.5:
+    resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}
+
+  postcss-calc@10.0.1:
+    resolution: {integrity: sha512-pp1Z3FxtxA+xHAoWXcOXgnBN1WPu4ZiJ5LWGjKyf9MMreagAsaTUtnqFK1y1sHhyJddAkYTPu6XSuLgb3oYCjw==}
+    engines: {node: ^18.12 || ^20.9 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.38
+
+  postcss-calc@8.2.4:
+    resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
+    peerDependencies:
+      postcss: ^8.2.2
+
+  postcss-colormin@5.3.1:
+    resolution: {integrity: sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-colormin@7.0.2:
+    resolution: {integrity: sha512-YntRXNngcvEvDbEjTdRWGU606eZvB5prmHG4BF0yLmVpamXbpsRJzevyy6MZVyuecgzI2AWAlvFi8DAeCqwpvA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-convert-values@5.1.3:
+    resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-convert-values@7.0.3:
+    resolution: {integrity: sha512-yJhocjCs2SQer0uZ9lXTMOwDowbxvhwFVrZeS6NPEij/XXthl73ggUmfwVvJM+Vaj5gtCKJV1jiUu4IhAUkX/Q==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-comments@5.1.2:
+    resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-discard-comments@7.0.2:
+    resolution: {integrity: sha512-/Hje9Ls1IYcB9duELO/AyDUJI6aQVY3h5Rj1ziXgaLYCTi1iVBLnjg/TS0D6NszR/kDG6I86OwLmAYe+bvJjiQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-duplicates@5.1.0:
+    resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-discard-duplicates@7.0.1:
+    resolution: {integrity: sha512-oZA+v8Jkpu1ct/xbbrntHRsfLGuzoP+cpt0nJe5ED2FQF8n8bJtn7Bo28jSmBYwqgqnqkuSXJfSUEE7if4nClQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-empty@5.1.1:
+    resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-discard-empty@7.0.0:
+    resolution: {integrity: sha512-e+QzoReTZ8IAwhnSdp/++7gBZ/F+nBq9y6PomfwORfP7q9nBpK5AMP64kOt0bA+lShBFbBDcgpJ3X4etHg4lzA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-discard-overridden@5.1.0:
+    resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-discard-overridden@7.0.0:
+    resolution: {integrity: sha512-GmNAzx88u3k2+sBTZrJSDauR0ccpE24omTQCVmaTTZFz1du6AasspjaUPMJ2ud4RslZpoFKyf+6MSPETLojc6w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-html@1.7.0:
+    resolution: {integrity: sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==}
+    engines: {node: ^12 || >=14}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-import@16.1.0:
+    resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+
+  postcss-merge-longhand@5.1.7:
+    resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-merge-longhand@7.0.3:
+    resolution: {integrity: sha512-8waYomFxshdv6M9Em3QRM9MettRLDRcH2JQi2l0Z1KlYD/vhal3gbkeSES0NuACXOlZBB0V/B0AseHZaklzWOA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-merge-rules@5.1.4:
+    resolution: {integrity: sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-merge-rules@7.0.3:
+    resolution: {integrity: sha512-2eSas2p3voPxNfdI5sQrvIkMaeUHpVc3EezgVs18hz/wRTQAC9U99tp9j3W5Jx9/L3qHkEDvizEx/LdnmumIvQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-font-values@5.1.0:
+    resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-minify-font-values@7.0.0:
+    resolution: {integrity: sha512-2ckkZtgT0zG8SMc5aoNwtm5234eUx1GGFJKf2b1bSp8UflqaeFzR50lid4PfqVI9NtGqJ2J4Y7fwvnP/u1cQog==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-gradients@5.1.1:
+    resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-minify-gradients@7.0.0:
+    resolution: {integrity: sha512-pdUIIdj/C93ryCHew0UgBnL2DtUS3hfFa5XtERrs4x+hmpMYGhbzo6l/Ir5de41O0GaKVpK1ZbDNXSY6GkXvtg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-params@5.1.4:
+    resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-minify-params@7.0.2:
+    resolution: {integrity: sha512-nyqVLu4MFl9df32zTsdcLqCFfE/z2+f8GE1KHPxWOAmegSo6lpV2GNy5XQvrzwbLmiU7d+fYay4cwto1oNdAaQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-minify-selectors@5.2.1:
+    resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-minify-selectors@7.0.3:
+    resolution: {integrity: sha512-SxTgUQSgBk6wEqzQZKEv1xQYIp9UBju6no9q+npohzSdhuSICQdkqmD1UMKkZWItS3olJSJMDDEY9WOJ5oGJew==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-normalize-charset@5.1.0:
+    resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-charset@7.0.0:
+    resolution: {integrity: sha512-ABisNUXMeZeDNzCQxPxBCkXexvBrUHV+p7/BXOY+ulxkcjUZO0cp8ekGBwvIh2LbCwnWbyMPNJVtBSdyhM2zYQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-display-values@5.1.0:
+    resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-display-values@7.0.0:
+    resolution: {integrity: sha512-lnFZzNPeDf5uGMPYgGOw7v0BfB45+irSRz9gHQStdkkhiM0gTfvWkWB5BMxpn0OqgOQuZG/mRlZyJxp0EImr2Q==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-positions@5.1.1:
+    resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-positions@7.0.0:
+    resolution: {integrity: sha512-I0yt8wX529UKIGs2y/9Ybs2CelSvItfmvg/DBIjTnoUSrPxSV7Z0yZ8ShSVtKNaV/wAY+m7bgtyVQLhB00A1NQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-repeat-style@5.1.1:
+    resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-repeat-style@7.0.0:
+    resolution: {integrity: sha512-o3uSGYH+2q30ieM3ppu9GTjSXIzOrRdCUn8UOMGNw7Af61bmurHTWI87hRybrP6xDHvOe5WlAj3XzN6vEO8jLw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-string@5.1.0:
+    resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-string@7.0.0:
+    resolution: {integrity: sha512-w/qzL212DFVOpMy3UGyxrND+Kb0fvCiBBujiaONIihq7VvtC7bswjWgKQU/w4VcRyDD8gpfqUiBQ4DUOwEJ6Qg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-timing-functions@5.1.0:
+    resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-timing-functions@7.0.0:
+    resolution: {integrity: sha512-tNgw3YV0LYoRwg43N3lTe3AEWZ66W7Dh7lVEpJbHoKOuHc1sLrzMLMFjP8SNULHaykzsonUEDbKedv8C+7ej6g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-unicode@5.1.1:
+    resolution: {integrity: sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-unicode@7.0.2:
+    resolution: {integrity: sha512-ztisabK5C/+ZWBdYC+Y9JCkp3M9qBv/XFvDtSw0d/XwfT3UaKeW/YTm/MD/QrPNxuecia46vkfEhewjwcYFjkg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-url@5.1.0:
+    resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-url@7.0.0:
+    resolution: {integrity: sha512-+d7+PpE+jyPX1hDQZYG+NaFD+Nd2ris6r8fPTBAjE8z/U41n/bib3vze8x7rKs5H1uEw5ppe9IojewouHk0klQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-normalize-whitespace@5.1.1:
+    resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-normalize-whitespace@7.0.0:
+    resolution: {integrity: sha512-37/toN4wwZErqohedXYqWgvcHUGlT8O/m2jVkAfAe9Bd4MzRqlBmXrJRePH0e9Wgnz2X7KymTgTOaaFizQe3AQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-ordered-values@5.1.3:
+    resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-ordered-values@7.0.1:
+    resolution: {integrity: sha512-irWScWRL6nRzYmBOXReIKch75RRhNS86UPUAxXdmW/l0FcAsg0lvAXQCby/1lymxn/o0gVa6Rv/0f03eJOwHxw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-reduce-initial@5.1.2:
+    resolution: {integrity: sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-reduce-initial@7.0.2:
+    resolution: {integrity: sha512-pOnu9zqQww7dEKf62Nuju6JgsW2V0KRNBHxeKohU+JkHd/GAH5uvoObqFLqkeB2n20mr6yrlWDvo5UBU5GnkfA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-reduce-transforms@5.1.0:
+    resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-reduce-transforms@7.0.0:
+    resolution: {integrity: sha512-pnt1HKKZ07/idH8cpATX/ujMbtOGhUfE+m8gbqwJE05aTaNw8gbo34a2e3if0xc0dlu75sUOiqvwCGY3fzOHew==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-resolve-nested-selector@0.1.5:
+    resolution: {integrity: sha512-tum2m18S22ZSNjXatMG0FSk5ZL83pTttymeJx5Gzxg7RU0s1jNDU9rXltro4osQrukjyNormcb07IEjqEyPNaA==}
+
+  postcss-safe-parser@6.0.0:
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+
+  postcss-safe-parser@7.0.0:
+    resolution: {integrity: sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+
+  postcss-selector-parser@6.1.1:
+    resolution: {integrity: sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==}
+    engines: {node: '>=4'}
+
+  postcss-sorting@8.0.2:
+    resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
+    peerDependencies:
+      postcss: ^8.4.20
+
+  postcss-svgo@5.1.0:
+    resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-svgo@7.0.1:
+    resolution: {integrity: sha512-0WBUlSL4lhD9rA5k1e5D8EN5wCEyZD6HJk0jIvRxl+FDVOMlJ7DePHYWGGVc5QRqrJ3/06FTXM0bxjmJpmTPSA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >= 18}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-unique-selectors@5.1.1:
+    resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  postcss-unique-selectors@7.0.2:
+    resolution: {integrity: sha512-CjSam+7Vf8cflJQsHrMS0P2hmy9u0+n/P001kb5eAszLmhjMqrt/i5AqQuNFihhViwDvEAezqTmXqaYXL2ugMw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.41:
+    resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  preact@10.23.1:
+    resolution: {integrity: sha512-O5UdRsNh4vdZaTieWe3XOgSpdMAmkIYBCT3VhQDlKrzyCm8lUYsk0fmVEvoQQifoOjFRTaHZO69ylrzTW2BH+A==}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  psl@1.9.0:
+    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+
+  pump@3.0.0:
+    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  qs@6.13.0:
+    resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
+    engines: {node: '>=0.6'}
+
+  querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
+  reinterval@1.1.0:
+    resolution: {integrity: sha512-QIRet3SYrGp0HUHO88jVskiG6seqUGC5iAG7AwI/BV4ypGcuqk9Du6YQBUOUqm9c8pw1eyLoIaONifRua1lsEQ==}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+  resolve-cwd@3.0.0:
+    resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
+    engines: {node: '>=8'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve.exports@1.1.1:
+    resolution: {integrity: sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==}
+    engines: {node: '>=10'}
+
+  resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+
+  responsive-storage@2.2.0:
+    resolution: {integrity: sha512-94W5Chr2F5kDBT6J+OCOeJguEkSTDc3jPOUQXYmzNG64DCNl5p7hoBDF7bx7u6EXAEcpUKF64OZR4b7Nn8h/Gg==}
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rimraf@5.0.10:
+    resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
+    hasBin: true
+
+  rollup-plugin-external-globals@0.10.0:
+    resolution: {integrity: sha512-RXlupZrmn97AaaS5dWnktkjM+Iy+od0E+8L0mUkMIs3iuoUXNJebueQocQKV7Ircd54fSGGmkBaXwNzY05J1yQ==}
+    peerDependencies:
+      rollup: ^2.25.0 || ^3.3.0 || ^4.1.4
+
+  rollup-plugin-visualizer@5.12.0:
+    resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  rollup@4.20.0:
+    resolution: {integrity: sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sass@1.77.8:
+    resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  saxes@5.0.1:
+    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
+    engines: {node: '>=10'}
+
+  scroll-into-view-if-needed@2.2.31:
+    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
+
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel@1.0.6:
+    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-concat@1.0.1:
+    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
+
+  simple-get@3.1.1:
+    resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  slate-history@0.66.0:
+    resolution: {integrity: sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==}
+    peerDependencies:
+      slate: '>=0.65.3'
+
+  slate@0.72.8:
+    resolution: {integrity: sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw==}
+
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  slice-ansi@7.1.0:
+    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+    engines: {node: '>=18'}
+
+  snabbdom@3.6.2:
+    resolution: {integrity: sha512-ig5qOnCDbugFntKi6c7Xlib8bA6xiJVk8O+WdFrV3wxbMqeHO0hXFQC4nAhPVWfZfi8255lcZkNhtIBINCc4+Q==}
+    engines: {node: '>=12.17.0'}
+
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
+  sortablejs@1.15.2:
+    resolution: {integrity: sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==}
+
+  source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+
+  sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
+  split2@3.2.2:
+    resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  ssf@0.11.2:
+    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
+    engines: {node: '>=0.8'}
+
+  ssr-window@3.0.0:
+    resolution: {integrity: sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==}
+
+  stable@0.1.8:
+    resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
+    deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
+
+  stack-utils@2.0.6:
+    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+    engines: {node: '>=10'}
+
+  std-env@3.7.0:
+    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+
+  stream-shift@1.0.3:
+    resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==}
+
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
+  string-hash@1.1.3:
+    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
+
+  string-length@4.0.2:
+    resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
+    engines: {node: '>=10'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  strip-bom@4.0.0:
+    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
+    engines: {node: '>=8'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  strip-literal@2.1.0:
+    resolution: {integrity: sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==}
+
+  style-value-types@5.1.2:
+    resolution: {integrity: sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==}
+
+  stylehacks@5.1.1:
+    resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  stylehacks@7.0.3:
+    resolution: {integrity: sha512-4DqtecvI/Nd+2BCvW9YEF6lhBN5UM50IJ1R3rnEAhBwbCKf4VehRf+uqvnVArnBayjYD/WtT3g0G/HSRxWfTRg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  stylelint-config-html@1.1.0:
+    resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
+    engines: {node: ^12 || >=14}
+    peerDependencies:
+      postcss-html: ^1.0.0
+      stylelint: '>=14.0.0'
+
+  stylelint-config-recess-order@5.0.1:
+    resolution: {integrity: sha512-rKbGkoa3h0rINrGln9TFVowvSCLgPJC5O0EuPiqlqWcJMb1lImEtXktcjFCVz+hwtSUiHD3ijJc3vP9muFOgJg==}
+    peerDependencies:
+      stylelint: '>=16'
+
+  stylelint-config-recommended-scss@14.1.0:
+    resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.6.1
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-recommended-vue@1.5.0:
+    resolution: {integrity: sha512-65TAK/clUqkNtkZLcuytoxU0URQYlml+30Nhop7sRkCZ/mtWdXt7T+spPSB3KMKlb+82aEVJ4OrcstyDBdbosg==}
+    engines: {node: ^12 || >=14}
+    peerDependencies:
+      postcss-html: ^1.0.0
+      stylelint: '>=14.0.0'
+
+  stylelint-config-recommended@14.0.1:
+    resolution: {integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.1.0
+
+  stylelint-config-standard-scss@13.1.0:
+    resolution: {integrity: sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.3.1
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-standard@36.0.1:
+    resolution: {integrity: sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.1.0
+
+  stylelint-order@6.0.4:
+    resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
+    peerDependencies:
+      stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
+
+  stylelint-prettier@5.0.2:
+    resolution: {integrity: sha512-qJ+BN+1T2ZcKz9WIrv0x+eFGHzSUnXfXd5gL///T6XoJvr3D8/ztzz2fhtmXef7Vb8P33zBXmLTTveByr0nwBw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      prettier: '>=3.0.0'
+      stylelint: '>=16.0.0'
+
+  stylelint-scss@6.5.0:
+    resolution: {integrity: sha512-yOnYlr71wrTPT3rYyUurgTj6Rw7JUtzsZQsiPEjvs+k/yqoYHdweqpw6XN/ARpxjAuvJpddoMUvV8aAIpvUwTg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.0.2
+
+  stylelint@16.8.1:
+    resolution: {integrity: sha512-O8aDyfdODSDNz/B3gW2HQ+8kv8pfhSu7ZR7xskQ93+vI6FhKKGUJMQ03Ydu+w3OvXXE0/u4hWU4hCPNOyld+OA==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-hyperlinks@2.3.0:
+    resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
+    engines: {node: '>=8'}
+
+  supports-hyperlinks@3.0.0:
+    resolution: {integrity: sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==}
+    engines: {node: '>=14.18'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
+  svgo@2.8.0:
+    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  svgo@3.3.2:
+    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  swiper@11.1.9:
+    resolution: {integrity: sha512-rflu8zvfGa3x1v/aeSufk4zRJffhOQowyvtJlp46sUBnOqAuk1Rdv5Ldj0AWWBV595iZ+ZMk7VB35ZRtRUomtA==}
+    engines: {node: '>= 4.7.0'}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  synckit@0.9.1:
+    resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
+  table@6.8.2:
+    resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==}
+    engines: {node: '>=10.0.0'}
+
+  tailwindcss@3.4.9:
+    resolution: {integrity: sha512-1SEOvRr6sSdV5IDf9iC+NU4dhwdqzF4zKKq3sAbasUWHEM6lsMhX+eNN5gkPx1BvLFEnZQEUFbXnGj8Qlp83Pg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+
+  terminal-link@2.1.1:
+    resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
+    engines: {node: '>=8'}
+
+  test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+
+  text-extensions@2.4.0:
+    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
+    engines: {node: '>=8'}
+
+  text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  throat@6.0.2:
+    resolution: {integrity: sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tiny-warning@1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
+  tinygradient@1.1.5:
+    resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
+
+  tippy.js@6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+
+  tmpl@1.0.5:
+    resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
+
+  to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  tough-cookie@4.1.4:
+    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
+    engines: {node: '>=6'}
+
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
+  tr46@2.1.0:
+    resolution: {integrity: sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==}
+    engines: {node: '>=8'}
+
+  ts-api-utils@1.3.0:
+    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
+  tslib@2.4.0:
+    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+
+  tslib@2.6.3:
+    resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-detect@4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
+  type@2.7.3:
+    resolution: {integrity: sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==}
+
+  typedarray-to-buffer@3.1.5:
+    resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
+
+  typedarray@0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+
+  typeit@8.8.4:
+    resolution: {integrity: sha512-bD4/PNthsYj5ObPKqkARnYA7NStbYzZDe8g5odXACmFw2HKEDWSUPv275lblz6E8REr+Ji6oll/AHKmD2ONMYA==}
+
+  typescript@5.5.4:
+    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  unctx@2.3.1:
+    resolution: {integrity: sha512-PhKke8ZYauiqh3FEMVNm7ljvzQiph0Mt3GBRve03IJm7ukfaON2OBK795tLwhbyfzknuRRkW0+Ze+CQUmzOZ+A==}
+
+  undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  unimport@3.10.0:
+    resolution: {integrity: sha512-/UvKRfWx3mNDWwWQhR62HsoM3wxHwYdTq8ellZzMOHnnw4Dp8tovgthyW7DjTrbjDL+i4idOp06voz2VKlvrLw==}
+
+  universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unplugin@1.12.1:
+    resolution: {integrity: sha512-aXEH9c5qi3uYZHo0niUtxDlT9ylG/luMW/dZslSCkbtC31wCyFkmM0kyoBBh+Grhn7CL+/kvKLfN61/EdxPxMQ==}
+    engines: {node: '>=14.0.0'}
+
+  untyped@1.4.2:
+    resolution: {integrity: sha512-nC5q0DnPEPVURPhfPQLahhSTnemVtPzdx7ofiRxXpOB2SYnb3MfdU3DVGyJdS8Lx+tBWeAePO8BfU/3EgksM7Q==}
+    hasBin: true
+
+  update-browserslist-db@1.1.0:
+    resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  util@0.10.4:
+    resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==}
+
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
+  v-contextmenu@3.2.0:
+    resolution: {integrity: sha512-6UemjAZkm6IXDH1XwIJrZj/uqSKnwnGDR+hfJnUvh66LRL5hk5bxgkgwto1lP3xFyjC8hzpQxnbzC6d1x1vXNg==}
+    engines: {node: '>=10.16.0'}
+    peerDependencies:
+      vue: ^3.0.0
+
+  v3-infinite-loading@1.3.1:
+    resolution: {integrity: sha512-Yi/STWDo+jasQSd8sBCta2u5/C75eLWdTyqkUPOcCEWYFzzw0DddYrDfvjB2IEbcvFxNiA4ljBpNLcRLVe2adA==}
+
+  v8-to-istanbul@8.1.1:
+    resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==}
+    engines: {node: '>=10.12.0'}
+
+  version-rocket@1.7.2:
+    resolution: {integrity: sha512-6R/cy6SpIF1HL4YfCQ7vaA9WMrobN6HUIyh94noWmXe6PIjDeEShuTYZ+kRGY9CEQXJGha2xS5vBFNK7OZk6cA==}
+    hasBin: true
+
+  vite-plugin-cdn-import@1.0.1:
+    resolution: {integrity: sha512-lgjLxgwFSKvJLbqjVBirUZ0rQo00GpUGJzRpgQu8RyBw9LA7jaqG6fUMQzBC9qWmTGabPC3iOzwCcoi7PseRAQ==}
+
+  vite-plugin-checker@0.7.2:
+    resolution: {integrity: sha512-xeYeJbG0gaCaT0QcUC4B2Zo4y5NR8ZhYenc5gPbttrZvraRFwkEADCYwq+BfEHl9zYz7yf85TxsiGoYwyyIjhw==}
+    engines: {node: '>=14.16'}
+    peerDependencies:
+      '@biomejs/biome': '>=1.7'
+      eslint: '>=7'
+      meow: ^9.0.0
+      optionator: ^0.9.1
+      stylelint: '>=13'
+      typescript: '*'
+      vite: '>=2.0.0'
+      vls: '*'
+      vti: '*'
+      vue-tsc: '>=2.0.0'
+    peerDependenciesMeta:
+      '@biomejs/biome':
+        optional: true
+      eslint:
+        optional: true
+      meow:
+        optional: true
+      optionator:
+        optional: true
+      stylelint:
+        optional: true
+      typescript:
+        optional: true
+      vls:
+        optional: true
+      vti:
+        optional: true
+      vue-tsc:
+        optional: true
+
+  vite-plugin-compression@0.5.1:
+    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
+  vite-plugin-externals@0.6.2:
+    resolution: {integrity: sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: '>=2.0.0'
+
+  vite-plugin-fake-server@2.1.1:
+    resolution: {integrity: sha512-QUgssvE7jI9XU1WuDZ3gkzzi9GzVeapELIlFNMvmE2swDKL7O2y2nV0kRZ9VYOsD+hV312uSJyzHBJvcmBw7UQ==}
+
+  vite-plugin-remove-console@2.2.0:
+    resolution: {integrity: sha512-qgjh5pz75MdE9Kzs8J0kBwaCfifHV0ezRbB9rpGsIOxam+ilcGV7WOk91vFJXquzRmiKrFh3Hxlh0JJWAmXTbQ==}
+
+  vite-plugin-router-warn@1.0.0:
+    resolution: {integrity: sha512-jnr7faHJPkKxukBXVpg7Ui1UDqhmxD7xU6JGidq8ivSHTsNAPqzSpPpwW8O1PBP/0+Owq4bLfNNk11drOkz4xA==}
+
+  vite-plugin-vue-inspector@5.1.3:
+    resolution: {integrity: sha512-pMrseXIDP1Gb38mOevY+BvtNGNqiqmqa2pKB99lnLsADQww9w9xMbAfT4GB6RUoaOkSPrtlXqpq2Fq+Dj2AgFg==}
+    peerDependencies:
+      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
+
+  vite-svg-loader@5.1.0:
+    resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
+    peerDependencies:
+      vue: '>=3.2.13'
+
+  vite@5.4.0:
+    resolution: {integrity: sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
+  vscode-jsonrpc@6.0.0:
+    resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==}
+    engines: {node: '>=8.0.0 || >=10.0.0'}
+
+  vscode-languageclient@7.0.0:
+    resolution: {integrity: sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==}
+    engines: {vscode: ^1.52.0}
+
+  vscode-languageserver-protocol@3.16.0:
+    resolution: {integrity: sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==}
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
+  vscode-languageserver-types@3.16.0:
+    resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==}
+
+  vscode-languageserver@7.0.0:
+    resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==}
+    hasBin: true
+
+  vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue-eslint-parser@9.4.3:
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  vue-i18n@9.13.1:
+    resolution: {integrity: sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-json-pretty@2.4.0:
+    resolution: {integrity: sha512-e9bP41DYYIc2tWaB6KuwqFJq5odZ8/GkE6vHQuGcbPn37kGk4a3n1RNw3ZYeDrl66NWXgTlOfS+M6NKkowmkWw==}
+    engines: {node: '>= 10.0.0', npm: '>= 5.0.0'}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  vue-observe-visibility@2.0.0-alpha.1:
+    resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-pdf-embed@2.1.0:
+    resolution: {integrity: sha512-yEtitm2q1jY2pmgnbwDILhm8cEby01WhfZJCMKvhKwdorwc92FDefIDZ5yf0ixu4t+WHMfc1+Zz4OGsoW/PRag==}
+    peerDependencies:
+      vue: ^3.3.0
+
+  vue-resize@2.0.0-alpha.1:
+    resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-router@4.4.3:
+    resolution: {integrity: sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  vue-tippy@6.4.4:
+    resolution: {integrity: sha512-0C5TSU482FvjhEeKrPkz08tzyC/KJC0CiEbm3yW9oS+n3fa03ajEzU2QcxI9oR6Hwlg8NOP0U6T4EsGuccq6YQ==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  vue-tsc@2.0.29:
+    resolution: {integrity: sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue-types@5.1.3:
+    resolution: {integrity: sha512-3Wy6QcZl0VusCCHX3vYrWSILFlrOB2EQDoySnuYmASM5cUp1FivJGfkS5lp1CutDgyRb41g32r/1QCmiBj5i1Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      vue: ^2.0.0 || ^3.0.0
+    peerDependenciesMeta:
+      vue:
+        optional: true
+
+  vue-virtual-scroller@2.0.0-beta.8:
+    resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  vue-waterfall-plugin-next@2.4.3:
+    resolution: {integrity: sha512-L2mH8wOn+ZuddPhaYHKljfukNM0iQd3vhjesvBK4ck+D5swS8c34VdlOED2w53QZvUrXQpEg9ASDHzLlLkzztg==}
+
+  vue3-danmaku@1.6.1:
+    resolution: {integrity: sha512-v7KqMV5WK3mqRSotSuJfnJldsIpilh72nLKKebWGCO7HM4k330QV1f4oje410GfwSx+SrJ+YLeTG8QLJYuKwYg==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue3-puzzle-vcode@1.1.7:
+    resolution: {integrity: sha512-mW780dz7HKjrElnE60CeYSeHGidKBKHoMjTDYfqF21330rTkFOsfDK1FQKZ22MktgMtTEoS/imfpEDlM1cxY/g==}
+
+  vue@3.4.37:
+    resolution: {integrity: sha512-3vXvNfkKTBsSJ7JP+LyR7GBuwQuckbWvuwAid3xbqK9ppsKt/DUvfqgZ48fgOLEfpy1IacL5f8QhUVl77RaI7A==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
+  vxe-table@4.6.17:
+    resolution: {integrity: sha512-K9A0qJuV33Xh2NK6L1tXXEXueGyOoRVz7eFvFFpTbLVtm3oCoYl6+BOqD6YTw70R8NKdZZNH+ylmEJug+Qjrrg==}
+    peerDependencies:
+      vue: ^3.2.28
+
+  w3c-hr-time@1.0.2:
+    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
+    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
+
+  w3c-xmlserializer@2.0.0:
+    resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}
+    engines: {node: '>=10'}
+
+  walker@1.0.8:
+    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
+
+  wavesurfer.js@7.8.3:
+    resolution: {integrity: sha512-aYOmoBqEwjlqiqcKBYCzmWQxssOnEUd2VlVxfQkWfQD1pH3VJ5Prqn4kfIGxYyokgYiEj/G5Qwrh48ot/pRCuA==}
+
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  webidl-conversions@5.0.0:
+    resolution: {integrity: sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==}
+    engines: {node: '>=8'}
+
+  webidl-conversions@6.1.0:
+    resolution: {integrity: sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==}
+    engines: {node: '>=10.4'}
+
+  webpack-sources@3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  whatwg-encoding@1.0.5:
+    resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==}
+
+  whatwg-mimetype@2.3.0:
+    resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
+  whatwg-url@8.7.0:
+    resolution: {integrity: sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==}
+    engines: {node: '>=10'}
+
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
+  which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  wide-align@1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+
+  widest-line@4.0.1:
+    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
+    engines: {node: '>=12'}
+
+  wildcard@1.1.2:
+    resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
+
+  wmf@1.0.2:
+    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
+    engines: {node: '>=0.8'}
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  word@0.3.0:
+    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
+    engines: {node: '>=0.8'}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  write-file-atomic@3.0.3:
+    resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xe-utils@3.5.30:
+    resolution: {integrity: sha512-5Ez6JUANpMakduiTLxrNObzqMebnM4697KvHW5okedkUjXvYgGvkbg0tABTkvwDW/Pb09v7vT68dzBOeAuOu0g==}
+
+  xgplayer-subtitles@3.0.19:
+    resolution: {integrity: sha512-e2k1oFq1HSbnnHaK694FREqkFyq65ze4vETTIy8ABkOXItcr9/ugyNIJ4zCjD+jExSAVppM9FAF761X4+wRCeA==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+
+  xgplayer@3.0.19:
+    resolution: {integrity: sha512-yw4yinU5EtxS5YxOpctCVnHS/WW3tLTYjT+ZHivUYihlaAdudrmBmoOCcRYykGg7xz6PVIi6B79Gn1RBnGAnpg==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+
+  xlsx@0.18.5:
+    resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
+  xml-name-validator@3.0.0:
+    resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
+
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yaml-eslint-parser@1.2.3:
+    resolution: {integrity: sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
+  yaml@2.5.0:
+    resolution: {integrity: sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
+  yargs@16.2.0:
+    resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
+    engines: {node: '>=10'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.1.1:
+    resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
+    engines: {node: '>=12.20'}
+
+  zrender@5.6.0:
+    resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@amap/amap-jsapi-loader@1.0.1': {}
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@babel/code-frame@7.24.7':
+    dependencies:
+      '@babel/highlight': 7.24.7
+      picocolors: 1.0.1
+
+  '@babel/compat-data@7.25.2': {}
+
+  '@babel/core@7.25.2':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.24.7
+      '@babel/generator': 7.25.0
+      '@babel/helper-compilation-targets': 7.25.2
+      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
+      '@babel/helpers': 7.25.0
+      '@babel/parser': 7.25.3
+      '@babel/template': 7.25.0
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+      convert-source-map: 2.0.0
+      debug: 4.3.6
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.25.0':
+    dependencies:
+      '@babel/types': 7.25.2
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 2.5.2
+
+  '@babel/helper-annotate-as-pure@7.24.7':
+    dependencies:
+      '@babel/types': 7.25.2
+
+  '@babel/helper-compilation-targets@7.25.2':
+    dependencies:
+      '@babel/compat-data': 7.25.2
+      '@babel/helper-validator-option': 7.24.8
+      browserslist: 4.23.3
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.25.0(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-member-expression-to-functions': 7.24.8
+      '@babel/helper-optimise-call-expression': 7.24.7
+      '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/traverse': 7.25.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-member-expression-to-functions@7.24.8':
+    dependencies:
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.22.15':
+    dependencies:
+      '@babel/types': 7.25.2
+
+  '@babel/helper-module-imports@7.24.7':
+    dependencies:
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-simple-access': 7.24.7
+      '@babel/helper-validator-identifier': 7.24.7
+      '@babel/traverse': 7.25.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.24.7':
+    dependencies:
+      '@babel/types': 7.25.2
+
+  '@babel/helper-plugin-utils@7.24.8': {}
+
+  '@babel/helper-replace-supers@7.25.0(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-member-expression-to-functions': 7.24.8
+      '@babel/helper-optimise-call-expression': 7.24.7
+      '@babel/traverse': 7.25.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-simple-access@7.24.7':
+    dependencies:
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.24.7':
+    dependencies:
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.24.8': {}
+
+  '@babel/helper-validator-identifier@7.24.7': {}
+
+  '@babel/helper-validator-option@7.24.8': {}
+
+  '@babel/helpers@7.25.0':
+    dependencies:
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
+
+  '@babel/highlight@7.24.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.24.7
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.0.1
+
+  '@babel/parser@7.25.3':
+    dependencies:
+      '@babel/types': 7.25.2
+
+  '@babel/plugin-proposal-decorators@7.24.7(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-create-class-features-plugin': 7.25.0(@babel/core@7.25.2)
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-decorators': 7.24.7(@babel/core@7.25.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-decorators@7.24.7(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-import-attributes@7.24.7(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-jsx@7.24.7(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-plugin-utils': 7.24.8
+
+  '@babel/plugin-transform-typescript@7.25.2(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/helper-annotate-as-pure': 7.24.7
+      '@babel/helper-create-class-features-plugin': 7.25.0(@babel/core@7.25.2)
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
+      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.25.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
+  '@babel/standalone@7.25.3':
+    optional: true
+
+  '@babel/template@7.25.0':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+
+  '@babel/traverse@7.25.3':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/generator': 7.25.0
+      '@babel/parser': 7.25.3
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
+      debug: 4.3.6
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.25.2':
+    dependencies:
+      '@babel/helper-string-parser': 7.24.8
+      '@babel/helper-validator-identifier': 7.24.7
+      to-fast-properties: 2.0.0
+
+  '@bcoe/v8-coverage@0.2.3': {}
+
+  '@commitlint/cli@19.4.0(@types/node@20.14.15)(typescript@5.5.4)':
+    dependencies:
+      '@commitlint/format': 19.3.0
+      '@commitlint/lint': 19.2.2
+      '@commitlint/load': 19.4.0(@types/node@20.14.15)(typescript@5.5.4)
+      '@commitlint/read': 19.4.0
+      '@commitlint/types': 19.0.3
+      execa: 8.0.1
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/config-conventional@19.2.2':
+    dependencies:
+      '@commitlint/types': 19.0.3
+      conventional-changelog-conventionalcommits: 7.0.2
+
+  '@commitlint/config-validator@19.0.3':
+    dependencies:
+      '@commitlint/types': 19.0.3
+      ajv: 8.17.1
+
+  '@commitlint/ensure@19.0.3':
+    dependencies:
+      '@commitlint/types': 19.0.3
+      lodash.camelcase: 4.3.0
+      lodash.kebabcase: 4.1.1
+      lodash.snakecase: 4.1.1
+      lodash.startcase: 4.4.0
+      lodash.upperfirst: 4.3.1
+
+  '@commitlint/execute-rule@19.0.0': {}
+
+  '@commitlint/format@19.3.0':
+    dependencies:
+      '@commitlint/types': 19.0.3
+      chalk: 5.3.0
+
+  '@commitlint/is-ignored@19.2.2':
+    dependencies:
+      '@commitlint/types': 19.0.3
+      semver: 7.6.3
+
+  '@commitlint/lint@19.2.2':
+    dependencies:
+      '@commitlint/is-ignored': 19.2.2
+      '@commitlint/parse': 19.0.3
+      '@commitlint/rules': 19.0.3
+      '@commitlint/types': 19.0.3
+
+  '@commitlint/load@19.4.0(@types/node@20.14.15)(typescript@5.5.4)':
+    dependencies:
+      '@commitlint/config-validator': 19.0.3
+      '@commitlint/execute-rule': 19.0.0
+      '@commitlint/resolve-extends': 19.1.0
+      '@commitlint/types': 19.0.3
+      chalk: 5.3.0
+      cosmiconfig: 9.0.0(typescript@5.5.4)
+      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.14.15)(cosmiconfig@9.0.0(typescript@5.5.4))(typescript@5.5.4)
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/message@19.0.0': {}
+
+  '@commitlint/parse@19.0.3':
+    dependencies:
+      '@commitlint/types': 19.0.3
+      conventional-changelog-angular: 7.0.0
+      conventional-commits-parser: 5.0.0
+
+  '@commitlint/read@19.4.0':
+    dependencies:
+      '@commitlint/top-level': 19.0.0
+      '@commitlint/types': 19.0.3
+      execa: 8.0.1
+      git-raw-commits: 4.0.0
+      minimist: 1.2.8
+
+  '@commitlint/resolve-extends@19.1.0':
+    dependencies:
+      '@commitlint/config-validator': 19.0.3
+      '@commitlint/types': 19.0.3
+      global-directory: 4.0.1
+      import-meta-resolve: 4.1.0
+      lodash.mergewith: 4.6.2
+      resolve-from: 5.0.0
+
+  '@commitlint/rules@19.0.3':
+    dependencies:
+      '@commitlint/ensure': 19.0.3
+      '@commitlint/message': 19.0.0
+      '@commitlint/to-lines': 19.0.0
+      '@commitlint/types': 19.0.3
+      execa: 8.0.1
+
+  '@commitlint/to-lines@19.0.0': {}
+
+  '@commitlint/top-level@19.0.0':
+    dependencies:
+      find-up: 7.0.0
+
+  '@commitlint/types@19.0.3':
+    dependencies:
+      '@types/conventional-commits-parser': 5.0.0
+      chalk: 5.3.0
+
+  '@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1)':
+    dependencies:
+      '@csstools/css-tokenizer': 2.4.1
+
+  '@csstools/css-tokenizer@2.4.1': {}
+
+  '@csstools/media-query-list-parser@2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1)
+      '@csstools/css-tokenizer': 2.4.1
+
+  '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.1)':
+    dependencies:
+      postcss-selector-parser: 6.1.1
+
+  '@ctrl/tinycolor@3.6.1': {}
+
+  '@dual-bundle/import-meta-resolve@4.1.0': {}
+
+  '@element-plus/icons-vue@1.1.4(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@element-plus/icons-vue@2.3.1(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@esbuild/aix-ppc64@0.19.12':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/android-arm@0.19.12':
+    optional: true
+
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
+  '@esbuild/android-x64@0.19.12':
+    optional: true
+
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/darwin-x64@0.19.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.19.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-arm@0.19.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ia32@0.19.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/linux-loong64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.19.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
+  '@esbuild/linux-s390x@0.19.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
+  '@esbuild/linux-x64@0.19.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.19.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.19.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.19.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.19.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.19.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.19.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.9.0(jiti@1.21.6))':
+    dependencies:
+      eslint: 9.9.0(jiti@1.21.6)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.11.0': {}
+
+  '@eslint/config-array@0.17.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.4
+      debug: 4.3.6
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/eslintrc@3.1.0':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.6
+      espree: 10.1.0
+      globals: 14.0.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.9.0': {}
+
+  '@eslint/object-schema@2.1.4': {}
+
+  '@faker-js/faker@8.4.1': {}
+
+  '@floating-ui/core@1.6.7':
+    dependencies:
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/dom@1.6.10':
+    dependencies:
+      '@floating-ui/core': 1.6.7
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/utils@0.2.7': {}
+
+  '@howdyjs/mouse-menu@2.1.3(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.3.0': {}
+
+  '@iconify-icons/ep@1.2.12':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-icons/ri@1.2.10':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/vue@4.1.2(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@infectoone/vue-ganttastic@2.3.2(dayjs@1.11.12)(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@vueuse/core': 9.13.0(vue@3.4.37(typescript@5.5.4))
+      dayjs: 1.11.12
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  '@intlify/bundle-utils@8.0.0(vue-i18n@9.13.1(vue@3.4.37(typescript@5.5.4)))':
+    dependencies:
+      '@intlify/message-compiler': 9.13.1
+      '@intlify/shared': 9.13.1
+      acorn: 8.12.1
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.0
+      mlly: 1.7.1
+      source-map-js: 1.2.0
+      yaml-eslint-parser: 1.2.3
+    optionalDependencies:
+      vue-i18n: 9.13.1(vue@3.4.37(typescript@5.5.4))
+
+  '@intlify/core-base@9.13.1':
+    dependencies:
+      '@intlify/message-compiler': 9.13.1
+      '@intlify/shared': 9.13.1
+
+  '@intlify/message-compiler@9.13.1':
+    dependencies:
+      '@intlify/shared': 9.13.1
+      source-map-js: 1.2.0
+
+  '@intlify/shared@9.13.1': {}
+
+  '@intlify/unplugin-vue-i18n@4.0.0(rollup@4.20.0)(vue-i18n@9.13.1(vue@3.4.37(typescript@5.5.4)))':
+    dependencies:
+      '@intlify/bundle-utils': 8.0.0(vue-i18n@9.13.1(vue@3.4.37(typescript@5.5.4)))
+      '@intlify/shared': 9.13.1
+      '@rollup/pluginutils': 5.1.0(rollup@4.20.0)
+      '@vue/compiler-sfc': 3.4.37
+      debug: 4.3.6
+      fast-glob: 3.3.2
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.2
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+      unplugin: 1.12.1
+    optionalDependencies:
+      vue-i18n: 9.13.1(vue@3.4.37(typescript@5.5.4))
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    dependencies:
+      camelcase: 5.3.1
+      find-up: 4.1.0
+      get-package-type: 0.1.0
+      js-yaml: 3.14.1
+      resolve-from: 5.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
+  '@jest/console@27.5.1':
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      chalk: 4.1.2
+      jest-message-util: 27.5.1
+      jest-util: 27.5.1
+      slash: 3.0.0
+
+  '@jest/core@27.5.1(canvas@2.11.2)':
+    dependencies:
+      '@jest/console': 27.5.1
+      '@jest/reporters': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      emittery: 0.8.1
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 27.5.1
+      jest-config: 27.5.1(canvas@2.11.2)
+      jest-haste-map: 27.5.1
+      jest-message-util: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-resolve-dependencies: 27.5.1
+      jest-runner: 27.5.1(canvas@2.11.2)
+      jest-runtime: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      jest-watcher: 27.5.1
+      micromatch: 4.0.7
+      rimraf: 3.0.2
+      slash: 3.0.0
+      strip-ansi: 6.0.1
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - ts-node
+      - utf-8-validate
+
+  '@jest/environment@27.5.1':
+    dependencies:
+      '@jest/fake-timers': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      jest-mock: 27.5.1
+
+  '@jest/fake-timers@27.5.1':
+    dependencies:
+      '@jest/types': 27.5.1
+      '@sinonjs/fake-timers': 8.1.0
+      '@types/node': 20.14.15
+      jest-message-util: 27.5.1
+      jest-mock: 27.5.1
+      jest-util: 27.5.1
+
+  '@jest/globals@27.5.1':
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/types': 27.5.1
+      expect: 27.5.1
+
+  '@jest/reporters@27.5.1':
+    dependencies:
+      '@bcoe/v8-coverage': 0.2.3
+      '@jest/console': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      chalk: 4.1.2
+      collect-v8-coverage: 1.0.2
+      exit: 0.1.2
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-instrument: 5.2.1
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 4.0.1
+      istanbul-reports: 3.1.7
+      jest-haste-map: 27.5.1
+      jest-resolve: 27.5.1
+      jest-util: 27.5.1
+      jest-worker: 27.5.1
+      slash: 3.0.0
+      source-map: 0.6.1
+      string-length: 4.0.2
+      terminal-link: 2.1.1
+      v8-to-istanbul: 8.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/source-map@27.5.1':
+    dependencies:
+      callsites: 3.1.0
+      graceful-fs: 4.2.11
+      source-map: 0.6.1
+
+  '@jest/test-result@27.5.1':
+    dependencies:
+      '@jest/console': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/istanbul-lib-coverage': 2.0.6
+      collect-v8-coverage: 1.0.2
+
+  '@jest/test-sequencer@27.5.1':
+    dependencies:
+      '@jest/test-result': 27.5.1
+      graceful-fs: 4.2.11
+      jest-haste-map: 27.5.1
+      jest-runtime: 27.5.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/transform@27.5.1':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@jest/types': 27.5.1
+      babel-plugin-istanbul: 6.1.1
+      chalk: 4.1.2
+      convert-source-map: 1.9.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-util: 27.5.1
+      micromatch: 4.0.7
+      pirates: 4.0.6
+      slash: 3.0.0
+      source-map: 0.6.1
+      write-file-atomic: 3.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/types@27.5.1':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 20.14.15
+      '@types/yargs': 16.0.9
+      chalk: 4.1.2
+
+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@logicflow/core@1.2.28':
+    dependencies:
+      '@types/mousetrap': 1.6.15
+      mousetrap: 1.6.5
+      preact: 10.23.1
+
+  '@logicflow/extension@1.2.28(canvas@2.11.2)':
+    dependencies:
+      '@logicflow/core': 1.2.28
+      jest: 27.5.1(canvas@2.11.2)
+      lodash-es: 4.17.21
+      preact: 10.23.1
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - node-notifier
+      - supports-color
+      - ts-node
+      - utf-8-validate
+
+  '@mapbox/node-pre-gyp@1.0.11':
+    dependencies:
+      detect-libc: 2.0.3
+      https-proxy-agent: 5.0.1
+      make-dir: 3.1.0
+      node-fetch: 2.7.0
+      nopt: 5.0.0
+      npmlog: 5.0.1
+      rimraf: 3.0.2
+      semver: 7.6.3
+      tar: 6.2.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.17.1
+
+  '@nuxt/kit@3.12.4(rollup@4.20.0)':
+    dependencies:
+      '@nuxt/schema': 3.12.4(rollup@4.20.0)
+      c12: 1.11.1
+      consola: 3.2.3
+      defu: 6.1.4
+      destr: 2.0.3
+      globby: 14.0.2
+      hash-sum: 2.0.0
+      ignore: 5.3.1
+      jiti: 1.21.6
+      klona: 2.0.6
+      knitwork: 1.1.0
+      mlly: 1.7.1
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      scule: 1.3.0
+      semver: 7.6.3
+      ufo: 1.5.4
+      unctx: 2.3.1
+      unimport: 3.10.0(rollup@4.20.0)
+      untyped: 1.4.2
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+    optional: true
+
+  '@nuxt/schema@3.12.4(rollup@4.20.0)':
+    dependencies:
+      compatx: 0.1.8
+      consola: 3.2.3
+      defu: 6.1.4
+      hookable: 5.5.3
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      scule: 1.3.0
+      std-env: 3.7.0
+      ufo: 1.5.4
+      uncrypto: 0.1.3
+      unimport: 3.10.0(rollup@4.20.0)
+      untyped: 1.4.2
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    optional: true
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@pkgr/core@0.1.1': {}
+
+  '@popperjs/core@2.11.8': {}
+
+  '@pureadmin/descriptions@1.2.1(echarts@5.5.1)(element-plus@2.8.0(vue@3.4.37(typescript@5.5.4)))(typescript@5.5.4)':
+    dependencies:
+      '@element-plus/icons-vue': 2.3.1(vue@3.4.37(typescript@5.5.4))
+      '@pureadmin/utils': 2.4.8(echarts@5.5.1)(vue@3.4.37(typescript@5.5.4))
+      element-plus: 2.8.0(vue@3.4.37(typescript@5.5.4))
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - echarts
+      - typescript
+
+  '@pureadmin/table@3.2.0(element-plus@2.8.0(vue@3.4.37(typescript@5.5.4)))(typescript@5.5.4)':
+    dependencies:
+      element-plus: 2.8.0(vue@3.4.37(typescript@5.5.4))
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
+  '@pureadmin/theme@3.2.0':
+    dependencies:
+      '@zougt/some-loader-utils': 1.4.3
+      fs-extra: 11.2.0
+      string-hash: 1.1.3
+
+  '@pureadmin/utils@2.4.8(echarts@5.5.1)(vue@3.4.37(typescript@5.5.4))':
+    optionalDependencies:
+      echarts: 5.5.1
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@rollup/pluginutils@5.1.0(rollup@4.20.0)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.20.0
+
+  '@rollup/rollup-android-arm-eabi@4.20.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.20.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.20.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.20.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.20.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.20.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.20.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.20.0':
+    optional: true
+
+  '@sindresorhus/merge-streams@2.3.0':
+    optional: true
+
+  '@sinonjs/commons@1.8.6':
+    dependencies:
+      type-detect: 4.0.8
+
+  '@sinonjs/fake-timers@8.1.0':
+    dependencies:
+      '@sinonjs/commons': 1.8.6
+
+  '@sxzz/popperjs-es@2.11.7': {}
+
+  '@tootallnate/once@1.1.2': {}
+
+  '@transloadit/prettier-bytes@0.0.7': {}
+
+  '@trysound/sax@0.2.0': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.6
+
+  '@types/babel__generator@7.6.8':
+    dependencies:
+      '@babel/types': 7.25.2
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.25.3
+      '@babel/types': 7.25.2
+
+  '@types/babel__traverse@7.20.6':
+    dependencies:
+      '@babel/types': 7.25.2
+
+  '@types/conventional-commits-parser@5.0.0':
+    dependencies:
+      '@types/node': 20.14.15
+
+  '@types/dagre@0.7.52': {}
+
+  '@types/estree@1.0.5': {}
+
+  '@types/event-emitter@0.3.5': {}
+
+  '@types/graceful-fs@4.1.9':
+    dependencies:
+      '@types/node': 20.14.15
+
+  '@types/gradient-string@1.1.6':
+    dependencies:
+      '@types/tinycolor2': 1.4.6
+
+  '@types/intro.js@5.1.5': {}
+
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
+  '@types/istanbul-lib-report@3.0.3':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+
+  '@types/istanbul-reports@3.0.4':
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.3
+
+  '@types/js-cookie@3.0.6': {}
+
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.7
+
+  '@types/lodash@4.17.7': {}
+
+  '@types/mousetrap@1.6.15': {}
+
+  '@types/node@20.14.15':
+    dependencies:
+      undici-types: 5.26.5
+
+  '@types/nprogress@0.2.3': {}
+
+  '@types/prettier@2.7.3': {}
+
+  '@types/qrcode@1.5.5':
+    dependencies:
+      '@types/node': 20.14.15
+
+  '@types/qs@6.9.15': {}
+
+  '@types/sortablejs@1.15.8': {}
+
+  '@types/stack-utils@2.0.3': {}
+
+  '@types/tinycolor2@1.4.6': {}
+
+  '@types/web-animations-js@2.2.16': {}
+
+  '@types/web-bluetooth@0.0.14': {}
+
+  '@types/web-bluetooth@0.0.16': {}
+
+  '@types/web-bluetooth@0.0.20': {}
+
+  '@types/yargs-parser@21.0.3': {}
+
+  '@types/yargs@16.0.9':
+    dependencies:
+      '@types/yargs-parser': 21.0.3
+
+  '@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4))(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)':
+    dependencies:
+      '@eslint-community/regexpp': 4.11.0
+      '@typescript-eslint/parser': 7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
+      '@typescript-eslint/scope-manager': 7.18.0
+      '@typescript-eslint/type-utils': 7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
+      '@typescript-eslint/utils': 7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
+      '@typescript-eslint/visitor-keys': 7.18.0
+      eslint: 9.9.0(jiti@1.21.6)
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      natural-compare: 1.4.0
+      ts-api-utils: 1.3.0(typescript@5.5.4)
+    optionalDependencies:
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 7.18.0
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.5.4)
+      '@typescript-eslint/visitor-keys': 7.18.0
+      debug: 4.3.6
+      eslint: 9.9.0(jiti@1.21.6)
+    optionalDependencies:
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@7.18.0':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/visitor-keys': 7.18.0
+
+  '@typescript-eslint/type-utils@7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.5.4)
+      '@typescript-eslint/utils': 7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)
+      debug: 4.3.6
+      eslint: 9.9.0(jiti@1.21.6)
+      ts-api-utils: 1.3.0(typescript@5.5.4)
+    optionalDependencies:
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@7.18.0': {}
+
+  '@typescript-eslint/typescript-estree@7.18.0(typescript@5.5.4)':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/visitor-keys': 7.18.0
+      debug: 4.3.6
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.3.0(typescript@5.5.4)
+    optionalDependencies:
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@7.18.0(eslint@9.9.0(jiti@1.21.6))(typescript@5.5.4)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.0(jiti@1.21.6))
+      '@typescript-eslint/scope-manager': 7.18.0
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.5.4)
+      eslint: 9.9.0(jiti@1.21.6)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/visitor-keys@7.18.0':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      eslint-visitor-keys: 3.4.3
+
+  '@uppy/companion-client@2.2.2':
+    dependencies:
+      '@uppy/utils': 4.1.3
+      namespace-emitter: 2.0.1
+
+  '@uppy/core@2.3.4':
+    dependencies:
+      '@transloadit/prettier-bytes': 0.0.7
+      '@uppy/store-default': 2.1.1
+      '@uppy/utils': 4.1.3
+      lodash.throttle: 4.1.1
+      mime-match: 1.0.2
+      namespace-emitter: 2.0.1
+      nanoid: 3.3.7
+      preact: 10.23.1
+
+  '@uppy/store-default@2.1.1': {}
+
+  '@uppy/utils@4.1.3':
+    dependencies:
+      lodash.throttle: 4.1.1
+
+  '@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4)':
+    dependencies:
+      '@uppy/companion-client': 2.2.2
+      '@uppy/core': 2.3.4
+      '@uppy/utils': 4.1.3
+      nanoid: 3.3.7
+
+  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
+      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2)
+      vite: 5.4.0(@types/node@20.14.15)(sass@1.77.8)
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      vite: 5.4.0(@types/node@20.14.15)(sass@1.77.8)
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@volar/language-core@2.4.0-alpha.18':
+    dependencies:
+      '@volar/source-map': 2.4.0-alpha.18
+
+  '@volar/source-map@2.4.0-alpha.18': {}
+
+  '@volar/typescript@2.4.0-alpha.18':
+    dependencies:
+      '@volar/language-core': 2.4.0-alpha.18
+      path-browserify: 1.0.1
+      vscode-uri: 3.0.8
+
+  '@vue-flow/background@1.3.0(@vue-flow/core@1.39.3(vue@3.4.37(typescript@5.5.4)))(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@vue-flow/core': 1.39.3(vue@3.4.37(typescript@5.5.4))
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@vue-flow/core@1.39.3(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.4.37(typescript@5.5.4))
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  '@vue/babel-helper-vue-transform-on@1.2.2': {}
+
+  '@vue/babel-plugin-jsx@1.2.2(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2)
+      '@babel/template': 7.25.0
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+      '@vue/babel-helper-vue-transform-on': 1.2.2
+      '@vue/babel-plugin-resolve-type': 1.2.2(@babel/core@7.25.2)
+      camelcase: 6.3.0
+      html-tags: 3.3.1
+      svg-tags: 1.0.0
+    optionalDependencies:
+      '@babel/core': 7.25.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.2.2(@babel/core@7.25.2)':
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@babel/core': 7.25.2
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.8
+      '@babel/parser': 7.25.3
+      '@vue/compiler-sfc': 3.4.37
+
+  '@vue/compiler-core@3.4.37':
+    dependencies:
+      '@babel/parser': 7.25.3
+      '@vue/shared': 3.4.37
+      entities: 5.0.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
+  '@vue/compiler-dom@3.4.37':
+    dependencies:
+      '@vue/compiler-core': 3.4.37
+      '@vue/shared': 3.4.37
+
+  '@vue/compiler-sfc@3.4.37':
+    dependencies:
+      '@babel/parser': 7.25.3
+      '@vue/compiler-core': 3.4.37
+      '@vue/compiler-dom': 3.4.37
+      '@vue/compiler-ssr': 3.4.37
+      '@vue/shared': 3.4.37
+      estree-walker: 2.0.2
+      magic-string: 0.30.11
+      postcss: 8.4.41
+      source-map-js: 1.2.0
+
+  '@vue/compiler-ssr@3.4.37':
+    dependencies:
+      '@vue/compiler-dom': 3.4.37
+      '@vue/shared': 3.4.37
+
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
+  '@vue/devtools-api@6.6.3': {}
+
+  '@vue/language-core@2.0.29(typescript@5.5.4)':
+    dependencies:
+      '@volar/language-core': 2.4.0-alpha.18
+      '@vue/compiler-dom': 3.4.37
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.4.37
+      computeds: 0.0.1
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.5.4
+
+  '@vue/reactivity@3.4.37':
+    dependencies:
+      '@vue/shared': 3.4.37
+
+  '@vue/runtime-core@3.4.37':
+    dependencies:
+      '@vue/reactivity': 3.4.37
+      '@vue/shared': 3.4.37
+
+  '@vue/runtime-dom@3.4.37':
+    dependencies:
+      '@vue/reactivity': 3.4.37
+      '@vue/runtime-core': 3.4.37
+      '@vue/shared': 3.4.37
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.4.37(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@vue/compiler-ssr': 3.4.37
+      '@vue/shared': 3.4.37
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@vue/shared@3.4.37': {}
+
+  '@vueuse/core@10.11.1(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.4.37(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/core@8.9.4(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.14
+      '@vueuse/metadata': 8.9.4
+      '@vueuse/shared': 8.9.4(vue@3.4.37(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
+    optionalDependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@vueuse/core@9.13.0(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.4.37(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.1': {}
+
+  '@vueuse/metadata@8.9.4': {}
+
+  '@vueuse/metadata@9.13.0': {}
+
+  '@vueuse/motion@2.2.3(rollup@4.20.0)(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.4.37(typescript@5.5.4))
+      '@vueuse/shared': 10.11.1(vue@3.4.37(typescript@5.5.4))
+      csstype: 3.1.3
+      framesync: 6.1.2
+      popmotion: 11.0.5
+      style-value-types: 5.1.2
+      vue: 3.4.37(typescript@5.5.4)
+    optionalDependencies:
+      '@nuxt/kit': 3.12.4(rollup@4.20.0)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - magicast
+      - rollup
+      - supports-color
+
+  '@vueuse/shared@10.11.1(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/shared@8.9.4(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
+    optionalDependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@vueuse/shared@9.13.0(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)':
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      dom7: 3.0.0
+      is-url: 1.2.4
+      lodash.throttle: 4.1.1
+      nanoid: 3.3.7
+      slate: 0.72.8
+      snabbdom: 3.6.2
+
+  '@wangeditor/code-highlight@1.0.3(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      dom7: 3.0.0
+      prismjs: 1.29.0
+      slate: 0.72.8
+      snabbdom: 3.6.2
+
+  '@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)':
+    dependencies:
+      '@types/event-emitter': 0.3.5
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      dom7: 3.0.0
+      event-emitter: 0.3.5
+      html-void-elements: 2.0.1
+      i18next: 20.6.1
+      is-hotkey: 0.2.0
+      lodash.camelcase: 4.3.0
+      lodash.clonedeep: 4.5.0
+      lodash.debounce: 4.0.8
+      lodash.foreach: 4.5.0
+      lodash.isequal: 4.5.0
+      lodash.throttle: 4.1.1
+      lodash.toarray: 4.4.0
+      nanoid: 3.3.7
+      scroll-into-view-if-needed: 2.2.31
+      slate: 0.72.8
+      slate-history: 0.66.0(slate@0.72.8)
+      snabbdom: 3.6.2
+
+  '@wangeditor/editor-for-vue@5.1.12(@wangeditor/editor@5.1.23)(vue@3.4.37(typescript@5.5.4))':
+    dependencies:
+      '@wangeditor/editor': 5.1.23
+      vue: 3.4.37(typescript@5.5.4)
+
+  '@wangeditor/editor@5.1.23':
+    dependencies:
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/code-highlight': 1.0.3(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/list-module': 1.0.5(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/table-module': 1.1.4(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/upload-image-module': 1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/video-module': 1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      dom7: 3.0.0
+      is-hotkey: 0.2.0
+      lodash.camelcase: 4.3.0
+      lodash.clonedeep: 4.5.0
+      lodash.debounce: 4.0.8
+      lodash.foreach: 4.5.0
+      lodash.isequal: 4.5.0
+      lodash.throttle: 4.1.1
+      lodash.toarray: 4.4.0
+      nanoid: 3.3.7
+      slate: 0.72.8
+      snabbdom: 3.6.2
+
+  '@wangeditor/list-module@1.0.5(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      dom7: 3.0.0
+      slate: 0.72.8
+      snabbdom: 3.6.2
+
+  '@wangeditor/table-module@1.1.4(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)':
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      dom7: 3.0.0
+      lodash.isequal: 4.5.0
+      lodash.throttle: 4.1.1
+      nanoid: 3.3.7
+      slate: 0.72.8
+      snabbdom: 3.6.2
+
+  '@wangeditor/upload-image-module@1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)':
+    dependencies:
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      dom7: 3.0.0
+      lodash.foreach: 4.5.0
+      slate: 0.72.8
+      snabbdom: 3.6.2
+
+  '@wangeditor/video-module@1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)':
+    dependencies:
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
+      dom7: 3.0.0
+      nanoid: 3.3.7
+      slate: 0.72.8
+      snabbdom: 3.6.2
+
+  '@zougt/some-loader-utils@1.4.3':
+    dependencies:
+      cac: 6.7.14
+      color: 4.2.3
+      cssnano: 5.1.15(postcss@8.4.41)
+      cssnano-preset-lite: 2.1.3(postcss@8.4.41)
+      fs-extra: 10.1.0
+      postcss: 8.4.41
+      prettier: 2.8.8
+      uuid: 8.3.2
+
+  '@zxcvbn-ts/core@3.0.4':
+    dependencies:
+      fastest-levenshtein: 1.0.16
+
+  JSONStream@1.3.5:
+    dependencies:
+      jsonparse: 1.3.1
+      through: 2.3.8
+
+  abab@2.0.6: {}
+
+  abbrev@1.1.1:
+    optional: true
+
+  acorn-globals@6.0.0:
+    dependencies:
+      acorn: 7.4.1
+      acorn-walk: 7.2.0
+
+  acorn-jsx@5.3.2(acorn@8.12.1):
+    dependencies:
+      acorn: 8.12.1
+
+  acorn-walk@7.2.0: {}
+
+  acorn@7.4.1: {}
+
+  acorn@8.12.1: {}
+
+  adler-32@1.3.1: {}
+
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.0.1
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  animate.css@4.1.1: {}
+
+  ansi-align@3.0.1:
+    dependencies:
+      string-width: 4.2.3
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-escapes@7.0.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.0.1: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@5.2.0: {}
+
+  ansi-styles@6.2.1: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  aproba@2.0.0:
+    optional: true
+
+  are-we-there-yet@2.0.0:
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 3.6.2
+    optional: true
+
+  arg@5.0.2: {}
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  argparse@2.0.1: {}
+
+  array-ify@1.0.0: {}
+
+  array-union@2.1.0: {}
+
+  astral-regex@2.0.0: {}
+
+  async-validator@4.2.5: {}
+
+  asynckit@0.4.0: {}
+
+  autoprefixer@10.4.20(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-lite: 1.0.30001651
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.0.1
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  axios@1.7.3:
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  babel-jest@27.5.1(@babel/core@7.25.2):
+    dependencies:
+      '@babel/core': 7.25.2
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/babel__core': 7.20.5
+      babel-plugin-istanbul: 6.1.1
+      babel-preset-jest: 27.5.1(@babel/core@7.25.2)
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-istanbul@6.1.1:
+    dependencies:
+      '@babel/helper-plugin-utils': 7.24.8
+      '@istanbuljs/load-nyc-config': 1.1.0
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-instrument: 5.2.1
+      test-exclude: 6.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-jest-hoist@27.5.1:
+    dependencies:
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.20.6
+
+  babel-preset-current-node-syntax@1.0.1(@babel/core@7.25.2):
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.2)
+
+  babel-preset-jest@27.5.1(@babel/core@7.25.2):
+    dependencies:
+      '@babel/core': 7.25.2
+      babel-plugin-jest-hoist: 27.5.1
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.25.2)
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@2.0.0: {}
+
+  base64-js@1.5.1: {}
+
+  binary-extensions@2.3.0: {}
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  boolbase@1.0.0: {}
+
+  boxen@7.1.1:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 7.0.1
+      chalk: 5.3.0
+      cli-boxes: 3.0.0
+      string-width: 5.1.2
+      type-fest: 2.19.0
+      widest-line: 4.0.1
+      wrap-ansi: 8.1.0
+
+  brace-expansion@1.1.11:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browser-process-hrtime@1.0.0: {}
+
+  browserslist@4.23.3:
+    dependencies:
+      caniuse-lite: 1.0.30001651
+      electron-to-chromium: 1.5.6
+      node-releases: 2.0.18
+      update-browserslist-db: 1.1.0(browserslist@4.23.3)
+
+  bser@2.1.1:
+    dependencies:
+      node-int64: 0.4.0
+
+  buffer-from@1.1.2: {}
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  bundle-import@0.0.1:
+    dependencies:
+      get-tsconfig: 4.7.6
+      import-from-string: 0.0.4
+
+  c12@1.11.1:
+    dependencies:
+      chokidar: 3.6.0
+      confbox: 0.1.7
+      defu: 6.1.4
+      dotenv: 16.4.5
+      giget: 1.2.3
+      jiti: 1.21.6
+      mlly: 1.7.1
+      ohash: 1.1.3
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      pkg-types: 1.1.3
+      rc9: 2.1.2
+    optional: true
+
+  cac@6.7.14: {}
+
+  call-bind@1.0.7:
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.2
+
+  callsites@3.1.0: {}
+
+  camelcase-css@2.0.1: {}
+
+  camelcase@5.3.1: {}
+
+  camelcase@6.3.0: {}
+
+  camelcase@7.0.1: {}
+
+  caniuse-api@3.0.0:
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-lite: 1.0.30001651
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+
+  caniuse-lite@1.0.30001651: {}
+
+  canvas@2.11.2:
+    dependencies:
+      '@mapbox/node-pre-gyp': 1.0.11
+      nan: 2.20.0
+      simple-get: 3.1.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    optional: true
+
+  cfb@1.2.2:
+    dependencies:
+      adler-32: 1.3.1
+      crc-32: 1.2.2
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.3.0: {}
+
+  char-regex@1.0.2: {}
+
+  china-area-data@5.0.1: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  chownr@2.0.0:
+    optional: true
+
+  ci-info@3.9.0: {}
+
+  citty@0.1.6:
+    dependencies:
+      consola: 3.2.3
+    optional: true
+
+  cjs-module-lexer@1.3.1: {}
+
+  cli-boxes@3.0.0: {}
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-truncate@4.0.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.2.0
+
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
+  cliui@7.0.4:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  co@4.6.0: {}
+
+  codepage@1.15.0: {}
+
+  collect-v8-coverage@1.0.2: {}
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+
+  color-support@1.1.3:
+    optional: true
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+
+  colord@2.9.3: {}
+
+  colorette@2.0.20: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  commander@12.1.0: {}
+
+  commander@4.1.1: {}
+
+  commander@7.2.0: {}
+
+  commander@8.3.0: {}
+
+  commist@1.1.0:
+    dependencies:
+      leven: 2.1.0
+      minimist: 1.2.8
+
+  compare-func@2.0.0:
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+
+  compatx@0.1.8:
+    optional: true
+
+  compute-scroll-into-view@1.0.20: {}
+
+  computeds@0.0.1: {}
+
+  concat-map@0.0.1: {}
+
+  concat-stream@2.0.0:
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+      typedarray: 0.0.6
+
+  confbox@0.1.7: {}
+
+  consola@3.2.3:
+    optional: true
+
+  console-control-strings@1.1.0:
+    optional: true
+
+  conventional-changelog-angular@7.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-commits-parser@5.0.0:
+    dependencies:
+      JSONStream: 1.3.5
+      is-text-path: 2.0.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  convert-source-map@1.9.0: {}
+
+  convert-source-map@2.0.0: {}
+
+  core-js@3.38.0: {}
+
+  cosmiconfig-typescript-loader@5.0.0(@types/node@20.14.15)(cosmiconfig@9.0.0(typescript@5.5.4))(typescript@5.5.4):
+    dependencies:
+      '@types/node': 20.14.15
+      cosmiconfig: 9.0.0(typescript@5.5.4)
+      jiti: 1.21.6
+      typescript: 5.5.4
+
+  cosmiconfig@9.0.0(typescript@5.5.4):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.5.4
+
+  crc-32@1.2.2: {}
+
+  cropperjs@1.6.2: {}
+
+  cross-spawn@7.0.3:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  css-declaration-sorter@6.4.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  css-declaration-sorter@7.2.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  css-functions-list@3.2.2: {}
+
+  css-select@4.3.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+
+  css-select@5.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      nth-check: 2.1.1
+
+  css-tree@1.1.3:
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.0
+
+  css-tree@2.3.1:
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.2.0
+
+  css-what@6.1.0: {}
+
+  cssesc@3.0.0: {}
+
+  cssnano-preset-default@5.2.14(postcss@8.4.41):
+    dependencies:
+      css-declaration-sorter: 6.4.1(postcss@8.4.41)
+      cssnano-utils: 3.1.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-calc: 8.2.4(postcss@8.4.41)
+      postcss-colormin: 5.3.1(postcss@8.4.41)
+      postcss-convert-values: 5.1.3(postcss@8.4.41)
+      postcss-discard-comments: 5.1.2(postcss@8.4.41)
+      postcss-discard-duplicates: 5.1.0(postcss@8.4.41)
+      postcss-discard-empty: 5.1.1(postcss@8.4.41)
+      postcss-discard-overridden: 5.1.0(postcss@8.4.41)
+      postcss-merge-longhand: 5.1.7(postcss@8.4.41)
+      postcss-merge-rules: 5.1.4(postcss@8.4.41)
+      postcss-minify-font-values: 5.1.0(postcss@8.4.41)
+      postcss-minify-gradients: 5.1.1(postcss@8.4.41)
+      postcss-minify-params: 5.1.4(postcss@8.4.41)
+      postcss-minify-selectors: 5.2.1(postcss@8.4.41)
+      postcss-normalize-charset: 5.1.0(postcss@8.4.41)
+      postcss-normalize-display-values: 5.1.0(postcss@8.4.41)
+      postcss-normalize-positions: 5.1.1(postcss@8.4.41)
+      postcss-normalize-repeat-style: 5.1.1(postcss@8.4.41)
+      postcss-normalize-string: 5.1.0(postcss@8.4.41)
+      postcss-normalize-timing-functions: 5.1.0(postcss@8.4.41)
+      postcss-normalize-unicode: 5.1.1(postcss@8.4.41)
+      postcss-normalize-url: 5.1.0(postcss@8.4.41)
+      postcss-normalize-whitespace: 5.1.1(postcss@8.4.41)
+      postcss-ordered-values: 5.1.3(postcss@8.4.41)
+      postcss-reduce-initial: 5.1.2(postcss@8.4.41)
+      postcss-reduce-transforms: 5.1.0(postcss@8.4.41)
+      postcss-svgo: 5.1.0(postcss@8.4.41)
+      postcss-unique-selectors: 5.1.1(postcss@8.4.41)
+
+  cssnano-preset-default@7.0.5(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      css-declaration-sorter: 7.2.0(postcss@8.4.41)
+      cssnano-utils: 5.0.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-calc: 10.0.1(postcss@8.4.41)
+      postcss-colormin: 7.0.2(postcss@8.4.41)
+      postcss-convert-values: 7.0.3(postcss@8.4.41)
+      postcss-discard-comments: 7.0.2(postcss@8.4.41)
+      postcss-discard-duplicates: 7.0.1(postcss@8.4.41)
+      postcss-discard-empty: 7.0.0(postcss@8.4.41)
+      postcss-discard-overridden: 7.0.0(postcss@8.4.41)
+      postcss-merge-longhand: 7.0.3(postcss@8.4.41)
+      postcss-merge-rules: 7.0.3(postcss@8.4.41)
+      postcss-minify-font-values: 7.0.0(postcss@8.4.41)
+      postcss-minify-gradients: 7.0.0(postcss@8.4.41)
+      postcss-minify-params: 7.0.2(postcss@8.4.41)
+      postcss-minify-selectors: 7.0.3(postcss@8.4.41)
+      postcss-normalize-charset: 7.0.0(postcss@8.4.41)
+      postcss-normalize-display-values: 7.0.0(postcss@8.4.41)
+      postcss-normalize-positions: 7.0.0(postcss@8.4.41)
+      postcss-normalize-repeat-style: 7.0.0(postcss@8.4.41)
+      postcss-normalize-string: 7.0.0(postcss@8.4.41)
+      postcss-normalize-timing-functions: 7.0.0(postcss@8.4.41)
+      postcss-normalize-unicode: 7.0.2(postcss@8.4.41)
+      postcss-normalize-url: 7.0.0(postcss@8.4.41)
+      postcss-normalize-whitespace: 7.0.0(postcss@8.4.41)
+      postcss-ordered-values: 7.0.1(postcss@8.4.41)
+      postcss-reduce-initial: 7.0.2(postcss@8.4.41)
+      postcss-reduce-transforms: 7.0.0(postcss@8.4.41)
+      postcss-svgo: 7.0.1(postcss@8.4.41)
+      postcss-unique-selectors: 7.0.2(postcss@8.4.41)
+
+  cssnano-preset-lite@2.1.3(postcss@8.4.41):
+    dependencies:
+      cssnano-utils: 3.1.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-discard-comments: 5.1.2(postcss@8.4.41)
+      postcss-discard-empty: 5.1.1(postcss@8.4.41)
+      postcss-normalize-whitespace: 5.1.1(postcss@8.4.41)
+
+  cssnano-utils@3.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  cssnano-utils@5.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  cssnano@5.1.15(postcss@8.4.41):
+    dependencies:
+      cssnano-preset-default: 5.2.14(postcss@8.4.41)
+      lilconfig: 2.1.0
+      postcss: 8.4.41
+      yaml: 1.10.2
+
+  cssnano@7.0.5(postcss@8.4.41):
+    dependencies:
+      cssnano-preset-default: 7.0.5(postcss@8.4.41)
+      lilconfig: 3.1.2
+      postcss: 8.4.41
+
+  csso@4.2.0:
+    dependencies:
+      css-tree: 1.1.3
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
+  cssom@0.3.8: {}
+
+  cssom@0.4.4: {}
+
+  cssstyle@2.3.0:
+    dependencies:
+      cssom: 0.3.8
+
+  csstype@3.1.3: {}
+
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d@1.0.2:
+    dependencies:
+      es5-ext: 0.10.64
+      type: 2.7.3
+
+  dagre@0.8.5:
+    dependencies:
+      graphlib: 2.1.8
+      lodash: 4.17.21
+
+  danmu.js@1.1.13:
+    dependencies:
+      event-emitter: 0.3.5
+
+  dargs@8.1.0: {}
+
+  data-urls@2.0.0:
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 2.3.0
+      whatwg-url: 8.7.0
+
+  dayjs@1.11.12: {}
+
+  de-indent@1.0.2: {}
+
+  debug@4.3.6:
+    dependencies:
+      ms: 2.1.2
+
+  decamelize@1.2.0: {}
+
+  decimal.js@10.4.3: {}
+
+  decompress-response@4.2.1:
+    dependencies:
+      mimic-response: 2.1.0
+    optional: true
+
+  dedent@0.7.0: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      gopd: 1.0.1
+
+  define-lazy-prop@2.0.0: {}
+
+  defu@6.1.4:
+    optional: true
+
+  delayed-stream@1.0.0: {}
+
+  delegate@3.2.0: {}
+
+  delegates@1.0.0:
+    optional: true
+
+  destr@2.0.3:
+    optional: true
+
+  detect-libc@2.0.3:
+    optional: true
+
+  detect-newline@3.1.0: {}
+
+  didyoumean@1.2.2: {}
+
+  diff-sequences@27.5.1: {}
+
+  dijkstrajs@1.0.3: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dlv@1.1.3: {}
+
+  dom-serializer@1.4.1:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      entities: 2.2.0
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  dom-zindex@1.0.4: {}
+
+  dom7@3.0.0:
+    dependencies:
+      ssr-window: 3.0.0
+
+  domelementtype@2.3.0: {}
+
+  domexception@2.0.1:
+    dependencies:
+      webidl-conversions: 5.0.0
+
+  domhandler@4.3.1:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@2.8.0:
+    dependencies:
+      dom-serializer: 1.4.1
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+
+  domutils@3.1.0:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dot-prop@5.3.0:
+    dependencies:
+      is-obj: 2.0.0
+
+  dotenv@16.4.5:
+    optional: true
+
+  downloadjs@1.4.7: {}
+
+  duplexify@4.1.3:
+    dependencies:
+      end-of-stream: 1.4.4
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+      stream-shift: 1.0.3
+
+  eastasianwidth@0.2.0: {}
+
+  echarts@5.5.1:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.0
+
+  el-table-infinite-scroll@3.0.6(typescript@5.5.4):
+    dependencies:
+      core-js: 3.38.0
+      element-plus: 2.8.0(vue@3.4.37(typescript@5.5.4))
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
+  electron-to-chromium@1.5.6: {}
+
+  element-plus@2.1.4(@types/lodash-es@4.17.12)(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+      '@element-plus/icons-vue': 1.1.4(vue@3.4.37(typescript@5.5.4))
+      '@popperjs/core': 2.11.8
+      '@vueuse/core': 8.9.4(vue@3.4.37(typescript@5.5.4))
+      async-validator: 4.2.5
+      dayjs: 1.11.12
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - '@types/lodash-es'
+      - '@vue/composition-api'
+
+  element-plus@2.8.0(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+      '@element-plus/icons-vue': 2.3.1(vue@3.4.37(typescript@5.5.4))
+      '@floating-ui/dom': 1.6.10
+      '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
+      '@types/lodash': 4.17.7
+      '@types/lodash-es': 4.17.12
+      '@vueuse/core': 9.13.0(vue@3.4.37(typescript@5.5.4))
+      async-validator: 4.2.5
+      dayjs: 1.11.12
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  emittery@0.8.1: {}
+
+  emoji-regex@10.3.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  end-of-stream@1.4.4:
+    dependencies:
+      once: 1.4.0
+
+  entities@2.2.0: {}
+
+  entities@4.5.0: {}
+
+  entities@5.0.0: {}
+
+  env-paths@2.2.1: {}
+
+  environment@1.1.0: {}
+
+  error-ex@1.3.2:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-define-property@1.0.0:
+    dependencies:
+      get-intrinsic: 1.2.4
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@0.4.1: {}
+
+  es5-ext@0.10.64:
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.4
+      esniff: 2.0.1
+      next-tick: 1.1.0
+
+  es6-iterator@2.0.3:
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      es6-symbol: 3.1.4
+
+  es6-symbol@3.1.4:
+    dependencies:
+      d: 1.0.2
+      ext: 1.7.0
+
+  esbuild@0.19.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.19.12
+      '@esbuild/android-arm': 0.19.12
+      '@esbuild/android-arm64': 0.19.12
+      '@esbuild/android-x64': 0.19.12
+      '@esbuild/darwin-arm64': 0.19.12
+      '@esbuild/darwin-x64': 0.19.12
+      '@esbuild/freebsd-arm64': 0.19.12
+      '@esbuild/freebsd-x64': 0.19.12
+      '@esbuild/linux-arm': 0.19.12
+      '@esbuild/linux-arm64': 0.19.12
+      '@esbuild/linux-ia32': 0.19.12
+      '@esbuild/linux-loong64': 0.19.12
+      '@esbuild/linux-mips64el': 0.19.12
+      '@esbuild/linux-ppc64': 0.19.12
+      '@esbuild/linux-riscv64': 0.19.12
+      '@esbuild/linux-s390x': 0.19.12
+      '@esbuild/linux-x64': 0.19.12
+      '@esbuild/netbsd-x64': 0.19.12
+      '@esbuild/openbsd-x64': 0.19.12
+      '@esbuild/sunos-x64': 0.19.12
+      '@esbuild/win32-arm64': 0.19.12
+      '@esbuild/win32-ia32': 0.19.12
+      '@esbuild/win32-x64': 0.19.12
+
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  escalade@3.1.2: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@2.0.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0:
+    optional: true
+
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-config-prettier@9.1.0(eslint@9.9.0(jiti@1.21.6)):
+    dependencies:
+      eslint: 9.9.0(jiti@1.21.6)
+
+  eslint-define-config@2.1.0: {}
+
+  eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@9.9.0(jiti@1.21.6)))(eslint@9.9.0(jiti@1.21.6))(prettier@3.3.3):
+    dependencies:
+      eslint: 9.9.0(jiti@1.21.6)
+      prettier: 3.3.3
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.9.1
+    optionalDependencies:
+      eslint-config-prettier: 9.1.0(eslint@9.9.0(jiti@1.21.6))
+
+  eslint-plugin-vue@9.27.0(eslint@9.9.0(jiti@1.21.6)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.0(jiti@1.21.6))
+      eslint: 9.9.0(jiti@1.21.6)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.1
+      semver: 7.6.3
+      vue-eslint-parser: 9.4.3(eslint@9.9.0(jiti@1.21.6))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-scope@7.2.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-scope@8.0.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.0.0: {}
+
+  eslint@9.9.0(jiti@1.21.6):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.0(jiti@1.21.6))
+      '@eslint-community/regexpp': 4.11.0
+      '@eslint/config-array': 0.17.1
+      '@eslint/eslintrc': 3.1.0
+      '@eslint/js': 9.9.0
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.3.0
+      '@nodelib/fs.walk': 1.2.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.6
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.0.2
+      eslint-visitor-keys: 4.0.0
+      espree: 10.1.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.1
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    optionalDependencies:
+      jiti: 1.21.6
+    transitivePeerDependencies:
+      - supports-color
+
+  esniff@2.0.1:
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      event-emitter: 0.3.5
+      type: 2.7.3
+
+  espree@10.1.0:
+    dependencies:
+      acorn: 8.12.1
+      acorn-jsx: 5.3.2(acorn@8.12.1)
+      eslint-visitor-keys: 4.0.0
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.12.1
+      acorn-jsx: 5.3.2(acorn@8.12.1)
+      eslint-visitor-keys: 3.4.3
+
+  esprima@4.0.1: {}
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.5
+
+  esutils@2.0.3: {}
+
+  event-emitter@0.3.5:
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+
+  eventemitter3@4.0.7: {}
+
+  eventemitter3@5.0.1: {}
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  exit@0.1.2: {}
+
+  expect@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      jest-get-type: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+
+  ext@1.7.0:
+    dependencies:
+      type: 2.7.3
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-diff@1.3.0: {}
+
+  fast-glob@3.3.2:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.7
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.0.1: {}
+
+  fastest-levenshtein@1.0.16: {}
+
+  fastq@1.17.1:
+    dependencies:
+      reusify: 1.0.4
+
+  fb-watchman@2.0.2:
+    dependencies:
+      bser: 2.1.1
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  file-entry-cache@9.0.0:
+    dependencies:
+      flat-cache: 5.0.0
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  find-up@7.0.0:
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+      unicorn-magic: 0.1.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+
+  flat-cache@5.0.0:
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+
+  flatted@3.3.1: {}
+
+  follow-redirects@1.15.6: {}
+
+  foreground-child@3.3.0:
+    dependencies:
+      cross-spawn: 7.0.3
+      signal-exit: 4.1.0
+
+  form-data@3.0.1:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
+  form-data@4.0.0:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
+  frac@1.1.2: {}
+
+  fraction.js@4.3.7: {}
+
+  framesync@6.1.2:
+    dependencies:
+      tslib: 2.4.0
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
+  fs-extra@11.2.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+    optional: true
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gauge@3.0.2:
+    dependencies:
+      aproba: 2.0.0
+      color-support: 1.1.3
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      object-assign: 4.1.1
+      signal-exit: 3.0.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wide-align: 1.1.5
+    optional: true
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.2.0: {}
+
+  get-intrinsic@1.2.4:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      has-proto: 1.0.3
+      has-symbols: 1.0.3
+      hasown: 2.0.2
+
+  get-package-type@0.1.0: {}
+
+  get-stream@6.0.1: {}
+
+  get-stream@8.0.1: {}
+
+  get-tsconfig@4.7.6:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  giget@1.2.3:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.2.3
+      defu: 6.1.4
+      node-fetch-native: 1.6.4
+      nypm: 0.3.9
+      ohash: 1.1.3
+      pathe: 1.1.2
+      tar: 6.2.1
+    optional: true
+
+  git-raw-commits@4.0.0:
+    dependencies:
+      dargs: 8.1.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.0
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 1.11.1
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  global-directory@4.0.1:
+    dependencies:
+      ini: 4.1.1
+
+  global-modules@2.0.0:
+    dependencies:
+      global-prefix: 3.0.0
+
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
+  globals@11.12.0: {}
+
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
+  globals@14.0.0: {}
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.1
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  globby@14.0.2:
+    dependencies:
+      '@sindresorhus/merge-streams': 2.3.0
+      fast-glob: 3.3.2
+      ignore: 5.3.1
+      path-type: 5.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.1.0
+    optional: true
+
+  globjoin@0.1.4: {}
+
+  gopd@1.0.1:
+    dependencies:
+      get-intrinsic: 1.2.4
+
+  graceful-fs@4.2.11: {}
+
+  gradient-string@2.0.2:
+    dependencies:
+      chalk: 4.1.2
+      tinygradient: 1.1.5
+
+  graphemer@1.4.0: {}
+
+  graphlib@2.1.8:
+    dependencies:
+      lodash: 4.17.21
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.0
+
+  has-proto@1.0.3: {}
+
+  has-symbols@1.0.3: {}
+
+  has-unicode@2.0.1:
+    optional: true
+
+  hash-sum@2.0.0:
+    optional: true
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  he@1.2.0: {}
+
+  help-me@3.0.0:
+    dependencies:
+      glob: 7.2.3
+      readable-stream: 3.6.2
+
+  hey-listen@1.0.8: {}
+
+  hookable@5.5.3:
+    optional: true
+
+  html-encoding-sniffer@2.0.1:
+    dependencies:
+      whatwg-encoding: 1.0.5
+
+  html-escaper@2.0.2: {}
+
+  html-tags@3.3.1: {}
+
+  html-void-elements@2.0.1: {}
+
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+
+  http-proxy-agent@4.0.1:
+    dependencies:
+      '@tootallnate/once': 1.1.2
+      agent-base: 6.0.2
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.6
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@5.0.0: {}
+
+  husky@9.1.4: {}
+
+  i18next@20.6.1:
+    dependencies:
+      '@babel/runtime': 7.25.0
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.1: {}
+
+  immediate@3.0.6: {}
+
+  immer@9.0.21: {}
+
+  immutable@4.3.7: {}
+
+  import-fresh@3.3.0:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-from-string@0.0.4:
+    dependencies:
+      esbuild: 0.19.12
+      import-meta-resolve: 3.1.1
+
+  import-local@3.2.0:
+    dependencies:
+      pkg-dir: 4.2.0
+      resolve-cwd: 3.0.0
+
+  import-meta-resolve@3.1.1: {}
+
+  import-meta-resolve@4.1.0: {}
+
+  imurmurhash@0.1.4: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.3: {}
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  ini@4.1.1: {}
+
+  intro.js@7.2.0: {}
+
+  is-arrayish@0.2.1: {}
+
+  is-arrayish@0.3.2: {}
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.15.0:
+    dependencies:
+      hasown: 2.0.2
+
+  is-docker@2.2.1: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-fullwidth-code-point@4.0.0: {}
+
+  is-fullwidth-code-point@5.0.0:
+    dependencies:
+      get-east-asian-width: 1.2.0
+
+  is-generator-fn@2.1.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-hotkey@0.2.0: {}
+
+  is-number@7.0.0: {}
+
+  is-obj@2.0.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-plain-object@5.0.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  is-reference@3.0.2:
+    dependencies:
+      '@types/estree': 1.0.5
+
+  is-stream@2.0.1: {}
+
+  is-stream@3.0.0: {}
+
+  is-text-path@2.0.0:
+    dependencies:
+      text-extensions: 2.4.0
+
+  is-typedarray@1.0.0: {}
+
+  is-url@1.2.4: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  isexe@2.0.0: {}
+
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-instrument@5.2.1:
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/parser': 7.25.3
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@4.0.1:
+    dependencies:
+      debug: 4.3.6
+      istanbul-lib-coverage: 3.2.2
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.1.7:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jest-changed-files@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      execa: 5.1.1
+      throat: 6.0.2
+
+  jest-circus@27.5.1:
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      chalk: 4.1.2
+      co: 4.6.0
+      dedent: 0.7.0
+      expect: 27.5.1
+      is-generator-fn: 2.1.0
+      jest-each: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+      jest-runtime: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      stack-utils: 2.0.6
+      throat: 6.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-cli@27.5.1(canvas@2.11.2):
+    dependencies:
+      '@jest/core': 27.5.1(canvas@2.11.2)
+      '@jest/test-result': 27.5.1
+      '@jest/types': 27.5.1
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      import-local: 3.2.0
+      jest-config: 27.5.1(canvas@2.11.2)
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      prompts: 2.4.2
+      yargs: 16.2.0
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - ts-node
+      - utf-8-validate
+
+  jest-config@27.5.1(canvas@2.11.2):
+    dependencies:
+      '@babel/core': 7.25.2
+      '@jest/test-sequencer': 27.5.1
+      '@jest/types': 27.5.1
+      babel-jest: 27.5.1(@babel/core@7.25.2)
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 27.5.1
+      jest-environment-jsdom: 27.5.1(canvas@2.11.2)
+      jest-environment-node: 27.5.1
+      jest-get-type: 27.5.1
+      jest-jasmine2: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-runner: 27.5.1(canvas@2.11.2)
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      micromatch: 4.0.7
+      parse-json: 5.2.0
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
+  jest-diff@27.5.1:
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 27.5.1
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+
+  jest-docblock@27.5.1:
+    dependencies:
+      detect-newline: 3.1.0
+
+  jest-each@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      chalk: 4.1.2
+      jest-get-type: 27.5.1
+      jest-util: 27.5.1
+      pretty-format: 27.5.1
+
+  jest-environment-jsdom@27.5.1(canvas@2.11.2):
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/fake-timers': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      jest-mock: 27.5.1
+      jest-util: 27.5.1
+      jsdom: 16.7.0(canvas@2.11.2)
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
+  jest-environment-node@27.5.1:
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/fake-timers': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      jest-mock: 27.5.1
+      jest-util: 27.5.1
+
+  jest-get-type@27.5.1: {}
+
+  jest-haste-map@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/graceful-fs': 4.1.9
+      '@types/node': 20.14.15
+      anymatch: 3.1.3
+      fb-watchman: 2.0.2
+      graceful-fs: 4.2.11
+      jest-regex-util: 27.5.1
+      jest-serializer: 27.5.1
+      jest-util: 27.5.1
+      jest-worker: 27.5.1
+      micromatch: 4.0.7
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  jest-jasmine2@27.5.1:
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/source-map': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      chalk: 4.1.2
+      co: 4.6.0
+      expect: 27.5.1
+      is-generator-fn: 2.1.0
+      jest-each: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+      jest-runtime: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      pretty-format: 27.5.1
+      throat: 6.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-leak-detector@27.5.1:
+    dependencies:
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+
+  jest-matcher-utils@27.5.1:
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 27.5.1
+      jest-get-type: 27.5.1
+      pretty-format: 27.5.1
+
+  jest-message-util@27.5.1:
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@jest/types': 27.5.1
+      '@types/stack-utils': 2.0.3
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      micromatch: 4.0.7
+      pretty-format: 27.5.1
+      slash: 3.0.0
+      stack-utils: 2.0.6
+
+  jest-mock@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+
+  jest-pnp-resolver@1.2.3(jest-resolve@27.5.1):
+    optionalDependencies:
+      jest-resolve: 27.5.1
+
+  jest-regex-util@27.5.1: {}
+
+  jest-resolve-dependencies@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      jest-regex-util: 27.5.1
+      jest-snapshot: 27.5.1
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-resolve@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      jest-haste-map: 27.5.1
+      jest-pnp-resolver: 1.2.3(jest-resolve@27.5.1)
+      jest-util: 27.5.1
+      jest-validate: 27.5.1
+      resolve: 1.22.8
+      resolve.exports: 1.1.1
+      slash: 3.0.0
+
+  jest-runner@27.5.1(canvas@2.11.2):
+    dependencies:
+      '@jest/console': 27.5.1
+      '@jest/environment': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      chalk: 4.1.2
+      emittery: 0.8.1
+      graceful-fs: 4.2.11
+      jest-docblock: 27.5.1
+      jest-environment-jsdom: 27.5.1(canvas@2.11.2)
+      jest-environment-node: 27.5.1
+      jest-haste-map: 27.5.1
+      jest-leak-detector: 27.5.1
+      jest-message-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-runtime: 27.5.1
+      jest-util: 27.5.1
+      jest-worker: 27.5.1
+      source-map-support: 0.5.21
+      throat: 6.0.2
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
+  jest-runtime@27.5.1:
+    dependencies:
+      '@jest/environment': 27.5.1
+      '@jest/fake-timers': 27.5.1
+      '@jest/globals': 27.5.1
+      '@jest/source-map': 27.5.1
+      '@jest/test-result': 27.5.1
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      chalk: 4.1.2
+      cjs-module-lexer: 1.3.1
+      collect-v8-coverage: 1.0.2
+      execa: 5.1.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-haste-map: 27.5.1
+      jest-message-util: 27.5.1
+      jest-mock: 27.5.1
+      jest-regex-util: 27.5.1
+      jest-resolve: 27.5.1
+      jest-snapshot: 27.5.1
+      jest-util: 27.5.1
+      slash: 3.0.0
+      strip-bom: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-serializer@27.5.1:
+    dependencies:
+      '@types/node': 20.14.15
+      graceful-fs: 4.2.11
+
+  jest-snapshot@27.5.1:
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/generator': 7.25.0
+      '@babel/plugin-syntax-typescript': 7.24.7(@babel/core@7.25.2)
+      '@babel/traverse': 7.25.3
+      '@babel/types': 7.25.2
+      '@jest/transform': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/babel__traverse': 7.20.6
+      '@types/prettier': 2.7.3
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.25.2)
+      chalk: 4.1.2
+      expect: 27.5.1
+      graceful-fs: 4.2.11
+      jest-diff: 27.5.1
+      jest-get-type: 27.5.1
+      jest-haste-map: 27.5.1
+      jest-matcher-utils: 27.5.1
+      jest-message-util: 27.5.1
+      jest-util: 27.5.1
+      natural-compare: 1.4.0
+      pretty-format: 27.5.1
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-util@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      chalk: 4.1.2
+      ci-info: 3.9.0
+      graceful-fs: 4.2.11
+      picomatch: 2.3.1
+
+  jest-validate@27.5.1:
+    dependencies:
+      '@jest/types': 27.5.1
+      camelcase: 6.3.0
+      chalk: 4.1.2
+      jest-get-type: 27.5.1
+      leven: 3.1.0
+      pretty-format: 27.5.1
+
+  jest-watcher@27.5.1:
+    dependencies:
+      '@jest/test-result': 27.5.1
+      '@jest/types': 27.5.1
+      '@types/node': 20.14.15
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      jest-util: 27.5.1
+      string-length: 4.0.2
+
+  jest-worker@27.5.1:
+    dependencies:
+      '@types/node': 20.14.15
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  jest@27.5.1(canvas@2.11.2):
+    dependencies:
+      '@jest/core': 27.5.1(canvas@2.11.2)
+      import-local: 3.2.0
+      jest-cli: 27.5.1(canvas@2.11.2)
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - ts-node
+      - utf-8-validate
+
+  jiti@1.21.6: {}
+
+  js-cookie@3.0.5: {}
+
+  js-sdsl@4.3.0: {}
+
+  js-tokens@4.0.0: {}
+
+  js-tokens@9.0.0: {}
+
+  js-yaml@3.14.1:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsbarcode@3.11.6: {}
+
+  jsdom@16.7.0(canvas@2.11.2):
+    dependencies:
+      abab: 2.0.6
+      acorn: 8.12.1
+      acorn-globals: 6.0.0
+      cssom: 0.4.4
+      cssstyle: 2.3.0
+      data-urls: 2.0.0
+      decimal.js: 10.4.3
+      domexception: 2.0.1
+      escodegen: 2.1.0
+      form-data: 3.0.1
+      html-encoding-sniffer: 2.0.1
+      http-proxy-agent: 4.0.1
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.12
+      parse5: 6.0.1
+      saxes: 5.0.1
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.4
+      w3c-hr-time: 1.0.2
+      w3c-xmlserializer: 2.0.0
+      webidl-conversions: 6.1.0
+      whatwg-encoding: 1.0.5
+      whatwg-mimetype: 2.3.0
+      whatwg-url: 8.7.0
+      ws: 7.5.10
+      xml-name-validator: 3.0.0
+    optionalDependencies:
+      canvas: 2.11.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jsesc@2.5.2: {}
+
+  json-buffer@3.0.1: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@2.2.3: {}
+
+  jsonc-eslint-parser@2.4.0:
+    dependencies:
+      acorn: 8.12.1
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.6.3
+
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonparse@1.3.1: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  kind-of@6.0.3: {}
+
+  kleur@3.0.3: {}
+
+  klona@2.0.6:
+    optional: true
+
+  knitwork@1.1.0:
+    optional: true
+
+  known-css-properties@0.34.0: {}
+
+  kolorist@1.8.0: {}
+
+  leven@2.1.0: {}
+
+  leven@3.1.0: {}
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lie@3.1.1:
+    dependencies:
+      immediate: 3.0.6
+
+  lilconfig@2.1.0: {}
+
+  lilconfig@3.1.2: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lint-staged@15.2.8:
+    dependencies:
+      chalk: 5.3.0
+      commander: 12.1.0
+      debug: 4.3.6
+      execa: 8.0.1
+      lilconfig: 3.1.2
+      listr2: 8.2.4
+      micromatch: 4.0.7
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.5.0
+    transitivePeerDependencies:
+      - supports-color
+
+  listr2@8.2.4:
+    dependencies:
+      cli-truncate: 4.0.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.0
+
+  local-pkg@0.5.0:
+    dependencies:
+      mlly: 1.7.1
+      pkg-types: 1.1.3
+    optional: true
+
+  localforage@1.10.0:
+    dependencies:
+      lie: 3.1.1
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  locate-path@7.2.0:
+    dependencies:
+      p-locate: 6.0.0
+
+  lodash-es@4.17.21: {}
+
+  lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+
+  lodash.camelcase@4.3.0: {}
+
+  lodash.clonedeep@4.5.0: {}
+
+  lodash.debounce@4.0.8: {}
+
+  lodash.foreach@4.5.0: {}
+
+  lodash.isequal@4.5.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.kebabcase@4.1.1: {}
+
+  lodash.memoize@4.1.2: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash.mergewith@4.6.2: {}
+
+  lodash.snakecase@4.1.1: {}
+
+  lodash.startcase@4.4.0: {}
+
+  lodash.throttle@4.1.1: {}
+
+  lodash.toarray@4.4.0: {}
+
+  lodash.truncate@4.4.2: {}
+
+  lodash.uniq@4.5.0: {}
+
+  lodash.upperfirst@4.3.1: {}
+
+  lodash@4.17.21: {}
+
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.0.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.0
+      strip-ansi: 7.1.0
+      wrap-ansi: 9.0.0
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
+  magic-string@0.25.9:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  magic-string@0.30.11:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  make-dir@3.1.0:
+    dependencies:
+      semver: 6.3.1
+    optional: true
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.6.3
+
+  makeerror@1.0.12:
+    dependencies:
+      tmpl: 1.0.5
+
+  mathml-tag-names@2.1.3: {}
+
+  mdn-data@2.0.14: {}
+
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.0.30: {}
+
+  memoize-one@6.0.0: {}
+
+  meow@12.1.1: {}
+
+  meow@13.2.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.7:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.52.0: {}
+
+  mime-match@1.0.2:
+    dependencies:
+      wildcard: 1.1.2
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mimic-fn@2.1.0: {}
+
+  mimic-fn@4.0.0: {}
+
+  mimic-function@5.0.1: {}
+
+  mimic-response@2.1.0:
+    optional: true
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.11
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  minimist@1.2.8: {}
+
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+    optional: true
+
+  minipass@5.0.0:
+    optional: true
+
+  minipass@7.1.2: {}
+
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+    optional: true
+
+  mint-filter@4.0.3: {}
+
+  mitt@2.1.0: {}
+
+  mitt@3.0.1: {}
+
+  mkdirp@1.0.4:
+    optional: true
+
+  mlly@1.7.1:
+    dependencies:
+      acorn: 8.12.1
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      ufo: 1.5.4
+
+  mousetrap@1.6.5: {}
+
+  mqtt-packet@6.10.0:
+    dependencies:
+      bl: 4.1.0
+      debug: 4.3.6
+      process-nextick-args: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mqtt@4.3.7:
+    dependencies:
+      commist: 1.1.0
+      concat-stream: 2.0.0
+      debug: 4.3.6
+      duplexify: 4.1.3
+      help-me: 3.0.0
+      inherits: 2.0.4
+      lru-cache: 6.0.0
+      minimist: 1.2.8
+      mqtt-packet: 6.10.0
+      number-allocator: 1.0.14
+      pump: 3.0.0
+      readable-stream: 3.6.2
+      reinterval: 1.1.0
+      rfdc: 1.4.1
+      split2: 3.2.2
+      ws: 7.5.10
+      xtend: 4.0.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  mri@1.2.0:
+    optional: true
+
+  ms@2.1.2: {}
+
+  muggle-string@0.4.1: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  namespace-emitter@2.0.1: {}
+
+  nan@2.20.0:
+    optional: true
+
+  nanoid@3.3.7: {}
+
+  natural-compare@1.4.0: {}
+
+  next-tick@1.1.0: {}
+
+  node-fetch-native@1.6.4:
+    optional: true
+
+  node-fetch@2.7.0:
+    dependencies:
+      whatwg-url: 5.0.0
+    optional: true
+
+  node-int64@0.4.0: {}
+
+  node-releases@2.0.18: {}
+
+  nopt@5.0.0:
+    dependencies:
+      abbrev: 1.1.1
+    optional: true
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  normalize-url@6.1.0: {}
+
+  normalize-wheel-es@1.2.0: {}
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
+  npmlog@5.0.1:
+    dependencies:
+      are-we-there-yet: 2.0.0
+      console-control-strings: 1.1.0
+      gauge: 3.0.2
+      set-blocking: 2.0.0
+    optional: true
+
+  nprogress@0.2.0: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  number-allocator@1.0.14:
+    dependencies:
+      debug: 4.3.6
+      js-sdsl: 4.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  nwsapi@2.2.12: {}
+
+  nypm@0.3.9:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.2.3
+      execa: 8.0.1
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      ufo: 1.5.4
+    optional: true
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  object-inspect@1.13.2: {}
+
+  ohash@1.1.3:
+    optional: true
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-limit@4.0.0:
+    dependencies:
+      yocto-queue: 1.1.1
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-locate@6.0.0:
+    dependencies:
+      p-limit: 4.0.0
+
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.0: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse5@6.0.1: {}
+
+  path-browserify@1.0.1: {}
+
+  path-exists@4.0.0: {}
+
+  path-exists@5.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-to-regexp@6.2.2: {}
+
+  path-type@4.0.0: {}
+
+  path-type@5.0.0:
+    optional: true
+
+  path2d@0.2.1:
+    optional: true
+
+  path@0.12.7:
+    dependencies:
+      process: 0.11.10
+      util: 0.10.4
+
+  pathe@1.1.2: {}
+
+  pdfjs-dist@4.5.136:
+    optionalDependencies:
+      canvas: 2.11.2
+      path2d: 0.2.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  perfect-debounce@1.0.0:
+    optional: true
+
+  picocolors@1.0.1: {}
+
+  picomatch@2.3.1: {}
+
+  pidtree@0.6.0: {}
+
+  pify@2.3.0: {}
+
+  pinia@2.2.1(typescript@5.5.4)(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      '@vue/devtools-api': 6.6.3
+      vue: 3.4.37(typescript@5.5.4)
+      vue-demi: 0.14.10(vue@3.4.37(typescript@5.5.4))
+    optionalDependencies:
+      typescript: 5.5.4
+
+  pinyin-pro@3.24.2: {}
+
+  pirates@4.0.6: {}
+
+  pkg-dir@4.2.0:
+    dependencies:
+      find-up: 4.1.0
+
+  pkg-types@1.1.3:
+    dependencies:
+      confbox: 0.1.7
+      mlly: 1.7.1
+      pathe: 1.1.2
+
+  plus-pro-components@0.1.14(element-plus@2.8.0(vue@3.4.37(typescript@5.5.4)))(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      '@element-plus/icons-vue': 2.3.1(vue@3.4.37(typescript@5.5.4))
+      element-plus: 2.8.0(vue@3.4.37(typescript@5.5.4))
+      lodash-es: 4.17.21
+      sortablejs: 1.15.2
+      vue: 3.4.37(typescript@5.5.4)
+
+  pngjs@5.0.0: {}
+
+  popmotion@11.0.5:
+    dependencies:
+      framesync: 6.1.2
+      hey-listen: 1.0.8
+      style-value-types: 5.1.2
+      tslib: 2.4.0
+
+  postcss-calc@10.0.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+      postcss-value-parser: 4.2.0
+
+  postcss-calc@8.2.4(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+      postcss-value-parser: 4.2.0
+
+  postcss-colormin@5.3.1(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-colormin@7.0.2(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-convert-values@5.1.3(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-convert-values@7.0.3(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-discard-comments@5.1.2(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-discard-comments@7.0.2(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-discard-duplicates@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-discard-duplicates@7.0.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-discard-empty@5.1.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-discard-empty@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-discard-overridden@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-discard-overridden@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-html@1.7.0:
+    dependencies:
+      htmlparser2: 8.0.2
+      js-tokens: 9.0.0
+      postcss: 8.4.41
+      postcss-safe-parser: 6.0.0(postcss@8.4.41)
+
+  postcss-import@15.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  postcss-import@16.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  postcss-js@4.0.1(postcss@8.4.41):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.41
+
+  postcss-load-config@4.0.2(postcss@8.4.41):
+    dependencies:
+      lilconfig: 3.1.2
+      yaml: 2.5.0
+    optionalDependencies:
+      postcss: 8.4.41
+
+  postcss-media-query-parser@0.2.3: {}
+
+  postcss-merge-longhand@5.1.7(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+      stylehacks: 5.1.1(postcss@8.4.41)
+
+  postcss-merge-longhand@7.0.3(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+      stylehacks: 7.0.3(postcss@8.4.41)
+
+  postcss-merge-rules@5.1.4(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-api: 3.0.0
+      cssnano-utils: 3.1.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-merge-rules@7.0.3(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-api: 3.0.0
+      cssnano-utils: 5.0.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-minify-font-values@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-font-values@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-gradients@5.1.1(postcss@8.4.41):
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 3.1.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-gradients@7.0.0(postcss@8.4.41):
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 5.0.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-params@5.1.4(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      cssnano-utils: 3.1.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-params@7.0.2(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      cssnano-utils: 5.0.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-selectors@5.2.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-minify-selectors@7.0.3(postcss@8.4.41):
+    dependencies:
+      cssesc: 3.0.0
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-nested@6.2.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-normalize-charset@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-normalize-charset@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-normalize-display-values@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-display-values@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-positions@5.1.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-positions@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-repeat-style@5.1.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-repeat-style@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-string@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-string@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-timing-functions@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-timing-functions@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-unicode@5.1.1(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-unicode@7.0.2(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-url@5.1.0(postcss@8.4.41):
+    dependencies:
+      normalize-url: 6.1.0
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-url@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-whitespace@5.1.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-whitespace@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-ordered-values@5.1.3(postcss@8.4.41):
+    dependencies:
+      cssnano-utils: 3.1.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-ordered-values@7.0.1(postcss@8.4.41):
+    dependencies:
+      cssnano-utils: 5.0.0(postcss@8.4.41)
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-reduce-initial@5.1.2(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-api: 3.0.0
+      postcss: 8.4.41
+
+  postcss-reduce-initial@7.0.2(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      caniuse-api: 3.0.0
+      postcss: 8.4.41
+
+  postcss-reduce-transforms@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-reduce-transforms@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+
+  postcss-resolve-nested-selector@0.1.5: {}
+
+  postcss-safe-parser@6.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-safe-parser@7.0.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-scss@4.0.9(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-selector-parser@6.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-sorting@8.0.2(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+
+  postcss-svgo@5.1.0(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+      svgo: 2.8.0
+
+  postcss-svgo@7.0.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-value-parser: 4.2.0
+      svgo: 3.3.2
+
+  postcss-unique-selectors@5.1.1(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-unique-selectors@7.0.2(postcss@8.4.41):
+    dependencies:
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.41:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
+  preact@10.23.1: {}
+
+  prelude-ls@1.2.1: {}
+
+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
+  prettier@2.8.8: {}
+
+  prettier@3.3.3: {}
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  prismjs@1.29.0: {}
+
+  process-nextick-args@2.0.1: {}
+
+  process@0.11.10: {}
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  proxy-from-env@1.1.0: {}
+
+  psl@1.9.0: {}
+
+  pump@3.0.0:
+    dependencies:
+      end-of-stream: 1.4.4
+      once: 1.4.0
+
+  punycode@2.3.1: {}
+
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
+  qs@6.13.0:
+    dependencies:
+      side-channel: 1.0.6
+
+  querystringify@2.2.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  rc9@2.1.2:
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.3
+    optional: true
+
+  react-is@17.0.2: {}
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  regenerator-runtime@0.14.1: {}
+
+  reinterval@1.1.0: {}
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  require-main-filename@2.0.0: {}
+
+  requires-port@1.0.0: {}
+
+  resolve-cwd@3.0.0:
+    dependencies:
+      resolve-from: 5.0.0
+
+  resolve-from@4.0.0: {}
+
+  resolve-from@5.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve.exports@1.1.1: {}
+
+  resolve@1.22.8:
+    dependencies:
+      is-core-module: 2.15.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  responsive-storage@2.2.0: {}
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  reusify@1.0.4: {}
+
+  rfdc@1.4.1: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  rimraf@5.0.10:
+    dependencies:
+      glob: 10.4.5
+
+  rollup-plugin-external-globals@0.10.0(rollup@4.20.0):
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.20.0)
+      estree-walker: 3.0.3
+      is-reference: 3.0.2
+      magic-string: 0.30.11
+      rollup: 4.20.0
+
+  rollup-plugin-visualizer@5.12.0(rollup@4.20.0):
+    dependencies:
+      open: 8.4.2
+      picomatch: 2.3.1
+      source-map: 0.7.4
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.20.0
+
+  rollup@4.20.0:
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.20.0
+      '@rollup/rollup-android-arm64': 4.20.0
+      '@rollup/rollup-darwin-arm64': 4.20.0
+      '@rollup/rollup-darwin-x64': 4.20.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.20.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.20.0
+      '@rollup/rollup-linux-arm64-gnu': 4.20.0
+      '@rollup/rollup-linux-arm64-musl': 4.20.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.20.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.20.0
+      '@rollup/rollup-linux-s390x-gnu': 4.20.0
+      '@rollup/rollup-linux-x64-gnu': 4.20.0
+      '@rollup/rollup-linux-x64-musl': 4.20.0
+      '@rollup/rollup-win32-arm64-msvc': 4.20.0
+      '@rollup/rollup-win32-ia32-msvc': 4.20.0
+      '@rollup/rollup-win32-x64-msvc': 4.20.0
+      fsevents: 2.3.3
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safe-buffer@5.2.1: {}
+
+  safer-buffer@2.1.2: {}
+
+  sass@1.77.8:
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.7
+      source-map-js: 1.2.0
+
+  saxes@5.0.1:
+    dependencies:
+      xmlchars: 2.2.0
+
+  scroll-into-view-if-needed@2.2.31:
+    dependencies:
+      compute-scroll-into-view: 1.0.20
+
+  scule@1.3.0:
+    optional: true
+
+  semver@6.3.1: {}
+
+  semver@7.6.3: {}
+
+  set-blocking@2.0.0: {}
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.2
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel@1.0.6:
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      object-inspect: 1.13.2
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  simple-concat@1.0.1:
+    optional: true
+
+  simple-get@3.1.1:
+    dependencies:
+      decompress-response: 4.2.1
+      once: 1.4.0
+      simple-concat: 1.0.1
+    optional: true
+
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+
+  sisteransi@1.0.5: {}
+
+  slash@3.0.0: {}
+
+  slash@5.1.0:
+    optional: true
+
+  slate-history@0.66.0(slate@0.72.8):
+    dependencies:
+      is-plain-object: 5.0.0
+      slate: 0.72.8
+
+  slate@0.72.8:
+    dependencies:
+      immer: 9.0.21
+      is-plain-object: 5.0.0
+      tiny-warning: 1.0.3
+
+  slice-ansi@4.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+
+  slice-ansi@7.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 5.0.0
+
+  snabbdom@3.6.2: {}
+
+  sortablejs@1.14.0: {}
+
+  sortablejs@1.15.2: {}
+
+  source-map-js@1.2.0: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  source-map@0.7.4: {}
+
+  sourcemap-codec@1.4.8: {}
+
+  split2@3.2.2:
+    dependencies:
+      readable-stream: 3.6.2
+
+  split2@4.2.0: {}
+
+  sprintf-js@1.0.3: {}
+
+  ssf@0.11.2:
+    dependencies:
+      frac: 1.1.2
+
+  ssr-window@3.0.0: {}
+
+  stable@0.1.8: {}
+
+  stack-utils@2.0.6:
+    dependencies:
+      escape-string-regexp: 2.0.0
+
+  std-env@3.7.0:
+    optional: true
+
+  stream-shift@1.0.3: {}
+
+  string-argv@0.3.2: {}
+
+  string-hash@1.1.3: {}
+
+  string-length@4.0.2:
+    dependencies:
+      char-regex: 1.0.2
+      strip-ansi: 6.0.1
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.3.0
+      get-east-asian-width: 1.2.0
+      strip-ansi: 7.1.0
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.0.1
+
+  strip-bom@4.0.0: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@3.0.0: {}
+
+  strip-json-comments@3.1.1: {}
+
+  strip-literal@2.1.0:
+    dependencies:
+      js-tokens: 9.0.0
+    optional: true
+
+  style-value-types@5.1.2:
+    dependencies:
+      hey-listen: 1.0.8
+      tslib: 2.4.0
+
+  stylehacks@5.1.1(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  stylehacks@7.0.3(postcss@8.4.41):
+    dependencies:
+      browserslist: 4.23.3
+      postcss: 8.4.41
+      postcss-selector-parser: 6.1.1
+
+  stylelint-config-html@1.1.0(postcss-html@1.7.0)(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      postcss-html: 1.7.0
+      stylelint: 16.8.1(typescript@5.5.4)
+
+  stylelint-config-recess-order@5.0.1(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      stylelint: 16.8.1(typescript@5.5.4)
+      stylelint-order: 6.0.4(stylelint@16.8.1(typescript@5.5.4))
+
+  stylelint-config-recommended-scss@14.1.0(postcss@8.4.41)(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      postcss-scss: 4.0.9(postcss@8.4.41)
+      stylelint: 16.8.1(typescript@5.5.4)
+      stylelint-config-recommended: 14.0.1(stylelint@16.8.1(typescript@5.5.4))
+      stylelint-scss: 6.5.0(stylelint@16.8.1(typescript@5.5.4))
+    optionalDependencies:
+      postcss: 8.4.41
+
+  stylelint-config-recommended-vue@1.5.0(postcss-html@1.7.0)(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      postcss-html: 1.7.0
+      semver: 7.6.3
+      stylelint: 16.8.1(typescript@5.5.4)
+      stylelint-config-html: 1.1.0(postcss-html@1.7.0)(stylelint@16.8.1(typescript@5.5.4))
+      stylelint-config-recommended: 14.0.1(stylelint@16.8.1(typescript@5.5.4))
+
+  stylelint-config-recommended@14.0.1(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      stylelint: 16.8.1(typescript@5.5.4)
+
+  stylelint-config-standard-scss@13.1.0(postcss@8.4.41)(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      stylelint: 16.8.1(typescript@5.5.4)
+      stylelint-config-recommended-scss: 14.1.0(postcss@8.4.41)(stylelint@16.8.1(typescript@5.5.4))
+      stylelint-config-standard: 36.0.1(stylelint@16.8.1(typescript@5.5.4))
+    optionalDependencies:
+      postcss: 8.4.41
+
+  stylelint-config-standard@36.0.1(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      stylelint: 16.8.1(typescript@5.5.4)
+      stylelint-config-recommended: 14.0.1(stylelint@16.8.1(typescript@5.5.4))
+
+  stylelint-order@6.0.4(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      postcss: 8.4.41
+      postcss-sorting: 8.0.2(postcss@8.4.41)
+      stylelint: 16.8.1(typescript@5.5.4)
+
+  stylelint-prettier@5.0.2(prettier@3.3.3)(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      prettier: 3.3.3
+      prettier-linter-helpers: 1.0.0
+      stylelint: 16.8.1(typescript@5.5.4)
+
+  stylelint-scss@6.5.0(stylelint@16.8.1(typescript@5.5.4)):
+    dependencies:
+      css-tree: 2.3.1
+      is-plain-object: 5.0.0
+      known-css-properties: 0.34.0
+      postcss-media-query-parser: 0.2.3
+      postcss-resolve-nested-selector: 0.1.5
+      postcss-selector-parser: 6.1.1
+      postcss-value-parser: 4.2.0
+      stylelint: 16.8.1(typescript@5.5.4)
+
+  stylelint@16.8.1(typescript@5.5.4):
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1)
+      '@csstools/css-tokenizer': 2.4.1
+      '@csstools/media-query-list-parser': 2.1.13(@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1))(@csstools/css-tokenizer@2.4.1)
+      '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.1)
+      '@dual-bundle/import-meta-resolve': 4.1.0
+      balanced-match: 2.0.0
+      colord: 2.9.3
+      cosmiconfig: 9.0.0(typescript@5.5.4)
+      css-functions-list: 3.2.2
+      css-tree: 2.3.1
+      debug: 4.3.6
+      fast-glob: 3.3.2
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 9.0.0
+      global-modules: 2.0.0
+      globby: 11.1.0
+      globjoin: 0.1.4
+      html-tags: 3.3.1
+      ignore: 5.3.1
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.34.0
+      mathml-tag-names: 2.1.3
+      meow: 13.2.0
+      micromatch: 4.0.7
+      normalize-path: 3.0.0
+      picocolors: 1.0.1
+      postcss: 8.4.41
+      postcss-resolve-nested-selector: 0.1.5
+      postcss-safe-parser: 7.0.0(postcss@8.4.41)
+      postcss-selector-parser: 6.1.1
+      postcss-value-parser: 4.2.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      strip-ansi: 7.1.0
+      supports-hyperlinks: 3.0.0
+      svg-tags: 1.0.0
+      table: 6.8.2
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-hyperlinks@2.3.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
+  supports-hyperlinks@3.0.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  svg-tags@1.0.0: {}
+
+  svgo@2.8.0:
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 4.3.0
+      css-tree: 1.1.3
+      csso: 4.2.0
+      picocolors: 1.0.1
+      stable: 0.1.8
+
+  svgo@3.3.2:
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 5.1.0
+      css-tree: 2.3.1
+      css-what: 6.1.0
+      csso: 5.0.5
+      picocolors: 1.0.1
+
+  swiper@11.1.9: {}
+
+  symbol-tree@3.2.4: {}
+
+  synckit@0.9.1:
+    dependencies:
+      '@pkgr/core': 0.1.1
+      tslib: 2.6.3
+
+  table@6.8.2:
+    dependencies:
+      ajv: 8.17.1
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  tailwindcss@3.4.9:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.6
+      lilconfig: 2.1.0
+      micromatch: 4.0.7
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.1
+      postcss: 8.4.41
+      postcss-import: 15.1.0(postcss@8.4.41)
+      postcss-js: 4.0.1(postcss@8.4.41)
+      postcss-load-config: 4.0.2(postcss@8.4.41)
+      postcss-nested: 6.2.0(postcss@8.4.41)
+      postcss-selector-parser: 6.1.1
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    optional: true
+
+  terminal-link@2.1.1:
+    dependencies:
+      ansi-escapes: 4.3.2
+      supports-hyperlinks: 2.3.0
+
+  test-exclude@6.0.0:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  text-extensions@2.4.0: {}
+
+  text-table@0.2.0: {}
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  throat@6.0.2: {}
+
+  through@2.3.8: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tiny-warning@1.0.3: {}
+
+  tinycolor2@1.6.0: {}
+
+  tinygradient@1.1.5:
+    dependencies:
+      '@types/tinycolor2': 1.4.6
+      tinycolor2: 1.6.0
+
+  tippy.js@6.3.7:
+    dependencies:
+      '@popperjs/core': 2.11.8
+
+  tmpl@1.0.5: {}
+
+  to-fast-properties@2.0.0: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  tough-cookie@4.1.4:
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+
+  tr46@0.0.3:
+    optional: true
+
+  tr46@2.1.0:
+    dependencies:
+      punycode: 2.3.1
+
+  ts-api-utils@1.3.0(typescript@5.5.4):
+    dependencies:
+      typescript: 5.5.4
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.3.0: {}
+
+  tslib@2.4.0: {}
+
+  tslib@2.6.3: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-detect@4.0.8: {}
+
+  type-fest@0.20.2: {}
+
+  type-fest@0.21.3: {}
+
+  type-fest@2.19.0: {}
+
+  type@2.7.3: {}
+
+  typedarray-to-buffer@3.1.5:
+    dependencies:
+      is-typedarray: 1.0.0
+
+  typedarray@0.0.6: {}
+
+  typeit@8.8.4:
+    dependencies:
+      '@types/web-animations-js': 2.2.16
+
+  typescript@5.5.4: {}
+
+  ufo@1.5.4: {}
+
+  uncrypto@0.1.3:
+    optional: true
+
+  unctx@2.3.1:
+    dependencies:
+      acorn: 8.12.1
+      estree-walker: 3.0.3
+      magic-string: 0.30.11
+      unplugin: 1.12.1
+    optional: true
+
+  undici-types@5.26.5: {}
+
+  unicorn-magic@0.1.0: {}
+
+  unimport@3.10.0(rollup@4.20.0):
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.20.0)
+      acorn: 8.12.1
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.11
+      mlly: 1.7.1
+      pathe: 1.1.2
+      pkg-types: 1.1.3
+      scule: 1.3.0
+      strip-literal: 2.1.0
+      unplugin: 1.12.1
+    transitivePeerDependencies:
+      - rollup
+    optional: true
+
+  universalify@0.2.0: {}
+
+  universalify@2.0.1: {}
+
+  unplugin@1.12.1:
+    dependencies:
+      acorn: 8.12.1
+      chokidar: 3.6.0
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.6.2
+
+  untyped@1.4.2:
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/standalone': 7.25.3
+      '@babel/types': 7.25.2
+      defu: 6.1.4
+      jiti: 1.21.6
+      mri: 1.2.0
+      scule: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  update-browserslist-db@1.1.0(browserslist@4.23.3):
+    dependencies:
+      browserslist: 4.23.3
+      escalade: 3.1.2
+      picocolors: 1.0.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  url-parse@1.5.10:
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+
+  util-deprecate@1.0.2: {}
+
+  util@0.10.4:
+    dependencies:
+      inherits: 2.0.3
+
+  uuid@8.3.2: {}
+
+  v-contextmenu@3.2.0(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  v3-infinite-loading@1.3.1: {}
+
+  v8-to-istanbul@8.1.1:
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+      convert-source-map: 1.9.0
+      source-map: 0.7.4
+
+  version-rocket@1.7.2:
+    dependencies:
+      axios: 1.7.3
+      dayjs: 1.11.12
+    transitivePeerDependencies:
+      - debug
+
+  vite-plugin-cdn-import@1.0.1(rollup@4.20.0)(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8)):
+    dependencies:
+      rollup-plugin-external-globals: 0.10.0(rollup@4.20.0)
+      vite-plugin-externals: 0.6.2(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))
+    transitivePeerDependencies:
+      - rollup
+      - vite
+
+  vite-plugin-checker@0.7.2(eslint@9.9.0(jiti@1.21.6))(optionator@0.9.4)(stylelint@16.8.1(typescript@5.5.4))(typescript@5.5.4)(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8))(vue-tsc@2.0.29(typescript@5.5.4)):
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      chokidar: 3.6.0
+      commander: 8.3.0
+      fast-glob: 3.3.2
+      fs-extra: 11.2.0
+      npm-run-path: 4.0.1
+      strip-ansi: 6.0.1
+      tiny-invariant: 1.3.3
+      vite: 5.4.0(@types/node@20.14.15)(sass@1.77.8)
+      vscode-languageclient: 7.0.0
+      vscode-languageserver: 7.0.0
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.0.8
+    optionalDependencies:
+      eslint: 9.9.0(jiti@1.21.6)
+      optionator: 0.9.4
+      stylelint: 16.8.1(typescript@5.5.4)
+      typescript: 5.5.4
+      vue-tsc: 2.0.29(typescript@5.5.4)
+
+  vite-plugin-compression@0.5.1(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8)):
+    dependencies:
+      chalk: 4.1.2
+      debug: 4.3.6
+      fs-extra: 10.1.0
+      vite: 5.4.0(@types/node@20.14.15)(sass@1.77.8)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-externals@0.6.2(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8)):
+    dependencies:
+      acorn: 8.12.1
+      es-module-lexer: 0.4.1
+      fs-extra: 10.1.0
+      magic-string: 0.25.9
+      vite: 5.4.0(@types/node@20.14.15)(sass@1.77.8)
+
+  vite-plugin-fake-server@2.1.1:
+    dependencies:
+      bundle-import: 0.0.1
+      chokidar: 3.6.0
+      fast-glob: 3.3.2
+      path-to-regexp: 6.2.2
+      picocolors: 1.0.1
+
+  vite-plugin-remove-console@2.2.0: {}
+
+  vite-plugin-router-warn@1.0.0: {}
+
+  vite-plugin-vue-inspector@5.1.3(vite@5.4.0(@types/node@20.14.15)(sass@1.77.8)):
+    dependencies:
+      '@babel/core': 7.25.2
+      '@babel/plugin-proposal-decorators': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-attributes': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2)
+      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2)
+      '@vue/compiler-dom': 3.4.37
+      kolorist: 1.8.0
+      magic-string: 0.30.11
+      vite: 5.4.0(@types/node@20.14.15)(sass@1.77.8)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-svg-loader@5.1.0(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      svgo: 3.3.2
+      vue: 3.4.37(typescript@5.5.4)
+
+  vite@5.4.0(@types/node@20.14.15)(sass@1.77.8):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.41
+      rollup: 4.20.0
+    optionalDependencies:
+      '@types/node': 20.14.15
+      fsevents: 2.3.3
+      sass: 1.77.8
+
+  vscode-jsonrpc@6.0.0: {}
+
+  vscode-languageclient@7.0.0:
+    dependencies:
+      minimatch: 3.1.2
+      semver: 7.6.3
+      vscode-languageserver-protocol: 3.16.0
+
+  vscode-languageserver-protocol@3.16.0:
+    dependencies:
+      vscode-jsonrpc: 6.0.0
+      vscode-languageserver-types: 3.16.0
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
+  vscode-languageserver-types@3.16.0: {}
+
+  vscode-languageserver@7.0.0:
+    dependencies:
+      vscode-languageserver-protocol: 3.16.0
+
+  vscode-uri@3.0.8: {}
+
+  vue-demi@0.14.10(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-eslint-parser@9.4.3(eslint@9.9.0(jiti@1.21.6)):
+    dependencies:
+      debug: 4.3.6
+      eslint: 9.9.0(jiti@1.21.6)
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.6.0
+      lodash: 4.17.21
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
+
+  vue-i18n@9.13.1(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      '@intlify/core-base': 9.13.1
+      '@intlify/shared': 9.13.1
+      '@vue/devtools-api': 6.6.3
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-json-pretty@2.4.0(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-observe-visibility@2.0.0-alpha.1(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-pdf-embed@2.1.0(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      pdfjs-dist: 4.5.136
+      vue: 3.4.37(typescript@5.5.4)
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  vue-resize@2.0.0-alpha.1(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-router@4.4.3(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      '@vue/devtools-api': 6.6.3
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-tippy@6.4.4(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      tippy.js: 6.3.7
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-tsc@2.0.29(typescript@5.5.4):
+    dependencies:
+      '@volar/typescript': 2.4.0-alpha.18
+      '@vue/language-core': 2.0.29(typescript@5.5.4)
+      semver: 7.6.3
+      typescript: 5.5.4
+
+  vue-types@5.1.3(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      is-plain-object: 5.0.0
+    optionalDependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue-virtual-scroller@2.0.0-beta.8(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      mitt: 2.1.0
+      vue: 3.4.37(typescript@5.5.4)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.37(typescript@5.5.4))
+      vue-resize: 2.0.0-alpha.1(vue@3.4.37(typescript@5.5.4))
+
+  vue-waterfall-plugin-next@2.4.3(@types/lodash-es@4.17.12)(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      animate.css: 4.1.1
+      element-plus: 2.1.4(@types/lodash-es@4.17.12)(vue@3.4.37(typescript@5.5.4))
+      vue-router: 4.4.3(vue@3.4.37(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@types/lodash-es'
+      - '@vue/composition-api'
+      - vue
+
+  vue3-danmaku@1.6.1(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.37(typescript@5.5.4)
+
+  vue3-puzzle-vcode@1.1.7: {}
+
+  vue@3.4.37(typescript@5.5.4):
+    dependencies:
+      '@vue/compiler-dom': 3.4.37
+      '@vue/compiler-sfc': 3.4.37
+      '@vue/runtime-dom': 3.4.37
+      '@vue/server-renderer': 3.4.37(vue@3.4.37(typescript@5.5.4))
+      '@vue/shared': 3.4.37
+    optionalDependencies:
+      typescript: 5.5.4
+
+  vuedraggable@4.1.0(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.4.37(typescript@5.5.4)
+
+  vxe-table@4.6.17(vue@3.4.37(typescript@5.5.4)):
+    dependencies:
+      dom-zindex: 1.0.4
+      vue: 3.4.37(typescript@5.5.4)
+      xe-utils: 3.5.30
+
+  w3c-hr-time@1.0.2:
+    dependencies:
+      browser-process-hrtime: 1.0.0
+
+  w3c-xmlserializer@2.0.0:
+    dependencies:
+      xml-name-validator: 3.0.0
+
+  walker@1.0.8:
+    dependencies:
+      makeerror: 1.0.12
+
+  wavesurfer.js@7.8.3: {}
+
+  webidl-conversions@3.0.1:
+    optional: true
+
+  webidl-conversions@5.0.0: {}
+
+  webidl-conversions@6.1.0: {}
+
+  webpack-sources@3.2.3: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  whatwg-encoding@1.0.5:
+    dependencies:
+      iconv-lite: 0.4.24
+
+  whatwg-mimetype@2.3.0: {}
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    optional: true
+
+  whatwg-url@8.7.0:
+    dependencies:
+      lodash: 4.17.21
+      tr46: 2.1.0
+      webidl-conversions: 6.1.0
+
+  which-module@2.0.1: {}
+
+  which@1.3.1:
+    dependencies:
+      isexe: 2.0.0
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  wide-align@1.1.5:
+    dependencies:
+      string-width: 4.2.3
+    optional: true
+
+  widest-line@4.0.1:
+    dependencies:
+      string-width: 5.1.2
+
+  wildcard@1.1.2: {}
+
+  wmf@1.0.2: {}
+
+  word-wrap@1.2.5: {}
+
+  word@0.3.0: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  wrap-ansi@9.0.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+
+  wrappy@1.0.2: {}
+
+  write-file-atomic@3.0.3:
+    dependencies:
+      imurmurhash: 0.1.4
+      is-typedarray: 1.0.0
+      signal-exit: 3.0.7
+      typedarray-to-buffer: 3.1.5
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
+  ws@7.5.10: {}
+
+  xe-utils@3.5.30: {}
+
+  xgplayer-subtitles@3.0.19(core-js@3.38.0):
+    dependencies:
+      core-js: 3.38.0
+      eventemitter3: 4.0.7
+
+  xgplayer@3.0.19(core-js@3.38.0):
+    dependencies:
+      core-js: 3.38.0
+      danmu.js: 1.1.13
+      delegate: 3.2.0
+      downloadjs: 1.4.7
+      eventemitter3: 4.0.7
+      xgplayer-subtitles: 3.0.19(core-js@3.38.0)
+
+  xlsx@0.18.5:
+    dependencies:
+      adler-32: 1.3.1
+      cfb: 1.2.2
+      codepage: 1.15.0
+      crc-32: 1.2.2
+      ssf: 0.11.2
+      wmf: 1.0.2
+      word: 0.3.0
+
+  xml-name-validator@3.0.0: {}
+
+  xml-name-validator@4.0.0: {}
+
+  xmlchars@2.2.0: {}
+
+  xtend@4.0.2: {}
+
+  y18n@4.0.3: {}
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yallist@4.0.0: {}
+
+  yaml-eslint-parser@1.2.3:
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      lodash: 4.17.21
+      yaml: 2.5.0
+
+  yaml@1.10.2: {}
+
+  yaml@2.5.0: {}
+
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs-parser@20.2.9: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
+  yargs@16.2.0:
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.1.2
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 20.2.9
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.1.2
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yocto-queue@0.1.0: {}
+
+  yocto-queue@1.1.1: {}
+
+  zrender@5.6.0:
+    dependencies:
+      tslib: 2.3.0
diff --git a/Yi.Pure.Vue3/postcss.config.js b/Yi.Pure.Vue3/postcss.config.js
new file mode 100644
index 00000000..86239486
--- /dev/null
+++ b/Yi.Pure.Vue3/postcss.config.js
@@ -0,0 +1,12 @@
+// @ts-check
+
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
+  }
+};
diff --git a/Yi.Pure.Vue3/src/App.vue b/Yi.Pure.Vue3/src/App.vue
new file mode 100644
index 00000000..1a8766c3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/App.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-config-provider :locale="currentLocale">
+    <router-view />
+    <ReDialog />
+  </el-config-provider>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { checkVersion } from "version-rocket";
+import { ElConfigProvider } from "element-plus";
+import { ReDialog } from "@/components/ReDialog";
+import en from "element-plus/es/locale/lang/en";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import plusEn from "plus-pro-components/es/locale/lang/en";
+import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";
+
+export default defineComponent({
+  name: "app",
+  components: {
+    [ElConfigProvider.name]: ElConfigProvider,
+    ReDialog
+  },
+  computed: {
+    currentLocale() {
+      return this.$storage.locale?.locale === "zh"
+        ? { ...zhCn, ...plusZhCn }
+        : { ...en, ...plusEn };
+    }
+  },
+  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>
diff --git a/Yi.Pure.Vue3/src/api/list.ts b/Yi.Pure.Vue3/src/api/list.ts
new file mode 100644
index 00000000..c0017843
--- /dev/null
+++ b/Yi.Pure.Vue3/src/api/list.ts
@@ -0,0 +1,14 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data?: {
+    /** 列表数据 */
+    list: Array<any>;
+  };
+};
+
+/** 卡片列表 */
+export const getCardList = (data?: object) => {
+  return http.request<Result>("post", "/get-card-list", { data });
+};
diff --git a/Yi.Pure.Vue3/src/api/mock.ts b/Yi.Pure.Vue3/src/api/mock.ts
new file mode 100644
index 00000000..549e9d09
--- /dev/null
+++ b/Yi.Pure.Vue3/src/api/mock.ts
@@ -0,0 +1,25 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data: Array<any>;
+};
+
+/** 地图数据 */
+export const mapJson = (params?: object) => {
+  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"
+      }
+    }
+  );
+};
diff --git a/Yi.Pure.Vue3/src/api/routes.ts b/Yi.Pure.Vue3/src/api/routes.ts
new file mode 100644
index 00000000..501ea3c7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/api/routes.ts
@@ -0,0 +1,10 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data: Array<any>;
+};
+
+export const getAsyncRoutes = () => {
+  return http.request<Result>("get", "/get-async-routes");
+};
diff --git a/Yi.Pure.Vue3/src/api/system.ts b/Yi.Pure.Vue3/src/api/system.ts
new file mode 100644
index 00000000..e4db2381
--- /dev/null
+++ b/Yi.Pure.Vue3/src/api/system.ts
@@ -0,0 +1,85 @@
+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;
+  };
+};
+
+/** 获取系统管理-用户管理列表 */
+export const getUserList = (data?: object) => {
+  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<ResultTable>("post", "/role", { data });
+};
+
+/** 获取系统管理-菜单管理列表 */
+export const getMenuList = (data?: object) => {
+  return http.request<Result>("post", "/menu", { data });
+};
+
+/** 获取系统管理-部门管理列表 */
+export const getDeptList = (data?: object) => {
+  return http.request<Result>("post", "/dept", { data });
+};
+
+/** 获取系统监控-在线用户列表 */
+export const getOnlineLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/online-logs", { data });
+};
+
+/** 获取系统监控-登录日志列表 */
+export const getLoginLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/login-logs", { data });
+};
+
+/** 获取系统监控-操作日志列表 */
+export const getOperationLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/operation-logs", { data });
+};
+
+/** 获取系统监控-系统日志列表 */
+export const getSystemLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/system-logs", { data });
+};
+
+/** 获取系统监控-系统日志-根据 id 查日志详情 */
+export const getSystemLogsDetail = (data?: object) => {
+  return http.request<Result>("post", "/system-logs-detail", { data });
+};
+
+/** 获取角色管理-权限-菜单权限 */
+export const getRoleMenu = (data?: object) => {
+  return http.request<Result>("post", "/role-menu", { data });
+};
+
+/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
+export const getRoleMenuIds = (data?: object) => {
+  return http.request<Result>("post", "/role-menu-ids", { data });
+};
diff --git a/Yi.Pure.Vue3/src/api/user.ts b/Yi.Pure.Vue3/src/api/user.ts
new file mode 100644
index 00000000..2404c008
--- /dev/null
+++ b/Yi.Pure.Vue3/src/api/user.ts
@@ -0,0 +1,89 @@
+import { http } from "@/utils/http";
+
+export type UserResult = {
+  success: boolean;
+  data: {
+    /** 头像 */
+    avatar: string;
+    /** 用户名 */
+    username: string;
+    /** 昵称 */
+    nickname: string;
+    /** 当前登录用户的角色 */
+    roles: Array<string>;
+    /** 按钮级别权限 */
+    permissions: Array<string>;
+    /** `token` */
+    accessToken: string;
+    /** 用于调用刷新`accessToken`的接口时所需的`token` */
+    refreshToken: string;
+    /** `accessToken`的过期时间（格式'xxxx/xx/xx xx:xx:xx'） */
+    expires: Date;
+  };
+};
+
+export type RefreshTokenResult = {
+  success: boolean;
+  data: {
+    /** `token` */
+    accessToken: string;
+    /** 用于调用刷新`accessToken`的接口时所需的`token` */
+    refreshToken: string;
+    /** `accessToken`的过期时间（格式'xxxx/xx/xx xx:xx:xx'） */
+    expires: Date;
+  };
+};
+
+export type UserInfo = {
+  /** 头像 */
+  avatar: string;
+  /** 用户名 */
+  username: string;
+  /** 昵称 */
+  nickname: string;
+  /** 邮箱 */
+  email: string;
+  /** 联系电话 */
+  phone: string;
+  /** 简介 */
+  description: string;
+};
+
+export type UserInfoResult = {
+  success: boolean;
+  data: UserInfo;
+};
+
+type ResultTable = {
+  success: boolean;
+  data?: {
+    /** 列表数据 */
+    list: Array<any>;
+    /** 总条目数 */
+    total?: number;
+    /** 每页显示条目个数 */
+    pageSize?: number;
+    /** 当前页数 */
+    currentPage?: number;
+  };
+};
+
+/** 登录 */
+export const getLogin = (data?: object) => {
+  return http.request<UserResult>("post", "/login", { data });
+};
+
+/** 刷新`token` */
+export const refreshTokenApi = (data?: object) => {
+  return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
+};
+
+/** 账户设置-个人信息 */
+export const getMine = (data?: object) => {
+  return http.request<UserInfoResult>("get", "/mine", { data });
+};
+
+/** 账户设置-个人安全日志 */
+export const getMineLogs = (data?: object) => {
+  return http.request<ResultTable>("get", "/mine-logs", { data });
+};
diff --git a/Yi.Pure.Vue3/src/assets/car.png b/Yi.Pure.Vue3/src/assets/car.png
new file mode 100644
index 00000000..233890c0
Binary files /dev/null and b/Yi.Pure.Vue3/src/assets/car.png differ
diff --git a/Yi.Pure.Vue3/src/assets/iconfont/iconfont.css b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.css
new file mode 100644
index 00000000..9a153df3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.css
@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2208059 */
+  src:
+    url("iconfont.woff2?t=1671895108120") format("woff2"),
+    url("iconfont.woff?t=1671895108120") format("woff"),
+    url("iconfont.ttf?t=1671895108120") format("truetype");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.pure-iconfont-tabs:before {
+  content: "\e63e";
+}
+
+.pure-iconfont-logo:before {
+  content: "\e620";
+}
+
+.pure-iconfont-new:before {
+  content: "\e615";
+}
diff --git a/Yi.Pure.Vue3/src/assets/iconfont/iconfont.js b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.js
new file mode 100644
index 00000000..64d8bd84
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.js
@@ -0,0 +1,69 @@
+(window._iconfont_svg_string_2208059 =
+  '<svg><symbol id="pure-iconfont-tabs" viewBox="0 0 1024 1024"><path d="M400.43383789 497.82763673c4.20227051 3.95507813 6.50939942 9.64050293 6.26220703 15.40832519 0.32958983 5.85021973-2.05993653 11.53564453-6.26220703 15.40832519-4.36706543 3.87268067-10.1348877 5.93261719-15.90270996 5.6854248h-57.3486328v193.71643067c0.16479492 6.09741211-2.38952637 11.86523438-6.92138672 15.73791504-4.53186037 4.44946289-10.62927247 6.83898926-16.8914795 6.67419433-6.26220703 0.24719239-12.4420166-2.22473145-16.89147949-6.67419436-4.36706543-4.03747559-6.7565918-9.80529786-6.67419434-15.73791501v-193.6340332H222.78491211c-5.93261719 0.24719239-11.70043946-1.89514161-15.90270997-6.01501466-4.28466797-3.95507813-6.59179689-9.64050293-6.26220701-15.40832519-0.24719239-5.76782227 2.05993653-11.28845215 6.26220702-15.07873536 4.36706543-3.95507813 10.05249023-6.01501465 15.90270996-5.76782224h163.4765625c5.19104004 0 10.21728516 2.05993653 14.17236328 5.6854248z m177.73132325 57.76062011c4.28466797 4.20227051 6.59179689 10.05249023 6.34460448 16.14990234v156.47277832c0.24719239 5.93261719-2.05993653 11.70043946-6.34460449 15.73791504-3.95507813 4.36706543-9.64050293 6.83898926-15.57312011 6.67419433-5.85021973 0.08239747-11.45324708-2.22473145-15.57312013-6.34460449-3.95507813-4.28466797-6.26220703-9.8876953-6.26220703-15.73791504-14.83154297 16.06750489-35.34851075 25.37841797-57.01904297 25.87280274-16.23229981 0.24719239-32.05261231-4.36706543-45.7305908-13.1011963-14.17236327-8.81652833-25.70800781-21.50573731-33.20617677-36.58447265-15.90270997-33.28857422-15.90270997-72.18017578 0-105.46875 7.33337403-15.16113281 18.86901856-27.85034179 33.20617677-36.58447266 13.18359375-8.6517334 28.67431641-13.26599122 44.41223145-13.10119628 21.67053223-0.08239747 42.68188475 8.07495117 58.66699218 22.82409667-0.16479492-6.01501465 2.14233398-11.86523438 6.34460448-16.14990234 8.73413086-8.40454102 22.41210938-8.40454102 31.14624024 0l-0.41198731-0.65917969z m-50.42724611 139.0045166c19.85778809-26.03759766 19.85778809-62.29248047 0-88.33007813-9.47570801-11.78283692-23.81286622-18.37463379-38.80920409-17.79785156-14.7491455-0.41198731-28.92150879 6.09741211-38.15002442 17.79785156-9.97009278 12.35961914-15.24353028 28.01513673-14.91394043 44.00024414-0.49438477 16.06750489 4.69665529 31.80541991 14.58435058 44.32983399 9.55810548 11.45324708 23.73046875 17.88024903 38.47961427 17.46826172 14.91394043 0.32958983 29.08630372-6.09741211 38.8092041-17.46826172zM778.47338867 562.26245117c14.08996583 8.81652833 25.54321289 21.34094239 33.20617676 36.25488281 8.15734864 16.31469727 12.27722169 34.44213867 11.94763184 52.734375 0.32958983 18.37463379-3.7902832 36.58447265-11.94763184 53.06396485-7.41577148 15.07873536-18.95141602 27.76794434-33.20617676 36.58447266-13.18359375 8.73413086-28.67431641 13.26599122-44.41223144 13.10119629-11.45324708 0.16479492-22.82409669-2.38952637-33.20617676-7.41577149-9.55810548-4.11987305-18.20983887-10.05249023-25.54321289-17.46826171v2.30712889c0.16479492 5.93261719-2.05993653 11.70043946-6.17980957 15.98510744-4.11987305 4.20227051-9.80529786 6.59179689-15.73791506 6.5093994-5.85021973 0.24719239-11.53564453-2.05993653-15.5731201-6.34460449-4.28466797-4.20227051-6.59179689-10.05249023-6.26220704-16.14990233V499.80517578c-0.16479492-6.01501465 2.05993653-11.86523438 6.26220705-16.14990234 8.73413086-8.48693847 22.41210938-8.48693847 31.14624023 0 4.20227051 4.28466797 6.50939942 10.05249023 6.26220703 16.14990234v76.87683106c6.59179689-8.07495117 14.83154297-14.58435059 24.22485352-19.11621094 10.21728516-5.60302734 21.58813477-8.48693847 33.20617675-8.40454102 16.23229981-0.16479492 32.13500977 4.36706543 45.81298828 13.10119629z m-12.93640137 134.30786133c10.05249023-12.4420166 15.32592773-28.26232911 14.91394043-44.32983398 0.49438477-15.98510742-4.69665529-31.55822755-14.58435059-44.00024415-9.8876953-11.04125977-23.89526367-17.38586426-38.64440917-17.38586426s-28.75671387 6.3446045-38.64440918 17.38586426c-19.85778809 26.03759766-19.85778809 62.29248047 0 88.33007813 9.55810548 11.61804201 23.89526367 18.20983887 38.8092041 17.79785156 15.07873536-0.16479492 29.16870117-7.49816895 38.15002442-19.77539062v1.97753906zM673.5814209 299.00256347c-12.77160645 0-23.07128906-10.29968262-23.07128907-23.07128905V183.5637207c-0.08239747-6.59179689 0-13.10119629 0-19.6105957V154.31262207c0-12.77160645 10.29968262-23.07128906 23.07128906-23.07128906H820.16650391c14.00756836 0 27.10876465 5.43823242 37.07885742 15.32592773 9.31091309 9.31091309 14.66674805 21.42333983 15.32592773 34.44213868 0.08239747 0.57678223 0.08239747 1.15356445 0.08239746 1.73034667v93.27392579c0 12.77160645-10.29968262 23.07128906-23.07128906 23.07128906H673.5814209z m23.07128906-46.1425781h129.69360352v-69.29626467c0-1.64794922-0.65917969-3.21350098-1.81274415-4.44946289-1.15356445-1.15356445-2.80151367-1.81274414-4.44946289-1.81274414H696.65270999v75.5584717zM396.56115722 299.90893555c-12.77160645 0-23.07128906-10.29968262-23.07128905-23.07128908V155.13659668c0-12.68920898 10.29968262-22.98889161 22.9888916-23.07128906l175.83618164-0.90637207h0.08239746c14.00756836 0 27.10876465 5.43823242 37.07885742 15.32592774 9.8876953 9.97009278 15.32592773 23.07128906 15.32592775 37.07885741v93.27392579c0 12.77160645-10.29968262 23.07128906-23.07128907 23.07128906h-205.16967775z m23.07128907-46.22497559h159.0270996v-70.20263671c0-1.64794922-0.65917969-3.21350098-1.81274413-4.44946289-1.15356445-1.15356445-2.71911623-1.81274414-4.36706543-1.81274414l-152.84729005 0.74157713v75.72326662z"  ></path><path d="M149.78076171 892.84106445c-14.25476075 0-27.60314942-5.52062989-37.65563964-15.40832519-10.05249023-9.97009278-15.57312012-23.15368653-15.57312012-37.16125488V183.72851562c0-29.00390624 23.89526367-52.56958007 53.22875978-52.56958007h139.25170897c14.25476075 0 27.60314942 5.43823242 37.65563966 15.40832519 10.05249023 9.8876953 15.57312012 23.15368653 15.57312011 37.16125489V323.30981445c0 1.64794922 0.65917969 3.21350098 1.89514162 4.44946289 1.23596192 1.15356445 2.80151367 1.81274414 4.44946288 1.81274414h525.61340332c14.25476075 0 27.60314942 5.43823242 37.65563964 15.4083252 10.05249023 9.8876953 15.57312012 23.07128906 15.57312012 37.16125488v458.12988281c0 14.08996583-5.52062989 27.27355958-15.57312012 37.16125489s-23.40087891 15.40832519-37.65563964 15.40832519H149.78076171z m6.34460451-709.11254882c-3.54309083 0-6.3446045 2.80151367-6.34460449 6.26220703v649.86877441c0 1.64794922 0.65917969 3.29589844 1.8951416 4.4494629 1.15356445 1.15356445 2.80151367 1.81274414 4.44946288 1.81274415h718.09387208c1.73034668 0 3.29589844-0.65917969 4.44946288-1.81274415 1.23596192-1.15356445 1.89514161-2.71911623 1.89514161-4.4494629V379.01049805c0-1.64794922-0.65917969-3.21350098-1.81274413-4.36706544-1.23596192-1.23596192-2.80151367-1.89514161-4.44946291-1.89514159h-525.69580077c-14.25476075 0-27.60314942-5.52062989-37.65563966-15.4083252-10.05249023-9.8876953-15.57312012-23.15368653-15.57312012-37.16125488V189.90832519c0-1.64794922-0.65917969-3.21350098-1.8951416-4.44946288-1.15356445-1.15356445-2.80151367-1.81274414-4.44946289-1.81274416H156.12536621z"  ></path></symbol><symbol id="pure-iconfont-logo" viewBox="0 0 1024 1024"><path d="M410.558481 0.10861C410.558481 211.083075 109.682285 361.860579 109.682285 633.656511c0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527C711.407525 361.751969 410.558481 210.974465 410.558481 0.10861z" fill="#386BF3" ></path><path d="M613.468671 73.664572c0 211.055922-300.876197 361.914883-300.876196 633.547901 0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527c-0.054305-271.633018-300.876197-422.491979-300.876197-633.547901z" fill="#C3D2FB" ></path><path d="M312.592475 707.212473c0-183.713414 137.635722-312.171612 226.72288-441.390078 81.701694 106.111739 172.119322 218.740063 172.119323 367.725506a309.755045 309.755045 0 0 1-291.074166 316.516003 323.114046 323.114046 0 0 1-107.768037-242.851431z" fill="#303F5B" ></path></symbol><symbol id="pure-iconfont-new" viewBox="0 0 1024 1024"><path d="M466.73632812 228.81640625l-33.31054687 255.41015625c34.36523438 20.21484375 78.31054688 42.62695313 131.22070313 62.2265625 55.1953125 20.47851563 105.1171875 32.43164063 145.54687499 39.46289063 127.44140625-161.27929688 147.39257813-224.38476563 141.59179688-215.59570313-10.45898438 15.99609375-62.05078125 20.390625-76.20117188 15.29296875-28.30078125-10.10742188-53.4375-37.52929688-65.30273437-81.29882813-14.85351563-54.66796875-43.50585938-50.53710938-94.5703125-21.35742187-58.88671875 33.48632813-121.46484375 4.39453125-148.97460938-54.140625z" fill="#FFFFFF" ></path><path d="M444.76367187 228.81640625c-3.77929688 28.828125-7.55859375 57.74414063-11.33789062 86.57226563l-17.9296875 137.37304687c-1.40625 10.45898438-2.72460938 21.00585938-4.13085937 31.46484375-0.96679688 7.3828125 4.83398438 15.46875 10.8984375 18.984375 69.78515625 40.86914063 145.63476563 71.98242188 224.12109374 91.66992188 19.16015625 4.83398438 38.49609375 8.87695313 57.91992188 12.30468749 7.20703125 1.23046875 16.34765625 0.703125 21.35742188-5.625C767.49804688 548.65039063 808.3671875 494.421875 843.34765625 436.58984375c7.91015625-13.09570313 15.55664063-26.3671875 22.1484375-40.16601563 2.4609375-5.09765625 4.74609375-10.37109375 6.85546875-15.64453125 1.31835938-3.33984375 2.37304688-7.11914063 2.28515625-10.72265625-0.43945313-12.04101563-9.4921875-22.32421875-22.06054688-22.32421875-8.4375 0-14.94140625 4.5703125-19.42382812 11.33789063-1.93359375 2.8125 3.33984375-3.42773438 1.58203125-2.109375-0.43945313 0.3515625-0.87890625 0.79101563-1.23046875 1.14257812-1.31835938 1.49414063-3.33984375 1.14257813 2.54882813-1.84570312-1.23046875 0.61523438-2.37304688 1.58203125-3.60351563 2.28515625-1.14257813 0.61523438-2.28515625 1.14257813-3.33984375 1.66992187-3.33984375 1.66992188 5.53710938-2.109375 1.93359375-0.87890625-0.61523438 0.17578125-1.14257813 0.43945313-1.7578125 0.61523438-3.07617188 1.0546875-6.24023438 1.93359375-9.40429688 2.72460937-3.33984375 0.79101563-6.76757813 1.40625-10.10742187 2.02148438-5.625 0.87890625 5.36132813-0.61523438-0.3515625 0.08789062-1.66992188 0.17578125-3.42773438 0.3515625-5.09765625 0.52734375-6.15234375 0.52734375-12.3046875 0.703125-18.45703125 0.26367188-2.28515625-0.17578125-7.03125-1.40625 1.40625 0.3515625-1.0546875-0.17578125-2.109375-0.3515625-3.1640625-0.61523438-0.703125-0.17578125-1.40625-0.3515625-2.109375-0.61523437-0.79101563-0.26367188-1.58203125-0.61523438-2.37304688-0.87890625-3.42773438-1.23046875 5.09765625 2.37304688 1.49414063 0.61523437-2.98828125-1.40625-5.88867188-2.8125-8.70117188-4.48242187-1.31835938-0.79101563-2.72460938-1.66992188-3.95507812-2.54882813l-2.63671875-1.84570312c-1.40625-1.0546875-3.69140625-3.69140625 1.0546875 0.79101562-2.37304688-2.28515625-5.09765625-4.30664063-7.47070313-6.59179687-2.98828125-2.98828125-5.44921875-6.59179688-8.52539062-9.4921875 0.17578125 0.17578125 3.33984375 4.48242188 1.23046875 1.58203125-0.61523438-0.79101563-1.23046875-1.66992188-1.7578125-2.4609375-1.0546875-1.49414063-2.109375-3.07617188-3.07617188-4.65820313-2.4609375-3.77929688-4.65820313-7.734375-6.67968749-11.77734375-0.87890625-1.7578125-1.7578125-3.60351563-2.63671875-5.44921875-0.17578125-0.43945313-0.3515625-0.79101563-0.52734375-1.23046875-0.96679688-2.19726563-0.703125-1.66992188 0.61523437 1.40625 0.08789063-0.3515625-0.96679688-2.54882813-1.0546875-2.63671875-1.7578125-4.48242188-3.25195313-9.140625-4.65820313-13.7109375-2.72460938-9.22851563-5.625-18.19335938-9.66796874-26.89453125-6.85546875-14.50195313-18.19335938-26.10351563-33.31054688-31.640625-13.18359375-4.83398438-28.38867188-3.07617188-41.484375 1.0546875-16.171875 5.09765625-30.84960938 13.44726563-45.61523438 21.4453125-2.02148438 1.0546875-3.95507813 2.109375-6.06445312 3.07617188-0.52734375 0.26367188-4.65820313 1.84570313-0.96679688 0.52734375 3.60351563-1.40625-0.43945313 0.17578125-0.96679687 0.3515625-3.95507813 1.49414063-7.99804688 2.8125-12.04101563 3.8671875-2.02148438 0.52734375-3.95507813 0.96679688-5.9765625 1.31835937-0.79101563 0.17578125-1.58203125 0.26367188-2.37304687 0.43945313-4.48242188 0.79101563 5.625-0.52734375 1.0546875-0.17578125-3.95507813 0.3515625-7.91015625 0.61523438-11.86523438 0.52734375-1.93359375 0-3.8671875-0.08789063-5.88867187-0.26367188-0.79101563-0.08789063-1.58203125-0.17578125-2.28515625-0.17578125-4.30664063-0.3515625 4.74609375 0.79101563 1.84570312 0.26367188-3.95507813-0.79101563-7.99804688-1.40625-11.86523437-2.54882813-3.515625-0.96679688-6.94335938-2.37304688-10.37109375-3.60351562-2.72460938-0.96679688 5.2734375 2.4609375 1.49414062 0.61523437-0.703125-0.3515625-1.40625-0.61523438-2.109375-0.96679687-2.109375-1.0546875-4.13085938-2.109375-6.24023437-3.25195313-3.07617188-1.7578125-6.06445313-3.69140625-8.96484375-5.71289062-0.96679688-0.703125-1.84570313-1.49414063-2.90039063-2.109375 0.26367188 0.17578125 4.30664063 3.515625 1.58203125 1.23046875-1.66992188-1.40625-3.42773438-2.8125-5.00976562-4.30664063-2.90039063-2.63671875-5.625-5.36132813-8.17382813-8.17382812-1.40625-1.49414063-2.72460938-3.07617188-4.04296875-4.65820313-0.52734375-0.61523438-0.96679688-1.40625-1.58203125-1.93359375 4.39453125 4.39453125 1.14257813 1.40625 0-0.08789062-4.921875-6.85546875-9.140625-14.0625-12.65625-21.70898438-4.921875-10.37109375-20.65429688-13.97460938-30.05859375-7.91015625-10.72265625 6.94335938-13.18359375 18.89648438-7.91015625 30.05859375 15.8203125 33.31054688 43.68164063 60.20507813 78.48632813 72.68554688 15.55664063 5.625 33.13476563 7.734375 49.5703125 5.80078125 9.58007813-1.14257813 18.984375-2.8125 28.125-6.15234375 9.66796875-3.515625 18.54492188-8.0859375 27.421875-13.0078125 6.85546875-3.77929688 14.23828125-8.52539063 21.70898437-10.8984375-0.08789063 0-5.44921875 2.19726563-2.28515625 0.96679688 0.79101563-0.3515625 1.58203125-0.61523438 2.4609375-0.96679688 1.40625-0.52734375 2.8125-1.0546875 4.30664063-1.58203125 2.90039063-0.96679688 5.88867188-1.84570313 8.96484375-2.54882813 1.40625-0.26367188 2.8125-0.43945313 4.21875-0.79101562-7.64648438 1.84570313-3.42773438 0.43945313-1.0546875 0.3515625 1.14257813-0.08789063 2.28515625-0.08789063 3.42773437 0 0.61523438 0 1.23046875 0.08789063 1.84570313 0.08789063 3.25195313 0.08789063-6.06445313-1.31835938-2.98828125-0.3515625 1.14257813 0.3515625 2.28515625 0.52734375 3.42773437 0.87890625 0.43945313 0.17578125 0.87890625 0.3515625 1.31835938 0.43945312 3.07617188 0.87890625-5.09765625-2.4609375-2.98828125-1.23046875 0.96679688 0.52734375 1.93359375 0.96679688 2.8125 1.49414063 0.52734375 0.3515625 0.96679688 0.703125 1.49414062 0.96679687 1.93359375 1.14257813-5.00976563-4.21875-2.109375-1.58203125 0.87890625 0.79101563 1.7578125 1.58203125 2.54882813 2.37304688 1.93359375 2.02148438 2.90039063 5.00976563-0.26367188-0.703125 1.49414063 2.63671875 3.42773438 5.00976563 4.83398438 7.73437499 0.79101563 1.49414063 1.40625 3.07617188 2.19726562 4.5703125-3.42773438-6.59179688-0.43945313-1.0546875 0.26367188 0.96679688 1.40625 3.95507813 2.63671875 8.0859375 3.77929687 12.12890625 5.09765625 18.10546875 12.83203125 36.12304688 23.90625 51.41601563 10.37109375 14.23828125 22.76367188 26.80664063 38.14453125 35.59570312 6.41601563 3.69140625 13.53515625 7.29492188 20.7421875 8.96484375 6.41601563 1.49414063 13.27148438 2.02148438 19.86328125 2.02148438 14.67773438 0.08789063 30.05859375-1.7578125 44.12109375-5.88867188 6.85546875-2.02148438 13.88671875-4.5703125 19.95117188-8.34960938 6.59179688-4.13085938 9.84375-8.4375 14.67773437-14.23828124-3.515625 4.21875-2.90039063 4.48242188-7.47070312 7.47070312-2.63671875 1.66992188-7.734375 3.1640625-10.98632813 2.98828125-1.84570313-0.52734375-3.69140625-0.96679688-5.53710937-1.49414063-5.88867188-0.61523438-10.37109375-3.69140625-13.359375-9.31640624-1.84570313-3.1640625-3.07617188-7.47070313-2.98828125-10.81054688 0-0.26367188 1.7578125-7.99804688 0.43945312-4.13085938-0.3515625 1.0546875-0.703125 2.109375-1.14257812 3.16406251-0.26367188 0.61523438-0.52734375 1.31835938-0.79101563 1.93359375-1.0546875 2.72460938 2.90039063-6.59179688 1.58203125-3.77929688-0.17578125 0.43945313-0.3515625 0.87890625-0.61523437 1.31835938-5.18554688 11.68945313-11.33789063 22.8515625-17.75390625 33.92578125-29.53125 51.15234375-64.59960938 99.140625-100.546875 145.81054687-0.703125 0.87890625-1.31835938 1.7578125-2.02148438 2.54882813-2.37304688 3.1640625 0 0 0.43945313-0.52734375-1.66992188 2.19726563-3.42773438 4.39453125-5.09765625 6.59179687-3.515625 4.5703125-7.11914063 9.05273438-10.63476563 13.53515625 7.11914063-1.84570313 14.23828125-3.77929688 21.35742188-5.625-36.82617188-6.50390625-73.125-15.46875-108.72070313-26.80664063-20.65429688-6.59179688-40.95703125-13.97460938-60.99609375-22.14843749-2.28515625-0.87890625-4.48242188-1.84570313-6.76757812-2.81250001-4.921875-2.02148438 3.1640625 1.40625 0.08789062 0l-3.69140625-1.58203125c-4.74609375-2.109375-9.58007813-4.21875-14.32617187-6.328125-8.61328125-3.8671875-17.13867188-7.99804688-25.6640625-12.12890624-17.49023438-8.61328125-34.62890625-17.9296875-51.41601563-27.77343751 3.60351563 6.328125 7.29492188 12.65625 10.8984375 18.98437501 3.77929688-28.828125 7.55859375-57.74414063 11.33789063-86.57226563l17.9296875-137.37304688c1.40625-10.45898438 2.72460938-21.00585938 4.13085937-31.46484374 0.703125-5.18554688-2.90039063-12.04101563-6.41601562-15.55664063-3.77929688-3.77929688-10.10742188-6.6796875-15.55664063-6.41601562-5.71289063 0.26367188-11.6015625 2.109375-15.55664062 6.41601562-4.04296875 4.65820313-5.44921875 9.4921875-6.24023438 15.64453125z" fill="#FFCB40" ></path><path d="M496.61914062 458.73828125c47.54882813 31.640625 101.07421875 54.75585938 156.70898438 67.58789063 11.16210938 2.54882813 24.34570313-3.42773438 27.0703125-15.38085938 2.54882813-11.25-3.33984375-24.2578125-15.38085938-27.0703125-13.18359375-3.07617188-26.27929688-6.6796875-39.19921874-10.8984375-6.41601563-2.109375-12.83203125-4.30664063-19.16015625-6.76757813-3.42773438-1.31835938-6.85546875-2.63671875-10.1953125-3.95507812-1.49414063-0.61523438-2.90039063-1.14257813-4.30664063-1.7578125-4.13085938-1.7578125 4.04296875 1.7578125-1.23046875-0.52734375-25.13671875-10.8984375-49.21875-24.08203125-72.0703125-39.28710938-9.58007813-6.41601563-24.69726563-2.19726563-30.05859375 7.91015625-5.88867188 11.07421875-2.37304688 23.29101563 7.82226563 30.14648438z" fill="#FFCB40" ></path><path d="M245.77929687 729.6171875v-72.50976563-115.04882812V515.515625c-13.62304688 3.69140625-27.33398438 7.3828125-40.95703124 11.07421875 11.42578125 24.16992188 22.8515625 48.42773438 34.18945312 72.59765625 18.01757813 38.23242188 36.12304688 76.55273438 54.140625 114.78515625 4.21875 8.87695313 8.34960938 17.75390625 12.56835938 26.54296875 3.95507813 8.34960938 16.171875 12.91992188 24.78515624 10.10742188 9.22851563-2.98828125 16.171875-11.25 16.17187501-21.18164063v-72.50976563V541.8828125v-26.54296875c0-11.51367188-10.10742188-22.5-21.97265626-21.97265625-11.86523438 0.52734375-21.97265625 9.66796875-21.97265624 21.97265625v214.1015625c13.62304688-3.69140625 27.33398438-7.3828125 40.95703124-11.07421875-11.42578125-24.16992188-22.8515625-48.42773438-34.18945312-72.59765625-18.01757813-38.23242188-36.12304688-76.55273438-54.140625-114.78515625-4.21875-8.87695313-8.34960938-17.75390625-12.56835938-26.54296875-3.95507813-8.34960938-16.171875-12.91992188-24.78515624-10.10742188-9.22851563 2.98828125-16.171875 11.25-16.17187501 21.18164063v214.1015625c0 11.51367188 10.10742188 22.5 21.97265626 21.97265625 11.953125-0.52734375 21.97265625-9.66796875 21.97265624-21.97265625zM501.8046875 493.63085937H400.90625c-11.86523438 0-21.97265625 10.10742188-21.97265625 21.97265626v211.55273437c0 11.86523438 10.10742188 21.97265625 21.97265625 21.97265625h100.8984375c11.51367188 0 22.5-10.10742188 21.97265625-21.97265625-0.52734375-11.86523438-9.66796875-21.97265625-21.97265625-21.97265625H400.90625l21.97265625 21.97265625v-71.27929688-114.16992187-26.10351563l-21.97265625 21.97265626h100.8984375c11.51367188 0 22.5-10.10742188 21.97265625-21.97265626-0.52734375-11.86523438-9.66796875-21.97265625-21.97265625-21.97265624z" fill="#4381FF" ></path><path d="M478.16210937 595.75976563c-25.75195313 0.17578125-51.50390625 0.43945313-77.25585937-1e-8-11.51367188-0.17578125-22.5 10.1953125-21.97265625 21.97265625 0.52734375 12.04101563 9.66796875 21.796875 21.97265625 21.97265625 25.75195313 0.43945313 51.50390625 0.17578125 77.25585938 0 11.51367188-0.08789063 22.5-10.01953125 21.97265624-21.97265625-0.52734375-11.86523438-9.58007813-22.06054688-21.97265625-21.97265625zM553.57226563 515.60351563v214.10156249c0 9.31640625 6.76757813 19.07226563 16.171875 21.18164063 9.58007813 2.19726563 19.59960938-1.49414063 24.78515625-10.10742187 18.72070313-31.20117188 37.44140625-62.40234375 56.25-93.69140626 2.63671875-4.48242188 5.36132813-8.87695313 7.99804687-13.359375h-37.96875c18.72070313 31.20117188 37.44140625 62.40234375 56.25 93.69140625 2.63671875 4.48242188 5.36132813 8.87695313 7.99804688 13.359375 4.83398438 7.99804688 15.55664063 13.09570313 24.78515624 10.10742188 9.22851563-2.98828125 16.171875-11.25 16.17187501-21.18164063v-72.50976562-115.04882813-26.54296875c0-11.51367188-10.10742188-22.5-21.97265626-21.97265625-11.86523438 0.52734375-21.97265625 9.66796875-21.97265624 21.97265625v214.10156251c13.62304688-3.69140625 27.33398438-7.3828125 40.95703124-11.07421876-18.72070313-31.20117188-37.44140625-62.40234375-56.25-93.69140624-2.63671875-4.48242188-5.36132813-8.87695313-7.99804687-13.359375-8.52539063-14.23828125-29.44335938-14.23828125-37.96875 0-18.72070313 31.20117188-37.44140625 62.40234375-56.25 93.69140625-2.63671875 4.48242188-5.36132813 8.87695313-7.99804688 13.359375 13.62304688 3.69140625 27.33398438 7.3828125 40.95703126 11.07421875v-72.50976563-115.04882812-26.54296875c0-11.51367188-10.10742188-22.5-21.97265625-21.97265625-11.86523438 0.52734375-21.97265625 9.66796875-21.97265625 21.97265625z" fill="#4381FF" ></path><path d="M225.30078125 709.49023438v-72.50976563-115.04882813-26.54296874c-13.62304688 3.69140625-27.33398438 7.3828125-40.95703125 11.07421875 11.42578125 24.08203125 22.76367188 48.1640625 34.18945313 72.33398437 18.19335938 38.40820313 36.38671875 76.81640625 54.4921875 115.22460938 4.13085938 8.7890625 8.34960938 17.66601563 12.48046875 26.45507812 3.95507813 8.34960938 16.171875 12.91992188 24.78515625 10.10742187 9.22851563-2.98828125 16.171875-11.25 16.171875-21.18164062v-72.50976563-115.04882812V495.30078125c0-11.51367188-10.10742188-22.5-21.97265625-21.97265625-11.86523438 0.52734375-21.97265625 9.66796875-21.97265625 21.97265625v214.1015625c13.62304688-3.69140625 27.33398438-7.3828125 40.95703125-11.07421875-11.42578125-24.08203125-22.76367188-48.1640625-34.18945313-72.33398438-18.19335938-38.40820313-36.38671875-76.81640625-54.4921875-115.22460937-4.13085938-8.7890625-8.34960938-17.66601563-12.48046875-26.45507813-3.95507813-8.34960938-16.171875-12.91992188-24.78515625-10.10742187-9.22851563 2.98828125-16.171875 11.25-16.171875 21.18164063v214.10156249c0 11.51367188 10.10742188 22.5 21.97265625 21.97265626 11.86523438-0.52734375 21.97265625-9.66796875 21.97265625-21.97265625zM482.29296875 473.50390625H381.04296875c-11.86523438 0-21.97265625 10.10742188-21.97265625 21.97265625v211.55273438c0 11.86523438 10.10742188 21.97265625 21.97265625 21.97265624h101.25c11.51367188 0 22.5-10.10742188 21.97265625-21.97265625-0.52734375-11.86523438-9.66796875-21.97265625-21.97265625-21.97265625H381.04296875l21.97265625 21.97265625v-71.27929687-114.16992188-26.10351562l-21.97265625 21.97265625h101.25c11.51367188 0 22.5-10.10742188 21.97265625-21.97265625-0.52734375-11.86523438-9.66796875-21.97265625-21.97265625-21.97265625z" fill="#FF642E" ></path><path d="M458.5625 575.6328125c-25.83984375 0.17578125-51.76757813 0.43945313-77.60742188 0-11.51367188-0.17578125-22.5 10.1953125-21.97265624 21.97265625 0.52734375 12.04101563 9.66796875 21.796875 21.97265625 21.97265625 25.83984375 0.43945313 51.76757813 0.17578125 77.60742187 0 11.51367188-0.08789063 22.5-10.01953125 21.97265625-21.97265625-0.52734375-11.86523438-9.58007813-21.97265625-21.97265625-21.97265625zM534.32421875 495.4765625v214.1015625c0 9.31640625 6.76757813 19.07226563 16.171875 21.18164063 9.58007813 2.19726563 19.59960938-1.49414063 24.78515625-10.10742188 18.80859375-31.2890625 37.6171875-62.49023438 56.51367188-93.77929688 2.63671875-4.39453125 5.2734375-8.7890625 7.99804687-13.18359374h-37.96875c18.80859375 31.2890625 37.6171875 62.49023438 56.51367188 93.77929687 2.63671875 4.39453125 5.2734375 8.7890625 7.99804687 13.18359375 4.83398438 7.99804688 15.55664063 13.09570313 24.78515625 10.10742188 9.22851563-2.98828125 16.171875-11.25 16.171875-21.18164063v-72.50976563-115.04882812-26.54296875c0-11.51367188-10.10742188-22.5-21.97265625-21.97265625-11.86523438 0.52734375-21.97265625 9.66796875-21.97265625 21.97265625v214.1015625c13.62304688-3.69140625 27.33398438-7.3828125 40.95703125-11.07421875-18.80859375-31.2890625-37.6171875-62.49023438-56.51367188-93.77929688-2.63671875-4.39453125-5.2734375-8.7890625-7.99804687-13.18359374-8.52539063-14.23828125-29.35546875-14.23828125-37.96875 0-18.80859375 31.2890625-37.6171875 62.49023438-56.51367188 93.77929687-2.63671875 4.39453125-5.2734375 8.7890625-7.99804687 13.18359375 13.62304688 3.69140625 27.33398438 7.3828125 40.95703125 11.07421875v-72.50976563-115.04882812-26.54296875c0-11.51367188-10.10742188-22.5-21.97265625-21.97265625-11.86523438 0.52734375-21.97265625 9.66796875-21.97265625 21.97265625z" fill="#FF642E" ></path><path d="M629.0703125 793.77734375h74.8828125" fill="#FFFFFF" ></path><path d="M629.0703125 815.75h74.97070313c11.51367188 0 22.5-10.10742188 21.97265624-21.97265625-0.52734375-11.86523438-9.66796875-21.97265625-21.97265625-21.97265625h-74.97070312c-11.51367188 0-22.5 10.10742188-21.97265625 21.97265625 0.52734375 11.86523438 9.66796875 21.97265625 21.97265625 21.97265625z" fill="#FFCB40" ></path><path d="M552.16601563 793.77734375h5.71289062" fill="#FFFFFF" ></path><path d="M552.16601563 815.75h5.71289062c2.98828125 0.08789063 5.88867188-0.52734375 8.4375-1.93359375 2.72460938-0.87890625 5.09765625-2.37304688 7.03125-4.5703125 2.109375-2.02148438 3.69140625-4.30664063 4.5703125-7.03125 1.40625-2.63671875 2.02148438-5.44921875 1.93359375-8.4375l-0.79101562-5.80078125c-1.0546875-3.69140625-2.90039063-6.94335938-5.625-9.66796875-4.30664063-3.95507813-9.58007813-6.41601563-15.55664063-6.41601563h-5.71289062c-2.98828125-0.08789063-5.88867188 0.52734375-8.4375 1.93359376-2.72460938 0.87890625-5.09765625 2.37304688-7.03125 4.5703125-2.109375 2.02148438-3.69140625 4.30664063-4.5703125 7.03125-1.40625 2.63671875-2.02148438 5.44921875-1.93359375 8.43749999l0.79101562 5.80078126c1.0546875 3.69140625 2.90039063 6.94335938 5.625 9.66796874 4.30664063 3.95507813 9.58007813 6.41601563 15.55664063 6.41601563z" fill="#FFCB40" ></path></symbol></svg>'),
+  (function (e) {
+    var t = (t = document.getElementsByTagName("script"))[t.length - 1],
+      c = t.getAttribute("data-injectcss"),
+      t = t.getAttribute("data-disable-injectsvg");
+    if (!t) {
+      var n,
+        l,
+        i,
+        o,
+        a,
+        h = function (t, c) {
+          c.parentNode.insertBefore(t, c);
+        };
+      if (c && !e.__iconfont__svg__cssinject__) {
+        e.__iconfont__svg__cssinject__ = !0;
+        try {
+          document.write(
+            "<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
+          );
+        } catch (t) {
+          console && console.log(t);
+        }
+      }
+      (n = function () {
+        var t,
+          c = document.createElement("div");
+        (c.innerHTML = e._iconfont_svg_string_2208059),
+          (c = c.getElementsByTagName("svg")[0]) &&
+            (c.setAttribute("aria-hidden", "true"),
+            (c.style.position = "absolute"),
+            (c.style.width = 0),
+            (c.style.height = 0),
+            (c.style.overflow = "hidden"),
+            (c = c),
+            (t = document.body).firstChild
+              ? h(c, t.firstChild)
+              : t.appendChild(c));
+      }),
+        document.addEventListener
+          ? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
+            ? setTimeout(n, 0)
+            : ((l = function () {
+                document.removeEventListener("DOMContentLoaded", l, !1), n();
+              }),
+              document.addEventListener("DOMContentLoaded", l, !1))
+          : document.attachEvent &&
+            ((i = n),
+            (o = e.document),
+            (a = !1),
+            v(),
+            (o.onreadystatechange = function () {
+              "complete" == o.readyState &&
+                ((o.onreadystatechange = null), d());
+            }));
+    }
+    function d() {
+      a || ((a = !0), i());
+    }
+    function v() {
+      try {
+        o.documentElement.doScroll("left");
+      } catch (t) {
+        return void setTimeout(v, 50);
+      }
+      d();
+    }
+  })(window);
diff --git a/Yi.Pure.Vue3/src/assets/iconfont/iconfont.json b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.json
new file mode 100644
index 00000000..cec48060
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.json
@@ -0,0 +1,30 @@
+{
+  "id": "2208059",
+  "name": "pure-admin",
+  "font_family": "iconfont",
+  "css_prefix_text": "pure-iconfont-",
+  "description": "pure-admin-iconfont",
+  "glyphs": [
+    {
+      "icon_id": "20594647",
+      "name": "Tabs",
+      "font_class": "tabs",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "22129506",
+      "name": "PureLogo",
+      "font_class": "logo",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "7795615",
+      "name": "New",
+      "font_class": "new",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    }
+  ]
+}
diff --git a/Yi.Pure.Vue3/src/assets/iconfont/iconfont.ttf b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.ttf
new file mode 100644
index 00000000..82efcf8f
Binary files /dev/null and b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.ttf differ
diff --git a/Yi.Pure.Vue3/src/assets/iconfont/iconfont.woff b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.woff
new file mode 100644
index 00000000..0fdaa0a4
Binary files /dev/null and b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.woff differ
diff --git a/Yi.Pure.Vue3/src/assets/iconfont/iconfont.woff2 b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.woff2
new file mode 100644
index 00000000..e957d747
Binary files /dev/null and b/Yi.Pure.Vue3/src/assets/iconfont/iconfont.woff2 differ
diff --git a/Yi.Pure.Vue3/src/assets/login/avatar.svg b/Yi.Pure.Vue3/src/assets/login/avatar.svg
new file mode 100644
index 00000000..a63d2b1a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/login/avatar.svg
@@ -0,0 +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.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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/login/bg.png b/Yi.Pure.Vue3/src/assets/login/bg.png
new file mode 100644
index 00000000..8cdd3001
Binary files /dev/null and b/Yi.Pure.Vue3/src/assets/login/bg.png differ
diff --git a/Yi.Pure.Vue3/src/assets/login/illustration.svg b/Yi.Pure.Vue3/src/assets/login/illustration.svg
new file mode 100644
index 00000000..b58ffd08
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/login/illustration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="380" viewBox="0 0 897.318 556.975"><path fill="#f2f2f2" d="m217.339 502.047.998-22.434a72.46 72.46 0 0 1 33.795-8.555c-16.231 13.27-14.203 38.85-25.207 56.696a43.58 43.58 0 0 1-31.96 20.14l-13.583 8.317a73.03 73.03 0 0 1 15.393-59.18 70.5 70.5 0 0 1 12.965-12.045c3.253 8.578 7.599 17.06 7.599 17.06"/><path fill="#cacaca" d="M796.921 36.552H164.598a1.016 1.016 0 0 1 0-2.03h632.324a1.016 1.016 0 0 1 0 2.03"/><ellipse cx="186.953" cy="11.169" fill="#3f3d56" rx="10.925" ry="11.169"/><ellipse cx="224.695" cy="11.169" fill="#3f3d56" rx="10.925" ry="11.169"/><ellipse cx="262.437" cy="11.169" fill="#3f3d56" rx="10.925" ry="11.169"/><path fill="#3f3d56" d="M774.304 2.768h-26.81a2.03 2.03 0 0 0 0 4.06h26.81a2.03 2.03 0 0 0 0-4.06m0 7.62h-26.81a2.03 2.03 0 0 0 0 4.06h26.81a2.03 2.03 0 0 0 0-4.06m0 7.61h-26.81a2.03 2.03 0 0 0 0 4.06h26.81a2.03 2.03 0 0 0 0-4.06m-117.591 98.143h-434.01a8.07 8.07 0 0 0-8.07 8.06v204.87a8.08 8.08 0 0 0 8.07 8.07h434.01a8.077 8.077 0 0 0 8.06-8.07v-204.87a8.07 8.07 0 0 0-8.06-8.06"/><path fill="#589ff8" d="M542.073 214.842a8.07 8.07 0 0 0-8.06 8.06v57.87a8.077 8.077 0 0 0 8.06 8.07h122.7v-74Z"/><path fill="#589ff8" d="M871.088 288.837h-329.01a8.076 8.076 0 0 1-8.067-8.066v-57.868a8.075 8.075 0 0 1 8.067-8.066h329.01a8.075 8.075 0 0 1 8.066 8.066v57.868a8.076 8.076 0 0 1-8.066 8.066" opacity=".5"/><circle cx="586.571" cy="255.537" r="13.089" fill="#fff"/><path fill="#fff" d="M860.894 251.734H624.38a3.898 3.898 0 1 1 0-7.796h236.514a3.898 3.898 0 1 1 0 7.796m-89.831 15.401H624.38a3.898 3.898 0 1 1 0-7.795h146.683a3.898 3.898 0 0 1 0 7.795"/><path fill="#ffb6b6" d="m151.406 545.537 11.328-.001 5.389-43.693h-16.719z"/><path fill="#2f2e41" d="M148.517 541.838h3.188l12.449-5.062 6.671 5.061h.001a14.22 14.22 0 0 1 14.217 14.217v.462l-36.526.001Z"/><path fill="#ffb6b6" d="m49.051 530.809 10.139 5.053 24.314-36.701-14.963-7.458z"/><path fill="#2f2e41" d="m48.115 526.21 2.854 1.422 13.4 1.022 3.712 7.507h.001a14.22 14.22 0 0 1 6.382 19.066l-.206.413-32.69-16.292Zm108.31-179.114-72.026 1.88 1.253 35.073s-1.253 9.395 1.252 11.9 3.758 2.505 2.506 6.89-4.491 46.273-4.491 46.273-29.562 52.27-28.31 53.522 2.506 0 1.253 3.132-2.505 1.879-1.252 3.132a46 46 0 0 1 3.131 3.757h20.416s1.142-6.263 1.142-6.889 1.252-4.384 1.252-5.01 35.67-38.418 35.67-38.418l7.515-62.631 18.163 61.378s0 53.863 1.253 55.116 1.252.626.626 3.132-3.132 1.878-1.253 3.757 2.505-1.252 1.88 1.88l-.627 3.13 24.062.27s2.506-5.28 1.253-7.159-1.178-1.366.35-4.44 2.155-3.702 1.529-4.328-.626-3.958-.626-3.958-9.031-123.183-9.031-125.062a6.25 6.25 0 0 1 .52-2.818v-2.55l-2.4-9.038Z"/><path fill="#589ff8" d="M869.68 238.348a27.638 27.638 0 1 1 27.638-27.638 27.64 27.64 0 0 1-27.638 27.638"/><path fill="#fff" d="M880.586 207.984h-8.18v-8.18a2.726 2.726 0 0 0-5.452 0v8.18h-8.179a2.726 2.726 0 1 0 0 5.452h8.18v8.18a2.726 2.726 0 0 0 5.452 0v-8.18h8.179a2.726 2.726 0 1 0 0-5.452"/><path fill="#589ff8" d="M447.883 289.212h-105.01a8.08 8.08 0 0 0-8.07 8.07v39.86h121.14v-39.86a8.077 8.077 0 0 0-8.06-8.07"/><path fill="#589ff8" d="M447.88 401.212H342.87a8.076 8.076 0 0 1-8.067-8.067v-95.867a8.075 8.075 0 0 1 8.067-8.067h105.01a8.075 8.075 0 0 1 8.066 8.067v95.867a8.076 8.076 0 0 1-8.066 8.067" opacity=".5"/><circle cx="373.808" cy="321.563" r="13.089" fill="#fff"/><path fill="#fff" d="M426.131 354.547h-61.514a3.898 3.898 0 1 1 0-7.795h61.514a3.898 3.898 0 1 1 0 7.795M394.3 369.95h-29.683a3.898 3.898 0 0 1 0-7.797H394.3a3.898 3.898 0 0 1 0 7.796"/><path fill="#589ff8" d="M340.68 429.348a27.638 27.638 0 1 1 27.638-27.638 27.64 27.64 0 0 1-27.638 27.638"/><path fill="#fff" d="M351.586 398.984h-8.18v-8.18a2.726 2.726 0 1 0-5.452 0v8.18h-8.179a2.726 2.726 0 1 0 0 5.452h8.18v8.18a2.726 2.726 0 1 0 5.452 0v-8.18h8.179a2.726 2.726 0 1 0 0-5.452"/><path fill="#589ff8" d="M327.887 228.266h-105.01a8.076 8.076 0 0 1-8.067-8.066v-95.867a8.075 8.075 0 0 1 8.067-8.067h105.01a8.075 8.075 0 0 1 8.066 8.067V220.2a8.076 8.076 0 0 1-8.066 8.066"/><circle cx="253.816" cy="156.618" r="13.089" fill="#589ff8"/><path fill="#589ff8" d="M306.139 185.602h-61.514a3.898 3.898 0 1 1 0-7.795h61.514a3.898 3.898 0 1 1 0 7.795m-31.831 15.402h-29.683a3.898 3.898 0 1 1 0-7.796h29.683a3.898 3.898 0 1 1 0 7.796"/><path fill="#589ff8" d="M327.887 228.266h-105.01a8.076 8.076 0 0 1-8.067-8.066v-95.867a8.075 8.075 0 0 1 8.067-8.067h105.01a8.075 8.075 0 0 1 8.066 8.067V220.2a8.076 8.076 0 0 1-8.066 8.066" opacity=".5"/><circle cx="253.816" cy="156.618" r="13.089" fill="#fff"/><path fill="#fff" d="M306.139 185.602h-61.514a3.898 3.898 0 1 1 0-7.795h61.514a3.898 3.898 0 1 1 0 7.795m-31.831 15.402h-29.683a3.898 3.898 0 1 1 0-7.796h29.683a3.898 3.898 0 1 1 0 7.796"/><circle cx="225.043" cy="115.951" r="21" fill="#ff6584"/><path fill="#ccc" d="M282.67 555.785a1.186 1.186 0 0 1-1.19 1.19H1.19a1.19 1.19 0 0 1 0-2.38h280.29a1.187 1.187 0 0 1 1.19 1.19"/><path fill="#ffb6b6" d="M220.555 171.576a9.77 9.77 0 0 1-5.759 12.435 9.6 9.6 0 0 1-1.635.451l-5.547 33.96-13.01-12.013 7.262-30.407a9.806 9.806 0 0 1 8.59-10.76 9.55 9.55 0 0 1 10.099 6.334"/><path fill="#3f3d56" d="M124.54 248.524s10.098-13.341 46.74-12.976l20.797-7.556 4.753-43.57 16.636 3.96-2.377 53.87-35.648 20.596-46.739 9.506Z"/><circle cx="119.175" cy="198.983" r="21.747" fill="#ffb6b6" data-name="ab6171fa-7d69-4734-b81c-8dff60f9761b"/><path fill="#3f3d56" d="M82.367 363.878a.4.4 0 0 1-.114-.016c-.401-.112-.719-.2.73-12.73l1.564-9.903-1.526-8.744-2.568-2.568 4.127-4.127 3.463-9.838-5.993-8.88-6.875-36.317a28.97 28.97 0 0 1 15.91-31.478l7.958-2.325 2.896-5.31a9.52 9.52 0 0 1 8.286-4.962l14.573-.11a9.52 9.52 0 0 1 7.617 3.716l5.084 6.609 21.082 7.161-3.495 75.322a5.233 5.233 0 0 1 .359 7.695c-.22.221-.393.401-.5.52-.356.505.31 4.275 1.134 7.475l1.056 4.902a3.013 3.013 0 0 0-.548 4.398l1.347 1.59a7.6 7.6 0 0 1-6.508 8.536c-19.267 2.622-68.958 9.384-69.059 9.384"/><path fill="#2f2e41" d="M113.612 219.665q-.14-.307-.278-.615c.036 0 .07.006.106.007Zm-16.789-41.441a6.05 6.05 0 0 1 3.792-1.64c1.406.046 2.832 1.316 2.54 2.693a22.35 22.35 0 0 1 26.896-10.085c3.495 1.233 6.922 3.7 7.725 7.318a6.6 6.6 0 0 0 .83 2.702 3.08 3.08 0 0 0 3.283.832l.034-.01a1.028 1.028 0 0 1 1.242 1.45l-.989 1.844a7.9 7.9 0 0 0 3.776-.08 1.027 1.027 0 0 1 1.09 1.598 17.9 17.9 0 0 1-14.269 7.334c-3.951-.024-7.943-1.386-11.789-.477a10.24 10.24 0 0 0-6.887 14.375c-1.182-1.292-3.466-.986-4.674.28a6.4 6.4 0 0 0-1.4 4.906 22.8 22.8 0 0 0 2.337 7.638 22.836 22.836 0 0 1-13.537-40.678"/><path fill="#ffb6b6" d="M90.84 395.068a9.77 9.77 0 0 1-2.303-13.509 9.6 9.6 0 0 1 1.092-1.298l-14.675-31.123 17.527 2.525 11.249 29.167a9.806 9.806 0 0 1-.98 13.733 9.55 9.55 0 0 1-11.91.505"/><path fill="#3f3d56" d="m86.395 378.074-23.352-52.483-.234-41.452 7.361-22.39a23.925 23.925 0 0 1 30.828-15.04l.162.058.068.158c.272.635 6.446 15.907-11.867 47.323l-3.686 21.496 12.933 49.274Z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/status/403.svg b/Yi.Pure.Vue3/src/assets/status/403.svg
new file mode 100644
index 00000000..ba3ce293
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/status/403.svg
@@ -0,0 +1 @@
+<svg width="251" height="294"><g fill="none"><path fill="#E4EBF7" d="M0 129.023v-2.084C0 58.364 55.591 2.774 124.165 2.774h2.085c68.574 0 124.165 55.59 124.165 124.165v2.084c0 68.575-55.59 124.166-124.165 124.166h-2.085C55.591 253.189 0 197.598 0 129.023"/><path fill="#FFF" d="M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65"/><path stroke="#FFF" d="m38.652 136.36 10.425 5.91m.912 6.235-12.58 10.73"/><path fill="#FFF" d="M41.536 161.28a5.636 5.636 0 1 1-11.216-1.13 5.636 5.636 0 0 1 11.216 1.13m17.618-16.019a5.677 5.677 0 1 1-11.297-1.138 5.677 5.677 0 0 1 11.297 1.138M100.36 29.516l29.66-.013a4.562 4.562 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 0 0 .005 9.126m11.344 18.238 29.659-.013a4.563 4.563 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 1 0 .005 9.126"/><path fill="#FFF" d="M114.066 29.503V29.5l15.698-.007a4.563 4.563 0 1 0 .004 9.126l-15.698.007v-.002a4.562 4.562 0 0 0-.004-9.122m71.339 108.221c-.55 5.455-5.418 9.432-10.873 8.882-5.456-.55-9.432-5.418-8.882-10.873s5.418-9.432 10.873-8.882 9.432 5.418 8.882 10.873"/><path stroke="#FFF" d="m180.17 143.772 12.572 7.129m1.099 7.519-15.171 12.94"/><path fill="#FFF" d="M185.55 171.926a6.798 6.798 0 1 1-13.528-1.363 6.798 6.798 0 0 1 13.527 1.363m18.571-16.641a6.848 6.848 0 1 1-13.627-1.375 6.848 6.848 0 0 1 13.626 1.375"/><path stroke="#FFF" d="M152.988 194.074a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 0 1 4.42 0zm72.943-75.857a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.421 0zm-8.841 34.834a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.42 0zm-39.25-43.209a2.21 2.21 0 1 1-4.422 0 2.21 2.21 0 0 1 4.421 0zm18.274-15.388a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.421 0zm6.73 88.069a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 0 1 4.42 0z"/><path stroke="#FFF" d="m215.125 155.262-1.902 20.075-10.87 5.958m-27.752-4.659-6.322 9.761H156.98l-4.484 6.449m23.378-65.566v-15.72m45.636 7.844-12.77 7.859-15.228-7.86V96.668"/><path fill="#A26EF4" d="M180.68 29.32C180.68 13.128 193.806 0 210 0c16.193 0 29.32 13.127 29.32 29.32 0 16.194-13.127 29.322-29.32 29.322s-29.32-13.128-29.32-29.321"/><path fill="#FFF" d="m221.45 41.706-21.563-.125a1.744 1.744 0 0 1-1.734-1.754l.071-12.23a1.744 1.744 0 0 1 1.754-1.734l21.562.125c.964.006 1.74.791 1.735 1.755l-.071 12.229a1.744 1.744 0 0 1-1.754 1.734"/><path fill="#FFF" d="M215.106 29.192c-.015 2.577-2.049 4.654-4.543 4.64s-4.504-2.115-4.489-4.693l.04-6.925c.016-2.577 2.05-4.654 4.543-4.64s4.504 2.116 4.49 4.693l-.04 6.925zm-4.53-14.074a6.877 6.877 0 0 0-6.916 6.837l-.043 7.368a6.877 6.877 0 0 0 13.754.08l.042-7.368a6.88 6.88 0 0 0-6.837-6.917m-43.01 53.249h-3.93a4.73 4.73 0 0 1-4.717-4.717 4.73 4.73 0 0 1 4.717-4.717h3.93a4.73 4.73 0 0 1 4.717 4.717 4.73 4.73 0 0 1-4.717 4.717"/><path fill="#5BA02E" d="M168.214 248.838a6.61 6.61 0 0 1-6.61-6.611v-66.108a6.611 6.611 0 0 1 13.221 0v66.108a6.61 6.61 0 0 1-6.61 6.61"/><path fill="#92C110" d="M176.147 248.176a6.61 6.61 0 0 1-6.61-6.61v-33.054a6.611 6.611 0 1 1 13.221 0v33.053a6.61 6.61 0 0 1-6.61 6.611"/><path fill="#F2D7AD" d="M185.994 293.89h-27.376a3.17 3.17 0 0 1-3.17-3.17v-45.887a3.17 3.17 0 0 1 3.17-3.17h27.376a3.17 3.17 0 0 1 3.17 3.17v45.886a3.17 3.17 0 0 1-3.17 3.17"/><path fill="#FFF" d="M81.972 147.673s6.377-.927 17.566-1.28c11.729-.371 17.57 1.086 17.57 1.086s3.697-3.855.968-8.424c1.278-12.077 5.982-32.827.335-48.273-1.116-1.339-3.743-1.512-7.536-.62-1.337.315-7.147-.149-7.983-.1l-15.311-.347s-3.487-.17-8.035-.508c-1.512-.113-4.227-1.683-5.458-.338-.406.443-2.425 5.669-1.97 16.077l8.635 35.642s-3.141 3.61 1.219 7.085"/><path fill="#FFC6A0" d="m75.768 73.325-.9-6.397 11.982-6.52s7.302-.118 8.038 1.205c.737 1.324-5.616.993-5.616.993s-1.836 1.388-2.615 2.5c-1.654 2.363-.986 6.471-8.318 5.986-1.708.284-2.57 2.233-2.57 2.233"/><path fill="#FFB594" d="M52.44 77.672s14.217 9.406 24.973 14.444c1.061.497-2.094 16.183-11.892 11.811-7.436-3.318-20.162-8.44-21.482-14.496-.71-3.258 2.543-7.643 8.401-11.76m89.422 2.442s-6.693 2.999-13.844 6.876c-3.894 2.11-10.137 4.704-12.33 7.988-6.224 9.314 3.536 11.22 12.947 7.503 6.71-2.651 28.999-12.127 13.227-22.367"/><path fill="#FFC6A0" d="m76.166 66.36 3.06 3.881s-2.783 2.67-6.31 5.747c-7.103 6.195-12.803 14.296-15.995 16.44-3.966 2.662-9.754 3.314-12.177-.118-3.553-5.032.464-14.628 31.422-25.95"/><path fill="#FFF" d="M64.674 85.116s-2.34 8.413-8.912 14.447c.652.548 18.586 10.51 22.144 10.056 5.238-.669 6.417-18.968 1.145-20.531-.702-.208-5.901-1.286-8.853-2.167-.87-.26-1.611-1.71-3.545-.936l-1.98-.869zm63.688.71s5.318 1.956 7.325 13.734c-.546.274-17.55 12.35-21.829 7.805-6.534-6.94-.766-17.393 4.275-18.61 4.646-1.121 5.03-1.37 10.23-2.929"/><path stroke="#E4EBF7" d="M78.18 94.656s.911 7.41-4.914 13.078M87.397 94.68s3.124 2.572 10.263 2.572c7.14 0 9.074-3.437 9.074-3.437"/><path fill="#FFC6A0" d="m117.184 68.639-6.781-6.177s-5.355-4.314-9.223-.893c-3.867 3.422 4.463 2.083 5.653 4.165s.848 1.143-2.083.446c-5.603-1.331-2.082.893 2.975 5.355 2.091 1.845 6.992.955 6.992.955z"/><path fill="#FFB594" d="m105.282 91.315-.297-10.937-15.918-.027-.53 10.45c-.026.403.17.788.515.999 2.049 1.251 9.387 5.093 15.799.424.287-.21.443-.554.431-.91"/><path fill="#5C2552" d="M107.573 74.24c.817-1.147.982-9.118 1.015-11.928a1.046 1.046 0 0 0-.965-1.055l-4.62-.365c-7.71-1.044-17.071.624-18.253 6.346-5.482 5.813-.421 13.244-.421 13.244s1.963 3.566 4.305 6.791c.756 1.041.398-3.731 3.04-5.929 5.524-4.594 15.899-7.103 15.899-7.103"/><path fill="#FFC6A0" d="M88.426 83.206s2.685 6.202 11.602 6.522c7.82.28 8.973-7.008 7.434-17.505l-.909-5.483c-6.118-2.897-15.478.54-15.478.54s-.576 2.044-.19 5.504c-2.276 2.066-1.824 5.618-1.824 5.618s-.905-1.922-1.98-2.321c-.86-.32-1.897.089-2.322 1.98-1.04 4.632 3.667 5.145 3.667 5.145"/><path stroke="#DB836E" d="m100.843 77.099 1.701-.928-1.015-4.324.674-1.406"/><path fill="#552950" d="M105.546 74.092c-.022.713-.452 1.279-.96 1.263-.51-.016-.904-.607-.882-1.32.021-.713.452-1.278.96-1.263.51.016.904.607.882 1.32m-7.954.257c-.022.713-.452 1.278-.961 1.263s-.904-.607-.882-1.32.452-1.279.961-1.263c.51.016.904.606.882 1.32"/><path stroke="#DB836E" d="M91.132 86.786s5.269 4.957 12.679 2.327"/><path fill="#DB836E" d="M99.776 81.903s-3.592.232-1.44-2.79c1.59-1.496 4.897-.46 4.897-.46s1.156 3.906-3.457 3.25"/><path stroke="#5C2552" d="M102.88 70.6s2.483.84 3.402.715m-12.399.66s2.492-1.144 4.778-1.073"/><path stroke="#DB836E" d="M86.32 77.374s.961.879 1.458 2.106c-.377.48-1.033 1.152-.236 1.809m11.795 2.43s1.911.151 2.509-.254"/><path stroke="#E4EBF7" d="m87.782 115.821 15.73-3.012m-3.347 3.012 10.04-2.008m-43.697-27.05s-1.598 8.83-6.697 14.078m68.499-12.907s3.013 4.121 4.06 11.785"/><path stroke="#DB836E" d="M64.09 84.816s-6.03 9.912-13.607 9.903"/><path fill="#FFC6A0" d="m112.366 65.909-.142 5.32s5.993 4.472 11.945 9.202c4.482 3.562 8.888 7.455 10.985 8.662 4.804 2.766 8.9 3.355 11.076 1.808 4.071-2.894 4.373-9.878-8.136-15.263-4.271-1.838-16.144-6.36-25.728-9.73"/><path stroke="#DB836E" d="M130.532 85.488s4.588 5.757 11.619 6.214"/><path stroke="#E4EBF7" d="M121.708 105.73s-.393 8.564-1.34 13.612"/><path stroke="#648BD8" d="M115.784 161.512s-3.57-1.488-2.678-7.14"/><path fill="#CBD1D1" d="M101.52 290.246s4.326 2.057 7.408 1.03c2.842-.948 4.564.673 7.132 1.186 2.57.514 6.925 1.108 11.772-1.269-.104-5.551-6.939-4.01-12.048-6.763-2.582-1.39-3.812-4.757-3.625-8.863h-9.471s-1.402 10.596-1.169 14.68"/><path fill="#2B0849" d="M101.496 290.073s2.447 1.281 6.809.658c3.081-.44 3.74.485 7.479 1.039s10.802-.07 11.91-.9c.415 1.108-.347 2.077-.347 2.077s-1.523.608-4.847.831c-2.045.137-5.843.293-7.663-.507-1.8-1.385-5.286-1.917-5.77-.243-3.947.958-7.41-.288-7.41-.288l-.16-2.667z"/><path fill="#A4AABA" d="M108.824 276.19h3.116s-.103 6.751 4.57 8.62c-4.673.624-8.62-2.32-7.686-8.62"/><path fill="#CBD1D1" d="M57.65 272.52s-2.122 7.47-4.518 12.396c-1.811 3.724-4.255 7.548 5.505 7.548 6.698 0 9.02-.483 7.479-6.648-1.541-6.164.268-13.296.268-13.296z"/><path fill="#2B0849" d="M51.54 290.04s2.111 1.178 6.682 1.178c6.128 0 8.31-1.662 8.31-1.662s.605 1.122-.624 2.18c-1 .862-3.624 1.603-7.444 1.559-4.177-.049-5.876-.57-6.786-1.177-.831-.554-.692-1.593-.138-2.078"/><path fill="#A4AABA" d="M58.533 274.438s.034 1.529-.315 2.95c-.352 1.431-1.087 3.127-1.139 4.17-.058 1.16 4.57 1.592 5.194.035.623-1.559 1.303-6.475 1.927-7.306.622-.831-4.94-2.135-5.667.15"/><path fill="#7BB2F9" d="m100.885 277.015 13.306.092s1.291-54.228 1.843-64.056 3.756-43.13.997-62.788l-12.48-.64-22.725.776s-.433 3.944-1.19 9.921c-.062.493-.677.838-.744 1.358-.075.582.42 1.347.318 1.956-2.35 14.003-6.343 32.926-8.697 46.425-.116.663-1.227 1.004-1.45 2.677-.04.3.21 1.516.112 1.785-6.836 18.643-10.89 47.584-14.2 61.551l14.528-.014s2.185-8.524 4.008-16.878c2.796-12.817 22.987-84.553 22.987-84.553l3-.517 1.037 46.1s-.223 1.228.334 2.008c.558.782-.556 1.117-.39 2.233l.39 1.784s-.446 7.14-.892 11.826c-.446 4.685-.092 38.954-.092 38.954"/><path stroke="#648BD8" d="M77.438 220.434c1.146.094 4.016-2.008 6.916-4.91m23.196 8.407s2.758-1.103 6.069-3.862m-5.16.836s2.759-1.104 6.07-3.863m-38.43 6.515s2.608-.587 6.47-3.346m4.761-69.391c-.27 3.088.297 8.478-4.315 9.073m21.814-10.818s.11 13.936-1.286 14.983c-2.207 1.655-2.975 1.934-2.975 1.934m.446-16.362s.035 12.81-1.19 24.245m-4.894 1.09s7.174-1.655 9.38-1.655m-28.639 31.444c-.316 1.55-.64 3.067-.973 4.535 0 0-1.45 1.822-1.003 3.756.446 1.934-.943 2.034-4.96 15.273-1.686 5.559-4.464 18.49-6.313 27.447-.078.38-4.018 18.06-4.093 18.423m18.714-77.445a313 313 0 0 1-.877 4.729m7.742-50.058-1.19 10.413s-1.091.148-.496 2.23c.111 1.34-2.66 15.692-5.153 30.267M57.58 272.94h13.238"/><path fill="#192064" d="M117.377 147.423s-16.955-3.087-35.7.199c.157 2.501-.002 4.128-.002 4.128s14.607-2.802 35.476-.31c.251-2.342.226-4.017.226-4.017"/><path fill="#FFF" d="m107.511 150.353.004-4.885a.807.807 0 0 0-.774-.81c-2.428-.092-5.04-.108-7.795-.014a.814.814 0 0 0-.784.81l-.003 4.88c0 .456.371.82.827.808a141 141 0 0 1 7.688.017.81.81 0 0 0 .837-.806"/><path fill="#192064" d="m106.402 149.426.002-3.06a.64.64 0 0 0-.616-.643 94 94 0 0 0-5.834-.009.647.647 0 0 0-.626.643l-.001 3.056c0 .36.291.648.651.64 1.78-.04 3.708-.041 5.762.012a.644.644 0 0 0 .662-.64"/><path stroke="#648BD8" d="M101.485 273.933h12.272m-11.105-4.858c.006 3.368.04 5.759.11 6.47m-.095-12.42c-.009 1.53-.015 2.98-.016 4.313m-.447-93.414.893 44.402s.669 1.561-.224 2.677c-.892 1.116 2.455.67.893 2.231-1.562 1.562.893 1.116 0 3.347-.592 1.48-.988 20.987-1.09 34.956"/></g></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/status/404.svg b/Yi.Pure.Vue3/src/assets/status/404.svg
new file mode 100644
index 00000000..aacb7402
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/status/404.svg
@@ -0,0 +1 @@
+<svg width="252" height="294"><g fill="none"><path fill="#E4EBF7" d="M0 127.32v-2.095C0 56.279 55.892.387 124.838.387h2.096c68.946 0 124.838 55.892 124.838 124.838v2.096c0 68.946-55.892 124.838-124.838 124.838h-2.096C55.892 252.16 0 196.267 0 127.321" mask="url(#b)" transform="translate(0 .012)"/><path fill="#FFF" d="M39.755 130.84a8.276 8.276 0 1 1-16.468-1.66 8.276 8.276 0 0 1 16.468 1.66"/><path stroke="#FFF" d="m36.975 134.297 10.482 5.943m.916 6.268-12.648 10.788"/><path fill="#FFF" d="M39.875 159.352a5.667 5.667 0 1 1-11.277-1.136 5.667 5.667 0 0 1 11.277 1.136m17.713-16.105a5.708 5.708 0 1 1-11.358-1.145 5.708 5.708 0 0 1 11.358 1.145m41.43-116.372 29.82-.014a4.587 4.587 0 1 0-.003-9.175l-29.82.013a4.587 4.587 0 1 0 .003 9.176m11.406 18.336 29.82-.013a4.588 4.588 0 0 0-.004-9.175l-29.82.013a4.587 4.587 0 1 0 .004 9.175"/><path fill="#FFF" d="M112.798 26.861v-.002l15.784-.006a4.588 4.588 0 1 0 .003 9.175l-15.783.007v-.002a4.586 4.586 0 0 0-.004-9.172m71.725 108.807c-.553 5.485-5.447 9.483-10.931 8.93-5.485-.553-9.483-5.448-8.93-10.932.552-5.485 5.447-9.483 10.932-8.93s9.483 5.447 8.93 10.932"/><path stroke="#FFF" d="m179.26 141.75 12.64 7.167m1.106 7.56-15.255 13.011"/><path fill="#FFF" d="M184.668 170.057a6.835 6.835 0 1 1-13.6-1.372 6.835 6.835 0 0 1 13.6 1.372m18.672-16.732a6.885 6.885 0 1 1-13.7-1.382 6.885 6.885 0 0 1 13.7 1.382"/><path stroke="#FFF" d="M151.931 192.324a2.222 2.222 0 1 1-4.444 0 2.222 2.222 0 0 1 4.444 0zm73.339-76.268a2.222 2.222 0 1 1-4.445 0 2.222 2.222 0 0 1 4.444 0zm-8.89 35.024a2.223 2.223 0 1 1-4.446-.001 2.223 2.223 0 0 1 4.446 0zm-39.463-43.444a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zm18.374-15.471a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zm6.767 88.546a2.223 2.223 0 1 1-4.446 0 2.223 2.223 0 0 1 4.446 0z"/><path stroke="#FFF" d="m214.404 153.302-1.912 20.184-10.928 5.99m-27.903-4.684-6.356 9.814h-11.36l-4.508 6.484m23.504-65.922v-15.804m45.883 7.886-12.84 7.901-15.31-7.902V94.39"/><path fill="#FFF" d="M166.588 65.936h-3.951a4.756 4.756 0 0 1-4.743-4.742 4.756 4.756 0 0 1 4.743-4.743h3.951a4.756 4.756 0 0 1 4.743 4.743 4.756 4.756 0 0 1-4.743 4.742"/><path fill="#1890FF" d="M174.823 30.03c0-16.281 13.198-29.48 29.48-29.48 16.28 0 29.48 13.199 29.48 29.48s-13.2 29.48-29.48 29.48c-16.282 0-29.48-13.2-29.48-29.48"/><path fill="#FFF" d="M205.952 38.387c.5.5.785 1.142.785 1.928s-.286 1.465-.785 1.964a2.9 2.9 0 0 1-2 .75c-.785 0-1.429-.285-1.929-.785-.572-.5-.82-1.143-.82-1.929s.248-1.428.82-1.928q.75-.75 1.93-.75c.785 0 1.462.25 1.999.75m4.285-19.463q2.143 1.874 2.143 5.142c0 1.712-.427 3.13-1.219 4.25-.067.096-.137.18-.218.265-.416.429-1.41 1.346-2.956 2.699a5.1 5.1 0 0 0-1.428 1.75 5.2 5.2 0 0 0-.536 2.357v.5h-4.107v-.5c0-1.357.215-2.536.714-3.5.464-.964 1.857-2.464 4.178-4.536l.43-.5c.643-.785.964-1.643.964-2.535 0-1.18-.358-2.108-1-2.785-.678-.68-1.643-1.001-2.858-1.001-1.536 0-2.642.464-3.357 1.43q-.553.75-.76 1.904a2 2 0 0 1-1.971 1.63h-.004c-1.277 0-2.257-1.183-1.98-2.43.337-1.518 1.02-2.78 2.073-3.784 1.536-1.5 3.607-2.25 6.25-2.25 2.32 0 4.214.607 5.642 1.894"/><path fill="#FFB594" d="M52.04 76.131s21.81 5.36 27.307 15.945c5.575 10.74-6.352 9.26-15.73 4.935-10.86-5.008-24.7-11.822-11.577-20.88"/><path fill="#FFC6A0" d="m90.483 67.504-.449 2.893c-.753.49-4.748-2.663-4.748-2.663l-1.645.748-1.346-5.684s6.815-4.589 8.917-5.018c2.452-.501 9.884.94 10.7 2.278 0 0 1.32.486-2.227.69-3.548.203-5.043.447-6.79 3.132s-2.412 3.624-2.412 3.624"/><path fill="#FFF" d="M128.055 111.367c-2.627-7.724-6.15-13.18-8.917-15.478-3.5-2.906-9.34-2.225-11.366-4.187-1.27-1.231-3.215-1.197-3.215-1.197s-14.98-3.158-16.828-3.479c-2.37-.41-2.124-.714-6.054-1.405-1.57-1.907-2.917-1.122-2.917-1.122l-7.11-1.383c-.853-1.472-2.423-1.023-2.423-1.023l-2.468-.897c-1.645 9.976-7.74 13.796-7.74 13.796 1.795 1.122 15.703 8.3 15.703 8.3l5.107 37.11s-3.321 5.694 1.346 9.109c0 0 19.883-3.743 34.921-.329 0 0 3.047-2.546.972-8.806.523-3.01 1.394-8.263 1.736-11.622.385.772 2.019 1.918 3.14 3.477 0 0 9.407-7.365 11.052-14.012-.832-.723-1.598-1.585-2.267-2.453-.567-.736-.358-2.056-.765-2.717-.669-1.084-1.804-1.378-1.907-1.682"/><path fill="#CBD1D1" d="M101.09 289.998s4.295 2.041 7.354 1.021c2.821-.94 4.53.668 7.08 1.178s6.874 1.1 11.686-1.26c-.103-5.51-6.889-3.98-11.96-6.713-2.563-1.38-3.784-4.722-3.598-8.799h-9.402s-1.392 10.52-1.16 14.573"/><path fill="#2B0849" d="M101.067 289.826s2.428 1.271 6.759.653c3.058-.437 3.712.481 7.423 1.031 3.712.55 10.724-.069 11.823-.894.413 1.1-.343 2.063-.343 2.063s-1.512.603-4.812.824c-2.03.136-5.8.291-7.607-.503-1.787-1.375-5.247-1.903-5.728-.241-3.918.95-7.355-.286-7.355-.286z"/><path fill="#A4AABA" d="M108.341 276.044h3.094s-.103 6.702 4.536 8.558c-4.64.618-8.558-2.303-7.63-8.558"/><path fill="#CBD1D1" d="M57.542 272.401s-2.107 7.416-4.485 12.306c-1.798 3.695-4.225 7.492 5.465 7.492 6.648 0 8.953-.48 7.423-6.599-1.53-6.12.266-13.199.266-13.199z"/><path fill="#2B0849" d="M51.476 289.793s2.097 1.169 6.633 1.169c6.083 0 8.249-1.65 8.249-1.65s.602 1.114-.619 2.165c-.993.855-3.597 1.591-7.39 1.546-4.145-.048-5.832-.566-6.736-1.168-.825-.55-.687-1.58-.137-2.062"/><path fill="#A4AABA" d="M58.419 274.304s.033 1.519-.314 2.93c-.349 1.42-1.078 3.104-1.13 4.139-.058 1.151 4.537 1.58 5.155.034.62-1.547 1.294-6.427 1.913-7.252s-4.903-2.119-5.624.15"/><path fill="#7BB2F9" d="m99.66 278.514 13.378.092s1.298-54.52 1.853-64.403c.554-9.882 3.776-43.364 1.002-63.128l-12.547-.644-22.849.78s-.434 3.966-1.195 9.976c-.063.496-.682.843-.749 1.365-.075.585.423 1.354.32 1.966-2.364 14.08-6.377 33.104-8.744 46.677-.116.666-1.234 1.009-1.458 2.691-.04.302.211 1.525.112 1.795-6.873 18.744-10.949 47.842-14.277 61.885l14.607-.014s2.197-8.57 4.03-16.97c2.811-12.886 23.111-85.01 23.111-85.01l3.016-.521 1.043 46.35s-.224 1.234.337 2.02c.56.785-.56 1.123-.392 2.244l.392 1.794s-.449 7.178-.898 11.89c-.448 4.71-.092 39.165-.092 39.165"/><path stroke="#648BD8" d="M76.085 221.626c1.153.094 4.038-2.019 6.955-4.935m23.32 8.451s2.774-1.11 6.103-3.883m-5.188.841s2.773-1.11 6.102-3.884m-38.637 6.551s2.622-.591 6.505-3.365m4.785-69.768c-.27 3.106.3 8.525-4.336 9.123m21.931-10.877s.11 14.012-1.293 15.065c-2.219 1.664-2.99 1.944-2.99 1.944m.448-16.451s.035 12.88-1.196 24.377m-4.921 1.096s7.212-1.664 9.431-1.664M74.31 205.861a212 212 0 0 1-.979 4.56s-1.458 1.832-1.009 3.776-.947 2.045-4.985 15.355c-1.696 5.59-4.49 18.591-6.348 27.597l-.231 1.12m14.931-60.462a321 321 0 0 1-.882 4.754m7.784-50.328L81.395 162.7s-1.097.15-.5 2.244c.113 1.346-2.674 15.775-5.18 30.43M56.12 274.418h13.31"/><path fill="#192064" d="M116.241 148.22s-17.047-3.104-35.893.2c.158 2.514-.003 4.15-.003 4.15s14.687-2.818 35.67-.312c.252-2.355.226-4.038.226-4.038"/><path fill="#FFF" d="m106.322 151.165.003-4.911a.81.81 0 0 0-.778-.815 110 110 0 0 0-7.836-.014.82.82 0 0 0-.789.815l-.003 4.906a.81.81 0 0 0 .831.813c2.385-.06 4.973-.064 7.73.017a.815.815 0 0 0 .842-.81"/><path fill="#192064" d="m105.207 150.233.002-3.076a.64.64 0 0 0-.619-.646 94 94 0 0 0-5.866-.01.65.65 0 0 0-.63.647v3.072a.64.64 0 0 0 .654.644 121 121 0 0 1 5.794.011c.362.01.665-.28.665-.642"/><path stroke="#648BD8" d="M100.263 275.415h12.338m-11.165-4.885c.006 3.387.042 5.79.111 6.506m-.096-12.488a916 916 0 0 0-.015 4.337m-.45-93.92.898 44.642s.673 1.57-.225 2.692c-.897 1.122 2.468.673.898 2.243s.897 1.122 0 3.365c-.596 1.489-.994 21.1-1.096 35.146"/><path fill="#FFC6A0" d="M46.876 83.427s-.516 6.045 7.223 5.552c11.2-.712 9.218-9.345 31.54-21.655-.786-2.708-2.447-4.744-2.447-4.744s-11.068 3.11-22.584 8.046c-6.766 2.9-13.395 6.352-13.732 12.801m57.584 7.63.941-5.372-8.884-11.43-5.037 5.372-1.74 7.834a.32.32 0 0 0 .108.32c.965.8 6.5 5.013 14.347 3.544a.33.33 0 0 0 .264-.268"/><path fill="#FFC6A0" d="M93.942 79.387s-4.533-2.853-2.432-6.855c1.623-3.09 4.513 1.133 4.513 1.133s.52-3.642 3.121-3.642c.52-1.04 1.561-4.162 1.561-4.162s11.445 2.601 13.526 3.121c0 5.203-2.304 19.424-7.84 19.861-8.892.703-12.449-9.456-12.449-9.456"/><path fill="#520038" d="M113.874 73.446c2.601-2.081 3.47-9.722 3.47-9.722s-2.479-.49-6.64-2.05c-4.683-2.081-12.798-4.747-17.48.976-9.668 3.223-2.05 19.823-2.05 19.823l2.713-3.021s-3.935-3.287-2.08-6.243c2.17-3.462 3.92 1.073 3.92 1.073s.637-2.387 3.581-3.342c.355-.71 1.036-2.674 1.432-3.85a1.073 1.073 0 0 1 1.263-.704c2.4.558 8.677 2.019 11.356 2.662.522.125.871.615.82 1.15z"/><path fill="#552950" d="M104.977 76.064c-.103.61-.582 1.038-1.07.956s-.801-.644-.698-1.254.582-1.038 1.07-.956.8.644.698 1.254m7.155 1.63c-.103.61-.582 1.038-1.07.956s-.8-.644-.698-1.254.582-1.038 1.07-.956.8.643.698 1.254"/><path stroke="#DB836E" d="m110.13 74.84-.896 1.61-.298 4.357h-2.228"/><path stroke="#5C2552" d="M110.846 74.481s1.79-.716 2.506.537"/><path stroke="#DB836E" d="M92.386 74.282s.477-1.114 1.113-.716c.637.398 1.274 1.433.558 1.99-.717.556.159 1.67.159 1.67"/><path stroke="#5C2552" d="M103.287 72.93s1.83 1.113 4.137.954"/><path stroke="#DB836E" d="M103.685 81.762s2.227 1.193 4.376 1.193m-3.421 1.353s.954.398 1.511.318m-11.458-3.421s2.308 7.4 10.424 7.639"/><path stroke="#E4EBF7" d="M81.45 89.384s.45 5.647-4.935 12.787M69 82.654s-.726 9.282-8.204 14.206m68.609 26.005s-5.272 7.403-9.422 10.768m-.677-26.304s.452 4.366-2.127 32.062"/><path fill="#F2D7AD" d="M150.028 151.232h-49.837a1.01 1.01 0 0 1-1.01-1.01v-31.688c0-.557.452-1.01 1.01-1.01h49.837c.558 0 1.01.453 1.01 1.01v31.688a1.01 1.01 0 0 1-1.01 1.01"/><path fill="#F4D19D" d="M150.29 151.232h-19.863v-33.707h20.784v32.786a.92.92 0 0 1-.92.92"/><path fill="#F2D7AD" d="M123.554 127.896H92.917a.518.518 0 0 1-.425-.816l6.38-9.113c.193-.277.51-.442.85-.442h31.092z"/><path fill="#CC9B6E" d="M123.689 128.447H99.25v-.519h24.169l7.183-10.26.424.298z"/><path fill="#F4D19D" d="M158.298 127.896h-18.669a2.07 2.07 0 0 1-1.659-.83l-7.156-9.541h19.965c.49 0 .95.23 1.244.622l6.69 8.92a.519.519 0 0 1-.415.83"/><path fill="#CC9B6E" d="M157.847 128.479h-19.384l-7.857-10.475.415-.31 7.7 10.266h19.126zm-27.293 22.206-.032-8.177.519-.002.032 8.177z"/><path fill="#CC9B6E" d="m130.511 139.783-.08-21.414.519-.002.08 21.414zm-18.635 1.149-.498-.143 1.479-5.167.498.143zm-3.439.128-2.679-2.935 2.665-3.434.41.318-2.397 3.089 2.384 2.612zm8.17 0-.383-.35 2.383-2.612-2.397-3.089.41-.318 2.665 3.434z"/><path fill="#FFC6A0" d="m154.316 131.892-3.114-1.96.038 3.514-1.043.092c-1.682.115-3.634.23-4.789.23-1.902 0-2.693 2.258 2.23 2.648l-2.645-.596s-2.168 1.317.504 2.3c0 0-1.58 1.217.561 2.58-.584 3.504 5.247 4.058 7.122 3.59 1.876-.47 4.233-2.359 4.487-5.16.28-3.085-.89-5.432-3.35-7.238"/><path stroke="#DB836E" d="M153.686 133.577s-6.522.47-8.36.372c-1.836-.098-1.904 2.19 2.359 2.264 3.739.15 5.451-.044 5.451-.044"/><path stroke="#DB836E" d="M145.16 135.877c-1.85 1.346.561 2.355.561 2.355s3.478.898 6.73.617"/><path stroke="#DB836E" d="M151.89 141.71s-6.28.111-6.73-2.132c-.223-1.346.45-1.402.45-1.402m.504 2.692s-1.103 3.16 5.44 3.533m-.352-14.469v3.477M52.838 89.286c3.533-.337 8.423-1.248 13.582-7.754"/><path fill="#5BA02E" d="M168.567 248.318a6.647 6.647 0 0 1-6.647-6.647v-66.466a6.647 6.647 0 1 1 13.294 0v66.466a6.647 6.647 0 0 1-6.647 6.647"/><path fill="#92C110" d="M176.543 247.653a6.647 6.647 0 0 1-6.646-6.647v-33.232a6.647 6.647 0 1 1 13.293 0v33.232a6.647 6.647 0 0 1-6.647 6.647"/><path fill="#F2D7AD" d="M186.443 293.613H158.92a3.187 3.187 0 0 1-3.187-3.187v-46.134a3.187 3.187 0 0 1 3.187-3.187h27.524a3.187 3.187 0 0 1 3.187 3.187v46.134a3.187 3.187 0 0 1-3.187 3.187"/><path stroke="#E4EBF7" d="M88.979 89.48s7.776 5.384 16.6 2.842"/></g></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/status/500.svg b/Yi.Pure.Vue3/src/assets/status/500.svg
new file mode 100644
index 00000000..ea23a378
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/status/500.svg
@@ -0,0 +1 @@
+<svg width="254" height="294"><g fill="none"><path fill="#E4EBF7" d="M0 128.134v-2.11C0 56.608 56.273.334 125.69.334h2.11c69.416 0 125.69 56.274 125.69 125.69v2.11c0 69.417-56.274 125.69-125.69 125.69h-2.11C56.273 253.824 0 197.551 0 128.134" mask="url(#b)" transform="translate(0 .067)"/><path fill="#FFF" d="M39.989 132.108a8.332 8.332 0 1 1-16.581-1.671 8.332 8.332 0 0 1 16.58 1.671"/><path stroke="#FFF" d="m37.19 135.59 10.553 5.983m.922 6.311-12.734 10.861"/><path fill="#FFF" d="M40.11 160.816a5.706 5.706 0 1 1-11.354-1.145 5.706 5.706 0 0 1 11.354 1.145M57.943 144.6a5.747 5.747 0 1 1-11.436-1.152 5.747 5.747 0 0 1 11.436 1.153M99.656 27.434l30.024-.013a4.619 4.619 0 1 0-.004-9.238l-30.024.013a4.62 4.62 0 0 0 .004 9.238m11.484 18.462 30.023-.013a4.62 4.62 0 1 0-.004-9.238l-30.024.013a4.619 4.619 0 1 0 .004 9.238"/><path fill="#FFF" d="M113.53 27.421v-.002l15.89-.007a4.619 4.619 0 1 0 .005 9.238l-15.892.007v-.002a4.618 4.618 0 0 0-.004-9.234m36.638 42.67h-3.979a4.79 4.79 0 0 1-4.774-4.775 4.79 4.79 0 0 1 4.774-4.774h3.979a4.79 4.79 0 0 1 4.775 4.774 4.79 4.79 0 0 1-4.775 4.775"/><path fill="#FF603B" d="M171.687 30.234c0-16.392 13.289-29.68 29.681-29.68s29.68 13.288 29.68 29.68c0 16.393-13.288 29.681-29.68 29.681s-29.68-13.288-29.68-29.68"/><path fill="#FFF" d="m203.557 19.435-.676 15.035a1.514 1.514 0 0 1-3.026 0l-.675-15.035a2.19 2.19 0 1 1 4.377 0m-.264 19.378q.77.715.77 1.87c0 1.155-.257 1.393-.77 1.907-.55.476-1.21.733-1.943.733a2.55 2.55 0 0 1-1.87-.77c-.55-.514-.806-1.136-.806-1.87 0-.77.256-1.393.806-1.87.513-.513 1.137-.733 1.87-.733.77 0 1.43.22 1.943.733"/><path fill="#FFB594" d="M119.3 133.275c4.426-.598 3.612-1.204 4.079-4.778.675-5.18-3.108-16.935-8.262-25.118-1.088-10.72-12.598-11.24-12.598-11.24s4.312 4.895 4.196 16.199c1.398 5.243.804 14.45.804 14.45s5.255 11.369 11.78 10.487"/><path fill="#FFF" d="M100.944 91.61s1.463-.583 3.211.582c8.08 1.398 10.368 6.706 11.3 11.368 1.864 1.282 1.864 2.33 1.864 3.496.365.777 1.515 3.03 1.515 3.03s-7.225 1.748-10.954 6.758c-1.399-6.41-6.936-25.235-6.936-25.235"/><path fill="#FFB594" d="m94.008 90.5 1.019-5.815-9.23-11.874-5.233 5.581-2.593 9.863s8.39 5.128 16.037 2.246"/><path fill="#FFC6A0" d="M82.931 78.216s-4.557-2.868-2.445-6.892c1.632-3.107 4.537 1.139 4.537 1.139s.524-3.662 3.139-3.662c.523-1.046 1.569-4.184 1.569-4.184s11.507 2.615 13.6 3.138c-.001 5.23-2.317 19.529-7.884 19.969-8.94.706-12.516-9.508-12.516-9.508"/><path fill="#520038" d="M102.971 72.243c2.616-2.093 3.489-9.775 3.489-9.775s-2.492-.492-6.676-2.062c-4.708-2.092-12.867-4.771-17.575.982-9.54 4.41-2.062 19.93-2.062 19.93l2.729-3.037s-3.956-3.304-2.092-6.277c2.183-3.48 3.943 1.08 3.943 1.08s.64-2.4 3.6-3.36c.356-.714 1.04-2.69 1.44-3.872a1.08 1.08 0 0 1 1.27-.707c2.41.56 8.723 2.03 11.417 2.676.524.126.876.619.825 1.156z"/><path fill="#552950" d="M101.22 76.514c-.104.613-.585 1.044-1.076.96-.49-.082-.805-.646-.702-1.26.104-.613.585-1.044 1.076-.961s.805.647.702 1.26m-6.96-1.439c-.104.613-.585 1.044-1.076.96-.49-.082-.805-.646-.702-1.26.104-.613.585-1.044 1.076-.96.491.082.805.646.702 1.26"/><path stroke="#DB836E" d="m99.206 73.644-.9 1.62-.3 4.38h-2.24"/><path stroke="#5C2552" d="M99.926 73.284s1.8-.72 2.52.54"/><path stroke="#DB836E" d="M81.367 73.084s.48-1.12 1.12-.72 1.28 1.44.56 2 .16 1.68.16 1.68"/><path stroke="#5C2552" d="M92.326 71.724s1.84 1.12 4.16.96"/><path stroke="#DB836E" d="M92.726 80.604s2.24 1.2 4.4 1.2m-3.44 1.36s.96.4 1.52.32m-11.519-3.44s1.786 6.547 9.262 7.954"/><path stroke="#E4EBF7" d="M95.548 91.663s-1.068 2.821-8.298 2.105-10.29-5.044-10.29-5.044"/><path fill="#FFF" d="M78.126 87.478s6.526 4.972 16.47 2.486c0 0 9.577 1.02 11.536 5.322 5.36 11.77.543 36.835 0 39.962 3.496 4.055-.466 8.483-.466 8.483-15.624-3.548-35.81-.6-35.81-.6-4.849-3.546-1.223-9.044-1.223-9.044L62.38 110.32c-2.485-15.227.833-19.803 3.549-20.743 3.03-1.049 8.04-1.282 8.04-1.282.496-.058 1.08-.076 1.37-.233 2.36-1.282 2.787-.583 2.787-.583"/><path fill="#FFC6A0" d="M65.828 89.81s-6.875.465-7.59 8.156c-.466 8.857 3.03 10.954 3.03 10.954s6.075 22.102 16.796 22.957c8.39-2.176 4.758-6.702 4.661-11.42-.233-11.304-7.108-16.897-7.108-16.897s-4.212-13.75-9.789-13.75"/><path fill="#FFC6A0" d="M71.716 124.225s.855 11.264 9.828 6.486c4.765-2.536 7.581-13.828 9.789-22.568 1.456-5.768 2.58-12.197 2.58-12.197l-4.973-1.709s-2.408 5.516-7.769 12.275c-4.335 5.467-9.144 11.11-9.455 17.713"/><path stroke="#E4EBF7" d="M108.463 105.191s1.747 2.724-2.331 30.535c2.376 2.216 1.053 6.012-.233 7.51"/><path fill="#FFC6A0" d="M123.262 131.527s-.427 2.732-11.77 1.981c-15.187-1.006-25.326-3.25-25.326-3.25l.933-5.8s.723.215 9.71-.068c11.887-.373 18.714-6.07 24.964-1.022 4.039 3.263 1.489 8.16 1.489 8.16"/><path fill="#FFF" d="M70.24 90.974s-5.593-4.739-11.054 2.68c-3.318 7.223.517 15.284 2.664 19.578-.31 3.729 2.33 4.311 2.33 4.311s.108.895 1.516 2.68c4.078-7.03 6.72-9.166 13.711-12.546-.328-.656-1.877-3.265-1.825-3.767.175-1.69-1.282-2.623-1.282-2.623s-.286-.156-1.165-2.738c-.788-2.313-2.036-5.177-4.895-7.575"/><path fill="#CBD1D1" d="M90.232 288.027s4.855 2.308 8.313 1.155c3.188-1.063 5.12.755 8.002 1.331 2.881.577 7.769 1.243 13.207-1.424-.117-6.228-7.786-4.499-13.518-7.588-2.895-1.56-4.276-5.336-4.066-9.944H91.544s-1.573 11.89-1.312 16.47"/><path fill="#2B0849" d="M90.207 287.833s2.745 1.437 7.639.738c3.456-.494 3.223.66 7.418 1.282 4.195.621 13.092-.194 14.334-1.126.466 1.242-.388 2.33-.388 2.33s-1.709.682-5.438.932c-2.295.154-8.098.276-10.14-.621-2.02-1.554-4.894-1.515-6.06-.234-4.427 1.075-7.184-.31-7.184-.31z"/><path fill="#A4AABA" d="M98.429 272.257h3.496s-.117 7.574 5.127 9.671c-5.244.7-9.672-2.602-8.623-9.671"/><path fill="#CBD1D1" d="M44.425 272.046s-2.208 7.774-4.702 12.899c-1.884 3.874-4.428 7.854 5.729 7.854 6.97 0 9.385-.503 7.782-6.917-1.604-6.415.279-13.836.279-13.836z"/><path fill="#2B0849" d="M38.066 290.277s2.198 1.225 6.954 1.225c6.376 0 8.646-1.73 8.646-1.73s.63 1.168-.649 2.27c-1.04.897-3.77 1.668-7.745 1.621-4.347-.05-6.115-.593-7.062-1.224-.864-.577-.72-1.657-.144-2.162"/><path fill="#A4AABA" d="M45.344 274.041s.035 1.592-.329 3.07c-.365 1.49-1.13 3.255-1.184 4.34-.061 1.206 4.755 1.657 5.403.036.65-1.622 1.357-6.737 2.006-7.602s-5.14-2.222-5.896.156"/><path fill="#7BB2F9" d="m89.476 277.57 13.899.095s1.349-56.643 1.925-66.909 3.923-45.052 1.042-65.585l-13.037-.669-23.737.81s-.452 4.12-1.243 10.365c-.065.515-.708.874-.777 1.417-.078.608.439 1.407.332 2.044-2.455 14.627-5.797 32.736-8.256 46.837-.121.693-1.282 1.048-1.515 2.796-.042.314.22 1.584.116 1.865-7.14 19.473-12.202 52.601-15.66 67.19l15.176-.015s2.282-10.145 4.185-18.871c2.922-13.389 24.012-88.32 24.012-88.32l3.133-.954-.158 48.568s-.233 1.282.35 2.098-.581 1.167-.408 2.331l.408 1.864s-.466 7.458-.932 12.352c-.467 4.895 1.145 40.69 1.145 40.69"/><path stroke="#648BD8" d="M64.57 218.881c1.197.099 4.195-2.097 7.225-5.127m24.229 8.78s2.881-1.152 6.34-4.034m-5.391.873s2.882-1.153 6.34-4.034m-40.141 6.805s2.724-.614 6.759-3.496m4.972-72.482c-.281 3.226.31 8.856-4.506 9.478m22.785-11.3s.115 14.557-1.344 15.65c-2.305 1.73-3.107 2.02-3.107 2.02m.466-17.091s.269 13.144-1.01 25.088m-4.662.699s6.81-1.051 9.116-1.051M46.026 270.045l-.892 4.538m1.803-11.294-.815 4.157m16.603-64.943c-.33 1.618-.102 1.904-.449 3.438 0 0-2.756 1.903-2.29 3.923s-.31 3.424-4.505 17.252c-1.762 5.807-4.233 18.922-6.165 28.278-.03.144-.521 2.646-1.14 5.8m15.982-67.058c-.295 1.658-.6 3.31-.917 4.938m8.089-52.287-1.244 10.877s-1.14.155-.519 2.33c.117 1.399-2.778 16.39-5.382 31.615m-19.943 82.118H58.07"/><path fill="#192064" d="M106.18 142.117c-3.028-.489-18.825-2.744-36.219.2a.625.625 0 0 0-.518.644c.063 1.307.044 2.343.015 2.995a.617.617 0 0 0 .716.636c3.303-.534 17.037-2.412 35.664-.266.347.04.66-.214.692-.56a41 41 0 0 0 .17-3.029.616.616 0 0 0-.52-.62"/><path fill="#FFF" d="m96.398 145.264.003-5.102a.843.843 0 0 0-.809-.847 114 114 0 0 0-8.141-.014.85.85 0 0 0-.82.847l-.003 5.097c0 .476.388.857.864.845 2.478-.064 5.166-.067 8.03.017a.85.85 0 0 0 .876-.843"/><path fill="#192064" d="m95.239 144.296.002-3.195a.667.667 0 0 0-.643-.672 99 99 0 0 0-6.094-.01.675.675 0 0 0-.654.672l-.002 3.192c0 .376.305.677.68.669 1.859-.042 3.874-.043 6.02.012.376.01.69-.291.691-.668"/><path stroke="#648BD8" d="M90.102 273.522h12.819m-11.705-3.761c.006 3.519-.072 5.55 0 6.292m-.293-12.579c-.009 1.599-.016 2.558-.016 4.505m-.467-97.575.932 46.38s.7 1.631-.233 2.796c-.932 1.166 2.564.7.932 2.33-1.63 1.633.933 1.166 0 3.497-.618 1.546-1.031 21.921-1.138 36.513"/><path stroke="#E4EBF7" d="m73.736 98.665 2.214 4.312s2.098.816 1.865 2.68l.816 2.214m-14.334 8.74c.233-.932 2.176-7.147 12.585-10.488m.716-16.081s7.691 6.137 16.547 2.72"/><path fill="#FFC6A0" d="M91.974 86.954s5.476-.816 7.574-4.545c1.297-.345.72 2.212-.33 3.671-.7.971-1.01 1.554-1.01 1.554s.194.31.155.816c-.053.697-.175.653-.272 1.048-.081.335.108.657 0 1.049-.046.17-.198.5-.382.878-.12.249-.072.687-.2.948-.231.469-1.562 1.87-2.622 2.855-3.826 3.554-5.018 1.644-6.001-.408-.894-1.865-.661-5.127-.874-6.875-.35-2.914-2.622-3.03-1.923-4.429.343-.685 2.87.69 3.263 1.748.757 2.04 2.952 1.807 2.622 1.69"/><path stroke="#DB836E" d="M99.8 82.429c-.465.077-.35.272-.97 1.243-.622.971-4.817 2.932-6.39 3.224-2.589.48-2.278-1.56-4.254-2.855-1.69-1.107-3.562-.638-1.398 1.398.99.932.932 1.107 1.398 3.205.335 1.506-.64 3.67.7 5.593"/><path stroke="#E59788" d="M79.543 108.673c-2.1 2.926-4.266 6.175-5.557 8.762"/><path fill="#FFC6A0" d="M87.72 124.768s-2.098-1.942-5.127-2.719-3.574-.155-5.516.078-3.885-.932-3.652.7c.233 1.63 5.05 1.01 5.206 2.097.155 1.087-6.37 2.796-8.313 2.175-.777.777.466 1.864 2.02 2.175.233 1.554 2.253 1.554 2.253 1.554s.699 1.01 2.641 1.088c2.486 1.32 8.934-.7 10.954-1.554s-.466-5.594-.466-5.594"/><path stroke="#E59788" d="M73.425 122.826s.66 1.127 3.167 1.418c2.315.27 2.563.583 2.563.583s-2.545 2.894-9.07 2.272m2.331 2.175s3.826.097 4.933-.718m-2.369 2.194s1.961.136 3.36-.505m-1.108 1.671s1.748.019 2.914-.505m-6.818-9.09s-.595-1.032 1.262-.427c1.671.544 2.833.055 5.128.155 1.389.061 3.067-.297 3.982.15 1.606.784 3.632 2.181 3.632 2.181s10.526 1.204 19.033-1.127m-27.501-15.149s-8.39 2.758-13.168 12.12"/><path stroke="#E4EBF7" d="M109.278 112.533s3.38-3.613 7.575-4.662"/><path stroke="#E59788" d="M107.375 123.006s9.697-2.745 11.445-.88"/><path stroke="#BFCDDD" d="m194.605 83.656 3.971-3.886m-11.41 11.163 3.736-3.655m.85-3.071-4.462-4.56m11.163 11.41-4.133-4.225m-65.064 76.242 3.718-3.718m-10.683 10.683 3.498-3.498m.772-2.915-4.27-4.27m10.684 10.683-3.955-3.955"/><path fill="#A3B4C6" d="M190.156 211.779h-1.604a4.023 4.023 0 0 1-4.011-4.011V175.68a4.023 4.023 0 0 1 4.01-4.01h1.605a4.023 4.023 0 0 1 4.011 4.01v32.088a4.023 4.023 0 0 1-4.01 4.01"/><path fill="#A3B4C6" d="M237.824 212.977a4.813 4.813 0 0 1-4.813 4.813h-86.636a4.813 4.813 0 0 1 0-9.626h86.636a4.813 4.813 0 0 1 4.813 4.813"/><path fill="#A3B4C6" d="M154.098 190.096h70.513v-84.617h-70.513z" mask="url(#d)"/><path fill="#BFCDDD" d="M224.928 190.096H153.78a3.22 3.22 0 0 1-3.208-3.209V167.92a3.22 3.22 0 0 1 3.208-3.21h71.148a3.22 3.22 0 0 1 3.209 3.21v18.967a3.22 3.22 0 0 1-3.21 3.209m.001-59.264H153.78a3.22 3.22 0 0 1-3.208-3.208v-18.968a3.22 3.22 0 0 1 3.208-3.209h71.148a3.22 3.22 0 0 1 3.209 3.21v18.967a3.22 3.22 0 0 1-3.21 3.208" mask="url(#d)"/><path fill="#FFF" d="M159.563 120.546a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813m7.417 0a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813m7.417 0a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813m48.142 0h-22.461a.8.8 0 0 1-.802-.802v-3.208c0-.443.359-.803.802-.803h22.46c.444 0 .803.36.803.803v3.208c0 .443-.36.802-.802.802" mask="url(#d)"/><path fill="#BFCDDD" d="M224.928 160.464H153.78a3.22 3.22 0 0 1-3.208-3.209v-18.967a3.22 3.22 0 0 1 3.208-3.209h71.148a3.22 3.22 0 0 1 3.209 3.209v18.967a3.22 3.22 0 0 1-3.21 3.209" mask="url(#d)"/><path stroke="#7C90A5" d="M173.455 130.832h49.301m-57.772 0h6.089m-15.121 0h6.75m11.135 29.781h49.3m-57.772 0h6.089m-15.884 0h6.751" mask="url(#d)"/><path fill="#FFF" d="M159.563 151.038a2.407 2.407 0 1 1 0-4.814 2.407 2.407 0 0 1 0 4.814m7.417 0a2.407 2.407 0 1 1 0-4.814 2.407 2.407 0 0 1 0 4.814m7.417 0a2.407 2.407 0 1 1 .001-4.814 2.407 2.407 0 0 1 0 4.814m48.141 0h-22.461a.8.8 0 0 1-.802-.802v-3.209c0-.443.359-.802.802-.802h22.46c.444 0 .803.36.803.802v3.209c0 .443-.36.802-.802.802m-62.976 28.949a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813m7.417 0a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813m7.417 0a2.407 2.407 0 1 1 0-4.813 2.407 2.407 0 0 1 0 4.813m48.142 0h-22.461a.8.8 0 0 1-.802-.802v-3.209c0-.443.359-.802.802-.802h22.46c.444 0 .803.36.803.802v3.209c0 .443-.36.802-.802.802" mask="url(#d)"/><path fill="#BFCDDD" d="M203.04 221.108h-27.372a2.413 2.413 0 0 1-2.406-2.407v-11.448a2.414 2.414 0 0 1 2.406-2.407h27.372a2.414 2.414 0 0 1 2.407 2.407V218.7a2.413 2.413 0 0 1-2.407 2.407" mask="url(#d)"/><path stroke="#A3B4C6" d="M177.259 207.217v11.52m23.791-11.52v11.52" mask="url(#d)"/><path fill="#5BA02E" d="M162.873 267.894a9.42 9.42 0 0 1-9.422-9.422v-14.82a9.423 9.423 0 0 1 18.845 0v14.82a9.423 9.423 0 0 1-9.423 9.422" mask="url(#d)"/><path fill="#92C110" d="M171.22 267.83a9.42 9.42 0 0 1-9.422-9.423v-3.438a9.423 9.423 0 0 1 18.845 0v3.438a9.423 9.423 0 0 1-9.422 9.423" mask="url(#d)"/><path fill="#F2D7AD" d="M181.31 293.666h-27.712a3.21 3.21 0 0 1-3.209-3.21V269.79a3.21 3.21 0 0 1 3.209-3.21h27.711a3.21 3.21 0 0 1 3.209 3.21v20.668a3.21 3.21 0 0 1-3.209 3.209" mask="url(#d)"/></g></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/back.svg b/Yi.Pure.Vue3/src/assets/svg/back.svg
new file mode 100644
index 00000000..e1cda580
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/back.svg
@@ -0,0 +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.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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/back_top.svg b/Yi.Pure.Vue3/src/assets/svg/back_top.svg
new file mode 100644
index 00000000..f8e6aa02
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/back_top.svg
@@ -0,0 +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.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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/calendar.svg b/Yi.Pure.Vue3/src/assets/svg/calendar.svg
new file mode 100644
index 00000000..d61313c5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/calendar.svg
@@ -0,0 +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-1zM5 5h1V4h4v1h1V4h2v2H3V4h2zM3 7h10v6H3z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/dark.svg b/Yi.Pure.Vue3/src/assets/svg/dark.svg
new file mode 100644
index 00000000..b5c4d2d5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/dark.svg
@@ -0,0 +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.981"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/day.svg b/Yi.Pure.Vue3/src/assets/svg/day.svg
new file mode 100644
index 00000000..b7600345
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/day.svg
@@ -0,0 +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 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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/enter_outlined.svg b/Yi.Pure.Vue3/src/assets/svg/enter_outlined.svg
new file mode 100644
index 00000000..45e0bafe
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/enter_outlined.svg
@@ -0,0 +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-8"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/exit_screen.svg b/Yi.Pure.Vue3/src/assets/svg/exit_screen.svg
new file mode 100644
index 00000000..007c0b63
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/exit_screen.svg
@@ -0,0 +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.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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/full_screen.svg b/Yi.Pure.Vue3/src/assets/svg/full_screen.svg
new file mode 100644
index 00000000..fff93a5d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/full_screen.svg
@@ -0,0 +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 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/globalization.svg b/Yi.Pure.Vue3/src/assets/svg/globalization.svg
new file mode 100644
index 00000000..5f6bce6b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/globalization.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="globalization" viewBox="0 0 512 512"><path fill="currentColor" d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/hot.svg b/Yi.Pure.Vue3/src/assets/svg/hot.svg
new file mode 100644
index 00000000..d285f6fc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/hot.svg
@@ -0,0 +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.87a618 618 0 0 0 32.717-.87C694.631 878.182 709.837 759.706 702.26 678.4"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/keyboard_esc.svg b/Yi.Pure.Vue3/src/assets/svg/keyboard_esc.svg
new file mode 100644
index 00000000..bd671654
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/keyboard_esc.svg
@@ -0,0 +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 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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/laptop.svg b/Yi.Pure.Vue3/src/assets/svg/laptop.svg
new file mode 100644
index 00000000..7d2a736d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/laptop.svg
@@ -0,0 +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 1zm0-1h11V4h-11zM15 13H1v1h14z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/service.svg b/Yi.Pure.Vue3/src/assets/svg/service.svg
new file mode 100644
index 00000000..11d8803c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/service.svg
@@ -0,0 +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-.13M12.5 7H11v3h1.5zm-9 0v3H5V7z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/shop.svg b/Yi.Pure.Vue3/src/assets/svg/shop.svg
new file mode 100644
index 00000000..941b3362
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/shop.svg
@@ -0,0 +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 1m1.5 5v2h1V6H12v8H4V6h1.5v2h1V6zm0-1h-3V3.5a1.5 1.5 0 1 1 3 0z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/system.svg b/Yi.Pure.Vue3/src/assets/svg/system.svg
new file mode 100644
index 00000000..9ad39a56
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/svg/user_avatar.svg b/Yi.Pure.Vue3/src/assets/svg/user_avatar.svg
new file mode 100644
index 00000000..3606d013
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/svg/user_avatar.svg
@@ -0,0 +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.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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/table-bar/collapse.svg b/Yi.Pure.Vue3/src/assets/table-bar/collapse.svg
new file mode 100644
index 00000000..0823ae63
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/table-bar/collapse.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2m10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/table-bar/drag.svg b/Yi.Pure.Vue3/src/assets/table-bar/drag.svg
new file mode 100644
index 00000000..8ac32a7b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/table-bar/drag.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97m0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0m0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0M300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/table-bar/expand.svg b/Yi.Pure.Vue3/src/assets/table-bar/expand.svg
new file mode 100644
index 00000000..bb41c350
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/table-bar/expand.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/table-bar/refresh.svg b/Yi.Pure.Vue3/src/assets/table-bar/refresh.svg
new file mode 100644
index 00000000..140288cd
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/table-bar/refresh.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/table-bar/settings.svg b/Yi.Pure.Vue3/src/assets/table-bar/settings.svg
new file mode 100644
index 00000000..4ecd0779
--- /dev/null
+++ b/Yi.Pure.Vue3/src/assets/table-bar/settings.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10 10 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A10 10 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 10 10 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A10 10 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 10 10 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 10 10 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10 10 0 0 1 3.34 17m5.66.196a5 5 0 0 1 2.25 2.77q.75.071 1.499.001A5 5 0 0 1 15 17.197a5 5 0 0 1 3.525-.565q.435-.614.748-1.298A5 5 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8 8 0 0 0-.75-1.298A5 5 0 0 1 15 6.804a5 5 0 0 1-2.25-2.77q-.75-.071-1.499-.001A5 5 0 0 1 9 6.803a5 5 0 0 1-3.525.565 8 8 0 0 0-.748 1.298A5 5 0 0 1 6 12a5 5 0 0 1-1.273 3.334 8 8 0 0 0 .75 1.298A5 5 0 0 1 9 17.196M12 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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/assets/user.jpg b/Yi.Pure.Vue3/src/assets/user.jpg
new file mode 100644
index 00000000..a2973ace
Binary files /dev/null and b/Yi.Pure.Vue3/src/assets/user.jpg differ
diff --git a/Yi.Pure.Vue3/src/components/ReAnimateSelector/index.ts b/Yi.Pure.Vue3/src/components/ReAnimateSelector/index.ts
new file mode 100644
index 00000000..87c9008b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReAnimateSelector/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from "@pureadmin/utils";
+import reAnimateSelector from "./src/index.vue";
+
+/** [animate.css](https://animate.style/) 选择器组件 */
+export const ReAnimateSelector = withInstall(reAnimateSelector);
+
+export default ReAnimateSelector;
diff --git a/Yi.Pure.Vue3/src/components/ReAnimateSelector/src/animate.ts b/Yi.Pure.Vue3/src/components/ReAnimateSelector/src/animate.ts
new file mode 100644
index 00000000..2b0593c7
--- /dev/null
+++ b/Yi.Pure.Vue3/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"
+];
diff --git a/Yi.Pure.Vue3/src/components/ReAnimateSelector/src/index.vue b/Yi.Pure.Vue3/src/components/ReAnimateSelector/src/index.vue
new file mode 100644
index 00000000..e10056b8
--- /dev/null
+++ b/Yi.Pure.Vue3/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"
+});
+
+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="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>
diff --git a/Yi.Pure.Vue3/src/components/ReAuth/index.ts b/Yi.Pure.Vue3/src/components/ReAuth/index.ts
new file mode 100644
index 00000000..975ed2ca
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReAuth/index.ts
@@ -0,0 +1,5 @@
+import auth from "./src/auth";
+
+const Auth = auth;
+
+export { Auth };
diff --git a/Yi.Pure.Vue3/src/components/ReAuth/src/auth.tsx b/Yi.Pure.Vue3/src/components/ReAuth/src/auth.tsx
new file mode 100644
index 00000000..d2cf9b35
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReAuth/src/auth.tsx
@@ -0,0 +1,20 @@
+import { defineComponent, Fragment } from "vue";
+import { hasAuth } from "@/router/utils";
+
+export default defineComponent({
+  name: "Auth",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!slots) return null;
+      return hasAuth(props.value) ? (
+        <Fragment>{slots.default?.()}</Fragment>
+      ) : null;
+    };
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReBarcode/index.ts b/Yi.Pure.Vue3/src/components/ReBarcode/index.ts
new file mode 100644
index 00000000..ad098485
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReBarcode/index.ts
@@ -0,0 +1,7 @@
+import { withInstall } from "@pureadmin/utils";
+import reBarcode from "./src/index.vue";
+
+/** 条形码组件 */
+export const ReBarcode = withInstall(reBarcode);
+
+export default ReBarcode;
diff --git a/Yi.Pure.Vue3/src/components/ReBarcode/src/index.vue b/Yi.Pure.Vue3/src/components/ReBarcode/src/index.vue
new file mode 100644
index 00000000..b8674f31
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReBarcode/src/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import JsBarcode from "jsbarcode";
+import { ref, onMounted } from "vue";
+
+defineOptions({
+  name: "ReBarcode"
+});
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: "canvas"
+  },
+  text: {
+    type: String,
+    default: null
+  },
+  // 完整配置 https://github.com/lindell/JsBarcode/wiki/Options
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  // type 相当于 options.format，如果 type 和 options.format 同时存在，type 值优先；
+  type: {
+    type: String,
+    default: "CODE128"
+  }
+});
+
+const wrapEl = ref(null);
+
+onMounted(() => {
+  const opt = { ...props.options, format: props.type };
+  JsBarcode(wrapEl.value, props.text, opt);
+});
+</script>
+
+<template>
+  <component :is="tag" ref="wrapEl" />
+</template>
diff --git a/Yi.Pure.Vue3/src/components/ReCol/index.ts b/Yi.Pure.Vue3/src/components/ReCol/index.ts
new file mode 100644
index 00000000..7a6c9374
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCol/index.ts
@@ -0,0 +1,29 @@
+import { ElCol } from "element-plus";
+import { h, defineComponent } from "vue";
+
+// 封装element-plus的el-col组件
+export default defineComponent({
+  name: "ReCol",
+  props: {
+    value: {
+      type: Number,
+      default: 24
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    const val = this.value;
+    return h(
+      ElCol,
+      {
+        xs: val,
+        sm: val,
+        md: val,
+        lg: val,
+        xl: val,
+        ...attrs
+      },
+      { default: () => this.$slots.default() }
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReCountTo/README.md b/Yi.Pure.Vue3/src/components/ReCountTo/README.md
new file mode 100644
index 00000000..b5048f36
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCountTo/README.md
@@ -0,0 +1,2 @@
+normal 普通数字动画组件  
+rebound 回弹式数字动画组件
diff --git a/Yi.Pure.Vue3/src/components/ReCountTo/index.ts b/Yi.Pure.Vue3/src/components/ReCountTo/index.ts
new file mode 100644
index 00000000..1817218a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCountTo/index.ts
@@ -0,0 +1,11 @@
+import reNormalCountTo from "./src/normal";
+import reboundCountTo from "./src/rebound";
+import { withInstall } from "@pureadmin/utils";
+
+/** 普通数字动画组件 */
+const ReNormalCountTo = withInstall(reNormalCountTo);
+
+/** 回弹式数字动画组件 */
+const ReboundCountTo = withInstall(reboundCountTo);
+
+export { ReNormalCountTo, ReboundCountTo };
diff --git a/Yi.Pure.Vue3/src/components/ReCountTo/src/normal/index.tsx b/Yi.Pure.Vue3/src/components/ReCountTo/src/normal/index.tsx
new file mode 100644
index 00000000..538e0bbe
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCountTo/src/normal/index.tsx
@@ -0,0 +1,179 @@
+import {
+  watch,
+  unref,
+  computed,
+  reactive,
+  onMounted,
+  defineComponent
+} from "vue";
+import { countToProps } from "./props";
+import { isNumber } from "@pureadmin/utils";
+
+export default defineComponent({
+  name: "ReNormalCountTo",
+  props: countToProps,
+  emits: ["mounted", "callback"],
+  setup(props, { emit }) {
+    const state = reactive<{
+      localStartVal: number;
+      printVal: number | null;
+      displayValue: string;
+      paused: boolean;
+      localDuration: number | null;
+      startTime: number | null;
+      timestamp: number | null;
+      rAF: any;
+      remaining: number | null;
+      color: string;
+      fontSize: string;
+    }>({
+      localStartVal: props.startVal,
+      displayValue: formatNumber(props.startVal),
+      printVal: null,
+      paused: false,
+      localDuration: props.duration,
+      startTime: null,
+      timestamp: null,
+      remaining: null,
+      rAF: null,
+      color: null,
+      fontSize: "16px"
+    });
+
+    const getCountDown = computed(() => {
+      return props.startVal > props.endVal;
+    });
+
+    watch([() => props.startVal, () => props.endVal], () => {
+      if (props.autoplay) {
+        start();
+      }
+    });
+
+    function start() {
+      const { startVal, duration, color, fontSize } = props;
+      state.localStartVal = startVal;
+      state.startTime = null;
+      state.localDuration = duration;
+      state.paused = false;
+      state.color = color;
+      state.fontSize = fontSize;
+      state.rAF = requestAnimationFrame(count);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function pauseResume() {
+      if (state.paused) {
+        resume();
+        state.paused = false;
+      } else {
+        pause();
+        state.paused = true;
+      }
+    }
+
+    function pause() {
+      cancelAnimationFrame(state.rAF);
+    }
+
+    function resume() {
+      state.startTime = null;
+      state.localDuration = +(state.remaining as number);
+      state.localStartVal = +(state.printVal as number);
+      requestAnimationFrame(count);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function reset() {
+      state.startTime = null;
+      cancelAnimationFrame(state.rAF);
+      state.displayValue = formatNumber(props.startVal);
+    }
+
+    function count(timestamp: number) {
+      const { useEasing, easingFn, endVal } = props;
+      if (!state.startTime) state.startTime = timestamp;
+      state.timestamp = timestamp;
+      const progress = timestamp - state.startTime;
+      state.remaining = (state.localDuration as number) - progress;
+      if (useEasing) {
+        if (unref(getCountDown)) {
+          state.printVal =
+            state.localStartVal -
+            easingFn(
+              progress,
+              0,
+              state.localStartVal - endVal,
+              state.localDuration as number
+            );
+        } else {
+          state.printVal = easingFn(
+            progress,
+            state.localStartVal,
+            endVal - state.localStartVal,
+            state.localDuration as number
+          );
+        }
+      } else {
+        if (unref(getCountDown)) {
+          state.printVal =
+            state.localStartVal -
+            (state.localStartVal - endVal) *
+              (progress / (state.localDuration as number));
+        } else {
+          state.printVal =
+            state.localStartVal +
+            (endVal - state.localStartVal) *
+              (progress / (state.localDuration as number));
+        }
+      }
+      if (unref(getCountDown)) {
+        state.printVal = state.printVal < endVal ? endVal : state.printVal;
+      } else {
+        state.printVal = state.printVal > endVal ? endVal : state.printVal;
+      }
+      state.displayValue = formatNumber(state.printVal);
+      if (progress < (state.localDuration as number)) {
+        state.rAF = requestAnimationFrame(count);
+      } else {
+        emit("callback");
+      }
+    }
+
+    function formatNumber(num: number | string) {
+      const { decimals, decimal, separator, suffix, prefix } = props;
+      num = Number(num).toFixed(decimals);
+      num += "";
+      const x = num.split(".");
+      let x1 = x[0];
+      const x2 = x.length > 1 ? decimal + x[1] : "";
+      const rgx = /(\d+)(\d{3})/;
+      if (separator && !isNumber(separator)) {
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, "$1" + separator + "$2");
+        }
+      }
+      return prefix + x1 + x2 + suffix;
+    }
+
+    onMounted(() => {
+      if (props.autoplay) {
+        start();
+      }
+      emit("mounted");
+    });
+
+    return () => (
+      <>
+        <span
+          style={{
+            color: props.color,
+            fontSize: props.fontSize
+          }}
+        >
+          {state.displayValue}
+        </span>
+      </>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReCountTo/src/normal/props.ts b/Yi.Pure.Vue3/src/components/ReCountTo/src/normal/props.ts
new file mode 100644
index 00000000..f04c2f5e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCountTo/src/normal/props.ts
@@ -0,0 +1,32 @@
+import type { PropType } from "vue";
+import propTypes from "@/utils/propTypes";
+
+export const countToProps = {
+  startVal: propTypes.number.def(0),
+  endVal: propTypes.number.def(2020),
+  duration: propTypes.number.def(1300),
+  autoplay: propTypes.bool.def(true),
+  decimals: {
+    type: Number as PropType<number>,
+    required: false,
+    default: 0,
+    validator(value: number) {
+      return value >= 0;
+    }
+  },
+  color: propTypes.string.def(),
+  fontSize: propTypes.string.def(),
+  decimal: propTypes.string.def("."),
+  separator: propTypes.string.def(","),
+  prefix: propTypes.string.def(""),
+  suffix: propTypes.string.def(""),
+  useEasing: propTypes.bool.def(true),
+  easingFn: {
+    type: Function as PropType<
+      (t: number, b: number, c: number, d: number) => number
+    >,
+    default(t: number, b: number, c: number, d: number) {
+      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+    }
+  }
+};
diff --git a/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/index.tsx b/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/index.tsx
new file mode 100644
index 00000000..ff6c224d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/index.tsx
@@ -0,0 +1,72 @@
+import "./rebound.css";
+import {
+  ref,
+  unref,
+  onBeforeMount,
+  defineComponent,
+  onBeforeUnmount
+} from "vue";
+import { reboundProps } from "./props";
+
+export default defineComponent({
+  name: "ReboundCountTo",
+  props: reboundProps,
+  setup(props) {
+    const ulRef = ref();
+    const timer = ref(null);
+
+    onBeforeMount(() => {
+      const ua = navigator.userAgent.toLowerCase();
+      const testUA = regexp => regexp.test(ua);
+      const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
+
+      // Safari浏览器的兼容代码
+      isSafari &&
+        (timer.value = setTimeout(() => {
+          ulRef.value.setAttribute(
+            "style",
+            `
+        animation: none;
+        transform: translateY(calc(var(--i) * -9.09%))
+      `
+          );
+        }, props.delay * 1000));
+    });
+
+    onBeforeUnmount(() => {
+      clearTimeout(unref(timer));
+    });
+
+    return () => (
+      <>
+        <div
+          class="scroll-num"
+          style={{ "--i": props.i, "--delay": props.delay }}
+        >
+          <ul ref="ulRef" style={{ fontSize: "32px" }}>
+            <li>0</li>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+            <li>4</li>
+            <li>5</li>
+            <li>6</li>
+            <li>7</li>
+            <li>8</li>
+            <li>9</li>
+            <li>0</li>
+          </ul>
+
+          <svg width="0" height="0">
+            <filter id="blur">
+              <feGaussianBlur
+                in="SourceGraphic"
+                stdDeviation={`0 ${props.blur}`}
+              />
+            </filter>
+          </svg>
+        </div>
+      </>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/props.ts b/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/props.ts
new file mode 100644
index 00000000..8b0491af
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/props.ts
@@ -0,0 +1,15 @@
+import type { PropType } from "vue";
+import propTypes from "@/utils/propTypes";
+
+export const reboundProps = {
+  delay: propTypes.number.def(1),
+  blur: propTypes.number.def(2),
+  i: {
+    type: Number as PropType<number>,
+    required: false,
+    default: 0,
+    validator(value: number) {
+      return value < 10 && value >= 0 && Number.isInteger(value);
+    }
+  }
+};
diff --git a/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/rebound.css b/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/rebound.css
new file mode 100644
index 00000000..9fc59321
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCountTo/src/rebound/rebound.css
@@ -0,0 +1,77 @@
+.scroll-num {
+  width: var(--width, 20px);
+  height: var(--height, calc(var(--width, 20px) * 1.8));
+  color: var(--color, #333);
+  font-size: var(--height, calc(var(--width, 20px) * 1.1));
+  line-height: var(--height, calc(var(--width, 20px) * 1.8));
+  text-align: center;
+  overflow: hidden;
+  animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+
+ul {
+  animation:
+    move 0.3s linear infinite,
+    bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+
+@keyframes move {
+  from {
+    transform: translateY(-90%);
+    filter: url(#blur);
+  }
+
+  to {
+    transform: translateY(1%);
+    filter: url(#blur);
+  }
+}
+
+@keyframes bounce-in-down {
+  from {
+    transform: translateY(calc(var(--i) * -9.09% - 7%));
+    filter: none;
+  }
+
+  25% {
+    transform: translateY(calc(var(--i) * -9.09% + 3%));
+  }
+
+  50% {
+    transform: translateY(calc(var(--i) * -9.09% - 1%));
+  }
+
+  70% {
+    transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+  }
+
+  85% {
+    transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+  }
+
+  to {
+    transform: translateY(calc(var(--i) * -9.09%));
+  }
+}
+
+@keyframes enhance-bounce-in-down {
+  25% {
+    transform: translateY(8%);
+  }
+
+  50% {
+    transform: translateY(-4%);
+  }
+
+  70% {
+    transform: translateY(2%);
+  }
+
+  85% {
+    transform: translateY(-1%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/index.ts b/Yi.Pure.Vue3/src/components/ReCropper/index.ts
new file mode 100644
index 00000000..62e25903
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/index.ts
@@ -0,0 +1,7 @@
+import reCropper from "./src";
+import { withInstall } from "@pureadmin/utils";
+
+/** 图片裁剪组件 */
+export const ReCropper = withInstall(reCropper);
+
+export default ReCropper;
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/circled.css b/Yi.Pure.Vue3/src/components/ReCropper/src/circled.css
new file mode 100644
index 00000000..54c77d23
--- /dev/null
+++ b/Yi.Pure.Vue3/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%;
+  }
+}
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/index.tsx b/Yi.Pure.Vue3/src/components/ReCropper/src/index.tsx
new file mode 100644
index 00000000..826ffd0a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/index.tsx
@@ -0,0 +1,457 @@
+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 {
+  type PropType,
+  ref,
+  unref,
+  computed,
+  onMounted,
+  onUnmounted,
+  defineComponent
+} from "vue";
+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: Options = {
+  aspectRatio: 1,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  toggleDragModeOnDblclick: true,
+  autoCrop: true,
+  background: true,
+  highlight: true,
+  center: true,
+  responsive: true,
+  restore: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  scalable: true,
+  modal: true,
+  guides: true,
+  movable: true,
+  rotatable: true
+};
+
+const props = {
+  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 as PropType<"" | "anonymous" | "use-credentials" | undefined>,
+    default: undefined
+  },
+  imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+  options: { type: Object as PropType<Options>, default: () => ({}) }
+};
+
+export default defineComponent({
+  name: "ReCropper",
+  props,
+  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();
+
+    let scaleX = 1;
+    let scaleY = 1;
+
+    const debounceRealTimeCroppered = debounce(realTimeCroppered, 80);
+
+    const getImageStyle = computed((): CSSProperties => {
+      return {
+        height: props.height,
+        maxWidth: "100%",
+        ...props.imageStyle
+      };
+    });
+
+    const getClass = computed(() => {
+      return [
+        attrs.class,
+        {
+          ["re-circled"]: inCircled.value
+        }
+      ];
+    });
+
+    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;
+      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
+      });
+    }
+
+    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,
+        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,
+      tippyElRef,
+      getClass,
+      getWrapperStyle,
+      getImageStyle,
+      isReady,
+      croppered,
+      onContextmenu
+    };
+  },
+
+  render() {
+    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;
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-down.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-down.svg
new file mode 100644
index 00000000..36558e89
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-h.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-h.svg
new file mode 100644
index 00000000..f955c41e
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-left.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-left.svg
new file mode 100644
index 00000000..5f1c01e0
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-right.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-right.svg
new file mode 100644
index 00000000..1a0fe00e
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-up.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-up.svg
new file mode 100644
index 00000000..942f9261
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-v.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/arrow-v.svg
new file mode 100644
index 00000000..bbd0476f
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/change.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/change.svg
new file mode 100644
index 00000000..ec3f02b3
--- /dev/null
+++ b/Yi.Pure.Vue3/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>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/download.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/download.svg
new file mode 100644
index 00000000..854b2c99
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/download.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="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/index.ts b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/index.ts
new file mode 100644
index 00000000..1306ba77
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/index.ts
@@ -0,0 +1,31 @@
+import Reload from "./reload.svg?component";
+import Upload from "./upload.svg?component";
+import ArrowH from "./arrow-h.svg?component";
+import ArrowV from "./arrow-v.svg?component";
+import ArrowUp from "./arrow-up.svg?component";
+import ChangeIcon from "./change.svg?component";
+import ArrowDown from "./arrow-down.svg?component";
+import ArrowLeft from "./arrow-left.svg?component";
+import DownloadIcon from "./download.svg?component";
+import ArrowRight from "./arrow-right.svg?component";
+import RotateLeft from "./rotate-left.svg?component";
+import SearchPlus from "./search-plus.svg?component";
+import RotateRight from "./rotate-right.svg?component";
+import SearchMinus from "./search-minus.svg?component";
+
+export {
+  Reload,
+  Upload,
+  ArrowH,
+  ArrowV,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ChangeIcon,
+  ArrowRight,
+  RotateLeft,
+  SearchPlus,
+  RotateRight,
+  SearchMinus,
+  DownloadIcon
+};
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/reload.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/reload.svg
new file mode 100644
index 00000000..9f9615a7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/reload.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="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8m756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/rotate-left.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/rotate-left.svg
new file mode 100644
index 00000000..bea3fc01
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/rotate-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="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"/><path fill="currentColor" d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/rotate-right.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/rotate-right.svg
new file mode 100644
index 00000000..67ecdc60
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/rotate-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="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8"/><path fill="currentColor" d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H396V494h440z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/search-minus.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/search-minus.svg
new file mode 100644
index 00000000..73727063
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/search-minus.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="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/search-plus.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/search-plus.svg
new file mode 100644
index 00000000..5fa8ae9e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/search-plus.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="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropper/src/svg/upload.svg b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/upload.svg
new file mode 100644
index 00000000..a0080199
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropper/src/svg/upload.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="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13M878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReCropperPreview/index.ts b/Yi.Pure.Vue3/src/components/ReCropperPreview/index.ts
new file mode 100644
index 00000000..e7949fee
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropperPreview/index.ts
@@ -0,0 +1,7 @@
+import reCropperPreview from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 图片裁剪预览组件 */
+export const ReCropperPreview = withInstall(reCropperPreview);
+
+export default ReCropperPreview;
diff --git a/Yi.Pure.Vue3/src/components/ReCropperPreview/src/index.vue b/Yi.Pure.Vue3/src/components/ReCropperPreview/src/index.vue
new file mode 100644
index 00000000..c34cc94e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReCropperPreview/src/index.vue
@@ -0,0 +1,76 @@
+<script setup lang="tsx">
+import { ref } from "vue";
+import ReCropper from "@/components/ReCropper";
+import { formatBytes } from "@pureadmin/utils";
+
+defineOptions({
+  name: "ReCropperPreview"
+});
+
+defineProps({
+  imgSrc: String
+});
+
+const emit = defineEmits(["cropper"]);
+
+const infos = ref();
+const popoverRef = ref();
+const refCropper = ref();
+const showPopover = ref(false);
+const cropperImg = ref<string>("");
+
+function onCropper({ base64, blob, info }) {
+  infos.value = info;
+  cropperImg.value = base64;
+  emit("cropper", { base64, blob, info });
+}
+
+function hidePopover() {
+  popoverRef.value.hide();
+}
+
+defineExpose({ hidePopover });
+</script>
+
+<template>
+  <div v-loading="!showPopover" element-loading-background="transparent">
+    <el-popover
+      ref="popoverRef"
+      :visible="showPopover"
+      placement="right"
+      width="18vw"
+    >
+      <template #reference>
+        <div class="w-[18vw]">
+          <ReCropper
+            ref="refCropper"
+            :src="imgSrc"
+            circled
+            @cropper="onCropper"
+            @readied="showPopover = true"
+          />
+          <p v-show="showPopover" class="mt-1 text-center">
+            温馨提示：右键上方裁剪区可开启功能菜单
+          </p>
+        </div>
+      </template>
+      <div class="flex flex-wrap justify-center items-center text-center">
+        <el-image
+          v-if="cropperImg"
+          :src="cropperImg"
+          :preview-src-list="Array.of(cropperImg)"
+          fit="cover"
+        />
+        <div v-if="infos" class="mt-1">
+          <p>
+            图像大小：{{ parseInt(infos.width) }} ×
+            {{ parseInt(infos.height) }}像素
+          </p>
+          <p>
+            文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
+          </p>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/components/ReDialog/index.ts b/Yi.Pure.Vue3/src/components/ReDialog/index.ts
new file mode 100644
index 00000000..b471764b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReDialog/index.ts
@@ -0,0 +1,69 @@
+import { ref } from "vue";
+import reDialog from "./index.vue";
+import { useTimeoutFn } from "@vueuse/core";
+import { withInstall } from "@pureadmin/utils";
+import type {
+  EventType,
+  ArgsType,
+  DialogProps,
+  ButtonProps,
+  DialogOptions
+} from "./type";
+
+const dialogStore = ref<Array<DialogOptions>>([]);
+
+/** 打开弹框 */
+const addDialog = (options: DialogOptions) => {
+  const open = () =>
+    dialogStore.value.push(Object.assign(options, { visible: true }));
+  if (options?.openDelay) {
+    useTimeoutFn(() => {
+      open();
+    }, options.openDelay);
+  } else {
+    open();
+  }
+};
+
+/** 关闭弹框 */
+const closeDialog = (options: DialogOptions, index: number, args?: any) => {
+  dialogStore.value[index].visible = false;
+  options.closeCallBack && options.closeCallBack({ options, index, args });
+
+  const closeDelay = options?.closeDelay ?? 200;
+  useTimeoutFn(() => {
+    dialogStore.value.splice(index, 1);
+  }, closeDelay);
+};
+
+/**
+ * @description 更改弹框自身属性值
+ * @param value 属性值
+ * @param key 属性，默认`title`
+ * @param index 弹框索引（默认`0`，代表只有一个弹框，对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`）
+ */
+const updateDialog = (value: any, key = "title", index = 0) => {
+  dialogStore.value[index][key] = value;
+};
+
+/** 关闭所有弹框 */
+const closeAllDialog = () => {
+  dialogStore.value = [];
+};
+
+/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
+ */
+const ReDialog = withInstall(reDialog);
+
+export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
+export {
+  ReDialog,
+  dialogStore,
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+};
diff --git a/Yi.Pure.Vue3/src/components/ReDialog/index.vue b/Yi.Pure.Vue3/src/components/ReDialog/index.vue
new file mode 100644
index 00000000..23a0106e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReDialog/index.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import {
+  type EventType,
+  type ButtonProps,
+  type DialogOptions,
+  closeDialog,
+  dialogStore
+} from "./index";
+import { ref, computed } from "vue";
+import { isFunction } from "@pureadmin/utils";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+
+defineOptions({
+  name: "ReDialog"
+});
+
+const sureBtnMap = ref({});
+const fullscreen = ref(false);
+
+const footerButtons = computed(() => {
+  return (options: DialogOptions) => {
+    return options?.footerButtons?.length > 0
+      ? options.footerButtons
+      : ([
+          {
+            label: "取消",
+            text: true,
+            bg: true,
+            btnClick: ({ dialog: { options, index } }) => {
+              const done = () =>
+                closeDialog(options, index, { command: "cancel" });
+              if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+                options.beforeCancel(done, { options, index });
+              } else {
+                done();
+              }
+            }
+          },
+          {
+            label: "确定",
+            type: "primary",
+            text: true,
+            bg: true,
+            popconfirm: options?.popconfirm,
+            btnClick: ({ dialog: { options, index } }) => {
+              if (options?.sureBtnLoading) {
+                sureBtnMap.value[index] = Object.assign(
+                  {},
+                  sureBtnMap.value[index],
+                  {
+                    loading: true
+                  }
+                );
+              }
+              const closeLoading = () => {
+                if (options?.sureBtnLoading) {
+                  sureBtnMap.value[index].loading = false;
+                }
+              };
+              const done = () => {
+                closeLoading();
+                closeDialog(options, index, { command: "sure" });
+              };
+              if (options?.beforeSure && isFunction(options?.beforeSure)) {
+                options.beforeSure(done, { options, index, closeLoading });
+              } else {
+                done();
+              }
+            }
+          }
+        ] as Array<ButtonProps>);
+  };
+});
+
+const fullscreenClass = computed(() => {
+  return [
+    "el-icon",
+    "el-dialog__close",
+    "-translate-x-2",
+    "cursor-pointer",
+    "hover:!text-[red]"
+  ];
+});
+
+function eventsCallBack(
+  event: EventType,
+  options: DialogOptions,
+  index: number,
+  isClickFullScreen = false
+) {
+  if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
+  if (options?.[event] && isFunction(options?.[event])) {
+    return options?.[event]({ options, index });
+  }
+}
+
+function handleClose(
+  options: DialogOptions,
+  index: number,
+  args = { command: "close" }
+) {
+  closeDialog(options, index, args);
+  eventsCallBack("close", options, index);
+}
+</script>
+
+<template>
+  <el-dialog
+    v-for="(options, index) in dialogStore"
+    :key="index"
+    v-bind="options"
+    v-model="options.visible"
+    class="pure-dialog"
+    :fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
+    @closed="handleClose(options, index)"
+    @opened="eventsCallBack('open', options, index)"
+    @openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
+    @closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
+  >
+    <!-- header -->
+    <template
+      v-if="options?.fullscreenIcon || options?.headerRenderer"
+      #header="{ close, titleId, titleClass }"
+    >
+      <div
+        v-if="options?.fullscreenIcon"
+        class="flex items-center justify-between"
+      >
+        <span :id="titleId" :class="titleClass">{{ options?.title }}</span>
+        <i
+          v-if="!options?.fullscreen"
+          :class="fullscreenClass"
+          @click="
+            () => {
+              fullscreen = !fullscreen;
+              eventsCallBack(
+                'fullscreenCallBack',
+                { ...options, fullscreen },
+                index,
+                true
+              );
+            }
+          "
+        >
+          <IconifyIconOffline
+            class="pure-dialog-svg"
+            :icon="
+              options?.fullscreen
+                ? ExitFullscreen
+                : fullscreen
+                  ? ExitFullscreen
+                  : Fullscreen
+            "
+          />
+        </i>
+      </div>
+      <component
+        :is="options?.headerRenderer({ close, titleId, titleClass })"
+        v-else
+      />
+    </template>
+    <component
+      v-bind="options?.props"
+      :is="options.contentRenderer({ options, index })"
+      @close="args => handleClose(options, index, args)"
+    />
+    <!-- footer -->
+    <template v-if="!options?.hideFooter" #footer>
+      <template v-if="options?.footerRenderer">
+        <component :is="options?.footerRenderer({ options, index })" />
+      </template>
+      <span v-else>
+        <template v-for="(btn, key) in footerButtons(options)" :key="key">
+          <el-popconfirm
+            v-if="btn.popconfirm"
+            v-bind="btn.popconfirm"
+            @confirm="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            <template #reference>
+              <el-button v-bind="btn">{{ btn?.label }}</el-button>
+            </template>
+          </el-popconfirm>
+          <el-button
+            v-else
+            v-bind="btn"
+            :loading="key === 1 && sureBtnMap[index]?.loading"
+            @click="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            {{ btn?.label }}
+          </el-button>
+        </template>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/Yi.Pure.Vue3/src/components/ReDialog/type.ts b/Yi.Pure.Vue3/src/components/ReDialog/type.ts
new file mode 100644
index 00000000..7efbe201
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReDialog/type.ts
@@ -0,0 +1,275 @@
+import type { CSSProperties, VNode, Component } from "vue";
+
+type DoneFn = (cancel?: boolean) => void;
+type EventType =
+  | "open"
+  | "close"
+  | "openAutoFocus"
+  | "closeAutoFocus"
+  | "fullscreenCallBack";
+type ArgsType = {
+  /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
+  command: "cancel" | "sure" | "close";
+};
+type ButtonType =
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "text";
+
+/** https://element-plus.org/zh-CN/component/dialog.html#attributes */
+type DialogProps = {
+  /** `Dialog` 的显示与隐藏 */
+  visible?: boolean;
+  /** `Dialog` 的标题 */
+  title?: string;
+  /** `Dialog` 的宽度，默认 `50%` */
+  width?: string | number;
+  /** 是否为全屏 `Dialog`（会一直处于全屏状态，除非弹框关闭），默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
+  fullscreen?: boolean;
+  /** 是否显示全屏操作图标，默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
+  fullscreenIcon?: boolean;
+  /** `Dialog CSS` 中的 `margin-top` 值，默认 `15vh` */
+  top?: string;
+  /** 是否需要遮罩层，默认 `true` */
+  modal?: boolean;
+  /** `Dialog` 自身是否插入至 `body` 元素上。嵌套的 `Dialog` 必须指定该属性并赋值为 `true`，默认 `false` */
+  appendToBody?: boolean;
+  /** 是否在 `Dialog` 出现时将 `body` 滚动锁定，默认 `true` */
+  lockScroll?: boolean;
+  /** `Dialog` 的自定义类名 */
+  class?: string;
+  /** `Dialog` 的自定义样式 */
+  style?: CSSProperties;
+  /** `Dialog` 打开的延时时间，单位毫秒，默认 `0` */
+  openDelay?: number;
+  /** `Dialog` 关闭的延时时间，单位毫秒，默认 `0` */
+  closeDelay?: number;
+  /** 是否可以通过点击 `modal` 关闭 `Dialog`，默认 `true` */
+  closeOnClickModal?: boolean;
+  /** 是否可以通过按下 `ESC` 关闭 `Dialog`，默认 `true` */
+  closeOnPressEscape?: boolean;
+  /** 是否显示关闭按钮，默认 `true` */
+  showClose?: boolean;
+  /** 关闭前的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeClose?: (done: DoneFn) => void;
+  /** 为 `Dialog` 启用可拖拽功能，默认 `false` */
+  draggable?: boolean;
+  /** 是否让 `Dialog` 的 `header` 和 `footer` 部分居中排列，默认 `false` */
+  center?: boolean;
+  /** 是否水平垂直对齐对话框，默认 `false` */
+  alignCenter?: boolean;
+  /** 当关闭 `Dialog` 时，销毁其中的元素，默认 `false` */
+  destroyOnClose?: boolean;
+};
+
+//element-plus.org/zh-CN/component/popconfirm.html#attributes
+type Popconfirm = {
+  /** 标题 */
+  title?: string;
+  /** 确定按钮文字 */
+  confirmButtonText?: string;
+  /** 取消按钮文字 */
+  cancelButtonText?: string;
+  /** 确定按钮类型，默认 `primary` */
+  confirmButtonType?: ButtonType;
+  /** 取消按钮类型，默认 `text` */
+  cancelButtonType?: ButtonType;
+  /** 自定义图标，默认 `QuestionFilled` */
+  icon?: string | Component;
+  /** `Icon` 颜色，默认 `#f90` */
+  iconColor?: string;
+  /** 是否隐藏 `Icon`，默认 `false` */
+  hideIcon?: boolean;
+  /** 关闭时的延迟，默认 `200` */
+  hideAfter?: number;
+  /** 是否将 `popover` 的下拉列表插入至 `body` 元素，默认 `true` */
+  teleported?: boolean;
+  /** 当 `popover` 组件长时间不触发且 `persistent` 属性设置为 `false` 时, `popover` 将会被删除，默认 `false` */
+  persistent?: boolean;
+  /** 弹层宽度，最小宽度 `150px`，默认 `150` */
+  width?: string | number;
+};
+
+type BtnClickDialog = {
+  options?: DialogOptions;
+  index?: number;
+};
+type BtnClickButton = {
+  btn?: ButtonProps;
+  index?: number;
+};
+/** https://element-plus.org/zh-CN/component/button.html#button-attributes */
+type ButtonProps = {
+  /** 按钮文字 */
+  label: string;
+  /** 按钮尺寸 */
+  size?: "large" | "default" | "small";
+  /** 按钮类型 */
+  type?: "primary" | "success" | "warning" | "danger" | "info";
+  /** 是否为朴素按钮，默认 `false` */
+  plain?: boolean;
+  /** 是否为文字按钮，默认 `false` */
+  text?: boolean;
+  /** 是否显示文字按钮背景颜色，默认 `false` */
+  bg?: boolean;
+  /** 是否为链接按钮，默认 `false` */
+  link?: boolean;
+  /** 是否为圆角按钮，默认 `false` */
+  round?: boolean;
+  /** 是否为圆形按钮，默认 `false` */
+  circle?: boolean;
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
+  /** 是否为加载中状态，默认 `false` */
+  loading?: boolean;
+  /** 自定义加载中状态图标组件 */
+  loadingIcon?: string | Component;
+  /** 按钮是否为禁用状态，默认 `false` */
+  disabled?: boolean;
+  /** 图标组件 */
+  icon?: string | Component;
+  /** 是否开启原生 `autofocus` 属性，默认 `false` */
+  autofocus?: boolean;
+  /** 原生 `type` 属性，默认 `button` */
+  nativeType?: "button" | "submit" | "reset";
+  /** 自动在两个中文字符之间插入空格 */
+  autoInsertSpace?: boolean;
+  /** 自定义按钮颜色, 并自动计算 `hover` 和 `active` 触发后的颜色 */
+  color?: string;
+  /** `dark` 模式, 意味着自动设置 `color` 为 `dark` 模式的颜色，默认 `false` */
+  dark?: boolean;
+  /** 自定义元素标签 */
+  tag?: string | Component;
+  /** 点击按钮后触发的回调 */
+  btnClick?: ({
+    dialog,
+    button
+  }: {
+    /** 当前 `Dialog` 信息 */
+    dialog: BtnClickDialog;
+    /** 当前 `button` 信息 */
+    button: BtnClickButton;
+  }) => void;
+};
+
+interface DialogOptions extends DialogProps {
+  /** 内容区组件的 `props`，可通过 `defineProps` 接收 */
+  props?: any;
+  /** 是否隐藏 `Dialog` 按钮操作区的内容 */
+  hideFooter?: boolean;
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
+  /** 点击确定按钮后是否开启 `loading` 加载动画 */
+  sureBtnLoading?: boolean;
+  /**
+   * @description 自定义对话框标题的内容渲染器
+   * @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
+   */
+  headerRenderer?: ({
+    close,
+    titleId,
+    titleClass
+  }: {
+    close: Function;
+    titleId: string;
+    titleClass: string;
+  }) => VNode | Component;
+  /** 自定义内容渲染器 */
+  contentRenderer?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => VNode | Component;
+  /** 自定义按钮操作区的内容渲染器，会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
+  footerRenderer?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => VNode | Component;
+  /** 自定义底部按钮操作 */
+  footerButtons?: Array<ButtonProps>;
+  /** `Dialog` 打开后的回调 */
+  open?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** `Dialog` 关闭后的回调（只有点击右上角关闭按钮或空白页或按下了esc键关闭页面时才会触发） */
+  close?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** `Dialog` 关闭后的回调。 `args` 返回的 `command` 值解析：`cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键  */
+  closeCallBack?: ({
+    options,
+    index,
+    args
+  }: {
+    options: DialogOptions;
+    index: number;
+    args: any;
+  }) => void;
+  /** 点击全屏按钮时的回调 */
+  fullscreenCallBack?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** 输入焦点聚焦在 `Dialog` 内容时的回调 */
+  openAutoFocus?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** 输入焦点从 `Dialog` 内容失焦时的回调 */
+  closeAutoFocus?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** 点击底部取消按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeCancel?: (
+    done: Function,
+    {
+      options,
+      index
+    }: {
+      options: DialogOptions;
+      index: number;
+    }
+  ) => void;
+  /** 点击底部确定按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeSure?: (
+    done: Function,
+    {
+      options,
+      index,
+      closeLoading
+    }: {
+      options: DialogOptions;
+      index: number;
+      /** 关闭确定按钮的 `loading` 加载动画 */
+      closeLoading: Function;
+    }
+  ) => void;
+}
+
+export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
diff --git a/Yi.Pure.Vue3/src/components/ReFlicker/index.css b/Yi.Pure.Vue3/src/components/ReFlicker/index.css
new file mode 100644
index 00000000..4c40af45
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlicker/index.css
@@ -0,0 +1,39 @@
+.point {
+  width: var(--point-width);
+  height: var(--point-height);
+  background: var(--point-background);
+  position: relative;
+  border-radius: var(--point-border-radius);
+}
+
+.point-flicker:after {
+  background: var(--point-background);
+}
+
+.point-flicker:before,
+.point-flicker:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  border-radius: var(--point-border-radius);
+  animation: flicker 1.2s ease-out infinite;
+}
+
+@keyframes flicker {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(var(--point-scale));
+    opacity: 0;
+  }
+}
diff --git a/Yi.Pure.Vue3/src/components/ReFlicker/index.ts b/Yi.Pure.Vue3/src/components/ReFlicker/index.ts
new file mode 100644
index 00000000..b829323f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlicker/index.ts
@@ -0,0 +1,44 @@
+import "./index.css";
+import { type Component, h, defineComponent } from "vue";
+
+export interface attrsType {
+  width?: string;
+  height?: string;
+  borderRadius?: number | string;
+  background?: string;
+  scale?: number | string;
+}
+
+/**
+ * 圆点、方形闪烁动画组件
+ * @param width 可选 string 宽
+ * @param height 可选 string 高
+ * @param borderRadius 可选 number | string 传0为方形、传50%或者不传为圆形
+ * @param background 可选 string 闪烁颜色
+ * @param scale 可选 number | string 闪烁范围，默认2，值越大闪烁范围越大
+ * @returns Component
+ */
+export function useRenderFlicker(attrs?: attrsType): Component {
+  return defineComponent({
+    name: "ReFlicker",
+    render() {
+      return h(
+        "div",
+        {
+          class: "point point-flicker",
+          style: {
+            "--point-width": attrs?.width ?? "12px",
+            "--point-height": attrs?.height ?? "12px",
+            "--point-background":
+              attrs?.background ?? "var(--el-color-primary)",
+            "--point-border-radius": attrs?.borderRadius ?? "50%",
+            "--point-scale": attrs?.scale ?? "2"
+          }
+        },
+        {
+          default: () => []
+        }
+      );
+    }
+  });
+}
diff --git a/Yi.Pure.Vue3/src/components/ReFlop/index.ts b/Yi.Pure.Vue3/src/components/ReFlop/index.ts
new file mode 100644
index 00000000..7c9428a1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlop/index.ts
@@ -0,0 +1,7 @@
+import reFlop from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 时间翻牌组件 */
+export const ReFlop = withInstall(reFlop);
+
+export default ReFlop;
diff --git a/Yi.Pure.Vue3/src/components/ReFlop/src/filpper.css b/Yi.Pure.Vue3/src/components/ReFlop/src/filpper.css
new file mode 100644
index 00000000..a5352433
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlop/src/filpper.css
@@ -0,0 +1,184 @@
+.m-flipper {
+  display: inline-block;
+  position: relative;
+  width: 60px;
+  height: 100px;
+  line-height: 100px;
+  border: solid 1px #000;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 66px;
+  color: #fff;
+  box-shadow: 0 0 6px rgb(0 0 0 / 50%);
+  text-align: center;
+  font-family: "Helvetica Neue";
+}
+
+.m-flipper .digital::before,
+.m-flipper .digital::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: #000;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.m-flipper .digital::before {
+  top: 0;
+  bottom: 50%;
+  border-radius: 10px 10px 0 0;
+  border-bottom: solid 1px #666;
+}
+
+.m-flipper .digital::after {
+  top: 50%;
+  bottom: 0;
+  border-radius: 0 0 10px 10px;
+  line-height: 0;
+}
+
+/* 向下翻 */
+.m-flipper.down .front::before {
+  z-index: 3;
+}
+
+.m-flipper.down .back::after {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  transform: perspective(160px) rotateX(180deg);
+}
+
+.m-flipper.down .front::after,
+.m-flipper.down .back::before {
+  z-index: 1;
+}
+
+.m-flipper.down.go .front::before {
+  transform-origin: 50% 100%;
+  animation: frontFlipDown 0.6s ease-in-out both;
+  box-shadow: 0 -2px 6px rgb(255 255 255 / 30%);
+  backface-visibility: hidden;
+}
+
+.m-flipper.down.go .back::after {
+  animation: backFlipDown 0.6s ease-in-out both;
+}
+
+/* 向上翻 */
+.m-flipper.up .front::after {
+  z-index: 3;
+}
+
+.m-flipper.up .back::before {
+  z-index: 2;
+  transform-origin: 50% 100%;
+  transform: perspective(160px) rotateX(-180deg);
+}
+
+.m-flipper.up .front::before,
+.m-flipper.up .back::after {
+  z-index: 1;
+}
+
+.m-flipper.up.go .front::after {
+  transform-origin: 50% 0;
+  animation: frontFlipUp 0.6s ease-in-out both;
+  box-shadow: 0 2px 6px rgb(255 255 255 / 30%);
+  backface-visibility: hidden;
+}
+
+.m-flipper.up.go .back::before {
+  animation: backFlipUp 0.6s ease-in-out both;
+}
+
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+}
+
+@keyframes backFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+}
+
+@keyframes backFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+.m-flipper .number0::before,
+.m-flipper .number0::after {
+  content: "0";
+}
+
+.m-flipper .number1::before,
+.m-flipper .number1::after {
+  content: "1";
+}
+
+.m-flipper .number2::before,
+.m-flipper .number2::after {
+  content: "2";
+}
+
+.m-flipper .number3::before,
+.m-flipper .number3::after {
+  content: "3";
+}
+
+.m-flipper .number4::before,
+.m-flipper .number4::after {
+  content: "4";
+}
+
+.m-flipper .number5::before,
+.m-flipper .number5::after {
+  content: "5";
+}
+
+.m-flipper .number6::before,
+.m-flipper .number6::after {
+  content: "6";
+}
+
+.m-flipper .number7::before,
+.m-flipper .number7::after {
+  content: "7";
+}
+
+.m-flipper .number8::before,
+.m-flipper .number8::after {
+  content: "8";
+}
+
+.m-flipper .number9::before,
+.m-flipper .number9::after {
+  content: "9";
+}
diff --git a/Yi.Pure.Vue3/src/components/ReFlop/src/filpper.tsx b/Yi.Pure.Vue3/src/components/ReFlop/src/filpper.tsx
new file mode 100644
index 00000000..4519c91e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlop/src/filpper.tsx
@@ -0,0 +1,92 @@
+import "./filpper.css";
+import propTypes from "@/utils/propTypes";
+import { defineComponent, ref } from "vue";
+
+const props = {
+  // front paper text
+  // 前牌文字
+  frontText: propTypes.number.def(0),
+  // back paper text
+  // 后牌文字
+  backText: propTypes.number.def(1),
+  // flipping duration, please be consistent with the CSS animation-duration value.
+  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+  duration: propTypes.number.def(600)
+};
+
+export default defineComponent({
+  name: "ReFlop",
+  props,
+  setup(props) {
+    const { frontText, backText, duration } = props;
+    const isFlipping = ref(false);
+    const flipType = ref("down");
+    const frontTextFromData = ref(frontText);
+    const backTextFromData = ref(backText);
+
+    const textClass = (number: number) => {
+      return "number" + number;
+    };
+
+    const flip = (type: string, front: number, back: number) => {
+      // 如果处于翻转中，则不执行
+      if (isFlipping.value) return false;
+      frontTextFromData.value = front;
+      backTextFromData.value = back;
+      // 根据传递过来的type设置翻转方向
+      flipType.value = type;
+      // 设置翻转状态为true
+      isFlipping.value = true;
+
+      setTimeout(() => {
+        // 设置翻转状态为false
+        isFlipping.value = false;
+        frontTextFromData.value = back;
+      }, duration);
+    };
+
+    // 下翻牌
+    const flipDown = (front: any, back: any): void => {
+      flip("down", front, back);
+    };
+
+    // 上翻牌
+    const flipUp = (front: any, back: any): void => {
+      flip("up", front, back);
+    };
+
+    // 设置前牌文字
+    function setFront(text: number): void {
+      frontTextFromData.value = text;
+    }
+
+    // 设置后牌文字
+    const setBack = (text: number): void => {
+      backTextFromData.value = text;
+    };
+
+    return {
+      flipType,
+      isFlipping,
+      frontTextFromData,
+      backTextFromData,
+      textClass,
+      flipDown,
+      flipUp,
+      setFront,
+      setBack
+    };
+  },
+
+  render() {
+    const main = `m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`;
+    const front = `digital front ${this.textClass(this.frontTextFromData)}`;
+    const back = `digital back ${this.textClass(this.backTextFromData)}`;
+    return (
+      <div class={main}>
+        <div class={front} />
+        <div class={back} />
+      </div>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReFlop/src/index.vue b/Yi.Pure.Vue3/src/components/ReFlop/src/index.vue
new file mode 100644
index 00000000..52ae7d5c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlop/src/index.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import flippers from "./filpper";
+import { ref, unref, nextTick, onUnmounted } from "vue";
+
+defineOptions({
+  name: "ReFlop"
+});
+
+const timer = ref(null);
+const flipObjs = ref([]);
+
+const flipperHour1 = ref();
+const flipperHour2 = ref();
+const flipperMinute1 = ref();
+const flipperMinute2 = ref();
+const flipperSecond1 = ref();
+const flipperSecond2 = ref();
+
+// 初始化数字
+const init = () => {
+  const now = new Date();
+  const nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
+  for (let i = 0; i < flipObjs.value.length; i++) {
+    flipObjs?.value[i]?.setFront(nowTimeStr[i]);
+  }
+};
+
+// 开始计时
+const run = () => {
+  timer.value = setInterval(() => {
+    // 获取当前时间
+    const now = new Date();
+    const nowTimeStr = formatDate(new Date(now.getTime() - 1000), "hhiiss");
+    const nextTimeStr = formatDate(now, "hhiiss");
+    for (let i = 0; i < flipObjs.value.length; i++) {
+      if (nowTimeStr[i] === nextTimeStr[i]) {
+        continue;
+      }
+      flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
+    }
+  }, 1000);
+};
+
+// 正则格式化日期
+const formatDate = (date: Date, dateFormat: string) => {
+  /* 单独格式化年份，根据y的字符数量输出年份
+     * 例如：yyyy => 2019
+            yy => 19
+            y => 9
+     */
+  if (/(y+)/.test(dateFormat)) {
+    dateFormat = dateFormat.replace(
+      RegExp.$1,
+      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+    );
+  }
+  // 格式化月、日、时、分、秒
+  const o = {
+    "m+": date.getMonth() + 1,
+    "d+": date.getDate(),
+    "h+": date.getHours(),
+    "i+": date.getMinutes(),
+    "s+": date.getSeconds()
+  };
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(dateFormat)) {
+      // 取出对应的值
+      const str = o[k] + "";
+      /* 根据设置的格式，输出对应的字符
+       * 例如: 早上8时，hh => 08，h => 8
+       * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
+       * 例如: 下午15时，hh => 15, h => 15
+       */
+      dateFormat = dateFormat.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? str : padLeftZero(str)
+      );
+    }
+  }
+  return dateFormat;
+};
+
+// 日期时间补零
+const padLeftZero = (str: string | any[]) => {
+  return ("00" + str).substr(str.length);
+};
+
+nextTick(() => {
+  flipObjs.value = [
+    unref(flipperHour1),
+    unref(flipperHour2),
+    unref(flipperMinute1),
+    unref(flipperMinute2),
+    unref(flipperSecond1),
+    unref(flipperSecond2)
+  ];
+
+  init();
+  run();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+});
+</script>
+
+<template>
+  <div class="flip-clock">
+    <flippers ref="flipperHour1" />
+    <flippers ref="flipperHour2" />
+    <em>:</em>
+    <flippers ref="flipperMinute1" />
+    <flippers ref="flipperMinute2" />
+    <em>:</em>
+    <flippers ref="flipperSecond1" />
+    <flippers ref="flipperSecond2" />
+  </div>
+</template>
+
+<style>
+.flip-clock .m-flipper {
+  margin: 0 3px;
+}
+
+.flip-clock em {
+  display: inline-block;
+  font-size: 66px;
+  font-style: normal;
+  line-height: 102px;
+  vertical-align: top;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/index.ts b/Yi.Pure.Vue3/src/components/ReFlowChart/index.ts
new file mode 100644
index 00000000..0af0e0e9
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/index.ts
@@ -0,0 +1,17 @@
+import control from "./src/Control.vue";
+import nodePanel from "./src/NodePanel.vue";
+import dataDialog from "./src/DataDialog.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** LogicFlow流程图-控制面板 */
+const Control = withInstall(control);
+
+/** LogicFlow流程图-拖拽面板 */
+const NodePanel = withInstall(nodePanel);
+
+/** LogicFlow流程图-查看数据 */
+const DataDialog = withInstall(dataDialog);
+
+export { Control, NodePanel, DataDialog };
+
+// LogicFlow流程图文档：http://logic-flow.org/
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/Control.vue b/Yi.Pure.Vue3/src/components/ReFlowChart/src/Control.vue
new file mode 100644
index 00000000..e0f46fb8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/Control.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, unref, onMounted } from "vue";
+import { LogicFlow } from "@logicflow/core";
+
+interface Props {
+  lf: LogicFlow;
+  catTurboData?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lf: null
+});
+
+const emit = defineEmits<{
+  (e: "catData"): void;
+}>();
+
+const controlButton3 = ref();
+const controlButton4 = ref();
+
+const focusIndex = ref<Number>(-1);
+const titleLists = ref([
+  {
+    icon: "icon-zoom-out-hs",
+    text: "缩小",
+    size: "18",
+    disabled: false
+  },
+  {
+    icon: "icon-enlarge-hs",
+    text: "放大",
+    size: "18",
+    disabled: false
+  },
+  {
+    icon: "icon-full-screen-hs",
+    text: "适应",
+    size: "15",
+    disabled: false
+  },
+  {
+    icon: "icon-previous-hs",
+    text: "上一步",
+    size: "15",
+    disabled: true
+  },
+  {
+    icon: "icon-next-step-hs",
+    text: "下一步",
+    size: "17",
+    disabled: true
+  },
+  {
+    icon: "icon-download-hs",
+    text: "下载图片",
+    size: "17",
+    disabled: false
+  },
+  {
+    icon: "icon-watch-hs",
+    text: "查看数据",
+    size: "17",
+    disabled: false
+  }
+]);
+
+const onControl = (item, key) => {
+  ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
+    (v, i) => {
+      const domControl = props.lf;
+      if (key === 1) {
+        domControl.zoom(true);
+      }
+      if (key === 6) {
+        emit("catData");
+      }
+      if (key === i) {
+        domControl[v]();
+      }
+    }
+  );
+};
+
+const onEnter = key => {
+  focusIndex.value = key;
+};
+
+onMounted(() => {
+  props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
+    unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble;
+    unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble;
+  });
+});
+</script>
+
+<template>
+  <div class="control-container">
+    <!-- 功能按钮 -->
+    <ul>
+      <li
+        v-for="(item, key) in titleLists"
+        :key="key"
+        :title="item.text"
+        class="dark:text-bg_color"
+        @mouseenter.prevent="onEnter(key)"
+        @mouseleave.prevent="focusIndex = -1"
+      >
+        <button
+          :ref="'controlButton' + key"
+          v-tippy="{
+            content: item.text
+          }"
+          :disabled="item.disabled"
+          :style="{
+            cursor: item.disabled === false ? 'pointer' : 'not-allowed',
+            color: item.disabled === false ? '' : '#00000040',
+            background: 'transparent'
+          }"
+          @click="onControl(item, key)"
+        >
+          <span
+            :class="'iconfont ' + item.icon"
+            :style="{ fontSize: `${item.size}px` }"
+          />
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+@import url("./assets/iconfont/iconfont.css");
+
+.control-container {
+  background: hsl(0deg 0% 100% / 80%);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
+}
+
+.control-container ul li {
+  margin: 10px;
+  text-align: center;
+}
+
+.control-container ul li span:hover {
+  color: var(--el-color-primary);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/DataDialog.vue b/Yi.Pure.Vue3/src/components/ReFlowChart/src/DataDialog.vue
new file mode 100644
index 00000000..5740527e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/DataDialog.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+
+defineProps({
+  graphData: Object
+});
+</script>
+
+<template>
+  <vue-json-pretty
+    :path="'res'"
+    :deep="3"
+    :showLength="true"
+    :data="graphData"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/NodePanel.vue b/Yi.Pure.Vue3/src/components/ReFlowChart/src/NodePanel.vue
new file mode 100644
index 00000000..53d0d5c1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/NodePanel.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { LogicFlow } from "@logicflow/core";
+
+type nodeListType = {
+  text: string;
+  class: string;
+  type: string;
+};
+
+interface Props {
+  lf: LogicFlow;
+  nodeList: Array<nodeListType>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lf: null,
+  nodeList: null
+});
+
+const properties = ref({
+  a: "efrwe",
+  b: "wewe"
+});
+
+const nodeDragNode = item => {
+  props.lf.dnd.startDrag({
+    type: item.type,
+    properties: unref(properties)
+  });
+};
+</script>
+
+<template>
+  <!-- 左侧bpmn元素选择器 -->
+  <div class="node-panel">
+    <div
+      v-for="item in nodeList"
+      :key="item.text"
+      class="node-item dark:text-bg_color"
+      @mousedown="nodeDragNode(item)"
+    >
+      <div class="node-item-icon" :class="item.class">
+        <div
+          v-if="item.type === 'user' || item.type === 'time'"
+          class="shape"
+        />
+      </div>
+      <span class="node-label">{{ item.text }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.node-panel {
+  position: absolute;
+  top: 10px;
+  z-index: 101;
+  width: 60px;
+  padding: 20px 10px;
+  text-align: center;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 0 10px 1px rgb(228 224 219);
+}
+
+.node-item {
+  margin-bottom: 20px;
+}
+
+.node-item-icon {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: 30px;
+  background-size: cover;
+}
+
+.node-label {
+  margin-top: 5px;
+  font-size: 12px;
+  user-select: none;
+}
+
+.node-start {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAPNUlEQVR4Xu1dfYxdRRU/577dNtA2IP7BR4gSpVn67rzSRCNQWUQh/QBqEfVPUKOpfAloqPLRREgKi0IMyFdpJGr7p4qt2A8ICFLkK5Ise899ZUMlaBqgfwg2bSHt2zfHnO1seX3d3Tcz99737nt7J3l5+3HmzJlzfndm7pkzcxB6sFQqlc8BwFla6wFEHAAA+Rzf8Dmu4WfRwEfm83HDz/K3UWYeDYJgFADejKLo7V5TF3Z7hxYuXDhHa30hAKwAgC8bY/dn1K+agAIA/gEATwZB8PzIyMiBjNpqC9uuBEAYhmcj4lcA4KuIuIKZS23RVlMjiFhn5icB4Dlm/nscx290Qo4kbXYNAMrl8jlBECxHxGXMfE6STmdVFxFfZebtWutt1Wr11azaSZNvrgHQDUafyhjdAoZcAkApdRkArDLzepqA7xQvmSbWE9FfOyXAlEDNk0A9aPhm9eYOCLkYAWaA4XMLhI4CYNGiRWfUarVbEVGG+xlXmHl9f3//0PDw8Dud6nzHABCG4XWIeAsAnN6pzuek3d3MfE8cxw93Qp62A6BcLp8fBMGtAHBJJzqc4za3aq2HqtXqi+2Usa0AUErdDAD3trODXdjWaiK6r11ytwUASqmTjeGvbFfHAGAXM7+FiLsAYPy7Xq9/gIj7mHk/Iu6Xb5EHEecy81zzPa9UKp3EzGcCwHz5RsT5ACC/t6tsBAABwp6sG8wcAEqpJcb4CzPsjBhzByLu0Fq/WK1Wd2TRVrlcHgyC4HxmHkTEQQCYm0U7hueIAcHTGbYBmQIg4yF/DzNvDoJgc71ef6FarY4/ze0q5XJ5bqlUukBrvRIRVwKAjHJZlEynhMwAoJR6BACuSVsjxuibAGBzFEUfps3fh1+lUvkUAKzUWl9uwODDZro6jxLRtWkzHZ/+smCqlBKX56Vp8pZ35iAI1kdR9HqafNPmValUvqC1XpWBb2MLEYmLPNWSOgCUUjJ3VdKSslsM39zfjIAQEVGqa6lUAaCU+h8AnJCS8Z9AxLvz/sS36qsAgZlvA4ArWtFa/n8vEZ1oSduSLDUAKKXeT2MhhIjvMvNaInq0pfRdRKCUugYR1zDzaSmIvYeITkmBTzprAKXUUwAgr3tJy4Z6vb52586dbyVllMf6CxYsmF8qldYAwFUpyPc0ES1NyifxCKCUuh8AbkwoiLzCyevOuoR8uqK6Uupq4xtJ6kd4gIhuStLpRAAIw3DIbOgkkeElY3z5njFFKbXYgEC+vYvZSJK9Fa/iDYCUnDzrtNar2+3E8dJUBpXEmRQEgeyNyIiQpHg7i7wAYNy7Mu8nKbcT0d1JGPRKXaWUvCXclbA/S4nI2W3sDACzsSMNJXkfvZGIfp2wwz1VXSl1AwA8kKBT4n9Z4rqB5AOADQDgvauHiIujKHo5QUd7tmqlUjmPmZOshTYSkdMbhhMAks77ROTUXs9aukXHlFKcoO9O6wFrg5hIHu9tVmaeH8ex7M0XpYUGwjCUGARvX4jWetA2ssgaAEqpLb5hXIh4SRRF2wrL22ugUqksZ+at9jWOotxKRFabcVYAMAGcD3kKcwMRPehZd0ZXU0r9CAC8FsvMfL1NoGlLAEjo9tjYmAz9PtG764go9ZiAmYQKpZTsifj4CXb39fUNtgo5bwmAMAwf89zbfklrvXSmOnnSAqlxFonPxdljKFvpcRz/cDpZpgWAObEjx5lci/j2xTGR5JXGtc2epTduYwGBz97BiunOJLYCwF88D2heM1M2dtqFOrOB5LNF/iQRfX0qOacEQIKnfwMRfaddiplJ7Silfu+5lTzlKDAdAJyffgnmGBsbu7BX9/M7DTaJJ+jr63veI6hkylFgUgAkePqv7bVInk4bvbl9iSwCAIm4di2TjgJTAcD56QeAJ4jom65SFfTuGlBK/ckjxnDSUeAYAJhrWV5xFQsRv9jtAZyufe4UvQk0/adr+1rrc5vvLjoGAEqpnwPAHS7Mbd43XfgVtK014OmfuYOI7mzkfgwAKpXKK663cBVPf2uDpU3hMwrIxVVRFJ07JQB8hv/i6U/btPb8fEaB5mngqBFAKSVDv0wB1qV4+q1VlTqhzygAAHcS0ZEp/igAuA7/clAzjuPLU+9ZwdBaA2EYbnI5kNo8DRwBgA+aEPF7URT9zlragjB1DVQqle8y829dGDeO2kcAEIbhTxHxFw6M9iDigrwc0XaQu6dI5Wg6M+90OZbHzD+L4/iXoogjAHA93lUs/vKDI4/F4JFjZeMAGBgYmNff3y8newPbbiHipVEU+YYs2TZT0FlooFKpXMLMErJnW3StVjtxdHR03zgAFi5c+C2t9R9sawPAgVqtdqowcKhTkGakAfMAvwcAc2ybCILg2yMjI38cB4BS6jcA8H3bynI/PhF9zYG+IM1YA0qpv0n+BIdmHieiH0wAIBIcOFQeIiI5zlSUnGhAKSXH7FwOiRIRVSYAcAgArNOsBEFw8cjIyLM56XshxuFp/CKt9TMOyqgR0SyUBEvM/C+HilCc8HHRVvtoXU8UIeLnBQCuK8hdRCQ3ZxYlZxpQSslpIusbTeVNDsMw/DEi/sq2L8y8LY7j4qJnW4W1kS4Mw62IuNy2SWb+CSql5FqWaWPHmxg+SERylLkoOdOAUkpOEclpItvymADgOQCQvHu2pTjqZaupNtN5HCV7XgAg6c2+ZCtrcdDTVlPtp/M4UPqaAMDJBzBZXFn7u1q0OJkGPAJ6SAAgr4CSa9eqMHMYx3HVirggaqsGwjAsI2Ls0OjbAoB3AeBU20pa689Wq9X/2NIXdO3TQLlc/kwQBP92aPE9AYDT/b7M/Ok4jj9waKQgbZMGwjA8CRH/69DcXgGAkxtYaz27Wq1KnaLkTAPlcnlWEAQHHcSqFQBw0FbeSX0BUEwBebespXy+U0CxCLRUcN7JfBeBxWtg3i1rKZ/va2DhCLJUcN7JfB1BhSs475a1lM/XFVxsBlkqOO9kvptBxXZw3i1rKZ/XdnAREGKp3S4g8woIKULCusCyliJ6hYQVQaGW2u0CMq+gUOmXx37ABVll6O4CPedSRJPZ/AUH4Q6HhRsAOPkCAOA2IhpyaKwgzVgDSik5FOKSg+mogyFObwJFZHDG1vRg77oABIDHiOjqiRFAkgtIxm/bsl9rfWpxE7iturKlMzeKy+FQl8ukLyOiLROng+cw815mLtmKWhwPt9VU9nSub3KIWEfEE0ZGRg40XhDxZwCwvu+nuCAie8PatuBxQcQmIvqG8G8EgGveuuKKGFsLZUjnc0WM5HqeyNvYeEfQ2Yg47CJrcUmUi7ayofW5JIqZF8Vx/MZRI4D8UlwTl42RsuSa2jVxxh9QXBSZpbVS5u1ztd+0F0V6BBRAsRhM2aoO7DwWfzDtVbE+08D4PFJcFe9gtnRIfZ7+lpdF+04DxSiQjlFduPg8/c3D/zGLQPmDzzRQjAIupktO6/P0S6tWCSPMKFCkjElup8w4ZJoyxgDgMgDwSRhZJI3KzOyHGbclaZTvKFCkjcvW+m1LG5dwFCgSR2aEg7YmjvQdBUzfi9SxKYOg7aljE44CRfLoFAHQseTR0gfP902pWqSPTwEEHU0fL/IvWrTojLGxsR0AcLpHf9YRkaQ6LYqnBpRSkjH8ao/qu/v6+gaHh4ffma7utOnjJyqGYXgdIj7kIYRUuZ2IXIIVPZvpvWpKKbmR/S6fnjHz9XEcP9yqrhUAzHpAMlL4XhF7JAChlUDF/w9rQCnlGqDTqLqtRCRxni2LNQDK5fL5QRDIVOBVEHFxFEUve1WeYZUqlcp5zPySb7e11oPVavVFm/rWADCovBkA7rVhPBlNcc28neZcT/g0cV1NRPfZtdQQE2hbQSm1AQCutKVvpmPm+XEc7/Kt38v1wjA8ExHlynffspGIrnKp7DQCmFHgZAB4WpJUuDTUSFvcN3ys5jwud2hmMgIAS4hoj4tdnAFgQLAEAJ5yaWgS2uLWcaMUj4sdJlP9UiKSB9OpeAEgjfWAkXKd1nr1TD1hZJw8sqbyec9vNLTTvH/UaOwElyZipdQjAJDU0SOrXemA96o3SR86Vde4d8X4ixPK8CgRXevLw3sEmGhQKSVnCq3eOacRUvYOBARySLXni9nYEeO7nOWbTC9biEhiN7xLYgCY6UAWIBVvKT6puKFer6/duXNnkpVwCmJkw0L280ul0hoAcFqpTyFNRETeC/EJnqkAwIDA6crZqVQsQSXMvJaIxAfeM0UieRBxDTOflkKn9hLRiSnw+eRsYBrMlFLvu6Qxb9HmE4h4dxRFr6chW6d4mABO8elfkZIMe4jolJR4pQsAMxLI66G8JqZSJOQ8CIL13QYEMbzWehUirkpFEYeZHEn7nhbP1KaARoGUUvfLCdS0hBQ+3QKEjAwvKniAiG5KU6fCKxMACOMwDIcQ8Za0BWbmzUEQbAKAzVEUfZg2fx9+ckQbAFZqrS9HxJU+PKarw8z3xHHskhjaWoTMAGCmg0SbRy16sceAYfOhQ4d2jI6O7rPudQqEAwMD82bNmjWotV5pjC4u8iyKt5PHRphMAWBAIOsBeedN/MoyTYcOAMBrAPBKEATPZpXZ3GTovggAzjW5FufYKNmTRl6txfjO7l2X9jIHgAGBPB0CAu9dRJdOGdpdzPwWIsrO4/h3vV7/ABH3MfN+RNwv3+PzIOJcZp5rvueVSqWTmFmSMM+Xb0SUZNnWSZk9ZG2ustEY32ljx6fdtgBgQjClVJZTgk//81gn0yG/ucNtBYA0biKLZEHjG16WR6OlIdNWrfWQbSRPGg2Oj35pMXLlYwJN5S3BJ9rYtbk80+82q/yWAZxZdKJjAJDOSMh5rVa7NWVnSRZ6yoSn+Db6+/uHWoVuZ9K4YdpRADSsDWRHSzxmK7LsbI54y8nr9UTkcjtrJuLnAgAzCAi5MfyEznMFgB4GQu4Mn2sATAhnrqtZhojLmfmcTMbAjJjKhUxyq7rWenu1WpXMbLksuRwBJtOUAcNyRFyWVzAYo2/XWm/Ls9Eb9ds1AGgU2uy4XYSI4pa9GACCDj1eGgCeYeZnxQXdbVvWHfUDpGUw2ZSZPXv2Uq31MgCQaWIAAPrT4t/EpwYAowDwahAE2w8ePPhUuzeh0u5XV44ArZQgibAA4Cyt9QAiCiDkc3zD57iGn4XdR+bzccPP8rdRZh4NgkCM/mYURW+3arvb/v9/ctufM1+QXgwAAAAASUVORK5CYII=")
+    no-repeat;
+  background-size: cover;
+}
+
+.node-rect {
+  border: 1px solid black;
+}
+
+.node-user {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAosAAAIDCAYAAABsCVSiAAAgAElEQVR4nOzdWYxk51k38P85p86pfeullhnb44njLV4S2/E4kMFOMjEhIbFMJCSUIAJcREJwkzuEuAAuQNwgIcEVyU2kJEhIBCT8ZSWxjR0cj7eMjdex8diern3fzn6+C/OenKqumumuru6u6v7/JKun3VWnqrtO1fuc533f55E8z/NARERERDSFfNhPgIiIiIiWF4NFIiIiIpqJwSIRERERzcRgkYiIiIhmYrBIRERERDMxWCQiIiKimRgsEhEREdFMDBaJiIiIaCYGi0REREQ0E4NFIiIiIpqJwSIRERERzcRgkYiIiIhmYrBIRERERDMxWCQiIiKimRgsEhEREdFMDBaJiIiIaCYGi0REREQ0E4NFIiIiIpqJwSIRERERzcRgkYiIiIhmYrBIRERERDMxWCQiIiKimRgsEhEREdFMDBaJiIiIaCYGi0REREQ0E4NFIiIiIpqJwSIRERERzcRgkYiIiIhmYrBIRERERDMxWCQiIiKimRgsEhEREdFMDBaJiIiIaCYGi0REREQ0E4NFIiIiIpqJwSIRERERzcRgkYiIiIhmYrBIRERERDMxWCQiIiKimRgsEhEREdFMDBaJiIiIaCYGi0REREQ0E4NFIiIiIpqJwSIRERERzcRgkYiIiIhmYrBIRERERDMxWCQiIiKimRgsEhEREdFMDBaJjinP8w77KRAR0QpgsEh0RF0tGJQk6dCeBwNVIqLVwWCR6IgTgdk8AZrneXsO7CRJ2nYMEahe6dizfsZAk4joYDFYJDoigkGU53l+QBb8Ohn8zQokxe0kSZoa7O3W5DHEv6907Fk/O6iMKBERvU/yeJlOdKQFA0fBtm0/IHQcB47j+P8fgP+967oAfhm4ua4L13Uhy7L/PQDIsjwW3IVCobFAT5bfvy5VFMX/ufgq7itJkn8/BoRERMsjdNhPgIgWb1pmEQAMw4Bt22g0GjAMA9VqFZZloV6vQ9d1NJtNGIaBdrsNx3Gg6zo8z/O/Gobhf3UcB6ZpQpIkqKoKRVGgaRpkWfa/D4fDkGUZ4XAYoVAImUwG4XAYa2triEajWF9fh6Zp2NzcRDgcxvr6OkKhEDRNY8BIRLQkGCwSHSGO4/jZQtd1YZqmnw20bRuGYcCyLNRqNViWhWq1CsMw0Gg0YJomarUaTNNEu932by+CwuDxxFcRPEYikW1BoiRJ24LF0WiEcDgMy7IQDodhGAYikQgcx0EoFIJlWVBVFZFIBIqiQFVVyLKMUCjkB6UA/MwmA0oiov3HaWiiI8JxHNRqNei6jnfeeQfD4RCXLl3CcDjEO++8g9FohHK5DNu2/aDSdV14nudPS4vvxTT05DpDMe0sArXgNHVwfWNwWlqSJD+4UxTF/15MO0uS5E9PK4qCUCiEa665BrFYDDfccAPi8ThOnTqFWCyGa665BuFwGKlUyp/aJiKi/cXMItEKMk0Tnuf5GT7LsmBZFiqVCkajEUqlEobD4djX0WiESqXir0vc68aVyUAy+L0IIucRCoWgKAri8Tji8ThisRg0TUM8HoeiKIhEIjBNE6FQyM88imlrsRaSiIgWh5lFogNytWnTnf7csiy8+eab6Pf7ePXVV9Hr9fD6669jOByiXC77gaOYinYcx88cikBxmQR3RouvwWlnMQ0tvqqqiuuvvx7xeBw33XQTkskkbrnlFsTjcZw8eZIBIxHRgvFTleiAXG19XbD2oPi3CPIsy/LXChqGgUqlgl6vh1Kp5H8dDoeoVCr+FPK0cjWTZXSWweTfRfy+wPsZVHGb4E7rcDiMeDyOVCqFwWCAdDqNRCIBTdMQDof9jTYi4yimuXeCayGJiMYxs0h0gHYaiIj1gdVqFcPhEC+//DI6nQ5eeeUV9Ho9vPXWWzBN05+Gtm3bzyIGaycGA1BZluG67lIGQmL9o1jbCPzy+YufiectyzIURfEzjWIXdjgcxk033YREIoFbb70VyWQSN910E2KxGHK5nL9OkoiIdoeZRaIDFAxWRDAU/CoyiJZl+aVt+v0+yuUyOp0OSqUS+v0+Go2Gn30Txw0W0gYwFniJf4uAUWwOWYZrxVmBovh+MsAWu7uBX67dBABN05BIJJBMJpHJZNDv9/2Mo6qqCIfD/rS2qqoMHImIdoiZRaIlINYTXrp0Cd1uF+fPn0er1cLTTz+N4XDoB5GGYQCA//1kwBOcrp2WxVzGKdZgoBsMZnfS5WVScMOL+BqNRnHmzBlks1nce++9SCaTOH36tL+2cdbfZBn/VkREh4GZRaIDNBmAmKbpb0ARu5g7nQ7K5TKazSaq1Sp0XffvC4xvBJkUDCCDPw9mMJdNMPspnn8w2zqtr/S0tZjBtY4iqAaASCSCcrkMwzCwtbWFdDqNdDqNSCQyVkx80jL+rYiIDgMzi0QHKBiwmaaJixcvotPp4Omnn0ar1cIvfvELDAYDGIYB13X9zimzjrEby7SpZS/m+T2i0ahfHDwWi+EjH/kIstkszpw5g1QqhZtuuskv+C0sa3BNRHTQmFkkOkCiILZhGGOZRPFVdFS5knkDmKMQKALz/R6j0QgAMBgMMBgMUKlUoOs6tra2MBwOsb6+jmg0OtaJZtbfmUEkER03zCwSHRCxJrHdbuOxxx5Ds9nEhQsXMBqN/Eyi+MpgZH+JoFBkGu+44w6sra3hgQceQDqdxqlTp7ZlGomIjitmFokW4ErZJs/zMBgMoOs6yuUyWq0WyuUyGo0G6vX6tlqCwb7HvJbbH6Kn9XA4xGAw8Nc0lkol6LqOTCaDSCSCWCzGtoJEdOwxs0i0QMGgUWQKB4MBHn/8cdRqNfzoRz/yp0Idx/E7rTCTeHgkSYKmaVAUBdFoFKlUCufOnUMul8Ov/dqvIZFIIBwOM2gkomOLmUWiPZjMKIpsoGEYcBwHrVYLvV4PW1tbqFaraDabfqAYvD/Xwe2fYGFy8f3kbmqxTlTXdZimia2tLdi2jXq9DsMwsLa25u+a5utFRMcNM4tEC2YYBp577jm0Wi089thjaLVauHTpEnRdx3A43FbeJlguRvw/TkEfrMlWiPF4HOFwGNddd52/lnFtbQ1333331DI7RERHGTOLRAvguq6/NnEwGKBWq6Fer/u9mzudDizL8gNBYTJDFexaQvsn2Epw8jXwPA+9Xg+6rqNWq8EwDJTLZdi2jUajgXg8jng8zvaBRHRsMLNItEciuOh2u/jhD3+IWq2GJ598EoPBAKPRyO/ZLG5LB2enGdppt5MkCYqiQFEURCIRxONx3H///cjlcvjc5z6HZDKJcDi8X0+diGhpMLNItAeGYfgZp3a7jUqlgmq1ilar5df2O0yz1lSKn81qq3e1IGsva/b2OsU+67GnHXenjzPtdqIFo23bMAwDpmmiXC7DdV3UajXYto1MJgNFUVhmh4iONGYWiXZoWqu+//mf/0Gz2cQPfvADNJtNvP3229B13S/NctDP6Wo/C/ZfDm78mCzbM+0+V/t9pj3ebjJ7k63+dnuMWc9hLybXMkYiEUQiEdxyyy1YX1/Hb/7mbyKbzV61LiM3xBDRKmNmkWiHgsHVYDDAcDj01yaWy2V0Oh30+33Ytn1ggcFkwDftZ9MyhqFQCJIkQZZlyLIMRVH8gFB8D2BsXV7wa/A/8fjA+2s3xffB4E+UB3Icx1+TKTJ34rYiiJ38fcRtp631nLXmc1GCx/M8D6PRCLZto1qtwrIslMtlWJaF9fV1RCIRRKPRqcdhoEhEq4yZRaIrCAZZwnA4xPe//31UKhX86Ec/QrfbxWg0guM4fjB00M/xasFI8DahUAipVAqapuGaa66BqqrIZrNQVRXpdBqapvlfU6kUZFn2i1OHw2G/HqEsy4hEIpAkyd/lLablRScaEVz1ej2YpolutwvDMPwNP61WC5ZloVQqwTRNNJtNf32nCCCDdSuv9HvuZhp9XsG/oaIoWFtbQzqdxkMPPYRcLod7770XsVhs4Y9LRHSYmFkkuoJgcOK6LrrdLrrdLsrlMiqVChqNBgaDwbbbB6dV91twWlk8nsgYiqBGfK+qKhRFwcbGBsLhMAqFAsLhMNLptB80hkIhZDIZhEIhZLNZv75gKBTyg8VIJOJ/BeBv5NF13Q8WHceBaZp+vUnbthGLxWBZFiKRCGzbRjQahWEYkCQJpmlCURS4rgvLsgC8P9Xvuq7/M9u2p/4NJoPERQWKk9PQ4rimaUKWZTQaDZimiVKpBMdx0O124TgOEokEe0sT0ZHBzCLRDnW7XXz7299GqVTC+fPn/anoZXsLiYxXJBLB6dOnEYvFcO211yIej/vf5/N5hEIhqKo6NqUsgkrxbyEUCo0FOeJnV5qGBuBnWkWgJUoMua7r/9vzPFiW5W8UGo1GuHTpEvr9Pi5duoTBYIA33ngDw+EQnU7HzzwehsmLAPF3isViSKVSeOCBB1AsFvGFL3wBiUTi0J4nEdEiMbNIdBWu66LX66HZbKJcLqNaraLT6cA0zUMPFEXQpmkaZFmGpmlQVRWFQgGxWAzFYhHxeBwnTpxALBbz/38+n19o+zoRPIm1jgD8tZHi31fLpjmOA1VV/S4qg8HA/9rr9TAajSBJEmzb9jOWlmUd6Gswbe2k4zjo9XqwbRuVSgUA/On0ZDLJNoFEtPKYWSS6ik6ng29961solUp46qmnMBwOYVmWn0ULOuguLKFQCJFIBLfeeivS6TQ+9KEPIZVK4c4770Q0GkUkEvGnn4MbWYJB3TIRmUix8UVMQ4ss7oULF9DpdPDiiy+i1+vh1Vdf9Vv1AfszxbvTHeeSJCEajSIWi+Guu+5CoVDA7//+7yOdTu/r8yMi2m/MLBLN4LouWq2Wn1GsVCoYDodjwcmkyazTvGYFmmKaWKwdjMfjiEajKBaLSKfTOHHiBJLJJHK5HMLh8MrV/xNBrMhIRqNReJ7nr20UmdF6vY54PO5PW4sNNbquj+1envw7XmkTzKy/+dU21Qie52E4HMJxHD/DWK1W4TgOMpnMVTu+MJAkomXFzCLRFJ7nodVq4e///u9RLpdx8eJFGIZxIPUTrxQoJpNJxONxnDlzBtlsFvfccw8SiQQKhQJUVR2bjj5KgYdY2yimn03ThGVZuHjxIrrdLp5//nm0Wi0888wz0HXdn56eLMEzbbPK5OPs9e8mMrnhcBg33HADCoUCvva1r2FtbY0BIRGtJGYWiQJEgNFoNFCr1VAqlVCtVv2p5/0a6Cc7q4ivYtpYZAlzuRySySSKxSKy2SwKhQLi8Tiy2eyR7lUspvXF7ut4PA7btv1M44kTJxCJRJDP5/3+3LZt+5lGUYYn+LedVhZpt3UapxUQFyWEXNdFpVKB53kol8twHAfr6+vbHpOIaNkxs0g0oVar4c///M9RqVRQr9dh2zYsy9pWomaRbx0RZIhgRQSKqVQK8Xgc9957L9bW1vCxj30MyWQSm5ubfvZK9DA+LoIBmm3bfqbRMAxsbW2h0+ngueeeQ7vdxjPPPIPhcOhvQFEUZUfT0Lt9fSd3hQuhUAihUAjr6+soFov4q7/6K+RyuR3/fkREy4CZRaL/43me342lUqn42SAxeE/WMlz0Ywc7ksRiMaiqis3NTSSTSRQKBayvr/uZxGQyeWCbaJbJZCAlgrFwOIxYLAbbtpFIJLC1teXXkez3+wDeDyyDNTGDf7e91mkMTnkHA0cRzFarVUiShGq1ClmWsba2NnOXNANFIlo2zCwS/Z96vY6//Mu/RKlUwuXLl8da0wH7W2g7GChGo1GcPXsWGxsb+PjHP450Ou2vSRQdUyYDjeOajZr8vcVrJtYtVioVdLtdPPnkk6hWq/jZz36GwWBwoH8vkSUOhUI4ffo0isUi/vRP/xQbGxsH8vhERHvFzCIde2LXc6VSQaVSQa1Wg23bfmmcyTVp4uuirrMkSYKmaX4bPbFhZXNzE4VCAYlEwm+7d6VjHHWz+kMHien4RCLhF/6ORqMoFAqQZRkbGxuIRCL+ruX9qNM4rXC367p+T2lJklCv16EoCtLpNOswEtHSY2aRjr1ms4m/+7u/w9bWFt544w1/c8Isi85KhcNh3Hnnnchms/j4xz+ObDaLG2+8EZFIBLFYbGomcT+fz1EiNrcMh0Pouo433ngDrVYLTz75JFqtFi5cuLDvdRqDRLeXu+66C8ViEV/96leRyWT27fGIiBaBmUU6tlzXRafTQaPRQLlcRq1Wm1pyZdIiggkRAIpMYj6fx9raGk6cOIFUKoVMJrPjGokMFGcTm3+SyaS/W1pkGjVNQzab9Qt+By8Q9itoFH2uq9UqgPcvVCRJYqcXIlpqzCzSsTEZALTbbXz961/H1tYWXnjhBQyHQ9i2vevj7mRKerLGn6IoSCQS+PznP49cLof777/fD2hEnT5aPNF5R9d19Ho9PP7446hWq3jkkUfQ6/X8NY9X4nnerkvsBInXPx6P4+zZsygUCvjyl7+MVCrFLDERLSVmFulImwzSgPezO/1+H61Wy6+jOBqN5goUg48xq3Yf8MseziIQTKVS/saVzc1NrK+v+5tXaHEmgy8RhGua5u+WFmsZVVVFp9OB4zhwHGds3eFOCnrvhqgBWavVIEkSms0mgPfXWvIcIKJlw2CRjrTgLmPxdTAY4F/+5V9QLpdx4cIF9Pt9P1Cc1fFjlslAcfL2wZ+FQiGcPHkS2WwWn/3sZ7G5uYk77rgDkUjEr5dIizX5WgbL22iahl/5lV+BrusoFotoNBp45JFH0G63cfny5W3H2UlrwKsJFgW3LAsvvPACEokENE1DPp/Hb//2byOVSo3dnucFER02Bot0pE1mhEajEXq9HqrVKsrlMkajESzL8m8fnF7cySA9bad0kCi0HQ6HEYlEsLm5iY2NDZw4cQJra2tIJBJ+tmsyoGGgsBjTsssA/DWjoVDIL00kvrZaLei6DtM0tx1DfD8PcQxR4N00TQyHQ5TLZQBAv98fK5HE15+IlgHXLNKxMRqN8POf/xylUgnf/va30Wq1YJqmP90ovs4TpM26jyRJCIfD+PCHP4zNzU08/PDDyGaz2NzcRCgUgqZpi/r1aJeCr5lpmrBtG7VaDc1mE9/97ndRr9fxi1/8AqZpTs0q7uY8mcxEBi8IxMVEJpPB7/7u7yKfz+NjH/sYlyUQ0dJgZpGOheAasVqthn6/j9Fo5K8lnJV92qlp3VREJxax21l0YUmn04hGowwEDlnw769pGlRVRTabhaIoKBaLkCQJ8XjcnzKe7N29m9dv8ppcZLDFOWMYBgaDAWq1GmRZhmEYUFUViqJctbYkEdF+Y7BIR55t27h8+bK/67Ver2M4HC6sI0tw0A+KRqN44IEHkM/n8dBDDyGdTiMWi0GWZQ74B2wnQZYkSUgkEojFYvjSl77kl7WpVCrb6jHu9XlMnjOe52E4HOJ73/secrkcTp8+jVwuh5MnT44FjDxviOgwMFiklXe1TSmu66LdbqPZbKLT6aDb7U7tzrIT04LCyV2yYi1cKpVCPp/3ayjG4/F5f0Xao52+zrIsQ5ZlpNNpSJKEfD4Pz/P8XcqGYYwFeLvdIX2ldY9il344HEaj0YCmaSgWiwiF+DFNRIeLn0K08mZtMhGD+XA4xA9+8AOUy2U0Gg3our6nnayTjz2ZJYpGozh37hwKhQI+//nPI5VKIRaLzfGb0WFKJBL40pe+hFarBVVVUalU8Pzzz0PXdQDjm6FmZZd3S9d1NBoN/PCHP0SxWMSpU6f8da2cgiaiw8JgkY6c4KA6HA7R7XbRarXQarX8+nnzmCzEHPy32PU8mVHMZDIzA0UO/sstmGEsFAp+pxVFUTAajcay06Kt4F52sYv7O46DVquFcDiMbrcLVVURjUa3dXjh+UNEB4W7oenIGgwG+PGPf4xyuYzvfve76Ha7YxsVdiqYMZqVPZIkCdFoFPfffz/y+Ty++MUv+oEiB/TVJqaHu90uHnnkEVQqFfznf/4nBoPBQrKJQeJc0TQNiUQCX/ziF1EoFPDggw8yO01Eh4aZRTqSgrufRYcW0zTnCtwmA8VpayQ1TUMsFsPm5iYKhQLS6TTXKB4Rsiz7GUXR8SWdTgPAQjZKBQNOkaE2DAOhUAjVahWKomA4HEJVVbaBJKJDwWCRjhzbtvHee+/5GaB6vY7RaATgl4PxXtYsThZ21jQNd955JwqFAn7rt37rqptZOH24vGZtlhJlkB588EF0Oh14nodyuTyWYdzLYwrBc3M0GuHxxx/3O/3k83lcc8013PBCRAeOnzp0ZIjB3XVddDodtNtt9Ho99Pt9PyM4b6A4jcgoxuNx5HI5bG5uIpPJIJFIzHx+4n60nK7UkUcEjJ7nje2Sdl137k1TkybXxA4GA4TDYbTbbUQiEZw4cWLPj0FEtFsMFunIEIP7aDTCY489hnK5jF6vB9u2F7JbdTIjKDKK+XweX/nKV/z2fbPuwyDxaIjFYvj0pz+NdruNwWCAUqmEp556CqPRaO6s8bSpbFEMvNfr4dFHH0WxWMT111/Prj9EdOAYLNJKm5w2FJ0wms0mms2mHyhOu/1ujx/8qqoqYrEYcrkc8vk81tfXkUqltt2fAeLRE+zsksvl4LouIpEIHMfxe0nPut+si5VZ56XneXAcB81mE+Fw2M80hsNhnltEdGAYLNJKCw6Yuq7jueeeQ7lcxjPPPOP3fp51+90cPziYq6qKm266yc8obmxsjGUUuSbxeIjH43jooYfQaDRQLpdRLpfx1ltvzQwYd9tPWjAMAy+99BIuX76MO+64A4VCAffccw8ikQjPNSI6EAwW6UgQde6azSYajQaGw+FC2rMJYkBWFAWapiGbzWJjY2NqRpGD9/Eg6i46joP19XWYpolLly5ta+M3uSFqt0shPM+DrusYDodoNBoIh8NjSyuCt+O5R0T7gcEirTzXdTEYDFCv1/Hoo4+iXC77Gw4mM4PzrlsU902n01hbW8NDDz2EfD6PSCSy6F+HltCsQExsejl37hzK5TIuXrwI0zThuu62++ykXueV6LqOxx57DIVCAbfffjsA+L3Gg8fcS2FwIqJpGCzSkTAYDDAYDNBut9HtduE4zraBep7BOjj4KoriB4tra2tIp9MIhUIcmI+BK72+siwjm83CNE1kMhnYto1OpwPHcfzbTKvVudvHdl0X3W4XkUgEg8EAkUhkW6FubqYiov3AYJFW3nA4xPnz57G1tYX33ntvbKCell3czWAdHHQTiQQ+97nPoVgs4vTp04jFYlAUxf85g8ajZ/L8AbYHYqqq4vTp01hfX8dnP/tZlEolPPLIIxgMBv5tJo+xG2KXtGVZqNVqMAwDTzzxBIrFIs6dO8fi70S07xgs0koTgV+9Xkez2YSu67BtG8D07Mo8nTZEz+dkMonNzU2sr68jHA6PFUdmoHg0Tau7OO21VhQFkUgEm5ubcBwHiUQCtm3DNM09118MZgsty4Jpmmg0GlBVFY7j8Nwjon3HYJFWmlj0/+yzz6JcLo/tRJ0cpOcdUKPRKM6dO4dCoYD77rsP6XR6W9s1DtbHx6y1i6I3eLPZxJtvvolSqYRXXnllbKPVXgM7SZL8Xf+FQgHnzp2DoijsQU5E+4rBIq0s13UxHA4xGAzQ7XbR7/fH1olN2kmGZ3Jdo6IoCIfDyOfzyOfziMViLIpMY4Kbp2KxGCzL8ndHq6oKy7Lgui6A+S4qJjeueJ6Hfr/vdyeKxWKIRqMMFolo3zBYpJUlMiylUgnlchntdtsflOcVDChDoRBOnjyJfD6Pc+fOYWNjA9FodK9Pm46YySAtGo3i13/911GpVPDmm2+i0WhgMBiMBYy7mZoWtxVLKBzHQavVguu6OH/+PIrFIu6//36em0S0bxgs0soSdRVbrRYsy5p7bVgwaxOsgyfLMtLptN/vOVimhGgWRVGQSqVgGAYymQxM0/RbAe52J3RQ8Nx0HAeWZfmdXa6UUSci2iuOfLSSbNvGYDDAs88+i2eeeQaGYWyb6tvptNxknTrg/QAyGo3igQcewCc+8Qmk02lOP9OOKIqCQqGAD3zgA/iN3/gNPPjgg4hGo2NZ7922nATGN2eJtYvPPvssnn32WQwGA39jFxHRojGzSCvH8zyMRiMMBgN/3VZwIA0GfDs9XpAsy4hEIojH435NRWYUaTdCoRA0TfN3R8fjcX8nsyjYvVPBAFGc55NrFweDAWKxGBKJBNcuEtHCMVikleJ5HgzD8NcqXrp0Ce12e6HTcJqm4e6770ahUMBHP/pRZDIZZhVp1yKRCM6cOYNWq4W33noL5XIZzz77LHRd3/W6RREoBqeibdtGpVKBYRh4+umnUSwWcd9997GrEBEtHINFWimSJMG2bbTbbbTbbZimufDpN0VR/IxiLBbj4Eu7EiyPE41G/d3RhmH4Rdx3UxReZBGn9ZV2HAemaaLdbiMSiXAqmoj2BefWaKV4ngfLsnDhwgVcuHBhrK7ivMcLkiQJkUgE9957L86cOTMWKO61uDIdL8GA8cyZM3Nl/YLn3OT5J4JI0zT99wODRSLaDwwWaaXYtg3DMNDr9dDr9camn+dZqyXL8tiasHA4jFgshlQqhWQyOZbN4Vow2onJ80SSJCSTSaRSqbGaiJO3mxYM7uRxXNf11+4GOxgRES0Kp6FpZdi2jcuXL6NcLuO1115DrVYbGxjnyfyJ7IwIFD/84Q+jWCzixhtvRDabhaIoY4M6W6vRboVCIVx33XVIJpO45557sLW1hQsXLkDX9Sveb6fnmWVZuHjxIrrdLt5++23ouo5rrrlmrB2lwPOXiObBYJFWhuu6GAwGfgZl2hT0PIOhuL0sy8hms8hms4hEItta+gVvS7QbqqoiEokgm81C1/Wp5ZrmPbfE0gxd19Hv98cKgE/i+UtE8+A0NK0EsTbrlVdewSuvvOIHitPK3swrHA7jrrvuwl133cXdz7Rwqqr659ciN02J90Dw/WFZ1szbEfumM+8AACAASURBVBHtFjOLtBJE6ZBut4tutzvWjxcYr6242+yiJEkIhUJ+5ieTyfhBJ6ftaFEURUEmk4Gu6wiHw9A0bVtQF9z9vJui8p7n+e+PeDzuL88IHofnMRHNi8EirQSRWXz55ZdRLpdhGMbMQXW3g6Kmabj55ptRLBZx6623Yn193c8scoClRdE0DR/84AextraGO++8E6VSCa+99hoMw/BvM8+UtKi/KN4frVYLDz300K6PQ0Q0C6ehaSWYpgld1/01i4vcoSzLMlKpFFKpFKLRKKegaaGC07+apiESiSCdTiOVSi2kM1AwGzkYDDAYDDAajcaC0MnnQUS0G8ws0tIzTRMXL17E1tYW3nnnHTQajZnlQXbbGQN4fwC//fbbUSwWGSjSwk1e0Giahttuuw3r6+t48cUXMRqNpt5nt+exbdsol8uwLAuvvvoqOp0ObrrpJp7TRLRnzCzSShDZEsuyYNv2zIF0twOsoihQVRXpdBrpdHos08NMDO3VtHNIlmU/s6iqqt/V5Wr32wnbtmFZFvr9/lgGHuCUNBHNj5lFWnqWZeGdd97B1taWHyiKzMtOB8BgpkbcT2w4yOVy+MhHPoJcLodwODx2H6K9mHYOaZqGO+64A7lcDrlcDp7nTe1vPs9GLc/zYNs23nnnHdi2jdtvv33snCYimgczi7T0XNfFaDSCrutwXXeu3Z3BNY7B+8fjcSQSCUSjUQ6qdCCCnYISiQTi8fjUc3m3FyviHHccB4PBAL1ebyHPl4iImUVaSsGsimVZePfdd1EqlbZlX3ZLBJue5yEcDuOOO+5AoVBAIpFAJBLh1DMt3LQMYSQSQTKZxJ133omNjQ00Gg04jrPr82/asR3HwaVLl2BZ1rbC9SwFRUTzYLBISyk4oEmS5O/ynNWZYrfHlWV5bBe0qqp+CRKiRZpW2snzPIRCIaRSKQyHQ8iyPHYhs5vlFZNEp6PBYLAt+GSgSETzYLBIS822bQwGA7z55pvY2tqa2uJvHiKzeNttt+HEiRNQVZWBIh0YSZKgqio+9KEPIZvN4gc/+MGeimdPZuJFZnE4HCKZTEJVVQaKRDQ3jo60VIKZENd1/ak00Qt6UdPEiqJAURTE4/GZa8aI9pMkSUgkEkgkElAUZU8XK8HzV/SKNgwDpmnOLDNFRLRTzCzSUgkOeo7j4L333kOpVIJhGHueghbHlyQJyWQSa2trOH36NAqFAkIhvhXoYKmqilOnTiESiWBtbQ2GYaDX6+3qPJ9VGcBxHBiGgbfffhuGYeDGG2+Eqqr78WsQ0THAzCItrWBHCtd1x3ZC78Zk1kWSJESjUX8HNANFOiyqqkLTNITDYYTD4V2f37OmrkUJneFwiOFwuJALLSI6vjhK0lISvaAvXryIUqnkr1WcrJW402MFqaqK6667DsVicWpBZKKDFAqFcPLkSciyPLXe4rxs2/Yzi7fccgtLQxHR3JhZpKUkptZ0XYeu61N3de4kWJzWwULUV4zH49zUQodOkiTEYrGFn4/T3j8sDUVE8+BISUvL8zzU63XU6/Wpg9xOBr7JKWjg/czi9ddfj1OnTnEdFx26UCiED3zgAzh9+vSuz8dZ7wFJkuA4Dur1Omq1mj8NzY1cRDQPBou0NCYHPtd1YRgGDMOA4zhT69XNQ6xZjMVicz9XokUJhULbMot7qbMI/HKZhmmasCxr5m2IiHaCaxZpaUxmAR3HQbPZRLPZhOd52wa3eQc7sWZR1FckOkyKovhZbrHZahGBnG3baDQaUFV1asDILCMR7RQzi7SUxJpFkRmZllncy7Gj0SgikQjXLNKhkyQJkUgE0Wh0T4W5gfEgU7x/WGeRiPaKmUVaWmLNVbVaheu6Cy3IXSgUkM/nWTaHDp0sy0in09B13b94mfdcn6y1WK/Xoarqth3W7BFNRLvBtAodqlm7NMW0s2VZ2zIjewkaQ6EQVFWFoigMFGkpiNZ/iqIsNIALdkCaXMbBQJGIdoPBIh2qadNunueh3++j2+1iOBxiNBqNFRUWt91N0ChJEmRZxsbGBtbX1xGNRqFp2oJ+C6L5SZKEdDqNdDrtB42LMhqNMBqN0Ol00O/3t01TExHtBINFWgqTA5dYp+g4zligOE92RKx/lGXZ75hBtCzEhYzoD73TGqI74bqu/x6a3OTC7CIR7RSDRVoKwYHLsiy02200Go2xtVbzDqIiwAyFQjhx4gSKxSIDRlo6iqIgk8lgbW1toZu5XNdFo9FAq9WaWUaHiOhKGCzSUhEL7w3D8Fv8BX82j+BUt+jDyyk4WkZiGnpRU9Ge5/lZRcMwuPufiObCTw5aGiJQdBzHb1MWnIKetNPsiziGoigoFosoFAoIhUIMGGlpeJ43lllcFLEEYzQawTAMltEhorkwWKSlEcwAivWKV7LTYE8MmJIk+bugF7kujGivxDkaCoX89YuLIN4j4v3Ec56I5sFgkZaO53l+m79F7d7kIEnLTpZlaJqGSCSy0OPux/uJiI4XBou0NIKDl+u626agGfDRURcKhRZaOkcQaxeD+H4iop1isEhLI1g/0TTNbZkQoqNMtKEMtv1bBM/zoOs6309ENDcGi7R0xJrFK21uITqKZFnec8u/aaZl6omIdorBIi0dx3FgmiZM0+TUGR0biqIgEokgEokstPUfM/VEtFcMFmnpiELCrutuGzA52NFRJXbsi53Ri+S6Lt87RDQ3Bou0dFzXZWaRjh1JkhCPxxGPxxe+ZlG8nxgwEtE8GCzSUpq2e1P8f6KjyvO8hZ/j4pj7cWwiOh4YLNJSYtFsOo4sy2L/ZiJaOgwWaemIIFGW5T0HjAw4aVXsZ/ZPXHztx3pIIjr6GCzSoZo1cKmqClVV9xzscWCkVRHstLLIMjeSJEHTNGia5n9PRLQbDBbpUE0buCRJ8jtZTAZ7HOjoKNtJT/TdkiTJr9/I9w8RzYPBIi0dWZb9zKIoUCzMmykUgyQHS1pWotPKaDRaaEY8mFmcfD8REe0EPzlo6biuC0VRpg5s8wZ7YvDltDQtK8/z/M5Fiz5PRWaR7wMimgeDRVoaYgCTZRmapiEcDi8ssxjE7CIto+CaxUUGc7IsIxwOIxKJMMNORHNhsEhLI7hTczITMnm7eY8tsjfMrNAysm0btm0v9Jie542tV+S5T0S7xWCRlooo7xEOhxEOh6cGhvMMdiJQ7Pf7GAwGHDBp6biui36/j36/v/Dd0OL9JL4nItoNBou0lBRFmbobei/Y9oyWmch627bt94ne7f1nEe8nBopENI/QYT8BokmyLCMajSIajUJRFP//S5IE13XnHvAcx0G5XIYkSQsvT0K0V67rotVqod1uL3STiyzLiEQiiMViDBaJaC7MLNLSEIOjJEl+6ZzJn+9lsHNdF7quQ9d1Bou0VMQyCcuyYJrmXMeYfG8Eg01N02bWLiUiuhpmFmlpBNv8bWxswLIshELjp+i8AaOY4qtWq1AUZaFrwoj2QiyPEDUW5+ngErzQEsS/Q6EQNjY2sLGxwZ7rRDQXZhZp6YgOLqFQyO8+EfzZvMcUg7JhGLBte2p2kVkXOgxiF/S8HVxmBYFinaLIKjJQJKJ5MFikpRAM0iRJQjweRyKRQCqVQjwe99cuzhvMiWm+0WiE0Wg0tjYsiIMpHTTXddFut8fOR3G+7oWiKIjFYkin00gkEkgkEot4ukR0DDFYpKUQDNKCtRZVVYWmaVNvN8/xPc+Dbdv+rmhOR9Nhm7ZLf1HTxWKtosjO82KIiObBNYu0dKatXex2uwvblOI4Di5fvgzXdbG+vr6QYxLNy3Ec1Go1VKvVhW68Eu+f9fV19oQmoj3hJwgttSsV596JaVN5nudhOBxiNBrNzCxy7SIt0pXOJ8/z/F36izzvJEmCpmljbf6IiObBzCItLbGL07Isv13ZbgfTaYOkZVl45513YFkWPvzhDyMSiezofkTzutL5ZJomXn/9dVQqlbGyOfOc70GKomBzcxMbGxvMLBLRnvAThJZWsE3ZrD7RVzMrszgYDDAYDBbxNIn2xHVdjEYj9Pv9sfN1L4GiWPOoaRo0TRsrbk9EtFvMLNLSUlUVhUIBnuf59Rb3WpgbeD+zeOnSJRiGAcuyFnJMop2YPNdE/c933nkH5XIZlmXNfexgJlK8ZwqFAorFIoNFItoTZhZpqcViMcRisbl3cwZ3QQcNBoMrrlkkWrRpFyWia4uu6xgOh/7/m/f4QZIkIRqNcs0iEe0ZM4u0tFRVxenTpxGJRLZ1ctmt4GBpmibeffddmKaJer0ORVGQTqeZfaF9NRmwiV7QjUbDzywu6uLF8zyoqorrr78exWJxW+tMIqLdYGaRlpYkSYjFYohGo2O14hbBsixYluW3VyPaD1fbBW0YBkajESzLguM4e1oSEbyfoih+Ue5YLMbMIhHtCTOLtLRCoRBOnDgBWZaRyWQwGo3Q6/X2nH0RA7Jpmrh48SIGgwGy2Swzi7RwVwrSLMvCxYsXUSqV/LWKi1g/G+zccu211yKfz0/NzHOtLhHtFDOLtNQURYGqqohEInOvvZq8j/jedV10u110u12uXaQD57ouer3e2AXQtE5GOxW8fTgc9ndCz5qCXtZAkTVOiZYPg0Vaeqqq4oYbbsANN9zgD3y7GVBm3dY0Tbz00kt46aWXxurbEe2HyfNw2vkXDODmDeZCoRBOnTqF66+/fiWz5csaxNLe8UJgdTFYpKWnKAqi0Sii0ag/+O21YDHwy8xOp9OBrut7KltCdDXBIMiyLBiGsS2zvYjBVKz1jcViKxcsMphYbVdbo7uIz206HFyzSEsvFArh2muvhaqqOH/+vP//d5qBEB9Skx9UpmnilVdeQaPRwFtvvYXhcIhTp06t3ABLq8W2bbz77rsol8t46aWXUKvVFlLvU9xf0zScOnUKxWJx21rFZV6nuMzPjXZmslRZ8DNX/Dt4G77eq4OZRVp6nuchFovtec3itCtasSNadHSxbXvPz5doFlGEW5xvuq7DNE24rrvnKehgLdJYLIZ4PL6tgsCyDs6TQUTw65XuQ8sneHEOYNu/aTUxs0hLT9M0XHfddVBVdc/1Fid5ngfTNHHhwgXUajWcPn0a4XB4oY9BJEiSBNu28eKLL2Jra8tf+jCtWPe8QqEQPvCBD0zNLC6rYNZpp4EFA4/lNO11mZZF5Ou3Wlbjk4SONdGJQmQXNU3zp+12a1oGQ+yKjsfjsCwLrusutKYjkeC6LizLQqfTQa/Xg+M4AN4/F2VZ3pZh3C1N0xAOh/36pKuypEJkV8VXwzB2nGGk5SHOY+D9TLemaZAkCeFw2F8iwSBxNTFYpKUn1ixGo1HccMMNiMViePvtt3e0IWUn62J0XccLL7yAcrmMBx98EIqiIJFIMGCkhfI8D71eD41Gwz/fREF4kVmTZXnu4Ejsgi4Wizh9+jQ2NjZWIlgUvdq73S5+/vOfo9Pp4LXXXvNbIDJYXC2yLCMejyMajeLWW29FIpHALbfcglQqhdtuu40zNyuKwSKtBFVVEQ6HkUgkpq7FmmUnUx+e52E4HKLf76Pf7/uPMQsXZtM8XNeFrusYDAbo9/sYDofb1sjOGxhJkgRZlpFIJJBIJBAOh5euxd/k+8Z1XfT7fei6jnK5jHa7jVKphE6ng1Kp5P+taLUEg8V0Oo1kMolMJoPBYIBCoYBYLIZUKsWL8RXDYJFWhqZpuPnmm5FKpfDWW28tpE2f53n+NLQkSTh//jyKxSI+9alPIRqN+rdZRP07Ot4Mw8AzzzyDUqmEarWKbre7sGN7nue/P4rFIjRNW9ixF2XyfdPv9/Gd73wHlUoFzz33HEajEUajkb+OmBnF1eS6LgaDAYbDIc6fPw9ZlvHkk08iGo3izjvvRD6fx1e+8hWk02leeK8QBou0MiRJQjKZXGi2IdjNxbIstNttRKPRsYzPZFcNln6gebiui3a7jXa7Ddu2/fWKiyJJElKpFFKp1FKfl57nQdd1dLtdVCoVlMtl1Ot16Lo+dptl/h3oykTd0NFo5C+xGI1GKJVK/kxOJBLhlPQKYbBIK0PTNNx6663IZDJ+5mRaHa/dEvfTdR3PPfccisUiPvnJT/ot0yZvO+3fRFdimiY6nQ6ef/55bG1tjQVGi6KqKm699VYUCoWlzCwKuq7j8ccfR6VS8dcoir+HCBLFFCWzi8vtap+/kiT5GwYNw8Crr76Ker2OF198EYVCAbfccstSn6v0S1w0QCtDluVtu6KDH07zThcHd132+310Oh1/Sow9o2mvRFbFMAy02230er2FBkFil6nochSLxZZ6PZjjOOh2u2i32xgOh2OBs3jerusyUFwBk5+/wX8HN22Jz1HTNDEcDtFsNtFqtfj5ukKYWaSVoSgKCoUCVFXFLbfcgnQ6jTfeeGOsr/OsD6+dsG0b1WoVlmXh6aefRrFYxH333Td3MXAi4P1M2vPPP49SqYTLly+j2WwudApaVVXceOONKBaLuPbaa7G+vr7Uu6ANw8ALL7yAUqk09t4VWShRa5Gt4VbLrCzj5EW8ruv46U9/ihMnTuCOO+5AJBI5lOdLu8NgkVZKKBSCpmlIJpPo9/t7HhSD0ySe58G2bRiGgUajAU3TFr6ujI4X13Vh2zbq9Trq9ToMw1j4OSXLMpLJJJLJJMLh8FIX4hYdbETlgWBmadpuaV6krY6dvF6SJMFxHPR6vbGe6LT8lvdThWgGTdNw++23Y319HS+//DJGo9HcxwpOlwTXLv73f/83CoUC7rvvPiiKwuwizaXdbqNer+Pxxx9HtVr1z9VFZs3E+6FYLC5duZwg13XRarVQq9Vw6dIlVCqVmaWDgp1caDXsJBvsui4cx0G9XoeqqrwYXyHLu7CFaAZZlpHJZPyNLsFMyl4GGHFl7Lquf+Xb7/cxGAw4HUYzzTo3bNtGr9dDp9NBp9NBt9uF53n+f7s17dwWmXbxfljmtYqiTJXjODBNc2pRfQaJq+1q57V4bS3L2nahQMuNmUVaOZFIBHfffTdqtRp++tOfIhwO+1mKYIZwJ4K3FQOtWLso1tYUi0V8+tOfRiKR2LffiVbXrOBmNBrh0UcfRalUwnvvvYfBYADbtucOhibP7VAohHw+j0KhgHvvvRe5XG7p13+JgDH4PR0/k+cBLb/lvQwlmkH0io7H40gmk9ta8+2mp+zkhhjxveM4MAwD9XodtVqNV8I00+R55nkeDMPAYDBArVZDvV6HaZoLOX+CA2ywY0symVz6pRIia6goClRVXeq1lbRYk7VqFUUZW2/Oi4blx3crraRQKIREIoF77rkHpVIJW1tbsCxrbJH1XjI4wPu79p588knkcjl89KMfRS6XQ6FQ8APTZR6Y6eBMngemaeKll15CuVzGE088gUajAcMw9lxoOnh/SZIQDofx0Y9+FMViEbFYbKnXKwLvB7dra2twHAfFYhGSJKFcLsOyrLH1btwFfXSI1zL4eqqqivX1daytrfkBIz9Llx8zi7Rygh8+a2tryGazUFUVsiyPZRjn/QAK1nobDAb+ujOxe4/rqmgWsaO+0WigXq+j1+thNBrBcZwd9Sm/ErFjX5x/oVAI2WwW2WzW/9myE1nFeDzu918PdkQKfqXVN6t8TjweRyKR4OfoCmFmkVZGcKAEgGg0invuuQfXXnstHn30UciyjFar5e+wm2fdYvB+rutC13W0Wi385Cc/QbFYxMmTJ5c+g0OHQxR1bzab+MlPfoJKpeL3Op7Mdu90vda09pIiQ7e5uYkzZ85gc3Nz6aegg1RV9Xu8v/fee/70PFv8HV3Bz9hwOIy7774bxWKR7f5WCINFWhnTMjOiY0UymcRwOESr1dr1NNa02wYHaMuy0Gq1oGkaOp0OFEXxsyJEguu66Pf7aLfbaLVaaLfb22rPBUvD7MS020mShHg8jlQq5Z//qxRkKYqCbDYL0zQXVsmAlp/4XA6FQv7u/WUuHk/jGCzSUrtStkGSJMRiMaytrflrF8XU3yIeVzBNE88//zwymQyKxaLfOzoaje75cejoGA6H+PGPf4xSqYQ333wT/X7fz3Ivch2eqAZQLBaxvr4+NVhc5ixdLBbD5z73OWxtbeH73/8+Op3OYT8lOgDinIxEIvj4xz+OYrG49Lv36ZcYLNJS20lHAEVRsL6+DtM0oaoqVFWFaZrbpu+C99lt5lHXdfT7fVSrVSiKgsFgAFmWx6ZRlnmApv0T3P1cqVRQq9Wg6/rY7udZ59uVzplpU9CiruL6+rrf1m9W9nFZicxoOp1GPp8H8P5mMsdxoOu6v+7zavh+Wx7TXgvP86Cqqt+7XDQ3yOVySCaTvNheMQwWaeVFIhHcd999qNfrePbZZ1GtVlEul/0BZ9qH2DyGwyG+//3vY319HYVCAblcDrfffjs0TfMfZ7IjDB1tIlB84YUX/N3PzWYThmHs6P5XOkeCP5Nl2e+NnsvlcPbsWWxubq70gLu+vo6/+Zu/Qb/fx89+9jPU63U89dRT6Ha7aDQaV+3uwffX8pj2Wqiqilwuh1gshg996ENYW1vDZz7zGaTTaaytrR3Cs6S9YLBIK0+WZcTjcei6jmw2C13XUa1Wp952niBO3Md1XQyHQ6iqilqtBlVVoes6ZFlGKBRioHgMiW4kjUYDtVoNvV4Pw+Fw4Y/jeR5kWfYH2kQisXJrFScpiuJnmcRmh0KhgHg8DkmS/ALm3B29WsQ5qaoqisUi4vE4CoUC1tbWcOLECa73XlEMFmnliWktSZLwqU99yq+7KKaixSYDMeDOW8tN3GcwGOB73/seNjc3sb6+jo2NDRQKhbGAEeA02VEz+Xo6juMX3f7e976HarXqB4qLfO3FeReLxfDJT34ShUIBGxsbK7VW8Uobe8LhMH71V38Vtm3jk5/8JEzTxHvvvQfLsjAYDA76qdIeiNc3mUwiFArh5MmTCIVC/m79WCx2yM+Q5sVgkY4EsXZxbW0Npmn6mUaR+ROBouu6u65JN60OXLvdhqIoqFQqAN6fUgMwFjAu46BN8wu+nq7rwrZtNJtN1Ot1tFotvw6nuO28FyTA9s5ComPRxsYG1tfXEQqFViZQBK48ZSzLsj+dnkwmYds2bNuGaZr+GkZhmX/H4yx4AR4KhRCNRqFpGnK53LYdz3wNV5PkMcdPR4TrurAsC+12G9/85jdRLpfx9NNPbxtw9kp8IKqqimuuuQb5fB5f/epXsbm5ibW1NbYxO+Jc10Wv10Oj0cA//dM/oVKp4I033oBpmlddZ3c10wLMaDSKM2fOIJ/P4ytf+QoymQw0TdvRxphlMut5TWb6g1PQe/170uFQFMX/nLza606rgaMaHQkicxgOhxGLxbC5uQnbtqFp2rZBPNiCajf17sRgJsuyv3mm0WhAkiQ/w5jJZPgheMTZtu1PP1erVTQaDViWtZDAJhgoigLcoj1aLpdDPB6fugN/WuHvZXOlEliTPxcXXKzDt1qmffZNy5Zz5mX1MLNIR45t23jvvfdQrVbxD//wD6hWq2OdXXZjWqYn+P8URUEoFPL7Rv/Zn/0ZNjc3EQ6H+WF4RAQHQNM0Ua/X8bd/+7colUoolUp7yijOurCY7NTyJ3/yJ8jlcrjmmmtmZq55kUJE+4WZRTpyZFlGMpmEYRjIZDIwDAOdTmeuAX3atVTw/7muC8Mw0Gg0IMsySqUSXNfFiRMnpq4rCx6DA/vh28kOdrFJynVdVKtVVCoVVCoV1Ot1jEajPT3+lc4PWZaRSqWQyWSQTqeRSqXGep/v9FhERHvFzCIdSaJP76OPPopSqYR//ud/Rrfb9X+26IFVbLDJZrMoFAr4i7/4C+RyuZXq2UvTiTWK1WoVf/3Xf41KpeJnqnfa4/lKZm2ESaVS+J3f+R0Ui0V84hOf8Hf883wiooPGzCIdSZIkQVVVbGxswLIsJBIJWJYFXdf35fFE14larQZJkrC1tQXP8/ySOtz0shomM42GYcCyLFSrVX/auV6vL/SCY9oyh0gkgmQy6e9+VlXVzyoyK01EB42ZRTqyXNeFaZpot9v41re+hXK5jKeeemrPU4dXI0r4bG5u4mtf+xo2Nzf9oFHggL/8LMvC66+/jmq1iq9//etoNptoNBpj5XEW/fEp6il+7GMfQz6fx5e//GVks9mpa2B5DhHRQWG6g44sWZYRiUQQj8eRz+fhui7C4TAsy9pR79ndEoO34zio1+twHAeXL1+G67p+L9Rga0BaHsGMoud5sCwLw+EQ5XIZ5XLZn3oOvm6LDhRF7+dIJILNzU3k83kkk0lEIpGZtyciOgjMLNJK20l2Jdhp4x//8R9RrVZx+fLlfQkYxXMC3i//kclksLa2hj/8wz/E5uYmbr311rHSJ7R8DMPAhQsXUKlU8M1vfhPNZnOs4Law6Myi6HiRy+Xwx3/8x9jY2MDm5uZY+RhmE4noMDCzSCvtagOn2FWaTCZhWRay2SwMw0C5XF5IsDg5eE+2g2s0GrBtG6VSCZ7n4dprr4Vt2yvf1/co8jwPo9EIg8EAlUoF5XIZ9Xrd3xg1WZ9z0dfZsiwjk8kgm80inU4jmUxua0/J3uNEdBgYLNKRJgbVWCwGWZbxmc98BqVSCe+++y4Mw1jY8YVgS0Dxs16vh29+85tIp9N4+OGHkc/ncfbsWfZJXTLD4RBPPvkkKpUKvvvd76LT6aDf74/dZj+DtHg8jgcffBDFYhEbGxvb1ikyQCSiw8JgkY6FYO9oy7KQTCZhmiZGo9HMDQt7yR5N9hFut9twHAflchkA0Gq1YNs24vE4ZFnm5oUDMC0zJ17fXq+HXq/nZxQbjQYGg8G2+8/jaueR6I0sdj+vra1BUZSZNRV5XhDRQeOaRTrygkGCaZrodrv4t3/7N5RKJfz4xz/GcDjcdttFEo8tyzJisRgSiQTOnj2LXC6Hz3/+8/4mhis9LoPHxRIfe7quo9fr4T/+4z9QrVbxxBNPoN/vYzgcP1bK3AAAIABJREFULqSG4izBADIej+PcuXMoFot4+OGHr7iphYjoMDCzSEdesPes6B2dy+X8Xcqe50HX9YWvQRPEcR3HQb/f9zOMruuiXq/Dtm1kMhl/9zbNT/ytrxZYix3x7XYb7XYb5XIZ1WoVnU7HL620nwG6uHiIRqNIpVIoFArI5XKIxWI8B4ho6TCzSMeGGPxd18VoNEK73cZ3vvMdlMtlPP300xgOh/uycQHA2LSnKLociURw8803I5vN4jOf+QwymQxuvvlmqKq68MenX/7tTdPE66+/jlarhR/96EdoNpt47bXXoOv6vl40TBIZxUKhgC984QtIpVIrtfGJ2W6i44OZRTo2xMAmyzLi8bjfYQUAIpEIHMeBaZr78tiTu2hHoxFs20alUoFlWbh8+TIMw8Dm5iai0Sii0ahfdy94DO6GnY9t2/7fXdRPbDabfv3Efr8Py7IW/rjTXitJkhCLxZBKpZDP55HP55FKpRCPxxf++PuJ5yDR8cHMIh1bon90o9HAN77xDZTLZbz88sswTXPfsouTG2hCoRAkSUIikfA7d2xsbODs2bNIJpMoFApjdfZodzzPg+u6KJfL6PV6eOKJJ1Cv1/HUU09hMBhgMBj4rRr3+6MwuG71E5/4BAqFAh5++OGVDBQFXrjQNDwvjh5mFulYmczOJZNJuK6LfD4Pz/Pw1ltvwXXdfQkeJo8nOoVIkoRGo4HRaOTXfyyXyxgOh4jFYgiHw34ZlVk7ZGmc4zh+u0fTNP31iKVSCY1Gw/97HyRZlhEOh5FIJFYyozgZAHieB8dx/Kz5rNvR8SE+n4IzInQ0MLNIx57ruuj1en6Hl0qlgv/93//dtynpoOCGDLGWUXR+SSaTuP/++7G+vo4zZ84gHo8jlUoxYLwK13XRbDYxGAzw3HPPodFo4LHHHkOv10On04Ft2wceKALvL3W44447UCgU8Ad/8AdYW1tDPB5fycBKBIqXL1/2A/L97nBDyyd4YSBJEqLRKFRVxYkTJxgwHjF8NenYk2UZ6XR6bA1jpVLxN0Ps94AX3PwyGo0gSZIf0JRKJZimiUqlgmQyCQBQVdUvtbPIwPGwMkKLeFyRCdZ1HZZloVarodfr+ZnEWq2GwWCwLxtYrlSfU/xeqqoiGo0in88jl8shk8kgkUgs9HksWjALb1kWXNeFYRhwHAeWZcGyLGxtbcE0Tf/ndLxMnuvRaBSapkGWZaiq6v87HA5DlmVomnbIz5jmxcwiHWvBQMV1XXQ6HTSbTXzjG99ApVLBK6+8ciAZRiE4Ra4oCsLhMFRVRS6XQyKRwH333Ye1tTWcOXMGiUQCqVRqrkBrVacKpz1vMW0/GAzwzDPPoN1u4+mnn8ZgMPCLn4tM4n4ENGKH/ay/p6ZpuPHGG5HP5/FHf/RH2NjY8IuxH7adnAeWZeHNN99Ep9PBE088gXa7jbfffhu6rmMwGMB13bHC9nS8BOvIep4HRVGQSCQQDodx6tQpZDIZnD17Ful0GjfccAOrPawoZhbpWAsObrIsI5vNQpZl5PN5AMDW1hb6/f6BTVsG2wXatg3btv0OL/1+H6VSCYZhoFKpYDgcwnEc/wpekiSoqjqzG8zklNHVnscyDfzi+YjnZBiGX2TdMIyxNYmtVgvVahXD4RDD4XBmJnFRv+Os44i6niKjWCgUkM1mkUgkluZvO1nSKUhkunVdR7lcRrvdxtbWlv93NgzjQEsN0XISgWLwgqnX6yEcDkPTNIxGI2xtbUHXdeTzeb9smLAs7wW6MmYWiSa4rotut4tOp4N//dd/Ra1Ww5NPPonBYLCtTdx+CQZH4sNYURRomgZN05DL5RCNRnH33XcjlUrhtttuQyKRwPXXXz925b4K5XZ289zElOgrr7yCbreLl156Cd1uF+fPn8doNPIzXSKYPMip0WB2BfjlGsV8Po/f+73fw/r6OpLJ5FJkFHdiOBziv/7rv1CtVvHv//7v6Ha70HXdn4YOXthMs8znHC3G5AXo5EWdmIaORCJIp9N4+OGHkc/ncfbsWRafXzHMLBIFiAE/k8lAVVWcPHnSn1YBMNZLej8Hw+DUeHDdmGVZfpYzGo3i8uXLGAwGWFtbQzKZ9Kd/NE2Doih+4HilxeYHOahPruW72mOLtYiWZfl1MHVdR6lUQrfbRaVSQbPZRK1W8wOZWSbXFi769w5mV0QppEKhgHw+j42NDSSTyaUP3AVxnlWrVWxtbaFer6Pf74/d5mrT78v+O9LeBd/HwaYHImAUn1XD4RCmaaJcLvv/n2sYVwszi0T/Z1ppkH6/j263i//3//4ftra28JOf/ASDwWDfHvNKO0iDPxPZqUgk4n/ohsNhfPCDH0QikcDtt9+OVCqFG264AbFYDP+fvTt7buS67gf+7R3d2AESC6nRaLSMVq/RZlka74nlTZbKlVRcqaTykKqk8pLX/AX5A/IQV+Ul5SpX+SWLnVjSryzLkWxLtkaSZcmeGVnyaJkZEgAJYm2gF3Tj96Dcq0azQQIgSALD86mawpDERhC4ffrcc88tl8u8X+NxBivTPLbneXy6/dKlS2i323jjjTfQ7XbxzjvvwLZtvgo3uEUfgF3Zjmkfexbs/hOJBM6dO4disYjHHnsMyWSSB4qTBslHKfxcWI1itVrFP//zP2N7e3vfvbLDGfejysCT47XXeBXOOrIeoysrK/iHf/gHFItF3HjjjRQwLgnKLBLyf6J22mDThoVCAcPhEKlUCsBohnEejxmewowS/Bl7bFaTx+oVE4kEkskk8vk8ut0u4vE4DMPgqxMVRYEoipBlmU9th3eKOUzj+vSxS7b6fDAYwHVdvnClUqmg1Wrx5tr1ep33qAyvRA6KCh73yoYd5PeSJIm3NyqXyygUCshms5F9FBclUASiXzPWZqjT6ezKKEYJvs7hvovk+rVfoBi89DwP7XYbiqKg1WrBMIzI3rOL9NkgH6JgkRDsPUgZhoEvfvGLaLfbAIBKpYJnnnkGvV5vbo8/aU+6cKYsWP82GAzw7rvvQhRFvPXWWzwolGUZ5XIZsVgM6+vriMfjuOWWWxCPx3HjjTciFouhWCwe6U4xLKDY2tpCv9/HtWvX0Ov18O677/JL1jqITb+zWkTWNH3axzusKWAWbKdSKXz9619HsVjEuXPneKC+bCzLwuuvv47NzU1YljVVv0QKEk+W/d4bUQvrbNvGSy+9hHK5jFtuuQWapo1cnywmChYJwd6DlCAIPDtUKBQgCAJyuRxkWUa/3+e7hUSZd3Ayrp8f+xnb39i2bf59FgTGYjFIkgTDMGAYBuLxOGRZhq7r8H0fsiyPZBrZKuxwP0f2//C0ajCIZf/3fZ8vNGEZQ5ZlYHtjsxpEFhyapsm/3tra4q9vcMFP1OsxzWs3iagDYTgzyV6zTCaDTCaDUqmEQqGAdDq9NAX84fcoa1Lf6XT4342QKHuVzAQvg1iLMsMwqDfnEqFgkZAJGYaBL33pSzBNE/l8HrVaDT/60Y/Qbrd50Bg1lX3cfN/H9vY2JElCpVKBJEl46aWX+DQ08MFiGUmSUCwWoes6SqUSNE1DLpfjTcAlSeKXmqbxSwC8WbNlWbyG0Pd93iR7Z2eHt2CxLAvVahWDwYCvWmZB5GAwGMkcsunp43gdw1Or4SyJLMsoFotIp9N47LHHkM/n8fGPfxyxWGwkW7Lowq+t67p4++23sbm5OXUGl5CgqHph13Xxzjvv8LGBLAcKFgnZQ3gKJR6P86BKFEWsrq5CURSeAQu2FAmKCjiOKmPDMnvBlcLh1daSJEGWZfi+j1gsBt/3oWkaHMcZ2YnBMAwIgsCDy2CwyII/FjSy1cuu62J7exu2be8KFtlziloQMa7331ELrkhn2IrzlZUV5PN5FItF5PN5xOPxpWs6HLWwK7iF31G+V8n1Kfz+cl2XnxiS5UDBIiF7iMpoaZqGP/qjP4Jt21hfX0e9XsdTTz2Fra0tvPvuu3zHl+BBOCpAPKqMWdSKYJYFZT/zfR+O4+DatWuQJAlXrlzZNQ3NFuAEp5/Z/9mgz4ILdhmcomcBK7sMZu6iFp1E1RgeVeAStfCIPXYsFsPZs2exsrKCJ554AtlsFjfccANUVV3K/XCj6soURYEsy4e2IIicLOHPLRtblqXnKKFgkZCpCcIHO3PIsoxCoQBVVbG6ugpJkngGrdfrjQyQUQHbUR2AwyuCAYy00QkGQ6yWMOq5TbNIJCpbNS74832fP4fwzyVJGsk+HFXgEl55zp6fYRh8mn51dZXXJ+q6zg98y7iiM/y3Ya2YAOy7Sp+Q/YQ//5qmIRaL0ftqiVCwSMgM2CKQtbU1FItFlMtl7Ozs4L//+79Rq9Xw4osvwrIsfl02SB7ntF4wGAsHQ+OCwOD3WNAQDB7G/S7haeXgfQS/H349wpnY8DTVUQZh7Hdlzy8ej+PBBx9EsVjEt771LaTTaT4tH8yQLFugyAQDxbNnzyKZTGJjY4Ov+qfpaHIQ7DPN3l+sQwNZDhQsEjIDdtBkvQuBD7Jg5XIZoigin8/DNE2+0CO4opc5joNvcKoxKuMYfj7BwDCcGY3qpxfOIOz3+44LUhch4GKth1itajwe5zuy5HI5vqvP9Yat7u73+1BVFY7j8AVIhBwE27I0m80im80uxOecTIaCRUJmFBzo2ArYxx57DL1eD3fccQfq9TpefPFFtFotvPPOO7uyZMd58D1o37xw4BtVy7jffe03pT0uiDzM1y14/7Is48yZM0ilUnjooYeQz+dx3333Qdf1yEbby4693rqu45FHHkGtVsOrr76Kra0ttFotWhlNDkSSJORyORQKBXzhC1/g+9uT5UDBIiEziApwBOGDHV9UVUWxWISqqiiXy9B1HY1GA5ZlzdxUetHMIxO4X9A3ScC53+0neYzgdSRJgiiKvKaqVCohk8mgXC4jm80inU4vVVucaQQD/UQiAcuykMvl4Loun4pe9vctOR6yLENRFGQyGf45SiaTS7kg7KSivaEJOQQsKOz3+zBNEz//+c+xvb2NF154AZ1Oh7faGWfcAhEmqtUM2S04XR5c/R1FkiSsrq4imUzioYcewsrKCh5++GHE43G+gEVV1et26iz4HmPtj371q1+hVqvhySefRLPZRK1WG9lm8Xp9LchkJnkPsIWAmUwG3/jGN7C6usoz9PT+WR4U1hNyCFj2Sdd1vnpWURSUy2UYhgHLsnhfwnAPRAC7ApuDZtlOqqi6SvZ9QRB4JlFVVaiqylc3r62tIZfLYWVlBbFYbCQ4ul6DpPAqdEVRkMvlAIA3abcsi/fODDZTp/Y6J1P4b84WerE96FmNYrFYRDabxerqKt/9it4vy4Uyi4TMwX4BRL/fx2AwwM7ODkzTxHPPPYednR28/PLLME0TrVZrz0wjmc64zGswwyiKIl/RfO+99yKfz+PcuXNIJBLIZrNQVfXEr9ZkTdZ3dnbQbrfx3HPPodls4urVq+j1enj//ffhOA4syzryZvNksQTLN26++Wbouo5yuYx0Oo1z584hlUohm81CluXrtpTjekaZRULmIGpFcTALpes6hsMhJEnimUZWE2eaJoAPd0HxPG+kaXXwMcIrkkm0cc3PFUXhu9VomoZisYhEIoH19XWe+UgkEpGF9yftNR8Oh9A0DcPhEPl8HrFYDOvr6zAMA57nodfrwXVd2LbNt20kJ1s8HoemaSiVSjAMA+VyGalUCoVCgZdzkOVEmUVCjhBbEc32Ra3X6zBNE+fPn0ez2cT58+fR7XaxtbXFFxOE6+7IZMKvlyzLPBi87777kMlkcN999yGRSCCfz/NAPqph+kl67ce1VBoOh+j3+3y7NrZQa9xUPzlZRFHkDexZbS8r8xj3uSLLgzKLhBwhVtNjGAZv+hyPx3mD2rW1NbTbbV4XZllWZE0j2R+rmWIHK0VRUCwWkUqleK/EYrEIXdeRSCT23HHmJB3kxv2u7L1KSJRJT6hO0onX9YQyi4QcI5aVYQteut0uut0uzp8/j0ajgVdffRWdTgdXr16F4zg0yO4jOFWvKApuuOEGJJNJfPKTn0Q2m8X999+PeDyOZDIJSZL44hV6XQk5HPvtDEWWA2UWCTlGLFAxDAPAB6uoWa1PLBZDuVxGPB7nPRodx4Hv+3AcB8PhkGccD2NhwX73edD2PcEDxqQrjaOe03A4hKIofCsxURShKAqvnUomk1hbW0Mmk8Hq6ip0XacCe0KOyLietGS5UGaRkAUQDpLYNoEsSLx06RK63S4uXLiAVquFS5cuodfrodls8oBx2t1Qpvn5XrcDDmfwn/Q5ybKMYrEIwzBwxx13IJlM4vbbb0cqlcItt9zCV2iKosgziYQQQiZHmUVCFkA4gGGrBuPxOFzXRavVQrfbRaPRQDweR6vVgmmaEEURruvyVdSu6wLYvdNG1J7QwfPEvc7+x51PsprLva4TvK+oldzh58Duc1wTcrbjA8sMBjOIrPYzkUhgbW0NiUQCq6urfO9uQgghs6HMIiELZNzOLWza2XEceJ4H0zTR7/fx29/+Fp1OB2+//TZM0+T972q1Gl+pGhUoBr8Ofz9qSnjSae6o2qSon0e1F9qrLRBr43L69GnE43Gsr68jHo/j7NmzSCaTOHv2LHRdH5mGFgSBB4qUTSSEkNlRZpGQYxYOzsJBGgCoqsovWd9G27ZRKpWQSCTQ6/XQ7XYxGAzQ6/V4gDkYDPhqat/3+c4bbNeN8OMHH5tl+Nh1gqICTNY6Y1yWMqrFSnhfZtYsm+0AIcsyX9WsKArW1tb4qnHDMHhNItshJ/j7EEIImQ/KLBKygPYKIIPYghfWFJlNRdfrdfR6PVy5cgWmaeK9995Dr9fD1atXYVkW6vU6XNflffOCj7kfQRB2BYXse8EAc9L7ZLWEiqLw5s9nzpxBPB7HmTNnYBgGTp8+DU3TkE6neSAZzCCG92wel7mkIJIQQqZHmUVCFsRemcVxQQ4LloLb0vm+D1mWeeNv0zThui56vR48z0O/34eqqvxnvu+P/GNZx2D2kS2iYd9nQWEwWxic8mW1jKIo8ua8bAcb9vPgP8MwoKoq8vk8Xw2eSCT4ZalUgqqqSKVSEwV9UfWOFCgSQshsKLNIyBKYZtVxMNhjdYts+pl9zbYU7Ha7cBwH29vbcBwHtVoNjuNgZ2cHjuPwqe1OpxN52e12MRwOkUgkoCgKUqkUJEnil8lkEoqiIB6PQ1VV5HI5qKqKQqEARVGwuroKVVWRSCQgSRIPJtn0c7j2kAWh0752FCgSQsjsKLNIyBKYJthhmTzgw9XD4/ZkbbfbcF0XqqrCtm1IkgTHcaCqKg8KXddFMpmE67pIJBIYDAb8stPpAAAPFpPJJGRZHgkSWRApy/JIsKiqKlZXVyHLMhKJxEyB4KSvByGEkNlRZpGQJTWPjBn7+LPMI5t2Zq13glnKqGnp8OpqlhkMTkUH/y/LMv85yyACs2UMCSGEHA0KFglZYIfZ9HoWey0WmXRRzrSPNY/nO8v90fQ1IYR8gIJFQo7RNAHJUa/qHdfzcZKdYg7yHBctQCaEkJOOgkVCFthhB07TZt7mmTUEsOuxjzObR5lEQgiJRsEiIUviuAOqowwmjwplMQkhZH+0GpqQBRZcXCIIAjzPm3jrvXmJ2qd53ONP89yido2Zt3F7TAf7QBJCCNkbBYuELJhgs2vTNHkjbbaVH+ubOM8Aa5I6xP3MO4id1/0Fn7ssy5AkCYZhQJIk6LoOURSRSCQou0gIIWNQsEhOnKOYImUtZsI7o7Cm2OEWNcF9mgHwptn9fh++76Pb7cLzPPR6vZH7I9NRVRWiKELXdciyjFgsBkmSRvo8htv+AKP7VrOWP+Gvg9cns9mrNRNZDsHPAOv3Shn85UfBIjlxDvuAPhwO0e12+R7Ntm2jXq/zHVJs2+Y7pDQaDR4Uep7HM4mWZcHzPH6wZMFhcF9mOpBOj/V3DP4/GPTpuj6SeTQMA7IsI5PJ8O0INU3D6uoqvww2F4/FYiP7Y1Pw+KH9TtLYjkKu66LRaMD3fTiOc4TPkMyDKIqQJIk34R/XdH9Z6prJByhYJCfWNIsx2HUGgwG/BADbtvn2eSxzGDzobW1t8e30WNAYDB6bzSYGgwHfxzm4fzN7XCYYKJLZBV/HYNAtSRLPNMbjcb5ntSzLfD9tx3EQi8Xgui6/ZLvdKIrCp7XZNoWSJEEURZ6JVFWVP4dZLeNBdr/PGtspiH1OKFhcLsHPEXu/S5IEy7L4SRbb2SmctQ+ik6zFRauhCfk/+x3QPM9Dq9VCv9/He++9B9M0ceXKFfR6Pbz//vvo9/toNptwHIcHfcAHWUHP83ZNR7P7DH4Eg9PXQSzACWatyP7CGdhgq57gJRM1bRbcmYZ9nwWDoijyf5Ik8QxkNpuFruu4+eabYRgGbrrpJhiGgXK5DFVVkUwmxz7nZQwGpxH+/TqdDp5++mlUq1U899xzME1zpG6XLJ9g1j4Wi+FjH/sYisUi/vzP/xzpdPq4nx6ZAWUWyYkV1WOQBXGsttBxHL6gxPd9bG1twbZtVCoV9Ho9bGxsoN/vo1Kp8GlmthBlL+GgJRjUBKdJg0ENBYrTC79e4cAx3HQ8WDsavK7ruvw2AEYyvCyQlyQJvV6P77NtGAZ0XYdhGNA0DYZhQBAEaJqGfr/Pp+qAD2opo2ohr8fAkf0+nuehXq+j3W7j2rVr2NraQrVaRb/fp/f5EgqPaez/sVgMm5ub8H0f1WoVtm1jZWWF6hiXDGUWCfk/7OBlWRb+8Ic/8Ixhr9fD1atXYZomH+xYtpBlBh3H4QFEMFs4rrYwKgiYtA7xegwgjkJ4K8LwyQK7TtC0r3UwM8mmnVkQyLKPmqbhxhtvhK7ruOGGG6DrOk6dOoVYLIYzZ84gFoshl8vx+xr3HJblfTBuJ6BarYZ//Md/5CdewQVddGJ0/RAEAYqi8NrFcrmMf/qnf0KhUBh7m2V5b58klFkkJxILFliQ5zgOBoMBKpUK+v0+Njc30ev1+CXLIFarVT6dDGBX9odlAMOPExUYRj2fqAFy3FQqmU4wSxv194gK1if5ewSxmlZWgsAy08H7URRlZPEMyzjG43Houg5d1/kBlq3eZkHnfs9tEUU9z3a7jUajgVqthmq1yq83rjyALC82zrLyHFEU0Wq1EI/H+Xs/bFne2ycJBYvkxGH9Cy3LwqVLl9But/nlb3/7W1iWBcuyeG2h7/sjNYbA6GA2rmH1NNOIe12HDpzzERWMRGUX97NX1ni/Ax8rdbhy5QpEUcR77703shAmFotB13V85CMfQSqVwl133YVUKoW7774bmqbxaepl1u128YMf/AAbGxvodDr8+/Q+Pxl6vR6efvpplMtlPProo4jH48f9lMgEKFgkC21eq+PYqmWWQWy1Wjxz2G63sbm5iU6ng1qtxq8zr+dOFkPU3+Ogq5JnvQ0rYWC1kAxrv7O5uQnTNJHNZmGaJlZWVngNpCRJfFW1pmkzP/fjCjoHgwG2t7dRr9f5yVfQsgfDJBo7ufI8Dzs7O9A0LfLvTxYTBYtkoc3jwOE4Di5cuIBOp8MziBcuXECv1+N9DlkdIps2ZI9NAR85Cix4Y3V7r7/+OkRRxMsvvwxZlrG2tgbDMEYyjYlEAjfddBMURRl7f3uVNhwHFixcvHgRm5ub1BrnhAi+Fx3HwaVLl9Bqtejvv0QoWCRLYZLt6IKXLPjr9/uwLAvVahXtdhsbGxvodru8NtE0zV1taoL3S8hRCJ6YsKwj8MGUHWvbE4/HeaYxl8shmUwilUpB13XeyicWi/H7C14yx71wwPd9XubBSj3I9S9Y9uH7Pnq93p5jL1k8FCySpbDXAS58YLRtG+fPn0ez2cQvf/lLtFotvPfee7Asi2cOHcfZtWoZ2HsRBCHzFrUyO1z3yqbtdnZ2UKvVIIoifvzjH0PXddxzzz1Ip9N48MEHkU6nceedd/Ip6nGPxxzle5xlFDc3N1GpVLCzs4NOp0PBwgnk+z7q9To0TaO//xKhYJEsLXaw832f90Hs9/vo9XqoVqvY2dnhtYhbW1u8d2LwoBw8WLPv0S4p5KhE9dYMvv+C7ZgEQRjp36lpGjY2NmBZFjY2NmCaJorFImKxGGKxGO/pOM5RvsfDgTCr16TP2cnAukRQcLi8KFgkS4cFfOxAMxgM8Otf/xrNZhMvvfQSWq0WLl68CNu2+Z7LUQtlwu1o2BRJVIaHkMMQPFlhB9Ngj8Hg/8PvTcdx8Pvf/x6CIOD111/nNY25XA733XcfMpkMzzQuQlAmiiIymQyfWmctpugzdv0Llgmx7TTZ/utkOVCwSJaOIAi8JtG27V2ZxGaziUajwTOJQXs1OGb3Hf4eIYclqs1S8H0XDhDDt7Ntm18Gm8ZXKhVYloVSqQTDMHhvR1bbeFTCmXz2HDRNg6IoI6vBqfTjZGDN6mddyU+OBwWLZOnYto0LFy7wmsRms4nf/e53sCyL7wARFSgCo7WJi1b8T0jYpO9H1hP0zTffhCRJeOONN3hNYzabxQMPPMD7Nu5V0zhv4R6TsVgMqVQKd9xxB9LpNN58800e8NJn72SQJAnr6+tYW1vj212SxUd/KbJwooI213UxHA5hWRZ6vR4qlQoajQYqlQqazSZ2dnamasOwSO1EyOIKTxMvcrbZ8zxeE9br9fjnhNU09no9lMtl6LoOTdMgimJk253DxLKL2WwWlmXR/sDXof1OumVZRjqdRiqVor//EqFgkRy78OASHmgGgwGuXbuGdruN559/HvV6Ha+88gr6/T7PJLJgctxuKkf1O0z7mOHbRa2ODaIFOAezX//B8HWZ8O4ve20DeFy1ruHn5DjOSKbRMAx84hOfwMrKCs6dO4dUKoUbbrjhyLM7uq7j05/+NDY3N/HGG2+g3+/ves3ofb48wu/7qBX3wZ/puo4vf/nLKJfLMAzjGJ85mQYFi+TYRR0QghlEcVVXAAAgAElEQVQS27ZRq9XQbDaxubmJnZ0dNBoN9Pv9yPsJr3A+CtNuGTfudvsFvHQAnQ17HaMWkex1GyaYWWT3EVXGELw8bqzfKNveku1t7rouqtUqLMtCMpmEqqqIx+Mji8b2us+Dvv9YZtFxHORyOfi+j263C9/3+ed2v4CcLI7w+z7c+olhC1symQxyuRzS6fSe7yUqC1oswpA+eWTBDIdD9Pt9dLtd/PznP8fW1haeffZZdLtd3puN1Tkt8ts36sC23/aFUdmpcf8nkxvXx/Aggu1txgWQR2lcVjr4e6uqyg/aqVQKn/3sZ1EoFPDwww8jkUiMZHoO82Bt2zYsy8KvfvUrVKtV/PCHP0Sz2USr1RpprxL+W1EAsdiC41TwBI3Vqn7hC19AuVzGl7/8ZSQSCapZXCL0lyJHar9gybIsDAYD1Ot1mKaJa9euYWtrC9vb2zBNk+/ZPC4QO+q2N+Gpl3AWkF2HCdbohJ9fcOotfIAcdxsymXAfw3nUH4bb28xShjAP+5UuBDM/LBtv2zZs28bGxgZc18XW1hYsy0Iul4Msy1BV9VDryVjNZKFQgCRJKBaLvMXPYDDgq6TDewfTydJiC37OBEHgf+dUKoVUKoX19XWsrKxA07SxgSKdECwmyiySI7XXQGBZFl5++WXs7Ozg+eefR7PZxJUrV3h7HODDACxcI7NfEHqUon7HqJq3vbKI+01Pk/mICj6i6ucmqVdkPz8u47Jw435HlvGJxWI4deoUMpkMPvOZzyCbzeLee++FpmmH/p6zbRuDwYDv6PLyyy+j3W7j8uXLvE8qHaKWTzKZRCwWw6233sr3Mtd1HYVCAYqi8KbxZHlQZpEcqXAdGGtxw/Zprlar2N7eRqVSQbvdRqvVitzpIXgGyy6P+6ASfA6iKPIDNTswC4LAV5+yr1n2RhTFkanM8O/FrkcD7HxE1RcG6+UYdnLCMlzskmW4WcP3cAbsOISnwff7THieB9M0YVkWNE3jmUbLsrCzs4NEIgFd1yGK4lybJwcDbk3ToGkanxovl8uIx+Po9XpwHGdkxxqyHERRRDweh67rWFtbQzKZRKFQgK7rSKVSx/30yIwos0iOBTsoV6tVtNttPP3009je3savf/1r9Ho9WJbF+yWy6++VrTtOUasBdV2HLMvI5XJQVZVfptNpqKqKfD4PVVWRzWYhyzIMw4Aoinz6T1GUka9ZrRkLNilonF5wutZxHPi+v+uSbRvJvu73+3BdF/V6HY7joF6v86/Dl4PBYKS/53FOSU/zM0H4oJ2NJEnQNA2GYeCTn/wkVlZW8OijjyKdTiOfzx/qCQv7u7Bm+6y7AW0Pt9jGvafYyXBwPAueHJPlQ5lFMjeTTpWyg4LjONje3uY7r9TrdTQaDb54JWivWqzDMq4NRPD5sKAuuEOGKIq8eDscLGYymZGvs9ksn5aRJInXbbFaH/Z1MFikQPFg2EmI53lwHGdk1XD4kgWLqqrCcRxomhZ5qaoqXNflwQ6732DwGaxJHSdqOnuSaXBmr8/EuJ+xDP9gMOCfy0qlgsFggGq1Csdx+C4wh9XQm2XTdV0/lPsnhBwMZRbJXIXr7aIObJZl4dVXX8X29jZ+9KMfodls8pYe7CB7WPbKvLDp3v0yM2w6WVVV3HzzzTAMA7feeiuSySRuv/12GIaBUqnEszXAB20jgtPR7Pvh6eio6XV2vXD2ksxur2no4PdZZou1dWGZQ/Yv+LXrurh69SpM08Q777yDTqeDy5cvwzRNvPXWW3BdN7KkYpxx79XD/vuzkxNVVXHq1Clks1l87WtfQz6fxz333DMSMEY9F3p/EnL9ocwimauolh3AhwffbrcL0zRRq9VQrVaxtbWFVquFXq8Hz/MO/SATnCIMZ3mi2p+wIC+Y4RNFEYZhQNM0lEolXmuVTCZ5zdXKysrUbSH2OshGZTXJwQRrQ4NmCcpZ3eJgMEC/30ev10MikeAtoLrdLm8Xw64XnPZmNY/BRSnh92LwZ4eF3bfjOBgMBtje3obrutjY2MBgMMCpU6eg6/rYvox0QkPI9Ykyi2SuoqZuAfCD5o9//GNUq1X89Kc/5Y2Cfd8fyeDsl5k8qKjVx1GrqSVJQj6fh67ruP3225FMJnHmzBkkEgncdtttiMViiMfjI9PPLOvCgsyo12aSoJAOukdvryzZpH+XYBAYnN5ttVqwLAvvvfceOp0O3n77bfR6PVy4cAG9Xg/NZhODwWDsApVw1vsw3hfhxwM+2JqNLVhIJpP4yle+gmKxiC9+8YvQdZ3em4ScEJRZJHMTdSBlB8tms4lGo4HNzU3UajW0Wq1dbTHCB8TD2os3GJCyIJXVAgZrEBVFQbFYRCKR4FtTra+vwzAMlMtlaJrGM46TiMoMhl+zcdPQ5GAmCa7CJynhbO5e2V32M5ZNDtf26brOexsmEgmYpolOp4NmswnTNCGKIp+mZpnH4Arr8JT0YS0yCd63IAh8v+lGowHXdbG5uQnf97G9vY1MJjOyWnqSEhRCyHKizCI5NI7j4K233kKz2cRTTz2FZrOJN998k/dNXIR6J1YvGM4gnj17FqlUCnfeeSdf2RwOJg97SpAsjmkzvlHXZ3WNwdXYlmWh3+/jwoULaLfbuHTpErrdLi5cuADbttHpdAAc7TaP435HURSh6zp0Xcf999+PfD6Pr3zlK3y19Dzb6xBCFgtlFsncsIMLW/3Z7/dRq9Wwvb2NarWKRqOBbrfLD5hRB7/DypiEp/dY0BeLxaCq6q7aw7W1NSQSCRQKhX1XgB4kwJ3ktjQlffz2yyxGXT98KQgfrHIHgFgsBgB8BXKj0UAikUCz2US73Uaj0UCv14OiKHBdl7eSYn0dD1NwURXw4fvP8zz++WWrpWu1GgaDAeLx+KGuliaEHC/KLJIDiQpgLMvCa6+9hmq1iu9973toNpvodrtHdrDbj6qquP3225FOp/HAAw8gm83i7rvvhmEYkGUZkiTxTCI7uE9rEbKmZDmwTCNr2eN5HtrtNkzTxOuvv45Go4Hz58+j0+ng6tWre/YePYhJV1+zhV6KouD06dPI5/N4/PHHkcvlcPbsWd4LlBBy/aDMIjmQcP2dZVl8J5ZKpYLt7W202+0jeS7jWt+wWrLgNFqxWEQ2m0WpVEImk+F7087LUWVNyfILZxyHwyE0TeO1srquo1QqwTAMmKbJV1VPc/I1LhAMmrRNDwtu2Wppz/NQqVTgeR7W19cRi8V2bRVI2XFClhtlFsncWJaF8+fPo1Kp4Pvf/z6fdp73LgzhWrD9rqcoCs6cOYN0Oo37778fuVwO9957L+LxOG9+PWsGkZDD4vs+b/LNTsJefPFFbG9v45VXXkGr1cK1a9d4r8e9grBJPzPTEIQPd37JZDLI5XL41re+hWKxiE984hP0mSLkOkKZRXJgw+EHO130+31UKhVUKhU0Gg10Op25HJjCqyzD3486CLKDmK7rvCYxk8mgXC4jm81iZWWFDmZkobFMOAC+126pVIKmabh69Sp0XUev1xvJNLJsY3gVd7glzqzC7XVYq6BGowHP87C1tQVBENDpdOD7PmKxGGUSCbkOUGaRHAibev7FL36BSqWC//iP/0Cj0YBpmnwF50HeYtO242DZjvX1daRSKdx///1YWVnBgw8+yA+4wb2XaXqMLKqonqUsKLRtG91uFy+88ALq9TpeeukltNttbG5u8ppGJvwZPMh7fa+TNkmSYBgGMpkMvv3tb6NQKOCBBx7gi3kIIcuLMotkZsPhEJ1OB91uF5VKha94Zu0+2HWYWQLHcOuOcQc91gRb0zS+s0o6ncba2hqy2SxWV1cjD1rUz5AsoqiAThA+3DvZMAzouo61tTXEYjFe28hqGllrKgAjJ20HbfcU9fll9+l5Hv/sX7t2Db7vo9Vqwfd93sCbTsoIWU6UWSQza7fb+K//+i9UKhX8/Oc/R7vdRq/XG6lRDAaIrK3OvA8WbLoumUzioYcewurqKj73uc8hkUggmUxCkqSxBffjvibkKM2yep6Vf/i+j3a7jU6ng2effRa1Wg3PP/88ut0un5I+ymGe7fiSTqfxzW9+E8ViEZ/97Geh6zp9zghZUpRZJBMJDvIsY9BsNkcyiv1+f9eBgAWOwSnfaUQ1Qg4Gn7FYDLIsI5/PI5VKoVQqoVAoYGVlBYZhjF3hHJW1IeS4zLJ6XhAEGIaB4XAIVVURi8VQKpUgSRKvyWUBo23bh/XUdwWjLHgdDofY3NwEAF6/zDKjhJDlQplFMrVms4l//dd/RaVSwRtvvIF+vw/LsgAcvIB+nKjsiK7ruO+++5DP53Hu3Dmk02mcOnUKqqrCMIwDbT0W3vqMkEXGFrGwBS+///3v0Wg08Pzzz2NnZwe/+93vZgoY9/rsjNvVhl2KogjDMJBOp/HEE0+gWCzi3LlzMAzjoL8uIeSIUWaRTMz3fXQ6Hezs7PCMYqfTgeu6AA43sAruvcsOQolEAqVSCSsrK3wP53Q6zXeeYGZ5XhQkkmXC6gYTiQRisRiKxSKvZVRVFRsbG+j1enw/9vAiGGaaBWVRu9QEL33fR7fbhSAIqFQqEAQBvV6Pl4UQQpYHZRbJxNrtNv7t3/4N1WoVL774Ivr9Pu/xdlCsoXa4pjGYUVQUBTfeeCMymQy++MUvIpfL4Z577uHF/iybQYEeOYmCwZ3ruiP9GX/xi19ga2sLzzzzDNrtNp8mZv/CrXbmiZ3c5fN5/N3f/R2KxSJuv/122hqQkCVCmUWyL7bquV6vo1aroVqtwrZtnlEMX3eaYC04ZRV1W9/3+R7OsVgMhUIBuVyO90vMZDKUpSAEo/W9bMs9TdN4LaMsyygUClAUBYPBAK7rwnGcXbefNzYjIcsyzzCePn0aAChgJGRJUGaRRAoGbp1OB//+7/+OWq2Gn/zkJzBNc6RGcVwmcFrh1dLsUtd1fPKTn0SxWMQ3v/lNpNNpZLPZyJ1XaLUlIaN834fjOHAcB++++y4ajQaefPJJbG9v49KlSyO1jMGAc16dC9h9iKKIZDKJlZUV/O3f/i1KpRJuueUWKIpCe6kTsuAos0gisUHaNE20Wi3UajVsbm6i1+vBsix+UGH1gcFdHWbJLrIp6PBUdDwe53vkFotF5PN5JJNJvk1feCEKHVwIGcUy86qqYmVlBYqioFgsQpKkkVpG3/d39WacB3afg8EAzWYTgiCgWq1CFEWsr68DAM+EBtFnmZDFQZlFMpZpmnj22WdRrVbxn//5n2i327Asa267QeyFZSEeffRRlEolfP7zn+d9EwE6kBAyC7Y9X7/fR7vdxtNPP41qtYof//jHfDHKYRNFEalUCoVCAX//93+PUqmE06dPQ5Ypd0HIoqJPJ9llOBzCtm2YpolqtYpKpYJut4t+v7/regc9uISnrdk2fKypL+ubmM1mR3q00RQVIdNjAZmiKJBlGaVSCYIgIJ/PQ1EU3lTfdd1D+3yxPq2CIGBnZ4fv3R58foSQxUKZRbJLv9/HK6+8glqthu9+97u84XZwZ5ZxDlKzyA5emUwGX/3qV7GysoKPfvSj0HWdr3YmhMwH68vY7/fx2muvYXt7G0899RSazSaq1erY9jqzPhYwOiOgqirOnDmD1dVV/PVf/zVfuEYBIyGLhz6VJ8x+heSu68K2bWxtbaFSqaDdbsM0zZHr7xUQzhIoCoIAVVWhaRpWV1f5QSOXyyGZTPIVk5RNJGR+BEFAPB6HoigolUojtYzNZhMA4HnegVZIj9uPmu0l3Wg0IAgCtre3IQgCCoUCJEni1yGELAbKLBJuMBjg/fffR61Ww3e+8x3UajXU63V4ngfgw4Uo837LaJqGO++8EysrK3j88cd5sKiq6khrDQoWCTkctm3DcRxcuXIF9Xod3/ve91Cv13H16tXIFlnAwT+PrGWWruu48847USqV8Dd/8zfIZDI0k0DIgqHMIuE8z0Or1UKj0UCj0UC32x0JDGedYo66HQs8Y7EY4vE4isUiCoUCVldXkU6nEY/Haf9mQo6IpmlQFAXZbBaCIPDp4O3tbQDgzffDe7NPK3j74XAI3/dh2zZ2dnagKAparRYURYGmaTzDyNDJIiHHhzKLJ8CkW3g1m038y7/8CyqVCl599dVdK5/H3ed+ooJFQRAQi8Vw7733YnV1FX/xF3+BTCYDwzBGpqHoAEHI0fF9H57n8Sb83/nOd1CtVnH58mWeYWQtrmY9cQR2l6soioJEIoEvfOELKJVKeOKJJ5BKpQ7+CxFC5oIyiyfAfoEiK3RnWcWdnZ2RbfzC2YCoGqS9hHsvsoxiMplEoVBAuVxGJpNBKpXas28iBY6EHC62+0sul4MkSXyVcrVaRa/Xg+M4Iydx0waMUSeNw+EQjuPAsizUajWIogjTNKEoCmKxGH3mCVkAlFkkME2T91v7wQ9+gG63C8dxdvVTDDfgnpVhGHjkkUdQLBbx+OOPI5VKIZVK0UGBkAXBTvDa7TZ2dnbw3e9+F9VqFW+88QbfvWneBEGApmnIZrP4sz/7MxSLRTz88MMjLbMIIceDMosnGDujD/ZTtCxrZPsvZh77xrJi9lQqhWKxyPd3TiQSuzKXez1nCioJORzBmQNBEJBOpyGKIkqlEobDIdLpNGRZhmmah7KPtGVZ6Ha7qFQqEEUR/X4/cltPQsjRomDxBHMcBxcuXEClUsEzzzyDer2OXq+3Z0A2af1jlFgshnPnzqFUKuGxxx7jC1mAybfro0CRkMMTtagsmUzi29/+NtrtNkqlEqrVKn76059OtOPLJGMJOxFlwSeb6VhZWUG5XEapVMKtt94auSUgIeRoULB4Qvm+j8FggHq9ju3t7ZF+isEBPCw48E8SuLHrqKoKwzBQLBZRLBaRyWSQSCTm9NsQQg5TKpUaqWFMJpMYDofo9/tj6xDZ/8cZt9jF9310u12oqop6vQ5VVeG6LiRJ4qUwhJCjRcHiCcS226rX63jyySd58XrQpFNMk0wba5qGj370oyiVSvjGN76BXC7HM4qEkMXGPt+GYeBLX/oSms0m+v0+KpUKXnzxxZFtQINZwoN0S3BdF61WC08++SSKxSLW19eRy+WQSCQoYCTkGFCweAL5vo9Op4Nms4lms4l2uz2ytdc09YlRBwRBEHh7DdYSo1AooFAoUEaRkCUlCAKvLy4WixgOh4jH43wv+WmDRGbcDIbneWg2m1BVFY1GA7IswzAMChYJOQYULJ4gbCDv9Xr4f//v/6FSqeDdd9/ldYrAwRayBLMKoihCVVV89KMfRbFYxF/+5V8in88jmUzO81cihByxRCKBxx57DI1Ggy+O+81vfgPLsviJ4kFri4fDITzPw7Vr19BqtfDUU0+hWCziT//0T/kUOEA1zIQcFQoWTxjbttHr9XitouM4kbszTCrcg5F9T1EUvjNLqVTCysoKNdkl5DrA9pT2PI+vko7FYvA8D4PBYOYALti/kf3f9304joNarQZJkmCaJt9HnhBydChYPEEcx8Frr72GSqWCF154AY1Gg08fzbojQ1QWIZhR/Ku/+itea0QIWW7BYC6RSODxxx/H9vY2Wq0W3+kl3Lh7P+HV0OH+rpZl4ZVXXkE+n8fHPvYxlEol3HXXXSP7xhNCDhcFiycAG7QHgwF2dnawvb0N0zTR6/X2XPk8ifDqaEVRYBgGCoUCisUin3qmnVgIWU7Bz2vwcyuKItLpNDzPQz6fh+u6uHLlCjzPm2kqOmpcYONSv99Ht9tFo9HgWUxCyNGhYPGE6Ha7qNfr+OlPf4pKpYJ+v78r0Dtok11FUXDbbbfxjGI+n0cikYjs3UYIWQ57fV4VRUEmk8HXv/51VKtVbG1t8VZcvu9PdP971R8Gv2dZFn72s5+hXC7j4x//OO3sQsgRomDxBGB9y9rtNhqNBlqt1q6B/KCBoiRJUFUVuVwOKysryOfzSKfTB7pPQsjiYoGcLMvI5XIYDAZIp9N8V6hJg8X9HoONTZ7nodVqQdd1tNttqKoKXdcn2kCAEHIwFCyeAP1+H//7v/+LSqWCd955B6ZpjrTKmVY4C8m2Bcvlcvj617+OYrFIZ/2EnBCyLKNUKiGVSuFrX/saKpUKvv/976PVavHrzBq4BRfeDQYDXL58GY1GA8899xyKxSIeeeSRkbFm3JQ5IeRgKFi8jkQNyI7joNfrYXt7G7VaDY7j8AL0WbF6JPZ4kiQhlUohl8shm80inU5DkqSD/jqEkCUhyzI0TUOhUIDneUgmkxgMBrzZf7ClzrQlL8GFL4PBAP1+H9vb21BVFY7jQFVVPt5QgEjI4aBg8ToSXkTiui7eeustVCoV/OQnP0G9Xt9VqzgLtnJaFEX4vo9EIoFHH30U6+vruOWWW6hxLiEnEOuCcObMGWxubqJSqeB///d/YZrmrj3lZ+X7Pvr9Ps8sfuQjH0GhUEAul+PjEgWMhMwfBYvXgagBkp3JN5tNNBoNdDodmKZ5oIGU3WfwcZPJJJLJJB+wNU2DLNPbipCTIrhARdd1+L7Pd3gxDAODwQCu68LzvMheitNgJ6imaaLT6aDb7ULXdWQyGYiiSIEiIYeEjurXgagBkp2BP/PMM6hUKnx3hYMIB6WJRAKf+9znUCqV8OCDDyKdTlPvM0JOmPC4YhgG/uRP/gT1eh0bGxuoVCq4ePEiP9E8SOcF1o+x3W7D8zw8++yzKJfLeOKJJ2h3KEIOEQWL1yE2BW2aJlqtFlqtFu9LFjyzn3XAZns+67qOYrGIQqEAwzAoUCSE8B1eBoMBVlZWMBgMoKoqBoPByDg0iXHTyp7nwXVdNBoNaJoGy7JgGAbVShNySChYvA7Zto3z58+jUqng0qVLaDabfJCO2iVhWoqi4I477kCpVMJXv/pVZLNZGIYxl+dOCFluLMAzDANf/epXUa1W8f777/OdXqZpqL1XUGnbNn75y19idXUVDz/8MPr9PtbW1qgMhpBDQJ+q65DneWg0GtjZ2YFlWXAcJ/J60xaDs2ykKIrIZrN8d5Z4PE61QoQQAB+OE5Ik8b6LqVQKtm2j3W7vedvwQpi9xhVWasPqFxOJxIH7xRJColGweB1hg6vjOHjllVewubnJ934O9h7ba8eE/e4fAGKxGB555BGUy+U9m+ISQk4mNibk83moqorPfOYz2NjYwP/8z/+g2+3y2sPwuBTeVWo/LGA8f/481tbWcOrUKSiKcji/FCEnGAWL1xnLsnitIttyK9xSZ1aCICAWiyGZTCKTyfAViIQQAuxuii1JEjRNw8rKChzHQSwWg2VZuzYFOMi4NBwOsbOzg1gsBtu2oes61S4SMmcULF5HbNvGb37zG2xsbOD3v/89Go3G2J1aZulHpus6HnroIZRKJdx5553IZDK7zuKpzxkhJ1t4DIjFYvj0pz+Ner2O1157DZVKBe+++y5c1x076zGNfr+PV199FVeuXMHnPvc5vrCGAkZC5ofSQtcJNq3TbDbRbrdh2zYfjAHwvmbMtAGdJEmQZZnXKuq6Hrn6mQJFQk6u8DjDvmcYBuLxODKZDNLpNJ+RCM9MzBIwDodD9Hq9kd6L89iXmhDyIcosLrlgg1tWu8NqFcPXY6YZkNmClmQyidXVVXz2s59FqVTac+9nyi4SQsJ0XccjjzyCjY0NvP322yP11OxkF5itltpxHLTbbZw/fx7lchnFYpFqFwmZIwoWlxwbaG3bhm3bI7WKwZ8HTXPmLggCZFlGIpFAKpVCKpVCPB7fs1aRAkVCSJgoishkMrwnYr/fh+M4I0HirD1gh8MhfN/Hzs4O7+no+z7VVBMyJxQsXgccx8HFixf5Tgn1ep3XKu416E6aAYzFYnj44YdRLpextraGRCJBgzAhZCJsnFFVFXfffTfW1tbwwAMPYHNzE6+99hosy+LXOwjLsvDKK6+gWCzi85//PDzPQz6fn8evQMiJR0f864Dv+2i1Wmg2m7Asa6RWcS/71TCyrKKqqlhZWcHKygoURaHCcULIxIILWDRNg67ryOVyyOVykSedB9kKMFi32Ov1xi7wI4RMhzKL1wHLsnD+/HlsbGzwWsVp6wbD9UKsVnF9fZ2fqa+srNBOLYSQAwnWLp4/fx6WZe0qm5ml7tn3fZimCVmW8dJLL6FcLuOP//iPaUcXQuaAMotLbjAYwHVdvgo6OOhOKzhQD4dDyLKMeDzO6xQNwxgpRCeEkGmxBXOZTAbxeBy6rvMM46yLXJjhcIjBYIBms4lms0mrogmZEzrlWmKe52FzcxPVahUXLlxAtVqF67pT3UfU9lrBGqN7770X5XIZmqYBoMUrhJCDkWUZ6+vriMfjePjhh7G5uYkXXngBlmXNvMAF+PBk13EcXLp0Ca1Wa+rxkBASjYLFJeb7Pt+xha0snDaYY213woM0q1VkO7XQVA4hZF4kSYKqqsjlcrBt+8DjSzC4ZNPRwXEx2BOWWnsRMj2KAJYYWwW9ubkJx3EAYKYzc3Zd1mpCFEXk83kUi0U8+OCDKBQKPLMYvA0NuISQWbBG3Z/61KewubmJX/3qV3BdF47jTD11HB6HPM/DtWvXYFkW3nzzTbRaLdx66608YKRxi5DpUc3iEgkHgJ7nod1uo9PpjAyws9YUCoLAA8Z4PI5kMolEIgFd13fdJw24hJBJsfEjPI7E43Gk02nE43EkEomZxpWoPrKslrvVau0aHwkh06PM4hIJD6SDwWBXZjFo0uxfuFZR0zTcd999vKeiqqoUHBJCZhYcXxhZllEsFhGLxfDQQw9hc3MTzz33HEzTHLnNrBzHwZtvvol2u4277roLsVjswL8HIScVBYtLynEcWJaFbreLbrfLvx8ckCcN8ILXZ7VEbA9XWZYpUCSEHFjUOMLGm9XVVbiuC0VRIIoifN/ft4XOfifDvu+j3W4jHo9TZpGQA6JgcQm5rov33nsPlUoFly9fxvb2NjzPA3Cw6WFRFJFKpbC6uooHHniAn22hC/kAAB7JSURBVPUHRa2eJoSQWWmahvvvvx/VahUvvPAChsMhnzrea3wJLs5jXwPgQSZbFd1ut2GaJgzDoJNfQmZENYtLaDgcotvtotPpwLZtuK7Lz5wPsvuBKIrQdR2JRAKGYUDX9V0D6367vhBCyDQkSYJhGLxu0TAMHgjuJzjesf2hgQ+nsHu9HjqdDizL4hsWEEKmR5nFJWTbNi5evIiNjQ2+tZ8oirtqDycRnIJWVRUf//jHUS6XsbKygmQyuet+KJtICJknQRCQy+UgyzI+8pGPIJ/Po9Vqodfr7Xvb8HgU/L/neWg2mxBFEb/73e/QaDRwzz337OrsQAjZHwWLSyQYDLZaLb5jC6vxCQaMwevvJVjLI0kSUqkUUqlU5HQNBYqEkHljWURRFJFOp2Ga5q49o4NjWpRxY5PrurBtG+12G4ZhUO0iITOiaeglEt6h4NKlS7wvGQsUgem2zGKDtCAIUBQFd911F+6++24oihJ5XUIIOQyapuH222/H7bffPtJEGxgfJO63mE8URQwGA1y4cIGPl4SQ6VGwuGRc14VlWej1euj1eiOZRWa/s/Cw4XAIRVGgaRqSySTi8TgkSTqU508IIVEEQUAymUQqlYKiKLtmN2apxx4Oh/A8D6ZpUr9FQg6ApqGXCFsFvbm5ic3NzZFV0CxgnGUBiqqquOmmm7C2tobbbrsN+Xw+cvutqFWHlG0khMyDoii47bbbkE6nUSqVMBwOUa/XeRudsEnHH9d18dZbb6Hb7aLf7yOZTEKSJBq7CJkCZRaXyHA45Hueuq6LwWAw8rNZBz9BEJBKpZBMJqGqauQUNLserYYmhBwGtiFALBaDYRh8VfS4sW3S8Wc4HMK2bfT7fdi2TVPRhMyAMotLxHVdvPPOO6hUKnBdd273q6oq7rrrLqytre2qFSKEkKOkqirOnj2LZDKJWq2GwWAwMmsy7c4urDm3qqp488030el0cMcdd9BYR8gUKLO4BIILV1hmcV61N2zXlnQ6zVdBE0LIcWF70ycSCb4qeh61i67rot/vz3X8JOSkoGBxCbCBkmUWL1++PDIFfZD71TQN6XQad999N+66666xU9CEEHIUWFeGYPbvoGU2vu/DdV28/fbb+MMf/jDXmRlCTgIKFpcE252A7dwyy5lx1G4ssVgMqqoiHo/DMIx5PV1CCJmJIAg8syjLMiRJOtACvmB/2m63i263y7cEJIRMhuYclwDbtqrRaOCtt97iNYuTnG2Hm3QzbMeW2267DeVyGYVCAZlMZlczXEIIOUqs32I2m8Xq6ioGgwFarRY/YZ62NRjDZmYsy4LrurRAj5ApUGSwBIbDISzL4vubOo4z8bTMuDNxdvtkMolEIsHP3gkh5LipqspXRgf3qJ92cUuQ7/u8Py1bNEMImQxlFpdAsL/iQWptwoOsJEk4deoUSqUSX9hCvRMJIYtAkiScOXMGmqahXq9jMBhMPT4Fr+95Hq5evQrXddFoNKBpGjKZzGE9fUKuK5RKWgLD4RCdTofX2sxy+6jVhJIkQdd1GIbBd2yhQJEQsggkSYJhGCM7Sk07PoXHvcFgwFdFW5Y1l4WChJwEFCwuAcdx8Oabb+LixYu8VnEabDVg8GsAkGUZN954I06fPs0HYyr6JoQsAlmWcebMGZw5c+bA248G6xzZji5vv/023wGLELI3ChaXgO/7ME0T/X4fnuft2kllElEroUVRhGEYu2qCCCHkuImiiEQiwWuqD3Iiy27LVlX3+330er3IYJFOmAnZjWoWl8BgMMDVq1dx7do1Pm0y6YDGgj/f9/lAKUkSFEVBPB7H6dOnUS6XD3zmTggh86SqKu68806k02koijKXE1nf9/l46nle5DQ0nTATshtlFpdEv9/nq6CnwfqJhfdYVVWV7wMtSRINkISQhcL6wMbjcT5OTduxITxesnGQdZfY7/qEkA9QZnEJuK6Lra0t1Gq1udTYyLKMm266CcVicdcZO62GJoQsAlEUkUqlYNs2brzxRqiqivfff3+q+4gay3zfx/b2NhRF2TWe0thHSDTKLC44z/P41MksK/fCg99wOIQoitB1HfF4fNeZOg2WhJDjEs7siaIIWZYRj8eh6/rUe9dH1XezzKJt25RJJGRClFlccI1GA41GA67rwvO8kcFt0h1cggRB4Kugy+Xy1IMvIYQclqjxjO3okkql8P777/Mgb5IT2/D4x3aBqdfrUFWVGnMTMiHKLC4wVoDtOM6uQHEW7PaCIEDXdei6Tru2EEIWHuu3eNCuDaxm0bZt2LZNwSIhE6K00gLzPA/VahVbW1uRg9os7XOGwyFkWUa5XKZV0ISQhSdJEvL5PBzHmWm8Cm8ROBgM0Gw2oes6bNvGYDCgGRZC9kFppQXGGsiGV0EfJMMoiiJfZRiLxahGkRCy0ARBgKZpUFV16r2ho64vCAKftRkMBnOZtSHkekfB4gLzPA/1eh31en1k1d4sU8dsMGR9FsvlMorFImRZpoGSELKwRFFENptFLpeDKIpTjX/B2kY2zgXHwqjxlRCyGwWLCyQqaGO1NeF+idNiqwJZrzJVVaHrOrXKIYQsNEEQeF/YWca/YK12kO/7cBwH/X6fxkBC9kHB4gIJD1ie52F7exvb29vwff9AAyW7lGUZuq5jdXUV2WyWanUIIQtNkiTkcjlks9m57mHv+z62trZ4twlCyHgULC6w4Kq9qMFxkrPh4HXYGTrbDYECRULIMpBlGZqmAYjunbifcTu5uK4L27bn9jwJuV5RtLDAxtUsMtMWekuShFKphFKpRKugCSFLQRRFpNNp9Ho96LoOVVWn2vqUBZfB6/u+D8/zsLW1BVmWqWaRkH1QZnGBsQFtMBjMZdqF9VekVdCEkGXCTnYVRYEsy1MvchmXWWQrommRHyF7o2BxwXW7XZimGbkQZdoBTlEUlEolrK2tQVGUeT5NQgg5VOFV0Qc1HA7R7/fR7/cpWCRkHxQsLjjf9/mZcdTZ8aTYmbSqqlSrSAhZKmzsUxRl5hPdqIDQ87yRKejggkAKIAn5EEUNC4xNk8xrpZ4sy0in08hkMrTNHyFkabBp6EQigUQiMdP4FTUzw6ah2dcH3U6QkOsVRQwLzvf9sfuXTjKghYu6Wc0PIYQsG9bFYV5ZP1YXfpAetoScBBQsLjDW2sF13chBbJKBLbh7ASsQZ81tCSFkWQRbf80rs+i6Ll/gQgEjIeNRsLjgojKLsw5mbKs/moImhCyjabf7C4oaN9n4SlPQhOyNooYFF9U6Z9bBTBRFyLJMmUVCyNIJb/t3UOGaRULIeBQsLjDf9zEYDOB53tzOeiVJmmkHBEIIOW6CIEAUxblMFQ+HQ74amsZDQvZGweKCY2e+bCr6IIOkIAi8ZpEQQpaJIAjQNA2qqs6tlIZ1mxi3iJAQ8gEKFhdcsMfiQc+m2Vm5KIpUyE0IWSqsrnBemUV2n8FLQkg0ChYXWHA1NHDwKejgmTlNRRNClokoinPNLIbHV0LIeBQsLriDZhaDtzmMM3NCCDkKw+HwQKuhx90n7dZCyP4oWFxgw+EQjuPAcRwA0X3C9hO8zbzPzAkh5CiwQFHTNGiaNrfMouM4sG177M8JIR+giGHB7XXmO+s0Mk0/E0KWCSubmXcAt1fNIo2ThHyIgsUlMa9M4LyncQgh5KgcVgBHYyIhe6NPyJII1x5OK7yghc6aCSHLZp4L84JZRZpyJmRvFCwugfDgOMtgGR4QaXAkhCyreYxftL0fIZOjYHEJzCuwo0GREHI9oLGMkKNFweKCm2cG0Pd9GmQJISSAes4Ssj8KFhfcPHdbYfdDU9CEkGVzWLtO0ZhIyP4oWFxww+HwQBnBqNYQtPKPELJs2KYC8zJL31pCTiqKGhacKIqQJGnm2weLuIfDIfr9Pnq9Hg2MhJClMhwOYds2bNueex03TUMTsjcKFhecYRgwDGMug5llWTh//jzOnz8Py7Lm8OwIIeRoOI6Dixcv4uLFi3xXq4OKx+NIJBJUt0jIPihYXGCiKEKWZciyPJepY9/30Wg00Gg0YFnW2AGXso6EkEURnBHpdrswTXMupTls1kaSJAoUCdmHfNxPgIwnSRIMw4Cu6+h2uwA+rNuZpdjbcRz85je/wbVr1/Dwww+jXC7j5ptvhqIoI9ejgZMQMi8HrTW0LAsvvPACqtUqLl++jGazCc/zJhr/oh47OPWs6/rcZm4IuZ5RsLjAhsMhZFneFcyxn03L933Ytg3TNNFoNBCLxdDv9zEcDvljTDJozrvQnBBy/dprrAiOJeFxZTgcwnEc9Ho91Go11Go1OI6DwWAw02NHnWArigJZpsMgIfuhT8kCCQ+WoihC13Xouj5SUxMcXKfl+z4sy8JPfvITrK6uIhaLIZPJ4NSpU3supAk+NwoUCSGzYuNW1BakwXHGdV389re/xdbWFn74wx+i0WjANM25nayGM4t0EkzIeBQsLpCo6ZJYLIZYLAZRFCPb4MzyGJ7nodFoQBAEbGxswLZtGIbBH0sQBJqaJoTMRTgIixpLWK9Dx3Hged5IRrFaraLZbKLdbk9dqxjMJobHTVEUeZkP62dLCIlGweICCQ+qiqLgzjvvRCaTwR/+8AfYtj32unsJD5iu6+Kdd97Bu+++i7feeguGYeBTn/oU8vk87r33XqRSKayvr48EjHTWTQiZRVQ/w2Amz/d9uK6LXq+H1157Dc1mE6+88go6nQ7efvttWJaFbrc7U/Ps4GOFKYqC06dPo1wuR5b6EEI+RMHiAgkPqpIkIZlMotPpQJKkmaeCgwMlGzjZSmjbtqHrOiqVCmzbRqVSQa/XQzweh6qqUFUVgiDwFYNU30MImRVbmMIuB4MBfN9Hu92GaZqoVCpoNBqoVCrodDrY2dmB67oj9xHciWrSGuvwbSVJgizLSCQSSCaTdCJMyD7oyL/AFEXB2bNnkUwmoSjKgQa0casCh8MhLMvCSy+9BFEU8bOf/QzxeBwPPfQQUqkUbrrpJhiGgVKphFgshnK5fKAm4YSQk8nzPNTrdX5SalkWNjc30e128etf/xrdbhcbGxtwXRe2bcP3fb6YJTh+sanoacdDFjRKkoR0Oo3V1VXccccdKBQKUFV1vr8sIdcZChYXFBscWdNYtmovuBIwanpl3JTLuDohNg3U7/cBAKZpotfrYXNzE6ZpQtM06LoOAPxSURQevEqSxPtBslpHduY+7e9KCFkubKxhmULf93mpSzCD6LouPM/D1tYWDxZt28bm5iY6nQ4qlQpM0+RtcYDRsWy/msf9hG/PNjvQNI0CRUImQMHiAglPM0uShHK5DFmWccstt0DXdVy5cgWO44wNCmet6QkKZhpZLY8sy5AkCdlsFqqqolQqQdd1rK+vwzAM3HDDDYjFYlhdXYWqqshms5AkaaJaoHkGitMEnhSkkmURrvOb9PqzPs4k9zMcDtHr9fiCOcdxUKvVeBBoWRYva6nVarAsC41GA57nwfM8+L7PLx3H4cFm8P7nJXhfqqrijjvuQLlcpkCRkAlRsLhAoqaJZVmGpmlIJpPIZDK4evXqkQQ4/X5/VxG6LMuwLItnD9kqQl3XIcsyYrEYXNeFpmmwLAuSJEHTNP57sIwjm0JimchggMz+H67RZKvBx/VkC75mYeMOgPM4mBIyrWkDP2B3W5lJrj/usYOXbEqXZQTZ99kMRrD5NQvuBEHgtYa9Xg+u66LZbMK2bWxtbcGyLFSrVT7NbFkWrl27Btd10Wq1xs58TFOHOCt2ApvL5ZDNZumzTMiEKFhcArFYDOfOncO1a9dw+fLlkcyiKIq7zsZnqeUJ3iZ4AAleDgYDdDodCILALy9cuMCzoGxbQkEQIIoiRFFEKpXimUZVVZHJZKCqKnK5HDRNQzqdhqqqyOfzPPBkAzoLQEVRhKqqI5nK/VZYBoW/P256a6/XJHhfhBzEuEVqUSdD8+hvyu7D8zzYts0vWZN+z/Pgui4GgwHa7Ta8/9/eve22UbVhHH/ssT3jcbbOxnGjIkHFAUiAkDhEQkTiNuDi4Ba4gB5TxBmqkMpRpJa4JGnieDPx5jv49C5WJrNiJ01Kbf4/qZrYHo+d1DN+5l2bGY/dwBKrGJ6cnLjbw+FQZ2dnury8dPMe2jHIrxr6A1jyVcOi9yjpyhRh98H/e5bLZa2urmpnZ0dff/21Wq2W0jS9t9cClhlh8T1mB81KpaKNjQ1lWaZGo6HhcKjBYCBJ7kzf3OVgWxSu/G35X1b+l0J+cl1/DjSrIna7XdVqNQ2HQ1WrVQ0GA8VxrOFwqFqtpsFg4B63cGiT5drSQqLNO1nUf8nea6VS0WQycbfz19S2vpT53y2/fuha3FQWcR/8fdSv9hVV/oqqgNLV/dFfr2jbo9FIpVJJ/X7fTcxvYdFuj8djdbtdjUYjFw6Pj4+VZZlOT0+vLE9OTjQajdx27LXy+6b/nm46NvknvvcZGP2/qYXF9fV1bWxsMAoauAXC4nvMDmTValVffPGFTk5O9Pvvv+vly5f65ZdfXFOx720Psn4AnLWtfDXSDvZ+eOx2uyqVSjo9PXUVSAt1VoGU5KbksftsO35486fwsYpjkiSKoshVHuM4dkv/cbvfr1D6lcv80p5/1+ZqQJp9taXBYKDRaOQqe354szA3nU5dyLPH/ds2ibX1IZxOp1cqiFY5zAdK++fvu3byaSeD9s8fwOKHQ9tm0cmVf/Lon5wVNTfb8eK+K4u2bTvxPDg4ULvd1v7+vlZWVpjZAZgTYXEBlEol1Wo11et1NZtNZVmmOI6VZdmVLwBb920OtvmDetF7uen+fLCykY3mpupDaB2fNXXXajXXn9MPd34lMooiF/6sUpkPkRYeQ2HRwi1wF7MGohVV+PJh0cJgUfPxYDDQdDp1lUFbryhs2uvedTRxPuTlf86v7//uFhzzJ6N+OHyowGjHzzRNtb29rWaz6fZ7APMhLC6QNE11cHCgTqejP//8U51OR0dHR66P0Nt8CZiipixf0ZfCTeuGmriLXm+e92+/q3XA9yt//s9W6cj397Jqob3ePOsBD6loFHC+SdoPXXafv7STRj/USde7qcwaIHbTe/Sf7/9ctJ159pui/esh9rlarabPP/9ce3t7+uabb1x/aQDzIywuELuiS5Zl2tnZ0WQycX2I8qErHwBDZ+v31Wxd5DZfRkVfQqHXI8AB8wu1BLxL9/V6twmTVlFsNBra3d3V7u6uVlZWlCTJvbwX4L+kNOWbd6FYE9WLFy/U6XT0448/6u+//9bR0dGVCbsBYJncthoax7E+++wztdttff/992o2m1pbW6MPMnAHVBYXjPWr29zc1HQ61e7uriTp9PRU0j+jlP3RyaHmYM4TACyKfOuIHdfyxzLrm+xXFLe2trS2tvZvvG1gKVBZXCB+E7N1ZrcK408//aTj42O9evWKCiOApVE0MMaXn97L+ii2Wi398MMPajabjHwG3hKVxQXiHxBtVPDW1pYkqd1uu3kNbR7GmyqLzBcIYBHkg2L+2OVfCCBJEjUaDbVaLe3t7Wl7e1urq6v/1lsHlgaVxQU3Go00Go10dHSk4+Nj/fzzzzo6OtKzZ8+uDHwpQlM0gEVmg/fq9bpWV1d1cHCgVqulb7/9VisrK1pdXb02HRgnycDtUVlcMPmDXaVSURRF2tjYUBRFarVaKpVK2tra0vn5uZuPzabQKJomBwAWjfVNjKLI9Ulst9va2dlRs9lUvV6/sq6/BHA7VBaXhM2zdnFxoW63q6dPn+ro6EhPnz7V+fm53rx5c23ONQBYFPkT5TiO9emnn6rZbOq7777T5uamPvroIyVJcu2yoADeDpXFJWGTS6+tralararVarlKo51hZ1nmLvs1Go2CTTKzJsu9qSln3vUA/PfcpeuLf7UX/wpMSZJob29PW1tbarVaWl9f1+rqqrt0KID7Q2VxyVhA6/V6mkwm6nQ66na7evbsmU5OTvTrr7+q2+3q1atX1y7FV9RMfduJte96JRkAy6HohPGmEc3zBsg4jvXll19qfX1dX331ldbX1/XJJ58oTVPV63WVy2WCIvBA2LOWjB140zR1lxFL01SPHj1SkiRqt9s6OztTlmUaDoeuwnh5eenWz1/aa955Gm+6UgyA5XPTtd79oOifRBYdN/znS//vi23T4FjfxHq9rr29PW1ubqrdbmttbU1bW1uqVqsM1gMeGJXFJZM/eFsAtKl0+v2+er2efvvtN52fn+v58+fqdrt6/vy5hsOher1e8FKB5XL5yjVsCYwA5lE0ErloGpzpdKo4jvXhhx8qTVN9/PHHWltb05MnT9yyVqupVqupXC67oAjgYVFZXDJFB+UoitRoNCRJaZqq0Wio3W6r0WjozZs3uri40NnZmXq9nhsIY9Pu2Ehq+9nfftHB3qoIBEbgv6noJNKf83U6nSqKIkVR5MJeFEUql8suCO7t7WllZcUdp/b395WmqTY2NlxTc346HPpIAw+HyuJ/iH9QHQ6Hmkwmury81Hg81vHxsQaDgf744w91u129ePFC/X5fh4eH6vf7evny5ZVLCTJ/IwCTb362++y2P9dhuVzW5uamkiTR48ePlaapPvjgA62srOjJkydK01T7+/uqVquqVquuL2IURdf6JBIUgXeDyuISmXXA9OcaS5LkyvOq1ar6/b663a7Oz89dc/VkMtHFxYULlnYpwXwfR+v7mO/zSGgElp/t5xbm7Koq1vfQKodWTdza2nJ9qNM0dRXEdruter2unZ0dN8PDrNkXADw8KosL7r7OqK15yJqf/WboyWSik5MTZVmmw8ND9Xo9HR4eajgcqtPpaDAY6PXr18qyTH/99ZfG47ELkwCWm50U2sUBarWadnZ23DJJEj169Ehpmurx48cuJEZRpFqtJknu8qX+EsD7gz1ywd3XmbWNWrSKo3/1g+l0qiRJlGWZxuOxer2exuOxBoOBoijScDhUtVrVcDhUuVx2j1mVsajyeHl5KemfycRtGp+bptiw9zLP70yzFIrM87m4qSJ+m8/Vu/wM3vdrWXNxvkJo/+y2/3g+LMZx7CqIjx49Ur1eV7vdVhzHarVarnII4P1HZRFzsVHQVjG0iqMf9uz2aDRylchOp3NtaRXJLMv0+vVrDYdDN7DGPMScjbO+UPMjud+3ZnT6Zz2sd/13Lfq8zfrMzzsh/ryv7z/XlqVSSfV6XdVq9UqF0MJfHMfu/u3tbcVxrGaz6QanFIVJG8jiN0sDWBxUFjEXqwLEcTxz3clk4iqRVnGsVCrXllmWKYoiXV5eKk3TK9ewtnBqX2ih234fSati5h/3habvkK5XaecZ1T3ry/ltHs8/xvVtH4b/d/U/Hxbm5nnuXR73Zw7w+Z/H/Gc1vz17rr13v/nW/71sPX99/8ooftUwiqLCsJgkiQuFu7u7LjxaaKxUKqpWq9d+l5vmawWwGKgsYqZ5KnJFAcxvXraR1Pnm6NFopMlk4oLiYDBwTd2j0UjD4fBa03fR7X6/f205mUzcIB17X/kQGQqX/u/g385vpyjM5rfhr2d/B3+3K3pffgguen+4Gz8UFd32Q5UfpmzdKIqu3Ve0jXywtyZdf0RwPqjlXz///Py2baqZcrmsRqPhwlqlUlGapi70+cskSRRFkXvcv10ul1Wv112Tsv2ziqAkd9sqg/Z7+SG16HhRdIwgOAKLg7CIG4UO6rMO/vNWFOwxG2Vt4c7CYD70FS3H47ELlRcXF9duF4W8orCXX89v9rV/flgLVTLnqXTmt1/0eGgb7LJ3VxQWpathzAZr2NJ/bn69UNgLhVC7zw+j/u3869wUFkulkrtWcqPRcGGvXC678JcPjXEcuzBZqVRUq9WuhMs4jq/NlvA2qCwCy4GwiLm8iwP9rIrbZDJRFEXuZ7vfX4YqgLPYev50Hf7S5PuFvW0z86x+ZuyeD2vWlCz5z31+ANa82w/9P+dDa/5zOEs+hNrPRWEzH17zoTjf7P6Q+zzBEVgshEXM7V1WCW67fb58gIdz1/2RyiKwHAiLuBMO/Fg2fKYf7m/A3xZYbIRFAAAABDErKgAAAIIIiwAAAAgiLAIAACCIsAgAAIAgwiIAAACCCIsAAAAIIiwCAAAgiLAIAACAIMIiAAAAggiLAAAACCIsAgAAIIiwCAAAgCDCIgAAAIIIiwAAAAgiLAIAACCIsAgAAIAgwiIAAACCCIsAAAAIIiwCAAAgiLAIAACAIMIiAAAAggiLAAAACCIsAgAAIIiwCAAAgCDCIgAAAIIIiwAAAAgiLAIAACCIsAgAAIAgwiIAAACCCIsAAAAIIiwCAAAgiLAIAACAIMIiAAAAggiLAAAACCIsAgAAIIiwCAAAgCDCIgAAAIIIiwAAAAgiLAIAACCIsAgAAIAgwiIAAACCCIsAAAAIIiwCAAAgiLAIAACAIMIiAAAAggiLAAAACCIsAgAAIIiwCAAAgCDCIgAAAIIIiwAAAAgiLAIAACCIsAgAAIAgwiIAAACCCIsAAAAIIiwCAAAgiLAIAACAIMIiAAAAggiLAAAACPof+EuNJ2tDElAAAAAASUVORK5CYII=")
+    no-repeat;
+  background-size: cover;
+}
+
+.node-time {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAALc0lEQVR4Xu1dfaxcRRU/53Zf12jSpCQoqCRgQPmI2qINalvzKii+150zz2pbUQtVUUSERBQxCKgBgiJqFCRqNQiiFlb79p4pCIi2RtSKNSXaomKNH0HwAxvyQE2lvGPGvCaP++budvfeuR9vZ/7dmTO/8zu/OzM7d+ZchFCGmgEcau+D8xAEMOQiCAIIAhhyBobc/TACBAEMOQND7n4YAYIAhpyBIXc/jABBAEPOwJC7H0aAIIAhZ2DI3Q8jQBDAkDMw5O6HESAIIH8GiOg2AFibv+VgMckAM2d6iDM1TgtHEEBxQg0CKI7rSvYUBFDJsBQHKgigOK4r2VNVBdBrAfgxADgxwegDANCuJMvFgfqoo6t13bpn5kyceVkE9uJLKbUNEUdn1xOR7caYVb3aztffW63WaBRF2/Je5ffiKwigF0MF/R4EEEaAMAKEKSBMAWENkJhysq7ye81gYQ3Qi6GCfg9rgLAGGKo1wO2IOJ54uHYy87KCHrjKdaOU0ojYSQB7kpkX+gRb1hTwGUR8f8Kxp5rNZrPdbj/l0+Gq2iaiawHgAwl8jzDzc31iLksA5yDiFx2OLWPmnT4drqptItoBAKckNsd2G2Ne7BNzKQJIW/Ag4rviOP6KT4eraHt8fPyIRqPxSBJbEbujpQhg48aNz9i3b99/HA7fYIw5r4pB8olJKfVGRPy2g4/zjDE3+Oy7FAFYh1zvAwBgV7PZXN5ut+eIwycJZdtWSm1CxLMdAjjBGPMbn/hKE0DKosf6ejkzX+HT6SrZTpsOAWAHM7/SN9bSBKCUegUi/tTh4OOIuDyO41/5dr4K9onoOwCwxoHlfGa+3jfG0gRgHSOibwHAmx1O3szMZ/l2vmz7RGQDbwWQLHubzebSdrv9hG+MZQvg9QDwXZeTiLgmjuNJ3wSUaT9lHWQhXcbMVxaBrVQBzIwCXwWAdzic/QkzLy+ChDL60FqfLSKbHAu/XzcajZWTk5P/LAJX6QJYs2bNkQcOHPgBABzvcPgmZt5YBBFF9jGz7Wv/9jWS/SLiWXEc31wUntIFYB3VWr9JRJxn2xDxujiOLyiKEN/9aK1PExG75/8sR1+3MfN63xhm26+EAGamgk8DwIUpzl/JzJcVSYyPvlavXv2CRqPxcxE5zGH/YQAYY+Zf+ug7zWZlBDA2NtYcGRm5BwBWuMCKyJnGmK8XSU7efRGRDfKRKXbXZT3hOwjeygjAgm+1WiuiKLIiaKY489Kin5BBSHW1IaI/AMDRKfYKW/XPWXPk5WBedojITgN2OnAW30ek8vJjth2l1E5EfFmK7VuYeYOPfg/FZqVGgIOAieiTAPCh1HkL8SV12SlUSj2AiCekTGul34WopAAsWVrrL4jIe9NEICJvMcbYncRKlrGxsUULFy58VERGUgA+yMwvKht8ZQVgiSGibv8MbJWrmfmSsklM9t9qtU6OougXXXA9zsyLqoC70gKwBCmlLkbET3QhayszqyqQaTG0Wq31URRt7oLnUWY+vCp4Ky+AGRGsQ8Rbu0wHfzLGpK2wC+Naa/0REem2h/8jZn51YYAOoaNaCGBGBMsQ8b4ePh3HzHsPwe/cq2itbxSRbtvWm5j53bl3nNFgbQRg/RwbGzt8ZGTk7918RsST4ji2V80LK0R0JwCcntYhIl4Yx/FnCwPUR0e1EsBBv4jozwBwVBfCCxMBEdlcB657/f+HJyLjxhjnK+8+4uStai0FYNkgoh8CQNp8ugcR1/keCXoFP4qiYzqdzh+9RS8Hw7UVwIwIvgYAzpNDvt8iEpE9q3BvSgweYubUESqHuOVmotYCmBFB2hA8JSJLjDF2Dz73orXeLCKuV7f3MvPK3Dv0ZLD2Aughgo8zsxVIroWIXgsAdzuMPtxsNo9pt9v/zbVDj8bmhQAsP1rru0TkdQmuNjPzGXnzR0TvA4DrknZFZMIYE+fdn09780kAnxKRDybI2sXMJ+dNoNb68yJyftJuFEWLO53OY3n359PevBGAUmoCEZOniP/NzK6jV5k4JaI77LZEwsj9zLw0k+ESGs8bARSZYWM+pbmbNwJQSp2BiN+c/RCJyD+MMc/O+8FKSYZdide7/fo6nwQwJ+mEr+vVaRtAjUbjqC1btjzUbxDKrD8vBEBESxHxGyKSPHnzZWY+J2+CJyYmNkxPT7vO7nv525k3/tn2ai8ApdQzEdE+dYsdRJ3LzK5MJJk4tQc+FixYsMN12kdE3m6MsTuUtSi1FsDatWsP279/f9oVqgebzeYSX7kGup1WQsS1cRzPSfhQRUXUVgBa6xNFZE8aqYh4aRzHV/kifWJi4ujp6Wmb1+c5rj5E5CJjjE38VOlSSwG0Wq1TZ+4POMkVkTuMMat9M6+U2oCI3e7xXc/MczaMfOPqx37tBEBEbwWAW9KcFJH7jDFPy7bVDyH91tVarxeRbmcAK3VmMelfrQRARDaPXrdhdZKZXdk2+o1rX/V7vBoGRNwdx7HXdG99AZ5VuTYC6JJT6KA7VzDz5YMSkbUdEdm1wF+72Hliampq8fbt2w9k7SvP9rUQABHZId8O/WmllIuVLjA97gDaJqUdXHXhrbwAtNb3iMipXeZ876nU+n3iiOh7AHBal3YrmPnH/dr1Ub/SAlBKTSLiRIrjf2Hm5/sgJQ+bRGQTPJ6bZquM08u1GgGIyKaMfWcKgXcyc/J1bB5xy9VGr5vOVRBBJUcAIrKJIN7mioaIXGuMuSjXSHk0prVWIsIpXfx2JhtaofcYZmOpnACIyCZHdOYLFpEvGWPe4zFeXkz3EMGOKIrGyjpJVCkBaK3PFJGbUqJwFzPbvIK1LERkU+HZlHiuUlo2tMoIQCl1PCLa9DDPczBUy8MWST+01h8WkatTRHAJM6f95k30lREAEW0BgDc4PH3Sfma2rEufeTOvlPocIjrT3pVxqrgSAiAiu6i7JmXRV+m7dYMIpIvYd0xNTa0screwdAForV8lIjZT6JzMYCJygTFmzvn7QUivUpuZbeOtAPByB65CM4aVLgAi+j4AvCZJhIjcaoxxZRKvUiwHxqKUGkNEe7w8Wf4FACuZedfAxvtoWKoAlFIbEfFGB979URQt73Q63fLs9OFmNat2ecdR2DmCsgUw5zPyNlQicpUx5tJqhi0/VFrrU0TEnipKFvudgKVFLHxLE0DKTR5LxJ4oilaUtTGSX3gPzVLaNTMAKCQ/cmkCSNvrr9up2kMLc3otIjpWRH6GiMkE0nuZ+bis9nu1L1MAuwHgpNkAEfHuOI5Tc+30cqauv6ddNJmenl61devW7T79KkUAaadnEPHaOI5r86Inr8BorU8XEZtoKlmuYeaL8+rHZacUAWitx0XkdgegDcyceuDT5YC9FOqToEFt9/Pkjo6ONhYtWmTvNySzh3r/bE4pAkjb+Yui6NhOp/P7fkgnIumnfhF1Bxm6U1LN/Y6ZX+gTcykCSEmq+DdmPqJfZ+eRAFzb4Y8xs+vKW780pdYvRQB53q+fLwIoMr/B0xbeuUmpD0NBAHPJCgIQGejjCWEE6OPJc1St/RSQzf3qtA4jwIAjQHVCmA1JEEAQwGgURduSMvL9kawwBWR7cHNrHUaAMAKEEcAYsyq3R6pmhsIIEEaAMAKEESAsAsMUkJi6wr+Ams3lg8KdV2uAXu/ooyiyX9BakiDr/i73AgfltVbtEHHOl8Xsq+VuTvRz7sBlx8s+gOtlT60iUSOwWaeIIIAaBdsFNQig5gHMCj8IICuDNW8fBFDzAGaFX0kBZHUqtC+OAS+LwOLgh56yMhAEkJXBmrcPAqh5ALPCDwLIymDN2wcB1DyAWeEHAWRlsObtgwBqHsCs8IMAsjJY8/ZBADUPYFb4QQBZGax5+yCAmgcwK/wggKwM1rx9EEDNA5gVfhBAVgZr3j4IoOYBzAr/f9R0rL05ofGbAAAAAElFTkSuQmCC")
+    no-repeat;
+  background-size: cover;
+}
+
+.node-push {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAItUlEQVR4Xu2dacxdQxjHf5WIfUmDSsXSUkpQWytqTxEhIQghxNrY99h3sbcaglhbgthKbPFFEASxLxUNja0+ISGELz5IyF9G87Z9zz1zzsw5d7ZJmra5sz3/53fnnDvLM2MoKWsFxmRtfTGeAkDmEBQACgCZK5C5+bGOAPsB2wM7mL8nZeTHP4GPgU+AL82/P21rf2wArARcB1zY1uAEy/0FzAGuaGNbTAAcBTzexshMymg02KqprbEAMB14p6lxGeZ/C9ijid2xAPAVsEUTwzLOOxOYZ2t/DADo2abnfkn2CmjEfNcmewwAfAZMsTGm5FmiwH3AqTZ6hA7AWOBXG0NKnqUU+BCYZqNJ6ADoheZNG0NKnqUU+BtYBdDfA1PoAJxvfuPW2VE+X16BqcBHdcKEDsBJwNw6I8rnoyqwN/BGnTahAyCKP6gzonyeLgCrAQuATYuTGyuQxAggq/cCXm9sfimQDAAFgnYwJwWAJNBkkCaFSrJTIDkAZPZE4Fs7+7PPlSQA8upGwPfACtm7eLAAyQIgs8ebx8G6BYJKBZIGQFavZ6aJJ9dA8Fhkk0kHAGeaqVwXvpMHQOJosegFYLcKpSYAi11UHFJZ2fUSsItD+1kAIH3WBJ4A9M0ZmS4GZjkIOOyi2t610KET0QBwJHC2oV27Xee3cJxWvp4EDhohmB4NixwEDKGoJsA0EdYmRQHANcDVo1j3NHBEQ6tXNCPBYWYRRALEnqr0sbEreADqjGsDgRa3TgC+s1kJs1FxyHnqNBrUvaABsDWsDQRD9pnX5m11Gq3RYAFoalTOEDTVaiQIQQLQ1qBcIWirl0AIDgBNbtzpMEDmCEEyAKwK6HDHhg4AqGhuECQDgE7y6jSrj5QTBMkA4HsZNxcIkgFA3/y3gV19DAGmjhwgSAoATdM+D17jEqUOQVIA6It7qJmz17Str5QyBMkBIKdrJHgKWNkXAQn/OkgSAPldS7eCYPUCwUAFkgVAVivQkyBYu0BQqUDSAMjqGeadYJ0CwagKJA+ArN7TjATjCgTLKZAFALJa8wN6HGxQIFhKgWwAkNU7Gwg2LhAsUSArAGT1TuadwOdp4JjnCbIDQBBsZ0aCzctIQJYAyO9bGwgaR74cAE2MI0G2AMiPLsZXcRAbBC4aBLcjqOmI3lVgiJggyBqAC4DZTamxzB8LBNkCcDKgaJddphgg6A0AHa68BdjW8wJNlw70UXfoEPQCgGbhtFsn1xQyBL0AoOPVIw9V5ghCqBD0AsBvnpdkYwUoRAh6AeCfWD3WQb9Dg6AA0IGT66oMKbBEAaDOWx18rgDLocQWKAB04OC6KgsAdQol/nkBIHEH15l3GnBvXaaePi+PgJ6E/r8ZCX5tz20Oaq4XAP4A1gjI6GF15aoAr6frBQDdNlkVaHFYzui73SuB6/tu1KK9XgDY19zJ63NvvoVtwWTRxZQ3BNObpTvSCwBqUteyKljj4UBOAZgvA24K1PnqVm8AhKSBQr/q7KDCv3aZLgVu7rIBD3VnCcDIN/LRooh60JVLzP4HH3V1WUcBoAN1L+pwq5nv7mYNwHvmtJBPUS8EbvVZYcd1ZQuAi+FVPtEm0zkdO8x39S46RLst3MXoKgfoDuLbfHunh/pctIgSABeDq/xxHnB7D87qogkXPaIDwMXYKvHPAe7owjM91emiSVQAuBha5QtNbLnEJu7JxwObcdElGgBcjKxS7yzgrhA86NgHF22iAMDFwCptzwDudhQ+lOIu+gQPgItxVQ46HbgnFO956IeLRkED4GJYla4h7eTx4Pv/qnDRKVgAXIyqEvYU4H5fqgdUj4tWQQLgYlCVX3SS+IGAnOazKy56BQeAizFVos4E5vlUPLC6XDQLCgDdGKITyLo6xlc6CXjQV2WB1pMMACd6/qaqvocCdZrPbiUDgM+IH8cDD/tUOeC6kgFgH+AVD0IfBzzioZ5YqkgGANfftCp/LPBoLJ7z1M+kAHCB4BjgMU+ixlRNcgC0geBoc24hJsf56muSADSB4CgTPNqXoLHVkywANhAcaeIFN3Wayk028+hNy4aWP2kAqiD4BdCS7vwW3tBhjxtNOauZsBZt9FkkeQAkps4magPHjsbpOpu/qIXK5y6z8TOFXw2vA4qZ3CZZfQHGtKk5wDJaDVw2qENoEb+ayuYaLDsbALTlu2q/v4I9aBiNLek9Rv3Wod22KQsAbJ6Reqf4oq2KQyg3ydPlWckDoK1fpw7BQbE0mTQAzwKHxOKJIfUzWQDeAaYPSdSYmk0SgG8An1fKxeTQpn1NDoA/A7nMQhB+DSwExpo3db2thxZjKRkAJgKfBRDKThFEFVnk/Yqvok4fazIqlJQEAKsBnwA+L5Fs4yDb+YTNzOjQpg3fZZIAYCrwgW9lGtb3JdDkAssZwKsN2+giexIAaOfv3C7UaVDn/sDLDfIrq84paMv6MFMSANjM9HUpshaltLTcNGkqt+swd3V9KgDUKWTx+YvAwRb5ls0yDvipRTmfRQoAHtScBegKmTZpgbmHsU1ZH2UKAB5U1MkjvYe0Sb+aeYI2ZX2UKQB4UFHTzm0iqWuqWmWHmZIAQDuFhhnkSUvJbYJnD9qj0BcUE4DFdY2FviPoQOClOiM6/lwh5hRqzjZp8kr7DzaxLdBBvq+ALW3qDR2AbYDPbQzpOI82aWgNwCbp0KrOLw4zaXucIqbUptABWAv4vdaKfjLofONrA5rSwtDzwO79dGdgK9bnKUIHQFbqQgctwoSQNCspCLRb92fTIe1mltMvD2RF8Blz8YeVXjEAIEP0GNDjIKSkPo0PxOkjddGzX+8AVikWANYb8Y2zMizTTBotdQ2OdYoFABmk6VVNzU6zti6vjDoRpcdQoxQTAP8bprj/sxtZmXbm54zjtWzdOMUIgIxcH9jO/Jli/t/Y+EgL/Ah8bLakyek/uNgRKwAuNpeyIxQoAGSOQwGgAJC5ApmbX0aAzAH4FybxvZC660JcAAAAAElFTkSuQmCC")
+    no-repeat;
+  background-size: cover;
+}
+
+.node-download {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAHs0lEQVR4Xu2du+8mYxTHPxsKCgpisYhFQoIEcSncCwoKIouEREKDRIL4C2g1GyKEgkblFpcgQkFBgQQbihXXuBdEKCgIOet91+xv35lznnme8848v+dMss3+zuV7vuc7Z2bemXlmC7E1zcCWpquP4gkBNC6CEEAIoHEGGi8/JkAIoHEGGi8/JkAIoBkGXgDOWVT7PnB1M5UPFNrKBPinh4NW6u+VQAsEPAVc18PA08D1LU+CFgTwI3BkT5N/Ao4KAWxuBvrG/7LqFnaCpg8BIYDGTwJDACGAwWNcHAI29ykAMQFiAsQE6GOghfEXEyAmQEyAmAD9GmhhCsbvAI1PwRBACGA1Ay2MvzgJbFz9IYAQQFwFxFVAXAWsZCDOAWj75ZgQQAhgk98KIm4GDXU4JkBMgJgAm56BuAyMy8C4DIzLwLgM7NFAC+dBcTOo8cNgCCAEEHcDWz4PigkQEyAmQEyAFQyMOQO+ALgROBU4DTgi8YeU74F1vp8/h+cBtgIPAxcOvKjaR6O8wPoRsBt4CXg9ke+iP4LcCTxQEMAYAaamn1oAsqN8kgp6wH4ncE+peCkN0Igcg2kd7+druFM4GFPjy8CVYxwHfJ4HrikR01r8o8CtJRJuiLGO9/OnFsB3wDYH7nYAz+XGtQjg7MUxOzfXKv8QwHhWfwUuAXaND2G7FXoH8FBOkgHfOATkESvnAnJOMHqzTIAngJtHZxh2tOTPTT31IaD0SWCXj+wdyNKAL4HtuV3o+MdlYDkyvwWOywlnEYC2By3zy7p77wE/5ABy8NXwWzhwgNUbUha0uhiQ1c0sWxZ+i7NGoIC0xLEU42Gj4a8Zezb3luI1AmWdPTkWzXXT8Fs4mKq2qwBZ4XRoy8JvcdYIlHX25HJurpuG38LBVLUdDcg506wFMGcChbiaBeCO39K8IHCq/f+/vK78hwDmfQIbAiiw87nuQQXwaSFc8ccEiAmgCdD3GKRmzzdw3YPy4akRXPHHBIgJMK0C1ez5Bq57UD48NYIr/pgAMQGmVaCaPd/AdQ/Kh6dGcMUfEyAmwLQKVLPnG7juQfnw1Aiu+Oc0Aby+6+dKYKd9VeKfiwD6mnQg8Le6jwwbeAvgAOCvHggWfrXyXPFbALoCWDz50vddPyHnYOBPjaWBv3viPwj4YyB39jN7LdwMGvqu35LbQ4HfR4rASwCHAL8pmEo89u6Ffw/0OUwA64sThwO/jBCBB4GHAT8bsMjDHMcY7IZMPPDvzTcHAcjJkzz6ZNnGPH1UmkB5aFOmlmV7scBHqkvj3wf3HAQggLQiu6DlMWh5HNq6abEtHCxzHQt8Y01snLBauJL498tlKd4VQAeRlqcL/kRA3lewbFpcCweS5wTgC0vChY01rhayFP6VeSwgXQFsQKXl6pqfAnyqsWeYLhYOTl68n29It8fEEtMaS+MkK5fF2RXACha0fF2X0w3v3mvxNA5kEYyPrd0q3HzL4VHDPwjd4pxLYAJ3e021nN2YZwEfDiTRYg1xcCbwQUIBFj4Twu0xzcGv5rIAdgWQ0biu63mL19JWhRuL/1zgXZXB/w0sXCaEM+8MWXktzmMJHFPsRh8td9de1i56Z8QhZRUH5wNvJxRg4TEh3D6mGgdZuS3OrgAMrGj5uyEuBd7aEFPz38iBLLrwpgHX0sTCYUK4/UxT8SflsoB3BWBEq2HohrkceKPzH5pvl4PLElfhsvBnLLHXLAV/ci5LAa4AEhBrOLqhZFGmVxf/ofktObgCeCUBj4W7hHAhAAtZWjO7MWS9AvkpVvORRlrewu3GXlfzJacFv4W7lTaWQlwBjECu4emGvBZ4RslhsZmq+SGAnualiGCExnpdLDtMyXwhgAE21y2CKZofAlB2p3WJYKrmhwAM89RbBFM2PwRgEICFJGOY/cymbr6ltiyMFmdtD7PEGNuAFD8NZ0ossa2lriycFmeNWEuMVPLH2mtYrXFrqikLq8VZI9USw0p8CTsNr5ajtnqy8FqcNUItMTTSS/9dw9yXr8ZasjBbnDUyLTFKN9gST8O9MUatdWThtjhrRFpiWBrmYaNhX+asuYYs7BZnjURLDI/mWmMG/gGmLM2rnUApf9WS918tHvW2CmkqO1f+WxGANO9BQO75yybPCsgX0GrYQgA1dMkRYwjAkdwaQocAauiSI8YQgCO5NYQOAdTQJUeMIQBHcmsIHQKooUuOGEMAjuTWEDoEUEOXHDGGABzJrSF0CKCGLjliDAE4kltD6NkLYMzSbTUQPweMVXw4cu6fjp1DI8disLy0armj25vf4qyNIAluiTOWhJb93Lm3NM4CQpo018/H1yag2X0+/jPgpNpYbATv18D2nFotE+AR4PacJOHrxsCTwE050S0CuAV4PCdJ+LoxcBvwWE50iwC2LhZL3JaTKHyLMyArmclaSEMfrFCTWgQgQe4GdqrRwmCdDJwB7MpNaBWA5JG1dnbkJgz/IgzcB9xbIlKKACSfLMR4PyDLqMa2fgZ2A3cBr5VKnSoAySvfyrkBuGjx7/hSYCLOSgY+XyxeKesWP2v4TlESjWMEkJQgjOfNQAhg3v1xRxcCcKd43glCAPPujzu6EIA7xfNOEAKYd3/c0YUA3Cmed4IQwLz7447uX4cZWJCcTpL6AAAAAElFTkSuQmCC")
+    no-repeat;
+  background-size: cover;
+}
+
+.node-click {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAKMUlEQVR4Xu2dCch2RRXHf4KYqKWl4kKilrlkiqVg5pZpJpqZRGouaWamEmHua2qGZYal4kK2uOQahOW+5AIuISZK7lhKKJi7ljuI/P3uA4/v9z7ffe6ZOTNz7zsHLu/7fe89Z84587/nzp05M2chhkErAFsC6wBLj10fG/v9DeCFCddNwB3DcEU3Kxbqdnsxd38U+AKwMbA1sH4EzV4HBIRbgb8Dd0WQWbyIvgHg68B3gS8Bizl79yngGuA3wD+c28omvi8A2KXp+K0yeUogGCQQSgfAd4C9gU0ydfzMZgcHhFIB8DXgx5He7R7Y+TXwIw/BqWWWCIBfAIemdoShvXuAA/v+9VASAD4M3AB83tAZOVmOBX6aU4GQtksBgEL+X0IMycx7S/NlklmN7s2XAIDDgJO7q14kRwn+7OSY3Ar3/cmf6exHgTU79UDmm3MCQJM5f8tsv0fzfwV28BDsITMXADSNO+S599OaLwSPPosqMwcAPtuM9peJakl5wjSuOaI8tT6oUWoAfLzp/LVKd0wk/U4Ajo8ky0VMagCcAhziYsn8Qv8PvDx2fQhYcuxaNIEean8j4JEEbZmaSAmADZol1oVNmrYz3Q6MX6+0sKwCfBHYvPmpf3vQOcD+HoJjyEwJgAuB3WMoPSbjVeA84A/AfYGy9wK0+LRZoJzZ2Ldo8gwcRIeJTAWArwJXhqn6AW493Wc0Hf/viHIl6huAwCCdY9EVwI6xhMWUkwoANwKx1vKvBTT/7p2koQWpEwGNHWLQt4BLYwiKKSMFAPYBzo2kdOqFF81XCASatAolpZlpQFgUpQCAQn+McLobcHEm710OfDNC2/LD1RHkRBPhDYBlgf8AoZ9cGkVrNJ2TYoDgbOCAnEbMbNsbAHs2o/QQm48Efh4iICJvKAj0MKwcUZ9gUd4A+COg0G0lfTp+28rswKeIpnTxTwbI3q7JNg4QEY/VGwDPAMsZ1RWvJmkeM/J7sSmEnxkg/HeABsZFkCcANKFyW4CVPwh0dEDTrazKANIsooX+CyxvYfTg8QSA3tuHG5W+HtjGyJuCLTSRRdvYbk6haFsbngDQu9Ka4KmUcH1/l0xPANb1g5OAo0swzhMATwMrGo3ctFnYMbInYdMmke8ZWypmHOAFAK34vWN0jgZ/2u1bOn0FuM6opCbH9BrJTl4A+ATwL6N1mu0L+XQcb3alJklzXeDJZsXQqtds5jwHWDKb7gY2NPonKpsXADRC1kjZQgcDp1oYx3g086g5CK3szSStHmpRJsY7WAmg2xt0FRhXNfBFZ/ECgCZvzjdqq53Alxl5xaazArRtq41+G/AOH8nW1O5+bQ3N8ncdVuG9vX0qtbwAcEzAKD5kAKhwrLA8LYWCIMTOjwD/m1ZRr/u8ABAyQtY0qzXJQ9vLug6ulKdg3Z+gDKLfGzvnU8DjRt5obF4A0OhYo2QL6f39loHx08CDBr6QjRw6nkaTVhbS8TZ3Whhj8ngBIGSq1KqT1uu1WteV3gSWMoIuZLBbRJ6g1dltTs4BAOXfH9em2IS/WzujAmCCQysA2pFoBV275A531Agwz1nWzqgRoEYA84SXFXQdnu/2W2sEqBGgHSWGO+oYoN1pNQJM8JE1KtWvgHbQzXeH1dltTdUI0OYh+8CzXXKHO7wAoBW9X3bQY3RryDp5jgjQde1h3CXKMH7e4KOoLF4A0BYoyzTnQcCvjBbmAIBU1cFQq3fUWZnOa3TkcbndCwBSVnvhuiQ9vN3snbvXaGkuAJxl2P9fzFGzngDoOkmiLGLtArJSLgBI3xcB1TCYhnSOgc5JKoI8ASADNTc/zRk5f56QvdPFSTkBoOznaQpMaPlXy8DFkDcAZKgOhNJ7fbblYTlEp25fFcEjOQEwUl9pZpPODZadCv1FUQoAjAzWoEeXTtJ8tlm7fwh4LZJHSgCATNHofm1A+Qki2ag8hS6ZSpFc0i4mJQDatQm7oxQAhFmRmLsCYJ7Di5iWTdz37zdXAVABkAN3Lm3WV4DBrTUC1AhggE2ZLDUCGPqlRoAaAQywKZOlRgBDv9QIUCOAATZlstQIYOiXGgFqBDDApkyWGgEM/VIjQI0ABtiUyVIjgKFfagSoEcAAmzJZagQw9EuNADUCGGBTJkuNAIZ+qRGgRgADbMpkqRHA0C81AtQIYIBNmSwhEUB1CLVPT5m7+jnz0v/r0ln/ymhWWdpBUI0A3bvx3QlgGQfICCj6qV1DxVIFgH/XvD4WURQ9BIpxgOh3FdbMQhUAWdw+X6OKHjpd9U/A/SlVqgBI6e32tvS6ULWUkKJU7a2M3VEB0MldyW6+BNg1RWsVACm8bGsjSZHJCgBb56TiugPYxLOxCgBP78aR7VphrAIgTid5StHROesBD3s0UgHg4dX4Mt2iQAVA/M7ykKgKKiEFqyfqVDIAVHpO9QenLR4dshbg0WmxZeqInRtiCy0NAIcBOzXHyCzeGHsroEOkNFO2oFIyQwfAz4CjhgoAFXpS56uOziRSKbidF1BQaugAOA9QkaqoVEIE0CliOmJtySktm1RWbugAUPi3FuIqegxgqTA2G3CHDgC9Ar8/5UMy9W25I4C17JrGBTrYaZyGDgB1vkAQlXID4BTgEKNF+wAqwz6ioQPApc5gbgBcC2xjBIDYVIBZhZhFQwfAagEV2YsdA5wT+F7T9OjoRM6hA8Cl1nDuCBCj034ydii1tXBkQBBKwqq0stG8SNQGcwNAR6zrEzC0eIIGk3pHDhUATwCaGY1OuQEgg/YHVHQhhF4CTh8wAFR8Q1VYolMJAJBRtwGbBVp3KbBLoIxS2UMqnC/QplIAsGMz319qB+TW61xgXw8lSgGAbNMTrLn+SvN7QEUojvVwTEkAmLbsiocfSpf5Q+AMDyVLAoDsU2mZAz0M7blMRcbLPWwoDQArN5+FK3gY22OZqsCmgXJ0Kg0AMlB5ASdHt7TfArVk/oiHCSUCYJEmCnzOw+Ceylzaa5dxiQBQH+0BXNDTzoqt9juAHgoXKhUAMla1BLdzsbpfQp8CVvJSuWQAbJVz37yXww1yVUt5fQPfVCwlA0AGaAZMiR9zmZQzsa2XA0oHwGeaAeESXg7ogVyXbOCR3aUDQHqeCBzTg47yUlGfxEd4Ce8DAPQJpJyBoqpue3XILHIPBk71aq8PAJDtB6Q8NsXL2Ua5uwMXGXlb2foCABkSI2eg1SEF3vBl4CYvvfoEgLmaM7Au8M8KgHkemIs5A8s35wq6YKBPEUAOmIs5A6595CrcBbJzK2dAB0dqu7wb9REAcylnwGU/4Dia+ggA6T8XcgYebDKlXQ+b7isA5kLOgOv3f5+mgie9/4acM+D+7h8CAGTDUHMGkkXmZA05DWOHljOQ7MkfSgSQHUPIGXgNOA042ulBmSi27xFAhi0F3NIcp5raf6HtPQ1cAeichAdChVn4hwAA2a19BPpm1jZxLR+PLotPvHh0/LtSu3WohX7q0llHWek9tynSkLjOeU8AAAAASUVORK5CYII=")
+    no-repeat;
+  background-size: cover;
+}
+
+.node-end {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAS4ElEQVR4Xu1dDZRdVXXe+75JZiiMYLr6J4IYgpmZe+5LQlR+SloVNKRpxTaGVrFl+Rej0pYSNaGFKtRKqkSrogvTRYphtcX8SLVRK2BLkSQQM5J5d583IcQmSqmFBf4SzMrMO7trj/fF+Xn33nPvfW/efTP3rPXWe2u9vc/ZZ+/vnnt+9tkboSizWgM4E3u/dOnSOSMjI0uZ+SJmfhEAnMHMpyPi6fIbAMZ/lwDgeUQ8xszPy+/g8wMA0MaYKiLqUqlUrVQqx2aavmYEADzP6zPGLEHEJQBwEQBcDABOs43FzEcR8QAifqNWqz1UrVYPNLuN6a6vIwGglPo1Zl4OAMsRUQz+0ulWXNDe9xHxAWPMPmbeU61W97VJjtTNdgwABgYGzkZEMfiY4QHgtNS9bh3jbkTcBQBf8X3fb10zzas51wDo7+//ja6urlX1px0A5jSv6y2v6X4A2FUqlXYMDQ092fLWUjaQSwCI4Uul0rsQ8Z3BJC5l93LB9jQA3MHMW7TWh3Mh0TghcgWAGWb4ybb+KSLeAQBb8vR6yAUAAsOvQcQ1LXriZQh+HABkGfdc8Kn/FkOdKh9EHPuWjzHmLEQ8FwBkmdjMMiojQq1W2zQ8PCwytbW0HQBKqQ81caj/HgA8zMyDiCjD7eHe3t7H9+7d+7O0Wu7r6zvHcZxzEXE+IioAeC0A9KetbxzfUwBwCxF9sgl1pa6ibQBQSr0KAD4IAPKdtnwLAPYw8z5EfISIvpO2oiR85XJ5oTHmNQBwKQDI9wuT8E+ivZeZN2qt/zNDHalZ2wIAeeoD46cRXHbstjuOs933/a+mqaCZPK7rznMcZwUzrwAA+cxLWf+tx48f/5vDhw//JCV/KrZpBUDGp34/AGwbHR3dfvDgwaOpettipklguCpFc/uZ+Qat9ddT8KZimTYApH3qmflrALBVa313qh62icnzvKXGmLGJbQoRbiIiGSVbXloOgCVLlvzKyMjIPwLAyoS92YqId/m+LxsqHVsyAEFGgRuISEa+lpWWAsB13QFE/GcAWJSgBzsRcZPv+3sT8OSeVIDAzO8HgD9MIKzMB64horsS8CQibRkAgvf9zgSTInn/beq0oT6RtgFAKfUWRNzAzK4tLzNfp7X+hC19ErqWAMDzvNXMvM1SkGOI+OG5c+duGhwcHLHk6WiyxYsXnzEyMrIBEdcn6EhL5gVNB4Druu9BxM9YdmyfMWZdtVp9yJJ+RpG5rrvccZxNCUaDpoOgqQBIONPf0tXVte7AgQM/mlFWTdiZRYsWnSnbwgnmBh8iopsSNhNK3jQAuK67ChF32AiGiOt83/+4De1sofE870Zmvtmmv4j4Nt/3ZWWVuTQFAOVy+UJjjNWsHRGv9H1/e2bJZ2AF5XL5jcYYmfH3xHWvWXrMDIBgqafjBJb/myW0TVudSuN5nmwrCwh+Oa4PzdBnJgCUy+UXB0/+iy2Efbnv+4NxdMX/AOVy+VeNMXLQdXacPrKCIDUAFixY8IJTTjnlHmaW07DIgojzfN//YRxd8f9EDSil9gRezlGqkc2iS9PuGKYGgFLqHgB4Q5zRHMc5bSb608f1u1n/K6XkmDjuyPzrRHR5mjZTAcB2uec4zvxKpXIkjWAFzy80YAmCVHsEiQEQbPHGOi84jnNhpVJ5pDBkdg2Uy2VxURN388iRgJkvT3qUnAYAsUOSMeaKarX65exdL2qoa6BcLr/UGCM6Fbe0sLL/+PHjlyZxKkkEAJuhHxGv931/Y2G65mtAKSVH6jISRJVbiUhOHa2KNQAsh/6dRPRGq5YLolQacF33ZkS8MYpZVma2PoZJABA39H+XmS/L4+WHVJrOMZNS6t7AOzlMynuJSK7PxRYrANgM/cz8ppl+lh+rzWkicF33FYgonlIviGjyWhuX81gABPfzxFlD7tmHlU8T0Z9NU/+LZgDAdd1rETHKSeSpWq22LO7ySSwALJ7+I6VSaVmeL0DOVMRYbMZ9jojWRvU/EgA2Tz8irvV9/3MzVcl57tfAwMBix3FkbiZRTxqVUUQ8P+ouYiQALJ7+XUT0e3lW0kyXLe5VgIh/7/v+X4TpIRQANk+/MWbZbHXnyhOwlFKyNxDmdv9TZj4/bHUWCgCLp38rEV2dJ0XMVlmUUlcCwBci+i+XUP+y0f8NAWDz9CPiazv90sZMAozneXIr+oKQPj1dKpXObzRRbwgAz/OuYeZPhylIrmtprX9nJimw0/viuu57EfG2pPsCDQGglPo3APjdCAAUmz45Q8zChQt758yZI2Hr5oeIdj8RSWyDCWUKACQal+M4ElwhLCDTfiJ6Rc76X4jz81tHkdfuEbE8eUk4BQCu674TETeHLhtycNonF05PnDjhOY4T6z07Tch4Kg/+jnEOuo1OaqcAQCklvv2rGs4YEWuO4wwMDQ0dmibFTmlGKfUxAHhfu9qPaPcxx3E+UKlU2uoH4bruNkRcHSLnbiK6ZPx/EwAgETglrk5YEEZm3qG1Dqu85TZRSr1NAiy1vKEMDTDzYq31UIYqMrHG3cs0xlwwPqLpBAC4rvsniPj5iMnfm7XW/5JJwgzMSil5unK988jMt2mt/zRDNzOzep5HEfcN30dEchVtrEwGwD8h4ptDJDjy3HPPDRw9evR4ZglTVuB53reZWQJC57m0fZIcMxm8h4j+oCEAlFISe+cljbTLzHdqrd/aTs13CACGiGhxO/UU4zr2NBHJq37iCFAul5UxJjTAMTNfo7W2vfbdkv4XALBTq8QfqNVqzzBzwyCX4+cBJ18BcRMsicff7vj4BQDsACBUMVvDJ+cB4wHwWQB4d0gTTxHRr9s33xrKAgD2evU87xPMfG3I6/xLWuuxW13jASCXOF4Z0sS/EtHv2zffGsoCAPZ69TzvDcws1/emFMl8orUeS7IxBoCBgYG5juNIPN2GaVaYeb3W+qP2zbeGsgCAvV77+vpe1tXV9VgYR/3OZh0AlziO882I6lcR0Rftm28NZQGARHotKaUkMnnDwsyv1Fp/awwAnuddJyHaIqpfRESVRM23gLgAQDKluq57BBHPacRljHlrtVq9cwwAcfvrvb29v5Ql5HoyscOpCwAk06TruvcjokQ0b1Q+RkQfqAPgHwDgHSGETxJRbASQZKKloy4AkExvrutullwMIVxfJaKVYwCIOUF6gIhenazp1lAXAEimV6WU+AH+bQjXw0R0UX0EkMDErwsh/AoRhXoHJRMpG3UBgGT6c133HYgoo3ujUiGiRXUARO0BfIGI/ihZ062hLgCQTK8DAwOvdxznSyFch4novDoADgLAwhDCO4gobH6QTKKM1AUAkimwXC5fYIx5uBEXIv6v7/tn1gHwfwBw8oRoEsOniOjPkzXdGuoCAMn0GkQV+e8Qrh8T0Rl1AMguYJh/3UeI6K+SNd0a6gIAyfQaxBaSNHmNyggRzS0AkEynNtRt9weoCxkDgOeJ6NTiFWBj0mQ0eQKABJYKewU8QURnF5PAZMa1oc4TAKImgY/6vn9+sQy0MWkymtwAIGYZeB8Rva7YCEpmXBvq3AAgZiPobiJ6U7EVbGPSZDS5AUDUVnDdfb04DEpmXBvq3AAg5jBoLLZwcRxsY9JkNHkCQOhxcD3tTB0A6wDg1oh+Fg4h9iDIEwBCHUKY+VKt9X/U5wCvQcRvRPSxcAnrPADEuYSdJ3GDxgAQ5Pd9OqyPhVOovfUBIBcjQJxTaHd391xJ1DneLVx2jMZchRuUbUSUJOdtIo3ZEhdnAbaaGvP0Dj0Krp8ESm3jASB5fk9eGpzU1PeIqOGdQXuRslMWALDXoeu6GyNS0455A00GQGR4EQBYQETfsReh+ZQFAOx16rrug4i4LITj5AnvyREgLrAAM1+ltZZU8G0rBQDsVC8Z3Xp6en4AAA0vhwLAbxKRZCT7xSsgLr4MAHySiBreNbMTKztVAQA7HUpSakT89xDqxtfDhVgpJbF/zgth3EdEYYEI7STLSNUhAMh7gIgtRPT2uikmRAiJulEqDO2ODdwhIWI+o7W+JiPWM7FHhYhh5qu11lvDAHAZM98X1joz/53WekMm6TIwx8UwyFB101jzHiSqVqudMzw8/N2GAAheAxIlpGFqMkTUvu9HpS1rmiLDKoq7xtZyAcIb6IQwcVPC+094BUjfYtaPkCY5YbONUgSKbKxRi4n8u4no9vHcUwBQLpeXGWMejHgNbNZav6vZRi3qy66BmOhgP3Mc52WVSuV/IgEQvAb2A8DSMJEQsUgFn91eTa0hLlg0M2/XWktegQllyggQvAZuQsS/LkaBptqopZXFhYufPPsPnQTKH57nLWXmfWEhY4SmGAVaas/ElUdFBZPDn5GRkfLBgweftRoBAhDcxszvLUaBxLaYdgaLlDGhqeUbvgKkB0HgSBkFTomYC1zs+/7eae9x0eAEDUQljZKnf3R09OXDw8Pfb6S2UAAEc4FNiHhdhL6LZNFtBmNc2jgACH36x17lUfL39/efVyqVZBQIS0wo+wJF+pg2gSAucWTc0x8LACFQSn0EAK6P6OP+7u7ui8W9qE16mLXNWqSOjXz6rQAQ5BCSUSAsfoCsCK73fX/jrLVEGzpuMfQ/duLEiUsOHTr0TJR4ka+AOqNS6oMAIB5DYeWYMebyIovo9CDBMn3824loS5xEVgBYvXp1aXh4+L/EkySiwn1dXV3LDxw48KO4Rov/s2lAKXUvAExJAVevlZm/rLW+wqYVKwAEK4LLEfFrMZVOcDawEaCgSaYB13VvRsQbo7iY+RKt9W6bmq0BEIAgblko84F1vu9/3KbxgiaZBmIygYxVhogf9X1/vW3NiQDged4LmVleBV7kxALxSt/3t9sKUdDFa0COeh3H2RaRDEoq2WOMWV6tVsPiAk1pKBEAhNti27GOxAIE8Xa1opAHDwC+GWN8MfryurevVcVxG0FhlSilomILn2QrDoxszRBNF5MGrs48xdnDpvXEI4BU2t/f/5JSqSThZcOCS44HwTzf939oI0xBM1UDlsa/nYjC0v1EqjUVAKTGwHNIwpDK8BRZ6tkp4uiK/ydqQCkl863fitFL4vf++PpSA0AqcV13FSJKruHY4jjO/EqlciSWsCCA4GbPQ3GTbQB4olQqXTE0NPRoWrVlAkAAgqsR8U4bARzHubBSqUhg6qKEaCA44JEUuWfFKEkyuK4gogeyKDMzAAIQvAcRrZJKGmOuqFarbc2wnUVhreRVSsntbMndfJpFO6/OanxpoykAkIqUUu8HAKvMYsVm0VTzep53IzPfbGF4IWmK8ZsKgAAEcVfMx/dvS1dX17rZfnawaNGiM2u1miTssgrA0ezreU0bAeqWVUr9MQCcvHsWg+h9xph1s/UUUW7xOo6zKWaD56QKhU5rXbUcJazImg6AYCSQ9DOyT2BTjiHih+fOnbtptjiVSHLnkZGRDRERPCbr7cfMfHGzjd/0V8B4qT3P+21mTjJD3S+5C7XWd9ugplNplFJvQcQNtk+93Mc0xlzZCuO3FABSeblcvpCZdzLzixIYbCcibppp3sbBXQuZKFu96wN97WbmNa0yfssBIA0E61oJLdOfAATibLrZcZzNvu8PJuHLG60Y3hizBhHXJJFNYvn29PSsHxwcfD4JX1LalswBJgsRnB3cEJGcMlTuTgVCWsMDgPjwrbdx50pq7Eb00wKAcSsEuZwoQIj0J2gkqAABAL6otbadXDZDP4nqcF13nuM4K5h5BQBclYj558T3GWPWV6vV1Fu7SducVgCIcHK2bYy5IebCSWg/gknRLmbelYfl4ySji+HnJTUCAPwEADYS0S0peDOxTDsA6tK6ris+hjIaRDmaxnVun1xidRzn24i4p1KpPBbH0Iz/Pc/zJFAGAEgcPjmtOz1DvbLquaVd2dnbBgBRWOBtLCCQs+zQewcJlCvBDwQUjyDiYQA43Nvb+3iWzOd9fX3nOI5zLiLOl4UNIorhFySQKYxUNnTkqb+rCXWlrqKtAKhLHVw+WRsAIfQaWupeAjwJAI8DwDEAENcp+dR/S7WnygcRx77lY4w5CxHPjQi2mEocZj6EiFtHR0dvb3RdO1WlGZhyAYC6/HIX0XGctYgoI0LoreQM/W0nq9yi3trb2/v5LCNSszuQKwDUOydX05l5LTMLEJxmd3qa69slT3xevaRzCYC6gYK19OsRcWVUzKJpNqhNc/K62YGIO/O+kZVrAIzXtPgg1mq1lQEY2hqrMAIBsu29o6enZ2enHGx1DADGK93zvMsAYCUzy8gQFtvY5knNRIOIjxpj5ArWbkTcTURPZKqwDcwdCYBJYJBdRc8Y4yHi2G8AOLsFupRl5TAAHASAh7u7ux8cHByMvHrdAhmaXmXHA6CRRpRSsqewSNbtwf7CGcx8OiLKho0sM8d/GwB4FhGfYWYx6LPyjYgSUUsMPtzd3T3cKUN6UoTMSAAkVcJspv9/nO+m+YEQB5MAAAAASUVORK5CYII=")
+    no-repeat;
+  background-size: cover;
+}
+
+.bpmn-start {
+  cursor: grab;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==")
+    center center no-repeat;
+}
+
+.bpmn-end {
+  cursor: grab;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC")
+    center center no-repeat;
+}
+
+.bpmn-user {
+  cursor: grab;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==")
+    center center no-repeat;
+}
+
+.bpmn-exclusiveGateway {
+  cursor: grab;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=")
+    center center no-repeat;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/adpterForTurbo.ts b/Yi.Pure.Vue3/src/components/ReFlowChart/src/adpterForTurbo.ts
new file mode 100644
index 00000000..d3948b75
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/adpterForTurbo.ts
@@ -0,0 +1,166 @@
+const TurboType = {
+  SEQUENCE_FLOW: 1,
+  START_EVENT: 2,
+  END_EVENT: 3,
+  USER_TASK: 4,
+  SERVICE_TASK: 5,
+  EXCLUSIVE_GATEWAY: 6
+};
+
+function getTurboType(type) {
+  switch (type) {
+    case "bpmn:sequenceFlow":
+      return TurboType.SEQUENCE_FLOW;
+    case "bpmn:startEvent":
+      return TurboType.START_EVENT;
+    case "bpmn:endEvent":
+      return TurboType.END_EVENT;
+    case "bpmn:userTask":
+      return TurboType.USER_TASK;
+    case "bpmn:serviceTask":
+      return TurboType.SERVICE_TASK;
+    case "bpmn:exclusiveGateway":
+      return TurboType.EXCLUSIVE_GATEWAY;
+    default:
+      return type;
+  }
+}
+
+function convertNodeToTurboElement(node) {
+  const { id, type, x, y, text = "", properties } = node;
+  return {
+    incoming: [],
+    outgoing: [],
+    dockers: [],
+    type: getTurboType(node.type),
+    properties: {
+      ...properties,
+      name: (text && text.value) || "",
+      x: x,
+      y: y,
+      text,
+      logicFlowType: type
+    },
+    key: id
+  };
+}
+
+function convertEdgeToTurboElement(edge) {
+  const {
+    id,
+    type,
+    sourceNodeId,
+    targetNodeId,
+    startPoint,
+    endPoint,
+    pointsList,
+    text = "",
+    properties
+  } = edge;
+  return {
+    incoming: [sourceNodeId],
+    outgoing: [targetNodeId],
+    type: getTurboType(type),
+    dockers: [],
+    properties: {
+      ...properties,
+      name: (text && text.value) || "",
+      text,
+      startPoint,
+      endPoint,
+      pointsList,
+      logicFlowType: type
+    },
+    key: id
+  };
+}
+
+export function toTurboData(data) {
+  const nodeMap = new Map();
+  const turboData = {
+    flowElementList: []
+  };
+  data.nodes.forEach(node => {
+    const flowElement = convertNodeToTurboElement(node);
+    turboData.flowElementList.push(flowElement);
+    nodeMap.set(node.id, flowElement);
+  });
+  data.edges.forEach(edge => {
+    const flowElement = convertEdgeToTurboElement(edge);
+    const sourceElement = nodeMap.get(edge.sourceNodeId);
+    sourceElement.outgoing.push(flowElement.key);
+    const targetElement = nodeMap.get(edge.targetNodeId);
+    targetElement.incoming.push(flowElement.key);
+    turboData.flowElementList.push(flowElement);
+  });
+  return turboData;
+}
+
+function convertFlowElementToEdge(element) {
+  const { incoming, outgoing, properties, key } = element;
+  const { text, startPoint, endPoint, pointsList, logicFlowType } = properties;
+  const edge = {
+    id: key,
+    type: logicFlowType,
+    sourceNodeId: incoming[0],
+    targetNodeId: outgoing[0],
+    text,
+    startPoint,
+    endPoint,
+    pointsList,
+    properties: {}
+  };
+  const excludeProperties = [
+    "startPoint",
+    "endPoint",
+    "pointsList",
+    "text",
+    "logicFlowType"
+  ];
+  Object.keys(element.properties).forEach(property => {
+    if (excludeProperties.indexOf(property) === -1) {
+      edge.properties[property] = element.properties[property];
+    }
+  });
+  return edge;
+}
+
+function convertFlowElementToNode(element) {
+  const { properties, key } = element;
+  const { x, y, text, logicFlowType } = properties;
+  const node = {
+    id: key,
+    type: logicFlowType,
+    x,
+    y,
+    text,
+    properties: {}
+  };
+  const excludeProperties = ["x", "y", "text", "logicFlowType"];
+  Object.keys(element.properties).forEach(property => {
+    if (excludeProperties.indexOf(property) === -1) {
+      node.properties[property] = element.properties[property];
+    }
+  });
+  return node;
+}
+
+export function toLogicflowData(data) {
+  const lfData = {
+    nodes: [],
+    edges: []
+  };
+  const list = data.flowElementList;
+  list &&
+    list.length > 0 &&
+    list.forEach(element => {
+      if (element.type === TurboType.SEQUENCE_FLOW) {
+        const edge = convertFlowElementToEdge(element);
+        lfData.edges.push(edge);
+      } else {
+        const node = convertFlowElementToNode(element);
+        lfData.nodes.push(node);
+      }
+    });
+  return lfData;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.css b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.css
new file mode 100644
index 00000000..2f47d92d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.css
@@ -0,0 +1,49 @@
+@font-face {
+  font-family: "iconfont";
+  src: url("iconfont.eot?t=1618544337340"); /* IE9 */
+  src:
+    url("iconfont.eot?t=1618544337340#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */
+      url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAZ0AAsAAAAADKgAAAYmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDZAqLQIldATYCJAMgCxIABCAFhG0HgQkb6ApRlA9Sk+xngd1wXQyjTXRCW7pkEvLB0N9/pZhyo7nvIIK1Nisnipg3omjUREiURDXNNEL/jDRCI5H/riTu/9q0D5OakT05VaM3E4kMJI2QhanZillesmYnVT0pD5+399suTrCEkjDhqLtAxyURhIU6Ser/1tp8aDPgI2g7ex2ah+Q7i0rI+Gy9rSNYOtEEdPFQVkrlj/1c3oZFk6Sv/bYQqWUunsgkk8QRkrgkCJEKpUcO8zx0cFLQr+x6CEiNi0BN2YWV4MwJhmDEqhdU4BwR8oIOEXPCjGMzcoKDuLmnLwLw6vy9vMCFM6ggIW50umRpIbVW14U29L/QmIZgqDs5cD0JDKwCHFIylReQ51yFpO+XKBwDcjHltbq9801mxdeFzX8inbguoAq1yCWzpH95JuRUJIC0EDPH5nNGtIkkA4GgvROBocpEEKLCCBwVj0BRF/CJHFYhEo9WCbF1TCdgEEgF0A0Ee8NxioIeN97QzQqFMd2tdfIJC3KeK0T3eJYu0J07g6BVbCB0IiDVDNsQ1mFcbNxDCTk6IWEb2ShHfHxUlvAjkfj0mHDhC56GAL4CWMUgQXgEywDxuH0TBAD7gDZuRqtx7KWpnyTbushlJUpytdfnUvoS/pXG880npIYe3wueUdIJoa9HlRgdsYiF5QJv8C2zjIbzXERGQmwH0QylmjJfC4evBB8UUKQZMsAMG2aWMU6nc6s9m7X4Thn0gTfomgnm5d0qwX4v0rQH3GZn4Ajp8F2VeUcTTARpA+FfyLcpc+T05bOemT2fny8EH8Vn4LPFh3htyOtB3jDSJj34IpEQ3HNboUdasWNDQifcA8BfPPkTe6YaWp0nF/IrhQHGW2D5HTO7O2zfTH3+gxip/NioTs9VwUXL7T3AbzTxHa3qSu1e4EZTfZl/QiC2c7UI5jZ/ET938pSH8Z8IPBwU0NopeLgB7h6Kvp0GVCOw72KAjKFA71sPKX7/9g+Js/AmNfj8/o28sqNVdSTVI93p08F3v/75zqw8W79vb0RVaCTrw6aNntrQwCtbzzDKosTRFMjp/WFqtpZUEGxsi6P8L09byvlyrrvUJ6/ZFJR/X32mbUmndlduWjbdnwnY2ZBHo8OIKIVDUJah62hi4aKdSoqZsWypN7d0w6nsAzb12tWrqZOl12+W/W7YyLFxDy/7U369cgFF85PUVevYahz8y/HS9ZGrbv7saR0sn5MfEzhinC2Dizcv5xHycyChG33pcskigbRkvXnDaurRjRuIeDdu4rnSgPQ/L196FHQg6FGs7266c82aTtDT1jU0CqzWoG2Ndf91wRo1g/0wo9b4VPtV+2iwl/fjvxq4f83CBZeYgx6njp8mb7jzou9FfPdwBBpffvyUx6XARoc/1umGwtrl034lryLH/YCEwly/XrrckYHsd+/YWY/u3EGI085rV6RD5+Bw7dqnoAvBjzifw3S3zdaNZL/dRnfz7XZup232DX4VtD6Cn+AzkqFgBq6unr/gwtCDuydN51fk76ocHS/nN25Y/WqMe1fzBRgEQHPEjqE0gIbkR1CKM/zYUukn9ItRVMHwLfuO1kaP2mlUivpAUpbb8f5wZS1eib+cs3/qlD9r8DU2NEccqhPVFos3SRGSKtb4hyJEcX6VZhArj8Y+edgVpHICKD9tt8ddsvuYpNLZfQGoyBiY2CzKm1chkFmHUGwbUityTs70kCCSE2DZZADRaSeo0heYTpdQ3vwIAv0+QagzEKTOQnnOzHzoXTMkrCJYy6q7Wb1GNPO6hLi6keVYaDeqpDDFGarGkqy3sLFRMXFPDjZjqYsD5A6BI4RneUk0sdlwM2w0iqxFEtuwhkTpCLHER0fzWQ+I0ogmcLVPgqkQmBZLrdvC1tMQmfGTE66J3y+HCdoZqUgFBd/Y1TCJTL92VqwoMRVQOUxzpYJTiZd1EHAIyXmskS4RmbCySY4ZpVPEsmRv1QbTIKLoGtgt4kVTI74qM2p4tulMzwFS4qPiUDFxCSSUSGJJKJd2ozFS1kgYmyN1snOnimh0brybVuw0G0WV9iF3xeYjFAg4LcEi4Q692C7TUI8omiJRZAN3M+4ikTLBlosAAAA=")
+      format("woff2"),
+    url("iconfont.woff?t=1618544337340") format("woff"),
+    url("iconfont.ttf?t=1618544337340") format("truetype"),
+    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+      url("iconfont.svg?t=1618544337340#iconfont") format("svg"); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-full-screen-hs::before {
+  content: "\e656";
+}
+
+.icon-watch-hs::before {
+  content: "\e766";
+}
+
+.icon-download-hs::before {
+  content: "\e6af";
+}
+
+.icon-enlarge-hs::before {
+  content: "\e765";
+}
+
+.icon-previous-hs::before {
+  content: "\e84c";
+}
+
+.icon-zoom-out-hs::before {
+  content: "\e744";
+}
+
+.icon-next-step-hs::before {
+  content: "\e84b";
+}
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.eot b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.eot
new file mode 100644
index 00000000..c77503fb
Binary files /dev/null and b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.eot differ
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.js b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.js
new file mode 100644
index 00000000..5df9c0a2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.js
@@ -0,0 +1,63 @@
+!(function (c) {
+  var t,
+    e,
+    o,
+    a,
+    n,
+    l,
+    i =
+      '<svg><symbol id="icon-full-screen-hs" viewBox="0 0 1024 1024"><path d="M960.605 932.345v-240.231c0.045-7.2-2.723-14.445-8.213-19.98-11.115-11.047-29.002-11.047-40.071 0-5.535 5.535-8.303 12.757-8.303 19.98v171.923l-351.99-352.035 351.99-352.013v171.855c0 7.245 2.767 14.49 8.303 20.002 11.070 11.070 28.957 11.070 40.071 0 5.49-5.511 8.257-12.78 8.213-20.002v-240.187c0.045-7.223-2.723-14.468-8.213-20.003-5.58-5.511-12.803-8.279-20.025-8.302h-240.233c-7.222 0-14.467 2.79-19.98 8.302-11.115 11.049-11.115 28.957 0 40.050 5.511 5.535 12.735 8.302 19.98 8.279h171.9l-352.013 352.013-352.012-352.035h171.855c7.268 0.022 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.49-5.511-12.758-8.279-20.025-8.303h-240.187c-7.268 0-14.513 2.79-20.025 8.303-5.513 5.558-8.279 12.803-8.279 20.048v240.165c0 7.245 2.79 14.512 8.279 20.002 11.070 11.070 28.98 11.070 40.028 0 5.513-5.511 8.279-12.713 8.279-20.002v-171.855l352.058 352.012-352.035 352.035v-171.922c0-7.2-2.745-14.445-8.279-19.98-11.070-11.047-29.002-11.047-40.028 0-5.558 5.535-8.279 12.757-8.279 19.98v240.231c0 7.223 2.79 14.468 8.279 20.048 5.535 5.468 12.757 8.279 20.025 8.279h240.188c7.268 0 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.535-5.535-12.78-8.257-20.025-8.257h-171.877l352.012-352.035 352.013 352.035h-171.9c-7.222 0-14.467 2.768-19.98 8.257-11.115 11.049-11.115 29.002 0 40.050 5.511 5.468 12.735 8.279 19.98 8.279h240.255c7.2 0 14.445-2.813 20.025-8.279 5.467-5.602 8.19-12.825 8.19-20.048z"  ></path></symbol><symbol id="icon-watch-hs" viewBox="0 0 1024 1024"><path d="M511.08 630.42c0.39-0.09 0.8-0.14 1.2-0.2h-0.52zM651 490.5c0 0.2-0.09 0.4-0.13 0.59s0 0.14 0 0.2c0.03-0.29 0.07-0.53 0.13-0.79zM471.17 630.42l-0.84-0.18h-0.31c0.38 0.03 0.77 0.1 1.15 0.18zM331.49 449v0.36c0.08-0.51 0.16-1 0.23-1.52-0.12 0.37-0.19 0.78-0.23 1.16zM468.88 630.1l1.14 0.11c-0.83-0.13-1.67-0.23-2.5-0.36a10 10 0 0 0 1.36 0.25zM331.57 492.78a11.92 11.92 0 0 0 0.24 1.36c-0.13-0.87-0.24-1.76-0.38-2.64 0.05 0.43 0.09 0.86 0.14 1.28zM331.25 490.5c0.07 0.33 0.13 0.66 0.18 1v-0.23zM331.25 450.58c0.05-0.26 0.1-0.5 0.15-0.73s0-0.34 0.05-0.51c-0.06 0.42-0.12 0.84-0.2 1.24zM650.84 491.41v-0.12c-0.07 0.41-0.13 0.83-0.19 1.24 0.09-0.4 0.15-0.8 0.19-1.12z"  ></path><path d="M512 65C264.66 65 65 264.66 65 512s199.66 447 447 447 447-199.66 447-447S759.34 65 512 65z m213.38 684.87c-8.76 9.55-25 8.88-33.91 0l-12.3-12.3q-42.64-42.63-85.28-85.28a200 200 0 0 1-59.3 22.52 214 214 0 0 1-131.48-14.95c-37.52-16.92-69.56-46.36-90.86-81.46-22-36.33-32.73-80.15-29.4-122.54a213.12 213.12 0 0 1 48.3-119.42c54.37-66.3 150.16-92.22 230.58-62.43a214.42 214.42 0 0 1 100.68 77.16c24.62 34.5 37.4 77.11 37.56 119.37a235.67 235.67 0 0 1-2.92 34.06c-6.88 45.84-30.52 87.73-64.1 118.92l5.81 5.81L725.38 716c9.48 9.43 8.79 24.3 0 33.87z"  ></path><path d="M635.31 542.1c1.2-2.36 2.34-4.74 3.44-7.15 0.28-0.61 0.54-1.22 0.81-1.83 1.5-3.86 3-7.72 4.25-11.67a183.83 183.83 0 0 0 6.56-26.9c0.11-0.66 0.2-1.34 0.29-2-0.35 1.85-0.91 3.8 0.21-1.44 0.24-2.18 0.45-4.37 0.61-6.56 0.35-4.66 0.51-9.32 0.52-14s-0.17-9.33-0.52-14q-0.26-3.45-0.64-6.88v-0.08c-1-6-0.2-1.67 0 0 0 0.31 0.11 0.63 0.17 1-0.16-0.89-0.27-1.8-0.41-2.7a182.65 182.65 0 0 0-6.6-27.62c-1.38-4.27-3-8.41-4.59-12.61-0.32-0.71-0.63-1.42-1-2.13-0.92-2-1.87-4-2.87-6a184.55 184.55 0 0 0-13.85-23.12c-1.11-1.58-7-8.66-1.71-2.52-1.42-1.65-2.72-3.42-4.12-5.09q-4.2-5-8.75-9.73c-6.1-6.32-12.78-11.79-19.44-17.49 6.14 5.26-0.94-0.6-2.52-1.71-1.79-1.26-3.6-2.48-5.43-3.68q-5.52-3.59-11.27-6.78-6.07-3.36-12.38-6.26c-0.75-0.35-1.51-0.68-2.26-1-1.64-0.62-3.25-1.3-4.9-1.9a181.3 181.3 0 0 0-27.13-7.74c-2.67-0.55-5.36-1-8.05-1.46-0.9-0.14-1.81-0.25-2.71-0.41l1 0.17c1.67 0.2 6 1 0 0H512q-6.56-0.75-13.15-1a188.34 188.34 0 0 0-28.4 1c-1.1 0.2-2.25 0.31-3.34 0.49-2.24 0.37-4.48 0.78-6.7 1.24q-6.63 1.35-13.14 3.18c-4.29 1.21-8.55 2.58-12.75 4.1-2 0.72-4 1.51-6 2.28l-1.84 0.82a185.92 185.92 0 0 0-24.25 13.32q-3.3 2.16-6.51 4.44c-0.74 0.53-3.82 2.89-3.93 2.93-0.71 0.57-1.41 1.14-2.1 1.72q-2.52 2.1-5 4.27a186.27 186.27 0 0 0-18.65 19.25c-1.32 1.58-6.2 9-2 2.31-1.16 1.83-2.62 3.53-3.86 5.3q-3.78 5.37-7.17 11T346.94 399q-1.5 3-2.89 5.95c-0.86 1.86-3.23 8.91-0.78 1.56-3 8.94-6.46 17.52-8.69 26.72q-1.68 6.94-2.82 14c0 0.21-0.05 0.42-0.08 0.62 0.29-1.51 0.67-2.55-0.28 2-0.2 1.77-0.38 3.54-0.53 5.32a188.09 188.09 0 0 0-0.11 29.36c0.17 2.25 0.41 4.49 0.65 6.74 0.8 3.86 0.63 3.81 0.4 2.87l0.06 0.41q1.06 6.38 2.56 12.66a200.32 200.32 0 0 0 8.27 26c0.46 1 0.89 2 1.35 3q1.4 3 2.89 6 3 5.86 6.39 11.53 3.56 5.89 7.54 11.54c1.13 1.59 2.44 3.11 3.49 4.76-4.09-6.45-0.21-0.31 1.12 1.3a185.34 185.34 0 0 0 19 19.82q2.92 2.63 5.95 5.13c1.62 1.33 7.76 5.22 1.31 1.12 3.49 2.22 6.72 4.91 10.18 7.19a184.79 184.79 0 0 0 23.59 13.12c1 0.48 2.06 0.93 3.09 1.4 2 0.76 3.94 1.54 5.92 2.26 4.2 1.52 8.46 2.89 12.75 4.1s8.72 2.29 13.14 3.18c2.22 0.46 4.46 0.87 6.7 1.24l0.41 0.06c-0.93-0.22-1-0.39 2.81 0.39a200.31 200.31 0 0 0 27.82 1q6.83-0.25 13.61-1c4.64-1 3.6-0.58 2.08-0.28l0.62-0.09c2-0.33 4-0.69 6-1.08a183.29 183.29 0 0 0 27.22-7.55c2.26-0.81 4.49-1.87 6.76-2.64 0.75-0.34 1.51-0.67 2.25-1q5.7-2.64 11.2-5.66c7.94-4.37 15-9.82 22.58-14.65-6.69 4.25 0.74-0.64 2.31-2s3.32-2.83 4.95-4.29q4.86-4.38 9.4-9.08 4.79-5 9.17-10.23c1.26-1.51 2.43-3.1 3.7-4.59-5.06 5.91-0.2 0.17 1-1.45a185.86 185.86 0 0 0 14.31-23.66z"  ></path><path d="M512.68 630.18l1.16-0.19-1.56 0.23z"  ></path></symbol><symbol id="icon-download-hs" viewBox="0 0 1024 1024"><path d="M200 834h632v88a8 8 0 0 1-8 8H192v-88a8 8 0 0 1 8-8z m239-262.037V185c0-13.255 10.745-24 24-24h104v401.473l141.997-137.148c9.534-9.209 24.728-8.945 33.936 0.59l0.004 0.003 72.205 74.799-304.959 294.546c-9.534 9.208-24.728 8.944-33.936-0.59l-0.003-0.004-71.859-74.44-0.063 0.062-205.587-212.927c-9.206-9.534-8.941-24.724 0.59-33.932l74.782-72.246L439 571.963z"  ></path></symbol><symbol id="icon-enlarge-hs" viewBox="0 0 1024 1024"><path d="M945.159 867.61l-206.543-206.538c49.578-63.772 79.108-143.903 79.108-230.953 0-207.97-168.58-376.547-376.639-376.547-207.97 0-376.547 168.577-376.547 376.547 0 208.038 168.577 376.614 376.547 376.614 87.059 0 167.197-29.532 230.973-79.108l206.543 206.544c9.171 9.17 21.227 13.802 33.278 13.802s24.106-4.629 33.28-13.802c18.431-18.43 18.431-48.215 0-66.559v0zM158.701 430.119c0-155.737 126.65-282.39 282.39-282.39 155.826 0 282.477 126.65 282.477 282.39 0 155.805-126.65 282.458-282.477 282.458-155.739 0-282.39-126.65-282.39-282.458v0z"  ></path><path d="M579.708 389.853h-98.352v-98.352c0-22.272-17.991-40.268-40.268-40.352-22.185 0.086-40.267 18.078-40.267 40.352v98.352h-98.352c-22.272 0-40.268 17.991-40.268 40.179 0 22.272 17.991 40.352 40.268 40.352h98.352v98.352c0 22.252 18.080 40.246 40.267 40.333 22.274-0.086 40.268-18.080 40.268-40.333v-98.352h98.352c22.272 0 40.355-18.079 40.267-40.352 0-22.187-17.991-40.179-40.267-40.179v0z"  ></path></symbol><symbol id="icon-previous-hs" viewBox="0 0 1024 1024"><path d="M814.933333 482.133333C716.8 384 597.333333 328.533333 460.8 315.733333V128c0-17.066667-8.533333-34.133333-25.6-38.4-17.066667-8.533333-34.133333-4.266667-46.933333 8.533333L29.866667 473.6c-17.066667 17.066667-17.066667 42.666667 0 59.733333l358.4 392.533334c8.533333 8.533333 21.333333 12.8 34.133333 12.8 4.266667 0 8.533333 0 17.066667-4.266667 17.066667-4.266667 25.6-21.333333 25.6-38.4v-204.8c68.266667-8.533333 128-4.266667 192 12.8 76.8 21.333333 170.666667 93.866667 273.066666 213.333333 12.8 12.8 29.866667 21.333333 51.2 12.8 17.066667-8.533333 29.866667-25.6 25.6-42.666666-21.333333-162.133333-85.333333-298.666667-192-405.333334z"  ></path></symbol><symbol id="icon-zoom-out-hs" viewBox="0 0 1024 1024"><path d="M951.643 877.547l-210.337-210.335c50.487-64.946 80.56-146.547 80.56-235.199 0-211.793-171.681-383.472-383.563-383.472-211.792 0-383.471 171.679-383.471 383.472 0 211.862 171.679 383.538 383.471 383.538 88.661 0 170.271-30.075 235.218-80.56l210.337 210.339c9.34 9.339 21.614 14.055 33.89 14.055s24.551-4.716 33.892-14.055c18.77-18.77 18.77-49.101 0-67.781v0zM150.725 432.011c0-158.601 128.978-287.58 287.58-287.58 158.691 0 287.671 128.978 287.671 287.58 0 158.668-128.978 287.651-287.671 287.651-158.601 0-287.58-128.978-287.58-287.651v0z"  ></path><path d="M397.297 391.004h-100.16c-22.683 0-41.008 18.324-41.008 40.919 0 22.683 18.324 41.094 41.008 41.094h282.333c22.683 0 41.095-18.412 41.007-41.094 0-22.595-18.324-40.919-41.007-40.919v0h-182.173z"  ></path></symbol><symbol id="icon-next-step-hs" viewBox="0 0 1024 1024"><path d="M209.066667 482.133333c98.133333-98.133333 213.333333-153.6 349.866666-166.4V128c0-17.066667 8.533333-34.133333 25.6-38.4 17.066667-8.533333 34.133333-4.266667 46.933334 8.533333l358.4 375.466667c17.066667 17.066667 17.066667 42.666667 0 59.733333l-358.4 392.533334c-8.533333 8.533333-21.333333 12.8-29.866667 12.8-4.266667 0-8.533333 0-17.066667-4.266667-17.066667-4.266667-25.6-21.333333-25.6-38.4v-204.8c-68.266667-8.533333-128-4.266667-192 12.8-76.8 21.333333-170.666667 93.866667-273.066666 213.333333-8.533333 17.066667-29.866667 21.333333-46.933334 12.8-17.066667-8.533333-29.866667-25.6-25.6-42.666666 17.066667-162.133333 81.066667-298.666667 187.733334-405.333334z"  ></path></symbol></svg>',
+    s = (s = document.getElementsByTagName("script"))[
+      s.length - 1
+    ].getAttribute("data-injectcss");
+  if (s && !c.__iconfont__svg__cssinject__) {
+    c.__iconfont__svg__cssinject__ = !0;
+    try {
+      document.write(
+        "<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
+      );
+    } catch (c) {
+      console && console.log(c);
+    }
+  }
+  function h() {
+    n || ((n = !0), o());
+  }
+  (t = function () {
+    var c, t, e, o;
+    ((o = document.createElement("div")).innerHTML = i),
+      (i = null),
+      (e = o.getElementsByTagName("svg")[0]) &&
+        (e.setAttribute("aria-hidden", "true"),
+        (e.style.position = "absolute"),
+        (e.style.width = 0),
+        (e.style.height = 0),
+        (e.style.overflow = "hidden"),
+        (c = e),
+        (t = document.body).firstChild
+          ? ((o = c), (e = t.firstChild).parentNode.insertBefore(o, e))
+          : t.appendChild(c));
+  }),
+    document.addEventListener
+      ? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
+        ? setTimeout(t, 0)
+        : ((e = function () {
+            document.removeEventListener("DOMContentLoaded", e, !1), t();
+          }),
+          document.addEventListener("DOMContentLoaded", e, !1))
+      : document.attachEvent &&
+        ((o = t),
+        (a = c.document),
+        (n = !1),
+        (l = function () {
+          try {
+            a.documentElement.doScroll("left");
+          } catch (c) {
+            return void setTimeout(l, 50);
+          }
+          h();
+        })(),
+        (a.onreadystatechange = function () {
+          "complete" == a.readyState && ((a.onreadystatechange = null), h());
+        }));
+})(window);
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.json b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.json
new file mode 100644
index 00000000..6f91abb6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.json
@@ -0,0 +1,58 @@
+{
+  "id": "2491438",
+  "name": "liu'c'tu",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "755619",
+      "name": "自适应图标",
+      "font_class": "full-screen-hs",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "14445801",
+      "name": "查看",
+      "font_class": "watch-hs",
+      "unicode": "e766",
+      "unicode_decimal": 59238
+    },
+    {
+      "icon_id": "9712640",
+      "name": "下载",
+      "font_class": "download-hs",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    },
+    {
+      "icon_id": "1029099",
+      "name": "放大",
+      "font_class": "enlarge-hs",
+      "unicode": "e765",
+      "unicode_decimal": 59237
+    },
+    {
+      "icon_id": "20017362",
+      "name": "上一步",
+      "font_class": "previous-hs",
+      "unicode": "e84c",
+      "unicode_decimal": 59468
+    },
+    {
+      "icon_id": "1010015",
+      "name": "缩小",
+      "font_class": "zoom-out-hs",
+      "unicode": "e744",
+      "unicode_decimal": 59204
+    },
+    {
+      "icon_id": "20017363",
+      "name": "下一步",
+      "font_class": "next-step-hs",
+      "unicode": "e84b",
+      "unicode_decimal": 59467
+    }
+  ]
+}
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg
new file mode 100644
index 00000000..358bd518
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg
@@ -0,0 +1 @@
+<svg><defs><font id="iconfont" horiz-adv-x="1024"><font-face ascent="896" descent="-128" font-family="iconfont" font-weight="500" units-per-em="1024"/><glyph d="M960.605-36.345v240.231c.045 7.2-2.723 14.445-8.213 19.98-11.115 11.047-29.002 11.047-40.071 0-5.535-5.535-8.303-12.757-8.303-19.98V31.963l-351.99 352.035 351.99 352.013V564.156c0-7.245 2.767-14.49 8.303-20.002 11.07-11.07 28.957-11.07 40.071 0a28.1 28.1 0 0 1 8.213 20.002v240.187c.045 7.223-2.723 14.468-8.213 20.003-5.58 5.511-12.803 8.279-20.025 8.302H692.134a28.23 28.23 0 0 1-19.98-8.302c-11.115-11.049-11.115-28.957 0-40.05a27.97 27.97 0 0 1 19.98-8.279h171.9L512.021 424.004 160.009 776.039h171.855c7.268-.022 14.49 2.745 20.025 8.279 11.07 11.047 11.07 29.002 0 40.05-5.49 5.511-12.758 8.279-20.025 8.303H91.677a28.25 28.25 0 0 1-20.025-8.303 28.4 28.4 0 0 1-8.279-20.048V564.155a28.27 28.27 0 0 1 8.279-20.002c11.07-11.07 28.98-11.07 40.028 0 5.513 5.511 8.279 12.713 8.279 20.002V736.01l352.058-352.012L119.982 31.963v171.922c0 7.2-2.745 14.445-8.279 19.98-11.07 11.047-29.002 11.047-40.028 0-5.558-5.535-8.279-12.757-8.279-19.98V-36.346c0-7.223 2.79-14.468 8.279-20.048 5.535-5.468 12.757-8.279 20.025-8.279h240.188c7.268 0 14.49 2.745 20.025 8.279 11.07 11.047 11.07 29.002 0 40.05-5.535 5.535-12.78 8.257-20.025 8.257H160.011l352.012 352.035L864.036-8.087h-171.9a28.28 28.28 0 0 1-19.98-8.257c-11.115-11.049-11.115-29.002 0-40.05 5.511-5.468 12.735-8.279 19.98-8.279h240.255c7.2 0 14.445 2.813 20.025 8.279 5.467 5.602 8.19 12.825 8.19 20.048z" glyph-name="full-screen-hs" horiz-adv-x="1024" unicode=""/><glyph d="M511.08 265.58c.39.09.8.14 1.2.2h-.52zM651 405.5c0-.2-.09-.4-.13-.59s0-.14 0-.2c.03.29.07.53.13.79M471.17 265.58l-.84.18h-.31c.38-.03.77-.1 1.15-.18M331.49 447v-.36c.08.51.16 1 .23 1.52-.12-.37-.19-.78-.23-1.16m137.39-181.1 1.14-.11c-.83.13-1.67.23-2.5.36a10 10 0 0 1 1.36-.25M331.57 403.22a12 12 0 0 1 .24-1.36c-.13.87-.24 1.76-.38 2.64.05-.43.09-.86.14-1.28m-.32 2.28c.07-.33.13-.66.18-1v.23zm0 39.92c.05.26.1.5.15.73s0 .34.05.51c-.06-.42-.12-.84-.2-1.24m319.59-40.83v.12c-.07-.41-.13-.83-.19-1.24.09.4.15.8.19 1.12M512 831C264.66 831 65 631.34 65 384S264.66-63 512-63s447 199.66 447 447-199.66 447-447 447m213.38-684.87c-8.76-9.55-25-8.88-33.91 0l-12.3 12.3q-42.64 42.63-85.28 85.28a200 200 0 0 0-59.3-22.52 214 214 0 0 0-131.48 14.95c-37.52 16.92-69.56 46.36-90.86 81.46-22 36.33-32.73 80.15-29.4 122.54a213.1 213.1 0 0 0 48.3 119.42c54.37 66.3 150.16 92.22 230.58 62.43a214.4 214.4 0 0 0 100.68-77.16c24.62-34.5 37.4-77.11 37.56-119.37a236 236 0 0 0-2.92-34.06c-6.88-45.84-30.52-87.73-64.1-118.92l5.81-5.81L725.38 180c9.48-9.43 8.79-24.3 0-33.87M635.31 353.9c1.2 2.36 2.34 4.74 3.44 7.15.28.61.54 1.22.81 1.83 1.5 3.86 3 7.72 4.25 11.67a184 184 0 0 1 6.56 26.9c.11.66.2 1.34.29 2-.35-1.85-.91-3.8.21 1.44.24 2.18.45 4.37.61 6.56.35 4.66.51 9.32.52 14s-.17 9.33-.52 14q-.26 3.45-.64 6.88v.08c-1 6-.2 1.67 0 0 0-.31.11-.63.17-1-.16.89-.27 1.8-.41 2.7a183 183 0 0 1-6.6 27.62c-1.38 4.27-3 8.41-4.59 12.61-.32.71-.63 1.42-1 2.13-.92 2-1.87 4-2.87 6a184.6 184.6 0 0 1-13.85 23.12c-1.11 1.58-7 8.66-1.71 2.52-1.42 1.65-2.72 3.42-4.12 5.09q-4.2 5-8.75 9.73c-6.1 6.32-12.78 11.79-19.44 17.49 6.14-5.26-.94.6-2.52 1.71-1.79 1.26-3.6 2.48-5.43 3.68q-5.52 3.59-11.27 6.78-6.07 3.36-12.38 6.26c-.75.35-1.51.68-2.26 1-1.64.62-3.25 1.3-4.9 1.9a181 181 0 0 1-27.13 7.74c-2.67.55-5.36 1-8.05 1.46-.9.14-1.81.25-2.71.41l1-.17c1.67-.2 6-1 0 0H512q-6.56.75-13.15 1a188 188 0 0 1-28.4-1c-1.1-.2-2.25-.31-3.34-.49-2.24-.37-4.48-.78-6.7-1.24q-6.63-1.35-13.14-3.18c-4.29-1.21-8.55-2.58-12.75-4.1-2-.72-4-1.51-6-2.28l-1.84-.82a186 186 0 0 1-24.25-13.32q-3.3-2.16-6.51-4.44c-.74-.53-3.82-2.89-3.93-2.93-.71-.57-1.41-1.14-2.1-1.72q-2.52-2.1-5-4.27a186 186 0 0 1-18.65-19.25c-1.32-1.58-6.2-9-2-2.31-1.16-1.83-2.62-3.53-3.86-5.3q-3.78-5.37-7.17-11T346.94 497q-1.5-3-2.89-5.95c-.86-1.86-3.23-8.91-.78-1.56-3-8.94-6.46-17.52-8.69-26.72q-1.68-6.94-2.82-14c0-.21-.05-.42-.08-.62.29 1.51.67 2.55-.28-2-.2-1.77-.38-3.54-.53-5.32a188 188 0 0 1-.11-29.36c.17-2.25.41-4.49.65-6.74.8-3.86.63-3.81.4-2.87l.06-.41q1.06-6.38 2.56-12.66a200 200 0 0 1 8.27-26c.46-1 .89-2 1.35-3q1.4-3 2.89-6 3-5.86 6.39-11.53 3.56-5.89 7.54-11.54c1.13-1.59 2.44-3.11 3.49-4.76-4.09 6.45-.21.31 1.12-1.3a185 185 0 0 1 19-19.82q2.92-2.63 5.95-5.13c1.62-1.33 7.76-5.22 1.31-1.12 3.49-2.22 6.72-4.91 10.18-7.19a185 185 0 0 1 23.59-13.12c1-.48 2.06-.93 3.09-1.4 2-.76 3.94-1.54 5.92-2.26 4.2-1.52 8.46-2.89 12.75-4.1s8.72-2.29 13.14-3.18c2.22-.46 4.46-.87 6.7-1.24l.41-.06c-.93.22-1 .39 2.81-.39a200 200 0 0 1 27.82-1q6.83.25 13.61 1c4.64 1 3.6.58 2.08.28l.62.09q3 .495 6 1.08a183 183 0 0 1 27.22 7.55c2.26.81 4.49 1.87 6.76 2.64.75.34 1.51.67 2.25 1q5.7 2.64 11.2 5.66c7.94 4.37 15 9.82 22.58 14.65-6.69-4.25.74.64 2.31 2s3.32 2.83 4.95 4.29q4.86 4.38 9.4 9.08 4.79 5 9.17 10.23c1.26 1.51 2.43 3.1 3.7 4.59-5.06-5.91-.2-.17 1 1.45a186 186 0 0 1 14.31 23.66m-122.63-88.08 1.16.19-1.56-.23z" glyph-name="watch-hs" horiz-adv-x="1024" unicode=""/><glyph d="M200 62h632v-88a8 8 0 0 0-8-8H192v88a8 8 0 0 0 8 8m239 262.037V711c0 13.255 10.745 24 24 24h104V333.527l141.997 137.148c9.534 9.209 24.728 8.945 33.936-.59l.004-.003 72.205-74.799-304.959-294.546c-9.534-9.208-24.728-8.944-33.936.59l-.003.004-71.859 74.44-.063-.062-205.587 212.927c-9.206 9.534-8.941 24.724.59 33.932l74.782 72.246z" glyph-name="download-hs" horiz-adv-x="1024" unicode=""/><glyph d="M945.159 28.39 738.616 234.928c49.578 63.772 79.108 143.903 79.108 230.953 0 207.97-168.58 376.547-376.639 376.547-207.97 0-376.547-168.577-376.547-376.547 0-208.038 168.577-376.614 376.547-376.614 87.059 0 167.197 29.532 230.973 79.108L878.601-38.169c9.171-9.17 21.227-13.802 33.278-13.802s24.106 4.629 33.28 13.802c18.431 18.43 18.431 48.215 0 66.559M158.701 465.881c0 155.737 126.65 282.39 282.39 282.39 155.826 0 282.477-126.65 282.477-282.39 0-155.805-126.65-282.458-282.477-282.458-155.739 0-282.39 126.65-282.39 282.458m421.007 40.266h-98.352v98.352c0 22.272-17.991 40.268-40.268 40.352-22.185-.086-40.267-18.078-40.267-40.352v-98.352h-98.352c-22.272 0-40.268-17.991-40.268-40.179 0-22.272 17.991-40.352 40.268-40.352h98.352v-98.352c0-22.252 18.08-40.246 40.267-40.333 22.274.086 40.268 18.08 40.268 40.333v98.352h98.352c22.272 0 40.355 18.079 40.267 40.352 0 22.187-17.991 40.179-40.267 40.179" glyph-name="enlarge-hs" horiz-adv-x="1024" unicode=""/><glyph d="M814.933 413.867C716.8 512 597.333 567.467 460.8 580.267V768c0 17.067-8.533 34.133-25.6 38.4-17.067 8.533-34.133 4.267-46.933-8.533L29.867 422.4c-17.067-17.067-17.067-42.667 0-59.733l358.4-392.534c8.533-8.533 21.333-12.8 34.133-12.8 4.267 0 8.533 0 17.067 4.267 17.066 4.267 25.6 21.333 25.6 38.4v204.8c68.266 8.533 128 4.267 192-12.8 76.8-21.333 170.666-93.867 273.066-213.333 12.8-12.8 29.867-21.334 51.2-12.8 17.067 8.533 29.867 25.6 25.6 42.666-21.333 162.134-85.333 298.667-192 405.334" glyph-name="previous-hs" horiz-adv-x="1024" unicode=""/><glyph d="M951.643 18.453 741.306 228.788c50.487 64.946 80.56 146.547 80.56 235.199 0 211.793-171.681 383.472-383.563 383.472-211.792 0-383.471-171.679-383.471-383.472 0-211.862 171.679-383.538 383.471-383.538 88.661 0 170.271 30.075 235.218 80.56L883.858-49.33c9.34-9.339 21.614-14.055 33.89-14.055s24.551 4.716 33.892 14.055c18.77 18.77 18.77 49.101 0 67.781zM150.725 463.989c0 158.601 128.978 287.58 287.58 287.58 158.691 0 287.671-128.978 287.671-287.58 0-158.668-128.978-287.651-287.671-287.651-158.601 0-287.58 128.978-287.58 287.651m246.572 41.007h-100.16c-22.683 0-41.008-18.324-41.008-40.919 0-22.683 18.324-41.094 41.008-41.094H579.47c22.683 0 41.095 18.412 41.007 41.094 0 22.595-18.324 40.919-41.007 40.919z" glyph-name="zoom-out-hs" horiz-adv-x="1024" unicode=""/><glyph d="M209.067 413.867C307.2 512 422.4 567.467 558.933 580.267V768c0 17.067 8.534 34.133 25.6 38.4 17.067 8.533 34.134 4.267 46.934-8.533l358.4-375.467c17.066-17.067 17.066-42.667 0-59.733l-358.4-392.534c-8.534-8.533-21.334-12.8-29.867-12.8-4.267 0-8.533 0-17.067 4.267-17.066 4.267-25.6 21.333-25.6 38.4v204.8c-68.266 8.533-128 4.267-192-12.8-76.8-21.333-170.666-93.867-273.066-213.333C85.333-38.4 64-42.667 46.933-34.133s-29.866 25.6-25.6 42.666C38.4 170.667 102.4 307.2 209.067 413.867" glyph-name="next-step-hs" horiz-adv-x="1024" unicode=""/></font></defs></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.ttf b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.ttf
new file mode 100644
index 00000000..b332ae7d
Binary files /dev/null and b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.ttf differ
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff
new file mode 100644
index 00000000..0743a938
Binary files /dev/null and b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff differ
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff2 b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff2
new file mode 100644
index 00000000..98f6f354
Binary files /dev/null and b/Yi.Pure.Vue3/src/components/ReFlowChart/src/assets/iconfont/iconfont.woff2 differ
diff --git a/Yi.Pure.Vue3/src/components/ReFlowChart/src/config.ts b/Yi.Pure.Vue3/src/components/ReFlowChart/src/config.ts
new file mode 100644
index 00000000..810431a4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReFlowChart/src/config.ts
@@ -0,0 +1,55 @@
+export const nodeList = [
+  {
+    text: "开始",
+    type: "start",
+    class: "node-start"
+  },
+  {
+    text: "矩形",
+    type: "rect",
+    class: "node-rect"
+  },
+  {
+    type: "user",
+    text: "用户",
+    class: "node-user"
+  },
+  {
+    type: "push",
+    text: "推送",
+    class: "node-push"
+  },
+  {
+    type: "download",
+    text: "位置",
+    class: "node-download"
+  },
+  {
+    type: "end",
+    text: "结束",
+    class: "node-end"
+  }
+];
+
+export const BpmnNode = [
+  {
+    type: "bpmn:startEvent",
+    text: "开始",
+    class: "bpmn-start"
+  },
+  {
+    type: "bpmn:endEvent",
+    text: "结束",
+    class: "bpmn-end"
+  },
+  {
+    type: "bpmn:exclusiveGateway",
+    text: "网关",
+    class: "bpmn-exclusiveGateway"
+  },
+  {
+    type: "bpmn:userTask",
+    text: "用户",
+    class: "bpmn-user"
+  }
+];
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/data.ts b/Yi.Pure.Vue3/src/components/ReIcon/data.ts
new file mode 100644
index 00000000..b5769e8c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/data.ts
@@ -0,0 +1,3869 @@
+/**
+ * 想要哪个图标集 自行添加即可 请注意此处添加的图标集均为在线图标（https://iconify.design/docs/api/#public-api）
+ * 如果项目在内网环境下 参考 https://www.bilibili.com/video/BV17S4y1J79d?p=4&vd_source=5a992808de6229d78e7810536c5f9ab3 教程自行离线部署图标
+ * https://icones.js.org/collections/图标集前缀名-meta.json（如：https://icones.js.org/collections/ri-meta.json 取icons字段，可获得当前图标集的所有图标）
+ */
+export const IconJson = {
+  // https://icones.js.org/collections/ep-meta.json
+  "ep:": [
+    "add-location",
+    "aim",
+    "alarm-clock",
+    "apple",
+    "arrow-down",
+    "arrow-down-bold",
+    "arrow-left",
+    "arrow-left-bold",
+    "arrow-right",
+    "arrow-right-bold",
+    "arrow-up",
+    "arrow-up-bold",
+    "avatar",
+    "back",
+    "baseball",
+    "basketball",
+    "bell",
+    "bell-filled",
+    "bicycle",
+    "bottom",
+    "bottom-left",
+    "bottom-right",
+    "bowl",
+    "box",
+    "briefcase",
+    "brush",
+    "brush-filled",
+    "burger",
+    "calendar",
+    "camera",
+    "camera-filled",
+    "caret-bottom",
+    "caret-left",
+    "caret-right",
+    "caret-top",
+    "cellphone",
+    "chat-dot-round",
+    "chat-dot-square",
+    "chat-line-round",
+    "chat-line-square",
+    "chat-round",
+    "chat-square",
+    "check",
+    "checked",
+    "cherry",
+    "chicken",
+    "chrome-filled",
+    "circle-check",
+    "circle-check-filled",
+    "circle-close",
+    "circle-close-filled",
+    "circle-plus",
+    "circle-plus-filled",
+    "clock",
+    "close",
+    "close-bold",
+    "cloudy",
+    "coffee",
+    "coffee-cup",
+    "coin",
+    "cold-drink",
+    "collection",
+    "collection-tag",
+    "comment",
+    "compass",
+    "connection",
+    "coordinate",
+    "copy-document",
+    "cpu",
+    "credit-card",
+    "crop",
+    "d-arrow-left",
+    "d-arrow-right",
+    "d-caret",
+    "data-analysis",
+    "data-board",
+    "data-line",
+    "delete",
+    "delete-filled",
+    "delete-location",
+    "dessert",
+    "discount",
+    "dish",
+    "dish-dot",
+    "document",
+    "document-add",
+    "document-checked",
+    "document-copy",
+    "document-delete",
+    "document-remove",
+    "download",
+    "drizzling",
+    "edit",
+    "edit-pen",
+    "eleme",
+    "eleme-filled",
+    "element-plus",
+    "expand",
+    "failed",
+    "female",
+    "files",
+    "film",
+    "filter",
+    "finished",
+    "first-aid-kit",
+    "flag",
+    "fold",
+    "folder",
+    "folder-add",
+    "folder-checked",
+    "folder-delete",
+    "folder-opened",
+    "folder-remove",
+    "food",
+    "football",
+    "fork-spoon",
+    "fries",
+    "full-screen",
+    "goblet",
+    "goblet-full",
+    "goblet-square",
+    "goblet-square-full",
+    "gold-medal",
+    "goods",
+    "goods-filled",
+    "grape",
+    "grid",
+    "guide",
+    "handbag",
+    "headset",
+    "help",
+    "help-filled",
+    "hide",
+    "histogram",
+    "home-filled",
+    "hot-water",
+    "house",
+    "ice-cream",
+    "ice-cream-round",
+    "ice-cream-square",
+    "ice-drink",
+    "ice-tea",
+    "info-filled",
+    "iphone",
+    "key",
+    "knife-fork",
+    "lightning",
+    "link",
+    "list",
+    "loading",
+    "location",
+    "location-filled",
+    "location-information",
+    "lock",
+    "lollipop",
+    "magic-stick",
+    "magnet",
+    "male",
+    "management",
+    "map-location",
+    "medal",
+    "memo",
+    "menu",
+    "message",
+    "message-box",
+    "mic",
+    "microphone",
+    "milk-tea",
+    "minus",
+    "money",
+    "monitor",
+    "moon",
+    "moon-night",
+    "more",
+    "more-filled",
+    "mostly-cloudy",
+    "mouse",
+    "mug",
+    "mute",
+    "mute-notification",
+    "no-smoking",
+    "notebook",
+    "notification",
+    "odometer",
+    "office-building",
+    "open",
+    "operation",
+    "opportunity",
+    "orange",
+    "paperclip",
+    "partly-cloudy",
+    "pear",
+    "phone",
+    "phone-filled",
+    "picture",
+    "picture-filled",
+    "picture-rounded",
+    "pie-chart",
+    "place",
+    "platform",
+    "plus",
+    "pointer",
+    "position",
+    "postcard",
+    "pouring",
+    "present",
+    "price-tag",
+    "printer",
+    "promotion",
+    "quartz-watch",
+    "question-filled",
+    "rank",
+    "reading",
+    "reading-lamp",
+    "refresh",
+    "refresh-left",
+    "refresh-right",
+    "refrigerator",
+    "remove",
+    "remove-filled",
+    "right",
+    "scale-to-original",
+    "school",
+    "scissor",
+    "search",
+    "select",
+    "sell",
+    "semi-select",
+    "service",
+    "set-up",
+    "setting",
+    "share",
+    "ship",
+    "shop",
+    "shopping-bag",
+    "shopping-cart",
+    "shopping-cart-full",
+    "shopping-trolley",
+    "smoking",
+    "soccer",
+    "sold-out",
+    "sort",
+    "sort-down",
+    "sort-up",
+    "stamp",
+    "star",
+    "star-filled",
+    "stopwatch",
+    "success-filled",
+    "sugar",
+    "suitcase",
+    "suitcase-line",
+    "sunny",
+    "sunrise",
+    "sunset",
+    "switch",
+    "switch-button",
+    "switch-filled",
+    "takeaway-box",
+    "ticket",
+    "tickets",
+    "timer",
+    "toilet-paper",
+    "tools",
+    "top",
+    "top-left",
+    "top-right",
+    "trend-charts",
+    "trophy",
+    "trophy-base",
+    "turn-off",
+    "umbrella",
+    "unlock",
+    "upload",
+    "upload-filled",
+    "user",
+    "user-filled",
+    "van",
+    "video-camera",
+    "video-camera-filled",
+    "video-pause",
+    "video-play",
+    "view",
+    "wallet",
+    "wallet-filled",
+    "warn-triangle-filled",
+    "warning",
+    "warning-filled",
+    "watch",
+    "watermelon",
+    "wind-power",
+    "zoom-in",
+    "zoom-out"
+  ],
+  // https://icones.js.org/collections/ri-meta.json
+  "ri:": [
+    "24-hours-fill",
+    "24-hours-line",
+    "4k-fill",
+    "4k-line",
+    "a-b",
+    "account-box-fill",
+    "account-box-line",
+    "account-circle-fill",
+    "account-circle-line",
+    "account-pin-box-fill",
+    "account-pin-box-line",
+    "account-pin-circle-fill",
+    "account-pin-circle-line",
+    "add-box-fill",
+    "add-box-line",
+    "add-circle-fill",
+    "add-circle-line",
+    "add-fill",
+    "add-line",
+    "admin-fill",
+    "admin-line",
+    "advertisement-fill",
+    "advertisement-line",
+    "ai-generate",
+    "airplay-fill",
+    "airplay-line",
+    "alarm-fill",
+    "alarm-line",
+    "alarm-warning-fill",
+    "alarm-warning-line",
+    "album-fill",
+    "album-line",
+    "alert-fill",
+    "alert-line",
+    "aliens-fill",
+    "aliens-line",
+    "align-bottom",
+    "align-center",
+    "align-justify",
+    "align-left",
+    "align-right",
+    "align-top",
+    "align-vertically",
+    "alipay-fill",
+    "alipay-line",
+    "amazon-fill",
+    "amazon-line",
+    "anchor-fill",
+    "anchor-line",
+    "ancient-gate-fill",
+    "ancient-gate-line",
+    "ancient-pavilion-fill",
+    "ancient-pavilion-line",
+    "android-fill",
+    "android-line",
+    "angularjs-fill",
+    "angularjs-line",
+    "anticlockwise-2-fill",
+    "anticlockwise-2-line",
+    "anticlockwise-fill",
+    "anticlockwise-line",
+    "app-store-fill",
+    "app-store-line",
+    "apple-fill",
+    "apple-line",
+    "apps-2-fill",
+    "apps-2-line",
+    "apps-fill",
+    "apps-line",
+    "archive-2-fill",
+    "archive-2-line",
+    "archive-drawer-fill",
+    "archive-drawer-line",
+    "archive-fill",
+    "archive-line",
+    "arrow-down-circle-fill",
+    "arrow-down-circle-line",
+    "arrow-down-double-fill",
+    "arrow-down-double-line",
+    "arrow-down-fill",
+    "arrow-down-line",
+    "arrow-down-s-fill",
+    "arrow-down-s-line",
+    "arrow-drop-down-fill",
+    "arrow-drop-down-line",
+    "arrow-drop-left-fill",
+    "arrow-drop-left-line",
+    "arrow-drop-right-fill",
+    "arrow-drop-right-line",
+    "arrow-drop-up-fill",
+    "arrow-drop-up-line",
+    "arrow-go-back-fill",
+    "arrow-go-back-line",
+    "arrow-go-forward-fill",
+    "arrow-go-forward-line",
+    "arrow-left-circle-fill",
+    "arrow-left-circle-line",
+    "arrow-left-double-fill",
+    "arrow-left-double-line",
+    "arrow-left-down-fill",
+    "arrow-left-down-line",
+    "arrow-left-fill",
+    "arrow-left-line",
+    "arrow-left-right-fill",
+    "arrow-left-right-line",
+    "arrow-left-s-fill",
+    "arrow-left-s-line",
+    "arrow-left-up-fill",
+    "arrow-left-up-line",
+    "arrow-right-circle-fill",
+    "arrow-right-circle-line",
+    "arrow-right-double-fill",
+    "arrow-right-double-line",
+    "arrow-right-down-fill",
+    "arrow-right-down-line",
+    "arrow-right-fill",
+    "arrow-right-line",
+    "arrow-right-s-fill",
+    "arrow-right-s-line",
+    "arrow-right-up-fill",
+    "arrow-right-up-line",
+    "arrow-turn-back-fill",
+    "arrow-turn-back-line",
+    "arrow-turn-forward-fill",
+    "arrow-turn-forward-line",
+    "arrow-up-circle-fill",
+    "arrow-up-circle-line",
+    "arrow-up-double-fill",
+    "arrow-up-double-line",
+    "arrow-up-down-fill",
+    "arrow-up-down-line",
+    "arrow-up-fill",
+    "arrow-up-line",
+    "arrow-up-s-fill",
+    "arrow-up-s-line",
+    "artboard-2-fill",
+    "artboard-2-line",
+    "artboard-fill",
+    "artboard-line",
+    "article-fill",
+    "article-line",
+    "aspect-ratio-fill",
+    "aspect-ratio-line",
+    "asterisk",
+    "at-fill",
+    "at-line",
+    "attachment-2",
+    "attachment-fill",
+    "attachment-line",
+    "auction-fill",
+    "auction-line",
+    "award-fill",
+    "award-line",
+    "baidu-fill",
+    "baidu-line",
+    "ball-pen-fill",
+    "ball-pen-line",
+    "bank-card-2-fill",
+    "bank-card-2-line",
+    "bank-card-fill",
+    "bank-card-line",
+    "bank-fill",
+    "bank-line",
+    "bar-chart-2-fill",
+    "bar-chart-2-line",
+    "bar-chart-box-fill",
+    "bar-chart-box-line",
+    "bar-chart-fill",
+    "bar-chart-grouped-fill",
+    "bar-chart-grouped-line",
+    "bar-chart-horizontal-fill",
+    "bar-chart-horizontal-line",
+    "bar-chart-line",
+    "barcode-box-fill",
+    "barcode-box-line",
+    "barcode-fill",
+    "barcode-line",
+    "bard-fill",
+    "bard-line",
+    "barricade-fill",
+    "barricade-line",
+    "base-station-fill",
+    "base-station-line",
+    "basketball-fill",
+    "basketball-line",
+    "battery-2-charge-fill",
+    "battery-2-charge-line",
+    "battery-2-fill",
+    "battery-2-line",
+    "battery-charge-fill",
+    "battery-charge-line",
+    "battery-fill",
+    "battery-line",
+    "battery-low-fill",
+    "battery-low-line",
+    "battery-saver-fill",
+    "battery-saver-line",
+    "battery-share-fill",
+    "battery-share-line",
+    "bear-smile-fill",
+    "bear-smile-line",
+    "beer-fill",
+    "beer-line",
+    "behance-fill",
+    "behance-line",
+    "bell-fill",
+    "bell-line",
+    "bike-fill",
+    "bike-line",
+    "bilibili-fill",
+    "bilibili-line",
+    "bill-fill",
+    "bill-line",
+    "billiards-fill",
+    "billiards-line",
+    "bit-coin-fill",
+    "bit-coin-line",
+    "blaze-fill",
+    "blaze-line",
+    "blender-fill",
+    "blender-line",
+    "bluetooth-connect-fill",
+    "bluetooth-connect-line",
+    "bluetooth-fill",
+    "bluetooth-line",
+    "blur-off-fill",
+    "blur-off-line",
+    "body-scan-fill",
+    "body-scan-line",
+    "bold",
+    "book-2-fill",
+    "book-2-line",
+    "book-3-fill",
+    "book-3-line",
+    "book-fill",
+    "book-line",
+    "book-mark-fill",
+    "book-mark-line",
+    "book-open-fill",
+    "book-open-line",
+    "book-read-fill",
+    "book-read-line",
+    "booklet-fill",
+    "booklet-line",
+    "bookmark-2-fill",
+    "bookmark-2-line",
+    "bookmark-3-fill",
+    "bookmark-3-line",
+    "bookmark-fill",
+    "bookmark-line",
+    "bootstrap-fill",
+    "bootstrap-line",
+    "box-1-fill",
+    "box-1-line",
+    "box-2-fill",
+    "box-2-line",
+    "box-3-fill",
+    "box-3-line",
+    "boxing-fill",
+    "boxing-line",
+    "braces-fill",
+    "braces-line",
+    "brackets-fill",
+    "brackets-line",
+    "brain-fill",
+    "brain-line",
+    "briefcase-2-fill",
+    "briefcase-2-line",
+    "briefcase-3-fill",
+    "briefcase-3-line",
+    "briefcase-4-fill",
+    "briefcase-4-line",
+    "briefcase-5-fill",
+    "briefcase-5-line",
+    "briefcase-fill",
+    "briefcase-line",
+    "bring-forward",
+    "bring-to-front",
+    "broadcast-fill",
+    "broadcast-line",
+    "brush-2-fill",
+    "brush-2-line",
+    "brush-3-fill",
+    "brush-3-line",
+    "brush-4-fill",
+    "brush-4-line",
+    "brush-fill",
+    "brush-line",
+    "bubble-chart-fill",
+    "bubble-chart-line",
+    "bug-2-fill",
+    "bug-2-line",
+    "bug-fill",
+    "bug-line",
+    "building-2-fill",
+    "building-2-line",
+    "building-3-fill",
+    "building-3-line",
+    "building-4-fill",
+    "building-4-line",
+    "building-fill",
+    "building-line",
+    "bus-2-fill",
+    "bus-2-line",
+    "bus-fill",
+    "bus-line",
+    "bus-wifi-fill",
+    "bus-wifi-line",
+    "cactus-fill",
+    "cactus-line",
+    "cake-2-fill",
+    "cake-2-line",
+    "cake-3-fill",
+    "cake-3-line",
+    "cake-fill",
+    "cake-line",
+    "calculator-fill",
+    "calculator-line",
+    "calendar-2-fill",
+    "calendar-2-line",
+    "calendar-check-fill",
+    "calendar-check-line",
+    "calendar-close-fill",
+    "calendar-close-line",
+    "calendar-event-fill",
+    "calendar-event-line",
+    "calendar-fill",
+    "calendar-line",
+    "calendar-todo-fill",
+    "calendar-todo-line",
+    "camera-2-fill",
+    "camera-2-line",
+    "camera-3-fill",
+    "camera-3-line",
+    "camera-fill",
+    "camera-lens-fill",
+    "camera-lens-line",
+    "camera-line",
+    "camera-off-fill",
+    "camera-off-line",
+    "camera-switch-fill",
+    "camera-switch-line",
+    "candle-fill",
+    "candle-line",
+    "capsule-fill",
+    "capsule-line",
+    "car-fill",
+    "car-line",
+    "car-washing-fill",
+    "car-washing-line",
+    "caravan-fill",
+    "caravan-line",
+    "cash-fill",
+    "cash-line",
+    "cast-fill",
+    "cast-line",
+    "cellphone-fill",
+    "cellphone-line",
+    "celsius-fill",
+    "celsius-line",
+    "centos-fill",
+    "centos-line",
+    "character-recognition-fill",
+    "character-recognition-line",
+    "charging-pile-2-fill",
+    "charging-pile-2-line",
+    "charging-pile-fill",
+    "charging-pile-line",
+    "chat-1-fill",
+    "chat-1-line",
+    "chat-2-fill",
+    "chat-2-line",
+    "chat-3-fill",
+    "chat-3-line",
+    "chat-4-fill",
+    "chat-4-line",
+    "chat-check-fill",
+    "chat-check-line",
+    "chat-delete-fill",
+    "chat-delete-line",
+    "chat-download-fill",
+    "chat-download-line",
+    "chat-follow-up-fill",
+    "chat-follow-up-line",
+    "chat-forward-fill",
+    "chat-forward-line",
+    "chat-heart-fill",
+    "chat-heart-line",
+    "chat-history-fill",
+    "chat-history-line",
+    "chat-new-fill",
+    "chat-new-line",
+    "chat-off-fill",
+    "chat-off-line",
+    "chat-poll-fill",
+    "chat-poll-line",
+    "chat-private-fill",
+    "chat-private-line",
+    "chat-quote-fill",
+    "chat-quote-line",
+    "chat-settings-fill",
+    "chat-settings-line",
+    "chat-smile-2-fill",
+    "chat-smile-2-line",
+    "chat-smile-3-fill",
+    "chat-smile-3-line",
+    "chat-smile-fill",
+    "chat-smile-line",
+    "chat-upload-fill",
+    "chat-upload-line",
+    "chat-voice-fill",
+    "chat-voice-line",
+    "check-double-fill",
+    "check-double-line",
+    "check-fill",
+    "check-line",
+    "checkbox-blank-circle-fill",
+    "checkbox-blank-circle-line",
+    "checkbox-blank-fill",
+    "checkbox-blank-line",
+    "checkbox-circle-fill",
+    "checkbox-circle-line",
+    "checkbox-fill",
+    "checkbox-indeterminate-fill",
+    "checkbox-indeterminate-line",
+    "checkbox-line",
+    "checkbox-multiple-blank-fill",
+    "checkbox-multiple-blank-line",
+    "checkbox-multiple-fill",
+    "checkbox-multiple-line",
+    "china-railway-fill",
+    "china-railway-line",
+    "chrome-fill",
+    "chrome-line",
+    "circle-fill",
+    "circle-line",
+    "clapperboard-fill",
+    "clapperboard-line",
+    "clipboard-fill",
+    "clipboard-line",
+    "clockwise-2-fill",
+    "clockwise-2-line",
+    "clockwise-fill",
+    "clockwise-line",
+    "close-circle-fill",
+    "close-circle-line",
+    "close-fill",
+    "close-line",
+    "closed-captioning-fill",
+    "closed-captioning-line",
+    "cloud-fill",
+    "cloud-line",
+    "cloud-off-fill",
+    "cloud-off-line",
+    "cloud-windy-fill",
+    "cloud-windy-line",
+    "cloudy-2-fill",
+    "cloudy-2-line",
+    "cloudy-fill",
+    "cloudy-line",
+    "code-box-fill",
+    "code-box-line",
+    "code-fill",
+    "code-line",
+    "code-s-fill",
+    "code-s-line",
+    "code-s-slash-fill",
+    "code-s-slash-line",
+    "code-view",
+    "codepen-fill",
+    "codepen-line",
+    "coin-fill",
+    "coin-line",
+    "coins-fill",
+    "coins-line",
+    "collage-fill",
+    "collage-line",
+    "command-fill",
+    "command-line",
+    "community-fill",
+    "community-line",
+    "compass-2-fill",
+    "compass-2-line",
+    "compass-3-fill",
+    "compass-3-line",
+    "compass-4-fill",
+    "compass-4-line",
+    "compass-discover-fill",
+    "compass-discover-line",
+    "compass-fill",
+    "compass-line",
+    "compasses-2-fill",
+    "compasses-2-line",
+    "compasses-fill",
+    "compasses-line",
+    "computer-fill",
+    "computer-line",
+    "contacts-book-2-fill",
+    "contacts-book-2-line",
+    "contacts-book-fill",
+    "contacts-book-line",
+    "contacts-book-upload-fill",
+    "contacts-book-upload-line",
+    "contacts-fill",
+    "contacts-line",
+    "contract-left-fill",
+    "contract-left-line",
+    "contract-left-right-fill",
+    "contract-left-right-line",
+    "contract-right-fill",
+    "contract-right-line",
+    "contract-up-down-fill",
+    "contract-up-down-line",
+    "contrast-2-fill",
+    "contrast-2-line",
+    "contrast-drop-2-fill",
+    "contrast-drop-2-line",
+    "contrast-drop-fill",
+    "contrast-drop-line",
+    "contrast-fill",
+    "contrast-line",
+    "copilot-fill",
+    "copilot-line",
+    "copper-coin-fill",
+    "copper-coin-line",
+    "copper-diamond-fill",
+    "copper-diamond-line",
+    "copyleft-fill",
+    "copyleft-line",
+    "copyright-fill",
+    "copyright-line",
+    "coreos-fill",
+    "coreos-line",
+    "corner-down-left-fill",
+    "corner-down-left-line",
+    "corner-down-right-fill",
+    "corner-down-right-line",
+    "corner-left-down-fill",
+    "corner-left-down-line",
+    "corner-left-up-fill",
+    "corner-left-up-line",
+    "corner-right-down-fill",
+    "corner-right-down-line",
+    "corner-right-up-fill",
+    "corner-right-up-line",
+    "corner-up-left-double-fill",
+    "corner-up-left-double-line",
+    "corner-up-left-fill",
+    "corner-up-left-line",
+    "corner-up-right-double-fill",
+    "corner-up-right-double-line",
+    "corner-up-right-fill",
+    "corner-up-right-line",
+    "coupon-2-fill",
+    "coupon-2-line",
+    "coupon-3-fill",
+    "coupon-3-line",
+    "coupon-4-fill",
+    "coupon-4-line",
+    "coupon-5-fill",
+    "coupon-5-line",
+    "coupon-fill",
+    "coupon-line",
+    "cpu-fill",
+    "cpu-line",
+    "creative-commons-by-fill",
+    "creative-commons-by-line",
+    "creative-commons-fill",
+    "creative-commons-line",
+    "creative-commons-nc-fill",
+    "creative-commons-nc-line",
+    "creative-commons-nd-fill",
+    "creative-commons-nd-line",
+    "creative-commons-sa-fill",
+    "creative-commons-sa-line",
+    "creative-commons-zero-fill",
+    "creative-commons-zero-line",
+    "criminal-fill",
+    "criminal-line",
+    "crop-2-fill",
+    "crop-2-line",
+    "crop-fill",
+    "crop-line",
+    "cross-fill",
+    "cross-line",
+    "crosshair-2-fill",
+    "crosshair-2-line",
+    "crosshair-fill",
+    "crosshair-line",
+    "css3-fill",
+    "css3-line",
+    "cup-fill",
+    "cup-line",
+    "currency-fill",
+    "currency-line",
+    "cursor-fill",
+    "cursor-line",
+    "customer-service-2-fill",
+    "customer-service-2-line",
+    "customer-service-fill",
+    "customer-service-line",
+    "dashboard-2-fill",
+    "dashboard-2-line",
+    "dashboard-3-fill",
+    "dashboard-3-line",
+    "dashboard-fill",
+    "dashboard-line",
+    "database-2-fill",
+    "database-2-line",
+    "database-fill",
+    "database-line",
+    "delete-back-2-fill",
+    "delete-back-2-line",
+    "delete-back-fill",
+    "delete-back-line",
+    "delete-bin-2-fill",
+    "delete-bin-2-line",
+    "delete-bin-3-fill",
+    "delete-bin-3-line",
+    "delete-bin-4-fill",
+    "delete-bin-4-line",
+    "delete-bin-5-fill",
+    "delete-bin-5-line",
+    "delete-bin-6-fill",
+    "delete-bin-6-line",
+    "delete-bin-7-fill",
+    "delete-bin-7-line",
+    "delete-bin-fill",
+    "delete-bin-line",
+    "delete-column",
+    "delete-row",
+    "device-fill",
+    "device-line",
+    "device-recover-fill",
+    "device-recover-line",
+    "dingding-fill",
+    "dingding-line",
+    "direction-fill",
+    "direction-line",
+    "disc-fill",
+    "disc-line",
+    "discord-fill",
+    "discord-line",
+    "discuss-fill",
+    "discuss-line",
+    "dislike-fill",
+    "dislike-line",
+    "disqus-fill",
+    "disqus-line",
+    "divide-fill",
+    "divide-line",
+    "donut-chart-fill",
+    "donut-chart-line",
+    "door-closed-fill",
+    "door-closed-line",
+    "door-fill",
+    "door-line",
+    "door-lock-box-fill",
+    "door-lock-box-line",
+    "door-lock-fill",
+    "door-lock-line",
+    "door-open-fill",
+    "door-open-line",
+    "dossier-fill",
+    "dossier-line",
+    "douban-fill",
+    "douban-line",
+    "double-quotes-l",
+    "double-quotes-r",
+    "download-2-fill",
+    "download-2-line",
+    "download-cloud-2-fill",
+    "download-cloud-2-line",
+    "download-cloud-fill",
+    "download-cloud-line",
+    "download-fill",
+    "download-line",
+    "draft-fill",
+    "draft-line",
+    "drag-drop-fill",
+    "drag-drop-line",
+    "drag-move-2-fill",
+    "drag-move-2-line",
+    "drag-move-fill",
+    "drag-move-line",
+    "draggable",
+    "dribbble-fill",
+    "dribbble-line",
+    "drive-fill",
+    "drive-line",
+    "drizzle-fill",
+    "drizzle-line",
+    "drop-fill",
+    "drop-line",
+    "dropbox-fill",
+    "dropbox-line",
+    "dropdown-list",
+    "dual-sim-1-fill",
+    "dual-sim-1-line",
+    "dual-sim-2-fill",
+    "dual-sim-2-line",
+    "dv-fill",
+    "dv-line",
+    "dvd-fill",
+    "dvd-line",
+    "e-bike-2-fill",
+    "e-bike-2-line",
+    "e-bike-fill",
+    "e-bike-line",
+    "earth-fill",
+    "earth-line",
+    "earthquake-fill",
+    "earthquake-line",
+    "edge-fill",
+    "edge-line",
+    "edge-new-fill",
+    "edge-new-line",
+    "edit-2-fill",
+    "edit-2-line",
+    "edit-box-fill",
+    "edit-box-line",
+    "edit-circle-fill",
+    "edit-circle-line",
+    "edit-fill",
+    "edit-line",
+    "eject-fill",
+    "eject-line",
+    "emoji-sticker-fill",
+    "emoji-sticker-line",
+    "emotion-2-fill",
+    "emotion-2-line",
+    "emotion-fill",
+    "emotion-happy-fill",
+    "emotion-happy-line",
+    "emotion-laugh-fill",
+    "emotion-laugh-line",
+    "emotion-line",
+    "emotion-normal-fill",
+    "emotion-normal-line",
+    "emotion-sad-fill",
+    "emotion-sad-line",
+    "emotion-unhappy-fill",
+    "emotion-unhappy-line",
+    "empathize-fill",
+    "empathize-line",
+    "emphasis",
+    "emphasis-cn",
+    "english-input",
+    "equal-fill",
+    "equal-line",
+    "equalizer-fill",
+    "equalizer-line",
+    "eraser-fill",
+    "eraser-line",
+    "error-warning-fill",
+    "error-warning-line",
+    "evernote-fill",
+    "evernote-line",
+    "exchange-box-fill",
+    "exchange-box-line",
+    "exchange-cny-fill",
+    "exchange-cny-line",
+    "exchange-dollar-fill",
+    "exchange-dollar-line",
+    "exchange-fill",
+    "exchange-funds-fill",
+    "exchange-funds-line",
+    "exchange-line",
+    "expand-left-fill",
+    "expand-left-line",
+    "expand-left-right-fill",
+    "expand-left-right-line",
+    "expand-right-fill",
+    "expand-right-line",
+    "expand-up-down-fill",
+    "expand-up-down-line",
+    "external-link-fill",
+    "external-link-line",
+    "eye-2-fill",
+    "eye-2-line",
+    "eye-close-fill",
+    "eye-close-line",
+    "eye-fill",
+    "eye-line",
+    "eye-off-fill",
+    "eye-off-line",
+    "facebook-box-fill",
+    "facebook-box-line",
+    "facebook-circle-fill",
+    "facebook-circle-line",
+    "facebook-fill",
+    "facebook-line",
+    "fahrenheit-fill",
+    "fahrenheit-line",
+    "feedback-fill",
+    "feedback-line",
+    "file-2-fill",
+    "file-2-line",
+    "file-3-fill",
+    "file-3-line",
+    "file-4-fill",
+    "file-4-line",
+    "file-add-fill",
+    "file-add-line",
+    "file-chart-2-fill",
+    "file-chart-2-line",
+    "file-chart-fill",
+    "file-chart-line",
+    "file-close-fill",
+    "file-close-line",
+    "file-cloud-fill",
+    "file-cloud-line",
+    "file-code-fill",
+    "file-code-line",
+    "file-copy-2-fill",
+    "file-copy-2-line",
+    "file-copy-fill",
+    "file-copy-line",
+    "file-damage-fill",
+    "file-damage-line",
+    "file-download-fill",
+    "file-download-line",
+    "file-edit-fill",
+    "file-edit-line",
+    "file-excel-2-fill",
+    "file-excel-2-line",
+    "file-excel-fill",
+    "file-excel-line",
+    "file-fill",
+    "file-forbid-fill",
+    "file-forbid-line",
+    "file-gif-fill",
+    "file-gif-line",
+    "file-history-fill",
+    "file-history-line",
+    "file-hwp-fill",
+    "file-hwp-line",
+    "file-image-fill",
+    "file-image-line",
+    "file-info-fill",
+    "file-info-line",
+    "file-line",
+    "file-list-2-fill",
+    "file-list-2-line",
+    "file-list-3-fill",
+    "file-list-3-line",
+    "file-list-fill",
+    "file-list-line",
+    "file-lock-fill",
+    "file-lock-line",
+    "file-mark-fill",
+    "file-mark-line",
+    "file-music-fill",
+    "file-music-line",
+    "file-paper-2-fill",
+    "file-paper-2-line",
+    "file-paper-fill",
+    "file-paper-line",
+    "file-pdf-2-fill",
+    "file-pdf-2-line",
+    "file-pdf-fill",
+    "file-pdf-line",
+    "file-ppt-2-fill",
+    "file-ppt-2-line",
+    "file-ppt-fill",
+    "file-ppt-line",
+    "file-reduce-fill",
+    "file-reduce-line",
+    "file-search-fill",
+    "file-search-line",
+    "file-settings-fill",
+    "file-settings-line",
+    "file-shield-2-fill",
+    "file-shield-2-line",
+    "file-shield-fill",
+    "file-shield-line",
+    "file-shred-fill",
+    "file-shred-line",
+    "file-text-fill",
+    "file-text-line",
+    "file-transfer-fill",
+    "file-transfer-line",
+    "file-unknow-fill",
+    "file-unknow-line",
+    "file-upload-fill",
+    "file-upload-line",
+    "file-user-fill",
+    "file-user-line",
+    "file-video-fill",
+    "file-video-line",
+    "file-warning-fill",
+    "file-warning-line",
+    "file-word-2-fill",
+    "file-word-2-line",
+    "file-word-fill",
+    "file-word-line",
+    "file-zip-fill",
+    "file-zip-line",
+    "film-fill",
+    "film-line",
+    "filter-2-fill",
+    "filter-2-line",
+    "filter-3-fill",
+    "filter-3-line",
+    "filter-fill",
+    "filter-line",
+    "filter-off-fill",
+    "filter-off-line",
+    "find-replace-fill",
+    "find-replace-line",
+    "finder-fill",
+    "finder-line",
+    "fingerprint-2-fill",
+    "fingerprint-2-line",
+    "fingerprint-fill",
+    "fingerprint-line",
+    "fire-fill",
+    "fire-line",
+    "firefox-fill",
+    "firefox-line",
+    "first-aid-kit-fill",
+    "first-aid-kit-line",
+    "flag-2-fill",
+    "flag-2-line",
+    "flag-fill",
+    "flag-line",
+    "flashlight-fill",
+    "flashlight-line",
+    "flask-fill",
+    "flask-line",
+    "flickr-fill",
+    "flickr-line",
+    "flight-land-fill",
+    "flight-land-line",
+    "flight-takeoff-fill",
+    "flight-takeoff-line",
+    "flood-fill",
+    "flood-line",
+    "flow-chart",
+    "flutter-fill",
+    "flutter-line",
+    "focus-2-fill",
+    "focus-2-line",
+    "focus-3-fill",
+    "focus-3-line",
+    "focus-fill",
+    "focus-line",
+    "foggy-fill",
+    "foggy-line",
+    "folder-2-fill",
+    "folder-2-line",
+    "folder-3-fill",
+    "folder-3-line",
+    "folder-4-fill",
+    "folder-4-line",
+    "folder-5-fill",
+    "folder-5-line",
+    "folder-add-fill",
+    "folder-add-line",
+    "folder-chart-2-fill",
+    "folder-chart-2-line",
+    "folder-chart-fill",
+    "folder-chart-line",
+    "folder-download-fill",
+    "folder-download-line",
+    "folder-fill",
+    "folder-forbid-fill",
+    "folder-forbid-line",
+    "folder-history-fill",
+    "folder-history-line",
+    "folder-image-fill",
+    "folder-image-line",
+    "folder-info-fill",
+    "folder-info-line",
+    "folder-keyhole-fill",
+    "folder-keyhole-line",
+    "folder-line",
+    "folder-lock-fill",
+    "folder-lock-line",
+    "folder-music-fill",
+    "folder-music-line",
+    "folder-open-fill",
+    "folder-open-line",
+    "folder-received-fill",
+    "folder-received-line",
+    "folder-reduce-fill",
+    "folder-reduce-line",
+    "folder-settings-fill",
+    "folder-settings-line",
+    "folder-shared-fill",
+    "folder-shared-line",
+    "folder-shield-2-fill",
+    "folder-shield-2-line",
+    "folder-shield-fill",
+    "folder-shield-line",
+    "folder-transfer-fill",
+    "folder-transfer-line",
+    "folder-unknow-fill",
+    "folder-unknow-line",
+    "folder-upload-fill",
+    "folder-upload-line",
+    "folder-user-fill",
+    "folder-user-line",
+    "folder-video-fill",
+    "folder-video-line",
+    "folder-warning-fill",
+    "folder-warning-line",
+    "folder-zip-fill",
+    "folder-zip-line",
+    "folders-fill",
+    "folders-line",
+    "font-color",
+    "font-family",
+    "font-mono",
+    "font-sans",
+    "font-sans-serif",
+    "font-size",
+    "font-size-2",
+    "football-fill",
+    "football-line",
+    "footprint-fill",
+    "footprint-line",
+    "forbid-2-fill",
+    "forbid-2-line",
+    "forbid-fill",
+    "forbid-line",
+    "format-clear",
+    "forward-10-fill",
+    "forward-10-line",
+    "forward-15-fill",
+    "forward-15-line",
+    "forward-30-fill",
+    "forward-30-line",
+    "forward-5-fill",
+    "forward-5-line",
+    "fridge-fill",
+    "fridge-line",
+    "fullscreen-exit-fill",
+    "fullscreen-exit-line",
+    "fullscreen-fill",
+    "fullscreen-line",
+    "function-fill",
+    "function-line",
+    "functions",
+    "funds-box-fill",
+    "funds-box-line",
+    "funds-fill",
+    "funds-line",
+    "gallery-fill",
+    "gallery-line",
+    "gallery-upload-fill",
+    "gallery-upload-line",
+    "game-fill",
+    "game-line",
+    "gamepad-fill",
+    "gamepad-line",
+    "gas-station-fill",
+    "gas-station-line",
+    "gatsby-fill",
+    "gatsby-line",
+    "genderless-fill",
+    "genderless-line",
+    "ghost-2-fill",
+    "ghost-2-line",
+    "ghost-fill",
+    "ghost-line",
+    "ghost-smile-fill",
+    "ghost-smile-line",
+    "gift-2-fill",
+    "gift-2-line",
+    "gift-fill",
+    "gift-line",
+    "git-branch-fill",
+    "git-branch-line",
+    "git-close-pull-request-fill",
+    "git-close-pull-request-line",
+    "git-commit-fill",
+    "git-commit-line",
+    "git-merge-fill",
+    "git-merge-line",
+    "git-pull-request-fill",
+    "git-pull-request-line",
+    "git-repository-commits-fill",
+    "git-repository-commits-line",
+    "git-repository-fill",
+    "git-repository-line",
+    "git-repository-private-fill",
+    "git-repository-private-line",
+    "github-fill",
+    "github-line",
+    "gitlab-fill",
+    "gitlab-line",
+    "global-fill",
+    "global-line",
+    "globe-fill",
+    "globe-line",
+    "goblet-fill",
+    "goblet-line",
+    "google-fill",
+    "google-line",
+    "google-play-fill",
+    "google-play-line",
+    "government-fill",
+    "government-line",
+    "gps-fill",
+    "gps-line",
+    "gradienter-fill",
+    "gradienter-line",
+    "graduation-cap-fill",
+    "graduation-cap-line",
+    "grid-fill",
+    "grid-line",
+    "group-2-fill",
+    "group-2-line",
+    "group-fill",
+    "group-line",
+    "guide-fill",
+    "guide-line",
+    "h-1",
+    "h-2",
+    "h-3",
+    "h-4",
+    "h-5",
+    "h-6",
+    "hail-fill",
+    "hail-line",
+    "hammer-fill",
+    "hammer-line",
+    "hand-coin-fill",
+    "hand-coin-line",
+    "hand-heart-fill",
+    "hand-heart-line",
+    "hand-sanitizer-fill",
+    "hand-sanitizer-line",
+    "handbag-fill",
+    "handbag-line",
+    "hard-drive-2-fill",
+    "hard-drive-2-line",
+    "hard-drive-3-fill",
+    "hard-drive-3-line",
+    "hard-drive-fill",
+    "hard-drive-line",
+    "hashtag",
+    "haze-2-fill",
+    "haze-2-line",
+    "haze-fill",
+    "haze-line",
+    "hd-fill",
+    "hd-line",
+    "heading",
+    "headphone-fill",
+    "headphone-line",
+    "health-book-fill",
+    "health-book-line",
+    "heart-2-fill",
+    "heart-2-line",
+    "heart-3-fill",
+    "heart-3-line",
+    "heart-add-fill",
+    "heart-add-line",
+    "heart-fill",
+    "heart-line",
+    "heart-pulse-fill",
+    "heart-pulse-line",
+    "hearts-fill",
+    "hearts-line",
+    "heavy-showers-fill",
+    "heavy-showers-line",
+    "hexagon-fill",
+    "hexagon-line",
+    "history-fill",
+    "history-line",
+    "home-2-fill",
+    "home-2-line",
+    "home-3-fill",
+    "home-3-line",
+    "home-4-fill",
+    "home-4-line",
+    "home-5-fill",
+    "home-5-line",
+    "home-6-fill",
+    "home-6-line",
+    "home-7-fill",
+    "home-7-line",
+    "home-8-fill",
+    "home-8-line",
+    "home-fill",
+    "home-gear-fill",
+    "home-gear-line",
+    "home-heart-fill",
+    "home-heart-line",
+    "home-line",
+    "home-office-fill",
+    "home-office-line",
+    "home-smile-2-fill",
+    "home-smile-2-line",
+    "home-smile-fill",
+    "home-smile-line",
+    "home-wifi-fill",
+    "home-wifi-line",
+    "honor-of-kings-fill",
+    "honor-of-kings-line",
+    "honour-fill",
+    "honour-line",
+    "hospital-fill",
+    "hospital-line",
+    "hotel-bed-fill",
+    "hotel-bed-line",
+    "hotel-fill",
+    "hotel-line",
+    "hotspot-fill",
+    "hotspot-line",
+    "hourglass-2-fill",
+    "hourglass-2-line",
+    "hourglass-fill",
+    "hourglass-line",
+    "hq-fill",
+    "hq-line",
+    "html5-fill",
+    "html5-line",
+    "ie-fill",
+    "ie-line",
+    "image-2-fill",
+    "image-2-line",
+    "image-add-fill",
+    "image-add-line",
+    "image-edit-fill",
+    "image-edit-line",
+    "image-fill",
+    "image-line",
+    "inbox-2-fill",
+    "inbox-2-line",
+    "inbox-archive-fill",
+    "inbox-archive-line",
+    "inbox-fill",
+    "inbox-line",
+    "inbox-unarchive-fill",
+    "inbox-unarchive-line",
+    "increase-decrease-fill",
+    "increase-decrease-line",
+    "indent-decrease",
+    "indent-increase",
+    "indeterminate-circle-fill",
+    "indeterminate-circle-line",
+    "infinity-fill",
+    "infinity-line",
+    "information-fill",
+    "information-line",
+    "infrared-thermometer-fill",
+    "infrared-thermometer-line",
+    "ink-bottle-fill",
+    "ink-bottle-line",
+    "input-cursor-move",
+    "input-method-fill",
+    "input-method-line",
+    "insert-column-left",
+    "insert-column-right",
+    "insert-row-bottom",
+    "insert-row-top",
+    "instagram-fill",
+    "instagram-line",
+    "install-fill",
+    "install-line",
+    "instance-fill",
+    "instance-line",
+    "invision-fill",
+    "invision-line",
+    "italic",
+    "javascript-fill",
+    "javascript-line",
+    "kakao-talk-fill",
+    "kakao-talk-line",
+    "key-2-fill",
+    "key-2-line",
+    "key-fill",
+    "key-line",
+    "keyboard-box-fill",
+    "keyboard-box-line",
+    "keyboard-fill",
+    "keyboard-line",
+    "keynote-fill",
+    "keynote-line",
+    "kick-fill",
+    "kick-line",
+    "knife-blood-fill",
+    "knife-blood-line",
+    "knife-fill",
+    "knife-line",
+    "landscape-fill",
+    "landscape-line",
+    "layout-2-fill",
+    "layout-2-line",
+    "layout-3-fill",
+    "layout-3-line",
+    "layout-4-fill",
+    "layout-4-line",
+    "layout-5-fill",
+    "layout-5-line",
+    "layout-6-fill",
+    "layout-6-line",
+    "layout-bottom-2-fill",
+    "layout-bottom-2-line",
+    "layout-bottom-fill",
+    "layout-bottom-line",
+    "layout-column-fill",
+    "layout-column-line",
+    "layout-fill",
+    "layout-grid-fill",
+    "layout-grid-line",
+    "layout-left-2-fill",
+    "layout-left-2-line",
+    "layout-left-fill",
+    "layout-left-line",
+    "layout-line",
+    "layout-masonry-fill",
+    "layout-masonry-line",
+    "layout-right-2-fill",
+    "layout-right-2-line",
+    "layout-right-fill",
+    "layout-right-line",
+    "layout-row-fill",
+    "layout-row-line",
+    "layout-top-2-fill",
+    "layout-top-2-line",
+    "layout-top-fill",
+    "layout-top-line",
+    "leaf-fill",
+    "leaf-line",
+    "lifebuoy-fill",
+    "lifebuoy-line",
+    "lightbulb-fill",
+    "lightbulb-flash-fill",
+    "lightbulb-flash-line",
+    "lightbulb-line",
+    "line-chart-fill",
+    "line-chart-line",
+    "line-fill",
+    "line-height",
+    "line-line",
+    "link",
+    "link-m",
+    "link-unlink",
+    "link-unlink-m",
+    "linkedin-box-fill",
+    "linkedin-box-line",
+    "linkedin-fill",
+    "linkedin-line",
+    "links-fill",
+    "links-line",
+    "list-check",
+    "list-check-2",
+    "list-check-3",
+    "list-indefinite",
+    "list-ordered",
+    "list-ordered-2",
+    "list-radio",
+    "list-settings-fill",
+    "list-settings-line",
+    "list-unordered",
+    "live-fill",
+    "live-line",
+    "loader-2-fill",
+    "loader-2-line",
+    "loader-3-fill",
+    "loader-3-line",
+    "loader-4-fill",
+    "loader-4-line",
+    "loader-5-fill",
+    "loader-5-line",
+    "loader-fill",
+    "loader-line",
+    "lock-2-fill",
+    "lock-2-line",
+    "lock-fill",
+    "lock-line",
+    "lock-password-fill",
+    "lock-password-line",
+    "lock-unlock-fill",
+    "lock-unlock-line",
+    "login-box-fill",
+    "login-box-line",
+    "login-circle-fill",
+    "login-circle-line",
+    "logout-box-fill",
+    "logout-box-line",
+    "logout-box-r-fill",
+    "logout-box-r-line",
+    "logout-circle-fill",
+    "logout-circle-line",
+    "logout-circle-r-fill",
+    "logout-circle-r-line",
+    "loop-left-fill",
+    "loop-left-line",
+    "loop-right-fill",
+    "loop-right-line",
+    "luggage-cart-fill",
+    "luggage-cart-line",
+    "luggage-deposit-fill",
+    "luggage-deposit-line",
+    "lungs-fill",
+    "lungs-line",
+    "mac-fill",
+    "mac-line",
+    "macbook-fill",
+    "macbook-line",
+    "magic-fill",
+    "magic-line",
+    "mail-add-fill",
+    "mail-add-line",
+    "mail-check-fill",
+    "mail-check-line",
+    "mail-close-fill",
+    "mail-close-line",
+    "mail-download-fill",
+    "mail-download-line",
+    "mail-fill",
+    "mail-forbid-fill",
+    "mail-forbid-line",
+    "mail-line",
+    "mail-lock-fill",
+    "mail-lock-line",
+    "mail-open-fill",
+    "mail-open-line",
+    "mail-send-fill",
+    "mail-send-line",
+    "mail-settings-fill",
+    "mail-settings-line",
+    "mail-star-fill",
+    "mail-star-line",
+    "mail-unread-fill",
+    "mail-unread-line",
+    "mail-volume-fill",
+    "mail-volume-line",
+    "map-2-fill",
+    "map-2-line",
+    "map-fill",
+    "map-line",
+    "map-pin-2-fill",
+    "map-pin-2-line",
+    "map-pin-3-fill",
+    "map-pin-3-line",
+    "map-pin-4-fill",
+    "map-pin-4-line",
+    "map-pin-5-fill",
+    "map-pin-5-line",
+    "map-pin-add-fill",
+    "map-pin-add-line",
+    "map-pin-fill",
+    "map-pin-line",
+    "map-pin-range-fill",
+    "map-pin-range-line",
+    "map-pin-time-fill",
+    "map-pin-time-line",
+    "map-pin-user-fill",
+    "map-pin-user-line",
+    "mark-pen-fill",
+    "mark-pen-line",
+    "markdown-fill",
+    "markdown-line",
+    "markup-fill",
+    "markup-line",
+    "mastercard-fill",
+    "mastercard-line",
+    "mastodon-fill",
+    "mastodon-line",
+    "medal-2-fill",
+    "medal-2-line",
+    "medal-fill",
+    "medal-line",
+    "medicine-bottle-fill",
+    "medicine-bottle-line",
+    "medium-fill",
+    "medium-line",
+    "megaphone-fill",
+    "megaphone-line",
+    "memories-fill",
+    "memories-line",
+    "men-fill",
+    "men-line",
+    "mental-health-fill",
+    "mental-health-line",
+    "menu-2-fill",
+    "menu-2-line",
+    "menu-3-fill",
+    "menu-3-line",
+    "menu-4-fill",
+    "menu-4-line",
+    "menu-5-fill",
+    "menu-5-line",
+    "menu-add-fill",
+    "menu-add-line",
+    "menu-fill",
+    "menu-fold-fill",
+    "menu-fold-line",
+    "menu-line",
+    "menu-search-fill",
+    "menu-search-line",
+    "menu-unfold-fill",
+    "menu-unfold-line",
+    "merge-cells-horizontal",
+    "merge-cells-vertical",
+    "message-2-fill",
+    "message-2-line",
+    "message-3-fill",
+    "message-3-line",
+    "message-fill",
+    "message-line",
+    "messenger-fill",
+    "messenger-line",
+    "meta-fill",
+    "meta-line",
+    "meteor-fill",
+    "meteor-line",
+    "mic-2-fill",
+    "mic-2-line",
+    "mic-fill",
+    "mic-line",
+    "mic-off-fill",
+    "mic-off-line",
+    "mickey-fill",
+    "mickey-line",
+    "microscope-fill",
+    "microscope-line",
+    "microsoft-fill",
+    "microsoft-line",
+    "microsoft-loop-fill",
+    "microsoft-loop-line",
+    "mind-map",
+    "mini-program-fill",
+    "mini-program-line",
+    "mist-fill",
+    "mist-line",
+    "money-cny-box-fill",
+    "money-cny-box-line",
+    "money-cny-circle-fill",
+    "money-cny-circle-line",
+    "money-dollar-box-fill",
+    "money-dollar-box-line",
+    "money-dollar-circle-fill",
+    "money-dollar-circle-line",
+    "money-euro-box-fill",
+    "money-euro-box-line",
+    "money-euro-circle-fill",
+    "money-euro-circle-line",
+    "money-pound-box-fill",
+    "money-pound-box-line",
+    "money-pound-circle-fill",
+    "money-pound-circle-line",
+    "moon-clear-fill",
+    "moon-clear-line",
+    "moon-cloudy-fill",
+    "moon-cloudy-line",
+    "moon-fill",
+    "moon-foggy-fill",
+    "moon-foggy-line",
+    "moon-line",
+    "more-2-fill",
+    "more-2-line",
+    "more-fill",
+    "more-line",
+    "motorbike-fill",
+    "motorbike-line",
+    "mouse-fill",
+    "mouse-line",
+    "movie-2-fill",
+    "movie-2-line",
+    "movie-fill",
+    "movie-line",
+    "music-2-fill",
+    "music-2-line",
+    "music-fill",
+    "music-line",
+    "mv-fill",
+    "mv-line",
+    "navigation-fill",
+    "navigation-line",
+    "netease-cloud-music-fill",
+    "netease-cloud-music-line",
+    "netflix-fill",
+    "netflix-line",
+    "newspaper-fill",
+    "newspaper-line",
+    "nft-fill",
+    "nft-line",
+    "node-tree",
+    "notification-2-fill",
+    "notification-2-line",
+    "notification-3-fill",
+    "notification-3-line",
+    "notification-4-fill",
+    "notification-4-line",
+    "notification-badge-fill",
+    "notification-badge-line",
+    "notification-fill",
+    "notification-line",
+    "notification-off-fill",
+    "notification-off-line",
+    "notion-fill",
+    "notion-line",
+    "npmjs-fill",
+    "npmjs-line",
+    "number-0",
+    "number-1",
+    "number-2",
+    "number-3",
+    "number-4",
+    "number-5",
+    "number-6",
+    "number-7",
+    "number-8",
+    "number-9",
+    "numbers-fill",
+    "numbers-line",
+    "nurse-fill",
+    "nurse-line",
+    "octagon-fill",
+    "octagon-line",
+    "oil-fill",
+    "oil-line",
+    "omega",
+    "open-arm-fill",
+    "open-arm-line",
+    "open-source-fill",
+    "open-source-line",
+    "openai-fill",
+    "openai-line",
+    "openbase-fill",
+    "openbase-line",
+    "opera-fill",
+    "opera-line",
+    "order-play-fill",
+    "order-play-line",
+    "organization-chart",
+    "outlet-2-fill",
+    "outlet-2-line",
+    "outlet-fill",
+    "outlet-line",
+    "overline",
+    "p2p-fill",
+    "p2p-line",
+    "page-separator",
+    "pages-fill",
+    "pages-line",
+    "paint-brush-fill",
+    "paint-brush-line",
+    "paint-fill",
+    "paint-line",
+    "palette-fill",
+    "palette-line",
+    "pantone-fill",
+    "pantone-line",
+    "paragraph",
+    "parent-fill",
+    "parent-line",
+    "parentheses-fill",
+    "parentheses-line",
+    "parking-box-fill",
+    "parking-box-line",
+    "parking-fill",
+    "parking-line",
+    "pass-expired-fill",
+    "pass-expired-line",
+    "pass-pending-fill",
+    "pass-pending-line",
+    "pass-valid-fill",
+    "pass-valid-line",
+    "passport-fill",
+    "passport-line",
+    "patreon-fill",
+    "patreon-line",
+    "pause-circle-fill",
+    "pause-circle-line",
+    "pause-fill",
+    "pause-line",
+    "pause-mini-fill",
+    "pause-mini-line",
+    "paypal-fill",
+    "paypal-line",
+    "pen-nib-fill",
+    "pen-nib-line",
+    "pencil-fill",
+    "pencil-line",
+    "pencil-ruler-2-fill",
+    "pencil-ruler-2-line",
+    "pencil-ruler-fill",
+    "pencil-ruler-line",
+    "pentagon-fill",
+    "pentagon-line",
+    "percent-fill",
+    "percent-line",
+    "phone-camera-fill",
+    "phone-camera-line",
+    "phone-fill",
+    "phone-find-fill",
+    "phone-find-line",
+    "phone-line",
+    "phone-lock-fill",
+    "phone-lock-line",
+    "picture-in-picture-2-fill",
+    "picture-in-picture-2-line",
+    "picture-in-picture-exit-fill",
+    "picture-in-picture-exit-line",
+    "picture-in-picture-fill",
+    "picture-in-picture-line",
+    "pie-chart-2-fill",
+    "pie-chart-2-line",
+    "pie-chart-box-fill",
+    "pie-chart-box-line",
+    "pie-chart-fill",
+    "pie-chart-line",
+    "pin-distance-fill",
+    "pin-distance-line",
+    "ping-pong-fill",
+    "ping-pong-line",
+    "pinterest-fill",
+    "pinterest-line",
+    "pinyin-input",
+    "pixelfed-fill",
+    "pixelfed-line",
+    "plane-fill",
+    "plane-line",
+    "planet-fill",
+    "planet-line",
+    "plant-fill",
+    "plant-line",
+    "play-circle-fill",
+    "play-circle-line",
+    "play-fill",
+    "play-line",
+    "play-list-2-fill",
+    "play-list-2-line",
+    "play-list-add-fill",
+    "play-list-add-line",
+    "play-list-fill",
+    "play-list-line",
+    "play-mini-fill",
+    "play-mini-line",
+    "playstation-fill",
+    "playstation-line",
+    "plug-2-fill",
+    "plug-2-line",
+    "plug-fill",
+    "plug-line",
+    "polaroid-2-fill",
+    "polaroid-2-line",
+    "polaroid-fill",
+    "polaroid-line",
+    "police-car-fill",
+    "police-car-line",
+    "presentation-fill",
+    "presentation-line",
+    "price-tag-2-fill",
+    "price-tag-2-line",
+    "price-tag-3-fill",
+    "price-tag-3-line",
+    "price-tag-fill",
+    "price-tag-line",
+    "printer-cloud-fill",
+    "printer-cloud-line",
+    "printer-fill",
+    "printer-line",
+    "product-hunt-fill",
+    "product-hunt-line",
+    "profile-fill",
+    "profile-line",
+    "prohibited-fill",
+    "prohibited-line",
+    "projector-2-fill",
+    "projector-2-line",
+    "projector-fill",
+    "projector-line",
+    "psychotherapy-fill",
+    "psychotherapy-line",
+    "pulse-fill",
+    "pulse-line",
+    "pushpin-2-fill",
+    "pushpin-2-line",
+    "pushpin-fill",
+    "pushpin-line",
+    "qq-fill",
+    "qq-line",
+    "qr-code-fill",
+    "qr-code-line",
+    "qr-scan-2-fill",
+    "qr-scan-2-line",
+    "qr-scan-fill",
+    "qr-scan-line",
+    "question-answer-fill",
+    "question-answer-line",
+    "question-fill",
+    "question-line",
+    "question-mark",
+    "questionnaire-fill",
+    "questionnaire-line",
+    "quill-pen-fill",
+    "quill-pen-line",
+    "quote-text",
+    "radar-fill",
+    "radar-line",
+    "radio-2-fill",
+    "radio-2-line",
+    "radio-button-fill",
+    "radio-button-line",
+    "radio-fill",
+    "radio-line",
+    "rainbow-fill",
+    "rainbow-line",
+    "rainy-fill",
+    "rainy-line",
+    "reactjs-fill",
+    "reactjs-line",
+    "record-circle-fill",
+    "record-circle-line",
+    "record-mail-fill",
+    "record-mail-line",
+    "rectangle-fill",
+    "rectangle-line",
+    "recycle-fill",
+    "recycle-line",
+    "red-packet-fill",
+    "red-packet-line",
+    "reddit-fill",
+    "reddit-line",
+    "refresh-fill",
+    "refresh-line",
+    "refund-2-fill",
+    "refund-2-line",
+    "refund-fill",
+    "refund-line",
+    "registered-fill",
+    "registered-line",
+    "remixicon-fill",
+    "remixicon-line",
+    "remote-control-2-fill",
+    "remote-control-2-line",
+    "remote-control-fill",
+    "remote-control-line",
+    "repeat-2-fill",
+    "repeat-2-line",
+    "repeat-fill",
+    "repeat-line",
+    "repeat-one-fill",
+    "repeat-one-line",
+    "replay-10-fill",
+    "replay-10-line",
+    "replay-15-fill",
+    "replay-15-line",
+    "replay-30-fill",
+    "replay-30-line",
+    "replay-5-fill",
+    "replay-5-line",
+    "reply-all-fill",
+    "reply-all-line",
+    "reply-fill",
+    "reply-line",
+    "reserved-fill",
+    "reserved-line",
+    "rest-time-fill",
+    "rest-time-line",
+    "restart-fill",
+    "restart-line",
+    "restaurant-2-fill",
+    "restaurant-2-line",
+    "restaurant-fill",
+    "restaurant-line",
+    "rewind-fill",
+    "rewind-line",
+    "rewind-mini-fill",
+    "rewind-mini-line",
+    "rfid-fill",
+    "rfid-line",
+    "rhythm-fill",
+    "rhythm-line",
+    "riding-fill",
+    "riding-line",
+    "road-map-fill",
+    "road-map-line",
+    "roadster-fill",
+    "roadster-line",
+    "robot-2-fill",
+    "robot-2-line",
+    "robot-fill",
+    "robot-line",
+    "rocket-2-fill",
+    "rocket-2-line",
+    "rocket-fill",
+    "rocket-line",
+    "rotate-lock-fill",
+    "rotate-lock-line",
+    "rounded-corner",
+    "route-fill",
+    "route-line",
+    "router-fill",
+    "router-line",
+    "rss-fill",
+    "rss-line",
+    "ruler-2-fill",
+    "ruler-2-line",
+    "ruler-fill",
+    "ruler-line",
+    "run-fill",
+    "run-line",
+    "safari-fill",
+    "safari-line",
+    "safe-2-fill",
+    "safe-2-line",
+    "safe-fill",
+    "safe-line",
+    "sailboat-fill",
+    "sailboat-line",
+    "save-2-fill",
+    "save-2-line",
+    "save-3-fill",
+    "save-3-line",
+    "save-fill",
+    "save-line",
+    "scales-2-fill",
+    "scales-2-line",
+    "scales-3-fill",
+    "scales-3-line",
+    "scales-fill",
+    "scales-line",
+    "scan-2-fill",
+    "scan-2-line",
+    "scan-fill",
+    "scan-line",
+    "school-fill",
+    "school-line",
+    "scissors-2-fill",
+    "scissors-2-line",
+    "scissors-cut-fill",
+    "scissors-cut-line",
+    "scissors-fill",
+    "scissors-line",
+    "screenshot-2-fill",
+    "screenshot-2-line",
+    "screenshot-fill",
+    "screenshot-line",
+    "sd-card-fill",
+    "sd-card-line",
+    "sd-card-mini-fill",
+    "sd-card-mini-line",
+    "search-2-fill",
+    "search-2-line",
+    "search-eye-fill",
+    "search-eye-line",
+    "search-fill",
+    "search-line",
+    "secure-payment-fill",
+    "secure-payment-line",
+    "seedling-fill",
+    "seedling-line",
+    "send-backward",
+    "send-plane-2-fill",
+    "send-plane-2-line",
+    "send-plane-fill",
+    "send-plane-line",
+    "send-to-back",
+    "sensor-fill",
+    "sensor-line",
+    "seo-fill",
+    "seo-line",
+    "separator",
+    "server-fill",
+    "server-line",
+    "service-fill",
+    "service-line",
+    "settings-2-fill",
+    "settings-2-line",
+    "settings-3-fill",
+    "settings-3-line",
+    "settings-4-fill",
+    "settings-4-line",
+    "settings-5-fill",
+    "settings-5-line",
+    "settings-6-fill",
+    "settings-6-line",
+    "settings-fill",
+    "settings-line",
+    "shake-hands-fill",
+    "shake-hands-line",
+    "shape-2-fill",
+    "shape-2-line",
+    "shape-fill",
+    "shape-line",
+    "shapes-fill",
+    "shapes-line",
+    "share-box-fill",
+    "share-box-line",
+    "share-circle-fill",
+    "share-circle-line",
+    "share-fill",
+    "share-forward-2-fill",
+    "share-forward-2-line",
+    "share-forward-box-fill",
+    "share-forward-box-line",
+    "share-forward-fill",
+    "share-forward-line",
+    "share-line",
+    "shield-check-fill",
+    "shield-check-line",
+    "shield-cross-fill",
+    "shield-cross-line",
+    "shield-fill",
+    "shield-flash-fill",
+    "shield-flash-line",
+    "shield-keyhole-fill",
+    "shield-keyhole-line",
+    "shield-line",
+    "shield-star-fill",
+    "shield-star-line",
+    "shield-user-fill",
+    "shield-user-line",
+    "shining-2-fill",
+    "shining-2-line",
+    "shining-fill",
+    "shining-line",
+    "ship-2-fill",
+    "ship-2-line",
+    "ship-fill",
+    "ship-line",
+    "shirt-fill",
+    "shirt-line",
+    "shopping-bag-2-fill",
+    "shopping-bag-2-line",
+    "shopping-bag-3-fill",
+    "shopping-bag-3-line",
+    "shopping-bag-fill",
+    "shopping-bag-line",
+    "shopping-basket-2-fill",
+    "shopping-basket-2-line",
+    "shopping-basket-fill",
+    "shopping-basket-line",
+    "shopping-cart-2-fill",
+    "shopping-cart-2-line",
+    "shopping-cart-fill",
+    "shopping-cart-line",
+    "showers-fill",
+    "showers-line",
+    "shuffle-fill",
+    "shuffle-line",
+    "shut-down-fill",
+    "shut-down-line",
+    "side-bar-fill",
+    "side-bar-line",
+    "signal-tower-fill",
+    "signal-tower-line",
+    "signal-wifi-1-fill",
+    "signal-wifi-1-line",
+    "signal-wifi-2-fill",
+    "signal-wifi-2-line",
+    "signal-wifi-3-fill",
+    "signal-wifi-3-line",
+    "signal-wifi-error-fill",
+    "signal-wifi-error-line",
+    "signal-wifi-fill",
+    "signal-wifi-line",
+    "signal-wifi-off-fill",
+    "signal-wifi-off-line",
+    "sim-card-2-fill",
+    "sim-card-2-line",
+    "sim-card-fill",
+    "sim-card-line",
+    "single-quotes-l",
+    "single-quotes-r",
+    "sip-fill",
+    "sip-line",
+    "sketching",
+    "skip-back-fill",
+    "skip-back-line",
+    "skip-back-mini-fill",
+    "skip-back-mini-line",
+    "skip-down-fill",
+    "skip-down-line",
+    "skip-forward-fill",
+    "skip-forward-line",
+    "skip-forward-mini-fill",
+    "skip-forward-mini-line",
+    "skip-left-fill",
+    "skip-left-line",
+    "skip-right-fill",
+    "skip-right-line",
+    "skip-up-fill",
+    "skip-up-line",
+    "skull-2-fill",
+    "skull-2-line",
+    "skull-fill",
+    "skull-line",
+    "skype-fill",
+    "skype-line",
+    "slack-fill",
+    "slack-line",
+    "slash-commands",
+    "slash-commands-2",
+    "slice-fill",
+    "slice-line",
+    "slideshow-2-fill",
+    "slideshow-2-line",
+    "slideshow-3-fill",
+    "slideshow-3-line",
+    "slideshow-4-fill",
+    "slideshow-4-line",
+    "slideshow-fill",
+    "slideshow-line",
+    "slow-down-fill",
+    "slow-down-line",
+    "smartphone-fill",
+    "smartphone-line",
+    "snapchat-fill",
+    "snapchat-line",
+    "snowy-fill",
+    "snowy-line",
+    "sort-asc",
+    "sort-desc",
+    "sound-module-fill",
+    "sound-module-line",
+    "soundcloud-fill",
+    "soundcloud-line",
+    "space",
+    "space-ship-fill",
+    "space-ship-line",
+    "spam-2-fill",
+    "spam-2-line",
+    "spam-3-fill",
+    "spam-3-line",
+    "spam-fill",
+    "spam-line",
+    "sparkling-2-fill",
+    "sparkling-2-line",
+    "sparkling-fill",
+    "sparkling-line",
+    "speak-fill",
+    "speak-line",
+    "speaker-2-fill",
+    "speaker-2-line",
+    "speaker-3-fill",
+    "speaker-3-line",
+    "speaker-fill",
+    "speaker-line",
+    "spectrum-fill",
+    "spectrum-line",
+    "speed-fill",
+    "speed-line",
+    "speed-mini-fill",
+    "speed-mini-line",
+    "speed-up-fill",
+    "speed-up-line",
+    "split-cells-horizontal",
+    "split-cells-vertical",
+    "spotify-fill",
+    "spotify-line",
+    "spy-fill",
+    "spy-line",
+    "square-fill",
+    "square-line",
+    "stack-fill",
+    "stack-line",
+    "stack-overflow-fill",
+    "stack-overflow-line",
+    "stackshare-fill",
+    "stackshare-line",
+    "star-fill",
+    "star-half-fill",
+    "star-half-line",
+    "star-half-s-fill",
+    "star-half-s-line",
+    "star-line",
+    "star-s-fill",
+    "star-s-line",
+    "star-smile-fill",
+    "star-smile-line",
+    "steam-fill",
+    "steam-line",
+    "steering-2-fill",
+    "steering-2-line",
+    "steering-fill",
+    "steering-line",
+    "stethoscope-fill",
+    "stethoscope-line",
+    "sticky-note-2-fill",
+    "sticky-note-2-line",
+    "sticky-note-fill",
+    "sticky-note-line",
+    "stock-fill",
+    "stock-line",
+    "stop-circle-fill",
+    "stop-circle-line",
+    "stop-fill",
+    "stop-line",
+    "stop-mini-fill",
+    "stop-mini-line",
+    "store-2-fill",
+    "store-2-line",
+    "store-3-fill",
+    "store-3-line",
+    "store-fill",
+    "store-line",
+    "strikethrough",
+    "strikethrough-2",
+    "subscript",
+    "subscript-2",
+    "subtract-fill",
+    "subtract-line",
+    "subway-fill",
+    "subway-line",
+    "subway-wifi-fill",
+    "subway-wifi-line",
+    "suitcase-2-fill",
+    "suitcase-2-line",
+    "suitcase-3-fill",
+    "suitcase-3-line",
+    "suitcase-fill",
+    "suitcase-line",
+    "sun-cloudy-fill",
+    "sun-cloudy-line",
+    "sun-fill",
+    "sun-foggy-fill",
+    "sun-foggy-line",
+    "sun-line",
+    "supabase-fill",
+    "supabase-line",
+    "superscript",
+    "superscript-2",
+    "surgical-mask-fill",
+    "surgical-mask-line",
+    "surround-sound-fill",
+    "surround-sound-line",
+    "survey-fill",
+    "survey-line",
+    "swap-box-fill",
+    "swap-box-line",
+    "swap-fill",
+    "swap-line",
+    "switch-fill",
+    "switch-line",
+    "sword-fill",
+    "sword-line",
+    "syringe-fill",
+    "syringe-line",
+    "t-box-fill",
+    "t-box-line",
+    "t-shirt-2-fill",
+    "t-shirt-2-line",
+    "t-shirt-air-fill",
+    "t-shirt-air-line",
+    "t-shirt-fill",
+    "t-shirt-line",
+    "table-2",
+    "table-alt-fill",
+    "table-alt-line",
+    "table-fill",
+    "table-line",
+    "tablet-fill",
+    "tablet-line",
+    "takeaway-fill",
+    "takeaway-line",
+    "taobao-fill",
+    "taobao-line",
+    "tape-fill",
+    "tape-line",
+    "task-fill",
+    "task-line",
+    "taxi-fill",
+    "taxi-line",
+    "taxi-wifi-fill",
+    "taxi-wifi-line",
+    "team-fill",
+    "team-line",
+    "telegram-fill",
+    "telegram-line",
+    "temp-cold-fill",
+    "temp-cold-line",
+    "temp-hot-fill",
+    "temp-hot-line",
+    "tent-fill",
+    "tent-line",
+    "terminal-box-fill",
+    "terminal-box-line",
+    "terminal-fill",
+    "terminal-line",
+    "terminal-window-fill",
+    "terminal-window-line",
+    "test-tube-fill",
+    "test-tube-line",
+    "text",
+    "text-direction-l",
+    "text-direction-r",
+    "text-spacing",
+    "text-wrap",
+    "thermometer-fill",
+    "thermometer-line",
+    "threads-fill",
+    "threads-line",
+    "thumb-down-fill",
+    "thumb-down-line",
+    "thumb-up-fill",
+    "thumb-up-line",
+    "thunderstorms-fill",
+    "thunderstorms-line",
+    "ticket-2-fill",
+    "ticket-2-line",
+    "ticket-fill",
+    "ticket-line",
+    "tiktok-fill",
+    "tiktok-line",
+    "time-fill",
+    "time-line",
+    "timer-2-fill",
+    "timer-2-line",
+    "timer-fill",
+    "timer-flash-fill",
+    "timer-flash-line",
+    "timer-line",
+    "todo-fill",
+    "todo-line",
+    "toggle-fill",
+    "toggle-line",
+    "token-swap-fill",
+    "token-swap-line",
+    "tools-fill",
+    "tools-line",
+    "tornado-fill",
+    "tornado-line",
+    "trademark-fill",
+    "trademark-line",
+    "traffic-light-fill",
+    "traffic-light-line",
+    "train-fill",
+    "train-line",
+    "train-wifi-fill",
+    "train-wifi-line",
+    "translate",
+    "translate-2",
+    "travesti-fill",
+    "travesti-line",
+    "treasure-map-fill",
+    "treasure-map-line",
+    "tree-fill",
+    "tree-line",
+    "trello-fill",
+    "trello-line",
+    "triangle-fill",
+    "triangle-line",
+    "trophy-fill",
+    "trophy-line",
+    "truck-fill",
+    "truck-line",
+    "tumblr-fill",
+    "tumblr-line",
+    "tv-2-fill",
+    "tv-2-line",
+    "tv-fill",
+    "tv-line",
+    "twitch-fill",
+    "twitch-line",
+    "twitter-fill",
+    "twitter-line",
+    "twitter-x-fill",
+    "twitter-x-line",
+    "typhoon-fill",
+    "typhoon-line",
+    "u-disk-fill",
+    "u-disk-line",
+    "ubuntu-fill",
+    "ubuntu-line",
+    "umbrella-fill",
+    "umbrella-line",
+    "underline",
+    "uninstall-fill",
+    "uninstall-line",
+    "unpin-fill",
+    "unpin-line",
+    "unsplash-fill",
+    "unsplash-line",
+    "upload-2-fill",
+    "upload-2-line",
+    "upload-cloud-2-fill",
+    "upload-cloud-2-line",
+    "upload-cloud-fill",
+    "upload-cloud-line",
+    "upload-fill",
+    "upload-line",
+    "usb-fill",
+    "usb-line",
+    "user-2-fill",
+    "user-2-line",
+    "user-3-fill",
+    "user-3-line",
+    "user-4-fill",
+    "user-4-line",
+    "user-5-fill",
+    "user-5-line",
+    "user-6-fill",
+    "user-6-line",
+    "user-add-fill",
+    "user-add-line",
+    "user-fill",
+    "user-follow-fill",
+    "user-follow-line",
+    "user-forbid-fill",
+    "user-forbid-line",
+    "user-heart-fill",
+    "user-heart-line",
+    "user-line",
+    "user-location-fill",
+    "user-location-line",
+    "user-received-2-fill",
+    "user-received-2-line",
+    "user-received-fill",
+    "user-received-line",
+    "user-search-fill",
+    "user-search-line",
+    "user-settings-fill",
+    "user-settings-line",
+    "user-shared-2-fill",
+    "user-shared-2-line",
+    "user-shared-fill",
+    "user-shared-line",
+    "user-smile-fill",
+    "user-smile-line",
+    "user-star-fill",
+    "user-star-line",
+    "user-unfollow-fill",
+    "user-unfollow-line",
+    "user-voice-fill",
+    "user-voice-line",
+    "verified-badge-fill",
+    "verified-badge-line",
+    "video-add-fill",
+    "video-add-line",
+    "video-chat-fill",
+    "video-chat-line",
+    "video-download-fill",
+    "video-download-line",
+    "video-fill",
+    "video-line",
+    "video-upload-fill",
+    "video-upload-line",
+    "vidicon-2-fill",
+    "vidicon-2-line",
+    "vidicon-fill",
+    "vidicon-line",
+    "vimeo-fill",
+    "vimeo-line",
+    "vip-crown-2-fill",
+    "vip-crown-2-line",
+    "vip-crown-fill",
+    "vip-crown-line",
+    "vip-diamond-fill",
+    "vip-diamond-line",
+    "vip-fill",
+    "vip-line",
+    "virus-fill",
+    "virus-line",
+    "visa-fill",
+    "visa-line",
+    "voice-recognition-fill",
+    "voice-recognition-line",
+    "voiceprint-fill",
+    "voiceprint-line",
+    "volume-down-fill",
+    "volume-down-line",
+    "volume-mute-fill",
+    "volume-mute-line",
+    "volume-off-vibrate-fill",
+    "volume-off-vibrate-line",
+    "volume-up-fill",
+    "volume-up-line",
+    "volume-vibrate-fill",
+    "volume-vibrate-line",
+    "vuejs-fill",
+    "vuejs-line",
+    "walk-fill",
+    "walk-line",
+    "wallet-2-fill",
+    "wallet-2-line",
+    "wallet-3-fill",
+    "wallet-3-line",
+    "wallet-fill",
+    "wallet-line",
+    "water-flash-fill",
+    "water-flash-line",
+    "water-percent-fill",
+    "water-percent-line",
+    "webcam-fill",
+    "webcam-line",
+    "wechat-2-fill",
+    "wechat-2-line",
+    "wechat-channels-fill",
+    "wechat-channels-line",
+    "wechat-fill",
+    "wechat-line",
+    "wechat-pay-fill",
+    "wechat-pay-line",
+    "weibo-fill",
+    "weibo-line",
+    "whatsapp-fill",
+    "whatsapp-line",
+    "wheelchair-fill",
+    "wheelchair-line",
+    "wifi-fill",
+    "wifi-line",
+    "wifi-off-fill",
+    "wifi-off-line",
+    "window-2-fill",
+    "window-2-line",
+    "window-fill",
+    "window-line",
+    "windows-fill",
+    "windows-line",
+    "windy-fill",
+    "windy-line",
+    "wireless-charging-fill",
+    "wireless-charging-line",
+    "women-fill",
+    "women-line",
+    "wordpress-fill",
+    "wordpress-line",
+    "wubi-input",
+    "xbox-fill",
+    "xbox-line",
+    "xing-fill",
+    "xing-line",
+    "youtube-fill",
+    "youtube-line",
+    "yuque-fill",
+    "yuque-line",
+    "zcool-fill",
+    "zcool-line",
+    "zhihu-fill",
+    "zhihu-line",
+    "zoom-in-fill",
+    "zoom-in-line",
+    "zoom-out-fill",
+    "zoom-out-line",
+    "zzz-fill",
+    "zzz-line"
+  ],
+  // https://icones.js.org/collections/fa-solid-meta.json
+  "fa-solid:": [
+    "abacus",
+    "ad",
+    "address-book",
+    "address-card",
+    "adjust",
+    "air-freshener",
+    "align-center",
+    "align-justify",
+    "align-left",
+    "align-right",
+    "allergies",
+    "ambulance",
+    "american-sign-language-interpreting",
+    "anchor",
+    "angle-double-down",
+    "angle-double-left",
+    "angle-double-right",
+    "angle-double-up",
+    "angle-down",
+    "angle-left",
+    "angle-right",
+    "angle-up",
+    "angry",
+    "ankh",
+    "apple-alt",
+    "archive",
+    "archway",
+    "arrow-alt-circle-down",
+    "arrow-alt-circle-left",
+    "arrow-alt-circle-right",
+    "arrow-alt-circle-up",
+    "arrow-circle-down",
+    "arrow-circle-left",
+    "arrow-circle-right",
+    "arrow-circle-up",
+    "arrow-down",
+    "arrow-left",
+    "arrow-right",
+    "arrow-up",
+    "arrows-alt",
+    "arrows-alt-h",
+    "arrows-alt-v",
+    "assistive-listening-systems",
+    "asterisk",
+    "at",
+    "atlas",
+    "atom",
+    "audio-description",
+    "award",
+    "baby",
+    "baby-carriage",
+    "backspace",
+    "backward",
+    "bacon",
+    "bacteria",
+    "bacterium",
+    "bahai",
+    "balance-scale",
+    "balance-scale-left",
+    "balance-scale-right",
+    "ban",
+    "band-aid",
+    "barcode",
+    "bars",
+    "baseball-ball",
+    "basketball-ball",
+    "bath",
+    "battery-empty",
+    "battery-full",
+    "battery-half",
+    "battery-quarter",
+    "battery-three-quarters",
+    "bed",
+    "beer",
+    "bell",
+    "bell-slash",
+    "bezier-curve",
+    "bible",
+    "bicycle",
+    "biking",
+    "binoculars",
+    "biohazard",
+    "birthday-cake",
+    "blender",
+    "blender-phone",
+    "blind",
+    "blog",
+    "bold",
+    "bolt",
+    "bomb",
+    "bone",
+    "bong",
+    "book",
+    "book-dead",
+    "book-medical",
+    "book-open",
+    "book-reader",
+    "bookmark",
+    "border-all",
+    "border-none",
+    "border-style",
+    "bowling-ball",
+    "box",
+    "box-open",
+    "box-tissue",
+    "boxes",
+    "braille",
+    "brain",
+    "bread-slice",
+    "briefcase",
+    "briefcase-medical",
+    "broadcast-tower",
+    "broom",
+    "brush",
+    "bug",
+    "building",
+    "bullhorn",
+    "bullseye",
+    "burn",
+    "bus",
+    "bus-alt",
+    "business-time",
+    "calculator",
+    "calculator-alt",
+    "calendar",
+    "calendar-alt",
+    "calendar-check",
+    "calendar-day",
+    "calendar-minus",
+    "calendar-plus",
+    "calendar-times",
+    "calendar-week",
+    "camera",
+    "camera-retro",
+    "campground",
+    "candy-cane",
+    "cannabis",
+    "capsules",
+    "car",
+    "car-alt",
+    "car-battery",
+    "car-crash",
+    "car-side",
+    "caravan",
+    "caret-down",
+    "caret-left",
+    "caret-right",
+    "caret-square-down",
+    "caret-square-left",
+    "caret-square-right",
+    "caret-square-up",
+    "caret-up",
+    "carrot",
+    "cart-arrow-down",
+    "cart-plus",
+    "cash-register",
+    "cat",
+    "certificate",
+    "chair",
+    "chalkboard",
+    "chalkboard-teacher",
+    "charging-station",
+    "chart-area",
+    "chart-bar",
+    "chart-line",
+    "chart-pie",
+    "check",
+    "check-circle",
+    "check-double",
+    "check-square",
+    "cheese",
+    "chess",
+    "chess-bishop",
+    "chess-board",
+    "chess-king",
+    "chess-knight",
+    "chess-pawn",
+    "chess-queen",
+    "chess-rook",
+    "chevron-circle-down",
+    "chevron-circle-left",
+    "chevron-circle-right",
+    "chevron-circle-up",
+    "chevron-down",
+    "chevron-left",
+    "chevron-right",
+    "chevron-up",
+    "child",
+    "church",
+    "circle",
+    "circle-notch",
+    "city",
+    "clinic-medical",
+    "clipboard",
+    "clipboard-check",
+    "clipboard-list",
+    "clock",
+    "clone",
+    "closed-captioning",
+    "cloud",
+    "cloud-download-alt",
+    "cloud-meatball",
+    "cloud-moon",
+    "cloud-moon-rain",
+    "cloud-rain",
+    "cloud-showers-heavy",
+    "cloud-sun",
+    "cloud-sun-rain",
+    "cloud-upload-alt",
+    "cocktail",
+    "code",
+    "code-branch",
+    "coffee",
+    "cog",
+    "cogs",
+    "coins",
+    "columns",
+    "comment",
+    "comment-alt",
+    "comment-dollar",
+    "comment-dots",
+    "comment-medical",
+    "comment-slash",
+    "comments",
+    "comments-dollar",
+    "compact-disc",
+    "compass",
+    "compress",
+    "compress-alt",
+    "compress-arrows-alt",
+    "concierge-bell",
+    "cookie",
+    "cookie-bite",
+    "copy",
+    "copyright",
+    "couch",
+    "credit-card",
+    "crop",
+    "crop-alt",
+    "cross",
+    "crosshairs",
+    "crow",
+    "crown",
+    "crutch",
+    "cube",
+    "cubes",
+    "cut",
+    "database",
+    "deaf",
+    "democrat",
+    "desktop",
+    "dharmachakra",
+    "diagnoses",
+    "dice",
+    "dice-d20",
+    "dice-d6",
+    "dice-five",
+    "dice-four",
+    "dice-one",
+    "dice-six",
+    "dice-three",
+    "dice-two",
+    "digital-tachograph",
+    "directions",
+    "disease",
+    "divide",
+    "dizzy",
+    "dna",
+    "dog",
+    "dollar-sign",
+    "dolly",
+    "dolly-flatbed",
+    "donate",
+    "door-closed",
+    "door-open",
+    "dot-circle",
+    "dove",
+    "download",
+    "drafting-compass",
+    "dragon",
+    "draw-polygon",
+    "drum",
+    "drum-steelpan",
+    "drumstick-bite",
+    "dumbbell",
+    "dumpster",
+    "dumpster-fire",
+    "dungeon",
+    "edit",
+    "egg",
+    "eject",
+    "ellipsis-h",
+    "ellipsis-v",
+    "empty-set",
+    "envelope",
+    "envelope-open",
+    "envelope-open-text",
+    "envelope-square",
+    "equals",
+    "eraser",
+    "ethernet",
+    "euro-sign",
+    "exchange-alt",
+    "exclamation",
+    "exclamation-circle",
+    "exclamation-triangle",
+    "expand",
+    "expand-alt",
+    "expand-arrows-alt",
+    "external-link-alt",
+    "external-link-square-alt",
+    "eye",
+    "eye-dropper",
+    "eye-slash",
+    "fan",
+    "fast-backward",
+    "fast-forward",
+    "faucet",
+    "fax",
+    "feather",
+    "feather-alt",
+    "female",
+    "fighter-jet",
+    "file",
+    "file-alt",
+    "file-archive",
+    "file-audio",
+    "file-code",
+    "file-contract",
+    "file-csv",
+    "file-download",
+    "file-excel",
+    "file-export",
+    "file-image",
+    "file-import",
+    "file-invoice",
+    "file-invoice-dollar",
+    "file-medical",
+    "file-medical-alt",
+    "file-pdf",
+    "file-powerpoint",
+    "file-prescription",
+    "file-signature",
+    "file-upload",
+    "file-video",
+    "file-word",
+    "fill",
+    "fill-drip",
+    "film",
+    "filter",
+    "fingerprint",
+    "fire",
+    "fire-alt",
+    "fire-extinguisher",
+    "first-aid",
+    "fish",
+    "fist-raised",
+    "flag",
+    "flag-checkered",
+    "flag-usa",
+    "flask",
+    "flushed",
+    "folder",
+    "folder-minus",
+    "folder-open",
+    "folder-plus",
+    "font",
+    "football-ball",
+    "forward",
+    "frog",
+    "frown",
+    "frown-open",
+    "function",
+    "funnel-dollar",
+    "futbol",
+    "gamepad",
+    "gas-pump",
+    "gavel",
+    "gem",
+    "genderless",
+    "ghost",
+    "gift",
+    "gifts",
+    "glass-cheers",
+    "glass-martini",
+    "glass-martini-alt",
+    "glass-whiskey",
+    "glasses",
+    "globe",
+    "globe-africa",
+    "globe-americas",
+    "globe-asia",
+    "globe-europe",
+    "golf-ball",
+    "gopuram",
+    "graduation-cap",
+    "greater-than",
+    "greater-than-equal",
+    "grimace",
+    "grin",
+    "grin-alt",
+    "grin-beam",
+    "grin-beam-sweat",
+    "grin-hearts",
+    "grin-squint",
+    "grin-squint-tears",
+    "grin-stars",
+    "grin-tears",
+    "grin-tongue",
+    "grin-tongue-squint",
+    "grin-tongue-wink",
+    "grin-wink",
+    "grip-horizontal",
+    "grip-lines",
+    "grip-lines-vertical",
+    "grip-vertical",
+    "guitar",
+    "h-square",
+    "hamburger",
+    "hammer",
+    "hamsa",
+    "hand-holding",
+    "hand-holding-heart",
+    "hand-holding-medical",
+    "hand-holding-usd",
+    "hand-holding-water",
+    "hand-lizard",
+    "hand-middle-finger",
+    "hand-paper",
+    "hand-peace",
+    "hand-point-down",
+    "hand-point-left",
+    "hand-point-right",
+    "hand-point-up",
+    "hand-pointer",
+    "hand-rock",
+    "hand-scissors",
+    "hand-sparkles",
+    "hand-spock",
+    "hands",
+    "hands-helping",
+    "hands-wash",
+    "handshake",
+    "handshake-alt-slash",
+    "handshake-slash",
+    "hanukiah",
+    "hard-hat",
+    "hashtag",
+    "hat-cowboy",
+    "hat-cowboy-side",
+    "hat-wizard",
+    "hdd",
+    "head-side-cough",
+    "head-side-cough-slash",
+    "head-side-mask",
+    "head-side-virus",
+    "heading",
+    "headphones",
+    "headphones-alt",
+    "headset",
+    "heart",
+    "heart-broken",
+    "heartbeat",
+    "helicopter",
+    "highlighter",
+    "hiking",
+    "hippo",
+    "history",
+    "hockey-puck",
+    "holly-berry",
+    "home",
+    "horse",
+    "horse-head",
+    "hospital",
+    "hospital-alt",
+    "hospital-symbol",
+    "hospital-user",
+    "hot-tub",
+    "hotdog",
+    "hotel",
+    "hourglass",
+    "hourglass-end",
+    "hourglass-half",
+    "hourglass-start",
+    "house-damage",
+    "house-user",
+    "hryvnia",
+    "i-cursor",
+    "ice-cream",
+    "icicles",
+    "icons",
+    "id-badge",
+    "id-card",
+    "id-card-alt",
+    "igloo",
+    "image",
+    "images",
+    "inbox",
+    "indent",
+    "industry",
+    "infinity",
+    "info",
+    "info-circle",
+    "integral",
+    "intersection",
+    "italic",
+    "jedi",
+    "joint",
+    "journal-whills",
+    "kaaba",
+    "key",
+    "keyboard",
+    "khanda",
+    "kiss",
+    "kiss-beam",
+    "kiss-wink-heart",
+    "kiwi-bird",
+    "lambda",
+    "landmark",
+    "language",
+    "laptop",
+    "laptop-code",
+    "laptop-house",
+    "laptop-medical",
+    "laugh",
+    "laugh-beam",
+    "laugh-squint",
+    "laugh-wink",
+    "layer-group",
+    "leaf",
+    "lemon",
+    "less-than",
+    "less-than-equal",
+    "level-down-alt",
+    "level-up-alt",
+    "life-ring",
+    "lightbulb",
+    "link",
+    "lira-sign",
+    "list",
+    "list-alt",
+    "list-ol",
+    "list-ul",
+    "location-arrow",
+    "lock",
+    "lock-open",
+    "long-arrow-alt-down",
+    "long-arrow-alt-left",
+    "long-arrow-alt-right",
+    "long-arrow-alt-up",
+    "low-vision",
+    "luggage-cart",
+    "lungs",
+    "lungs-virus",
+    "magic",
+    "magnet",
+    "mail-bulk",
+    "male",
+    "map",
+    "map-marked",
+    "map-marked-alt",
+    "map-marker",
+    "map-marker-alt",
+    "map-pin",
+    "map-signs",
+    "marker",
+    "mars",
+    "mars-double",
+    "mars-stroke",
+    "mars-stroke-h",
+    "mars-stroke-v",
+    "mask",
+    "medal",
+    "medkit",
+    "meh",
+    "meh-blank",
+    "meh-rolling-eyes",
+    "memory",
+    "menorah",
+    "mercury",
+    "meteor",
+    "microchip",
+    "microphone",
+    "microphone-alt",
+    "microphone-alt-slash",
+    "microphone-slash",
+    "microscope",
+    "minus",
+    "minus-circle",
+    "minus-square",
+    "mitten",
+    "mobile",
+    "mobile-alt",
+    "money-bill",
+    "money-bill-alt",
+    "money-bill-wave",
+    "money-bill-wave-alt",
+    "money-check",
+    "money-check-alt",
+    "monument",
+    "moon",
+    "mortar-pestle",
+    "mosque",
+    "motorcycle",
+    "mountain",
+    "mouse",
+    "mouse-pointer",
+    "mug-hot",
+    "music",
+    "network-wired",
+    "neuter",
+    "newspaper",
+    "not-equal",
+    "notes-medical",
+    "object-group",
+    "object-ungroup",
+    "oil-can",
+    "om",
+    "omega",
+    "otter",
+    "outdent",
+    "pager",
+    "paint-brush",
+    "paint-roller",
+    "palette",
+    "pallet",
+    "paper-plane",
+    "paperclip",
+    "parachute-box",
+    "paragraph",
+    "parking",
+    "passport",
+    "pastafarianism",
+    "paste",
+    "pause",
+    "pause-circle",
+    "paw",
+    "peace",
+    "pen",
+    "pen-alt",
+    "pen-fancy",
+    "pen-nib",
+    "pen-square",
+    "pencil-alt",
+    "pencil-ruler",
+    "people-arrows",
+    "people-carry",
+    "pepper-hot",
+    "percent",
+    "percentage",
+    "person-booth",
+    "phone",
+    "phone-alt",
+    "phone-slash",
+    "phone-square",
+    "phone-square-alt",
+    "phone-volume",
+    "photo-video",
+    "pi",
+    "piggy-bank",
+    "pills",
+    "pizza-slice",
+    "place-of-worship",
+    "plane",
+    "plane-arrival",
+    "plane-departure",
+    "plane-slash",
+    "play",
+    "play-circle",
+    "plug",
+    "plus",
+    "plus-circle",
+    "plus-square",
+    "podcast",
+    "poll",
+    "poll-h",
+    "poo",
+    "poo-storm",
+    "poop",
+    "portrait",
+    "pound-sign",
+    "power-off",
+    "pray",
+    "praying-hands",
+    "prescription",
+    "prescription-bottle",
+    "prescription-bottle-alt",
+    "print",
+    "procedures",
+    "project-diagram",
+    "pump-medical",
+    "pump-soap",
+    "puzzle-piece",
+    "qrcode",
+    "question",
+    "question-circle",
+    "quidditch",
+    "quote-left",
+    "quote-right",
+    "quran",
+    "radiation",
+    "radiation-alt",
+    "rainbow",
+    "random",
+    "receipt",
+    "record-vinyl",
+    "recycle",
+    "redo",
+    "redo-alt",
+    "registered",
+    "remove-format",
+    "reply",
+    "reply-all",
+    "republican",
+    "restroom",
+    "retweet",
+    "ribbon",
+    "ring",
+    "road",
+    "robot",
+    "rocket",
+    "route",
+    "rss",
+    "rss-square",
+    "ruble-sign",
+    "ruler",
+    "ruler-combined",
+    "ruler-horizontal",
+    "ruler-vertical",
+    "running",
+    "rupee-sign",
+    "sad-cry",
+    "sad-tear",
+    "satellite",
+    "satellite-dish",
+    "save",
+    "school",
+    "screwdriver",
+    "scroll",
+    "sd-card",
+    "search",
+    "search-dollar",
+    "search-location",
+    "search-minus",
+    "search-plus",
+    "seedling",
+    "server",
+    "shapes",
+    "share",
+    "share-alt",
+    "share-alt-square",
+    "share-square",
+    "shekel-sign",
+    "shield-alt",
+    "shield-virus",
+    "ship",
+    "shipping-fast",
+    "shoe-prints",
+    "shopping-bag",
+    "shopping-basket",
+    "shopping-cart",
+    "shower",
+    "shuttle-van",
+    "sigma",
+    "sign",
+    "sign-in-alt",
+    "sign-language",
+    "sign-out-alt",
+    "signal",
+    "signal-alt",
+    "signal-alt-slash",
+    "signal-slash",
+    "signature",
+    "sim-card",
+    "sink",
+    "sitemap",
+    "skating",
+    "skiing",
+    "skiing-nordic",
+    "skull",
+    "skull-crossbones",
+    "slash",
+    "sleigh",
+    "sliders-h",
+    "smile",
+    "smile-beam",
+    "smile-wink",
+    "smog",
+    "smoking",
+    "smoking-ban",
+    "sms",
+    "snowboarding",
+    "snowflake",
+    "snowman",
+    "snowplow",
+    "soap",
+    "socks",
+    "solar-panel",
+    "sort",
+    "sort-alpha-down",
+    "sort-alpha-down-alt",
+    "sort-alpha-up",
+    "sort-alpha-up-alt",
+    "sort-amount-down",
+    "sort-amount-down-alt",
+    "sort-amount-up",
+    "sort-amount-up-alt",
+    "sort-down",
+    "sort-numeric-down",
+    "sort-numeric-down-alt",
+    "sort-numeric-up",
+    "sort-numeric-up-alt",
+    "sort-up",
+    "spa",
+    "space-shuttle",
+    "spell-check",
+    "spider",
+    "spinner",
+    "splotch",
+    "spray-can",
+    "square",
+    "square-full",
+    "square-root",
+    "square-root-alt",
+    "stamp",
+    "star",
+    "star-and-crescent",
+    "star-half",
+    "star-half-alt",
+    "star-of-david",
+    "star-of-life",
+    "step-backward",
+    "step-forward",
+    "stethoscope",
+    "sticky-note",
+    "stop",
+    "stop-circle",
+    "stopwatch",
+    "stopwatch-20",
+    "store",
+    "store-alt",
+    "store-alt-slash",
+    "store-slash",
+    "stream",
+    "street-view",
+    "strikethrough",
+    "stroopwafel",
+    "subscript",
+    "subway",
+    "suitcase",
+    "suitcase-rolling",
+    "sun",
+    "superscript",
+    "surprise",
+    "swatchbook",
+    "swimmer",
+    "swimming-pool",
+    "synagogue",
+    "sync",
+    "sync-alt",
+    "syringe",
+    "table",
+    "table-tennis",
+    "tablet",
+    "tablet-alt",
+    "tablets",
+    "tachometer-alt",
+    "tag",
+    "tags",
+    "tally",
+    "tape",
+    "tasks",
+    "taxi",
+    "teeth",
+    "teeth-open",
+    "temperature-high",
+    "temperature-low",
+    "tenge",
+    "terminal",
+    "text-height",
+    "text-width",
+    "th",
+    "th-large",
+    "th-list",
+    "theater-masks",
+    "thermometer",
+    "thermometer-empty",
+    "thermometer-full",
+    "thermometer-half",
+    "thermometer-quarter",
+    "thermometer-three-quarters",
+    "theta",
+    "thumbs-down",
+    "thumbs-up",
+    "thumbtack",
+    "ticket-alt",
+    "tilde",
+    "times",
+    "times-circle",
+    "tint",
+    "tint-slash",
+    "tired",
+    "toggle-off",
+    "toggle-on",
+    "toilet",
+    "toilet-paper",
+    "toilet-paper-slash",
+    "toolbox",
+    "tools",
+    "tooth",
+    "torah",
+    "torii-gate",
+    "tractor",
+    "trademark",
+    "traffic-light",
+    "trailer",
+    "train",
+    "tram",
+    "transgender",
+    "transgender-alt",
+    "trash",
+    "trash-alt",
+    "trash-restore",
+    "trash-restore-alt",
+    "tree",
+    "trophy",
+    "truck",
+    "truck-loading",
+    "truck-monster",
+    "truck-moving",
+    "truck-pickup",
+    "tshirt",
+    "tty",
+    "tv",
+    "umbrella",
+    "umbrella-beach",
+    "underline",
+    "undo",
+    "undo-alt",
+    "union",
+    "universal-access",
+    "university",
+    "unlink",
+    "unlock",
+    "unlock-alt",
+    "upload",
+    "user",
+    "user-alt",
+    "user-alt-slash",
+    "user-astronaut",
+    "user-check",
+    "user-circle",
+    "user-clock",
+    "user-cog",
+    "user-edit",
+    "user-friends",
+    "user-graduate",
+    "user-injured",
+    "user-lock",
+    "user-md",
+    "user-minus",
+    "user-ninja",
+    "user-nurse",
+    "user-plus",
+    "user-secret",
+    "user-shield",
+    "user-slash",
+    "user-tag",
+    "user-tie",
+    "user-times",
+    "users",
+    "users-cog",
+    "users-slash",
+    "utensil-spoon",
+    "utensils",
+    "value-absolute",
+    "vector-square",
+    "venus",
+    "venus-double",
+    "venus-mars",
+    "vest",
+    "vest-patches",
+    "vial",
+    "vials",
+    "video",
+    "video-slash",
+    "vihara",
+    "virus",
+    "virus-slash",
+    "viruses",
+    "voicemail",
+    "volleyball-ball",
+    "volume",
+    "volume-down",
+    "volume-mute",
+    "volume-off",
+    "volume-slash",
+    "volume-up",
+    "vote-yea",
+    "vr-cardboard",
+    "walking",
+    "wallet",
+    "warehouse",
+    "water",
+    "wave-square",
+    "weight",
+    "weight-hanging",
+    "wheelchair",
+    "wifi",
+    "wifi-slash",
+    "wind",
+    "window-close",
+    "window-maximize",
+    "window-minimize",
+    "window-restore",
+    "wine-bottle",
+    "wine-glass",
+    "wine-glass-alt",
+    "won-sign",
+    "wrench",
+    "x-ray",
+    "yen-sign",
+    "yin-yang"
+  ]
+};
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/index.ts b/Yi.Pure.Vue3/src/components/ReIcon/index.ts
new file mode 100644
index 00000000..9f77a1eb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/index.ts
@@ -0,0 +1,15 @@
+import iconifyIconOffline from "./src/iconifyIconOffline";
+import iconifyIconOnline from "./src/iconifyIconOnline";
+import iconSelect from "./src/Select.vue";
+import fontIcon from "./src/iconfont";
+
+/** 本地图标组件 */
+const IconifyIconOffline = iconifyIconOffline;
+/** 在线图标组件 */
+const IconifyIconOnline = iconifyIconOnline;
+/** `IconSelect`图标选择器组件 */
+const IconSelect = iconSelect;
+/** `iconfont`组件 */
+const FontIcon = fontIcon;
+
+export { IconifyIconOffline, IconifyIconOnline, IconSelect, FontIcon };
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/src/Select.vue b/Yi.Pure.Vue3/src/components/ReIcon/src/Select.vue
new file mode 100644
index 00000000..aad1042d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/src/Select.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { IconJson } from "@/components/ReIcon/data";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+import { ref, computed, CSSProperties, watch } from "vue";
+import Search from "@iconify-icons/ri/search-eye-line";
+
+type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
+
+defineOptions({
+  name: "IconSelect"
+});
+
+const inputValue = defineModel({ type: String });
+
+const iconList = ref(IconJson);
+const icon = ref();
+const currentActiveType = ref("ep:");
+// 深拷贝图标数据，前端做搜索
+const copyIconList = cloneDeep(iconList.value);
+const totalPage = ref(0);
+// 每页显示35个图标
+const pageSize = ref(35);
+const currentPage = ref(1);
+
+// 搜索条件
+const filterValue = ref("");
+
+const tabsList = [
+  {
+    label: "Element Plus",
+    name: "ep:"
+  },
+  {
+    label: "Remix Icon",
+    name: "ri:"
+  },
+  {
+    label: "Font Awesome 5 Solid",
+    name: "fa-solid:"
+  }
+];
+
+const pageList = computed(() =>
+  copyIconList[currentActiveType.value]
+    .filter(i => i.includes(filterValue.value))
+    .slice(
+      (currentPage.value - 1) * pageSize.value,
+      currentPage.value * pageSize.value
+    )
+);
+
+const iconItemStyle = computed((): ParameterCSSProperties => {
+  return item => {
+    if (inputValue.value === currentActiveType.value + item) {
+      return {
+        borderColor: "var(--el-color-primary)",
+        color: "var(--el-color-primary)"
+      };
+    }
+  };
+});
+
+function setVal() {
+  currentActiveType.value = inputValue.value.substring(
+    0,
+    inputValue.value.indexOf(":") + 1
+  );
+  icon.value = inputValue.value.substring(inputValue.value.indexOf(":") + 1);
+}
+
+function onBeforeEnter() {
+  if (isAllEmpty(icon.value)) return;
+  setVal();
+  // 寻找当前图标在第几页
+  const curIconIndex = copyIconList[currentActiveType.value].findIndex(
+    i => i === icon.value
+  );
+  currentPage.value = Math.ceil((curIconIndex + 1) / pageSize.value);
+}
+
+function onAfterLeave() {
+  filterValue.value = "";
+}
+
+function handleClick({ props }) {
+  currentPage.value = 1;
+  currentActiveType.value = props.name;
+}
+
+function onChangeIcon(item) {
+  icon.value = item;
+  inputValue.value = currentActiveType.value + item;
+}
+
+function onCurrentChange(page) {
+  currentPage.value = page;
+}
+
+function onClear() {
+  icon.value = "";
+  inputValue.value = "";
+}
+
+watch(
+  () => pageList.value,
+  () =>
+    (totalPage.value = copyIconList[currentActiveType.value].filter(i =>
+      i.includes(filterValue.value)
+    ).length),
+  { immediate: true }
+);
+watch(
+  () => inputValue.value,
+  val => val && setVal(),
+  { immediate: true }
+);
+watch(
+  () => filterValue.value,
+  () => (currentPage.value = 1)
+);
+</script>
+
+<template>
+  <div class="selector">
+    <el-input v-model="inputValue" disabled>
+      <template #append>
+        <el-popover
+          :width="350"
+          trigger="click"
+          popper-class="pure-popper"
+          :popper-options="{
+            placement: 'auto'
+          }"
+          @before-enter="onBeforeEnter"
+          @after-leave="onAfterLeave"
+        >
+          <template #reference>
+            <div
+              class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
+            >
+              <IconifyIconOffline v-if="!icon" :icon="Search" />
+              <IconifyIconOnline v-else :icon="inputValue" />
+            </div>
+          </template>
+
+          <el-input
+            v-model="filterValue"
+            class="px-2 pt-2"
+            placeholder="搜索图标"
+            clearable
+          />
+
+          <el-tabs v-model="currentActiveType" @tab-click="handleClick">
+            <el-tab-pane
+              v-for="(pane, index) in tabsList"
+              :key="index"
+              :label="pane.label"
+              :name="pane.name"
+            >
+              <el-scrollbar height="220px">
+                <ul class="flex flex-wrap px-2 ml-2">
+                  <li
+                    v-for="(item, key) in pageList"
+                    :key="key"
+                    :title="item"
+                    class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]"
+                    :style="iconItemStyle(item)"
+                    @click="onChangeIcon(item)"
+                  >
+                    <IconifyIconOnline
+                      :icon="currentActiveType + item"
+                      width="20px"
+                      height="20px"
+                    />
+                  </li>
+                </ul>
+                <el-empty
+                  v-show="pageList.length === 0"
+                  :description="`${filterValue} 图标不存在`"
+                  :image-size="60"
+                />
+              </el-scrollbar>
+            </el-tab-pane>
+          </el-tabs>
+
+          <div
+            class="w-full h-9 flex items-center overflow-auto border-t border-[#e5e7eb]"
+          >
+            <el-pagination
+              class="flex-auto ml-2"
+              :total="totalPage"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :pager-count="5"
+              layout="pager"
+              background
+              size="small"
+              @current-change="onCurrentChange"
+            />
+            <el-button
+              class="justify-end mr-2 ml-2"
+              type="danger"
+              size="small"
+              text
+              bg
+              @click="onClear"
+            >
+              清空
+            </el-button>
+          </div>
+        </el-popover>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-item {
+  &:hover {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+    transition: all 0.4s;
+    transform: scaleX(1.05);
+  }
+}
+
+:deep(.el-tabs__nav-next) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: -5px 0 5px -6px #ccc;
+}
+
+:deep(.el-tabs__nav-prev) {
+  font-size: 15px;
+  line-height: 32px;
+  box-shadow: 5px 0 5px -6px #ccc;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0;
+}
+
+:deep(.el-tabs__item) {
+  height: 30px;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 30px;
+}
+
+:deep(.el-tabs__header),
+:deep(.el-tabs__nav-wrap) {
+  position: static;
+  margin: 0;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
+}
+
+:deep(.el-tabs__nav-wrap::after) {
+  height: 0;
+}
+
+:deep(.el-tabs__nav-wrap) {
+  padding: 0 24px;
+}
+
+:deep(.el-tabs__content) {
+  margin-top: 4px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/src/hooks.ts b/Yi.Pure.Vue3/src/components/ReIcon/src/hooks.ts
new file mode 100644
index 00000000..5a377dac
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/src/hooks.ts
@@ -0,0 +1,61 @@
+import type { iconType } from "./types";
+import { h, defineComponent, type Component } from "vue";
+import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
+
+/**
+ * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
+ * @see 点击查看文档图标篇 {@link https://pure-admin.github.io/pure-admin-doc/pages/icon/}
+ * @param icon 必传 图标
+ * @param attrs 可选 iconType 属性
+ * @returns Component
+ */
+export function useRenderIcon(icon: any, attrs?: iconType): Component {
+  // iconfont
+  const ifReg = /^IF-/;
+  // typeof icon === "function" 属于SVG
+  if (ifReg.test(icon)) {
+    // iconfont
+    const name = icon.split(ifReg)[1];
+    const iconName = name.slice(
+      0,
+      name.indexOf(" ") == -1 ? name.length : name.indexOf(" ")
+    );
+    const iconType = name.slice(name.indexOf(" ") + 1, name.length);
+    return defineComponent({
+      name: "FontIcon",
+      render() {
+        return h(FontIcon, {
+          icon: iconName,
+          iconType,
+          ...attrs
+        });
+      }
+    });
+  } else if (typeof icon === "function" || typeof icon?.render === "function") {
+    // svg
+    return attrs ? h(icon, { ...attrs }) : icon;
+  } else if (typeof icon === "object") {
+    return defineComponent({
+      name: "OfflineIcon",
+      render() {
+        return h(IconifyIconOffline, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
+  } else {
+    // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
+    return defineComponent({
+      name: "Icon",
+      render() {
+        const IconifyIcon =
+          icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
+        return h(IconifyIcon, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
+  }
+}
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/src/iconfont.ts b/Yi.Pure.Vue3/src/components/ReIcon/src/iconfont.ts
new file mode 100644
index 00000000..c1104519
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/src/iconfont.ts
@@ -0,0 +1,48 @@
+import { h, defineComponent } from "vue";
+
+// 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code）
+export default defineComponent({
+  name: "FontIcon",
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") {
+      return h(
+        "i",
+        {
+          class: "iconfont",
+          ...attrs
+        },
+        this.icon
+      );
+    } else if (
+      Object.keys(attrs).includes("svg") ||
+      attrs?.iconType === "svg"
+    ) {
+      return h(
+        "svg",
+        {
+          class: "icon-svg",
+          "aria-hidden": true
+        },
+        {
+          default: () => [
+            h("use", {
+              "xlink:href": `#${this.icon}`
+            })
+          ]
+        }
+      );
+    } else {
+      return h("i", {
+        class: `iconfont ${this.icon}`,
+        ...attrs
+      });
+    }
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOffline.ts b/Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOffline.ts
new file mode 100644
index 00000000..b47aa99a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOffline.ts
@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
+
+// Iconify Icon在Vue里本地使用（用于内网环境）
+export default defineComponent({
+  name: "IconifyIconOffline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      default: null
+    }
+  },
+  render() {
+    if (typeof this.icon === "object") addIcon(this.icon, this.icon);
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: this.icon,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOnline.ts b/Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOnline.ts
new file mode 100644
index 00000000..a5f5822d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/src/iconifyIconOnline.ts
@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon } from "@iconify/vue";
+
+// Iconify Icon在Vue里在线使用（用于外网环境）
+export default defineComponent({
+  name: "IconifyIconOnline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.icon}`,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/src/offlineIcon.ts b/Yi.Pure.Vue3/src/components/ReIcon/src/offlineIcon.ts
new file mode 100644
index 00000000..2283a55d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/src/offlineIcon.ts
@@ -0,0 +1,70 @@
+// 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+import { addIcon } from "@iconify/vue/dist/offline";
+
+// 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
+// @iconify-icons/ep
+import Menu from "@iconify-icons/ep/menu";
+import Edit from "@iconify-icons/ep/edit";
+import SetUp from "@iconify-icons/ep/set-up";
+import Guide from "@iconify-icons/ep/guide";
+import Monitor from "@iconify-icons/ep/monitor";
+import Lollipop from "@iconify-icons/ep/lollipop";
+import Histogram from "@iconify-icons/ep/histogram";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+addIcon("ep:menu", Menu);
+addIcon("ep:edit", Edit);
+addIcon("ep:set-up", SetUp);
+addIcon("ep:guide", Guide);
+addIcon("ep:monitor", Monitor);
+addIcon("ep:lollipop", Lollipop);
+addIcon("ep:histogram", Histogram);
+addIcon("ep:home-filled", HomeFilled);
+// @iconify-icons/ri
+import Tag from "@iconify-icons/ri/bookmark-2-line";
+import Ppt from "@iconify-icons/ri/file-ppt-2-line";
+import Card from "@iconify-icons/ri/bank-card-line";
+import Role from "@iconify-icons/ri/admin-fill";
+import Info from "@iconify-icons/ri/file-info-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
+import Table from "@iconify-icons/ri/table-line";
+import Links from "@iconify-icons/ri/links-fill";
+import Search from "@iconify-icons/ri/search-line";
+import FlUser from "@iconify-icons/ri/admin-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import MindMap from "@iconify-icons/ri/mind-map";
+import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
+import LoginLog from "@iconify-icons/ri/window-line";
+import Artboard from "@iconify-icons/ri/artboard-line";
+import SystemLog from "@iconify-icons/ri/file-search-line";
+import ListCheck from "@iconify-icons/ri/list-check";
+import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
+import OnlineUser from "@iconify-icons/ri/user-voice-line";
+import EditBoxLine from "@iconify-icons/ri/edit-box-line";
+import OperationLog from "@iconify-icons/ri/history-fill";
+import InformationLine from "@iconify-icons/ri/information-line";
+import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
+import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
+addIcon("ri:bookmark-2-line", Tag);
+addIcon("ri:file-ppt-2-line", Ppt);
+addIcon("ri:bank-card-line", Card);
+addIcon("ri:admin-fill", Role);
+addIcon("ri:file-info-line", Info);
+addIcon("ri:git-branch-line", Dept);
+addIcon("ri:links-fill", Links);
+addIcon("ri:table-line", Table);
+addIcon("ri:search-line", Search);
+addIcon("ri:admin-line", FlUser);
+addIcon("ri:settings-3-line", Setting);
+addIcon("ri:mind-map", MindMap);
+addIcon("ri:bar-chart-horizontal-line", BarChart);
+addIcon("ri:window-line", LoginLog);
+addIcon("ri:file-search-line", SystemLog);
+addIcon("ri:artboard-line", Artboard);
+addIcon("ri:list-check", ListCheck);
+addIcon("ri:ubuntu-fill", UbuntuFill);
+addIcon("ri:user-voice-line", OnlineUser);
+addIcon("ri:edit-box-line", EditBoxLine);
+addIcon("ri:history-fill", OperationLog);
+addIcon("ri:information-line", InformationLine);
+addIcon("ri:terminal-window-line", TerminalWindowLine);
+addIcon("ri:checkbox-circle-line", CheckboxCircleLine);
diff --git a/Yi.Pure.Vue3/src/components/ReIcon/src/types.ts b/Yi.Pure.Vue3/src/components/ReIcon/src/types.ts
new file mode 100644
index 00000000..000bdc59
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReIcon/src/types.ts
@@ -0,0 +1,20 @@
+export interface iconType {
+  // iconify (https://docs.iconify.design/icon-components/vue/#properties)
+  inline?: boolean;
+  width?: string | number;
+  height?: string | number;
+  horizontalFlip?: boolean;
+  verticalFlip?: boolean;
+  flip?: string;
+  rotate?: number | string;
+  color?: string;
+  horizontalAlign?: boolean;
+  verticalAlign?: boolean;
+  align?: string;
+  onLoad?: Function;
+  includes?: Function;
+  // svg 需要什么SVG属性自行添加
+  fill?: string;
+  // all icon
+  style?: object;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReImageVerify/index.ts b/Yi.Pure.Vue3/src/components/ReImageVerify/index.ts
new file mode 100644
index 00000000..4215c52b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReImageVerify/index.ts
@@ -0,0 +1,7 @@
+import reImageVerify from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 图形验证码组件 */
+export const ReImageVerify = withInstall(reImageVerify);
+
+export default ReImageVerify;
diff --git a/Yi.Pure.Vue3/src/components/ReImageVerify/src/hooks.ts b/Yi.Pure.Vue3/src/components/ReImageVerify/src/hooks.ts
new file mode 100644
index 00000000..71fcdfc2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReImageVerify/src/hooks.ts
@@ -0,0 +1,85 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export const useImageVerify = (width = 120, height = 40) => {
+  const domRef = ref<HTMLCanvasElement>();
+  const imgCode = ref("");
+
+  function setImgCode(code: string) {
+    imgCode.value = code;
+  }
+
+  function getImgCode() {
+    if (!domRef.value) return;
+    imgCode.value = draw(domRef.value, width, height);
+  }
+
+  onMounted(() => {
+    getImgCode();
+  });
+
+  return {
+    domRef,
+    imgCode,
+    setImgCode,
+    getImgCode
+  };
+};
+
+function randomNum(min: number, max: number) {
+  const num = Math.floor(Math.random() * (max - min) + min);
+  return num;
+}
+
+function randomColor(min: number, max: number) {
+  const r = randomNum(min, max);
+  const g = randomNum(min, max);
+  const b = randomNum(min, max);
+  return `rgb(${r},${g},${b})`;
+}
+
+function draw(dom: HTMLCanvasElement, width: number, height: number) {
+  let imgCode = "";
+
+  const NUMBER_STRING = "0123456789";
+
+  const ctx = dom.getContext("2d");
+  if (!ctx) return imgCode;
+
+  ctx.fillStyle = randomColor(180, 230);
+  ctx.fillRect(0, 0, width, height);
+  for (let i = 0; i < 4; i += 1) {
+    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
+    imgCode += text;
+    const fontSize = randomNum(18, 41);
+    const deg = randomNum(-30, 30);
+    ctx.font = `${fontSize}px Simhei`;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = randomColor(80, 150);
+    ctx.save();
+    ctx.translate(30 * i + 15, 15);
+    ctx.rotate((deg * Math.PI) / 180);
+    ctx.fillText(text, -15 + 5, -15);
+    ctx.restore();
+  }
+  for (let i = 0; i < 5; i += 1) {
+    ctx.beginPath();
+    ctx.moveTo(randomNum(0, width), randomNum(0, height));
+    ctx.lineTo(randomNum(0, width), randomNum(0, height));
+    ctx.strokeStyle = randomColor(180, 230);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  for (let i = 0; i < 41; i += 1) {
+    ctx.beginPath();
+    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.fillStyle = randomColor(150, 200);
+    ctx.fill();
+  }
+  return imgCode;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReImageVerify/src/index.vue b/Yi.Pure.Vue3/src/components/ReImageVerify/src/index.vue
new file mode 100644
index 00000000..03d0662a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReImageVerify/src/index.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { watch } from "vue";
+import { useImageVerify } from "./hooks";
+
+defineOptions({
+  name: "ReImageVerify"
+});
+
+interface Props {
+  code?: string;
+}
+
+interface Emits {
+  (e: "update:code", code: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ""
+});
+
+const emit = defineEmits<Emits>();
+
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue);
+  }
+);
+watch(imgCode, newValue => {
+  emit("update:code", newValue);
+});
+
+defineExpose({ getImgCode });
+</script>
+
+<template>
+  <canvas
+    ref="domRef"
+    width="120"
+    height="40"
+    class="cursor-pointer"
+    @click="getImgCode"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/components/ReMap/index.ts b/Yi.Pure.Vue3/src/components/ReMap/index.ts
new file mode 100644
index 00000000..4bcd8289
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReMap/index.ts
@@ -0,0 +1,7 @@
+import amap from "./src/Amap.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 高德地图组件 */
+export const Amap = withInstall(amap);
+
+export default Amap;
diff --git a/Yi.Pure.Vue3/src/components/ReMap/src/Amap.vue b/Yi.Pure.Vue3/src/components/ReMap/src/Amap.vue
new file mode 100644
index 00000000..8f8bd5bf
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReMap/src/Amap.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from "vue";
+import { deviceDetection } from "@pureadmin/utils";
+import AMapLoader from "@amap/amap-jsapi-loader";
+import { mapJson } from "@/api/mock";
+import car from "@/assets/car.png";
+
+export interface MapConfigureInter {
+  on: Fn;
+  destroy?: Fn;
+  clearEvents?: Fn;
+  addControl?: Fn;
+  setCenter?: Fn;
+  setZoom?: Fn;
+  plugin?: Fn;
+}
+
+defineOptions({
+  name: "Amap"
+});
+
+let MarkerCluster;
+let map: MapConfigureInter;
+
+const instance = getCurrentInstance();
+
+const mapSet = reactive({
+  loading: deviceDetection() ? false : true
+});
+
+// 地图创建完成(动画关闭)
+const complete = (): void => {
+  if (map) {
+    map.on("complete", () => {
+      mapSet.loading = false;
+    });
+  }
+};
+
+onBeforeMount(() => {
+  if (!instance) return;
+  const { MapConfigure } = instance.appContext.config.globalProperties.$config;
+  const { options } = MapConfigure;
+
+  AMapLoader.load({
+    key: MapConfigure.amapKey,
+    version: "2.0",
+    plugins: ["AMap.MarkerCluster"]
+  })
+    .then(AMap => {
+      // 创建地图实例
+      map = new AMap.Map(instance.refs.mapview, options);
+
+      //地图中添加地图操作ToolBar插件
+      map.plugin(["AMap.ToolBar", "AMap.MapType"], () => {
+        map.addControl(new AMap.ToolBar());
+        //地图类型切换
+        map.addControl(
+          new AMap.MapType({
+            defaultType: 0
+          })
+        );
+      });
+
+      MarkerCluster = new AMap.MarkerCluster(map, [], {
+        // 聚合网格像素大小
+        gridSize: 80,
+        maxZoom: 14,
+        renderMarker(ctx) {
+          const { marker, data } = ctx;
+          if (Array.isArray(data) && data[0]) {
+            const { driver, plateNumber, orientation } = data[0];
+            const content = `<img style="transform: scale(1) rotate(${
+              360 - Number(orientation)
+            }deg);" src='${car}' />`;
+            marker.setContent(content);
+            marker.setLabel({
+              direction: "bottom",
+              //设置文本标注偏移量
+              offset: new AMap.Pixel(-4, 0),
+              //设置文本标注内容
+              content: `<div> ${plateNumber}(${driver})</div>`
+            });
+            marker.setOffset(new AMap.Pixel(-18, -10));
+            marker.on("click", ({ lnglat }) => {
+              map.setZoom(13); //设置地图层级
+              map.setCenter(lnglat);
+            });
+          }
+        }
+      });
+
+      // 获取模拟车辆信息
+      mapJson()
+        .then(({ data }) => {
+          const points: object = data.map(v => {
+            return {
+              lnglat: [v.lng, v.lat],
+              ...v
+            };
+          });
+          if (MarkerCluster) MarkerCluster.setData(points);
+        })
+        .catch(err => {
+          console.log("err:", err);
+        });
+
+      complete();
+    })
+    .catch(() => {
+      mapSet.loading = false;
+      throw "地图加载失败，请重新加载";
+    });
+});
+
+onUnmounted(() => {
+  if (map) {
+    // 销毁地图实例
+    map.destroy() && map.clearEvents("click");
+  }
+});
+</script>
+
+<template>
+  <div id="mapview" ref="mapview" v-loading="mapSet.loading" />
+</template>
+
+<style lang="scss" scoped>
+#mapview {
+  height: calc(100vh - 86px);
+}
+
+:deep(.amap-marker-label) {
+  border: none !important;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/components/RePerms/index.ts b/Yi.Pure.Vue3/src/components/RePerms/index.ts
new file mode 100644
index 00000000..3701c3c1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/RePerms/index.ts
@@ -0,0 +1,5 @@
+import perms from "./src/perms";
+
+const Perms = perms;
+
+export { Perms };
diff --git a/Yi.Pure.Vue3/src/components/RePerms/src/perms.tsx b/Yi.Pure.Vue3/src/components/RePerms/src/perms.tsx
new file mode 100644
index 00000000..da01bc16
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/RePerms/src/perms.tsx
@@ -0,0 +1,20 @@
+import { defineComponent, Fragment } from "vue";
+import { hasPerms } from "@/utils/auth";
+
+export default defineComponent({
+  name: "Perms",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!slots) return null;
+      return hasPerms(props.value) ? (
+        <Fragment>{slots.default?.()}</Fragment>
+      ) : null;
+    };
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/RePureTableBar/index.ts b/Yi.Pure.Vue3/src/components/RePureTableBar/index.ts
new file mode 100644
index 00000000..31b8a16e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/RePureTableBar/index.ts
@@ -0,0 +1,5 @@
+import pureTableBar from "./src/bar";
+import { withInstall } from "@pureadmin/utils";
+
+/** 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
+export const PureTableBar = withInstall(pureTableBar);
diff --git a/Yi.Pure.Vue3/src/components/RePureTableBar/src/bar.tsx b/Yi.Pure.Vue3/src/components/RePureTableBar/src/bar.tsx
new file mode 100644
index 00000000..5367c6b3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/RePureTableBar/src/bar.tsx
@@ -0,0 +1,393 @@
+import Sortable from "sortablejs";
+import { transformI18n } from "@/plugins/i18n";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import {
+  type PropType,
+  ref,
+  unref,
+  computed,
+  nextTick,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+import {
+  delay,
+  cloneDeep,
+  isBoolean,
+  isFunction,
+  getKeyList
+} from "@pureadmin/utils";
+
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import DragIcon from "@/assets/table-bar/drag.svg?component";
+import ExpandIcon from "@/assets/table-bar/expand.svg?component";
+import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
+import SettingIcon from "@/assets/table-bar/settings.svg?component";
+import CollapseIcon from "@/assets/table-bar/collapse.svg?component";
+
+const props = {
+  /** 头部最左边的标题 */
+  title: {
+    type: String,
+    default: "列表"
+  },
+  /** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */
+  tableRef: {
+    type: Object as PropType<any>
+  },
+  /** 需要展示的列 */
+  columns: {
+    type: Array as PropType<TableColumnList>,
+    default: () => []
+  },
+  isExpandAll: {
+    type: Boolean,
+    default: true
+  },
+  tableKey: {
+    type: [String, Number] as PropType<string | number>,
+    default: "0"
+  }
+};
+
+export default defineComponent({
+  name: "PureTableBar",
+  props,
+  emits: ["refresh"],
+  setup(props, { emit, slots, attrs }) {
+    const size = ref("default");
+    const loading = ref(false);
+    const checkAll = ref(true);
+    const isFullscreen = ref(false);
+    const isIndeterminate = ref(false);
+    const instance = getCurrentInstance()!;
+    const isExpandAll = ref(props.isExpandAll);
+    const filterColumns = cloneDeep(props?.columns).filter(column =>
+      isBoolean(column?.hide)
+        ? !column.hide
+        : !(isFunction(column?.hide) && column?.hide())
+    );
+    let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
+    const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
+    const dynamicColumns = ref(cloneDeep(props?.columns));
+
+    const getDropdownItemStyle = computed(() => {
+      return s => {
+        return {
+          background:
+            s === size.value ? useEpThemeStoreHook().epThemeColor : "",
+          color: s === size.value ? "#fff" : "var(--el-text-color-primary)"
+        };
+      };
+    });
+
+    const iconClass = computed(() => {
+      return [
+        "text-black",
+        "dark:text-white",
+        "duration-100",
+        "hover:!text-primary",
+        "cursor-pointer",
+        "outline-none"
+      ];
+    });
+
+    const topClass = computed(() => {
+      return [
+        "flex",
+        "justify-between",
+        "pt-[3px]",
+        "px-[11px]",
+        "border-b-[1px]",
+        "border-solid",
+        "border-[#dcdfe6]",
+        "dark:border-[#303030]"
+      ];
+    });
+
+    function onReFresh() {
+      loading.value = true;
+      emit("refresh");
+      delay(500).then(() => (loading.value = false));
+    }
+
+    function onExpand() {
+      isExpandAll.value = !isExpandAll.value;
+      toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
+    }
+
+    function toggleRowExpansionAll(data, isExpansion) {
+      data.forEach(item => {
+        props.tableRef.toggleRowExpansion(item, isExpansion);
+        if (item.children !== undefined && item.children !== null) {
+          toggleRowExpansionAll(item.children, isExpansion);
+        }
+      });
+    }
+
+    function handleCheckAllChange(val: boolean) {
+      checkedColumns.value = val ? checkColumnList : [];
+      isIndeterminate.value = false;
+      dynamicColumns.value.map(column =>
+        val ? (column.hide = false) : (column.hide = true)
+      );
+    }
+
+    function handleCheckedColumnsChange(value: string[]) {
+      checkedColumns.value = value;
+      const checkedCount = value.length;
+      checkAll.value = checkedCount === checkColumnList.length;
+      isIndeterminate.value =
+        checkedCount > 0 && checkedCount < checkColumnList.length;
+    }
+
+    function handleCheckColumnListChange(val: boolean, label: string) {
+      dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].hide = !val;
+    }
+
+    async function onReset() {
+      checkAll.value = true;
+      isIndeterminate.value = false;
+      dynamicColumns.value = cloneDeep(props?.columns);
+      checkColumnList = [];
+      checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
+      checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
+    }
+
+    const dropdown = {
+      dropdown: () => (
+        <el-dropdown-menu class="translation">
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("large")}
+            onClick={() => (size.value = "large")}
+          >
+            宽松
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("default")}
+            onClick={() => (size.value = "default")}
+          >
+            默认
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("small")}
+            onClick={() => (size.value = "small")}
+          >
+            紧凑
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      )
+    };
+
+    /** 列展示拖拽排序 */
+    const rowDrop = (event: { preventDefault: () => void }) => {
+      event.preventDefault();
+      nextTick(() => {
+        const wrapper: HTMLElement = (
+          instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any
+        ).$el.firstElementChild;
+        Sortable.create(wrapper, {
+          animation: 300,
+          handle: ".drag-btn",
+          onEnd: ({ newIndex, oldIndex, item }) => {
+            const targetThElem = item;
+            const wrapperElem = targetThElem.parentNode as HTMLElement;
+            const oldColumn = dynamicColumns.value[oldIndex];
+            const newColumn = dynamicColumns.value[newIndex];
+            if (oldColumn?.fixed || newColumn?.fixed) {
+              // 当前列存在fixed属性 则不可拖拽
+              const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+              if (newIndex > oldIndex) {
+                wrapperElem.insertBefore(targetThElem, oldThElem);
+              } else {
+                wrapperElem.insertBefore(
+                  targetThElem,
+                  oldThElem ? oldThElem.nextElementSibling : oldThElem
+                );
+              }
+              return;
+            }
+            const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
+            dynamicColumns.value.splice(newIndex, 0, currentRow);
+          }
+        });
+      });
+    };
+
+    const isFixedColumn = (label: string) => {
+      return dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].fixed
+        ? true
+        : false;
+    };
+
+    const rendTippyProps = (content: string) => {
+      // https://vue-tippy.netlify.app/props
+      return {
+        content,
+        offset: [0, 18],
+        duration: [300, 0],
+        followCursor: true,
+        hideOnClick: "toggle"
+      };
+    };
+
+    const reference = {
+      reference: () => (
+        <SettingIcon
+          class={["w-[16px]", iconClass.value]}
+          v-tippy={rendTippyProps("列设置")}
+        />
+      )
+    };
+
+    return () => (
+      <>
+        <div
+          {...attrs}
+          class={[
+            "w-[99/100]",
+            "px-2",
+            "pb-2",
+            "bg-bg_color",
+            isFullscreen.value
+              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              : "mt-2"
+          ]}
+        >
+          <div class="flex justify-between w-full h-[60px] p-4">
+            {slots?.title ? (
+              slots.title()
+            ) : (
+              <p class="font-bold truncate">{props.title}</p>
+            )}
+            <div class="flex items-center justify-around">
+              {slots?.buttons ? (
+                <div class="flex mr-4">{slots.buttons()}</div>
+              ) : null}
+              {props.tableRef?.size ? (
+                <>
+                  <ExpandIcon
+                    class={["w-[16px]", iconClass.value]}
+                    style={{
+                      transform: isExpandAll.value ? "none" : "rotate(-90deg)"
+                    }}
+                    v-tippy={rendTippyProps(
+                      isExpandAll.value ? "折叠" : "展开"
+                    )}
+                    onClick={() => onExpand()}
+                  />
+                  <el-divider direction="vertical" />
+                </>
+              ) : null}
+              <RefreshIcon
+                class={[
+                  "w-[16px]",
+                  iconClass.value,
+                  loading.value ? "animate-spin" : ""
+                ]}
+                v-tippy={rendTippyProps("刷新")}
+                onClick={() => onReFresh()}
+              />
+              <el-divider direction="vertical" />
+              <el-dropdown
+                v-slots={dropdown}
+                trigger="click"
+                v-tippy={rendTippyProps("密度")}
+              >
+                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+              </el-dropdown>
+              <el-divider direction="vertical" />
+
+              <el-popover
+                v-slots={reference}
+                placement="bottom-start"
+                popper-style={{ padding: 0 }}
+                width="200"
+                trigger="click"
+              >
+                <div class={[topClass.value]}>
+                  <el-checkbox
+                    class="!-mr-1"
+                    label="列展示"
+                    v-model={checkAll.value}
+                    indeterminate={isIndeterminate.value}
+                    onChange={value => handleCheckAllChange(value)}
+                  />
+                  <el-button type="primary" link onClick={() => onReset()}>
+                    重置
+                  </el-button>
+                </div>
+
+                <div class="pt-[6px] pl-[11px]">
+                  <el-scrollbar max-height="36vh">
+                    <el-checkbox-group
+                      ref={`GroupRef${unref(props.tableKey)}`}
+                      modelValue={checkedColumns.value}
+                      onChange={value => handleCheckedColumnsChange(value)}
+                    >
+                      <el-space
+                        direction="vertical"
+                        alignment="flex-start"
+                        size={0}
+                      >
+                        {checkColumnList.map((item, index) => {
+                          return (
+                            <div class="flex items-center">
+                              <DragIcon
+                                class={[
+                                  "drag-btn w-[16px] mr-2",
+                                  isFixedColumn(item)
+                                    ? "!cursor-no-drop"
+                                    : "!cursor-grab"
+                                ]}
+                                onMouseenter={(event: {
+                                  preventDefault: () => void;
+                                }) => rowDrop(event)}
+                              />
+                              <el-checkbox
+                                key={index}
+                                label={item}
+                                value={item}
+                                onChange={value =>
+                                  handleCheckColumnListChange(value, item)
+                                }
+                              >
+                                <span
+                                  title={transformI18n(item)}
+                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                                >
+                                  {transformI18n(item)}
+                                </span>
+                              </el-checkbox>
+                            </div>
+                          );
+                        })}
+                      </el-space>
+                    </el-checkbox-group>
+                  </el-scrollbar>
+                </div>
+              </el-popover>
+              <el-divider direction="vertical" />
+
+              <iconifyIconOffline
+                class={["w-[16px]", iconClass.value]}
+                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
+                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+              />
+            </div>
+          </div>
+          {slots.default({
+            size: size.value,
+            dynamicColumns: dynamicColumns.value
+          })}
+        </div>
+      </>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReQrcode/index.ts b/Yi.Pure.Vue3/src/components/ReQrcode/index.ts
new file mode 100644
index 00000000..48037a8b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReQrcode/index.ts
@@ -0,0 +1,7 @@
+import reQrcode from "./src/index";
+import { withInstall } from "@pureadmin/utils";
+
+/** 二维码组件 */
+export const ReQrcode = withInstall(reQrcode);
+
+export default ReQrcode;
diff --git a/Yi.Pure.Vue3/src/components/ReQrcode/src/index.scss b/Yi.Pure.Vue3/src/components/ReQrcode/src/index.scss
new file mode 100644
index 00000000..66ff6348
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReQrcode/src/index.scss
@@ -0,0 +1,9 @@
+.qrcode {
+  &--disabled {
+    background: rgb(255 255 255 / 95%);
+
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}
diff --git a/Yi.Pure.Vue3/src/components/ReQrcode/src/index.tsx b/Yi.Pure.Vue3/src/components/ReQrcode/src/index.tsx
new file mode 100644
index 00000000..98127152
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReQrcode/src/index.tsx
@@ -0,0 +1,261 @@
+import {
+  type PropType,
+  ref,
+  unref,
+  watch,
+  nextTick,
+  computed,
+  defineComponent
+} from "vue";
+import "./index.scss";
+import propTypes from "@/utils/propTypes";
+import { isString, cloneDeep } from "@pureadmin/utils";
+import QRCode, { type QRCodeRenderersOptions } from "qrcode";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+
+interface QrcodeLogo {
+  src?: string;
+  logoSize?: number;
+  bgColor?: string;
+  borderSize?: number;
+  crossOrigin?: string;
+  borderRadius?: number;
+  logoRadius?: number;
+}
+
+const props = {
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string
+    .validate((v: string) => ["canvas", "img"].includes(v))
+    .def("canvas"),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: (): QRCodeRenderersOptions => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: (): QrcodeLogo | string => ""
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def("")
+};
+
+export default defineComponent({
+  name: "ReQrcode",
+  props,
+  emits: ["done", "click", "disabled-click"],
+  setup(props, { emit }) {
+    const { toCanvas, toDataURL } = QRCode;
+    const loading = ref(true);
+    const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null);
+    const renderText = computed(() => String(props.text));
+    const wrapStyle = computed(() => {
+      return {
+        width: props.width + "px",
+        height: props.width + "px"
+      };
+    });
+    const initQrcode = async () => {
+      await nextTick();
+      const options = cloneDeep(props.options || {});
+      if (props.tag === "canvas") {
+        // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+        options.errorCorrectionLevel =
+          options.errorCorrectionLevel ||
+          getErrorCorrectionLevel(unref(renderText));
+        const _width: number = await getOriginWidth(unref(renderText), options);
+        options.scale =
+          props.width === 0 ? undefined : (props.width / _width) * 4;
+        const canvasRef: any = await toCanvas(
+          unref(wrapRef) as HTMLCanvasElement,
+          unref(renderText),
+          options
+        );
+        if (props.logo) {
+          const url = await createLogoCode(canvasRef);
+          emit("done", url);
+          loading.value = false;
+        } else {
+          emit("done", canvasRef.toDataURL());
+          loading.value = false;
+        }
+      } else {
+        const url = await toDataURL(renderText.value, {
+          errorCorrectionLevel: "H",
+          width: props.width,
+          ...options
+        });
+        (unref(wrapRef) as any).src = url;
+        emit("done", url);
+        loading.value = false;
+      }
+    };
+    watch(
+      () => renderText.value,
+      val => {
+        if (!val) return;
+        initQrcode();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+      const canvasWidth = canvasRef.width;
+      const logoOptions: QrcodeLogo = Object.assign(
+        {
+          logoSize: 0.15,
+          bgColor: "#ffffff",
+          borderSize: 0.05,
+          crossOrigin: "anonymous",
+          borderRadius: 8,
+          logoRadius: 0
+        },
+        isString(props.logo) ? {} : props.logo
+      );
+      const {
+        logoSize = 0.15,
+        bgColor = "#ffffff",
+        borderSize = 0.05,
+        crossOrigin = "anonymous",
+        borderRadius = 8,
+        logoRadius = 0
+      } = logoOptions;
+      const logoSrc = isString(props.logo) ? props.logo : props.logo.src;
+      const logoWidth = canvasWidth * logoSize;
+      const logoXY = (canvasWidth * (1 - logoSize)) / 2;
+      const logoBgWidth = canvasWidth * (logoSize + borderSize);
+      const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
+      const ctx = canvasRef.getContext("2d");
+      if (!ctx) return;
+      // logo 底色
+      canvasRoundRect(ctx)(
+        logoBgXY,
+        logoBgXY,
+        logoBgWidth,
+        logoBgWidth,
+        borderRadius
+      );
+      ctx.fillStyle = bgColor;
+      ctx.fill();
+      // logo
+      const image = new Image();
+      if (crossOrigin || logoRadius) {
+        image.setAttribute("crossOrigin", crossOrigin);
+      }
+      (image as any).src = logoSrc;
+      // 使用image绘制可以避免某些跨域情况
+      const drawLogoWithImage = (image: HTMLImageElement) => {
+        ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+      };
+      // 使用canvas绘制以获得更多的功能
+      const drawLogoWithCanvas = (image: HTMLImageElement) => {
+        const canvasImage = document.createElement("canvas");
+        canvasImage.width = logoXY + logoWidth;
+        canvasImage.height = logoXY + logoWidth;
+        const imageCanvas = canvasImage.getContext("2d");
+        if (!imageCanvas || !ctx) return;
+        imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+        canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
+        if (!ctx) return;
+        const fillStyle = ctx.createPattern(canvasImage, "no-repeat");
+        if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fill();
+        }
+      };
+      // 将 logo绘制到 canvas上
+      return new Promise((resolve: any) => {
+        image.onload = () => {
+          logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
+          resolve(canvasRef.toDataURL());
+        };
+      });
+    };
+    // 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+    const getOriginWidth = async (
+      content: string,
+      options: QRCodeRenderersOptions
+    ) => {
+      const _canvas = document.createElement("canvas");
+      await toCanvas(_canvas, content, options);
+      return _canvas.width;
+    };
+    // 对于内容少的QrCode，增大容错率
+    const getErrorCorrectionLevel = (content: string) => {
+      if (content.length > 36) {
+        return "M";
+      } else if (content.length > 16) {
+        return "Q";
+      } else {
+        return "H";
+      }
+    };
+    // 用于绘制圆角
+    const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+      return (x: number, y: number, w: number, h: number, r: number) => {
+        const minSize = Math.min(w, h);
+        if (r > minSize / 2) {
+          r = minSize / 2;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        return ctx;
+      };
+    };
+    const clickCode = () => {
+      emit("click");
+    };
+    const disabledClick = () => {
+      emit("disabled-click");
+    };
+    return () => (
+      <>
+        <div
+          v-loading={unref(loading)}
+          class="qrcode relative inline-block"
+          style={unref(wrapStyle)}
+        >
+          {props.tag === "canvas" ? (
+            <canvas ref={wrapRef} onClick={clickCode}></canvas>
+          ) : (
+            <img ref={wrapRef} onClick={clickCode}></img>
+          )}
+          {props.disabled && (
+            <div
+              class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
+              onClick={disabledClick}
+            >
+              <div class="absolute top-[50%] left-[50%] font-bold">
+                <iconify-icon-offline
+                  class="cursor-pointer"
+                  icon={RefreshRight}
+                  width="30"
+                  color="var(--el-color-primary)"
+                />
+                <div>{props.disabledText}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReSeamlessScroll/index.ts b/Yi.Pure.Vue3/src/components/ReSeamlessScroll/index.ts
new file mode 100644
index 00000000..2d3766a9
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSeamlessScroll/index.ts
@@ -0,0 +1,7 @@
+import reSeamlessScroll from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 无缝滚动组件 */
+export const ReSeamlessScroll = withInstall(reSeamlessScroll);
+
+export default ReSeamlessScroll;
diff --git a/Yi.Pure.Vue3/src/components/ReSeamlessScroll/src/index.vue b/Yi.Pure.Vue3/src/components/ReSeamlessScroll/src/index.vue
new file mode 100644
index 00000000..37dda0ff
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSeamlessScroll/src/index.vue
@@ -0,0 +1,538 @@
+<script setup lang="ts">
+import {
+  type PropType,
+  type CSSProperties,
+  ref,
+  unref,
+  nextTick,
+  computed
+} from "vue";
+import {
+  tryOnMounted,
+  tryOnUnmounted,
+  templateRef,
+  useDebounceFn
+} from "@vueuse/core";
+import * as utilsMethods from "./utils";
+const { animationFrame, copyObj } = utilsMethods;
+animationFrame();
+
+defineOptions({
+  name: "ReSeamlessScroll"
+});
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<unknown>
+  },
+  classOption: {
+    type: Object as PropType<unknown>
+  }
+});
+
+const emit = defineEmits<{
+  (e: "scrollEnd"): void;
+}>();
+
+const xPos = ref<number>(0);
+const yPos = ref<number>(0);
+const delay = ref<number>(0);
+const height = ref<number>(0);
+// 外容器宽度
+const width = ref<number>(0);
+// 内容实际宽度
+const realBoxWidth = ref<number>(0);
+const realBoxHeight = ref<number>(0);
+const copyHtml = ref("");
+// single 单步滚动的定时器
+let singleWaitTime = null;
+// move动画的animationFrame定时器
+let reqFrame = null;
+let startPos = null;
+//记录touchStart时候的posY
+let startPosY = null;
+//记录touchStart时候的posX
+let startPosX = null;
+// mouseenter mouseleave 控制scrollMove()的开关
+let isHover = false;
+let ease = "ease-in";
+
+if (props.classOption["key"] === undefined) {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.classOption["key"] = 0;
+}
+
+const wrap = templateRef<HTMLElement | null>(
+  `wrap${props.classOption["key"]}`,
+  null
+);
+const slotList = templateRef<HTMLElement | null>(
+  `slotList${props.classOption["key"]}`,
+  null
+);
+const realBox = templateRef<HTMLElement | null>(
+  `realBox${props.classOption["key"]}`,
+  null
+);
+
+const leftSwitchState = computed(() => {
+  return unref(xPos) < 0;
+});
+
+const rightSwitchState = computed(() => {
+  return Math.abs(unref(xPos)) < unref(realBoxWidth) - unref(width);
+});
+
+const defaultOption = computed(() => {
+  return {
+    //步长
+    step: 1,
+    //启动无缝滚动最小数据数
+    limitMoveNum: 5,
+    //是否启用鼠标hover控制
+    hoverStop: true,
+    // bottom 往下 top 往上(默认) left 向左 right 向右
+    direction: "top",
+    //开启移动端touch
+    openTouch: true,
+    //单条数据高度有值hoverStop关闭
+    singleHeight: 0,
+    //单条数据宽度有值hoverStop关闭
+    singleWidth: 0,
+    //单步停止等待时间
+    waitTime: 1000,
+    switchOffset: 30,
+    autoPlay: true,
+    navigation: false,
+    switchSingleStep: 134,
+    switchDelay: 400,
+    switchDisabledClass: "disabled",
+    // singleWidth/singleHeight 是否开启rem度量
+    isSingleRemUnit: false
+  };
+});
+
+const options = computed(() => {
+  // @ts-expect-error
+  return copyObj({}, unref(defaultOption), props.classOption);
+});
+
+const leftSwitchClass = computed(() => {
+  return unref(leftSwitchState) ? "" : unref(options).switchDisabledClass;
+});
+
+const rightSwitchClass = computed(() => {
+  return unref(rightSwitchState) ? "" : unref(options).switchDisabledClass;
+});
+
+const leftSwitch = computed((): CSSProperties => {
+  return {
+    position: "absolute",
+    margin: `${unref(height) / 2}px 0 0 -${unref(options).switchOffset}px`,
+    transform: "translate(-100%,-50%)"
+  };
+});
+
+const rightSwitch = computed((): CSSProperties => {
+  return {
+    position: "absolute",
+    margin: `${unref(height) / 2}px 0 0 ${
+      unref(width) + unref(options).switchOffset
+    }px`,
+    transform: "translateY(-50%)"
+  };
+});
+
+const isHorizontal = computed(() => {
+  return (
+    unref(options).direction !== "bottom" && unref(options).direction !== "top"
+  );
+});
+
+const float = computed((): CSSProperties => {
+  return unref(isHorizontal)
+    ? { float: "left", overflow: "hidden" }
+    : { overflow: "hidden" };
+});
+
+const pos = computed(() => {
+  return {
+    transform: `translate(${unref(xPos)}px,${unref(yPos)}px)`,
+    transition: `all ${ease} ${unref(delay)}ms`,
+    overflow: "hidden"
+  };
+});
+
+const navigation = computed(() => {
+  return unref(options).navigation;
+});
+
+const autoPlay = computed(() => {
+  if (unref(navigation)) return false;
+  return unref(options).autoPlay;
+});
+
+const scrollSwitch = computed(() => {
+  // 从 props 解构出来的 属性 不再具有响应性.
+  return (props.data as any).length >= unref(options).limitMoveNum;
+});
+
+const hoverStopSwitch = computed(() => {
+  return unref(options).hoverStop && unref(autoPlay) && unref(scrollSwitch);
+});
+
+const canTouchScroll = computed(() => {
+  return unref(options).openTouch;
+});
+
+const baseFontSize = computed(() => {
+  return unref(options).isSingleRemUnit
+    ? parseInt(window.getComputedStyle(document.documentElement, null).fontSize)
+    : 1;
+});
+
+const realSingleStopWidth = computed(() => {
+  return unref(options).singleWidth * unref(baseFontSize);
+});
+
+const realSingleStopHeight = computed(() => {
+  return unref(options).singleHeight * unref(baseFontSize);
+});
+
+const step = computed(() => {
+  let singleStep;
+  const step = unref(options).step;
+  if (unref(isHorizontal)) {
+    singleStep = unref(realSingleStopWidth);
+  } else {
+    singleStep = unref(realSingleStopHeight);
+  }
+  if (singleStep > 0 && singleStep % step > 0) {
+    throw "如果设置了单步滚动，step需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确";
+  }
+  return step;
+});
+
+function reset() {
+  xPos.value = 0;
+  yPos.value = 0;
+  scrollCancle();
+  scrollInitMove();
+}
+
+function leftSwitchClick() {
+  if (!unref(leftSwitchState)) return;
+  // 小于单步距离
+  if (Math.abs(unref(xPos)) < unref(options).switchSingleStep) {
+    xPos.value = 0;
+    return;
+  }
+  xPos.value += unref(options).switchSingleStep;
+}
+
+function rightSwitchClick() {
+  if (!unref(rightSwitchState)) return;
+  // 小于单步距离
+  if (
+    unref(realBoxWidth) - unref(width) + unref(xPos) <
+    unref(options).switchSingleStep
+  ) {
+    xPos.value = unref(width) - unref(realBoxWidth);
+    return;
+  }
+  xPos.value -= unref(options).switchSingleStep;
+}
+
+function scrollCancle() {
+  cancelAnimationFrame(reqFrame || "");
+}
+
+function touchStart(e) {
+  if (!unref(canTouchScroll)) return;
+  let timer;
+  //touches数组对象获得屏幕上所有的touch，取第一个touch
+  const touch = e.targetTouches[0];
+  const { waitTime, singleHeight, singleWidth } = unref(options);
+  //取第一个touch的坐标值
+  startPos = {
+    x: touch.pageX,
+    y: touch.pageY
+  };
+  //记录touchStart时候的posY
+  startPosY = unref(yPos);
+  //记录touchStart时候的posX
+  startPosX = unref(xPos);
+  if (!!singleHeight && !!singleWidth) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      scrollCancle();
+    }, waitTime + 20);
+  } else {
+    scrollCancle();
+  }
+}
+
+function touchMove(e) {
+  //当屏幕有多个touch或者页面被缩放过，就不执行move操作
+  if (
+    !unref(canTouchScroll) ||
+    e.targetTouches.length > 1 ||
+    (e.scale && e.scale !== 1)
+  )
+    return;
+  const touch = e.targetTouches[0];
+  const { direction } = unref(options);
+  const endPos = {
+    x: touch.pageX - startPos.x,
+    y: touch.pageY - startPos.y
+  };
+  //阻止触摸事件的默认行为，即阻止滚屏
+  e.preventDefault();
+  //dir，1表示纵向滑动，0为横向滑动
+  const dir = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;
+  if (
+    (dir === 1 && direction === "bottom") ||
+    (dir === 1 && direction === "top")
+  ) {
+    // 表示纵向滑动 && 运动方向为上下
+    yPos.value = startPosY + endPos.y;
+  } else if (
+    (dir === 0 && direction === "left") ||
+    (dir === 0 && direction === "right")
+  ) {
+    // 为横向滑动 && 运动方向为左右
+    xPos.value = startPosX + endPos.x;
+  }
+}
+
+function touchEnd() {
+  if (!unref(canTouchScroll)) return;
+
+  let timer: any;
+  const direction = unref(options).direction;
+  delay.value = 50;
+  if (direction === "top") {
+    if (unref(yPos) > 0) yPos.value = 0;
+  } else if (direction === "bottom") {
+    const h = (unref(realBoxHeight) / 2) * -1;
+    if (unref(yPos) < h) yPos.value = h;
+  } else if (direction === "left") {
+    if (unref(xPos) > 0) xPos.value = 0;
+  } else if (direction === "right") {
+    const w = unref(realBoxWidth) * -1;
+    if (unref(xPos) < w) xPos.value = w;
+  }
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    delay.value = 0;
+    scrollMove();
+  }, unref(delay));
+}
+
+function enter() {
+  if (unref(hoverStopSwitch)) scrollStopMove();
+}
+
+function leave() {
+  if (unref(hoverStopSwitch)) scrollStartMove();
+}
+
+function scrollMove() {
+  // 鼠标移入时拦截scrollMove()
+  if (isHover) return;
+  //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
+  // scrollCancle();
+  reqFrame = requestAnimationFrame(function () {
+    //实际高度
+    const h = unref(realBoxHeight) / 2;
+    //宽度
+    const w = unref(realBoxWidth) / 2;
+    const { direction, waitTime } = unref(options);
+    if (direction === "top") {
+      // 上
+      if (Math.abs(unref(yPos)) >= h) {
+        emit("scrollEnd");
+        yPos.value = 0;
+      }
+      yPos.value -= step.value;
+    } else if (direction === "bottom") {
+      // 下
+      if (unref(yPos) >= 0) {
+        emit("scrollEnd");
+        yPos.value = h * -1;
+      }
+      yPos.value += step.value;
+    } else if (direction === "left") {
+      // 左
+      if (Math.abs(unref(xPos)) >= w) {
+        emit("scrollEnd");
+        xPos.value = 0;
+      }
+      xPos.value -= step.value;
+    } else if (direction === "right") {
+      // 右
+      if (unref(xPos) >= 0) {
+        emit("scrollEnd");
+        xPos.value = w * -1;
+      }
+      xPos.value += step.value;
+    }
+    if (singleWaitTime) clearTimeout(singleWaitTime);
+    if (unref(realSingleStopHeight)) {
+      //是否启动了单行暂停配置
+      if (Math.abs(unref(yPos)) % unref(realSingleStopHeight) < unref(step)) {
+        // 符合条件暂停waitTime
+        singleWaitTime = setTimeout(() => {
+          scrollMove();
+        }, waitTime);
+      } else {
+        scrollMove();
+      }
+    } else if (unref(realSingleStopWidth)) {
+      if (Math.abs(unref(xPos)) % unref(realSingleStopWidth) < unref(step)) {
+        // 符合条件暂停waitTime
+        singleWaitTime = setTimeout(() => {
+          scrollMove();
+        }, waitTime);
+      } else {
+        scrollMove();
+      }
+    } else {
+      scrollMove();
+    }
+  });
+}
+
+function scrollInitMove() {
+  nextTick(() => {
+    const { switchDelay } = unref(options);
+    //清空copy
+    copyHtml.value = "";
+    if (unref(isHorizontal)) {
+      height.value = unref(wrap).offsetHeight;
+      width.value = unref(wrap).offsetWidth;
+      let slotListWidth = unref(slotList).offsetWidth;
+      // 水平滚动设置warp width
+      if (unref(autoPlay)) {
+        // 修正offsetWidth四舍五入
+        slotListWidth = slotListWidth * 2 + 1;
+      }
+      unref(realBox).style.width = slotListWidth + "px";
+      realBoxWidth.value = slotListWidth;
+    }
+
+    if (unref(autoPlay)) {
+      ease = "ease-in";
+      delay.value = 0;
+    } else {
+      ease = "linear";
+      delay.value = switchDelay;
+      return;
+    }
+
+    // 是否可以滚动判断
+    if (unref(scrollSwitch)) {
+      let timer;
+      if (timer) clearTimeout(timer);
+      copyHtml.value = unref(slotList).innerHTML;
+      setTimeout(() => {
+        realBoxHeight.value = unref(realBox)?.offsetHeight;
+        scrollMove();
+      }, 0);
+    } else {
+      scrollCancle();
+      yPos.value = xPos.value = 0;
+    }
+  });
+}
+
+function scrollStartMove() {
+  //开启scrollMove
+  isHover = false;
+  scrollMove();
+}
+
+function scrollStopMove() {
+  //关闭scrollMove
+  isHover = true;
+  // 防止频频hover进出单步滚动,导致定时器乱掉
+  if (singleWaitTime) clearTimeout(singleWaitTime);
+  scrollCancle();
+}
+
+// 鼠标滚轮事件
+function wheel(e) {
+  if (
+    unref(options).direction === "left" ||
+    unref(options).direction === "right"
+  )
+    return;
+  useDebounceFn(() => {
+    e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
+  }, 50)();
+}
+
+// watchEffect(() => {
+//   const watchData = data;
+//   if (!watchData) return;
+//   nextTick(() => {
+//     reset();
+//   });
+
+//   const watchAutoPlay = unref(autoPlay);
+//   if (watchAutoPlay) {
+//     reset();
+//   } else {
+//     scrollStopMove();
+//   }
+// });
+
+tryOnMounted(() => {
+  scrollInitMove();
+});
+
+tryOnUnmounted(() => {
+  scrollCancle();
+  clearTimeout(singleWaitTime);
+});
+
+defineExpose({
+  reset
+});
+</script>
+
+<template>
+  <div :ref="'wrap' + classOption['key']">
+    <div
+      v-if="navigation"
+      :style="leftSwitch"
+      :class="leftSwitchClass"
+      @click="leftSwitchClick"
+    >
+      <slot name="left-switch" />
+    </div>
+    <div
+      v-if="navigation"
+      :style="rightSwitch"
+      :class="rightSwitchClass"
+      @click="rightSwitchClick"
+    >
+      <slot name="right-switch" />
+    </div>
+    <div
+      :ref="'realBox' + classOption['key']"
+      :style="pos"
+      @mouseenter="enter"
+      @mouseleave="leave"
+      @touchstart.passive="touchStart"
+      @touchmove.passive="touchMove"
+      @touchend="touchEnd"
+      @mousewheel.passive="wheel"
+    >
+      <div :ref="'slotList' + classOption['key']" :style="float">
+        <slot />
+      </div>
+      <div :style="float" v-html="copyHtml" />
+    </div>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/components/ReSeamlessScroll/src/utils.ts b/Yi.Pure.Vue3/src/components/ReSeamlessScroll/src/utils.ts
new file mode 100644
index 00000000..47934c93
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSeamlessScroll/src/utils.ts
@@ -0,0 +1,115 @@
+/**
+ * @desc AnimationFrame简单兼容hack
+ */
+export const animationFrame = () => {
+  window.cancelAnimationFrame = (() => {
+    return (
+      window.cancelAnimationFrame ||
+      window.webkitCancelAnimationFrame ||
+      window.mozCancelAnimationFrame ||
+      window.oCancelAnimationFrame ||
+      window.msCancelAnimationFrame ||
+      function (id) {
+        return window.clearTimeout(id);
+      }
+    );
+  })();
+  window.requestAnimationFrame = (function () {
+    return (
+      window.requestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.oRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function (callback) {
+        return window.setTimeout(callback, 1000 / 60);
+      }
+    );
+  })();
+};
+
+/**
+ * @desc 判断数组是否相等
+ * @return {Boolean}
+ * @param arr1
+ * @param arr2
+ */
+export const arrayEqual = (arr1: Array<any>, arr2: Array<any>) => {
+  if (arr1 === arr2) return true;
+  if (arr1.length !== arr2.length) return false;
+  for (let i = 0; i < arr1.length; ++i) {
+    if (arr1[i] !== arr2[i]) return false;
+  }
+  return true;
+};
+
+/**
+ * @desc 深浅合并拷贝
+ */
+export function copyObj() {
+  if (!Array.isArray) {
+    // @ts-expect-error
+    Array.isArray = function (arg) {
+      return Object.prototype.toString.call(arg) === "[object Array]";
+    };
+  }
+  let name,
+    options,
+    src,
+    copy,
+    copyIsArray,
+    clone,
+    i = 1,
+    target = arguments[0] || {}, // 使用||运算符，排除隐式强制类型转换为false的数据类型
+    deep = false,
+    len = arguments.length;
+  if (typeof target === "boolean") {
+    deep = target;
+
+    target = arguments[1] || {};
+    i++;
+  }
+  if (typeof target !== "object" && typeof target !== "function") {
+    target = {};
+  }
+  // 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]，则直接返回target对象
+  if (i === len) {
+    return target;
+  }
+  for (; i < len; i++) {
+    //所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象
+
+    if ((options = arguments[i]) != null) {
+      // 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性
+      for (name in options) {
+        // src用于判断target对象是否存在name属性
+        src = target[name];
+        // 需要复制的属性当前源对象的name属性
+        copy = options[name];
+        // 判断copy是否是数组
+        copyIsArray = Array.isArray(copy);
+        // 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止
+        if (deep && copy && (typeof copy === "object" || copyIsArray)) {
+          if (copyIsArray) {
+            copyIsArray = false;
+            // 如果目标对象存在name属性且是一个数组
+            // 则使用目标对象的name属性，否则重新创建一个数组，用于复制
+            clone = src && Array.isArray(src) ? src : [];
+          } else {
+            // 如果目标对象存在name属性且是一个对象则使用目标对象的name属性，否则重新创建一个对象，用于复制
+            clone = src && typeof src === "object" ? src : {};
+          }
+          // 深复制，所以递归调用copyObject函数
+          // 返回值为target对象，即clone对象
+          // copy是一个源对象
+          // @ts-expect-error
+          target[name] = copyObj(deep, clone, copy);
+        } else if (copy !== undefined) {
+          // 浅复制，直接复制到target对象上
+          target[name] = copy;
+        }
+      }
+    }
+  }
+  return target;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSegmented/index.ts b/Yi.Pure.Vue3/src/components/ReSegmented/index.ts
new file mode 100644
index 00000000..de4253c4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSegmented/index.ts
@@ -0,0 +1,8 @@
+import reSegmented from "./src/index";
+import { withInstall } from "@pureadmin/utils";
+
+/** 分段控制器组件 */
+export const ReSegmented = withInstall(reSegmented);
+
+export default ReSegmented;
+export type { OptionsType } from "./src/type";
diff --git a/Yi.Pure.Vue3/src/components/ReSegmented/src/index.css b/Yi.Pure.Vue3/src/components/ReSegmented/src/index.css
new file mode 100644
index 00000000..503bbe43
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSegmented/src/index.css
@@ -0,0 +1,157 @@
+.pure-segmented {
+  --pure-control-padding-horizontal: 12px;
+  --pure-control-padding-horizontal-sm: 8px;
+  --pure-segmented-track-padding: 2px;
+  --pure-segmented-line-width: 1px;
+
+  --pure-segmented-border-radius-small: 4px;
+  --pure-segmented-border-radius-base: 6px;
+  --pure-segmented-border-radius-large: 8px;
+
+  box-sizing: border-box;
+  display: inline-block;
+  padding: var(--pure-segmented-track-padding);
+  font-size: var(--el-font-size-base);
+  color: rgba(0, 0, 0, 0.65);
+  background-color: rgb(0 0 0 / 4%);
+  border-radius: var(--pure-segmented-border-radius-base);
+}
+
+.pure-segmented-block {
+  display: flex;
+}
+
+.pure-segmented-block .pure-segmented-item {
+  flex: 1;
+  min-width: 0;
+}
+
+.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* small */
+.pure-segmented.pure-segmented--small {
+  border-radius: var(--pure-segmented-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item {
+  border-radius: var(--el-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal-sm) -
+        var(--pure-segmented-line-width)
+    );
+}
+
+/* large */
+.pure-segmented.pure-segmented--large {
+  border-radius: var(--pure-segmented-border-radius-large);
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item {
+  border-radius: calc(
+    var(--el-border-radius-base) + var(--el-border-radius-small)
+  );
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  font-size: var(--el-font-size-medium);
+}
+
+/* default */
+.pure-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--el-border-radius-base);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.pure-segmented .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: 0.1s;
+}
+
+.pure-segmented-group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+}
+
+.pure-segmented-item-selected {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: none;
+  width: 0;
+  height: 100%;
+  padding: 4px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 2px 8px -2px rgb(0 0 0 / 5%),
+    0 1px 4px -1px rgb(0 0 0 / 7%),
+    0 0 1px rgb(0 0 0 / 7%);
+  transition:
+    transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
+    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
+  will-change: transform, width;
+}
+
+.pure-segmented-item > input {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.pure-segmented-item-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pure-segmented-item-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.pure-segmented-item-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSegmented/src/index.tsx b/Yi.Pure.Vue3/src/components/ReSegmented/src/index.tsx
new file mode 100644
index 00000000..39580ed8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSegmented/src/index.tsx
@@ -0,0 +1,216 @@
+import "./index.css";
+import type { OptionsType } from "./type";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import {
+  useDark,
+  isNumber,
+  isFunction,
+  useResizeObserver
+} from "@pureadmin/utils";
+import {
+  type PropType,
+  h,
+  ref,
+  toRef,
+  watch,
+  nextTick,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+
+const props = {
+  options: {
+    type: Array<OptionsType>,
+    default: () => []
+  },
+  /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
+  modelValue: {
+    type: undefined,
+    require: false,
+    default: "0"
+  },
+  /** 将宽度调整为父元素宽度	 */
+  block: {
+    type: Boolean,
+    default: false
+  },
+  /** 控件尺寸 */
+  size: {
+    type: String as PropType<"small" | "default" | "large">
+  },
+  /** 是否全局禁用，默认 `false` */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
+  resize: {
+    type: Boolean,
+    default: false
+  }
+};
+
+export default defineComponent({
+  name: "ReSegmented",
+  props,
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit }) {
+    const width = ref(0);
+    const translateX = ref(0);
+    const { isDark } = useDark();
+    const initStatus = ref(false);
+    const curMouseActive = ref(-1);
+    const segmentedItembg = ref("");
+    const instance = getCurrentInstance()!;
+    const curIndex = isNumber(props.modelValue)
+      ? toRef(props, "modelValue")
+      : ref(0);
+
+    function handleChange({ option, index }, event: Event) {
+      if (props.disabled || option.disabled) return;
+      event.preventDefault();
+      isNumber(props.modelValue)
+        ? emit("update:modelValue", index)
+        : (curIndex.value = index);
+      segmentedItembg.value = "";
+      emit("change", { index, option });
+    }
+
+    function handleMouseenter({ option, index }, event: Event) {
+      if (props.disabled) return;
+      event.preventDefault();
+      curMouseActive.value = index;
+      if (option.disabled || curIndex.value === index) {
+        segmentedItembg.value = "";
+      } else {
+        segmentedItembg.value = isDark.value
+          ? "#1f1f1f"
+          : "rgba(0, 0, 0, 0.06)";
+      }
+    }
+
+    function handleMouseleave(_, event: Event) {
+      if (props.disabled) return;
+      event.preventDefault();
+      curMouseActive.value = -1;
+    }
+
+    function handleInit(index = curIndex.value) {
+      nextTick(() => {
+        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
+        if (!curLabelRef) return;
+        width.value = curLabelRef.clientWidth;
+        translateX.value = curLabelRef.offsetLeft;
+        initStatus.value = true;
+      });
+    }
+
+    function handleResizeInit() {
+      useResizeObserver(".pure-segmented", () => {
+        nextTick(() => {
+          handleInit(curIndex.value);
+        });
+      });
+    }
+
+    (props.block || props.resize) && handleResizeInit();
+
+    watch(
+      () => curIndex.value,
+      index => {
+        nextTick(() => {
+          handleInit(index);
+        });
+      },
+      {
+        immediate: true
+      }
+    );
+
+    watch(() => props.size, handleResizeInit, {
+      immediate: true
+    });
+
+    const rendLabel = () => {
+      return props.options.map((option, index) => {
+        return (
+          <label
+            ref={`labelRef${index}`}
+            class={[
+              "pure-segmented-item",
+              (props.disabled || option?.disabled) &&
+                "pure-segmented-item-disabled"
+            ]}
+            style={{
+              background:
+                curMouseActive.value === index ? segmentedItembg.value : "",
+              color: props.disabled
+                ? null
+                : !option.disabled &&
+                    (curIndex.value === index || curMouseActive.value === index)
+                  ? isDark.value
+                    ? "rgba(255, 255, 255, 0.85)"
+                    : "rgba(0,0,0,.88)"
+                  : ""
+            }}
+            onMouseenter={event => handleMouseenter({ option, index }, event)}
+            onMouseleave={event => handleMouseleave({ option, index }, event)}
+            onClick={event => handleChange({ option, index }, event)}
+          >
+            <input type="radio" name="segmented" />
+            <div
+              class="pure-segmented-item-label"
+              v-tippy={{
+                content: option?.tip,
+                zIndex: 41000
+              }}
+            >
+              {option.icon && !isFunction(option.label) ? (
+                <span
+                  class="pure-segmented-item-icon"
+                  style={{ marginRight: option.label ? "6px" : 0 }}
+                >
+                  {h(
+                    useRenderIcon(option.icon, {
+                      ...option?.iconAttrs
+                    })
+                  )}
+                </span>
+              ) : null}
+              {option.label ? (
+                isFunction(option.label) ? (
+                  h(option.label)
+                ) : (
+                  <span>{option.label}</span>
+                )
+              ) : null}
+            </div>
+          </label>
+        );
+      });
+    };
+
+    return () => (
+      <div
+        class={{
+          "pure-segmented": true,
+          "pure-segmented-block": props.block,
+          "pure-segmented--large": props.size === "large",
+          "pure-segmented--small": props.size === "small"
+        }}
+      >
+        <div class="pure-segmented-group">
+          <div
+            class="pure-segmented-item-selected"
+            style={{
+              width: `${width.value}px`,
+              transform: `translateX(${translateX.value}px)`,
+              display: initStatus.value ? "block" : "none"
+            }}
+          ></div>
+          {rendLabel()}
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReSegmented/src/type.ts b/Yi.Pure.Vue3/src/components/ReSegmented/src/type.ts
new file mode 100644
index 00000000..205e34dc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSegmented/src/type.ts
@@ -0,0 +1,20 @@
+import type { VNode, Component } from "vue";
+import type { iconType } from "@/components/ReIcon/src/types.ts";
+
+export interface OptionsType {
+  /** 文字 */
+  label?: string | (() => VNode | Component);
+  /**
+   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
+   * @see {@link 用法参考 https://pure-admin.github.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
+   */
+  icon?: string | Component;
+  /** 图标属性、样式配置 */
+  iconAttrs?: iconType;
+  /** 值 */
+  value?: any;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** `tooltip` 提示 */
+  tip?: string;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSelector/index.ts b/Yi.Pure.Vue3/src/components/ReSelector/index.ts
new file mode 100644
index 00000000..3e28ddcf
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSelector/index.ts
@@ -0,0 +1,7 @@
+import reSelector from "./src";
+import { withInstall } from "@pureadmin/utils";
+
+/** 选择器组件 */
+export const ReSelector = withInstall(reSelector);
+
+export default ReSelector;
diff --git a/Yi.Pure.Vue3/src/components/ReSelector/src/index.css b/Yi.Pure.Vue3/src/components/ReSelector/src/index.css
new file mode 100644
index 00000000..b66b337c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSelector/src/index.css
@@ -0,0 +1,28 @@
+.hs-rate__icon {
+  font-size: 18px;
+  transition: 0.3s;
+}
+
+.hs-item {
+  width: 30px;
+  height: 30px;
+  box-sizing: border-box;
+  line-height: 30px;
+}
+
+.hs-on {
+  background-color: #409eff;
+  border-radius: 50%;
+}
+
+.hs-range {
+  background-color: #f2f6fc;
+}
+
+.both-left-sides {
+  border-radius: 50% 0 0 50%;
+}
+
+.both-right-sides {
+  border-radius: 0 50% 50% 0;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSelector/src/index.tsx b/Yi.Pure.Vue3/src/components/ReSelector/src/index.tsx
new file mode 100644
index 00000000..8922f772
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSelector/src/index.tsx
@@ -0,0 +1,327 @@
+import "./index.css";
+import {
+  unref,
+  computed,
+  nextTick,
+  onBeforeMount,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+import { addClass, removeClass, toggleClass } from "@pureadmin/utils";
+
+const stayClass = "stay"; //鼠标点击
+const activeClass = "hs-on"; //鼠标移动上去
+const voidClass = "hs-off"; //鼠标移开
+const inRange = "hs-range"; //当前选中的两个元素之间的背景
+const bothLeftSides = "both-left-sides";
+const bothRightSides = "both-right-sides";
+let selectedDirection = "right"; //默认从左往右，索引变大
+
+let overList = [];
+// 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素
+let selectedList = [];
+
+const props = {
+  HsKey: {
+    type: Number || String,
+    default: 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Array,
+    default() {
+      return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    }
+  },
+  // 回显数据的索引，长度必须是2
+  echo: {
+    type: Array,
+    default() {
+      return [];
+    }
+  }
+};
+
+export default defineComponent({
+  name: "ReSelector",
+  props,
+  emits: ["selectedVal"],
+  setup(props, { emit }) {
+    const instance = getCurrentInstance();
+    const currentValue = props.value;
+
+    const rateDisabled = computed(() => {
+      return props.disabled;
+    });
+
+    const classes = computed(() => {
+      const result = [];
+      let i = 0;
+      let threshold = currentValue;
+      if (currentValue !== Math.floor(currentValue)) {
+        threshold--;
+      }
+      for (; i < threshold; i++) {
+        result.push(activeClass);
+      }
+      for (; i < props.max.length; i++) {
+        result.push(voidClass);
+      }
+      return result;
+    });
+
+    // 鼠标移入
+    const setCurrentValue = index => {
+      if (props.disabled) return;
+      // 当选中一个元素后，开始添加背景色
+      if (selectedList.length === 1) {
+        if (overList.length < 1) overList.push({ index });
+
+        let firstIndex = overList[0].index;
+
+        // 往右走，索引变大
+        if (index > firstIndex) {
+          selectedDirection = "right";
+          toggleClass(
+            false,
+            bothRightSides,
+            document.querySelector(".hs-select__item" + selectedList[0].index)
+          );
+
+          while (index >= firstIndex) {
+            addClass(
+              document.querySelector(".hs-select__item" + firstIndex),
+              inRange
+            );
+            firstIndex++;
+          }
+        } else {
+          selectedDirection = "left";
+          toggleClass(
+            true,
+            bothRightSides,
+            document.querySelector(".hs-select__item" + selectedList[0].index)
+          );
+
+          while (index <= firstIndex) {
+            addClass(
+              document.querySelector(".hs-select__item" + firstIndex),
+              inRange
+            );
+            firstIndex--;
+          }
+        }
+      }
+
+      addClass(document.querySelector("." + voidClass + index), activeClass);
+    };
+
+    // 鼠标离开
+    const resetCurrentValue = index => {
+      if (props.disabled) return;
+      // 移除先检查是否选中 选中则返回false 不移除
+      const currentHsDom = document.querySelector("." + voidClass + index);
+      if (currentHsDom.className.includes(stayClass)) {
+        return false;
+      } else {
+        removeClass(currentHsDom, activeClass);
+      }
+
+      // 当选中一个元素后，开始移除背景色
+      if (selectedList.length === 1) {
+        const firstIndex = overList[0].index;
+        if (index >= firstIndex) {
+          for (let i = 0; i <= index; i++) {
+            removeClass(
+              document.querySelector(".hs-select__item" + i),
+              inRange
+            );
+          }
+        } else {
+          while (index <= firstIndex) {
+            removeClass(
+              document.querySelector(".hs-select__item" + index),
+              inRange
+            );
+            index++;
+          }
+        }
+      }
+    };
+
+    // 鼠标点击
+    const selectValue = (index, item) => {
+      if (props.disabled) return;
+      const len = selectedList.length;
+
+      if (len < 2) {
+        selectedList.push({ item, index });
+        addClass(document.querySelector("." + voidClass + index), stayClass);
+
+        addClass(
+          document.querySelector(".hs-select__item" + selectedList[0].index),
+          bothLeftSides
+        );
+
+        if (selectedList[1]) {
+          if (selectedDirection === "right") {
+            addClass(
+              document.querySelector(
+                ".hs-select__item" + selectedList[1].index
+              ),
+              bothRightSides
+            );
+          } else {
+            addClass(
+              document.querySelector(
+                ".hs-select__item" + selectedList[1].index
+              ),
+              bothLeftSides
+            );
+          }
+        }
+
+        if (len === 1) {
+          // 顺时针排序
+          if (selectedDirection === "right") {
+            emit("selectedVal", {
+              left: selectedList[0].item,
+              right: selectedList[1].item,
+              whole: selectedList
+            });
+          } else {
+            emit("selectedVal", {
+              left: selectedList[1].item,
+              right: selectedList[0].item,
+              whole: selectedList
+            });
+          }
+        }
+      } else {
+        nextTick(() => {
+          selectedList.forEach(v => {
+            removeClass(
+              document.querySelector("." + voidClass + v.index),
+              activeClass,
+              stayClass
+            );
+
+            removeClass(
+              document.querySelector(".hs-select__item" + v.index),
+              bothLeftSides,
+              bothRightSides
+            );
+          });
+
+          selectedList = [];
+          overList = [];
+          for (let i = 0; i <= props.max.length; i++) {
+            const currentDom = document.querySelector(".hs-select__item" + i);
+            if (currentDom) {
+              removeClass(currentDom, inRange);
+            }
+          }
+
+          selectedList.push({ item, index });
+          addClass(document.querySelector("." + voidClass + index), stayClass);
+
+          addClass(
+            document.querySelector(".hs-select__item" + selectedList[0].index),
+            bothLeftSides
+          );
+        });
+      }
+    };
+
+    // 回显数据
+    const echoView = item => {
+      if (item.length === 0) return;
+
+      if (item.length > 2 || item.length === 1) {
+        throw "传入的数组长度必须是2";
+      }
+
+      item.sort((a, b) => {
+        return a - b;
+      });
+
+      addClass(
+        instance.refs["hsdiv" + props.HsKey + item[0]] as Element,
+        activeClass,
+        stayClass
+      );
+
+      addClass(
+        instance.refs["hstd" + props.HsKey + item[0]] as Element,
+        bothLeftSides
+      );
+
+      addClass(
+        instance.refs["hsdiv" + props.HsKey + item[1]] as Element,
+        activeClass,
+        stayClass
+      );
+
+      addClass(
+        instance.refs["hstd" + props.HsKey + item[1]] as Element,
+        bothRightSides
+      );
+
+      while (item[1] >= item[0]) {
+        addClass(
+          instance.refs["hstd" + props.HsKey + item[0]] as Element,
+          inRange
+        );
+        item[0]++;
+      }
+    };
+
+    onBeforeMount(() => {
+      nextTick(() => {
+        echoView(props.echo);
+      });
+    });
+
+    return () => (
+      <>
+        <table cellspacing="0" cellpadding="0">
+          <tbody>
+            <tr>
+              {props.max.map((item, key) => {
+                return (
+                  <td
+                    data-index={props.HsKey}
+                    ref={`hstd${props.HsKey}${key}`}
+                    class={`hs-select__item${key}`}
+                    onMousemove={() => setCurrentValue(key)}
+                    onMouseleave={() => resetCurrentValue(key)}
+                    onClick={() => selectValue(key, item)}
+                    style={{
+                      cursor: unref(rateDisabled) ? "auto" : "pointer",
+                      textAlign: "center"
+                    }}
+                    key={key}
+                  >
+                    <div
+                      ref={`hsdiv${props.HsKey}${key}`}
+                      class={`hs-item ${[unref(classes)[key] + key]}`}
+                    >
+                      <span>{item}</span>
+                    </div>
+                  </td>
+                );
+              })}
+            </tr>
+          </tbody>
+        </table>
+      </>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.css b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.css
new file mode 100644
index 00000000..25bea766
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.css
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3268330 */
+  src:
+    url("iconfont.woff2?t=1647939915215") format("woff2"),
+    url("iconfont.woff?t=1647939915215") format("woff"),
+    url("iconfont.ttf?t=1647939915215") format("truetype");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-tuozhuai1:before {
+  content: "\e647";
+}
+
+.icon-tuozhuai1-copy:before {
+  content: "\eda3";
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.js b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.js
new file mode 100644
index 00000000..c09a927f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.js
@@ -0,0 +1,65 @@
+!(function (e) {
+  var t,
+    n,
+    c,
+    o,
+    s,
+    i =
+      '<svg><symbol id="icon-tuozhuai1" viewBox="0 0 1024 1024"><path d="M576 896c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z" fill="#2c2c2c" ></path></symbol><symbol id="icon-tuozhuai1-copy" viewBox="0 0 1024 1024"><path d="M128 576c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256.00000001c35.2 0 64 28.8 64 63.99999999s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-63.99999999z m0-256.00000001c35.2 0 64 28.8 64 64s-28.8 64-64 63.99999999-64-28.8-64-63.99999999 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z" fill="#2c2c2c" ></path></symbol></svg>',
+    d = (d = document.getElementsByTagName("script"))[
+      d.length - 1
+    ].getAttribute("data-injectcss"),
+    m = function (e, t) {
+      t.parentNode.insertBefore(e, t);
+    };
+  if (d && !e.__iconfont__svg__cssinject__) {
+    e.__iconfont__svg__cssinject__ = !0;
+    try {
+      document.write(
+        "<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
+      );
+    } catch (e) {
+      console && console.log(e);
+    }
+  }
+  function l() {
+    s || ((s = !0), c());
+  }
+  function a() {
+    try {
+      o.documentElement.doScroll("left");
+    } catch (e) {
+      return void setTimeout(a, 50);
+    }
+    l();
+  }
+  (t = function () {
+    var e,
+      t = document.createElement("div");
+    (t.innerHTML = i),
+      (i = null),
+      (t = t.getElementsByTagName("svg")[0]) &&
+        (t.setAttribute("aria-hidden", "true"),
+        (t.style.position = "absolute"),
+        (t.style.width = 0),
+        (t.style.height = 0),
+        (t.style.overflow = "hidden"),
+        (t = t),
+        (e = document.body).firstChild ? m(t, e.firstChild) : e.appendChild(t));
+  }),
+    document.addEventListener
+      ? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
+        ? setTimeout(t, 0)
+        : ((n = function () {
+            document.removeEventListener("DOMContentLoaded", n, !1), t();
+          }),
+          document.addEventListener("DOMContentLoaded", n, !1))
+      : document.attachEvent &&
+        ((c = t),
+        (o = e.document),
+        (s = !1),
+        a(),
+        (o.onreadystatechange = function () {
+          "complete" == o.readyState && ((o.onreadystatechange = null), l());
+        }));
+})(window);
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.json b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.json
new file mode 100644
index 00000000..7dcd08e1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.json
@@ -0,0 +1,23 @@
+{
+  "id": "3268330",
+  "name": "split",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "22378774",
+      "name": "拖拽",
+      "font_class": "tuozhuai1",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "23570521",
+      "name": "拖拽",
+      "font_class": "tuozhuai1-copy",
+      "unicode": "eda3",
+      "unicode_decimal": 60835
+    }
+  ]
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.ttf b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.ttf
new file mode 100644
index 00000000..04cbfdac
Binary files /dev/null and b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.ttf differ
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.woff b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.woff
new file mode 100644
index 00000000..9bd75a2f
Binary files /dev/null and b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.woff differ
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.woff2 b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.woff2
new file mode 100644
index 00000000..ce75fa6d
Binary files /dev/null and b/Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.woff2 differ
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/index.css b/Yi.Pure.Vue3/src/components/ReSplitPane/index.css
new file mode 100644
index 00000000..130c0e0c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSplitPane/index.css
@@ -0,0 +1,49 @@
+.clearfix::after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+.vue-splitter-container {
+  height: 100%;
+  position: relative;
+}
+
+.vue-splitter-container-mask {
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.splitter-pane.vertical.splitter-paneL {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  padding-right: 3px;
+}
+
+.splitter-pane.vertical.splitter-paneR {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding-left: 3px;
+}
+
+.splitter-pane.horizontal.splitter-paneL {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.splitter-pane.horizontal.splitter-paneR {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding-top: 3px;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/index.tsx b/Yi.Pure.Vue3/src/components/ReSplitPane/index.tsx
new file mode 100644
index 00000000..4143f707
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSplitPane/index.tsx
@@ -0,0 +1,136 @@
+import "./index.css";
+import resizer from "./resizer";
+import { type PropType, defineComponent, ref, unref, computed } from "vue";
+
+export interface ContextProps {
+  minPercent: number;
+  defaultPercent: number;
+  split: string;
+}
+
+/** 切割面板组件 */
+export default defineComponent({
+  name: "SplitPane",
+  components: { resizer },
+  props: {
+    splitSet: {
+      type: Object as PropType<ContextProps>,
+      require: true
+    }
+  },
+  emits: ["resize"],
+  setup(props, ctx) {
+    const active = ref(false);
+    const hasMoved = ref(false);
+    const percent = ref(props.splitSet?.defaultPercent);
+    const type = props.splitSet?.split === "vertical" ? "width" : "height";
+    const resizeType = props.splitSet?.split === "vertical" ? "left" : "top";
+
+    const leftClass = ref([
+      "splitter-pane splitter-paneL",
+      props.splitSet?.split
+    ]);
+
+    const rightClass = ref([
+      "splitter-pane splitter-paneR",
+      props.splitSet?.split
+    ]);
+
+    const cursor = computed(() => {
+      return active.value
+        ? props.splitSet?.split === "vertical"
+          ? { cursor: "col-resize" }
+          : { cursor: "row-resize" }
+        : { cursor: "default" };
+    });
+
+    const onClick = (): void => {
+      if (!hasMoved.value) {
+        percent.value = 50;
+        ctx.emit("resize", percent.value);
+      }
+    };
+
+    const onMouseDown = (): void => {
+      active.value = true;
+      hasMoved.value = false;
+    };
+
+    const onMouseUp = (): void => {
+      active.value = false;
+    };
+
+    const onMouseMove = (e: any): void => {
+      if (e.buttons === 0 || e.which === 0) {
+        active.value = false;
+      }
+
+      if (active.value) {
+        let offset = 0;
+        let target = e.currentTarget;
+        if (props.splitSet?.split === "vertical") {
+          while (target) {
+            offset += target.offsetLeft;
+            target = target.offsetParent;
+          }
+        } else {
+          while (target) {
+            offset += target.offsetTop;
+            target = target.offsetParent;
+          }
+        }
+
+        const currentPage =
+          props.splitSet?.split === "vertical" ? e.pageX : e.pageY;
+        const targetOffset =
+          props.splitSet?.split === "vertical"
+            ? e.currentTarget.offsetWidth
+            : e.currentTarget.offsetHeight;
+        const percents =
+          Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
+
+        if (
+          percents > props.splitSet?.minPercent &&
+          percents < 100 - props.splitSet?.minPercent
+        ) {
+          percent.value = percents;
+        }
+
+        ctx.emit("resize", percent.value);
+
+        hasMoved.value = true;
+      }
+    };
+
+    return () => (
+      <>
+        <div
+          class="vue-splitter-container clearfix"
+          style={unref(cursor)}
+          onMouseup={() => onMouseUp()}
+          onMousemove={() => onMouseMove(event)}
+        >
+          <div
+            class={unref(leftClass)}
+            style={{ [unref(type)]: unref(percent) + "%" }}
+          >
+            {ctx.slots.paneL()}
+          </div>
+          <resizer
+            style={`${unref([resizeType])}:${unref(percent)}%`}
+            split={props.splitSet?.split}
+            onMousedown={() => onMouseDown()}
+            onClick={() => onClick()}
+          ></resizer>
+          <div
+            class={unref(rightClass)}
+            style={{ [unref(type)]: 100 - unref(percent) + "%" }}
+          >
+            {ctx.slots.paneR()}
+          </div>
+          <div v-show={unref(active)} class="vue-splitter-container-mask"></div>
+        </div>
+      </>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/resizer.css b/Yi.Pure.Vue3/src/components/ReSplitPane/resizer.css
new file mode 100644
index 00000000..34b1fc22
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSplitPane/resizer.css
@@ -0,0 +1,47 @@
+@import "./iconfont/iconfont.css";
+
+.splitter-pane-resizer {
+  box-sizing: border-box;
+  background: #000;
+  position: absolute;
+  opacity: 0.2;
+  z-index: 1;
+  background-clip: padding;
+  background-clip: padding-box;
+}
+
+.splitter-pane-resizer.horizontal {
+  height: 6px;
+  width: 100%;
+  background: #e5e6eb;
+  cursor: row-resize;
+}
+
+.splitter-pane-resizer.horizontal:before {
+  content: "\eda3";
+  font-family: "iconfont";
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.splitter-pane-resizer.vertical {
+  width: 6px;
+  height: 100%;
+  background: #e5e6eb;
+  cursor: col-resize;
+}
+
+.splitter-pane-resizer.vertical:before {
+  content: "\e647";
+  font-family: "iconfont";
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/Yi.Pure.Vue3/src/components/ReSplitPane/resizer.tsx b/Yi.Pure.Vue3/src/components/ReSplitPane/resizer.tsx
new file mode 100644
index 00000000..b4cee7d5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReSplitPane/resizer.tsx
@@ -0,0 +1,23 @@
+import "./resizer.css";
+import { computed, unref, defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Resizer",
+  props: {
+    split: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const classes = computed(() => {
+      return ["splitter-pane-resizer", props.split, props.className].join(" ");
+    });
+
+    return () => <div class={unref(classes)}></div>;
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReText/index.ts b/Yi.Pure.Vue3/src/components/ReText/index.ts
new file mode 100644
index 00000000..62135660
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReText/index.ts
@@ -0,0 +1,7 @@
+import reText from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 支持`Tooltip`提示的文本省略组件 */
+export const ReText = withInstall(reText);
+
+export default ReText;
diff --git a/Yi.Pure.Vue3/src/components/ReText/src/index.vue b/Yi.Pure.Vue3/src/components/ReText/src/index.vue
new file mode 100644
index 00000000..ecaebdbb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReText/src/index.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { h, onMounted, ref, useSlots } from "vue";
+import { type TippyOptions, useTippy } from "vue-tippy";
+
+defineOptions({
+  name: "ReText"
+});
+
+const props = defineProps({
+  // 行数
+  lineClamp: {
+    type: [String, Number]
+  },
+  tippyProps: {
+    type: Object as PropType<TippyOptions>,
+    default: () => ({})
+  }
+});
+
+const $slots = useSlots();
+
+const textRef = ref();
+const tippyFunc = ref();
+
+const isTextEllipsis = (el: HTMLElement) => {
+  if (!props.lineClamp) {
+    // 单行省略判断
+    return el.scrollWidth > el.clientWidth;
+  } else {
+    // 多行省略判断
+    return el.scrollHeight > el.clientHeight;
+  }
+};
+
+const getTippyProps = () => ({
+  content: h($slots.content || $slots.default),
+  ...props.tippyProps
+});
+
+function handleHover(event: MouseEvent) {
+  if (isTextEllipsis(event.target as HTMLElement)) {
+    tippyFunc.value.setProps(getTippyProps());
+    tippyFunc.value.enable();
+  } else {
+    tippyFunc.value.disable();
+  }
+}
+
+onMounted(() => {
+  tippyFunc.value = useTippy(textRef.value?.$el, getTippyProps());
+});
+</script>
+
+<template>
+  <el-text
+    v-bind="{
+      truncated: !lineClamp,
+      lineClamp,
+      ...$attrs
+    }"
+    ref="textRef"
+    @mouseover.self="handleHover"
+  >
+    <slot />
+  </el-text>
+</template>
diff --git a/Yi.Pure.Vue3/src/components/ReTreeLine/index.scss b/Yi.Pure.Vue3/src/components/ReTreeLine/index.scss
new file mode 100644
index 00000000..c3d22d24
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReTreeLine/index.scss
@@ -0,0 +1,55 @@
+$--element-tree-line-color: #dcdfe6 !default;
+$--element-tree-line-style: dashed !default;
+$--element-tree-line-width: 1px !default;
+
+/* 添加 el-tree-node__conten 默认没有的 position */
+.el-tree .el-tree-node__content {
+  position: relative;
+}
+
+.element-tree-node-label-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.element-tree-node-label {
+  font-size: 12px;
+}
+
+.element-tree-node-line-ver {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 100%;
+  border-left: $--element-tree-line-width $--element-tree-line-style
+    $--element-tree-line-color;
+
+  &.last-node-line {
+    border-left: $--element-tree-line-width $--element-tree-line-style
+      transparent;
+  }
+
+  &.last-node-isLeaf-line {
+    height: 50%;
+  }
+}
+
+.element-tree-node-line-hor {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  display: block;
+  height: 0;
+  border-bottom: $--element-tree-line-width $--element-tree-line-style
+    $--element-tree-line-color;
+}
+
+.element-tree-node-label-line {
+  flex: 1;
+  align-self: center;
+  margin: 0 10px;
+  border-top: $--element-tree-line-width $--element-tree-line-style
+    $--element-tree-line-color;
+}
diff --git a/Yi.Pure.Vue3/src/components/ReTreeLine/index.ts b/Yi.Pure.Vue3/src/components/ReTreeLine/index.ts
new file mode 100644
index 00000000..80a39653
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReTreeLine/index.ts
@@ -0,0 +1,155 @@
+// 参考https://www.npmjs.com/package/element-tree-line (主要是替换需要通过函数传参的方式去注册组件，并添加更好的类型支持，并移除this.$scopedSlots，在3.x中,将所有this.$scopedSlots替换为this.$slots)
+import "./index.scss";
+import { isFunction } from "@pureadmin/utils";
+import { type PropType, h, defineComponent } from "vue";
+import type {
+  TreeNode,
+  TreeData,
+  TreeNodeData
+} from "element-plus/es/components/tree-v2/src/types";
+
+/** 树形连接线组件 */
+export default defineComponent({
+  name: "ReTreeLine",
+  props: {
+    node: {
+      type: Object as PropType<TreeNode>,
+      required: true
+    },
+    data: {
+      type: Array as PropType<TreeNodeData>,
+      default: () => {}
+    },
+    treeData: {
+      type: Array as PropType<TreeData>,
+      default: () => []
+    },
+    indent: {
+      type: Number,
+      default: 16
+    },
+    showLabelLine: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(_, context) {
+    const { slots } = context;
+    const getScopedSlot = slotName => {
+      if (!slotName) {
+        return null;
+      }
+      const slotNameSplits = slotName.split("||");
+      let slot = null;
+      for (let index = 0; index < slotNameSplits.length; index++) {
+        const name = slotNameSplits[index];
+        slot = (slots || {})[name];
+      }
+      return slot;
+    };
+    const getSlotValue = (slot, scopedData, defaultNode = null) => {
+      if (isFunction(slot)) {
+        return slot(scopedData) || defaultNode;
+      }
+      return slot || defaultNode;
+    };
+
+    return {
+      getScopedSlot,
+      getSlotValue
+    };
+  },
+  render() {
+    // 自定义整行节点label区域
+    const scopeSlotDefault = this.getScopedSlot("default");
+    // 显示横线时自定义节点label区域
+    const labelSlot = this.getScopedSlot("node-label");
+    // 显示横线时追加在横线右边的内容
+    const afterLabelSlot = this.getScopedSlot("after-node-label");
+    const labelNodes = scopeSlotDefault
+      ? this.getSlotValue(scopeSlotDefault, {
+          node: this.node,
+          data: this.data
+        })
+      : [
+          labelSlot
+            ? this.getSlotValue(labelSlot, {
+                node: this.node,
+                data: this.data
+              })
+            : h("span", { class: "element-tree-node-label" }, this.node.label),
+          this.showLabelLine
+            ? h("span", {
+                class: "element-tree-node-label-line"
+              })
+            : null,
+          this.getSlotValue(afterLabelSlot, {
+            node: this.node,
+            data: this.data
+          })
+        ];
+    // 取得每一层的当前节点是不是在当前层级列表的最后一个
+    const lastnodeArr = [];
+    let currentNode = this.node;
+    while (currentNode) {
+      let parentNode = currentNode.parent;
+      // 兼容element-plus的 el-tree-v2 (Virtualized Tree 虚拟树)
+      if (currentNode.level === 1 && !currentNode.parent) {
+        // el-tree-v2的第一层node是没有parent的，必需 treeData 创建一个parent
+        if (!this.treeData || !Array.isArray(this.treeData)) {
+          throw Error(
+            "if you using el-tree-v2 (Virtualized Tree) of element-plus,element-tree-line required data."
+          );
+        }
+        parentNode = {
+          children: Array.isArray(this.treeData)
+            ? this.treeData.map(item => {
+                return { ...item, key: item.id };
+              })
+            : [],
+          level: 0,
+          key: "node-0",
+          parent: null
+        };
+      }
+      if (parentNode) {
+        // element-plus的 el-tree-v2 使用的是children和key， 其他使用的是 childNodes和id
+        const index = (parentNode.children || parentNode.childNodes).findIndex(
+          item => (item.key || item.id) === (currentNode.key || currentNode.id)
+        );
+        lastnodeArr.unshift(
+          index === (parentNode.children || parentNode.childNodes).length - 1
+        );
+      }
+      currentNode = parentNode;
+    }
+    const lineNodes = [];
+    for (let i = 0; i < this.node.level; i++) {
+      lineNodes.push(
+        h("span", {
+          class: {
+            "element-tree-node-line-ver": true,
+            "last-node-line": lastnodeArr[i] && this.node.level - 1 !== i,
+            "last-node-isLeaf-line": lastnodeArr[i] && this.node.level - 1 === i
+          },
+          style: { left: this.indent * i + "px" }
+        })
+      );
+    }
+    return h(
+      "span",
+      {
+        class: "element-tree-node-label-wrapper"
+      },
+      [labelNodes].concat(lineNodes).concat([
+        h("span", {
+          class: "element-tree-node-line-hor",
+          style: {
+            width: (this.node.isLeaf ? 24 : 8) + "px",
+            left: (this.node.level - 1) * this.indent + "px"
+          }
+        })
+      ])
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReTypeit/index.ts b/Yi.Pure.Vue3/src/components/ReTypeit/index.ts
new file mode 100644
index 00000000..e28a10c6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReTypeit/index.ts
@@ -0,0 +1,8 @@
+import typeIt from "./src/index";
+import type { Options as TypeItOptions } from "typeit";
+
+const TypeIt = typeIt;
+
+export { TypeIt, TypeItOptions };
+
+export default TypeIt;
diff --git a/Yi.Pure.Vue3/src/components/ReTypeit/src/index.tsx b/Yi.Pure.Vue3/src/components/ReTypeit/src/index.tsx
new file mode 100644
index 00000000..befc4f90
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReTypeit/src/index.tsx
@@ -0,0 +1,56 @@
+import type { El } from "typeit/dist/types";
+import TypeIt, { type Options as TypeItOptions } from "typeit";
+import { type PropType, ref, defineComponent, onMounted } from "vue";
+
+// 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+  name: "TypeIt",
+  props: {
+    options: {
+      type: Object as PropType<TypeItOptions>,
+      default: () => ({}) as TypeItOptions
+    }
+  },
+  setup(props, { slots, expose }) {
+    /**
+     * 输出错误信息
+     * @param message 错误信息
+     */
+    function throwError(message: string) {
+      throw new TypeError(message);
+    }
+
+    /**
+     * 获取浏览器默认语言
+     */
+    function getBrowserLanguage() {
+      return navigator.language;
+    }
+
+    const typedItRef = ref<Element | null>(null);
+
+    onMounted(() => {
+      const $typed = typedItRef.value!.querySelector(".type-it") as El;
+
+      if (!$typed) {
+        const errorMsg =
+          getBrowserLanguage() === "zh-CN"
+            ? "请确保有且只有一个具有class属性为 'type-it' 的元素"
+            : "Please make sure that there is only one element with a Class attribute with 'type-it'";
+        throwError(errorMsg);
+      }
+
+      const typeIt = new TypeIt($typed, props.options).go();
+
+      expose({
+        typeIt
+      });
+    });
+
+    return () => (
+      <div ref={typedItRef}>
+        {slots.default?.() ?? <span class="type-it"></span>}
+      </div>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/components/ReVxeTableBar/index.ts b/Yi.Pure.Vue3/src/components/ReVxeTableBar/index.ts
new file mode 100644
index 00000000..6ffa7e23
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReVxeTableBar/index.ts
@@ -0,0 +1,5 @@
+import vxeTableBar from "./src/bar";
+import { withInstall } from "@pureadmin/utils";
+
+/** 配合 `vxe-table` 实现快速便捷的表格操作 */
+export const VxeTableBar = withInstall(vxeTableBar);
diff --git a/Yi.Pure.Vue3/src/components/ReVxeTableBar/src/bar.tsx b/Yi.Pure.Vue3/src/components/ReVxeTableBar/src/bar.tsx
new file mode 100644
index 00000000..581c9012
--- /dev/null
+++ b/Yi.Pure.Vue3/src/components/ReVxeTableBar/src/bar.tsx
@@ -0,0 +1,384 @@
+import Sortable from "sortablejs";
+import { transformI18n } from "@/plugins/i18n";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { delay, cloneDeep, getKeyList } from "@pureadmin/utils";
+import {
+  type PropType,
+  ref,
+  unref,
+  computed,
+  nextTick,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import DragIcon from "@/assets/table-bar/drag.svg?component";
+import ExpandIcon from "@/assets/table-bar/expand.svg?component";
+import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
+import SettingIcon from "@/assets/table-bar/settings.svg?component";
+import CollapseIcon from "@/assets/table-bar/collapse.svg?component";
+
+const props = {
+  /** 头部最左边的标题 */
+  title: {
+    type: String,
+    default: "列表"
+  },
+  vxeTableRef: {
+    type: Object as PropType<any>
+  },
+  /** 需要展示的列 */
+  columns: {
+    type: Array as PropType<any>,
+    default: () => []
+  },
+  /** 是否为树列表 */
+  tree: {
+    type: Boolean,
+    default: false
+  },
+  isExpandAll: {
+    type: Boolean,
+    default: true
+  },
+  tableKey: {
+    type: [String, Number] as PropType<string | number>,
+    default: "0"
+  }
+};
+
+export default defineComponent({
+  name: "VxeTableBar",
+  props,
+  emits: ["refresh"],
+  setup(props, { emit, slots, attrs }) {
+    const size = ref("small");
+    const loading = ref(false);
+    const checkAll = ref(true);
+    const isFullscreen = ref(false);
+    const isIndeterminate = ref(false);
+    const instance = getCurrentInstance()!;
+    const isExpandAll = ref(props.isExpandAll);
+    let checkColumnList = getKeyList(cloneDeep(props?.columns), "title");
+    const checkedColumns = ref(getKeyList(cloneDeep(props?.columns), "title"));
+    const dynamicColumns = ref(cloneDeep(props?.columns));
+
+    const getDropdownItemStyle = computed(() => {
+      return s => {
+        return {
+          background:
+            s === size.value ? useEpThemeStoreHook().epThemeColor : "",
+          color: s === size.value ? "#fff" : "var(--el-text-color-primary)"
+        };
+      };
+    });
+
+    const iconClass = computed(() => {
+      return [
+        "text-black",
+        "dark:text-white",
+        "duration-100",
+        "hover:!text-primary",
+        "cursor-pointer",
+        "outline-none"
+      ];
+    });
+
+    const topClass = computed(() => {
+      return [
+        "flex",
+        "justify-between",
+        "pt-[3px]",
+        "px-[11px]",
+        "border-b-[1px]",
+        "border-solid",
+        "border-[#dcdfe6]",
+        "dark:border-[#303030]"
+      ];
+    });
+
+    function onReFresh() {
+      loading.value = true;
+      emit("refresh");
+      delay(500).then(() => (loading.value = false));
+    }
+
+    function onExpand() {
+      isExpandAll.value = !isExpandAll.value;
+      isExpandAll.value
+        ? props.vxeTableRef.setAllTreeExpand(true)
+        : props.vxeTableRef.clearTreeExpand();
+      props.vxeTableRef.refreshColumn();
+    }
+
+    function reloadColumn() {
+      const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item =>
+        checkedColumns.value.includes(item.title)
+      );
+      props.vxeTableRef.reloadColumn(curCheckedColumns);
+    }
+
+    function handleCheckAllChange(val: boolean) {
+      checkedColumns.value = val ? checkColumnList : [];
+      isIndeterminate.value = false;
+      reloadColumn();
+    }
+
+    function handleCheckedColumnsChange(value: string[]) {
+      checkedColumns.value = value;
+      const checkedCount = value.length;
+      checkAll.value = checkedCount === checkColumnList.length;
+      isIndeterminate.value =
+        checkedCount > 0 && checkedCount < checkColumnList.length;
+    }
+
+    async function onReset() {
+      checkAll.value = true;
+      isIndeterminate.value = false;
+      dynamicColumns.value = cloneDeep(props?.columns);
+      checkColumnList = [];
+      checkColumnList = await getKeyList(cloneDeep(props?.columns), "title");
+      checkedColumns.value = getKeyList(cloneDeep(props?.columns), "title");
+      props.vxeTableRef.refreshColumn();
+    }
+
+    function changeSize(curSize: string) {
+      size.value = curSize;
+      props.vxeTableRef.refreshColumn();
+    }
+
+    const dropdown = {
+      dropdown: () => (
+        <el-dropdown-menu class="translation">
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("medium")}
+            onClick={() => changeSize("medium")}
+          >
+            宽松
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("small")}
+            onClick={() => changeSize("small")}
+          >
+            默认
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("mini")}
+            onClick={() => changeSize("mini")}
+          >
+            紧凑
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      )
+    };
+
+    /** 列展示拖拽排序 */
+    const rowDrop = (event: { preventDefault: () => void }) => {
+      event.preventDefault();
+      nextTick(() => {
+        const wrapper: HTMLElement = (
+          instance?.proxy?.$refs[`VxeGroupRef${unref(props.tableKey)}`] as any
+        ).$el.firstElementChild;
+        Sortable.create(wrapper, {
+          animation: 300,
+          handle: ".drag-btn",
+          onEnd: ({ newIndex, oldIndex, item }) => {
+            const targetThElem = item;
+            const wrapperElem = targetThElem.parentNode as HTMLElement;
+            const oldColumn = dynamicColumns.value[oldIndex];
+            const newColumn = dynamicColumns.value[newIndex];
+            if (oldColumn?.fixed || newColumn?.fixed) {
+              // 当前列存在fixed属性 则不可拖拽
+              const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+              if (newIndex > oldIndex) {
+                wrapperElem.insertBefore(targetThElem, oldThElem);
+              } else {
+                wrapperElem.insertBefore(
+                  targetThElem,
+                  oldThElem ? oldThElem.nextElementSibling : oldThElem
+                );
+              }
+              return;
+            }
+            const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
+            dynamicColumns.value.splice(newIndex, 0, currentRow);
+            reloadColumn();
+          }
+        });
+      });
+    };
+
+    const isFixedColumn = (title: string) => {
+      return dynamicColumns.value.filter(
+        item => transformI18n(item.title) === transformI18n(title)
+      )[0].fixed
+        ? true
+        : false;
+    };
+
+    const rendTippyProps = (content: string) => {
+      // https://vue-tippy.netlify.app/props
+      return {
+        content,
+        offset: [0, 18],
+        duration: [300, 0],
+        followCursor: true,
+        hideOnClick: "toggle"
+      };
+    };
+
+    const reference = {
+      reference: () => (
+        <SettingIcon
+          class={["w-[16px]", iconClass.value]}
+          v-tippy={rendTippyProps("列设置")}
+        />
+      )
+    };
+
+    return () => (
+      <>
+        <div
+          {...attrs}
+          class={[
+            "w-[99/100]",
+            "px-2",
+            "pb-2",
+            "bg-bg_color",
+            isFullscreen.value
+              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              : "mt-2"
+          ]}
+        >
+          <div class="flex justify-between w-full h-[60px] p-4">
+            {slots?.title ? (
+              slots.title()
+            ) : (
+              <p class="font-bold truncate">{props.title}</p>
+            )}
+            <div class="flex items-center justify-around">
+              {slots?.buttons ? (
+                <div class="flex mr-4">{slots.buttons()}</div>
+              ) : null}
+              {props.tree ? (
+                <>
+                  <ExpandIcon
+                    class={["w-[16px]", iconClass.value]}
+                    style={{
+                      transform: isExpandAll.value ? "none" : "rotate(-90deg)"
+                    }}
+                    v-tippy={rendTippyProps(
+                      isExpandAll.value ? "折叠" : "展开"
+                    )}
+                    onClick={() => onExpand()}
+                  />
+                  <el-divider direction="vertical" />
+                </>
+              ) : null}
+              <RefreshIcon
+                class={[
+                  "w-[16px]",
+                  iconClass.value,
+                  loading.value ? "animate-spin" : ""
+                ]}
+                v-tippy={rendTippyProps("刷新")}
+                onClick={() => onReFresh()}
+              />
+              <el-divider direction="vertical" />
+              <el-dropdown
+                v-slots={dropdown}
+                trigger="click"
+                v-tippy={rendTippyProps("密度")}
+              >
+                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+              </el-dropdown>
+              <el-divider direction="vertical" />
+
+              <el-popover
+                v-slots={reference}
+                placement="bottom-start"
+                popper-style={{ padding: 0 }}
+                width="200"
+                trigger="click"
+              >
+                <div class={[topClass.value]}>
+                  <el-checkbox
+                    class="!-mr-1"
+                    label="列展示"
+                    v-model={checkAll.value}
+                    indeterminate={isIndeterminate.value}
+                    onChange={value => handleCheckAllChange(value)}
+                  />
+                  <el-button type="primary" link onClick={() => onReset()}>
+                    重置
+                  </el-button>
+                </div>
+
+                <div class="pt-[6px] pl-[11px]">
+                  <el-scrollbar max-height="36vh">
+                    <el-checkbox-group
+                      ref={`VxeGroupRef${unref(props.tableKey)}`}
+                      modelValue={checkedColumns.value}
+                      onChange={value => handleCheckedColumnsChange(value)}
+                    >
+                      <el-space
+                        direction="vertical"
+                        alignment="flex-start"
+                        size={0}
+                      >
+                        {checkColumnList.map((item, index) => {
+                          return (
+                            <div class="flex items-center">
+                              <DragIcon
+                                class={[
+                                  "drag-btn w-[16px] mr-2",
+                                  isFixedColumn(item)
+                                    ? "!cursor-no-drop"
+                                    : "!cursor-grab"
+                                ]}
+                                onMouseenter={(event: {
+                                  preventDefault: () => void;
+                                }) => rowDrop(event)}
+                              />
+                              <el-checkbox
+                                key={index}
+                                label={item}
+                                value={item}
+                                onChange={reloadColumn}
+                              >
+                                <span
+                                  title={transformI18n(item)}
+                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                                >
+                                  {transformI18n(item)}
+                                </span>
+                              </el-checkbox>
+                            </div>
+                          );
+                        })}
+                      </el-space>
+                    </el-checkbox-group>
+                  </el-scrollbar>
+                </div>
+              </el-popover>
+              <el-divider direction="vertical" />
+
+              <iconifyIconOffline
+                class={["w-[16px]", iconClass.value]}
+                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
+                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+              />
+            </div>
+          </div>
+          {slots.default({
+            size: size.value,
+            dynamicColumns: dynamicColumns.value
+          })}
+        </div>
+      </>
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/config/index.ts b/Yi.Pure.Vue3/src/config/index.ts
new file mode 100644
index 00000000..c81d1c4d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/config/index.ts
@@ -0,0 +1,55 @@
+import axios from "axios";
+import type { App } from "vue";
+
+let config: object = {};
+const { VITE_PUBLIC_PATH } = import.meta.env;
+
+const setConfig = (cfg?: unknown) => {
+  config = Object.assign(config, cfg);
+};
+
+const getConfig = (key?: string): PlatformConfigs => {
+  if (typeof key === "string") {
+    const arr = key.split(".");
+    if (arr && arr.length) {
+      let data = config;
+      arr.forEach(v => {
+        if (data && typeof data[v] !== "undefined") {
+          data = data[v];
+        } else {
+          data = null;
+        }
+      });
+      return data;
+    }
+  }
+  return config;
+};
+
+/** 获取项目动态全局配置 */
+export const getPlatformConfig = async (app: App): Promise<undefined> => {
+  app.config.globalProperties.$config = getConfig();
+  return axios({
+    method: "get",
+    url: `${VITE_PUBLIC_PATH}platform-config.json`
+  })
+    .then(({ data: config }) => {
+      let $config = app.config.globalProperties.$config;
+      // 自动注入系统配置
+      if (app && $config && typeof config === "object") {
+        $config = Object.assign($config, config);
+        app.config.globalProperties.$config = $config;
+        // 设置全局配置
+        setConfig($config);
+      }
+      return $config;
+    })
+    .catch(() => {
+      throw "请在public文件夹下添加platform-config.json配置文件";
+    });
+};
+
+/** 本地响应式存储的命名空间 */
+const responsiveStorageNameSpace = () => getConfig().ResponsiveStorageNameSpace;
+
+export { getConfig, setConfig, responsiveStorageNameSpace };
diff --git a/Yi.Pure.Vue3/src/directives/auth/index.ts b/Yi.Pure.Vue3/src/directives/auth/index.ts
new file mode 100644
index 00000000..2fc64904
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/auth/index.ts
@@ -0,0 +1,15 @@
+import { hasAuth } from "@/router/utils";
+import type { Directive, DirectiveBinding } from "vue";
+
+export const auth: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
+    const { value } = binding;
+    if (value) {
+      !hasAuth(value) && el.parentNode?.removeChild(el);
+    } else {
+      throw new Error(
+        "[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
+      );
+    }
+  }
+};
diff --git a/Yi.Pure.Vue3/src/directives/copy/index.ts b/Yi.Pure.Vue3/src/directives/copy/index.ts
new file mode 100644
index 00000000..b71fa190
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/copy/index.ts
@@ -0,0 +1,33 @@
+import { message } from "@/utils/message";
+import { useEventListener } from "@vueuse/core";
+import { copyTextToClipboard } from "@pureadmin/utils";
+import type { Directive, DirectiveBinding } from "vue";
+
+export interface CopyEl extends HTMLElement {
+  copyValue: string;
+}
+
+/** 文本复制指令（默认双击复制） */
+export const copy: Directive = {
+  mounted(el: CopyEl, binding: DirectiveBinding<string>) {
+    const { value } = binding;
+    if (value) {
+      el.copyValue = value;
+      const arg = binding.arg ?? "dblclick";
+      // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
+      useEventListener(el, arg, () => {
+        const success = copyTextToClipboard(el.copyValue);
+        success
+          ? message("复制成功", { type: "success" })
+          : message("复制失败", { type: "error" });
+      });
+    } else {
+      throw new Error(
+        '[Directive: copy]: need value! Like v-copy="modelValue"'
+      );
+    }
+  },
+  updated(el: CopyEl, binding: DirectiveBinding) {
+    el.copyValue = binding.value;
+  }
+};
diff --git a/Yi.Pure.Vue3/src/directives/index.ts b/Yi.Pure.Vue3/src/directives/index.ts
new file mode 100644
index 00000000..d01fe714
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/index.ts
@@ -0,0 +1,6 @@
+export * from "./auth";
+export * from "./copy";
+export * from "./longpress";
+export * from "./optimize";
+export * from "./perms";
+export * from "./ripple";
diff --git a/Yi.Pure.Vue3/src/directives/longpress/index.ts b/Yi.Pure.Vue3/src/directives/longpress/index.ts
new file mode 100644
index 00000000..4eec6a22
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/longpress/index.ts
@@ -0,0 +1,63 @@
+import { useEventListener } from "@vueuse/core";
+import type { Directive, DirectiveBinding } from "vue";
+import { subBefore, subAfter, isFunction } from "@pureadmin/utils";
+
+export const longpress: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<Function>) {
+    const cb = binding.value;
+    if (cb && isFunction(cb)) {
+      let timer = null;
+      let interTimer = null;
+      let num = 500;
+      let interNum = null;
+      const isInter = binding?.arg?.includes(":") ?? false;
+
+      if (isInter) {
+        num = Number(subBefore(binding.arg, ":"));
+        interNum = Number(subAfter(binding.arg, ":"));
+      } else if (binding.arg) {
+        num = Number(binding.arg);
+      }
+
+      const clear = () => {
+        if (timer) {
+          clearTimeout(timer);
+          timer = null;
+        }
+        if (interTimer) {
+          clearInterval(interTimer);
+          interTimer = null;
+        }
+      };
+
+      const onDownInter = (ev: PointerEvent) => {
+        ev.preventDefault();
+        if (interTimer === null) {
+          interTimer = setInterval(() => cb(), interNum);
+        }
+      };
+
+      const onDown = (ev: PointerEvent) => {
+        clear();
+        ev.preventDefault();
+        if (timer === null) {
+          timer = isInter
+            ? setTimeout(() => {
+                cb();
+                onDownInter(ev);
+              }, num)
+            : setTimeout(() => cb(), num);
+        }
+      };
+
+      // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
+      useEventListener(el, "pointerdown", onDown);
+      useEventListener(el, "pointerup", clear);
+      useEventListener(el, "pointerleave", clear);
+    } else {
+      throw new Error(
+        '[Directive: longpress]: need callback and callback must be a function! Like v-longpress="callback"'
+      );
+    }
+  }
+};
diff --git a/Yi.Pure.Vue3/src/directives/optimize/index.ts b/Yi.Pure.Vue3/src/directives/optimize/index.ts
new file mode 100644
index 00000000..7b92538d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/optimize/index.ts
@@ -0,0 +1,68 @@
+import {
+  isArray,
+  throttle,
+  debounce,
+  isObject,
+  isFunction
+} from "@pureadmin/utils";
+import { useEventListener } from "@vueuse/core";
+import type { Directive, DirectiveBinding } from "vue";
+
+export interface OptimizeOptions {
+  /** 事件名 */
+  event: string;
+  /** 事件触发的方法 */
+  fn: (...params: any) => any;
+  /** 是否立即执行 */
+  immediate?: boolean;
+  /** 防抖或节流的延迟时间（防抖默认：`200`毫秒、节流默认：`1000`毫秒） */
+  timeout?: number;
+  /** 传递的参数 */
+  params?: any;
+}
+
+/** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
+export const optimize: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<OptimizeOptions>) {
+    const { value } = binding;
+    const optimizeType = binding.arg ?? "debounce";
+    const type = ["debounce", "throttle"].find(t => t === optimizeType);
+    if (type) {
+      if (value && value.event && isFunction(value.fn)) {
+        let params = value?.params;
+        if (params) {
+          if (isArray(params) || isObject(params)) {
+            params = isObject(params) ? Array.of(params) : params;
+          } else {
+            throw new Error(
+              "[Directive: optimize]: `params` must be an array or object"
+            );
+          }
+        }
+        // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
+        useEventListener(
+          el,
+          value.event,
+          type === "debounce"
+            ? debounce(
+                params ? () => value.fn(...params) : value.fn,
+                value?.timeout ?? 200,
+                value?.immediate ?? false
+              )
+            : throttle(
+                params ? () => value.fn(...params) : value.fn,
+                value?.timeout ?? 1000
+              )
+        );
+      } else {
+        throw new Error(
+          "[Directive: optimize]: `event` and `fn` are required, and `fn` must be a function"
+        );
+      }
+    } else {
+      throw new Error(
+        "[Directive: optimize]: only `debounce` and `throttle` are supported"
+      );
+    }
+  }
+};
diff --git a/Yi.Pure.Vue3/src/directives/perms/index.ts b/Yi.Pure.Vue3/src/directives/perms/index.ts
new file mode 100644
index 00000000..073c918b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/perms/index.ts
@@ -0,0 +1,15 @@
+import { hasPerms } from "@/utils/auth";
+import type { Directive, DirectiveBinding } from "vue";
+
+export const perms: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
+    const { value } = binding;
+    if (value) {
+      !hasPerms(value) && el.parentNode?.removeChild(el);
+    } else {
+      throw new Error(
+        "[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
+      );
+    }
+  }
+};
diff --git a/Yi.Pure.Vue3/src/directives/ripple/index.scss b/Yi.Pure.Vue3/src/directives/ripple/index.scss
new file mode 100644
index 00000000..061c82c9
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/ripple/index.scss
@@ -0,0 +1,48 @@
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+$ripple-animation-transition-in:
+  transform 0.4s cubic-bezier(0, 0, 0.2, 1),
+  opacity 0.2s cubic-bezier(0, 0, 0.2, 1) !default;
+$ripple-animation-transition-out: opacity 0.5s cubic-bezier(0, 0, 0.2, 1) !default;
+$ripple-animation-visible-opacity: 0.25 !default;
+
+.v-ripple {
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    border-radius: inherit;
+    contain: strict;
+  }
+
+  &__animation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    pointer-events: none;
+    background: currentcolor;
+    border-radius: 50%;
+    opacity: 0;
+    will-change: transform, opacity;
+
+    &--enter {
+      opacity: 0;
+      transition: none;
+    }
+
+    &--in {
+      opacity: $ripple-animation-visible-opacity;
+      transition: $ripple-animation-transition-in;
+    }
+
+    &--out {
+      opacity: 0;
+      transition: $ripple-animation-transition-out;
+    }
+  }
+}
diff --git a/Yi.Pure.Vue3/src/directives/ripple/index.ts b/Yi.Pure.Vue3/src/directives/ripple/index.ts
new file mode 100644
index 00000000..3fd94d9c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/directives/ripple/index.ts
@@ -0,0 +1,229 @@
+import "./index.scss";
+import { isObject } from "@pureadmin/utils";
+import type { Directive, DirectiveBinding } from "vue";
+
+export interface RippleOptions {
+  /** 自定义`ripple`颜色，支持`tailwindcss` */
+  class?: string;
+  /** 是否从中心扩散 */
+  center?: boolean;
+  circle?: boolean;
+}
+
+export interface RippleDirectiveBinding
+  extends Omit<DirectiveBinding, "modifiers" | "value"> {
+  value?: boolean | { class: string };
+  modifiers: {
+    center?: boolean;
+    circle?: boolean;
+  };
+}
+
+function transform(el: HTMLElement, value: string) {
+  el.style.transform = value;
+  el.style.webkitTransform = value;
+}
+
+const calculate = (
+  e: PointerEvent,
+  el: HTMLElement,
+  value: RippleOptions = {}
+) => {
+  const offset = el.getBoundingClientRect();
+
+  // 获取点击位置距离 el 的垂直和水平距离
+  let localX = e.clientX - offset.left;
+  let localY = e.clientY - offset.top;
+
+  let radius = 0;
+  let scale = 0.3;
+  // 计算点击位置到 el 顶点最远距离，即为圆的最大半径（勾股定理）
+  if (el._ripple?.circle) {
+    scale = 0.15;
+    radius = el.clientWidth / 2;
+    radius = value.center
+      ? radius
+      : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4;
+  } else {
+    radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2;
+  }
+
+  // 中心点坐标
+  const centerX = `${(el.clientWidth - radius * 2) / 2}px`;
+  const centerY = `${(el.clientHeight - radius * 2) / 2}px`;
+
+  // 点击位置坐标
+  const x = value.center ? centerX : `${localX - radius}px`;
+  const y = value.center ? centerY : `${localY - radius}px`;
+
+  return { radius, scale, x, y, centerX, centerY };
+};
+
+const ripples = {
+  show(e: PointerEvent, el: HTMLElement, value: RippleOptions = {}) {
+    if (!el?._ripple?.enabled) {
+      return;
+    }
+
+    // 创建 ripple 元素和 ripple 父元素
+    const container = document.createElement("span");
+    const animation = document.createElement("span");
+
+    container.appendChild(animation);
+    container.className = "v-ripple__container";
+
+    if (value.class) {
+      container.className += ` ${value.class}`;
+    }
+
+    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value);
+
+    // ripple 圆大小
+    const size = `${radius * 2}px`;
+
+    animation.className = "v-ripple__animation";
+    animation.style.width = size;
+    animation.style.height = size;
+
+    el.appendChild(container);
+
+    // 获取目标元素样式表
+    const computed = window.getComputedStyle(el);
+    // 防止 position 被覆盖导致 ripple 位置有问题
+    if (computed && computed.position === "static") {
+      el.style.position = "relative";
+      el.dataset.previousPosition = "static";
+    }
+
+    animation.classList.add("v-ripple__animation--enter");
+    animation.classList.add("v-ripple__animation--visible");
+    transform(
+      animation,
+      `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`
+    );
+    animation.dataset.activated = String(performance.now());
+
+    setTimeout(() => {
+      animation.classList.remove("v-ripple__animation--enter");
+      animation.classList.add("v-ripple__animation--in");
+      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
+    }, 0);
+  },
+
+  hide(el: HTMLElement | null) {
+    if (!el?._ripple?.enabled) return;
+
+    const ripples = el.getElementsByClassName("v-ripple__animation");
+
+    if (ripples.length === 0) return;
+    const animation = ripples[ripples.length - 1] as HTMLElement;
+
+    if (animation.dataset.isHiding) return;
+    else animation.dataset.isHiding = "true";
+
+    const diff = performance.now() - Number(animation.dataset.activated);
+    const delay = Math.max(250 - diff, 0);
+
+    setTimeout(() => {
+      animation.classList.remove("v-ripple__animation--in");
+      animation.classList.add("v-ripple__animation--out");
+
+      setTimeout(() => {
+        const ripples = el.getElementsByClassName("v-ripple__animation");
+        if (ripples.length === 1 && el.dataset.previousPosition) {
+          el.style.position = el.dataset.previousPosition;
+          delete el.dataset.previousPosition;
+        }
+
+        if (animation.parentNode?.parentNode === el)
+          el.removeChild(animation.parentNode);
+      }, 300);
+    }, delay);
+  }
+};
+
+function isRippleEnabled(value: any): value is true {
+  return typeof value === "undefined" || !!value;
+}
+
+function rippleShow(e: PointerEvent) {
+  const value: RippleOptions = {};
+  const element = e.currentTarget as HTMLElement | undefined;
+
+  if (!element?._ripple || element._ripple.touched) return;
+
+  value.center = element._ripple.centered;
+  if (element._ripple.class) {
+    value.class = element._ripple.class;
+  }
+
+  ripples.show(e, element, value);
+}
+
+function rippleHide(e: Event) {
+  const element = e.currentTarget as HTMLElement | null;
+  if (!element?._ripple) return;
+
+  window.setTimeout(() => {
+    if (element._ripple) {
+      element._ripple.touched = false;
+    }
+  });
+  ripples.hide(element);
+}
+
+function updateRipple(
+  el: HTMLElement,
+  binding: RippleDirectiveBinding,
+  wasEnabled: boolean
+) {
+  const { value, modifiers } = binding;
+  const enabled = isRippleEnabled(value);
+  if (!enabled) {
+    ripples.hide(el);
+  }
+
+  el._ripple = el._ripple ?? {};
+  el._ripple.enabled = enabled;
+  el._ripple.centered = modifiers.center;
+  el._ripple.circle = modifiers.circle;
+  if (isObject(value) && value.class) {
+    el._ripple.class = value.class;
+  }
+
+  if (enabled && !wasEnabled) {
+    el.addEventListener("pointerdown", rippleShow);
+    el.addEventListener("pointerup", rippleHide);
+  } else if (!enabled && wasEnabled) {
+    removeListeners(el);
+  }
+}
+
+function removeListeners(el: HTMLElement) {
+  el.removeEventListener("pointerdown", rippleShow);
+  el.removeEventListener("pointerup", rippleHide);
+}
+
+function mounted(el: HTMLElement, binding: RippleDirectiveBinding) {
+  updateRipple(el, binding, false);
+}
+
+function unmounted(el: HTMLElement) {
+  delete el._ripple;
+  removeListeners(el);
+}
+
+function updated(el: HTMLElement, binding: RippleDirectiveBinding) {
+  if (binding.value === binding.oldValue) {
+    return;
+  }
+
+  const wasEnabled = isRippleEnabled(binding.oldValue);
+  updateRipple(el, binding, wasEnabled);
+}
+
+export const Ripple: Directive = {
+  mounted,
+  unmounted,
+  updated
+};
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-content/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-content/index.vue
new file mode 100644
index 00000000..5810d665
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-content/index.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import LayFrame from "../lay-frame/index.vue";
+import LayFooter from "../lay-footer/index.vue";
+import { useTags } from "@/layout/hooks/useTag";
+import { useGlobal, isNumber } from "@pureadmin/utils";
+import BackTopIcon from "@/assets/svg/back_top.svg?component";
+import { h, computed, Transition, defineComponent } from "vue";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+const props = defineProps({
+  fixedHeader: Boolean
+});
+
+const { t } = useI18n();
+const { showModel } = useTags();
+const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
+
+const isKeepAlive = computed(() => {
+  return $config?.KeepAlive;
+});
+
+const transitions = computed(() => {
+  return route => {
+    return route.meta.transition;
+  };
+});
+
+const hideTabs = computed(() => {
+  return $storage?.configure.hideTabs;
+});
+
+const hideFooter = computed(() => {
+  return $storage?.configure.hideFooter;
+});
+
+const stretch = computed(() => {
+  return $storage?.configure.stretch;
+});
+
+const layout = computed(() => {
+  return $storage?.layout.layout === "vertical";
+});
+
+const getMainWidth = computed(() => {
+  return isNumber(stretch.value)
+    ? stretch.value + "px"
+    : stretch.value
+      ? "1440px"
+      : "100%";
+});
+
+const getSectionStyle = computed(() => {
+  return [
+    hideTabs.value && layout ? "padding-top: 48px;" : "",
+    !hideTabs.value && layout
+      ? showModel.value == "chrome"
+        ? "padding-top: 85px;"
+        : "padding-top: 81px;"
+      : "",
+    hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
+    !hideTabs.value && !layout.value
+      ? showModel.value == "chrome"
+        ? "padding-top: 85px;"
+        : "padding-top: 81px;"
+      : "",
+    props.fixedHeader
+      ? ""
+      : `padding-top: 0;${
+          hideTabs.value
+            ? "min-height: calc(100vh - 48px);"
+            : "min-height: calc(100vh - 86px);"
+        }`
+  ];
+});
+
+const transitionMain = defineComponent({
+  props: {
+    route: {
+      type: undefined,
+      required: true
+    }
+  },
+  render() {
+    const transitionName =
+      transitions.value(this.route)?.name || "fade-transform";
+    const enterTransition = transitions.value(this.route)?.enterTransition;
+    const leaveTransition = transitions.value(this.route)?.leaveTransition;
+    return h(
+      Transition,
+      {
+        name: enterTransition ? "pure-classes-transition" : transitionName,
+        enterActiveClass: enterTransition
+          ? `animate__animated ${enterTransition}`
+          : undefined,
+        leaveActiveClass: leaveTransition
+          ? `animate__animated ${leaveTransition}`
+          : undefined,
+        mode: "out-in",
+        appear: true
+      },
+      {
+        default: () => [this.$slots.default()]
+      }
+    );
+  }
+});
+</script>
+
+<template>
+  <section
+    :class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
+    :style="getSectionStyle"
+  >
+    <router-view>
+      <template #default="{ Component, route }">
+        <LayFrame :currComp="Component" :currRoute="route">
+          <template #default="{ Comp, fullPath, frameInfo }">
+            <el-scrollbar
+              v-if="fixedHeader"
+              :wrap-style="{
+                display: 'flex',
+                'flex-wrap': 'wrap',
+                'max-width': getMainWidth,
+                margin: '0 auto',
+                transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
+              }"
+              :view-style="{
+                display: 'flex',
+                flex: 'auto',
+                overflow: 'hidden',
+                'flex-direction': 'column'
+              }"
+            >
+              <el-backtop
+                :title="t('buttons.pureBackTop')"
+                target=".app-main .el-scrollbar__wrap"
+              >
+                <BackTopIcon />
+              </el-backtop>
+              <div class="grow">
+                <transitionMain :route="route">
+                  <keep-alive
+                    v-if="isKeepAlive"
+                    :include="usePermissionStoreHook().cachePageList"
+                  >
+                    <component
+                      :is="Comp"
+                      :key="fullPath"
+                      :frameInfo="frameInfo"
+                      class="main-content"
+                    />
+                  </keep-alive>
+                  <component
+                    :is="Comp"
+                    v-else
+                    :key="fullPath"
+                    :frameInfo="frameInfo"
+                    class="main-content"
+                  />
+                </transitionMain>
+              </div>
+              <LayFooter v-if="!hideFooter" />
+            </el-scrollbar>
+            <div v-else class="grow">
+              <transitionMain :route="route">
+                <keep-alive
+                  v-if="isKeepAlive"
+                  :include="usePermissionStoreHook().cachePageList"
+                >
+                  <component
+                    :is="Comp"
+                    :key="fullPath"
+                    :frameInfo="frameInfo"
+                    class="main-content"
+                  />
+                </keep-alive>
+                <component
+                  :is="Comp"
+                  v-else
+                  :key="fullPath"
+                  :frameInfo="frameInfo"
+                  class="main-content"
+                />
+              </transitionMain>
+            </div>
+          </template>
+        </LayFrame>
+      </template>
+    </router-view>
+
+    <!-- 页脚 -->
+    <LayFooter v-if="!hideFooter && !fixedHeader" />
+  </section>
+</template>
+
+<style scoped>
+.app-main {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.app-main-nofixed-header {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.main-content {
+  margin: 24px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-footer/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-footer/index.vue
new file mode 100644
index 00000000..77631343
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-footer/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { getConfig } from "@/config";
+
+const TITLE = getConfig("Title");
+</script>
+
+<template>
+  <footer
+    class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
+  >
+    Copyright © 2020-present
+    <a
+      class="hover:text-primary"
+      href="https://github.com/pure-admin"
+      target="_blank"
+    >
+      &nbsp;{{ TITLE }}
+    </a>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 0 8px;
+  font-size: 14px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-frame/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-frame/index.vue
new file mode 100644
index 00000000..b2bb9d51
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-frame/index.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { getConfig } from "@/config";
+import { useMultiFrame } from "@/layout/hooks/useMultiFrame";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { type Component, shallowRef, watch, computed } from "vue";
+import { type RouteRecordRaw, RouteLocationNormalizedLoaded } from "vue-router";
+
+const props = defineProps<{
+  currRoute: RouteLocationNormalizedLoaded;
+  currComp: Component;
+}>();
+
+const compList = shallowRef([]);
+const { setMap, getMap, MAP, delMap } = useMultiFrame();
+
+const keep = computed(() => {
+  return (
+    getConfig().KeepAlive &&
+    props.currRoute.meta?.keepAlive &&
+    !!props.currRoute.meta?.frameSrc
+  );
+});
+// 避免重新渲染 LayFrame
+const normalComp = computed(() => !keep.value && props.currComp);
+
+watch(useMultiTagsStoreHook().multiTags, (tags: any) => {
+  if (!Array.isArray(tags) || !keep.value) {
+    return;
+  }
+  const iframeTags = tags.filter(i => i.meta?.frameSrc);
+  // tags必须是小于MAP，才是做了关闭动作，因为MAP插入的顺序在tags变化后发生
+  if (iframeTags.length < MAP.size) {
+    for (const i of MAP.keys()) {
+      if (!tags.some(s => s.path === i)) {
+        delMap(i);
+        compList.value = getMap();
+      }
+    }
+  }
+});
+
+watch(
+  () => props.currRoute.fullPath,
+  path => {
+    const multiTags = useMultiTagsStoreHook().multiTags as RouteRecordRaw[];
+    const iframeTags = multiTags.filter(i => i.meta?.frameSrc);
+    if (keep.value) {
+      if (iframeTags.length !== MAP.size) {
+        const sameKey = [...MAP.keys()].find(i => path === i);
+        if (!sameKey) {
+          // 添加缓存
+          setMap(path, props.currComp);
+        }
+      }
+    }
+
+    if (MAP.size > 0) {
+      compList.value = getMap();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+<template>
+  <template v-for="[fullPath, Comp] in compList" :key="fullPath">
+    <div v-show="fullPath === currRoute.fullPath" class="w-full h-full">
+      <slot
+        :fullPath="fullPath"
+        :Comp="Comp"
+        :frameInfo="{ frameSrc: currRoute.meta?.frameSrc, fullPath }"
+      />
+    </div>
+  </template>
+  <div v-show="!keep" class="w-full h-full">
+    <slot :Comp="normalComp" :fullPath="currRoute.fullPath" frameInfo />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-navbar/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-navbar/index.vue
new file mode 100644
index 00000000..691d880e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-navbar/index.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { useNav } from "@/layout/hooks/useNav";
+import LaySearch from "../lay-search/index.vue";
+import LayNotice from "../lay-notice/index.vue";
+import LayNavMix from "../lay-sidebar/NavMix.vue";
+import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
+import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
+import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vue";
+import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
+
+import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
+import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Check from "@iconify-icons/ep/check";
+
+const {
+  layout,
+  device,
+  logout,
+  onPanel,
+  pureApp,
+  username,
+  userAvatar,
+  avatarsStyle,
+  toggleSideBar,
+  toAccountSettings,
+  getDropdownItemStyle,
+  getDropdownItemClass
+} = useNav();
+
+const { t, locale, translationCh, translationEn } = useTranslationLang();
+</script>
+
+<template>
+  <div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
+    <LaySidebarTopCollapse
+      v-if="device === 'mobile'"
+      class="hamburger-container"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
+
+    <LaySidebarBreadCrumb
+      v-if="layout !== 'mix' && device !== 'mobile'"
+      class="breadcrumb-container"
+    />
+
+    <LayNavMix v-if="layout === 'mix'" />
+
+    <div v-if="layout === 'vertical'" class="vertical-header-right">
+      <!-- 菜单搜索 -->
+      <LaySearch id="header-search" />
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" trigger="click">
+        <GlobalizationIcon
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
+        />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <IconifyIconOffline
+                v-show="locale === 'zh'"
+                class="check-zh"
+                :icon="Check"
+              />
+              简体中文
+            </el-dropdown-item>
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'en')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              @click="translationEn"
+            >
+              <span v-show="locale === 'en'" class="check-en">
+                <IconifyIconOffline :icon="Check" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 全屏 -->
+      <LaySidebarFullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <LayNotice id="header-notice" />
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover select-none">
+          <img :src="userAvatar" :style="avatarsStyle" />
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="toAccountSettings">
+              <IconifyIconOffline
+                :icon="AccountSettingsIcon"
+                style="margin: 5px"
+              />
+              {{ t("buttons.pureAccountSettings") }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              {{ t("buttons.pureLoginOut") }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span
+        class="set-icon navbar-bg-hover"
+        :title="t('buttons.pureOpenSystemSet')"
+        @click="onPanel"
+      >
+        <IconifyIconOffline :icon="Setting" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  width: 100%;
+  height: 48px;
+  overflow: hidden;
+
+  .hamburger-container {
+    float: left;
+    height: 100%;
+    line-height: 48px;
+    cursor: pointer;
+  }
+
+  .vertical-header-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 280px;
+    height: 48px;
+    color: #000000d9;
+
+    .el-dropdown-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      height: 48px;
+      padding: 10px;
+      color: #000000d9;
+      cursor: pointer;
+
+      p {
+        font-size: 14px;
+      }
+
+      img {
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+    margin-left: 16px;
+  }
+}
+
+.translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+  }
+
+  .check-en {
+    position: absolute;
+    left: 20px;
+  }
+}
+
+.logout {
+  width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-notice/components/NoticeItem.vue b/Yi.Pure.Vue3/src/layout/components/lay-notice/components/NoticeItem.vue
new file mode 100644
index 00000000..823d9cd8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-notice/components/NoticeItem.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ListItem } from "../data";
+import { ref, PropType, nextTick } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+import { deviceDetection } from "@pureadmin/utils";
+
+defineProps({
+  noticeItem: {
+    type: Object as PropType<ListItem>,
+    default: () => {}
+  }
+});
+
+const titleRef = ref(null);
+const titleTooltip = ref(false);
+const descriptionRef = ref(null);
+const descriptionTooltip = ref(false);
+const { tooltipEffect } = useNav();
+const isMobile = deviceDetection();
+
+function hoverTitle() {
+  nextTick(() => {
+    titleRef.value?.scrollWidth > titleRef.value?.clientWidth
+      ? (titleTooltip.value = true)
+      : (titleTooltip.value = false);
+  });
+}
+
+function hoverDescription(event, description) {
+  // currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除
+  const tempTag = document.createElement("span");
+  tempTag.innerText = description;
+  tempTag.className = "getDescriptionWidth";
+  document.querySelector("body").appendChild(tempTag);
+  const currentWidth = (
+    document.querySelector(".getDescriptionWidth") as HTMLSpanElement
+  ).offsetWidth;
+  document.querySelector(".getDescriptionWidth").remove();
+
+  // cellWidth为容器的宽度
+  const cellWidth = event.target.offsetWidth;
+
+  // 当文本宽度大于容器宽度两倍时，代表文本显示超过两行
+  currentWidth > 2 * cellWidth
+    ? (descriptionTooltip.value = true)
+    : (descriptionTooltip.value = false);
+}
+</script>
+
+<template>
+  <div
+    class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
+  >
+    <el-avatar
+      v-if="noticeItem.avatar"
+      :size="30"
+      :src="noticeItem.avatar"
+      class="notice-container-avatar"
+    />
+    <div class="notice-container-text">
+      <div class="notice-text-title text-[#000000d9] dark:text-white">
+        <el-tooltip
+          popper-class="notice-title-popper"
+          :effect="tooltipEffect"
+          :disabled="!titleTooltip"
+          :content="noticeItem.title"
+          placement="top-start"
+          :enterable="!isMobile"
+        >
+          <div
+            ref="titleRef"
+            class="notice-title-content"
+            @mouseover="hoverTitle"
+          >
+            {{ noticeItem.title }}
+          </div>
+        </el-tooltip>
+        <el-tag
+          v-if="noticeItem?.extra"
+          :type="noticeItem?.status"
+          size="small"
+          class="notice-title-extra"
+        >
+          {{ noticeItem?.extra }}
+        </el-tag>
+      </div>
+
+      <el-tooltip
+        popper-class="notice-title-popper"
+        :effect="tooltipEffect"
+        :disabled="!descriptionTooltip"
+        :content="noticeItem.description"
+        placement="top-start"
+      >
+        <div
+          ref="descriptionRef"
+          class="notice-text-description"
+          @mouseover="hoverDescription($event, noticeItem.description)"
+        >
+          {{ noticeItem.description }}
+        </div>
+      </el-tooltip>
+      <div class="notice-text-datetime text-[#00000073] dark:text-white">
+        {{ noticeItem.datetime }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.notice-title-popper {
+  max-width: 238px;
+}
+</style>
+<style scoped lang="scss">
+.notice-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 12px 0;
+
+  // border-bottom: 1px solid #f0f0f0;
+
+  .notice-container-avatar {
+    margin-right: 16px;
+    background: #fff;
+  }
+
+  .notice-container-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .notice-text-title {
+      display: flex;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1.5715;
+      cursor: pointer;
+
+      .notice-title-content {
+        flex: 1;
+        width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .notice-title-extra {
+        float: right;
+        margin-top: -1.5px;
+        font-weight: 400;
+      }
+    }
+
+    .notice-text-description,
+    .notice-text-datetime {
+      font-size: 12px;
+      line-height: 1.5715;
+    }
+
+    .notice-text-description {
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .notice-text-datetime {
+      margin-top: 4px;
+    }
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-notice/components/NoticeList.vue b/Yi.Pure.Vue3/src/layout/components/lay-notice/components/NoticeList.vue
new file mode 100644
index 00000000..7bc9922c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-notice/components/NoticeList.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { PropType } from "vue";
+import { ListItem } from "../data";
+import NoticeItem from "./NoticeItem.vue";
+import { transformI18n } from "@/plugins/i18n";
+
+defineProps({
+  list: {
+    type: Array as PropType<Array<ListItem>>,
+    default: () => []
+  },
+  emptyText: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<template>
+  <div v-if="list.length">
+    <NoticeItem v-for="(item, index) in list" :key="index" :noticeItem="item" />
+  </div>
+  <el-empty v-else :description="transformI18n(emptyText)" />
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-notice/data.ts b/Yi.Pure.Vue3/src/layout/components/lay-notice/data.ts
new file mode 100644
index 00000000..bd49f5e5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-notice/data.ts
@@ -0,0 +1,99 @@
+import { $t } from "@/plugins/i18n";
+
+export interface ListItem {
+  avatar: string;
+  title: string;
+  datetime: string;
+  type: string;
+  description: string;
+  status?: "primary" | "success" | "warning" | "info" | "danger";
+  extra?: string;
+}
+
+export interface TabItem {
+  key: string;
+  name: string;
+  list: ListItem[];
+  emptyText: string;
+}
+
+export const noticesData: TabItem[] = [
+  {
+    key: "1",
+    name: $t("status.pureNotify"),
+    list: [],
+    emptyText: $t("status.pureNoNotify")
+  },
+  {
+    key: "2",
+    name: $t("status.pureMessage"),
+    list: [
+      {
+        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile1.svg",
+        title: "小铭 评论了你",
+        description: "诚在于心，信在于行，诚信在于心行合一。",
+        datetime: "今天",
+        type: "2"
+      },
+      {
+        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile2.svg",
+        title: "李白 回复了你",
+        description: "长风破浪会有时，直挂云帆济沧海。",
+        datetime: "昨天",
+        type: "2"
+      },
+      {
+        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile5.svg",
+        title: "标题",
+        description:
+          "请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
+        datetime: "时间",
+        type: "2"
+      }
+    ],
+    emptyText: $t("status.pureNoMessage")
+  },
+  {
+    key: "3",
+    name: $t("status.pureTodo"),
+    list: [
+      {
+        avatar: "",
+        title: "第三方紧急代码变更",
+        description:
+          "小林提交于 2024-05-10，需在 2024-05-11 前完成代码变更任务",
+        datetime: "",
+        extra: "马上到期",
+        status: "danger",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "版本发布",
+        description: "指派小铭于 2024-06-18 前完成更新并发布",
+        datetime: "",
+        extra: "已耗时 8 天",
+        status: "warning",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "新功能开发",
+        description: "开发多租户管理",
+        datetime: "",
+        extra: "进行中",
+        type: "3"
+      },
+      {
+        avatar: "",
+        title: "任务名称",
+        description: "任务需要在 2030-10-30 10:00 前启动",
+        datetime: "",
+        extra: "未开始",
+        status: "info",
+        type: "3"
+      }
+    ],
+    emptyText: $t("status.pureNoTodo")
+  }
+];
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-notice/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-notice/index.vue
new file mode 100644
index 00000000..d85cf0f7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-notice/index.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, computed } from "vue";
+import { noticesData } from "./data";
+import NoticeList from "./components/NoticeList.vue";
+import BellIcon from "@iconify-icons/ep/bell";
+
+const { t } = useI18n();
+const noticesNum = ref(0);
+const notices = ref(noticesData);
+const activeKey = ref(noticesData[0]?.key);
+
+notices.value.map(v => (noticesNum.value += v.list.length));
+
+const getLabel = computed(
+  () => item =>
+    t(item.name) + (item.list.length > 0 ? `(${item.list.length})` : "")
+);
+</script>
+
+<template>
+  <el-dropdown trigger="click" placement="bottom-end">
+    <span
+      :class="[
+        'dropdown-badge',
+        'navbar-bg-hover',
+        'select-none',
+        Number(noticesNum) !== 0 && 'mr-[10px]'
+      ]"
+    >
+      <el-badge :value="Number(noticesNum) === 0 ? '' : noticesNum" :max="99">
+        <span class="header-notice-icon">
+          <IconifyIconOffline :icon="BellIcon" />
+        </span>
+      </el-badge>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-tabs
+          v-model="activeKey"
+          :stretch="true"
+          class="dropdown-tabs"
+          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
+        >
+          <el-empty
+            v-if="notices.length === 0"
+            :description="t('status.pureNoMessage')"
+            :image-size="60"
+          />
+          <span v-else>
+            <template v-for="item in notices" :key="item.key">
+              <el-tab-pane :label="getLabel(item)" :name="`${item.key}`">
+                <el-scrollbar max-height="330px">
+                  <div class="noticeList-container">
+                    <NoticeList :list="item.list" :emptyText="item.emptyText" />
+                  </div>
+                </el-scrollbar>
+              </el-tab-pane>
+            </template>
+          </span>
+        </el-tabs>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style lang="scss" scoped>
+.dropdown-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 48px;
+  cursor: pointer;
+
+  .header-notice-icon {
+    font-size: 18px;
+  }
+}
+
+.dropdown-tabs {
+  .noticeList-container {
+    padding: 15px 24px 0;
+  }
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+
+  :deep(.el-tabs__nav-wrap)::after {
+    height: 1px;
+  }
+
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 36px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-panel/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-panel/index.vue
new file mode 100644
index 00000000..fb4fb20a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-panel/index.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { emitter } from "@/utils/mitt";
+import { onClickOutside } from "@vueuse/core";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import CloseIcon from "@iconify-icons/ep/close";
+
+const target = ref(null);
+const show = ref<Boolean>(false);
+
+const iconClass = computed(() => {
+  return [
+    "w-[22px]",
+    "h-[22px]",
+    "flex",
+    "justify-center",
+    "items-center",
+    "outline-none",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
+const { t } = useI18n();
+const { onReset } = useDataThemeChange();
+
+onClickOutside(target, (event: any) => {
+  if (event.clientX > target.value.offsetLeft) return;
+  show.value = false;
+});
+
+onMounted(() => {
+  emitter.on("openPanel", () => {
+    show.value = true;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`openPanel`公共事件，防止多次触发
+  emitter.off("openPanel");
+});
+</script>
+
+<template>
+  <div :class="{ show }">
+    <div class="right-panel-background" />
+    <div ref="target" class="right-panel bg-bg_color">
+      <div
+        class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
+      >
+        <h4 class="dark:text-white">
+          {{ t("panel.pureSystemSet") }}
+        </h4>
+        <span
+          v-tippy="{
+            content: t('panel.pureCloseSystemSet'),
+            placement: 'bottom-start',
+            zIndex: 41000
+          }"
+          :class="iconClass"
+        >
+          <IconifyIconOffline
+            class="dark:text-white"
+            width="18px"
+            height="18px"
+            :icon="CloseIcon"
+            @click="show = !show"
+          />
+        </span>
+      </div>
+      <el-scrollbar>
+        <slot />
+      </el-scrollbar>
+
+      <div
+        class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]"
+      >
+        <el-button
+          v-tippy="{
+            content: t('panel.pureClearCacheAndToLogin'),
+            placement: 'left-start',
+            zIndex: 41000
+          }"
+          type="danger"
+          text
+          bg
+          @click="onReset"
+        >
+          {{ t("panel.pureClearCache") }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-scrollbar) {
+  height: calc(100vh - 110px);
+}
+
+.right-panel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: rgb(0 0 0 / 20%);
+  opacity: 0;
+  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+}
+
+.right-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 40000;
+  width: 100%;
+  max-width: 280px;
+  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+  transform: translate(100%);
+}
+
+.show {
+  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+
+  .right-panel-background {
+    z-index: 20000;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+  }
+
+  .right-panel {
+    transform: translate(0);
+  }
+}
+
+.project-configuration {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchFooter.vue b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchFooter.vue
new file mode 100644
index 00000000..d8350d0f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchFooter.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useNav } from "@/layout/hooks/useNav";
+import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
+import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+
+withDefaults(defineProps<{ total: number }>(), {
+  total: 0
+});
+
+const { t } = useI18n();
+const { device } = useNav();
+</script>
+
+<template>
+  <div class="search-footer text-[#333] dark:text-white">
+    <span class="search-footer-item">
+      <EnterOutlined class="icon" />
+      {{ t("buttons.pureConfirm") }}
+    </span>
+    <span class="search-footer-item">
+      <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
+      <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
+      {{ t("buttons.pureSwitch") }}
+    </span>
+    <span class="search-footer-item">
+      <MdiKeyboardEsc class="icon" />
+      {{ t("buttons.pureClose") }}
+    </span>
+    <p v-if="device !== 'mobile' && total > 0" class="search-footer-total">
+      {{ `${t("search.pureTotal")} ${total}` }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-footer {
+  display: flex;
+
+  .search-footer-item {
+    display: flex;
+    align-items: center;
+    margin-right: 14px;
+  }
+
+  .icon {
+    padding: 2px;
+    margin-right: 3px;
+    font-size: 20px;
+    box-shadow:
+      inset 0 -2px #cdcde6,
+      inset 0 0 1px 1px #fff,
+      0 1px 2px 1px #1e235a66;
+  }
+
+  .search-footer-total {
+    position: absolute;
+    right: 20px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchHistory.vue b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchHistory.vue
new file mode 100644
index 00000000..87d5488c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchHistory.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import Sortable from "sortablejs";
+import { useI18n } from "vue-i18n";
+import SearchHistoryItem from "./SearchHistoryItem.vue";
+import type { optionsItem, dragItem, Props } from "../types";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useResizeObserver, isArray, delay } from "@pureadmin/utils";
+import { ref, watch, nextTick, computed, getCurrentInstance } from "vue";
+
+interface Emits {
+  (e: "update:value", val: string): void;
+  (e: "enter"): void;
+  (e: "collect", val: optionsItem): void;
+  (e: "delete", val: optionsItem): void;
+  (e: "drag", val: dragItem): void;
+}
+
+const historyRef = ref();
+const innerHeight = ref();
+/** 判断是否停止鼠标移入事件处理 */
+const stopMouseEvent = ref(false);
+
+const { t } = useI18n();
+const emit = defineEmits<Emits>();
+const instance = getCurrentInstance()!;
+const props = withDefaults(defineProps<Props>(), {});
+
+const itemStyle = computed(() => {
+  return item => {
+    return {
+      background:
+        item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
+      color: item.path === active.value ? "#fff" : "",
+      fontSize: item.path === active.value ? "16px" : "14px"
+    };
+  };
+});
+
+const titleStyle = computed(() => {
+  return {
+    color: useEpThemeStoreHook().epThemeColor,
+    fontWeight: 500
+  };
+});
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit("update:value", val);
+  }
+});
+
+watch(
+  () => props.value,
+  newValue => {
+    if (newValue) {
+      if (stopMouseEvent.value) {
+        delay(100).then(() => (stopMouseEvent.value = false));
+      }
+    }
+  }
+);
+
+const historyList = computed(() => {
+  return props.options.filter(item => item.type === "history");
+});
+
+const collectList = computed(() => {
+  return props.options.filter(item => item.type === "collect");
+});
+
+function handleCollect(item) {
+  emit("collect", item);
+}
+
+function handleDelete(item) {
+  stopMouseEvent.value = true;
+  emit("delete", item);
+}
+
+/** 鼠标移入 */
+async function handleMouse(item) {
+  if (!stopMouseEvent.value) active.value = item.path;
+}
+
+function handleTo() {
+  emit("enter");
+}
+
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(historyRef, resizeResult);
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`historyItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = isArray(curInstance)
+    ? (curInstance[0] as ElRef)
+    : (curInstance as ElRef);
+  const scrollTop = curRef.offsetTop + 128; // 128 两个history-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+const handleChangeIndex = (evt): void => {
+  emit("drag", { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
+};
+
+let sortableInstance = null;
+
+watch(
+  collectList,
+  val => {
+    if (val.length > 1) {
+      nextTick(() => {
+        const wrapper: HTMLElement =
+          document.querySelector(".collect-container");
+        if (!wrapper || sortableInstance) return;
+        sortableInstance = Sortable.create(wrapper, {
+          animation: 160,
+          onStart: event => {
+            event.item.style.cursor = "move";
+          },
+          onEnd: event => {
+            event.item.style.cursor = "pointer";
+          },
+          onUpdate: handleChangeIndex
+        });
+        resizeResult();
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+defineExpose({ handleScroll });
+</script>
+
+<template>
+  <div ref="historyRef" class="history">
+    <template v-if="historyList.length">
+      <div :style="titleStyle">
+        {{ t("search.pureHistory") }}
+      </div>
+      <div
+        v-for="(item, index) in historyList"
+        :key="item.path"
+        :ref="'historyItemRef' + index"
+        class="history-item dark:bg-[#1d1d1d]"
+        :style="itemStyle(item)"
+        @click="handleTo"
+        @mouseenter="handleMouse(item)"
+      >
+        <SearchHistoryItem
+          :item="item"
+          @delete-item="handleDelete"
+          @collect-item="handleCollect"
+        />
+      </div>
+    </template>
+    <template v-if="collectList.length">
+      <div :style="titleStyle">
+        {{
+          `${t("search.pureCollect")}${collectList.length > 1 ? t("search.pureDragSort") : ""}`
+        }}
+      </div>
+      <div class="collect-container">
+        <div
+          v-for="(item, index) in collectList"
+          :key="item.path"
+          :ref="'historyItemRef' + (index + historyList.length)"
+          class="history-item dark:bg-[#1d1d1d]"
+          :style="itemStyle(item)"
+          @click="handleTo"
+          @mouseenter="handleMouse(item)"
+        >
+          <SearchHistoryItem :item="item" @delete-item="handleDelete" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.history {
+  padding-bottom: 12px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 14px;
+    margin: 8px auto 10px;
+    cursor: pointer;
+    border: 0.1px solid #ccc;
+    border-radius: 4px;
+    transition: font-size 0.16s;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchHistoryItem.vue b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchHistoryItem.vue
new file mode 100644
index 00000000..0ee9f194
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchHistoryItem.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { optionsItem } from "../types";
+import { transformI18n } from "@/plugins/i18n";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import StarIcon from "@iconify-icons/ep/star";
+import CloseIcon from "@iconify-icons/ep/close";
+
+interface Props {
+  item: optionsItem;
+}
+
+interface Emits {
+  (e: "collectItem", val: optionsItem): void;
+  (e: "deleteItem", val: optionsItem): void;
+}
+
+const emit = defineEmits<Emits>();
+withDefaults(defineProps<Props>(), {});
+
+function handleCollect(item) {
+  emit("collectItem", item);
+}
+
+function handleDelete(item) {
+  emit("deleteItem", item);
+}
+</script>
+
+<template>
+  <component :is="useRenderIcon(item.meta?.icon)" />
+  <span class="history-item-title">
+    {{ transformI18n(item.meta?.title) }}
+  </span>
+  <IconifyIconOffline
+    v-show="item.type === 'history'"
+    :icon="StarIcon"
+    class="w-[18px] h-[18px] mr-2 hover:text-[#d7d5d4]"
+    @click.stop="handleCollect(item)"
+  />
+  <IconifyIconOffline
+    :icon="CloseIcon"
+    class="w-[18px] h-[18px] hover:text-[#d7d5d4] cursor-pointer"
+    @click.stop="handleDelete(item)"
+  />
+</template>
+
+<style lang="scss" scoped>
+.history-item-title {
+  display: flex;
+  flex: 1;
+  margin-left: 5px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchModal.vue b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchModal.vue
new file mode 100644
index 00000000..f6993f6f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchModal.vue
@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import { match } from "pinyin-pro";
+import { useI18n } from "vue-i18n";
+import { getConfig } from "@/config";
+import { useRouter } from "vue-router";
+import SearchResult from "./SearchResult.vue";
+import SearchFooter from "./SearchFooter.vue";
+import { useNav } from "@/layout/hooks/useNav";
+import SearchHistory from "./SearchHistory.vue";
+import { transformI18n, $t } from "@/plugins/i18n";
+import type { optionsItem, dragItem } from "../types";
+import { ref, computed, shallowRef, watch } from "vue";
+import { useDebounceFn, onKeyStroke } from "@vueuse/core";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
+import SearchIcon from "@iconify-icons/ri/search-line";
+
+interface Props {
+  /** 弹窗显隐 */
+  value: boolean;
+}
+
+interface Emits {
+  (e: "update:value", val: boolean): void;
+}
+
+const { device } = useNav();
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {});
+
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const HISTORY_TYPE = "history";
+const COLLECT_TYPE = "collect";
+const LOCALEHISTORYKEY = "menu-search-history";
+const LOCALECOLLECTKEY = "menu-search-collect";
+
+const keyword = ref("");
+const resultRef = ref();
+const historyRef = ref();
+const scrollbarRef = ref();
+const activePath = ref("");
+const historyPath = ref("");
+const resultOptions = shallowRef([]);
+const historyOptions = shallowRef([]);
+const handleSearch = useDebounceFn(search, 300);
+const historyNum = getConfig().MenuSearchHistory;
+const inputRef = ref<HTMLInputElement | null>(null);
+
+/** 菜单树形结构 */
+const menusData = computed(() => {
+  return cloneDeep(usePermissionStoreHook().wholeMenus);
+});
+
+const show = computed({
+  get() {
+    return props.value;
+  },
+  set(val: boolean) {
+    emit("update:value", val);
+  }
+});
+
+watch(
+  () => props.value,
+  newValue => {
+    if (newValue) getHistory();
+  }
+);
+
+const showSearchResult = computed(() => {
+  return keyword.value && resultOptions.value.length > 0;
+});
+
+const showSearchHistory = computed(() => {
+  return !keyword.value && historyOptions.value.length > 0;
+});
+
+const showEmpty = computed(() => {
+  return (
+    (!keyword.value && historyOptions.value.length === 0) ||
+    (keyword.value && resultOptions.value.length === 0)
+  );
+});
+
+function getStorageItem(key) {
+  return storageLocal().getItem<optionsItem[]>(key) || [];
+}
+
+function setStorageItem(key, value) {
+  storageLocal().setItem(key, value);
+}
+
+/** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
+function flatTree(arr) {
+  const res = [];
+  function deep(arr) {
+    arr.forEach(item => {
+      res.push(item);
+      item.children && deep(item.children);
+    });
+  }
+  deep(arr);
+  return res;
+}
+
+/** 查询 */
+function search() {
+  const flatMenusData = flatTree(menusData.value);
+  resultOptions.value = flatMenusData.filter(menu =>
+    keyword.value
+      ? transformI18n(menu.meta?.title)
+          .toLocaleLowerCase()
+          .includes(keyword.value.toLocaleLowerCase().trim()) ||
+        (locale.value === "zh" &&
+          !isAllEmpty(
+            match(
+              transformI18n(menu.meta?.title).toLocaleLowerCase(),
+              keyword.value.toLocaleLowerCase().trim()
+            )
+          ))
+      : false
+  );
+  activePath.value =
+    resultOptions.value?.length > 0 ? resultOptions.value[0].path : "";
+}
+
+function handleClose() {
+  show.value = false;
+  /** 延时处理防止用户看到某些操作 */
+  setTimeout(() => {
+    resultOptions.value = [];
+    historyPath.value = "";
+    keyword.value = "";
+  }, 200);
+}
+
+function scrollTo(index) {
+  const ref = resultOptions.value.length ? resultRef.value : historyRef.value;
+  const scrollTop = ref.handleScroll(index);
+  scrollbarRef.value.setScrollTop(scrollTop);
+}
+
+/** 获取当前选项和路径 */
+function getCurrentOptionsAndPath() {
+  const isResultOptions = resultOptions.value.length > 0;
+  const options = isResultOptions ? resultOptions.value : historyOptions.value;
+  const currentPath = isResultOptions ? activePath.value : historyPath.value;
+  return { options, currentPath, isResultOptions };
+}
+
+/** 更新路径并滚动到指定项 */
+function updatePathAndScroll(newIndex, isResultOptions) {
+  if (isResultOptions) {
+    activePath.value = resultOptions.value[newIndex].path;
+  } else {
+    historyPath.value = historyOptions.value[newIndex].path;
+  }
+  scrollTo(newIndex);
+}
+
+/** key up */
+function handleUp() {
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0) return;
+  const index = options.findIndex(item => item.path === currentPath);
+  const prevIndex = (index - 1 + options.length) % options.length;
+  updatePathAndScroll(prevIndex, isResultOptions);
+}
+
+/** key down */
+function handleDown() {
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0) return;
+  const index = options.findIndex(item => item.path === currentPath);
+  const nextIndex = (index + 1) % options.length;
+  updatePathAndScroll(nextIndex, isResultOptions);
+}
+
+/** key enter */
+function handleEnter() {
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0 || currentPath === "") return;
+  const index = options.findIndex(item => item.path === currentPath);
+  if (index === -1) return;
+  if (isResultOptions) {
+    saveHistory();
+  } else {
+    updateHistory();
+  }
+  router.push(options[index].path);
+  handleClose();
+}
+
+/** 删除历史记录 */
+function handleDelete(item) {
+  const key = item.type === HISTORY_TYPE ? LOCALEHISTORYKEY : LOCALECOLLECTKEY;
+  let list = getStorageItem(key);
+  list = list.filter(listItem => listItem.path !== item.path);
+  setStorageItem(key, list);
+  getHistory();
+}
+
+/** 收藏历史记录 */
+function handleCollect(item) {
+  let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  let searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  searchHistoryList = searchHistoryList.filter(
+    historyItem => historyItem.path !== item.path
+  );
+  setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
+  if (!searchCollectList.some(collectItem => collectItem.path === item.path)) {
+    searchCollectList.unshift({ ...item, type: COLLECT_TYPE });
+    setStorageItem(LOCALECOLLECTKEY, searchCollectList);
+  }
+  getHistory();
+}
+
+/** 存储搜索记录 */
+function saveHistory() {
+  const { path, meta } = resultOptions.value.find(
+    item => item.path === activePath.value
+  );
+  const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  const isCollected = searchCollectList.some(item => item.path === path);
+  const existingIndex = searchHistoryList.findIndex(item => item.path === path);
+  if (!isCollected) {
+    if (existingIndex !== -1) searchHistoryList.splice(existingIndex, 1);
+    if (searchHistoryList.length >= historyNum) searchHistoryList.pop();
+    searchHistoryList.unshift({ path, meta, type: HISTORY_TYPE });
+    storageLocal().setItem(LOCALEHISTORYKEY, searchHistoryList);
+  }
+}
+
+/** 更新存储的搜索记录 */
+function updateHistory() {
+  let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const historyIndex = searchHistoryList.findIndex(
+    item => item.path === historyPath.value
+  );
+  if (historyIndex !== -1) {
+    const [historyItem] = searchHistoryList.splice(historyIndex, 1);
+    searchHistoryList.unshift(historyItem);
+    setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
+  }
+}
+
+/** 获取本地历史记录 */
+function getHistory() {
+  const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  historyOptions.value = [...searchHistoryList, ...searchCollectList];
+  historyPath.value = historyOptions.value[0]?.path;
+}
+
+/** 拖拽改变收藏顺序 */
+function handleDrag(item: dragItem) {
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  const [reorderedItem] = searchCollectList.splice(item.oldIndex, 1);
+  searchCollectList.splice(item.newIndex, 0, reorderedItem);
+  storageLocal().setItem(LOCALECOLLECTKEY, searchCollectList);
+  historyOptions.value = [
+    ...getStorageItem(LOCALEHISTORYKEY),
+    ...getStorageItem(LOCALECOLLECTKEY)
+  ];
+  historyPath.value = reorderedItem.path;
+}
+
+onKeyStroke("Enter", handleEnter);
+onKeyStroke("ArrowUp", handleUp);
+onKeyStroke("ArrowDown", handleDown);
+</script>
+
+<template>
+  <el-dialog
+    v-model="show"
+    top="5vh"
+    class="pure-search-dialog"
+    :show-close="false"
+    :width="device === 'mobile' ? '80vw' : '40vw'"
+    :before-close="handleClose"
+    :style="{
+      borderRadius: '6px'
+    }"
+    append-to-body
+    @opened="inputRef.focus()"
+    @closed="inputRef.blur()"
+  >
+    <el-input
+      ref="inputRef"
+      v-model="keyword"
+      size="large"
+      clearable
+      :placeholder="t('search.purePlaceholder')"
+      @input="handleSearch"
+    >
+      <template #prefix>
+        <IconifyIconOffline
+          :icon="SearchIcon"
+          class="text-primary w-[24px] h-[24px]"
+        />
+      </template>
+    </el-input>
+    <div class="search-content">
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
+        <el-empty v-if="showEmpty" :description="t('search.pureEmpty')" />
+        <SearchHistory
+          v-if="showSearchHistory"
+          ref="historyRef"
+          v-model:value="historyPath"
+          :options="historyOptions"
+          @click="handleEnter"
+          @delete="handleDelete"
+          @collect="handleCollect"
+          @drag="handleDrag"
+        />
+        <SearchResult
+          v-if="showSearchResult"
+          ref="resultRef"
+          v-model:value="activePath"
+          :options="resultOptions"
+          @click="handleEnter"
+        />
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <SearchFooter :total="resultOptions.length" />
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.search-content {
+  margin-top: 12px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchResult.vue b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchResult.vue
new file mode 100644
index 00000000..12507b15
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-search/components/SearchResult.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { Props } from "../types";
+import { transformI18n } from "@/plugins/i18n";
+import { useResizeObserver } from "@pureadmin/utils";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ref, computed, getCurrentInstance, onMounted } from "vue";
+import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
+
+interface Emits {
+  (e: "update:value", val: string): void;
+  (e: "enter"): void;
+}
+
+const resultRef = ref();
+const innerHeight = ref();
+const emit = defineEmits<Emits>();
+const instance = getCurrentInstance()!;
+const props = withDefaults(defineProps<Props>(), {});
+
+const itemStyle = computed(() => {
+  return item => {
+    return {
+      background:
+        item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
+      color: item.path === active.value ? "#fff" : "",
+      fontSize: item.path === active.value ? "16px" : "14px"
+    };
+  };
+});
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit("update:value", val);
+  }
+});
+
+/** 鼠标移入 */
+async function handleMouse(item) {
+  active.value = item.path;
+}
+
+function handleTo() {
+  emit("enter");
+}
+
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(resultRef, resizeResult);
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = curInstance[0] as ElRef;
+  const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+onMounted(() => {
+  resizeResult();
+});
+
+defineExpose({ handleScroll });
+</script>
+
+<template>
+  <div ref="resultRef" class="result">
+    <div
+      v-for="(item, index) in options"
+      :key="item.path"
+      :ref="'resultItemRef' + index"
+      class="result-item dark:bg-[#1d1d1d]"
+      :style="itemStyle(item)"
+      @click="handleTo"
+      @mouseenter="handleMouse(item)"
+    >
+      <component :is="useRenderIcon(item.meta?.icon)" />
+      <span class="result-item-title">
+        {{ transformI18n(item.meta?.title) }}
+      </span>
+      <EnterOutlined />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.result {
+  padding-bottom: 12px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 14px;
+    margin-top: 8px;
+    cursor: pointer;
+    border: 0.1px solid #ccc;
+    border-radius: 4px;
+    transition: font-size 0.16s;
+
+    &-title {
+      display: flex;
+      flex: 1;
+      margin-left: 5px;
+    }
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-search/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-search/index.vue
new file mode 100644
index 00000000..123d6a66
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-search/index.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useBoolean } from "../../hooks/useBoolean";
+import SearchModal from "./components/SearchModal.vue";
+
+const { bool: show, toggle } = useBoolean();
+function handleSearch() {
+  toggle();
+}
+</script>
+
+<template>
+  <div>
+    <div
+      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+      @click="handleSearch"
+    >
+      <IconifyIconOffline icon="ri:search-line" />
+    </div>
+    <SearchModal v-model:value="show" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-search/types.ts b/Yi.Pure.Vue3/src/layout/components/lay-search/types.ts
new file mode 100644
index 00000000..a39adbd4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-search/types.ts
@@ -0,0 +1,20 @@
+interface optionsItem {
+  path: string;
+  type: "history" | "collect";
+  meta: {
+    icon?: string;
+    title?: string;
+  };
+}
+
+interface dragItem {
+  oldIndex: number;
+  newIndex: number;
+}
+
+interface Props {
+  value: string;
+  options: Array<optionsItem>;
+}
+
+export type { optionsItem, dragItem, Props };
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-setting/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-setting/index.vue
new file mode 100644
index 00000000..18aacf25
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-setting/index.vue
@@ -0,0 +1,642 @@
+<script setup lang="ts">
+import {
+  ref,
+  unref,
+  watch,
+  reactive,
+  computed,
+  nextTick,
+  onUnmounted,
+  onBeforeMount
+} from "vue";
+import { useI18n } from "vue-i18n";
+import { emitter } from "@/utils/mitt";
+import LayPanel from "../lay-panel/index.vue";
+import { useNav } from "@/layout/hooks/useNav";
+import { useAppStoreHook } from "@/store/modules/app";
+import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import Segmented, { type OptionsType } from "@/components/ReSegmented";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
+
+import Check from "@iconify-icons/ep/check";
+import LeftArrow from "@iconify-icons/ri/arrow-left-s-line";
+import RightArrow from "@iconify-icons/ri/arrow-right-s-line";
+import DayIcon from "@/assets/svg/day.svg?component";
+import DarkIcon from "@/assets/svg/dark.svg?component";
+import SystemIcon from "@/assets/svg/system.svg?component";
+
+const { t } = useI18n();
+const { device } = useNav();
+const { isDark } = useDark();
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+
+const mixRef = ref();
+const verticalRef = ref();
+const horizontalRef = ref();
+
+const {
+  dataTheme,
+  overallStyle,
+  layoutTheme,
+  themeColors,
+  toggleClass,
+  dataThemeChange,
+  setLayoutThemeColor
+} = useDataThemeChange();
+
+/* body添加layout属性，作用于src/style/sidebar.scss */
+if (unref(layoutTheme)) {
+  const layout = unref(layoutTheme).layout;
+  const theme = unref(layoutTheme).theme;
+  toggleTheme({
+    scopeName: `layout-theme-${theme}`
+  });
+  setLayoutModel(layout);
+}
+
+/** 默认灵动模式 */
+const markValue = ref($storage.configure?.showModel ?? "smart");
+
+const logoVal = ref($storage.configure?.showLogo ?? true);
+
+const settings = reactive({
+  greyVal: $storage.configure.grey,
+  weakVal: $storage.configure.weak,
+  tabsVal: $storage.configure.hideTabs,
+  showLogo: $storage.configure.showLogo,
+  showModel: $storage.configure.showModel,
+  hideFooter: $storage.configure.hideFooter,
+  multiTagsCache: $storage.configure.multiTagsCache,
+  stretch: $storage.configure.stretch
+});
+
+const getThemeColorStyle = computed(() => {
+  return color => {
+    return { background: color };
+  };
+});
+
+/** 当网页整体为暗色风格时不显示亮白色主题配色切换选项 */
+const showThemeColors = computed(() => {
+  return themeColor => {
+    return themeColor === "light" && isDark.value ? false : true;
+  };
+});
+
+function storageConfigureChange<T>(key: string, val: T): void {
+  const storageConfigure = $storage.configure;
+  storageConfigure[key] = val;
+  $storage.configure = storageConfigure;
+}
+
+/** 灰色模式设置 */
+const greyChange = (value): void => {
+  const htmlEl = document.querySelector("html");
+  toggleClass(settings.greyVal, "html-grey", htmlEl);
+  storageConfigureChange("grey", value);
+};
+
+/** 色弱模式设置 */
+const weekChange = (value): void => {
+  const htmlEl = document.querySelector("html");
+  toggleClass(settings.weakVal, "html-weakness", htmlEl);
+  storageConfigureChange("weak", value);
+};
+
+/** 隐藏标签页设置 */
+const tagsChange = () => {
+  const showVal = settings.tabsVal;
+  storageConfigureChange("hideTabs", showVal);
+  emitter.emit("tagViewsChange", showVal as unknown as string);
+};
+
+/** 隐藏页脚设置 */
+const hideFooterChange = () => {
+  const hideFooter = settings.hideFooter;
+  storageConfigureChange("hideFooter", hideFooter);
+};
+
+/** 标签页持久化设置 */
+const multiTagsCacheChange = () => {
+  const multiTagsCache = settings.multiTagsCache;
+  storageConfigureChange("multiTagsCache", multiTagsCache);
+  useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
+};
+
+function onChange({ option }) {
+  const { value } = option;
+  markValue.value = value;
+  storageConfigureChange("showModel", value);
+  emitter.emit("tagViewsShowModel", value);
+}
+
+/** 侧边栏Logo */
+function logoChange() {
+  unref(logoVal)
+    ? storageConfigureChange("showLogo", true)
+    : storageConfigureChange("showLogo", false);
+  emitter.emit("logoChange", unref(logoVal));
+}
+
+function setFalse(Doms): any {
+  Doms.forEach(v => {
+    toggleClass(false, "is-select", unref(v));
+  });
+}
+
+/** 页宽 */
+const stretchTypeOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: t("panel.pureStretchFixed"),
+      tip: t("panel.pureStretchFixedTip"),
+      value: "fixed"
+    },
+    {
+      label: t("panel.pureStretchCustom"),
+      tip: t("panel.pureStretchCustomTip"),
+      value: "custom"
+    }
+  ];
+});
+
+const setStretch = value => {
+  settings.stretch = value;
+  storageConfigureChange("stretch", value);
+};
+
+const stretchTypeChange = ({ option }) => {
+  const { value } = option;
+  value === "custom" ? setStretch(1440) : setStretch(false);
+};
+
+/** 主题色 激活选择项 */
+const getThemeColor = computed(() => {
+  return current => {
+    if (
+      current === layoutTheme.value.theme &&
+      layoutTheme.value.theme !== "light"
+    ) {
+      return "#fff";
+    } else if (
+      current === layoutTheme.value.theme &&
+      layoutTheme.value.theme === "light"
+    ) {
+      return "#1d2b45";
+    } else {
+      return "transparent";
+    }
+  };
+});
+
+const pClass = computed(() => {
+  return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
+});
+
+const themeOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: t("panel.pureOverallStyleLight"),
+      icon: DayIcon,
+      theme: "light",
+      tip: t("panel.pureOverallStyleLightTip"),
+      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+    },
+    {
+      label: t("panel.pureOverallStyleDark"),
+      icon: DarkIcon,
+      theme: "dark",
+      tip: t("panel.pureOverallStyleDarkTip"),
+      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+    },
+    {
+      label: t("panel.pureOverallStyleSystem"),
+      icon: SystemIcon,
+      theme: "system",
+      tip: t("panel.pureOverallStyleSystemTip"),
+      iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
+    }
+  ];
+});
+
+const markOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: t("panel.pureTagsStyleSmart"),
+      tip: t("panel.pureTagsStyleSmartTip"),
+      value: "smart"
+    },
+    {
+      label: t("panel.pureTagsStyleCard"),
+      tip: t("panel.pureTagsStyleCardTip"),
+      value: "card"
+    },
+    {
+      label: t("panel.pureTagsStyleChrome"),
+      tip: t("panel.pureTagsStyleChromeTip"),
+      value: "chrome"
+    }
+  ];
+});
+
+/** 设置导航模式 */
+function setLayoutModel(layout: string) {
+  layoutTheme.value.layout = layout;
+  window.document.body.setAttribute("layout", layout);
+  $storage.layout = {
+    layout,
+    theme: layoutTheme.value.theme,
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: $storage.layout?.themeColor,
+    overallStyle: $storage.layout?.overallStyle
+  };
+  useAppStoreHook().setLayout(layout);
+}
+
+watch($storage, ({ layout }) => {
+  switch (layout["layout"]) {
+    case "vertical":
+      toggleClass(true, "is-select", unref(verticalRef));
+      debounce(setFalse([horizontalRef]), 50);
+      debounce(setFalse([mixRef]), 50);
+      break;
+    case "horizontal":
+      toggleClass(true, "is-select", unref(horizontalRef));
+      debounce(setFalse([verticalRef]), 50);
+      debounce(setFalse([mixRef]), 50);
+      break;
+    case "mix":
+      toggleClass(true, "is-select", unref(mixRef));
+      debounce(setFalse([verticalRef]), 50);
+      debounce(setFalse([horizontalRef]), 50);
+      break;
+  }
+});
+
+const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+
+/** 根据操作系统主题设置平台整体风格 */
+function updateTheme() {
+  if (overallStyle.value !== "system") return;
+  if (mediaQueryList.matches) {
+    dataTheme.value = true;
+  } else {
+    dataTheme.value = false;
+  }
+  dataThemeChange(overallStyle.value);
+}
+
+function removeMatchMedia() {
+  mediaQueryList.removeEventListener("change", updateTheme);
+}
+
+/** 监听操作系统主题改变 */
+function watchSystemThemeChange() {
+  updateTheme();
+  removeMatchMedia();
+  mediaQueryList.addEventListener("change", updateTheme);
+}
+
+onBeforeMount(() => {
+  /* 初始化系统配置 */
+  nextTick(() => {
+    watchSystemThemeChange();
+    settings.greyVal &&
+      document.querySelector("html")?.classList.add("html-grey");
+    settings.weakVal &&
+      document.querySelector("html")?.classList.add("html-weakness");
+    settings.tabsVal && tagsChange();
+    settings.hideFooter && hideFooterChange();
+  });
+});
+
+onUnmounted(() => removeMatchMedia);
+</script>
+
+<template>
+  <LayPanel>
+    <div class="p-5">
+      <p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
+      <Segmented
+        resize
+        class="select-none"
+        :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
+        :options="themeOptions"
+        @change="
+          theme => {
+            theme.index === 1 && theme.index !== 2
+              ? (dataTheme = true)
+              : (dataTheme = false);
+            overallStyle = theme.option.theme;
+            dataThemeChange(theme.option.theme);
+            theme.index === 2 && watchSystemThemeChange();
+          }
+        "
+      />
+
+      <p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p>
+      <ul class="theme-color">
+        <li
+          v-for="(item, index) in themeColors"
+          v-show="showThemeColors(item.themeColor)"
+          :key="index"
+          :style="getThemeColorStyle(item.color)"
+          @click="setLayoutThemeColor(item.themeColor)"
+        >
+          <el-icon
+            style="margin: 0.1em 0.1em 0 0"
+            :size="17"
+            :color="getThemeColor(item.themeColor)"
+          >
+            <IconifyIconOffline :icon="Check" />
+          </el-icon>
+        </li>
+      </ul>
+
+      <p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p>
+      <ul class="pure-theme">
+        <li
+          ref="verticalRef"
+          v-tippy="{
+            content: t('panel.pureVerticalTip'),
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
+          @click="setLayoutModel('vertical')"
+        >
+          <div />
+          <div />
+        </li>
+        <li
+          v-if="device !== 'mobile'"
+          ref="horizontalRef"
+          v-tippy="{
+            content: t('panel.pureHorizontalTip'),
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
+          @click="setLayoutModel('horizontal')"
+        >
+          <div />
+          <div />
+        </li>
+        <li
+          v-if="device !== 'mobile'"
+          ref="mixRef"
+          v-tippy="{
+            content: t('panel.pureMixTip'),
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
+          @click="setLayoutModel('mix')"
+        >
+          <div />
+          <div />
+        </li>
+      </ul>
+
+      <span v-if="useAppStoreHook().getViewportWidth > 1280">
+        <p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
+        <Segmented
+          resize
+          class="mb-2 select-none"
+          :modelValue="isNumber(settings.stretch) ? 1 : 0"
+          :options="stretchTypeOptions"
+          @change="stretchTypeChange"
+        />
+        <el-input-number
+          v-if="isNumber(settings.stretch)"
+          v-model="settings.stretch as number"
+          :min="1280"
+          :max="1600"
+          controls-position="right"
+          @change="value => setStretch(value)"
+        />
+        <button
+          v-else
+          v-ripple="{ class: 'text-gray-300' }"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-[var(--pure-border-color)]"
+          @click="setStretch(!settings.stretch)"
+        >
+          <div
+            class="flex-bc transition-all duration-300"
+            :class="[settings.stretch ? 'w-[24%]' : 'w-[50%]']"
+            style="color: var(--el-color-primary)"
+          >
+            <IconifyIconOffline
+              :icon="settings.stretch ? RightArrow : LeftArrow"
+              height="20"
+            />
+            <div
+              class="flex-grow border-b border-dashed"
+              style="border-color: var(--el-color-primary)"
+            />
+            <IconifyIconOffline
+              :icon="settings.stretch ? LeftArrow : RightArrow"
+              height="20"
+            />
+          </div>
+        </button>
+      </span>
+
+      <p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
+      <Segmented
+        resize
+        class="select-none"
+        :modelValue="markValue === 'smart' ? 0 : markValue === 'card' ? 1 : 2"
+        :options="markOptions"
+        @change="onChange"
+      />
+
+      <p class="mt-5 font-medium text-sm dark:text-white">
+        {{ t("panel.pureInterfaceDisplay") }}
+      </p>
+      <ul class="setting">
+        <li>
+          <span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
+          <el-switch
+            v-model="settings.greyVal"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="greyChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
+          <el-switch
+            v-model="settings.weakVal"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="weekChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
+          <el-switch
+            v-model="settings.tabsVal"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="tagsChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">{{ t("panel.pureHiddenFooter") }}</span>
+          <el-switch
+            v-model="settings.hideFooter"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="hideFooterChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">Logo</span>
+          <el-switch
+            v-model="logoVal"
+            inline-prompt
+            :active-value="true"
+            :inactive-value="false"
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="logoChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">
+            {{ t("panel.pureMultiTagsCache") }}
+          </span>
+          <el-switch
+            v-model="settings.multiTagsCache"
+            inline-prompt
+            :active-text="t('buttons.pureOpenText')"
+            :inactive-text="t('buttons.pureCloseText')"
+            @change="multiTagsCacheChange"
+          />
+        </li>
+      </ul>
+    </div>
+  </LayPanel>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider__text) {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+:deep(.el-switch__core) {
+  --el-switch-off-color: var(--pure-switch-off-color);
+
+  min-width: 36px;
+  height: 18px;
+}
+
+:deep(.el-switch__core .el-switch__action) {
+  height: 14px;
+}
+
+.theme-color {
+  height: 20px;
+
+  li {
+    float: left;
+    height: 20px;
+    margin-right: 8px;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:nth-child(1) {
+      border: 1px solid #ddd;
+    }
+  }
+}
+
+.pure-theme {
+  display: flex;
+  gap: 12px;
+
+  li {
+    position: relative;
+    width: 46px;
+    height: 36px;
+    overflow: hidden;
+    cursor: pointer;
+    background: #f0f2f5;
+    border-radius: 4px;
+    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+
+    &:nth-child(1) {
+      div {
+        &:nth-child(1) {
+          width: 30%;
+          height: 100%;
+          background: #1b2a47;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 70%;
+          height: 30%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(3) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 30%;
+          height: 70%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+  }
+}
+
+.is-select {
+  border: 2px solid var(--el-color-primary);
+}
+
+.setting {
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3px 0;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavHorizontal.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavHorizontal.vue
new file mode 100644
index 00000000..6a2cd87e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavHorizontal.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { emitter } from "@/utils/mitt";
+import { useNav } from "@/layout/hooks/useNav";
+import LaySearch from "../lay-search/index.vue";
+import LayNotice from "../lay-notice/index.vue";
+import { responsiveStorageNameSpace } from "@/config";
+import { ref, nextTick, computed, onMounted } from "vue";
+import { storageLocal, isAllEmpty } from "@pureadmin/utils";
+import { useTranslationLang } from "../../hooks/useTranslationLang";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
+import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
+
+import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
+import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Check from "@iconify-icons/ep/check";
+
+const menuRef = ref();
+const showLogo = ref(
+  storageLocal().getItem<StorageConfigs>(
+    `${responsiveStorageNameSpace()}configure`
+  )?.showLogo ?? true
+);
+
+const { t, route, locale, translationCh, translationEn } =
+  useTranslationLang(menuRef);
+const {
+  title,
+  logout,
+  onPanel,
+  getLogo,
+  username,
+  userAvatar,
+  backTopMenu,
+  avatarsStyle,
+  toAccountSettings,
+  getDropdownItemStyle,
+  getDropdownItemClass
+} = useNav();
+
+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+
+onMounted(() => {
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
+</script>
+
+<template>
+  <div
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
+  >
+    <div v-if="showLogo" class="horizontal-header-left" @click="backTopMenu">
+      <img :src="getLogo()" alt="logo" />
+      <span>{{ title }}</span>
+    </div>
+    <el-menu
+      ref="menuRef"
+      mode="horizontal"
+      popper-class="pure-scrollbar"
+      class="horizontal-header-menu"
+      :default-active="defaultActive"
+    >
+      <LaySidebarItem
+        v-for="route in usePermissionStoreHook().wholeMenus"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
+    </el-menu>
+    <div class="horizontal-header-right">
+      <!-- 菜单搜索 -->
+      <LaySearch id="header-search" />
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" trigger="click">
+        <GlobalizationIcon
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
+        />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <span v-show="locale === 'zh'" class="check-zh">
+                <IconifyIconOffline :icon="Check" />
+              </span>
+              简体中文
+            </el-dropdown-item>
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'en')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              @click="translationEn"
+            >
+              <span v-show="locale === 'en'" class="check-en">
+                <IconifyIconOffline :icon="Check" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 全屏 -->
+      <LaySidebarFullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <LayNotice id="header-notice" />
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover">
+          <img :src="userAvatar" :style="avatarsStyle" />
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-item @click="toAccountSettings">
+            <IconifyIconOffline
+              :icon="AccountSettingsIcon"
+              style="margin: 5px"
+            />
+            {{ t("buttons.pureAccountSettings") }}
+          </el-dropdown-item>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              {{ t("buttons.pureLoginOut") }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span
+        class="set-icon navbar-bg-hover"
+        :title="t('buttons.pureOpenSystemSet')"
+        @click="onPanel"
+      >
+        <IconifyIconOffline :icon="Setting" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
+.translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+  }
+
+  .check-en {
+    position: absolute;
+    left: 20px;
+  }
+}
+
+.logout {
+  width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavMix.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavMix.vue
new file mode 100644
index 00000000..c1562f2b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavMix.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { isAllEmpty } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+import { transformI18n } from "@/plugins/i18n";
+import LaySearch from "../lay-search/index.vue";
+import LayNotice from "../lay-notice/index.vue";
+import { ref, toRaw, watch, onMounted, nextTick } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { getParentPaths, findRouteByPath } from "@/router/utils";
+import { useTranslationLang } from "../../hooks/useTranslationLang";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue";
+import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
+
+import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
+import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import Setting from "@iconify-icons/ri/settings-3-line";
+import Check from "@iconify-icons/ep/check";
+
+const menuRef = ref();
+const defaultActive = ref(null);
+
+const { t, route, locale, translationCh, translationEn } =
+  useTranslationLang(menuRef);
+const {
+  device,
+  logout,
+  onPanel,
+  resolvePath,
+  username,
+  userAvatar,
+  getDivStyle,
+  avatarsStyle,
+  toAccountSettings,
+  getDropdownItemStyle,
+  getDropdownItemClass
+} = useNav();
+
+function getDefaultActive(routePath) {
+  const wholeMenus = usePermissionStoreHook().wholeMenus;
+  /** 当前路由的父级路径 */
+  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
+  defaultActive.value = !isAllEmpty(route.meta?.activePath)
+    ? route.meta.activePath
+    : findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
+}
+
+onMounted(() => {
+  getDefaultActive(route.path);
+});
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+
+watch(
+  () => [route.path, usePermissionStoreHook().wholeMenus],
+  () => {
+    getDefaultActive(route.path);
+  }
+);
+</script>
+
+<template>
+  <div
+    v-if="device !== 'mobile'"
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
+  >
+    <el-menu
+      ref="menuRef"
+      router
+      mode="horizontal"
+      popper-class="pure-scrollbar"
+      class="horizontal-header-menu"
+      :default-active="defaultActive"
+    >
+      <el-menu-item
+        v-for="route in usePermissionStoreHook().wholeMenus"
+        :key="route.path"
+        :index="resolvePath(route) || route.redirect"
+      >
+        <template #title>
+          <div
+            v-if="toRaw(route.meta.icon)"
+            :class="['sub-menu-icon', route.meta.icon]"
+          >
+            <component
+              :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
+            />
+          </div>
+          <div :style="getDivStyle">
+            <span class="select-none">
+              {{ transformI18n(route.meta.title) }}
+            </span>
+            <LaySidebarExtraIcon :extraIcon="route.meta.extraIcon" />
+          </div>
+        </template>
+      </el-menu-item>
+    </el-menu>
+    <div class="horizontal-header-right">
+      <!-- 菜单搜索 -->
+      <LaySearch id="header-search" />
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" trigger="click">
+        <GlobalizationIcon
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
+        />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <span v-show="locale === 'zh'" class="check-zh">
+                <IconifyIconOffline :icon="Check" />
+              </span>
+              简体中文
+            </el-dropdown-item>
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'en')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              @click="translationEn"
+            >
+              <span v-show="locale === 'en'" class="check-en">
+                <IconifyIconOffline :icon="Check" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 全屏 -->
+      <LaySidebarFullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <LayNotice id="header-notice" />
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover select-none">
+          <img :src="userAvatar" :style="avatarsStyle" />
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-item @click="toAccountSettings">
+            <IconifyIconOffline
+              :icon="AccountSettingsIcon"
+              style="margin: 5px"
+            />
+            {{ t("buttons.pureAccountSettings") }}
+          </el-dropdown-item>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline
+                :icon="LogoutCircleRLine"
+                style="margin: 5px"
+              />
+              {{ t("buttons.pureLoginOut") }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span
+        class="set-icon navbar-bg-hover"
+        :title="t('buttons.pureOpenSystemSet')"
+        @click="onPanel"
+      >
+        <IconifyIconOffline :icon="Setting" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+
+.translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+  }
+
+  .check-en {
+    position: absolute;
+    left: 20px;
+  }
+}
+
+.logout {
+  width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavVertical.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavVertical.vue
new file mode 100644
index 00000000..0e9fa129
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/NavVertical.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { emitter } from "@/utils/mitt";
+import { useNav } from "@/layout/hooks/useNav";
+import { responsiveStorageNameSpace } from "@/config";
+import { storageLocal, isAllEmpty } from "@pureadmin/utils";
+import { findRouteByPath, getParentPaths } from "@/router/utils";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import LaySidebarLogo from "../lay-sidebar/components/SidebarLogo.vue";
+import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
+import LaySidebarLeftCollapse from "../lay-sidebar/components/SidebarLeftCollapse.vue";
+import LaySidebarCenterCollapse from "../lay-sidebar/components/SidebarCenterCollapse.vue";
+
+const route = useRoute();
+const isShow = ref(false);
+const showLogo = ref(
+  storageLocal().getItem<StorageConfigs>(
+    `${responsiveStorageNameSpace()}configure`
+  )?.showLogo ?? true
+);
+
+const {
+  device,
+  pureApp,
+  isCollapse,
+  tooltipEffect,
+  menuSelect,
+  toggleSideBar
+} = useNav();
+
+const subMenuData = ref([]);
+
+const menuData = computed(() => {
+  return pureApp.layout === "mix" && device.value !== "mobile"
+    ? subMenuData.value
+    : usePermissionStoreHook().wholeMenus;
+});
+
+const loading = computed(() =>
+  pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
+);
+
+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+
+function getSubMenuData() {
+  let path = "";
+  path = defaultActive.value;
+  subMenuData.value = [];
+  // path的上级路由组成的数组
+  const parentPathArr = getParentPaths(
+    path,
+    usePermissionStoreHook().wholeMenus
+  );
+  // 当前路由的父级路由信息
+  const parenetRoute = findRouteByPath(
+    parentPathArr[0] || path,
+    usePermissionStoreHook().wholeMenus
+  );
+  if (!parenetRoute?.children) return;
+  subMenuData.value = parenetRoute?.children;
+}
+
+watch(
+  () => [route.path, usePermissionStoreHook().wholeMenus],
+  () => {
+    if (route.path.includes("/redirect")) return;
+    getSubMenuData();
+    menuSelect(route.path);
+  }
+);
+
+onMounted(() => {
+  getSubMenuData();
+
+  emitter.on("logoChange", key => {
+    showLogo.value = key;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`logoChange`公共事件，防止多次触发
+  emitter.off("logoChange");
+});
+</script>
+
+<template>
+  <div
+    v-loading="loading"
+    :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
+    @mouseenter.prevent="isShow = true"
+    @mouseleave.prevent="isShow = false"
+  >
+    <LaySidebarLogo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar
+      wrap-class="scrollbar-wrapper"
+      :class="[device === 'mobile' ? 'mobile' : 'pc']"
+    >
+      <el-menu
+        unique-opened
+        mode="vertical"
+        popper-class="pure-scrollbar"
+        class="outer-most select-none"
+        :collapse="isCollapse"
+        :collapse-transition="false"
+        :popper-effect="tooltipEffect"
+        :default-active="defaultActive"
+      >
+        <LaySidebarItem
+          v-for="routes in menuData"
+          :key="routes.path"
+          :item="routes"
+          :base-path="routes.path"
+          class="outer-most select-none"
+        />
+      </el-menu>
+    </el-scrollbar>
+    <LaySidebarCenterCollapse
+      v-if="device !== 'mobile' && (isShow || isCollapse)"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
+    <LaySidebarLeftCollapse
+      v-if="device !== 'mobile'"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
new file mode 100644
index 00000000..417b8394
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { isEqual } from "@pureadmin/utils";
+import { transformI18n } from "@/plugins/i18n";
+import { useRoute, useRouter } from "vue-router";
+import { ref, watch, onMounted, toRaw } from "vue";
+import { getParentPaths, findRouteByPath } from "@/router/utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+
+const route = useRoute();
+const levelList = ref([]);
+const router = useRouter();
+const routes: any = router.options.routes;
+const multiTags: any = useMultiTagsStoreHook().multiTags;
+
+const getBreadcrumb = (): void => {
+  // 当前路由信息
+  let currentRoute;
+
+  if (Object.keys(route.query).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.query, item?.query)) {
+        currentRoute = toRaw(item);
+      }
+    });
+  } else if (Object.keys(route.params).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.params, item?.params)) {
+        currentRoute = toRaw(item);
+      }
+    });
+  } else {
+    currentRoute = findRouteByPath(router.currentRoute.value.path, routes);
+  }
+
+  // 当前路由的父级路径组成的数组
+  const parentRoutes = getParentPaths(
+    router.currentRoute.value.name as string,
+    routes,
+    "name"
+  );
+  // 存放组成面包屑的数组
+  const matched = [];
+
+  // 获取每个父级路径对应的路由信息
+  parentRoutes.forEach(path => {
+    if (path !== "/") matched.push(findRouteByPath(path, routes));
+  });
+
+  matched.push(currentRoute);
+
+  matched.forEach((item, index) => {
+    if (currentRoute?.query || currentRoute?.params) return;
+    if (item?.children) {
+      item.children.forEach(v => {
+        if (v?.meta?.title === item?.meta?.title) {
+          matched.splice(index, 1);
+        }
+      });
+    }
+  });
+
+  levelList.value = matched.filter(
+    item => item?.meta && item?.meta.title !== false
+  );
+};
+
+const handleLink = item => {
+  const { redirect, name, path } = item;
+  if (redirect) {
+    router.push(redirect as any);
+  } else {
+    if (name) {
+      if (item.query) {
+        router.push({
+          name,
+          query: item.query
+        });
+      } else if (item.params) {
+        router.push({
+          name,
+          params: item.params
+        });
+      } else {
+        router.push({ name });
+      }
+    } else {
+      router.push({ path });
+    }
+  }
+};
+
+onMounted(() => {
+  getBreadcrumb();
+});
+
+watch(
+  () => route.path,
+  () => {
+    getBreadcrumb();
+  },
+  {
+    deep: true
+  }
+);
+</script>
+
+<template>
+  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item
+        v-for="item in levelList"
+        :key="item.path"
+        class="!inline !items-stretch"
+      >
+        <a @click.prevent="handleLink(item)">
+          {{ transformI18n(item.meta.title) }}
+        </a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue
new file mode 100644
index 00000000..0f41fcca
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useGlobal } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+
+import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
+
+interface Props {
+  isActive: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const { t } = useI18n();
+const { tooltipEffect } = useNav();
+
+const iconClass = computed(() => {
+  return ["w-[16px]", "h-[16px]"];
+});
+
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const themeColor = computed(() => $storage.layout?.themeColor);
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div
+    v-tippy="{
+      content: isActive
+        ? t('buttons.pureClickCollapse')
+        : t('buttons.pureClickExpand'),
+      theme: tooltipEffect,
+      hideOnClick: 'toggle',
+      placement: 'right'
+    }"
+    class="center-collapse"
+    @click="toggleClick"
+  >
+    <IconifyIconOffline
+      :icon="ArrowLeft"
+      :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
+      :style="{ transform: isActive ? 'none' : 'rotateY(180deg)' }"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.center-collapse {
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  z-index: 1002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 34px;
+  cursor: pointer;
+  background: var(--el-bg-color);
+  border: 1px solid var(--pure-border-color);
+  border-radius: 4px;
+  transform: translate(12px, -50%);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarExtraIcon.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarExtraIcon.vue
new file mode 100644
index 00000000..7cad16e6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarExtraIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { toRaw } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineProps({
+  extraIcon: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<template>
+  <div v-if="extraIcon" class="flex justify-center items-center">
+    <component
+      :is="useRenderIcon(toRaw(extraIcon))"
+      class="w-[30px] h-[30px]"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
new file mode 100644
index 00000000..4d38bd0c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+
+const screenIcon = ref();
+const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
+
+isFullscreen.value = !!(
+  document.fullscreenElement ||
+  document.webkitFullscreenElement ||
+  document.mozFullScreenElement ||
+  document.msFullscreenElement
+);
+
+watch(
+  isFullscreen,
+  full => {
+    screenIcon.value = full ? ExitFullscreen : Fullscreen;
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <span class="fullscreen-icon navbar-bg-hover" @click="toggle">
+    <IconifyIconOffline :icon="screenIcon" />
+  </span>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarItem.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarItem.vue
new file mode 100644
index 00000000..cffa6771
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarItem.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import path from "path";
+import { getConfig } from "@/config";
+import { menuType } from "@/layout/types";
+import { ReText } from "@/components/ReText";
+import { useNav } from "@/layout/hooks/useNav";
+import { transformI18n } from "@/plugins/i18n";
+import SidebarLinkItem from "./SidebarLinkItem.vue";
+import SidebarExtraIcon from "./SidebarExtraIcon.vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import {
+  type PropType,
+  type CSSProperties,
+  ref,
+  toRaw,
+  computed,
+  useAttrs
+} from "vue";
+
+import ArrowUp from "@iconify-icons/ep/arrow-up-bold";
+import EpArrowDown from "@iconify-icons/ep/arrow-down-bold";
+import ArrowLeft from "@iconify-icons/ep/arrow-left-bold";
+import ArrowRight from "@iconify-icons/ep/arrow-right-bold";
+
+const attrs = useAttrs();
+const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<menuType>
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ""
+  }
+});
+
+const getNoDropdownStyle = computed((): CSSProperties => {
+  return {
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
+  };
+});
+
+const getSubMenuIconStyle = computed((): CSSProperties => {
+  return {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    margin:
+      layout.value === "horizontal"
+        ? "0 5px 0 0"
+        : isCollapse.value
+          ? "0 auto"
+          : "0 5px 0 0"
+  };
+});
+
+const expandCloseIcon = computed(() => {
+  if (!getConfig()?.MenuArrowIconNoTransition) return "";
+  return {
+    "expand-close-icon": useRenderIcon(EpArrowDown),
+    "expand-open-icon": useRenderIcon(ArrowUp),
+    "collapse-close-icon": useRenderIcon(ArrowRight),
+    "collapse-open-icon": useRenderIcon(ArrowLeft)
+  };
+});
+
+const onlyOneChild: menuType = ref(null);
+
+function hasOneShowingChild(children: menuType[] = [], parent: menuType) {
+  const showingChildren = children.filter((item: any) => {
+    onlyOneChild.value = item;
+    return true;
+  });
+
+  if (showingChildren[0]?.meta?.showParent) {
+    return false;
+  }
+
+  if (showingChildren.length === 1) {
+    return true;
+  }
+
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
+    return true;
+  }
+  return false;
+}
+
+function resolvePath(routePath) {
+  const httpReg = /^http(s?):\/\//;
+  if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
+    return routePath || props.basePath;
+  } else {
+    // 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
+    return path.posix.resolve(props.basePath, routePath);
+  }
+}
+</script>
+
+<template>
+  <SidebarLinkItem
+    v-if="
+      hasOneShowingChild(item.children, item) &&
+      (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+    "
+    :to="item"
+  >
+    <el-menu-item
+      :index="resolvePath(onlyOneChild.path)"
+      :class="{ 'submenu-title-noDropdown': !isNest }"
+      :style="getNoDropdownStyle"
+      v-bind="attrs"
+    >
+      <div
+        v-if="toRaw(item.meta.icon)"
+        class="sub-menu-icon"
+        :style="getSubMenuIconStyle"
+      >
+        <component
+          :is="
+            useRenderIcon(
+              toRaw(onlyOneChild.meta.icon) ||
+                (item.meta && toRaw(item.meta.icon))
+            )
+          "
+        />
+      </div>
+      <el-text
+        v-if="
+          (!item?.meta.icon &&
+            isCollapse &&
+            layout === 'vertical' &&
+            item?.pathList?.length === 1) ||
+          (!onlyOneChild.meta.icon &&
+            isCollapse &&
+            layout === 'mix' &&
+            item?.pathList?.length === 2)
+        "
+        truncated
+        class="!w-full !pl-4 !text-inherit"
+      >
+        {{ transformI18n(onlyOneChild.meta.title) }}
+      </el-text>
+
+      <template #title>
+        <div :style="getDivStyle">
+          <ReText
+            :tippyProps="{
+              offset: [0, -10],
+              theme: tooltipEffect
+            }"
+            class="!w-full !text-inherit"
+          >
+            {{ transformI18n(onlyOneChild.meta.title) }}
+          </ReText>
+          <SidebarExtraIcon :extraIcon="onlyOneChild.meta.extraIcon" />
+        </div>
+      </template>
+    </el-menu-item>
+  </SidebarLinkItem>
+  <el-sub-menu
+    v-else
+    ref="subMenu"
+    teleported
+    :index="resolvePath(item.path)"
+    v-bind="expandCloseIcon"
+  >
+    <template #title>
+      <div
+        v-if="toRaw(item.meta.icon)"
+        :style="getSubMenuIconStyle"
+        class="sub-menu-icon"
+      >
+        <component :is="useRenderIcon(item.meta && toRaw(item.meta.icon))" />
+      </div>
+      <ReText
+        v-if="
+          layout === 'mix' && toRaw(item.meta.icon)
+            ? !isCollapse || item?.pathList?.length !== 2
+            : !(
+                layout === 'vertical' &&
+                isCollapse &&
+                toRaw(item.meta.icon) &&
+                item.parentId === null
+              )
+        "
+        :tippyProps="{
+          offset: [0, -10],
+          theme: tooltipEffect
+        }"
+        :class="{
+          '!w-full': true,
+          '!text-inherit': true,
+          '!pl-4':
+            layout !== 'horizontal' &&
+            isCollapse &&
+            !toRaw(item.meta.icon) &&
+            item.parentId === null
+        }"
+      >
+        {{ transformI18n(item.meta.title) }}
+      </ReText>
+      <SidebarExtraIcon v-if="!isCollapse" :extraIcon="item.meta.extraIcon" />
+    </template>
+
+    <sidebar-item
+      v-for="child in item.children"
+      :key="child.path"
+      :is-nest="true"
+      :item="child"
+      :base-path="resolvePath(child.path)"
+      class="nest-menu"
+    />
+  </el-sub-menu>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
new file mode 100644
index 00000000..c007d3b8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useGlobal } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+
+interface Props {
+  isActive: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const { t } = useI18n();
+const { tooltipEffect } = useNav();
+
+const iconClass = computed(() => {
+  return [
+    "ml-4",
+    "mb-1",
+    "w-[16px]",
+    "h-[16px]",
+    "inline-block",
+    "align-middle",
+    "cursor-pointer",
+    "duration-[100ms]"
+  ];
+});
+
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const themeColor = computed(() => $storage.layout?.themeColor);
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div class="left-collapse">
+    <IconifyIconOffline
+      v-tippy="{
+        content: isActive
+          ? t('buttons.pureClickCollapse')
+          : t('buttons.pureClickExpand'),
+        theme: tooltipEffect,
+        hideOnClick: 'toggle',
+        placement: 'right'
+      }"
+      :icon="MenuFold"
+      :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
+      :style="{ transform: isActive ? 'none' : 'rotateY(180deg)' }"
+      @click="toggleClick"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.left-collapse {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  box-shadow: 0 0 6px -3px var(--el-color-primary);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLinkItem.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLinkItem.vue
new file mode 100644
index 00000000..8911c122
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLinkItem.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { isUrl } from "@pureadmin/utils";
+import { menuType } from "@/layout/types";
+
+const props = defineProps<{
+  to: menuType;
+}>();
+
+const isExternalLink = computed(() => isUrl(props.to.name));
+const getLinkProps = (item: menuType) => {
+  if (isExternalLink.value) {
+    return {
+      href: item.name,
+      target: "_blank",
+      rel: "noopener"
+    };
+  }
+  return {
+    to: item
+  };
+};
+</script>
+
+<template>
+  <component
+    :is="isExternalLink ? 'a' : 'router-link'"
+    v-bind="getLinkProps(to)"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLogo.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLogo.vue
new file mode 100644
index 00000000..0441f52f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarLogo.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { getTopMenu } from "@/router/utils";
+import { useNav } from "@/layout/hooks/useNav";
+
+defineProps({
+  collapse: Boolean
+});
+
+const { title, getLogo } = useNav();
+</script>
+
+<template>
+  <div class="sidebar-logo-container" :class="{ collapses: collapse }">
+    <transition name="sidebarLogoFade">
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        :title="title"
+        class="sidebar-logo-link"
+        :to="getTopMenu()?.path ?? '/'"
+      >
+        <img :src="getLogo()" alt="logo" />
+        <span class="sidebar-title">{{ title }}</span>
+      </router-link>
+      <router-link
+        v-else
+        key="expand"
+        :title="title"
+        class="sidebar-logo-link"
+        :to="getTopMenu()?.path ?? '/'"
+      >
+        <img :src="getLogo()" alt="logo" />
+        <span class="sidebar-title">{{ title }}</span>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 48px;
+  overflow: hidden;
+
+  .sidebar-logo-link {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    height: 100%;
+    padding-left: 10px;
+
+    img {
+      display: inline-block;
+      height: 32px;
+    }
+
+    .sidebar-title {
+      display: inline-block;
+      height: 32px;
+      margin: 2px 0 0 12px;
+      overflow: hidden;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 32px;
+      color: $subMenuActiveText;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue
new file mode 100644
index 00000000..c2f1b5ad
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
+
+interface Props {
+  isActive: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const { t } = useI18n();
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div
+    class="px-3 mr-1 navbar-bg-hover"
+    :title="
+      isActive ? t('buttons.pureClickCollapse') : t('buttons.pureClickExpand')
+    "
+    @click="toggleClick"
+  >
+    <IconifyIconOffline
+      :icon="isActive ? MenuFold : MenuUnfold"
+      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-tag/components/TagChrome.vue b/Yi.Pure.Vue3/src/layout/components/lay-tag/components/TagChrome.vue
new file mode 100644
index 00000000..137365b4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-tag/components/TagChrome.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg class="w-full h-full">
+    <defs>
+      <symbol id="geometry-left" viewBox="0 0 214 36">
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
+      </symbol>
+      <symbol id="geometry-right" viewBox="0 0 214 36">
+        <use xlink:href="#geometry-left" />
+      </symbol>
+      <clipPath>
+        <rect width="100%" height="100%" x="0" />
+      </clipPath>
+    </defs>
+    <svg width="51%" height="100%">
+      <use
+        xlink:href="#geometry-left"
+        width="214"
+        height="36"
+        fill="currentColor"
+      />
+    </svg>
+    <g transform="scale(-1, 1)">
+      <svg width="51%" height="100%" x="-100%" y="0">
+        <use
+          xlink:href="#geometry-right"
+          width="214"
+          height="36"
+          fill="currentColor"
+        />
+      </svg>
+    </g>
+  </svg>
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-tag/index.scss b/Yi.Pure.Vue3/src/layout/components/lay-tag/index.scss
new file mode 100644
index 00000000..b8812169
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-tag/index.scss
@@ -0,0 +1,371 @@
+@keyframes schedule-in-width {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes schedule-out-width {
+  from {
+    width: 100%;
+  }
+
+  to {
+    width: 0;
+  }
+}
+
+.tags-view {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  background: #fff;
+  box-shadow: 0 0 1px #888;
+
+  .scroll-item {
+    position: relative;
+    display: inline-block;
+    height: 34px;
+    padding-left: 6px;
+    line-height: 34px;
+    cursor: pointer;
+    transition: all 0.4s;
+
+    &:not(:first-child) {
+      padding-right: 24px;
+    }
+
+    &.chrome-item {
+      padding-right: 0;
+      padding-left: 0;
+      margin-right: -18px;
+      box-shadow: none;
+    }
+
+    .el-icon-close {
+      position: absolute;
+      top: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      color: var(--el-color-primary);
+      cursor: pointer;
+      border-radius: 4px;
+      transition:
+        background-color 0.12s,
+        color 0.12s;
+      transform: translate(0, -50%);
+
+      &:hover {
+        color: rgb(0 0 0 / 88%) !important;
+        background-color: rgb(0 0 0 / 6%);
+      }
+    }
+  }
+
+  .tag-title {
+    padding: 0 4px;
+    color: var(--el-text-color-primary);
+    text-decoration: none;
+  }
+
+  .scroll-container {
+    position: relative;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &.chrome-scroll-container {
+      padding-top: 4px;
+
+      .fixed-tag {
+        padding: 0 !important;
+      }
+    }
+
+    .tab {
+      position: relative;
+      float: left;
+      overflow: visible;
+      white-space: nowrap;
+      list-style: none;
+
+      .scroll-item {
+        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        &:nth-child(1) {
+          padding: 0 12px;
+        }
+
+        &.chrome-item {
+          &:nth-child(1) {
+            padding: 0;
+          }
+        }
+      }
+
+      .fixed-tag {
+        padding: 0 12px;
+      }
+    }
+  }
+
+  /* 右键菜单 */
+  .contextmenu {
+    position: absolute;
+    padding: 5px 0;
+    margin: 0;
+    font-size: 13px;
+    font-weight: normal;
+    color: var(--el-text-color-primary);
+    white-space: nowrap;
+    list-style-type: none;
+    background: #fff;
+    border-radius: 4px;
+    outline: 0;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+
+    li {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 7px 12px;
+      margin: 0;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+
+      svg {
+        display: block;
+        margin-right: 0.5em;
+      }
+    }
+  }
+}
+
+.el-dropdown-menu {
+  li {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0;
+    cursor: pointer;
+
+    svg {
+      display: block;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  color: #606266;
+  background: #f0f0f0;
+}
+
+:deep(.el-dropdown-menu__item) i {
+  margin-right: 10px;
+}
+
+:deep(.el-dropdown-menu__item--divided) {
+  margin: 1px 0;
+}
+
+.el-dropdown-menu__item--divided::before {
+  margin: 0;
+}
+
+.el-dropdown-menu__item.is-disabled {
+  cursor: not-allowed;
+}
+
+.scroll-item.is-active {
+  position: relative;
+  color: #fff;
+  box-shadow: 0 0 0.7px #888;
+
+  .chrome-tab {
+    z-index: 10;
+  }
+
+  .chrome-tab__bg {
+    color: var(--el-color-primary-light-9) !important;
+  }
+
+  .tag-title {
+    color: var(--el-color-primary) !important;
+  }
+
+  .chrome-close-btn {
+    color: var(--el-color-primary);
+
+    &:hover {
+      background-color: var(--el-color-primary);
+    }
+  }
+
+  .chrome-tab-divider {
+    opacity: 0;
+  }
+}
+
+.arrow-left,
+.arrow-right,
+.arrow-down {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 34px;
+  color: var(--el-text-color-primary);
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.arrow-left {
+  box-shadow: 5px 0 5px -6px #ccc;
+
+  &:hover {
+    cursor: w-resize;
+  }
+}
+
+.arrow-right {
+  border-right: 0.5px solid #ccc;
+  box-shadow: -5px 0 5px -6px #ccc;
+
+  &:hover {
+    cursor: e-resize;
+  }
+}
+
+/* 卡片模式下鼠标移入显示蓝色边框 */
+.card-in {
+  color: var(--el-color-primary);
+
+  .tag-title {
+    color: var(--el-color-primary);
+  }
+}
+
+/* 卡片模式下鼠标移出隐藏蓝色边框 */
+.card-out {
+  color: #666;
+  border: none;
+
+  .tag-title {
+    color: #666;
+  }
+}
+
+/* 灵动模式 */
+.schedule-active {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--el-color-primary);
+}
+
+/* 灵动模式下鼠标移入显示蓝色进度条 */
+.schedule-in {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--el-color-primary);
+  animation: schedule-in-width 200ms ease-in;
+}
+
+/* 灵动模式下鼠标移出隐藏蓝色进度条 */
+.schedule-out {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--el-color-primary);
+  animation: schedule-out-width 200ms ease-in;
+}
+
+/* 谷歌风格的页签 */
+.chrome-tab {
+  position: relative;
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  .tag-title {
+    padding: 0;
+  }
+
+  .chrome-tab-divider {
+    position: absolute;
+    right: 7px;
+    width: 1px;
+    height: 14px;
+    background-color: #2b2d2f;
+  }
+
+  &:hover {
+    z-index: 10;
+
+    .chrome-tab__bg {
+      color: #dee1e6;
+    }
+
+    .tag-title {
+      color: #1f1f1f;
+    }
+
+    .chrome-tab-divider {
+      opacity: 0;
+    }
+  }
+
+  .chrome-tab__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -10;
+    width: 100%;
+    height: 100%;
+    color: transparent;
+    pointer-events: none;
+  }
+
+  .chrome-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: #666;
+    border-radius: 50%;
+
+    &:hover {
+      color: white;
+      background-color: #b1b3b8;
+    }
+  }
+}
diff --git a/Yi.Pure.Vue3/src/layout/components/lay-tag/index.vue b/Yi.Pure.Vue3/src/layout/components/lay-tag/index.vue
new file mode 100644
index 00000000..87f234fd
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/components/lay-tag/index.vue
@@ -0,0 +1,685 @@
+<script setup lang="ts">
+import { $t } from "@/plugins/i18n";
+import { emitter } from "@/utils/mitt";
+import { RouteConfigs } from "../../types";
+import { useTags } from "../../hooks/useTag";
+import { routerArrays } from "@/layout/types";
+import { onClickOutside } from "@vueuse/core";
+import TagChrome from "./components/TagChrome.vue";
+import { handleAliveRoute, getTopMenu } from "@/router/utils";
+import { useSettingStoreHook } from "@/store/modules/settings";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
+import {
+  delay,
+  isEqual,
+  isAllEmpty,
+  useResizeObserver
+} from "@pureadmin/utils";
+
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+
+const {
+  Close,
+  route,
+  router,
+  visible,
+  showTags,
+  instance,
+  multiTags,
+  tagsViews,
+  buttonTop,
+  buttonLeft,
+  showModel,
+  translateX,
+  isFixedTag,
+  pureSetting,
+  activeIndex,
+  getTabStyle,
+  isScrolling,
+  iconIsActive,
+  linkIsActive,
+  currentSelect,
+  scheduleIsActive,
+  getContextMenuStyle,
+  closeMenu,
+  onMounted,
+  onMouseenter,
+  onMouseleave,
+  transformI18n,
+  onContentFullScreen
+} = useTags();
+
+const tabDom = ref();
+const containerDom = ref();
+const scrollbarDom = ref();
+const contextmenuRef = ref();
+const isShowArrow = ref(false);
+const topPath = getTopMenu()?.path;
+const { VITE_HIDE_HOME } = import.meta.env;
+const fixedTags = [
+  ...routerArrays,
+  ...usePermissionStoreHook().flatteningRoutes.filter(v => v?.meta?.fixedTag)
+];
+
+const dynamicTagView = async () => {
+  await nextTick();
+  const index = multiTags.value.findIndex(item => {
+    if (!isAllEmpty(route.query)) {
+      return isEqual(route.query, item.query);
+    } else if (!isAllEmpty(route.params)) {
+      return isEqual(route.params, item.params);
+    } else {
+      return route.path === item.path;
+    }
+  });
+  moveToView(index);
+};
+
+const moveToView = async (index: number): Promise<void> => {
+  await nextTick();
+  const tabNavPadding = 10;
+  if (!instance.refs["dynamic" + index]) return;
+  const tabItemEl = instance.refs["dynamic" + index][0];
+  const tabItemElOffsetLeft = (tabItemEl as HTMLElement)?.offsetLeft;
+  const tabItemOffsetWidth = (tabItemEl as HTMLElement)?.offsetWidth;
+  // 标签页导航栏可视长度（不包含溢出部分）
+  const scrollbarDomWidth = scrollbarDom.value
+    ? scrollbarDom.value?.offsetWidth
+    : 0;
+
+  // 已有标签页总长度（包含溢出部分）
+  const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
+
+  scrollbarDomWidth <= tabDomWidth
+    ? (isShowArrow.value = true)
+    : (isShowArrow.value = false);
+  if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
+    translateX.value = 0;
+  } else if (tabItemElOffsetLeft < -translateX.value) {
+    // 标签在可视区域左侧
+    translateX.value = -tabItemElOffsetLeft + tabNavPadding;
+  } else if (
+    tabItemElOffsetLeft > -translateX.value &&
+    tabItemElOffsetLeft + tabItemOffsetWidth <
+      -translateX.value + scrollbarDomWidth
+  ) {
+    // 标签在可视区域
+    translateX.value = Math.min(
+      0,
+      scrollbarDomWidth -
+        tabItemOffsetWidth -
+        tabItemElOffsetLeft -
+        tabNavPadding
+    );
+  } else {
+    // 标签在可视区域右侧
+    translateX.value = -(
+      tabItemElOffsetLeft -
+      (scrollbarDomWidth - tabNavPadding - tabItemOffsetWidth)
+    );
+  }
+};
+
+const handleScroll = (offset: number): void => {
+  const scrollbarDomWidth = scrollbarDom.value
+    ? scrollbarDom.value?.offsetWidth
+    : 0;
+  const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
+  if (offset > 0) {
+    translateX.value = Math.min(0, translateX.value + offset);
+  } else {
+    if (scrollbarDomWidth < tabDomWidth) {
+      if (translateX.value >= -(tabDomWidth - scrollbarDomWidth)) {
+        translateX.value = Math.max(
+          translateX.value + offset,
+          scrollbarDomWidth - tabDomWidth
+        );
+      }
+    } else {
+      translateX.value = 0;
+    }
+  }
+  isScrolling.value = false;
+};
+
+const handleWheel = (event: WheelEvent): void => {
+  isScrolling.value = true;
+  const scrollIntensity = Math.abs(event.deltaX) + Math.abs(event.deltaY);
+  let offset = 0;
+  if (event.deltaX < 0) {
+    offset = scrollIntensity > 0 ? scrollIntensity : 100;
+  } else {
+    offset = scrollIntensity > 0 ? -scrollIntensity : -100;
+  }
+
+  smoothScroll(offset);
+};
+
+const smoothScroll = (offset: number): void => {
+  // 每帧滚动的距离
+  const scrollAmount = 20;
+  let remaining = Math.abs(offset);
+
+  const scrollStep = () => {
+    const scrollOffset = Math.sign(offset) * Math.min(scrollAmount, remaining);
+    handleScroll(scrollOffset);
+    remaining -= Math.abs(scrollOffset);
+
+    if (remaining > 0) {
+      requestAnimationFrame(scrollStep);
+    }
+  };
+
+  requestAnimationFrame(scrollStep);
+};
+
+function dynamicRouteTag(value: string): void {
+  const hasValue = multiTags.value.some(item => {
+    return item.path === value;
+  });
+
+  function concatPath(arr: object[], value: string) {
+    if (!hasValue) {
+      arr.forEach((arrItem: any) => {
+        if (arrItem.path === value) {
+          useMultiTagsStoreHook().handleTags("push", {
+            path: value,
+            meta: arrItem.meta,
+            name: arrItem.name
+          });
+        } else {
+          if (arrItem.children && arrItem.children.length > 0) {
+            concatPath(arrItem.children, value);
+          }
+        }
+      });
+    }
+  }
+  concatPath(router.options.routes as any, value);
+}
+
+/** 刷新路由 */
+function onFresh() {
+  const { fullPath, query } = unref(route);
+  router.replace({
+    path: "/redirect" + fullPath,
+    query
+  });
+  handleAliveRoute(route as ToRouteType, "refresh");
+}
+
+function deleteDynamicTag(obj: any, current: any, tag?: string) {
+  const valueIndex: number = multiTags.value.findIndex((item: any) => {
+    if (item.query) {
+      if (item.path === obj.path) {
+        return item.query === obj.query;
+      }
+    } else if (item.params) {
+      if (item.path === obj.path) {
+        return item.params === obj.params;
+      }
+    } else {
+      return item.path === obj.path;
+    }
+  });
+
+  const spliceRoute = (
+    startIndex?: number,
+    length?: number,
+    other?: boolean
+  ): void => {
+    if (other) {
+      useMultiTagsStoreHook().handleTags(
+        "equal",
+        [
+          VITE_HIDE_HOME === "false" ? fixedTags : toRaw(getTopMenu()),
+          obj
+        ].flat()
+      );
+    } else {
+      useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex,
+        length
+      }) as any;
+    }
+    dynamicTagView();
+  };
+
+  if (tag === "other") {
+    spliceRoute(1, 1, true);
+  } else if (tag === "left") {
+    spliceRoute(fixedTags.length, valueIndex - 1, true);
+  } else if (tag === "right") {
+    spliceRoute(valueIndex + 1, multiTags.value.length);
+  } else {
+    // 从当前匹配到的路径中删除
+    spliceRoute(valueIndex, 1);
+  }
+  const newRoute = useMultiTagsStoreHook().handleTags("slice");
+  if (current === route.path) {
+    // 如果删除当前激活tag就自动切换到最后一个tag
+    if (tag === "left") return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
+  } else {
+    if (!multiTags.value.length) return;
+    if (multiTags.value.some(item => item.path === route.path)) return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
+  }
+}
+
+function deleteMenu(item, tag?: string) {
+  deleteDynamicTag(item, item.path, tag);
+  handleAliveRoute(route as ToRouteType);
+}
+
+function onClickDrop(key, item, selectRoute?: RouteConfigs) {
+  if (item && item.disabled) return;
+
+  let selectTagRoute;
+  if (selectRoute) {
+    selectTagRoute = {
+      path: selectRoute.path,
+      meta: selectRoute.meta,
+      name: selectRoute.name,
+      query: selectRoute?.query,
+      params: selectRoute?.params
+    };
+  } else {
+    selectTagRoute = { path: route.path, meta: route.meta };
+  }
+
+  // 当前路由信息
+  switch (key) {
+    case 0:
+      // 刷新路由
+      onFresh();
+      break;
+    case 1:
+      // 关闭当前标签页
+      deleteMenu(selectTagRoute);
+      break;
+    case 2:
+      // 关闭左侧标签页
+      deleteMenu(selectTagRoute, "left");
+      break;
+    case 3:
+      // 关闭右侧标签页
+      deleteMenu(selectTagRoute, "right");
+      break;
+    case 4:
+      // 关闭其他标签页
+      deleteMenu(selectTagRoute, "other");
+      break;
+    case 5:
+      // 关闭全部标签页
+      useMultiTagsStoreHook().handleTags("splice", "", {
+        startIndex: fixedTags.length,
+        length: multiTags.value.length
+      });
+      router.push(topPath);
+      // router.push(fixedTags[fixedTags.length - 1]?.path);
+      handleAliveRoute(route as ToRouteType);
+      break;
+    case 6:
+      // 内容区全屏
+      onContentFullScreen();
+      setTimeout(() => {
+        if (pureSetting.hiddenSideBar) {
+          tagsViews[6].icon = ExitFullscreen;
+          tagsViews[6].text = $t("buttons.pureContentExitFullScreen");
+        } else {
+          tagsViews[6].icon = Fullscreen;
+          tagsViews[6].text = $t("buttons.pureContentFullScreen");
+        }
+      }, 100);
+      break;
+  }
+  setTimeout(() => {
+    showMenuModel(route.fullPath, route.query);
+  });
+}
+
+function handleCommand(command: any) {
+  const { key, item } = command;
+  onClickDrop(key, item);
+}
+
+/** 触发右键中菜单的点击事件 */
+function selectTag(key, item) {
+  closeMenu();
+  onClickDrop(key, item, currentSelect.value);
+}
+
+function showMenus(value: boolean) {
+  Array.of(1, 2, 3, 4, 5).forEach(v => {
+    tagsViews[v].show = value;
+  });
+}
+
+function disabledMenus(value: boolean, fixedTag = false) {
+  Array.of(1, 2, 3, 4, 5).forEach(v => {
+    tagsViews[v].disabled = value;
+  });
+  if (fixedTag) {
+    tagsViews[2].show = false;
+    tagsViews[2].disabled = true;
+  }
+}
+
+/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是顶级菜单，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
+function showMenuModel(
+  currentPath: string,
+  query: object = {},
+  refresh = false
+) {
+  const allRoute = multiTags.value;
+  const routeLength = multiTags.value.length;
+  let currentIndex = -1;
+  if (isAllEmpty(query)) {
+    currentIndex = allRoute.findIndex(v => v.path === currentPath);
+  } else {
+    currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
+  }
+  function fixedTagDisabled() {
+    if (allRoute[currentIndex]?.meta?.fixedTag) {
+      Array.of(1, 2, 3, 4, 5).forEach(v => {
+        tagsViews[v].disabled = true;
+      });
+    }
+  }
+
+  showMenus(true);
+
+  if (refresh) {
+    tagsViews[0].show = true;
+  }
+
+  /**
+   * currentIndex为1时，左侧的菜单顶级菜单，则不显示关闭左侧标签页
+   * 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
+   */
+  if (currentIndex === 1 && routeLength !== 2) {
+    // 左侧的菜单是顶级菜单，右侧存在别的菜单
+    tagsViews[2].show = false;
+    Array.of(1, 3, 4, 5).forEach(v => {
+      tagsViews[v].disabled = false;
+    });
+    tagsViews[2].disabled = true;
+    fixedTagDisabled();
+  } else if (currentIndex === 1 && routeLength === 2) {
+    disabledMenus(false);
+    // 左侧的菜单是顶级菜单，右侧不存在别的菜单
+    Array.of(2, 3, 4).forEach(v => {
+      tagsViews[v].show = false;
+      tagsViews[v].disabled = true;
+    });
+    fixedTagDisabled();
+  } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
+    // 当前路由是所有路由中的最后一个
+    tagsViews[3].show = false;
+    Array.of(1, 2, 4, 5).forEach(v => {
+      tagsViews[v].disabled = false;
+    });
+    tagsViews[3].disabled = true;
+    if (allRoute[currentIndex - 1]?.meta?.fixedTag) {
+      tagsViews[2].show = false;
+      tagsViews[2].disabled = true;
+    }
+    fixedTagDisabled();
+  } else if (currentIndex === 0 || currentPath === `/redirect${topPath}`) {
+    // 当前路由为顶级菜单
+    disabledMenus(true);
+  } else {
+    disabledMenus(false, allRoute[currentIndex - 1]?.meta?.fixedTag);
+    fixedTagDisabled();
+  }
+}
+
+function openMenu(tag, e) {
+  closeMenu();
+  if (tag.path === topPath || tag?.meta?.fixedTag) {
+    // 右键菜单为顶级菜单或拥有 fixedTag 属性，只显示刷新
+    showMenus(false);
+    tagsViews[0].show = true;
+  } else if (route.path !== tag.path && route.name !== tag.name) {
+    // 右键菜单不匹配当前路由，隐藏刷新
+    tagsViews[0].show = false;
+    showMenuModel(tag.path, tag.query);
+  } else if (multiTags.value.length === 2 && route.path !== tag.path) {
+    showMenus(true);
+    // 只有两个标签时不显示关闭其他标签页
+    tagsViews[4].show = false;
+  } else if (route.path === tag.path) {
+    // 右键当前激活的菜单
+    showMenuModel(tag.path, tag.query, true);
+  }
+
+  currentSelect.value = tag;
+  const menuMinWidth = 140;
+  const offsetLeft = unref(containerDom).getBoundingClientRect().left;
+  const offsetWidth = unref(containerDom).offsetWidth;
+  const maxLeft = offsetWidth - menuMinWidth;
+  const left = e.clientX - offsetLeft + 5;
+  if (left > maxLeft) {
+    buttonLeft.value = maxLeft;
+  } else {
+    buttonLeft.value = left;
+  }
+  useSettingStoreHook().hiddenSideBar
+    ? (buttonTop.value = e.clientY)
+    : (buttonTop.value = e.clientY - 40);
+  nextTick(() => {
+    visible.value = true;
+  });
+}
+
+/** 触发tags标签切换 */
+function tagOnClick(item) {
+  const { name, path } = item;
+  if (name) {
+    if (item.query) {
+      router.push({
+        name,
+        query: item.query
+      });
+    } else if (item.params) {
+      router.push({
+        name,
+        params: item.params
+      });
+    } else {
+      router.push({ name });
+    }
+  } else {
+    router.push({ path });
+  }
+}
+
+onClickOutside(contextmenuRef, closeMenu, {
+  detectIframe: true
+});
+
+watch(route, () => {
+  activeIndex.value = -1;
+  dynamicTagView();
+});
+
+onMounted(() => {
+  if (!instance) return;
+
+  // 根据当前路由初始化操作标签页的禁用状态
+  showMenuModel(route.fullPath);
+
+  // 触发隐藏标签页
+  emitter.on("tagViewsChange", (key: any) => {
+    if (unref(showTags as any) === key) return;
+    (showTags as any).value = key;
+  });
+
+  // 改变标签风格
+  emitter.on("tagViewsShowModel", key => {
+    showModel.value = key;
+  });
+
+  //  接收侧边栏切换传递过来的参数
+  emitter.on("changLayoutRoute", indexPath => {
+    dynamicRouteTag(indexPath);
+    setTimeout(() => {
+      showMenuModel(indexPath);
+    });
+  });
+
+  useResizeObserver(scrollbarDom, dynamicTagView);
+  delay().then(() => dynamicTagView());
+});
+
+onBeforeUnmount(() => {
+  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
+  emitter.off("tagViewsChange");
+  emitter.off("tagViewsShowModel");
+  emitter.off("changLayoutRoute");
+});
+</script>
+
+<template>
+  <div v-if="!showTags" ref="containerDom" class="tags-view">
+    <span v-show="isShowArrow" class="arrow-left">
+      <IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
+    </span>
+    <div
+      ref="scrollbarDom"
+      class="scroll-container"
+      :class="showModel === 'chrome' && 'chrome-scroll-container'"
+      @wheel.prevent="handleWheel"
+    >
+      <div ref="tabDom" class="tab select-none" :style="getTabStyle">
+        <div
+          v-for="(item, index) in multiTags"
+          :ref="'dynamic' + index"
+          :key="index"
+          :class="[
+            'scroll-item is-closable',
+            linkIsActive(item),
+            showModel === 'chrome' && 'chrome-item',
+            isFixedTag(item) && 'fixed-tag'
+          ]"
+          @contextmenu.prevent="openMenu(item, $event)"
+          @mouseenter.prevent="onMouseenter(index)"
+          @mouseleave.prevent="onMouseleave(index)"
+          @click="tagOnClick(item)"
+        >
+          <template v-if="showModel !== 'chrome'">
+            <span
+              class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
+            >
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="
+                isFixedTag(item)
+                  ? false
+                  : iconIsActive(item, index) ||
+                    (index === activeIndex && index !== 0)
+              "
+              class="el-icon-close"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline :icon="Close" />
+            </span>
+            <span
+              v-if="showModel !== 'card'"
+              :ref="'schedule' + index"
+              :class="[scheduleIsActive(item)]"
+            />
+          </template>
+          <div v-else class="chrome-tab">
+            <div class="chrome-tab__bg">
+              <TagChrome />
+            </div>
+            <span class="tag-title">
+              {{ transformI18n(item.meta.title) }}
+            </span>
+            <span
+              v-if="isFixedTag(item) ? false : index !== 0"
+              class="chrome-close-btn"
+              @click.stop="deleteMenu(item)"
+            >
+              <IconifyIconOffline :icon="Close" />
+            </span>
+            <span class="chrome-tab-divider" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <span v-show="isShowArrow" class="arrow-right">
+      <IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
+    </span>
+    <!-- 右键菜单按钮 -->
+    <transition name="el-zoom-in-top">
+      <ul
+        v-show="visible"
+        ref="contextmenuRef"
+        :key="Math.random()"
+        :style="getContextMenuStyle"
+        class="contextmenu"
+      >
+        <div
+          v-for="(item, key) in tagsViews.slice(0, 6)"
+          :key="key"
+          style="display: flex; align-items: center"
+        >
+          <li v-if="item.show" @click="selectTag(key, item)">
+            <IconifyIconOffline :icon="item.icon" />
+            {{ transformI18n(item.text) }}
+          </li>
+        </div>
+      </ul>
+    </transition>
+    <!-- 右侧功能按钮 -->
+    <el-dropdown
+      trigger="click"
+      placement="bottom-end"
+      @command="handleCommand"
+    >
+      <span class="arrow-down">
+        <IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="(item, key) in tagsViews"
+            :key="key"
+            :command="{ key, item }"
+            :divided="item.divided"
+            :disabled="item.disabled"
+          >
+            <IconifyIconOffline :icon="item.icon" />
+            {{ transformI18n(item.text) }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import url("./index.scss");
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/frame.vue b/Yi.Pure.Vue3/src/layout/frame.vue
new file mode 100644
index 00000000..4243b57d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/frame.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { ref, unref, watch, onMounted, nextTick } from "vue";
+
+defineOptions({
+  name: "LayFrame"
+});
+
+const props = defineProps<{
+  frameInfo?: {
+    frameSrc?: string;
+    fullPath?: string;
+  };
+}>();
+
+const { t } = useI18n();
+const loading = ref(true);
+const currentRoute = useRoute();
+const frameSrc = ref<string>("");
+const frameRef = ref<HTMLElement | null>(null);
+if (unref(currentRoute.meta)?.frameSrc) {
+  frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
+}
+unref(currentRoute.meta)?.frameLoading === false && hideLoading();
+
+function hideLoading() {
+  loading.value = false;
+}
+
+function init() {
+  nextTick(() => {
+    const iframe = unref(frameRef);
+    if (!iframe) return;
+    const _frame = iframe as any;
+    if (_frame.attachEvent) {
+      _frame.attachEvent("onload", () => {
+        hideLoading();
+      });
+    } else {
+      iframe.onload = () => {
+        hideLoading();
+      };
+    }
+  });
+}
+
+watch(
+  () => currentRoute.fullPath,
+  path => {
+    if (
+      currentRoute.name === "Redirect" &&
+      path.includes(props.frameInfo?.fullPath)
+    ) {
+      frameSrc.value = path; // redirect时，置换成任意值，待重定向后 重新赋值
+      loading.value = true;
+    }
+    // 重新赋值
+    if (props.frameInfo?.fullPath === path) {
+      frameSrc.value = props.frameInfo?.frameSrc;
+    }
+  }
+);
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<template>
+  <div
+    v-loading="loading"
+    class="frame"
+    :element-loading-text="t('status.pureLoad')"
+  >
+    <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.frame {
+  position: absolute;
+  inset: 0;
+
+  .frame-iframe {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: 0;
+  }
+}
+
+.main-content {
+  margin: 2px 0 0 !important;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/hooks/useBoolean.ts b/Yi.Pure.Vue3/src/layout/hooks/useBoolean.ts
new file mode 100644
index 00000000..1d140317
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/hooks/useBoolean.ts
@@ -0,0 +1,26 @@
+import { ref } from "vue";
+
+export function useBoolean(initValue = false) {
+  const bool = ref(initValue);
+
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+
+  return {
+    bool,
+    setBool,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}
diff --git a/Yi.Pure.Vue3/src/layout/hooks/useDataThemeChange.ts b/Yi.Pure.Vue3/src/layout/hooks/useDataThemeChange.ts
new file mode 100644
index 00000000..80db6dd1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/hooks/useDataThemeChange.ts
@@ -0,0 +1,145 @@
+import { ref } from "vue";
+import { getConfig } from "@/config";
+import { useLayout } from "./useLayout";
+import { removeToken } from "@/utils/auth";
+import { routerArrays } from "@/layout/types";
+import { router, resetRouter } from "@/router";
+import type { themeColorsType } from "../types";
+import { useAppStoreHook } from "@/store/modules/app";
+import { useGlobal, storageLocal } from "@pureadmin/utils";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import {
+  darken,
+  lighten,
+  toggleTheme
+} from "@pureadmin/theme/dist/browser-utils";
+
+export function useDataThemeChange() {
+  const { layoutTheme, layout } = useLayout();
+  const themeColors = ref<Array<themeColorsType>>([
+    /* 亮白色 */
+    { color: "#ffffff", themeColor: "light" },
+    /* 道奇蓝 */
+    { color: "#1b2a47", themeColor: "default" },
+    /* 深紫罗兰色 */
+    { color: "#722ed1", themeColor: "saucePurple" },
+    /* 深粉色 */
+    { color: "#eb2f96", themeColor: "pink" },
+    /* 猩红色 */
+    { color: "#f5222d", themeColor: "dusk" },
+    /* 橙红色 */
+    { color: "#fa541c", themeColor: "volcano" },
+    /* 绿宝石 */
+    { color: "#13c2c2", themeColor: "mingQing" },
+    /* 酸橙绿 */
+    { color: "#52c41a", themeColor: "auroraGreen" }
+  ]);
+
+  const { $storage } = useGlobal<GlobalPropertiesApi>();
+  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
+  const overallStyle = ref<string>($storage?.layout?.overallStyle);
+  const body = document.documentElement as HTMLElement;
+
+  function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+    const targetEl = target || document.body;
+    let { className } = targetEl;
+    className = className.replace(clsName, "").trim();
+    targetEl.className = flag ? `${className} ${clsName}` : className;
+  }
+
+  /** 设置导航主题色 */
+  function setLayoutThemeColor(
+    theme = getConfig().Theme ?? "light",
+    isClick = true
+  ) {
+    layoutTheme.value.theme = theme;
+    toggleTheme({
+      scopeName: `layout-theme-${theme}`
+    });
+    // 如果非isClick，保留之前的themeColor
+    const storageThemeColor = $storage.layout.themeColor;
+    $storage.layout = {
+      layout: layout.value,
+      theme,
+      darkMode: dataTheme.value,
+      sidebarStatus: $storage.layout?.sidebarStatus,
+      epThemeColor: $storage.layout?.epThemeColor,
+      themeColor: isClick ? theme : storageThemeColor,
+      overallStyle: overallStyle.value
+    };
+
+    if (theme === "default" || theme === "light") {
+      setEpThemeColor(getConfig().EpThemeColor);
+    } else {
+      const colors = themeColors.value.find(v => v.themeColor === theme);
+      setEpThemeColor(colors.color);
+    }
+  }
+
+  function setPropertyPrimary(mode: string, i: number, color: string) {
+    document.documentElement.style.setProperty(
+      `--el-color-primary-${mode}-${i}`,
+      dataTheme.value ? darken(color, i / 10) : lighten(color, i / 10)
+    );
+  }
+
+  /** 设置 `element-plus` 主题色 */
+  const setEpThemeColor = (color: string) => {
+    useEpThemeStoreHook().setEpThemeColor(color);
+    document.documentElement.style.setProperty("--el-color-primary", color);
+    for (let i = 1; i <= 2; i++) {
+      setPropertyPrimary("dark", i, color);
+    }
+    for (let i = 1; i <= 9; i++) {
+      setPropertyPrimary("light", i, color);
+    }
+  };
+
+  /** 浅色、深色整体风格切换 */
+  function dataThemeChange(overall?: string) {
+    overallStyle.value = overall;
+    if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
+      setLayoutThemeColor("default", false);
+    } else {
+      setLayoutThemeColor(useEpThemeStoreHook().epTheme, false);
+    }
+
+    if (dataTheme.value) {
+      document.documentElement.classList.add("dark");
+    } else {
+      if ($storage.layout.themeColor === "light") {
+        setLayoutThemeColor("light", false);
+      }
+      document.documentElement.classList.remove("dark");
+    }
+  }
+
+  /** 清空缓存并返回登录页 */
+  function onReset() {
+    removeToken();
+    storageLocal().clear();
+    const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
+    useAppStoreHook().setLayout(Layout);
+    setEpThemeColor(EpThemeColor);
+    useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
+    toggleClass(Grey, "html-grey", document.querySelector("html"));
+    toggleClass(Weak, "html-weakness", document.querySelector("html"));
+    router.push("/login");
+    useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
+    resetRouter();
+  }
+
+  return {
+    body,
+    dataTheme,
+    overallStyle,
+    layoutTheme,
+    themeColors,
+    onReset,
+    toggleClass,
+    dataThemeChange,
+    setEpThemeColor,
+    setLayoutThemeColor
+  };
+}
diff --git a/Yi.Pure.Vue3/src/layout/hooks/useLayout.ts b/Yi.Pure.Vue3/src/layout/hooks/useLayout.ts
new file mode 100644
index 00000000..5fb0235d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/hooks/useLayout.ts
@@ -0,0 +1,64 @@
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { routerArrays } from "../types";
+import { useGlobal } from "@pureadmin/utils";
+import { useMultiTagsStore } from "@/store/modules/multiTags";
+
+export function useLayout() {
+  const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
+
+  const initStorage = () => {
+    /** 路由 */
+    if (
+      useMultiTagsStore().multiTagsCache &&
+      (!$storage.tags || $storage.tags.length === 0)
+    ) {
+      $storage.tags = routerArrays;
+    }
+    /** 国际化 */
+    if (!$storage.locale) {
+      $storage.locale = { locale: $config?.Locale ?? "zh" };
+      useI18n().locale.value = $config?.Locale ?? "zh";
+    }
+    /** 导航 */
+    if (!$storage.layout) {
+      $storage.layout = {
+        layout: $config?.Layout ?? "vertical",
+        theme: $config?.Theme ?? "light",
+        darkMode: $config?.DarkMode ?? false,
+        sidebarStatus: $config?.SidebarStatus ?? true,
+        epThemeColor: $config?.EpThemeColor ?? "#409EFF",
+        themeColor: $config?.Theme ?? "light",
+        overallStyle: $config?.OverallStyle ?? "light"
+      };
+    }
+    /** 灰色模式、色弱模式、隐藏标签页 */
+    if (!$storage.configure) {
+      $storage.configure = {
+        grey: $config?.Grey ?? false,
+        weak: $config?.Weak ?? false,
+        hideTabs: $config?.HideTabs ?? false,
+        hideFooter: $config.HideFooter ?? true,
+        showLogo: $config?.ShowLogo ?? true,
+        showModel: $config?.ShowModel ?? "smart",
+        multiTagsCache: $config?.MultiTagsCache ?? false,
+        stretch: $config?.Stretch ?? false
+      };
+    }
+  };
+
+  /** 清空缓存后从platform-config.json读取默认配置并赋值到storage中 */
+  const layout = computed(() => {
+    return $storage?.layout.layout;
+  });
+
+  const layoutTheme = computed(() => {
+    return $storage.layout;
+  });
+
+  return {
+    layout,
+    layoutTheme,
+    initStorage
+  };
+}
diff --git a/Yi.Pure.Vue3/src/layout/hooks/useMultiFrame.ts b/Yi.Pure.Vue3/src/layout/hooks/useMultiFrame.ts
new file mode 100644
index 00000000..73a779d2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/hooks/useMultiFrame.ts
@@ -0,0 +1,25 @@
+const MAP = new Map();
+
+export const useMultiFrame = () => {
+  function setMap(path, Comp) {
+    MAP.set(path, Comp);
+  }
+
+  function getMap(path?) {
+    if (path) {
+      return MAP.get(path);
+    }
+    return [...MAP.entries()];
+  }
+
+  function delMap(path) {
+    MAP.delete(path);
+  }
+
+  return {
+    setMap,
+    getMap,
+    delMap,
+    MAP
+  };
+};
diff --git a/Yi.Pure.Vue3/src/layout/hooks/useNav.ts b/Yi.Pure.Vue3/src/layout/hooks/useNav.ts
new file mode 100644
index 00000000..33e6df47
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/hooks/useNav.ts
@@ -0,0 +1,180 @@
+import { storeToRefs } from "pinia";
+import { getConfig } from "@/config";
+import { useRouter } from "vue-router";
+import { emitter } from "@/utils/mitt";
+import Avatar from "@/assets/user.jpg";
+import { getTopMenu } from "@/router/utils";
+import { useFullscreen } from "@vueuse/core";
+import type { routeMetaType } from "../types";
+import { transformI18n } from "@/plugins/i18n";
+import { router, remainingPaths } from "@/router";
+import { computed, type CSSProperties } from "vue";
+import { useAppStoreHook } from "@/store/modules/app";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useGlobal, isAllEmpty } from "@pureadmin/utils";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+
+const errorInfo =
+  "The current routing configuration is incorrect, please check the configuration";
+
+export function useNav() {
+  const pureApp = useAppStoreHook();
+  const routers = useRouter().options.routes;
+  const { isFullscreen, toggle } = useFullscreen();
+  const { wholeMenus } = storeToRefs(usePermissionStoreHook());
+  /** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
+  const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
+
+  const getDivStyle = computed((): CSSProperties => {
+    return {
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      overflow: "hidden"
+    };
+  });
+
+  /** 头像（如果头像为空则使用 src/assets/user.jpg ） */
+  const userAvatar = computed(() => {
+    return isAllEmpty(useUserStoreHook()?.avatar)
+      ? Avatar
+      : useUserStoreHook()?.avatar;
+  });
+
+  /** 昵称（如果昵称为空则显示用户名） */
+  const username = computed(() => {
+    return isAllEmpty(useUserStoreHook()?.nickname)
+      ? useUserStoreHook()?.username
+      : useUserStoreHook()?.nickname;
+  });
+
+  /** 设置国际化选中后的样式 */
+  const getDropdownItemStyle = computed(() => {
+    return (locale, t) => {
+      return {
+        background: locale === t ? useEpThemeStoreHook().epThemeColor : "",
+        color: locale === t ? "#f4f4f5" : "#000"
+      };
+    };
+  });
+
+  const getDropdownItemClass = computed(() => {
+    return (locale, t) => {
+      return locale === t ? "" : "dark:hover:!text-primary";
+    };
+  });
+
+  const avatarsStyle = computed(() => {
+    return username.value ? { marginRight: "10px" } : "";
+  });
+
+  const isCollapse = computed(() => {
+    return !pureApp.getSidebarStatus;
+  });
+
+  const device = computed(() => {
+    return pureApp.getDevice;
+  });
+
+  const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
+  const layout = computed(() => {
+    return $storage?.layout?.layout;
+  });
+
+  const title = computed(() => {
+    return $config.Title;
+  });
+
+  /** 动态title */
+  function changeTitle(meta: routeMetaType) {
+    const Title = getConfig().Title;
+    if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`;
+    else document.title = transformI18n(meta.title);
+  }
+
+  /** 退出登录 */
+  function logout() {
+    useUserStoreHook().logOut();
+  }
+
+  function backTopMenu() {
+    router.push(getTopMenu()?.path);
+  }
+
+  function onPanel() {
+    emitter.emit("openPanel");
+  }
+
+  function toAccountSettings() {
+    router.push({ name: "AccountSettings" });
+  }
+
+  function toggleSideBar() {
+    pureApp.toggleSideBar();
+  }
+
+  function handleResize(menuRef) {
+    menuRef?.handleResize();
+  }
+
+  function resolvePath(route) {
+    if (!route.children) return console.error(errorInfo);
+    const httpReg = /^http(s?):\/\//;
+    const routeChildPath = route.children[0]?.path;
+    if (httpReg.test(routeChildPath)) {
+      return route.path + "/" + routeChildPath;
+    } else {
+      return routeChildPath;
+    }
+  }
+
+  function menuSelect(indexPath: string) {
+    if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
+    emitter.emit("changLayoutRoute", indexPath);
+  }
+
+  /** 判断路径是否参与菜单 */
+  function isRemaining(path: string) {
+    return remainingPaths.includes(path);
+  }
+
+  /** 获取`logo` */
+  function getLogo() {
+    return new URL("/logo.svg", import.meta.url).href;
+  }
+
+  return {
+    title,
+    device,
+    layout,
+    logout,
+    routers,
+    $storage,
+    isFullscreen,
+    Fullscreen,
+    ExitFullscreen,
+    toggle,
+    backTopMenu,
+    onPanel,
+    getDivStyle,
+    changeTitle,
+    toggleSideBar,
+    menuSelect,
+    handleResize,
+    resolvePath,
+    getLogo,
+    isCollapse,
+    pureApp,
+    username,
+    userAvatar,
+    avatarsStyle,
+    tooltipEffect,
+    toAccountSettings,
+    getDropdownItemStyle,
+    getDropdownItemClass
+  };
+}
diff --git a/Yi.Pure.Vue3/src/layout/hooks/useTag.ts b/Yi.Pure.Vue3/src/layout/hooks/useTag.ts
new file mode 100644
index 00000000..aff70f1c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/hooks/useTag.ts
@@ -0,0 +1,248 @@
+import {
+  ref,
+  unref,
+  computed,
+  reactive,
+  onMounted,
+  type CSSProperties,
+  getCurrentInstance
+} from "vue";
+import type { tagsViewsType } from "../types";
+import { useRoute, useRouter } from "vue-router";
+import { transformI18n, $t } from "@/plugins/i18n";
+import { responsiveStorageNameSpace } from "@/config";
+import { useSettingStoreHook } from "@/store/modules/settings";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import {
+  isEqual,
+  isBoolean,
+  storageLocal,
+  toggleClass,
+  hasClass
+} from "@pureadmin/utils";
+
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import CloseAllTags from "@iconify-icons/ri/subtract-line";
+import CloseOtherTags from "@iconify-icons/ri/text-spacing";
+import CloseRightTags from "@iconify-icons/ri/text-direction-l";
+import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+import Close from "@iconify-icons/ep/close";
+
+export function useTags() {
+  const route = useRoute();
+  const router = useRouter();
+  const instance = getCurrentInstance();
+  const pureSetting = useSettingStoreHook();
+
+  const buttonTop = ref(0);
+  const buttonLeft = ref(0);
+  const translateX = ref(0);
+  const visible = ref(false);
+  const activeIndex = ref(-1);
+  // 当前右键选中的路由信息
+  const currentSelect = ref({});
+  const isScrolling = ref(false);
+
+  /** 显示模式，默认灵动模式 */
+  const showModel = ref(
+    storageLocal().getItem<StorageConfigs>(
+      `${responsiveStorageNameSpace()}configure`
+    )?.showModel || "smart"
+  );
+  /** 是否隐藏标签页，默认显示 */
+  const showTags =
+    ref(
+      storageLocal().getItem<StorageConfigs>(
+        `${responsiveStorageNameSpace()}configure`
+      ).hideTabs
+    ) ?? ref("false");
+  const multiTags: any = computed(() => {
+    return useMultiTagsStoreHook().multiTags;
+  });
+
+  const tagsViews = reactive<Array<tagsViewsType>>([
+    {
+      icon: RefreshRight,
+      text: $t("buttons.pureReload"),
+      divided: false,
+      disabled: false,
+      show: true
+    },
+    {
+      icon: Close,
+      text: $t("buttons.pureCloseCurrentTab"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: CloseLeftTags,
+      text: $t("buttons.pureCloseLeftTabs"),
+      divided: true,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: CloseRightTags,
+      text: $t("buttons.pureCloseRightTabs"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: CloseOtherTags,
+      text: $t("buttons.pureCloseOtherTabs"),
+      divided: true,
+      disabled: multiTags.value.length > 2 ? false : true,
+      show: true
+    },
+    {
+      icon: CloseAllTags,
+      text: $t("buttons.pureCloseAllTabs"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: Fullscreen,
+      text: $t("buttons.pureContentFullScreen"),
+      divided: true,
+      disabled: false,
+      show: true
+    }
+  ]);
+
+  function conditionHandle(item, previous, next) {
+    if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
+      if (Object.keys(route.query).length > 0) {
+        return isEqual(route.query, item.query) ? previous : next;
+      } else {
+        return isEqual(route.params, item.params) ? previous : next;
+      }
+    } else {
+      return route.path === item.path ? previous : next;
+    }
+  }
+
+  const isFixedTag = computed(() => {
+    return item => {
+      return isBoolean(item?.meta?.fixedTag) && item?.meta?.fixedTag === true;
+    };
+  });
+
+  const iconIsActive = computed(() => {
+    return (item, index) => {
+      if (index === 0) return;
+      return conditionHandle(item, true, false);
+    };
+  });
+
+  const linkIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, "is-active", "");
+    };
+  });
+
+  const scheduleIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, "schedule-active", "");
+    };
+  });
+
+  const getTabStyle = computed((): CSSProperties => {
+    return {
+      transform: `translateX(${translateX.value}px)`,
+      transition: isScrolling.value ? "none" : "transform 0.5s ease-in-out"
+    };
+  });
+
+  const getContextMenuStyle = computed((): CSSProperties => {
+    return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
+  });
+
+  const closeMenu = () => {
+    visible.value = false;
+  };
+
+  /** 鼠标移入添加激活样式 */
+  function onMouseenter(index) {
+    if (index) activeIndex.value = index;
+    if (unref(showModel) === "smart") {
+      if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+        return;
+      toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
+      toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
+    } else {
+      if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
+      toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
+      toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
+    }
+  }
+
+  /** 鼠标移出恢复默认样式 */
+  function onMouseleave(index) {
+    activeIndex.value = -1;
+    if (unref(showModel) === "smart") {
+      if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+        return;
+      toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
+      toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
+    } else {
+      if (hasClass(instance.refs["dynamic" + index][0], "is-active")) return;
+      toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
+      toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
+    }
+  }
+
+  function onContentFullScreen() {
+    pureSetting.hiddenSideBar
+      ? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
+      : pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
+  }
+
+  onMounted(() => {
+    if (!showModel.value) {
+      const configure = storageLocal().getItem<StorageConfigs>(
+        `${responsiveStorageNameSpace()}configure`
+      );
+      configure.showModel = "card";
+      storageLocal().setItem(
+        `${responsiveStorageNameSpace()}configure`,
+        configure
+      );
+    }
+  });
+
+  return {
+    Close,
+    route,
+    router,
+    visible,
+    showTags,
+    instance,
+    multiTags,
+    showModel,
+    tagsViews,
+    buttonTop,
+    buttonLeft,
+    translateX,
+    isFixedTag,
+    pureSetting,
+    activeIndex,
+    getTabStyle,
+    isScrolling,
+    iconIsActive,
+    linkIsActive,
+    currentSelect,
+    scheduleIsActive,
+    getContextMenuStyle,
+    $t,
+    closeMenu,
+    onMounted,
+    onMouseenter,
+    onMouseleave,
+    transformI18n,
+    onContentFullScreen
+  };
+}
diff --git a/Yi.Pure.Vue3/src/layout/hooks/useTranslationLang.ts b/Yi.Pure.Vue3/src/layout/hooks/useTranslationLang.ts
new file mode 100644
index 00000000..ebad1615
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/hooks/useTranslationLang.ts
@@ -0,0 +1,41 @@
+import { useNav } from "./useNav";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { watch, onBeforeMount, type Ref } from "vue";
+
+export function useTranslationLang(ref?: Ref) {
+  const { $storage, changeTitle, handleResize } = useNav();
+  const { locale, t } = useI18n();
+  const route = useRoute();
+
+  function translationCh() {
+    $storage.locale = { locale: "zh" };
+    locale.value = "zh";
+    ref && handleResize(ref.value);
+  }
+
+  function translationEn() {
+    $storage.locale = { locale: "en" };
+    locale.value = "en";
+    ref && handleResize(ref.value);
+  }
+
+  watch(
+    () => locale.value,
+    () => {
+      changeTitle(route.meta);
+    }
+  );
+
+  onBeforeMount(() => {
+    locale.value = $storage.locale?.locale ?? "zh";
+  });
+
+  return {
+    t,
+    route,
+    locale,
+    translationCh,
+    translationEn
+  };
+}
diff --git a/Yi.Pure.Vue3/src/layout/index.vue b/Yi.Pure.Vue3/src/layout/index.vue
new file mode 100644
index 00000000..5570ecd3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/index.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import "animate.css";
+// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
+import "@/components/ReIcon/src/offlineIcon";
+import { setType } from "./types";
+import { useI18n } from "vue-i18n";
+import { useLayout } from "./hooks/useLayout";
+import { useAppStoreHook } from "@/store/modules/app";
+import { useSettingStoreHook } from "@/store/modules/settings";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import {
+  h,
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  onBeforeMount,
+  defineComponent
+} from "vue";
+import {
+  useDark,
+  useGlobal,
+  deviceDetection,
+  useResizeObserver
+} from "@pureadmin/utils";
+
+import LayTag from "./components/lay-tag/index.vue";
+import LayNavbar from "./components/lay-navbar/index.vue";
+import LayContent from "./components/lay-content/index.vue";
+import LaySetting from "./components/lay-setting/index.vue";
+import NavVertical from "./components/lay-sidebar/NavVertical.vue";
+import NavHorizontal from "./components/lay-sidebar/NavHorizontal.vue";
+import BackTopIcon from "@/assets/svg/back_top.svg?component";
+
+const { t } = useI18n();
+const appWrapperRef = ref();
+const { isDark } = useDark();
+const { layout } = useLayout();
+const isMobile = deviceDetection();
+const pureSetting = useSettingStoreHook();
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+
+const set: setType = reactive({
+  sidebar: computed(() => {
+    return useAppStoreHook().sidebar;
+  }),
+
+  device: computed(() => {
+    return useAppStoreHook().device;
+  }),
+
+  fixedHeader: computed(() => {
+    return pureSetting.fixedHeader;
+  }),
+
+  classes: computed(() => {
+    return {
+      hideSidebar: !set.sidebar.opened,
+      openSidebar: set.sidebar.opened,
+      withoutAnimation: set.sidebar.withoutAnimation,
+      mobile: set.device === "mobile"
+    };
+  }),
+
+  hideTabs: computed(() => {
+    return $storage?.configure.hideTabs;
+  })
+});
+
+function setTheme(layoutModel: string) {
+  window.document.body.setAttribute("layout", layoutModel);
+  $storage.layout = {
+    layout: `${layoutModel}`,
+    theme: $storage.layout?.theme,
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: $storage.layout?.themeColor,
+    overallStyle: $storage.layout?.overallStyle
+  };
+}
+
+function toggle(device: string, bool: boolean) {
+  useAppStoreHook().toggleDevice(device);
+  useAppStoreHook().toggleSideBar(bool, "resize");
+}
+
+// 判断是否可自动关闭菜单栏
+let isAutoCloseSidebar = true;
+
+useResizeObserver(appWrapperRef, entries => {
+  if (isMobile) return;
+  const entry = entries[0];
+  const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
+  useAppStoreHook().setViewportSize({ width, height });
+  width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
+  /** width app-wrapper类容器宽度
+   * 0 < width <= 760 隐藏侧边栏
+   * 760 < width <= 990 折叠侧边栏
+   * width > 990 展开侧边栏
+   */
+  if (width > 0 && width <= 760) {
+    toggle("mobile", false);
+    isAutoCloseSidebar = true;
+  } else if (width > 760 && width <= 990) {
+    if (isAutoCloseSidebar) {
+      toggle("desktop", false);
+      isAutoCloseSidebar = false;
+    }
+  } else if (width > 990 && !set.sidebar.isClickCollapse) {
+    toggle("desktop", true);
+    isAutoCloseSidebar = true;
+  } else {
+    toggle("desktop", false);
+    isAutoCloseSidebar = false;
+  }
+});
+
+onMounted(() => {
+  if (isMobile) {
+    toggle("mobile", false);
+  }
+});
+
+onBeforeMount(() => {
+  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+});
+
+const LayHeader = defineComponent({
+  name: "LayHeader",
+  render() {
+    return h(
+      "div",
+      {
+        class: { "fixed-header": set.fixedHeader },
+        style: [
+          set.hideTabs && layout.value.includes("horizontal")
+            ? isDark.value
+              ? "box-shadow: 0 1px 4px #0d0d0d"
+              : "box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)"
+            : ""
+        ]
+      },
+      {
+        default: () => [
+          !pureSetting.hiddenSideBar &&
+          (layout.value.includes("vertical") || layout.value.includes("mix"))
+            ? h(LayNavbar)
+            : null,
+          !pureSetting.hiddenSideBar && layout.value.includes("horizontal")
+            ? h(NavHorizontal)
+            : null,
+          h(LayTag)
+        ]
+      }
+    );
+  }
+});
+</script>
+
+<template>
+  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
+    <div
+      v-show="
+        set.device === 'mobile' &&
+        set.sidebar.opened &&
+        layout.includes('vertical')
+      "
+      class="app-mask"
+      @click="useAppStoreHook().toggleSideBar()"
+    />
+    <NavVertical
+      v-show="
+        !pureSetting.hiddenSideBar &&
+        (layout.includes('vertical') || layout.includes('mix'))
+      "
+    />
+    <div
+      :class="[
+        'main-container',
+        pureSetting.hiddenSideBar ? 'main-hidden' : ''
+      ]"
+    >
+      <div v-if="set.fixedHeader">
+        <LayHeader />
+        <!-- 主体内容 -->
+        <LayContent :fixed-header="set.fixedHeader" />
+      </div>
+      <el-scrollbar v-else>
+        <el-backtop
+          :title="t('buttons.pureBackTop')"
+          target=".main-container .el-scrollbar__wrap"
+        >
+          <BackTopIcon />
+        </el-backtop>
+        <LayHeader />
+        <!-- 主体内容 -->
+        <LayContent :fixed-header="set.fixedHeader" />
+      </el-scrollbar>
+    </div>
+    <!-- 系统设置 -->
+    <LaySetting />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.app-mask {
+  position: absolute;
+  top: 0;
+  z-index: 2001;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.3;
+}
+
+.re-screen {
+  margin-top: 12px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/layout/redirect.vue b/Yi.Pure.Vue3/src/layout/redirect.vue
new file mode 100644
index 00000000..6e163393
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/redirect.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { unref } from "vue";
+import { useRouter } from "vue-router";
+
+defineOptions({
+  name: "Redirect"
+});
+
+const { currentRoute, replace } = useRouter();
+
+const { params, query } = unref(currentRoute);
+const { path } = params;
+
+const _path = Array.isArray(path) ? path.join("/") : path;
+
+replace({
+  path: "/" + _path,
+  query
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/Yi.Pure.Vue3/src/layout/theme/index.ts b/Yi.Pure.Vue3/src/layout/theme/index.ts
new file mode 100644
index 00000000..f7b4d470
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/theme/index.ts
@@ -0,0 +1,129 @@
+/**
+ * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
+ */
+
+import type { multipleScopeVarsOptions } from "@pureadmin/theme";
+
+/** 预设主题色 */
+const themeColors = {
+  /* 亮白色 */
+  light: {
+    subMenuActiveText: "#000000d9",
+    menuBg: "#fff",
+    menuHover: "#f6f6f6",
+    subMenuBg: "#fff",
+    subMenuActiveBg: "#e0ebf6",
+    menuText: "rgb(0 0 0 / 60%)",
+    sidebarLogo: "#fff",
+    menuTitleHover: "#000",
+    menuActiveBefore: "#4091f7"
+  },
+  /* 道奇蓝 */
+  default: {
+    subMenuActiveText: "#fff",
+    menuBg: "#001529",
+    menuHover: "rgb(64 145 247 / 15%)",
+    subMenuBg: "#0f0303",
+    subMenuActiveBg: "#4091f7",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#002140",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#4091f7"
+  },
+  /* 深紫罗兰色 */
+  saucePurple: {
+    subMenuActiveText: "#fff",
+    menuBg: "#130824",
+    menuHover: "rgb(105 58 201 / 15%)",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#693ac9",
+    menuText: "#7a80b4",
+    sidebarLogo: "#1f0c38",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#693ac9"
+  },
+  /* 深粉色 */
+  pink: {
+    subMenuActiveText: "#fff",
+    menuBg: "#28081a",
+    menuHover: "rgb(216 68 147 / 15%)",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#d84493",
+    menuText: "#7a80b4",
+    sidebarLogo: "#3f0d29",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#d84493"
+  },
+  /* 猩红色 */
+  dusk: {
+    subMenuActiveText: "#fff",
+    menuBg: "#2a0608",
+    menuHover: "rgb(225 60 57 / 15%)",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#e13c39",
+    menuText: "rgb(254 254 254 / 65.1%)",
+    sidebarLogo: "#42090c",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e13c39"
+  },
+  /* 橙红色 */
+  volcano: {
+    subMenuActiveText: "#fff",
+    menuBg: "#2b0e05",
+    menuHover: "rgb(232 95 51 / 15%)",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#e85f33",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#441708",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e85f33"
+  },
+  /* 绿宝石 */
+  mingQing: {
+    subMenuActiveText: "#fff",
+    menuBg: "#032121",
+    menuHover: "rgb(89 191 193 / 15%)",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#59bfc1",
+    menuText: "#7a80b4",
+    sidebarLogo: "#053434",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#59bfc1"
+  },
+  /* 酸橙绿 */
+  auroraGreen: {
+    subMenuActiveText: "#fff",
+    menuBg: "#0b1e15",
+    menuHover: "rgb(96 172 128 / 15%)",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#60ac80",
+    menuText: "#7a80b4",
+    sidebarLogo: "#112f21",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#60ac80"
+  }
+};
+
+/**
+ * @description 将预设主题色处理成主题插件所需格式
+ */
+export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
+  const result = [] as multipleScopeVarsOptions[];
+  Object.keys(themeColors).forEach(key => {
+    result.push({
+      scopeName: `layout-theme-${key}`,
+      varsContent: `
+        $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
+        $menuBg: ${themeColors[key].menuBg} !default;
+        $menuHover: ${themeColors[key].menuHover} !default;
+        $subMenuBg: ${themeColors[key].subMenuBg} !default;
+        $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
+        $menuText: ${themeColors[key].menuText} !default;
+        $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
+        $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
+        $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
+      `
+    } as multipleScopeVarsOptions);
+  });
+  return result;
+};
diff --git a/Yi.Pure.Vue3/src/layout/types.ts b/Yi.Pure.Vue3/src/layout/types.ts
new file mode 100644
index 00000000..1d25a0d9
--- /dev/null
+++ b/Yi.Pure.Vue3/src/layout/types.ts
@@ -0,0 +1,92 @@
+import type { IconifyIcon } from "@iconify/vue";
+const { VITE_HIDE_HOME } = import.meta.env;
+
+export const routerArrays: Array<RouteConfigs> =
+  VITE_HIDE_HOME === "false"
+    ? [
+        {
+          path: "/welcome",
+          meta: {
+            title: "menus.pureHome",
+            icon: "ep:home-filled"
+          }
+        }
+      ]
+    : [];
+
+export type routeMetaType = {
+  title?: string;
+  icon?: string | IconifyIcon;
+  showLink?: boolean;
+  savedPosition?: boolean;
+  auths?: Array<string>;
+};
+
+export type RouteConfigs = {
+  path?: string;
+  query?: object;
+  params?: object;
+  meta?: routeMetaType;
+  children?: RouteConfigs[];
+  name?: string;
+};
+
+export type multiTagsType = {
+  tags: Array<RouteConfigs>;
+};
+
+export type tagsViewsType = {
+  icon: string | IconifyIcon;
+  text: string;
+  divided: boolean;
+  disabled: boolean;
+  show: boolean;
+};
+
+export interface setType {
+  sidebar: {
+    opened: boolean;
+    withoutAnimation: boolean;
+    isClickCollapse: boolean;
+  };
+  device: string;
+  fixedHeader: boolean;
+  classes: {
+    hideSidebar: boolean;
+    openSidebar: boolean;
+    withoutAnimation: boolean;
+    mobile: boolean;
+  };
+  hideTabs: boolean;
+}
+
+export type menuType = {
+  id?: number;
+  name?: string;
+  path?: string;
+  noShowingChildren?: boolean;
+  children?: menuType[];
+  value: unknown;
+  meta?: {
+    icon?: string;
+    title?: string;
+    rank?: number;
+    showParent?: boolean;
+    extraIcon?: string;
+  };
+  showTooltip?: boolean;
+  parentId?: number;
+  pathList?: number[];
+  redirect?: string;
+};
+
+export type themeColorsType = {
+  color: string;
+  themeColor: string;
+};
+
+export interface scrollbarDomType extends HTMLElement {
+  wrap?: {
+    offsetWidth: number;
+  };
+}
diff --git a/Yi.Pure.Vue3/src/main.ts b/Yi.Pure.Vue3/src/main.ts
new file mode 100644
index 00000000..6597ac23
--- /dev/null
+++ b/Yi.Pure.Vue3/src/main.ts
@@ -0,0 +1,71 @@
+import App from "./App.vue";
+import router from "./router";
+import { setupStore } from "@/store";
+import { useI18n } from "@/plugins/i18n";
+import { getPlatformConfig } from "./config";
+import { MotionPlugin } from "@vueuse/motion";
+import { useEcharts } from "@/plugins/echarts";
+import { createApp, type Directive } from "vue";
+import { useVxeTable } from "@/plugins/vxeTable";
+import { useElementPlus } from "@/plugins/elementPlus";
+import { injectResponsiveStorage } from "@/utils/responsive";
+
+import Table from "@pureadmin/table";
+import PureDescriptions from "@pureadmin/descriptions";
+
+// 引入重置样式
+import "./style/reset.scss";
+// 导入公共样式
+import "./style/index.scss";
+// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
+import "./style/tailwind.css";
+import "element-plus/dist/index.css";
+// 导入字体图标
+import "./assets/iconfont/iconfont.js";
+import "./assets/iconfont/iconfont.css";
+
+const app = createApp(App);
+
+// 自定义指令
+import * as directives from "@/directives";
+Object.keys(directives).forEach(key => {
+  app.directive(key, (directives as { [key: string]: Directive })[key]);
+});
+
+// 全局注册@iconify/vue图标库
+import {
+  IconifyIconOffline,
+  IconifyIconOnline,
+  FontIcon
+} from "./components/ReIcon";
+app.component("IconifyIconOffline", IconifyIconOffline);
+app.component("IconifyIconOnline", IconifyIconOnline);
+app.component("FontIcon", FontIcon);
+
+// 全局注册按钮级别权限组件
+import { Auth } from "@/components/ReAuth";
+import { Perms } from "@/components/RePerms";
+app.component("Auth", Auth);
+app.component("Perms", Perms);
+
+// 全局注册vue-tippy
+import "tippy.js/dist/tippy.css";
+import "tippy.js/themes/light.css";
+import VueTippy from "vue-tippy";
+app.use(VueTippy);
+
+getPlatformConfig(app).then(async config => {
+  setupStore(app);
+  app.use(router);
+  await router.isReady();
+  injectResponsiveStorage(app, config);
+  app
+    .use(MotionPlugin)
+    .use(useI18n)
+    .use(useElementPlus)
+    .use(Table)
+    .use(useVxeTable)
+    .use(PureDescriptions)
+    .use(useEcharts);
+  app.mount("#app");
+});
diff --git a/Yi.Pure.Vue3/src/plugins/echarts.ts b/Yi.Pure.Vue3/src/plugins/echarts.ts
new file mode 100644
index 00000000..cb62d966
--- /dev/null
+++ b/Yi.Pure.Vue3/src/plugins/echarts.ts
@@ -0,0 +1,44 @@
+import type { App } from "vue";
+import * as echarts from "echarts/core";
+import { PieChart, BarChart, LineChart } from "echarts/charts";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+import {
+  GridComponent,
+  TitleComponent,
+  PolarComponent,
+  LegendComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  VisualMapComponent
+} from "echarts/components";
+
+const { use } = echarts;
+
+use([
+  PieChart,
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  SVGRenderer,
+  GridComponent,
+  TitleComponent,
+  PolarComponent,
+  LegendComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  VisualMapComponent
+]);
+
+/**
+ * @description 按需引入echarts，具体看 https://echarts.apache.org/handbook/zh/basics/import/#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5
+ * @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，具体看 https://pure-admin-utils.netlify.app/hooks/useECharts/useECharts#%E4%BD%BF%E7%94%A8%E5%89%8D%E6%8F%90
+ */
+export function useEcharts(app: App) {
+  app.config.globalProperties.$echarts = echarts;
+}
+
+export default echarts;
diff --git a/Yi.Pure.Vue3/src/plugins/elementPlus.ts b/Yi.Pure.Vue3/src/plugins/elementPlus.ts
new file mode 100644
index 00000000..8363187c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/plugins/elementPlus.ts
@@ -0,0 +1,248 @@
+// 按需引入element-plus（该方法稳定且明确。当然也支持：https://element-plus.org/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5）
+import type { App, Component } from "vue";
+import {
+  /**
+   * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211
+   * */
+  ElAffix,
+  ElAlert,
+  ElAutocomplete,
+  ElAutoResizer,
+  ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
+  ElBacktop,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElButtonGroup,
+  ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  ElCascader,
+  ElCascaderPanel,
+  ElCheckTag,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCol,
+  ElCollapse,
+  ElCollapseItem,
+  ElCollapseTransition,
+  ElColorPicker,
+  ElConfigProvider,
+  ElContainer,
+  ElAside,
+  ElFooter,
+  ElHeader,
+  ElMain,
+  ElDatePicker,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElImage,
+  ElImageViewer,
+  ElInput,
+  ElInputNumber,
+  ElLink,
+  ElMenu,
+  ElMenuItem,
+  ElMenuItemGroup,
+  ElSubMenu,
+  ElPageHeader,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElPopper,
+  ElProgress,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRate,
+  ElResult,
+  ElRow,
+  ElScrollbar,
+  ElSelect,
+  ElOption,
+  ElOptionGroup,
+  ElSelectV2,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElSlider,
+  ElSpace,
+  ElStatistic,
+  ElCountdown,
+  ElSteps,
+  ElStep,
+  ElSwitch,
+  ElTable,
+  ElTableColumn,
+  ElTableV2,
+  ElTabs,
+  ElTabPane,
+  ElTag,
+  ElText,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElTreeSelect,
+  ElTreeV2,
+  ElUpload,
+  ElWatermark,
+  ElTour,
+  ElTourStep,
+  ElSegmented,
+  /**
+   * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
+   * */
+  ElLoading, // v-loading 指令
+  ElInfiniteScroll, // v-infinite-scroll 指令
+  ElPopoverDirective, // v-popover 指令
+  ElMessage, // $message 全局属性对象globalProperties
+  ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
+  ElNotification // $notify 全局属性对象globalProperties
+} from "element-plus";
+
+const components = [
+  ElAffix,
+  ElAlert,
+  ElAutocomplete,
+  ElAutoResizer,
+  ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
+  ElBacktop,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElButtonGroup,
+  ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  ElCascader,
+  ElCascaderPanel,
+  ElCheckTag,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCol,
+  ElCollapse,
+  ElCollapseItem,
+  ElCollapseTransition,
+  ElColorPicker,
+  ElConfigProvider,
+  ElContainer,
+  ElAside,
+  ElFooter,
+  ElHeader,
+  ElMain,
+  ElDatePicker,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElImage,
+  ElImageViewer,
+  ElInput,
+  ElInputNumber,
+  ElLink,
+  ElMenu,
+  ElMenuItem,
+  ElMenuItemGroup,
+  ElSubMenu,
+  ElPageHeader,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElPopper,
+  ElProgress,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRate,
+  ElResult,
+  ElRow,
+  ElScrollbar,
+  ElSelect,
+  ElOption,
+  ElOptionGroup,
+  ElSelectV2,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElSlider,
+  ElSpace,
+  ElStatistic,
+  ElCountdown,
+  ElSteps,
+  ElStep,
+  ElSwitch,
+  ElTable,
+  ElTableColumn,
+  ElTableV2,
+  ElTabs,
+  ElTabPane,
+  ElTag,
+  ElText,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElTreeSelect,
+  ElTreeV2,
+  ElUpload,
+  ElWatermark,
+  ElTour,
+  ElTourStep,
+  ElSegmented
+];
+
+const plugins = [
+  ElLoading,
+  ElInfiniteScroll,
+  ElPopoverDirective,
+  ElMessage,
+  ElMessageBox,
+  ElNotification
+];
+
+/** 按需引入`element-plus` */
+export function useElementPlus(app: App) {
+  // 全局注册组件
+  components.forEach((component: Component) => {
+    app.component(component.name, component);
+  });
+  // 全局注册插件
+  plugins.forEach(plugin => {
+    app.use(plugin);
+  });
+}
diff --git a/Yi.Pure.Vue3/src/plugins/i18n.ts b/Yi.Pure.Vue3/src/plugins/i18n.ts
new file mode 100644
index 00000000..0e0ae1e1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/plugins/i18n.ts
@@ -0,0 +1,116 @@
+// 多组件库的国际化和本地项目国际化兼容
+import { type I18n, createI18n } from "vue-i18n";
+import type { App, WritableComputedRef } from "vue";
+import { responsiveStorageNameSpace } from "@/config";
+import { storageLocal, isObject } from "@pureadmin/utils";
+
+// element-plus国际化
+import enLocale from "element-plus/es/locale/lang/en";
+import zhLocale from "element-plus/es/locale/lang/zh-cn";
+
+const siphonI18n = (function () {
+  // 仅初始化一次国际化配置
+  let cache = Object.fromEntries(
+    Object.entries(
+      import.meta.glob("../../locales/*.y(a)?ml", { eager: true })
+    ).map(([key, value]: any) => {
+      const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1];
+      return [matched, value.default];
+    })
+  );
+  return (prefix = "zh-CN") => {
+    return cache[prefix];
+  };
+})();
+
+export const localesConfigs = {
+  zh: {
+    ...siphonI18n("zh-CN"),
+    ...zhLocale
+  },
+  en: {
+    ...siphonI18n("en"),
+    ...enLocale
+  }
+};
+
+/** 获取对象中所有嵌套对象的key键，并将它们用点号分割组成字符串 */
+function getObjectKeys(obj) {
+  const stack = [];
+  const keys: Set<string> = new Set();
+
+  stack.push({ obj, key: "" });
+
+  while (stack.length > 0) {
+    const { obj, key } = stack.pop();
+
+    for (const k in obj) {
+      const newKey = key ? `${key}.${k}` : k;
+
+      if (obj[k] && isObject(obj[k])) {
+        stack.push({ obj: obj[k], key: newKey });
+      } else {
+        keys.add(newKey);
+      }
+    }
+  }
+
+  return keys;
+}
+
+/** 将展开的key缓存 */
+const keysCache: Map<string, Set<string>> = new Map();
+const flatI18n = (prefix = "zh-CN") => {
+  let cache = keysCache.get(prefix);
+  if (!cache) {
+    cache = getObjectKeys(siphonI18n(prefix));
+    keysCache.set(prefix, cache);
+  }
+  return cache;
+};
+
+/**
+ * 国际化转换工具函数（自动读取根目录locales文件夹下文件进行国际化匹配）
+ * @param message message
+ * @returns 转化后的message
+ */
+export function transformI18n(message: any = "") {
+  if (!message) {
+    return "";
+  }
+
+  // 处理存储动态路由的title,格式 {zh:"",en:""}
+  if (typeof message === "object") {
+    const locale: string | WritableComputedRef<string> | any =
+      i18n.global.locale;
+    return message[locale?.value];
+  }
+
+  const key = message.match(/(\S*)\./)?.input;
+
+  if (key && flatI18n("zh-CN").has(key)) {
+    return i18n.global.t.call(i18n.global.locale, message);
+  } else if (!key && Object.hasOwn(siphonI18n("zh-CN"), message)) {
+    // 兼容非嵌套形式的国际化写法
+    return i18n.global.t.call(i18n.global.locale, message);
+  } else {
+    return message;
+  }
+}
+
+/** 此函数只是配合i18n Ally插件来进行国际化智能提示，并无实际意义（只对提示起作用），如果不需要国际化可删除 */
+export const $t = (key: string) => key;
+
+export const i18n: I18n = createI18n({
+  legacy: false,
+  locale:
+    storageLocal().getItem<StorageConfigs>(
+      `${responsiveStorageNameSpace()}locale`
+    )?.locale ?? "zh",
+  fallbackLocale: "en",
+  messages: localesConfigs
+});
+
+export function useI18n(app: App) {
+  app.use(i18n);
+}
diff --git a/Yi.Pure.Vue3/src/plugins/vxeTable.ts b/Yi.Pure.Vue3/src/plugins/vxeTable.ts
new file mode 100644
index 00000000..c7c7cdde
--- /dev/null
+++ b/Yi.Pure.Vue3/src/plugins/vxeTable.ts
@@ -0,0 +1,104 @@
+import "vxe-table/lib/style.css";
+// import "xe-utils";
+// import XEUtils from "xe-utils";
+import type { App } from "vue";
+// import { i18n } from "@/plugins/i18n";
+// import zh from "vxe-table/lib/locale/lang/zh-CN";
+// import en from "vxe-table/lib/locale/lang/en-US";
+
+import {
+  // 全局对象
+  VXETable,
+  // 表格功能
+  // Filter,
+  // Edit,
+  // Menu,
+  // Export,
+  // Keyboard,
+  // Validator,
+  Custom,
+  // 可选组件
+  Icon,
+  Column,
+  Grid,
+  Pager,
+  Select,
+  // Colgroup,
+  // Tooltip,
+  // Toolbar,
+  // Form,
+  // FormItem,
+  // FormGather,
+  // Checkbox,
+  // CheckboxGroup,
+  // Radio,
+  // RadioGroup,
+  // RadioButton,
+  // Switch,
+  // Input,
+  // Optgroup,
+  // Option,
+  // Textarea,
+  // Button,
+  // Modal,
+  // List,
+  // Pulldown,
+  // 表格
+  Table
+} from "vxe-table";
+
+// 全局默认参数
+VXETable.setConfig({
+  // i18n: (key, args) => {
+  //   return unref(i18n.global.locale) === "zh"
+  //     ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
+  //     : XEUtils.toFormatString(XEUtils.get(en, key), args);
+  // },
+  // translate(key) {
+  //   const NAMESPACED = ["el.", "buttons."];
+  //   if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
+  //     return i18n.global.t.call(i18n.global.locale, key);
+  //   }
+  //   return key;
+  // }
+});
+
+export function useVxeTable(app: App) {
+  // 表格功能
+  app
+    // .use(Filter)
+    // .use(Edit)
+    // .use(Menu)
+    // .use(Export)
+    // .use(Keyboard)
+    // .use(Validator)
+    .use(Custom)
+    // 可选组件
+    .use(Icon)
+    .use(Column)
+    .use(Grid)
+    .use(Pager)
+    .use(Select)
+    // .use(Colgroup)
+    // .use(Tooltip)
+    // .use(Toolbar)
+    // .use(Form)
+    // .use(FormItem)
+    // .use(FormGather)
+    // .use(Checkbox)
+    // .use(CheckboxGroup)
+    // .use(Radio)
+    // .use(RadioGroup)
+    // .use(RadioButton)
+    // .use(Switch)
+    // .use(Input)
+    // .use(Optgroup)
+    // .use(Option)
+    // .use(Textarea)
+    // .use(Button)
+    // .use(Modal)
+    // .use(List)
+    // .use(Pulldown)
+    // 安装表格
+    .use(Table);
+}
diff --git a/Yi.Pure.Vue3/src/router/enums.ts b/Yi.Pure.Vue3/src/router/enums.ts
new file mode 100644
index 00000000..78719faf
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/enums.ts
@@ -0,0 +1,55 @@
+// 完整版菜单比较多，将 rank 抽离出来，在此方便维护
+
+const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
+  vueflow = 1,
+  ganttastic = 2,
+  components = 3,
+  able = 4,
+  table = 5,
+  form = 6,
+  list = 7,
+  result = 8,
+  error = 9,
+  frame = 10,
+  nested = 11,
+  permission = 12,
+  system = 13,
+  monitor = 14,
+  tabs = 15,
+  about = 16,
+  editor = 17,
+  flowchart = 18,
+  formdesign = 19,
+  board = 20,
+  ppt = 21,
+  mind = 22,
+  guide = 23,
+  menuoverflow = 24;
+
+export {
+  home,
+  vueflow,
+  ganttastic,
+  components,
+  able,
+  table,
+  form,
+  list,
+  result,
+  error,
+  frame,
+  nested,
+  permission,
+  system,
+  monitor,
+  tabs,
+  about,
+  editor,
+  flowchart,
+  formdesign,
+  board,
+  ppt,
+  mind,
+  guide,
+  menuoverflow
+};
diff --git a/Yi.Pure.Vue3/src/router/index.ts b/Yi.Pure.Vue3/src/router/index.ts
new file mode 100644
index 00000000..91d26d2b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/index.ts
@@ -0,0 +1,208 @@
+import "@/utils/sso";
+import Cookies from "js-cookie";
+import { getConfig } from "@/config";
+import NProgress from "@/utils/progress";
+import { transformI18n } from "@/plugins/i18n";
+import { buildHierarchyTree } from "@/utils/tree";
+import remainingRouter from "./modules/remaining";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import { isUrl, openLink, storageLocal, isAllEmpty } from "@pureadmin/utils";
+import {
+  ascending,
+  getTopMenu,
+  initRouter,
+  isOneOfArray,
+  getHistoryMode,
+  findRouteByPath,
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
+} from "./utils";
+import {
+  type Router,
+  createRouter,
+  type RouteRecordRaw,
+  type RouteComponent
+} from "vue-router";
+import {
+  type DataInfo,
+  userKey,
+  removeToken,
+  multipleTabsKey
+} from "@/utils/auth";
+
+/** 自动导入全部静态路由，无需再手动引入！匹配 src/router/modules 目录（任何嵌套级别）中具有 .ts 扩展名的所有文件，除了 remaining.ts 文件
+ * 如何匹配所有文件请看：https://github.com/mrmlnc/fast-glob#basic-syntax
+ * 如何排除文件请看：https://cn.vitejs.dev/guide/features.html#negative-patterns
+ */
+const modules: Record<string, any> = import.meta.glob(
+  ["./modules/**/*.ts", "!./modules/**/remaining.ts"],
+  {
+    eager: true
+  }
+);
+
+/** 原始静态路由（未做任何处理） */
+const routes = [];
+
+Object.keys(modules).forEach(key => {
+  routes.push(modules[key].default);
+});
+
+/** 导出处理后的静态路由（三级及以上的路由全部拍成二级） */
+export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
+);
+
+/** 用于渲染菜单，保持原始层级 */
+export const constantMenus: Array<RouteComponent> = ascending(
+  routes.flat(Infinity)
+).concat(...remainingRouter);
+
+/** 不参与菜单的路由 */
+export const remainingPaths = Object.keys(remainingRouter).map(v => {
+  return remainingRouter[v].path;
+});
+
+/** 创建路由实例 */
+export const router: Router = createRouter({
+  history: getHistoryMode(import.meta.env.VITE_ROUTER_HISTORY),
+  routes: constantRoutes.concat(...(remainingRouter as any)),
+  strict: true,
+  scrollBehavior(to, from, savedPosition) {
+    return new Promise(resolve => {
+      if (savedPosition) {
+        return savedPosition;
+      } else {
+        if (from.meta.saveSrollTop) {
+          const top: number =
+            document.documentElement.scrollTop || document.body.scrollTop;
+          resolve({ left: 0, top });
+        }
+      }
+    });
+  }
+});
+
+/** 重置路由 */
+export function resetRouter() {
+  router.getRoutes().forEach(route => {
+    const { name, meta } = route;
+    if (name && router.hasRoute(name) && meta?.backstage) {
+      router.removeRoute(name);
+      router.options.routes = formatTwoStageRoutes(
+        formatFlatteningRoutes(
+          buildHierarchyTree(ascending(routes.flat(Infinity)))
+        )
+      );
+    }
+  });
+  usePermissionStoreHook().clearAllCachePage();
+}
+
+/** 路由白名单 */
+const whiteList = ["/login"];
+
+const { VITE_HIDE_HOME } = import.meta.env;
+
+router.beforeEach((to: ToRouteType, _from, next) => {
+  if (to.meta?.keepAlive) {
+    handleAliveRoute(to, "add");
+    // 页面整体刷新和点击标签页刷新
+    if (_from.name === undefined || _from.name === "Redirect") {
+      handleAliveRoute(to);
+    }
+  }
+  const userInfo = storageLocal().getItem<DataInfo<number>>(userKey);
+  NProgress.start();
+  const externalLink = isUrl(to?.name as string);
+  if (!externalLink) {
+    to.matched.some(item => {
+      if (!item.meta.title) return "";
+      const Title = getConfig().Title;
+      if (Title)
+        document.title = `${transformI18n(item.meta.title)} | ${Title}`;
+      else document.title = transformI18n(item.meta.title);
+    });
+  }
+  /** 如果已经登录并存在登录信息后不能跳转到路由白名单，而是继续保持在当前页面 */
+  function toCorrectRoute() {
+    whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
+  }
+  if (Cookies.get(multipleTabsKey) && userInfo) {
+    // 无权限跳转403页面
+    if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
+      next({ path: "/error/403" });
+    }
+    // 开启隐藏首页后在浏览器地址栏手动输入首页welcome路由则跳转到404页面
+    if (VITE_HIDE_HOME === "true" && to.fullPath === "/welcome") {
+      next({ path: "/error/404" });
+    }
+    if (_from?.name) {
+      // name为超链接
+      if (externalLink) {
+        openLink(to?.name as string);
+        NProgress.done();
+      } else {
+        toCorrectRoute();
+      }
+    } else {
+      // 刷新
+      if (
+        usePermissionStoreHook().wholeMenus.length === 0 &&
+        to.path !== "/login"
+      ) {
+        initRouter().then((router: Router) => {
+          if (!useMultiTagsStoreHook().getMultiTagsCache) {
+            const { path } = to;
+            const route = findRouteByPath(
+              path,
+              router.options.routes[0].children
+            );
+            getTopMenu(true);
+            // query、params模式路由传参数的标签页不在此处处理
+            if (route && route.meta?.title) {
+              if (isAllEmpty(route.parentId) && route.meta?.backstage) {
+                // 此处为动态顶级路由（目录）
+                const { path, name, meta } = route.children[0];
+                useMultiTagsStoreHook().handleTags("push", {
+                  path,
+                  name,
+                  meta
+                });
+              } else {
+                const { path, name, meta } = route;
+                useMultiTagsStoreHook().handleTags("push", {
+                  path,
+                  name,
+                  meta
+                });
+              }
+            }
+          }
+          // 确保动态路由完全加入路由列表并且不影响静态路由（注意：动态路由刷新时router.beforeEach可能会触发两次，第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
+          if (isAllEmpty(to.name)) router.push(to.fullPath);
+        });
+      }
+      toCorrectRoute();
+    }
+  } else {
+    if (to.path !== "/login") {
+      if (whiteList.indexOf(to.path) !== -1) {
+        next();
+      } else {
+        removeToken();
+        next({ path: "/login" });
+      }
+    } else {
+      next();
+    }
+  }
+});
+
+router.afterEach(() => {
+  NProgress.done();
+});
+
+export default router;
diff --git a/Yi.Pure.Vue3/src/router/modules/able.ts b/Yi.Pure.Vue3/src/router/modules/able.ts
new file mode 100644
index 00000000..b90bad22
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/able.ts
@@ -0,0 +1,215 @@
+import { $t } from "@/plugins/i18n";
+import { able } from "@/router/enums";
+
+export default {
+  path: "/able",
+  redirect: "/able/watermark",
+  meta: {
+    icon: "ri:ubuntu-fill",
+    title: $t("menus.pureAble"),
+    rank: able
+  },
+  children: [
+    {
+      path: "/able/mqtt-client",
+      name: "MqttClient",
+      component: () => import("@/views/able/mqtt-client.vue"),
+      meta: {
+        title: $t("menus.pureMqtt"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/able/verify",
+      name: "Verify",
+      component: () => import("@/views/able/verify.vue"),
+      meta: {
+        title: $t("menus.pureVerify")
+      }
+    },
+    {
+      path: "/able/watermark",
+      name: "WaterMark",
+      component: () => import("@/views/able/watermark.vue"),
+      meta: {
+        title: $t("menus.pureWatermark")
+      }
+    },
+    {
+      path: "/able/print",
+      name: "Print",
+      component: () => import("@/views/able/print/index.vue"),
+      meta: {
+        title: $t("menus.purePrint")
+      }
+    },
+    {
+      path: "/able/download",
+      name: "Download",
+      component: () => import("@/views/able/download.vue"),
+      meta: {
+        title: $t("menus.pureDownload")
+      }
+    },
+    {
+      path: "/able/excel",
+      name: "Excel",
+      component: () => import("@/views/able/excel.vue"),
+      meta: {
+        title: $t("menus.pureExcel")
+      }
+    },
+    {
+      path: "/components/ripple",
+      name: "Ripple",
+      component: () => import("@/views/able/ripple.vue"),
+      meta: {
+        title: $t("menus.pureRipple")
+      }
+    },
+    {
+      path: "/able/debounce",
+      name: "Debounce",
+      component: () => import("@/views/able/debounce.vue"),
+      meta: {
+        title: $t("menus.pureDebounce")
+      }
+    },
+    {
+      path: "/able/directives",
+      name: "Directives",
+      component: () => import("@/views/able/directives.vue"),
+      meta: {
+        title: $t("menus.pureOptimize")
+      }
+    },
+    {
+      path: "/able/draggable",
+      name: "Draggable",
+      component: () => import("@/views/able/draggable.vue"),
+      meta: {
+        title: $t("menus.pureDraggable"),
+        transition: {
+          enterTransition: "animate__zoomIn",
+          leaveTransition: "animate__zoomOut"
+        }
+      }
+    },
+    {
+      path: "/able/pdf",
+      name: "Pdf",
+      component: () => import("@/views/able/pdf.vue"),
+      meta: {
+        title: $t("menus.purePdf")
+      }
+    },
+    {
+      path: "/able/barcode",
+      name: "BarCode",
+      component: () => import("@/views/able/barcode.vue"),
+      meta: {
+        title: $t("menus.pureBarcode")
+      }
+    },
+    {
+      path: "/able/qrcode",
+      name: "QrCode",
+      component: () => import("@/views/able/qrcode.vue"),
+      meta: {
+        title: $t("menus.pureQrcode")
+      }
+    },
+    {
+      path: "/able/map",
+      name: "MapPage",
+      component: () => import("@/views/able/map.vue"),
+      meta: {
+        title: $t("menus.pureMap"),
+        keepAlive: true,
+        transition: {
+          name: "fade"
+        }
+      }
+    },
+    {
+      path: "/able/wavesurfer",
+      name: "Wavesurfer",
+      component: () => import("@/views/able/wavesurfer/index.vue"),
+      meta: {
+        title: $t("menus.pureWavesurfer")
+      }
+    },
+    {
+      path: "/able/video",
+      name: "VideoPage",
+      component: () => import("@/views/able/video.vue"),
+      meta: {
+        title: $t("menus.pureVideo")
+      }
+    },
+    {
+      path: "/able/video-frame",
+      name: "VideoFrame",
+      component: () => import("@/views/able/video-frame/index.vue"),
+      meta: {
+        title: $t("menus.pureVideoFrame")
+      }
+    },
+    {
+      path: "/able/danmaku",
+      name: "Danmaku",
+      component: () => import("@/views/able/danmaku/index.vue"),
+      meta: {
+        title: $t("menus.pureDanmaku")
+      }
+    },
+    {
+      path: "/able/infinite-scroll",
+      name: "InfiniteScroll",
+      component: () => import("@/views/able/infinite-scroll.vue"),
+      meta: {
+        title: $t("menus.pureInfiniteScroll")
+      }
+    },
+    {
+      path: "/able/menu-tree",
+      name: "MenuTree",
+      component: () => import("@/views/able/menu-tree.vue"),
+      meta: {
+        title: $t("menus.pureMenuTree")
+      }
+    },
+    {
+      path: "/able/line-tree",
+      name: "LineTree",
+      component: () => import("@/views/able/line-tree.vue"),
+      meta: {
+        title: $t("menus.pureLineTree")
+      }
+    },
+    {
+      path: "/able/typeit",
+      name: "Typeit",
+      component: () => import("@/views/able/typeit.vue"),
+      meta: {
+        title: $t("menus.pureTypeit")
+      }
+    },
+    {
+      path: "/able/sensitive",
+      name: "Sensitive",
+      component: () => import("@/views/able/sensitive.vue"),
+      meta: {
+        title: $t("menus.pureSensitive")
+      }
+    },
+    {
+      path: "/able/pinyin",
+      name: "Pinyin",
+      component: () => import("@/views/able/pinyin.vue"),
+      meta: {
+        title: $t("menus.purePinyin")
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/about.ts b/Yi.Pure.Vue3/src/router/modules/about.ts
new file mode 100644
index 00000000..47a5555b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/about.ts
@@ -0,0 +1,22 @@
+import { $t } from "@/plugins/i18n";
+import { about } from "@/router/enums";
+
+export default {
+  path: "/about",
+  redirect: "/about/index",
+  meta: {
+    icon: "ri:file-info-line",
+    title: $t("menus.pureAbout"),
+    rank: about
+  },
+  children: [
+    {
+      path: "/about/index",
+      name: "About",
+      component: () => import("@/views/about/index.vue"),
+      meta: {
+        title: $t("menus.pureAbout")
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/board.ts b/Yi.Pure.Vue3/src/router/modules/board.ts
new file mode 100644
index 00000000..afac3467
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/board.ts
@@ -0,0 +1,25 @@
+import { $t } from "@/plugins/i18n";
+import { board } from "@/router/enums";
+const IFrame = () => import("@/layout/frame.vue");
+
+export default {
+  path: "/board",
+  redirect: "/board/index",
+  meta: {
+    icon: "ri:artboard-line",
+    title: $t("menus.pureBoard"),
+    rank: board
+  },
+  children: [
+    {
+      path: "/board/index",
+      name: "FrameBoard",
+      component: IFrame,
+      meta: {
+        title: $t("menus.pureBoard"),
+        keepAlive: true,
+        frameSrc: "https://songlh.top/paint-board/"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/components.ts b/Yi.Pure.Vue3/src/router/modules/components.ts
new file mode 100644
index 00000000..830cea5d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/components.ts
@@ -0,0 +1,265 @@
+import { $t } from "@/plugins/i18n";
+import { components } from "@/router/enums";
+
+export default {
+  path: "/components",
+  redirect: "/components/dialog",
+  meta: {
+    icon: "ep:menu",
+    title: $t("menus.pureComponents"),
+    rank: components
+  },
+  children: [
+    {
+      path: "/components/dialog",
+      name: "DialogPage",
+      component: () => import("@/views/components/dialog/index.vue"),
+      meta: {
+        title: $t("menus.pureDialog")
+      }
+    },
+    {
+      path: "/components/message",
+      name: "Message",
+      component: () => import("@/views/components/message.vue"),
+      meta: {
+        title: $t("menus.pureMessage")
+      }
+    },
+    {
+      path: "/components/upload",
+      name: "PureUpload",
+      component: () => import("@/views/components/upload/index.vue"),
+      meta: {
+        title: $t("menus.pureUpload")
+      }
+    },
+    {
+      path: "/components/check-card",
+      name: "CheckCard",
+      component: () => import("@/views/components/check-card.vue"),
+      meta: {
+        title: $t("menus.pureCheckCard"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/components/date-picker",
+      name: "DatePicker",
+      component: () => import("@/views/components/date-picker.vue"),
+      meta: {
+        title: $t("menus.pureDatePicker")
+      }
+    },
+    {
+      path: "/components/datetime-picker",
+      name: "DateTimePicker",
+      component: () => import("@/views/components/datetime-picker.vue"),
+      meta: {
+        title: $t("menus.pureDateTimePicker")
+      }
+    },
+    {
+      path: "/components/time-picker",
+      name: "TimePicker",
+      component: () => import("@/views/components/time-picker.vue"),
+      meta: {
+        title: $t("menus.pureTimePicker")
+      }
+    },
+    {
+      path: "/components/icon-select",
+      name: "IconSelect",
+      component: () => import("@/views/components/icon-select.vue"),
+      meta: {
+        title: $t("menus.pureIconSelect")
+      }
+    },
+    {
+      path: "/components/animatecss",
+      name: "AnimateCss",
+      component: () => import("@/views/components/animatecss.vue"),
+      meta: {
+        title: $t("menus.pureAnimatecss")
+      }
+    },
+    {
+      path: "/components/cropping",
+      name: "Cropping",
+      component: () => import("@/views/components/cropping/index.vue"),
+      meta: {
+        title: $t("menus.pureCropping")
+      }
+    },
+    {
+      path: "/components/segmented",
+      name: "Segmented",
+      component: () => import("@/views/components/segmented.vue"),
+      meta: {
+        title: $t("menus.pureSegmented")
+      }
+    },
+    {
+      path: "/components/text",
+      name: "PureText",
+      component: () => import("@/views/components/text.vue"),
+      meta: {
+        title: $t("menus.pureText"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/components/el-button",
+      name: "PureButton",
+      component: () => import("@/views/components/el-button.vue"),
+      meta: {
+        title: $t("menus.pureElButton")
+      }
+    },
+    {
+      path: "/components/check-button",
+      name: "CheckButton",
+      component: () => import("@/views/components/check-button.vue"),
+      meta: {
+        title: $t("menus.pureCheckButton"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/components/button",
+      name: "ButtonPage",
+      component: () => import("@/views/components/button.vue"),
+      meta: {
+        title: $t("menus.pureButton")
+      }
+    },
+    {
+      path: "/components/progress",
+      name: "PureProgress",
+      component: () => import("@/views/components/progress.vue"),
+      meta: {
+        title: $t("menus.pureProgress")
+      }
+    },
+    {
+      path: "/components/tag",
+      name: "PureTag",
+      component: () => import("@/views/components/tag.vue"),
+      meta: {
+        title: $t("menus.pureTag")
+      }
+    },
+    {
+      path: "/components/statistic",
+      name: "Statistic",
+      component: () => import("@/views/components/statistic.vue"),
+      meta: {
+        title: $t("menus.pureStatistic")
+      }
+    },
+    {
+      path: "/components/collapse",
+      name: "Collapse",
+      component: () => import("@/views/components/collapse.vue"),
+      meta: {
+        title: $t("menus.pureCollapse")
+      }
+    },
+    {
+      path: "/components/cascader",
+      name: "Cascader",
+      component: () => import("@/views/components/cascader.vue"),
+      meta: {
+        title: $t("menus.pureCascader")
+      }
+    },
+    {
+      path: "/components/color-picker",
+      name: "ColorPicker",
+      component: () => import("@/views/components/color-picker.vue"),
+      meta: {
+        title: $t("menus.pureColorPicker")
+      }
+    },
+    {
+      path: "/components/selector",
+      name: "Selector",
+      component: () => import("@/views/components/selector.vue"),
+      meta: {
+        title: $t("menus.pureSelector")
+      }
+    },
+    {
+      path: "/components/waterfall",
+      name: "Waterfall",
+      component: () => import("@/views/components/waterfall/index.vue"),
+      meta: {
+        title: $t("menus.pureWaterfall")
+      }
+    },
+    {
+      path: "/components/split-pane",
+      name: "SplitPane",
+      component: () => import("@/views/components/split-pane.vue"),
+      meta: {
+        title: $t("menus.pureSplitPane")
+      }
+    },
+    {
+      path: "/components/swiper",
+      name: "Swiper",
+      component: () => import("@/views/components/swiper.vue"),
+      meta: {
+        title: $t("menus.pureSwiper")
+      }
+    },
+    {
+      path: "/components/timeline",
+      name: "TimeLine",
+      component: () => import("@/views/components/timeline.vue"),
+      meta: {
+        title: $t("menus.pureTimeline")
+      }
+    },
+    {
+      path: "/components/count-to",
+      name: "CountTo",
+      component: () => import("@/views/components/count-to.vue"),
+      meta: {
+        title: $t("menus.pureCountTo")
+      }
+    },
+    {
+      path: "/components/contextmenu",
+      name: "ContextMenu",
+      component: () => import("@/views/components/contextmenu/index.vue"),
+      meta: {
+        title: $t("menus.pureContextmenu")
+      }
+    },
+    {
+      path: "/components/json-editor",
+      name: "JsonEditor",
+      component: () => import("@/views/components/json-editor.vue"),
+      meta: {
+        title: $t("menus.pureJsonEditor")
+      }
+    },
+    {
+      path: "/components/seamless-scroll",
+      name: "SeamlessScroll",
+      component: () => import("@/views/components/seamless-scroll.vue"),
+      meta: {
+        title: $t("menus.pureSeamless")
+      }
+    },
+    {
+      path: "/components/virtual-list",
+      name: "VirtualList",
+      component: () => import("@/views/components/virtual-list/index.vue"),
+      meta: {
+        title: $t("menus.pureVirtualList")
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/editor.ts b/Yi.Pure.Vue3/src/router/modules/editor.ts
new file mode 100644
index 00000000..a5e1ec9f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/editor.ts
@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { editor } from "@/router/enums";
+
+export default {
+  path: "/editor",
+  redirect: "/editor/index",
+  meta: {
+    icon: "ep:edit",
+    title: $t("menus.pureEditor"),
+    rank: editor
+  },
+  children: [
+    {
+      path: "/editor/index",
+      name: "Editor",
+      component: () => import("@/views/editor/index.vue"),
+      meta: {
+        title: $t("menus.pureEditor"),
+        keepAlive: true
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/error.ts b/Yi.Pure.Vue3/src/router/modules/error.ts
new file mode 100644
index 00000000..359a7631
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/error.ts
@@ -0,0 +1,39 @@
+import { $t } from "@/plugins/i18n";
+import { error } from "@/router/enums";
+
+export default {
+  path: "/error",
+  redirect: "/error/403",
+  meta: {
+    icon: "ri:information-line",
+    // showLink: false,
+    title: $t("menus.pureAbnormal"),
+    rank: error
+  },
+  children: [
+    {
+      path: "/error/403",
+      name: "403",
+      component: () => import("@/views/error/403.vue"),
+      meta: {
+        title: $t("menus.pureFourZeroOne")
+      }
+    },
+    {
+      path: "/error/404",
+      name: "404",
+      component: () => import("@/views/error/404.vue"),
+      meta: {
+        title: $t("menus.pureFourZeroFour")
+      }
+    },
+    {
+      path: "/error/500",
+      name: "500",
+      component: () => import("@/views/error/500.vue"),
+      meta: {
+        title: $t("menus.pureFive")
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/flowchart.ts b/Yi.Pure.Vue3/src/router/modules/flowchart.ts
new file mode 100644
index 00000000..05dd31bf
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/flowchart.ts
@@ -0,0 +1,22 @@
+import { $t } from "@/plugins/i18n";
+import { flowchart } from "@/router/enums";
+
+export default {
+  path: "/flow-chart",
+  redirect: "/flow-chart/index",
+  meta: {
+    icon: "ep:set-up",
+    title: $t("menus.pureFlowChart"),
+    rank: flowchart
+  },
+  children: [
+    {
+      path: "/flow-chart/index",
+      name: "FlowChart",
+      component: () => import("@/views/flow-chart/index.vue"),
+      meta: {
+        title: $t("menus.pureFlowChart")
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/form.ts b/Yi.Pure.Vue3/src/router/modules/form.ts
new file mode 100644
index 00000000..63980491
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/form.ts
@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { form } from "@/router/enums";
+
+export default {
+  path: "/form",
+  redirect: "/form/index",
+  meta: {
+    icon: "ri:edit-box-line",
+    title: $t("menus.pureSchemaForm"),
+    rank: form
+  },
+  children: [
+    {
+      path: "/form/index",
+      name: "SchemaForm",
+      component: () => import("@/views/schema-form/index.vue"),
+      meta: {
+        title: $t("menus.pureSchemaForm"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/formdesign.ts b/Yi.Pure.Vue3/src/router/modules/formdesign.ts
new file mode 100644
index 00000000..d6891279
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/formdesign.ts
@@ -0,0 +1,27 @@
+import { $t } from "@/plugins/i18n";
+import { formdesign } from "@/router/enums";
+const IFrame = () => import("@/layout/frame.vue");
+
+export default {
+  path: "/form-design",
+  redirect: "/form-design/index",
+  meta: {
+    icon: "ri:terminal-window-line",
+    title: $t("menus.pureFormDesign"),
+    rank: formdesign
+  },
+  children: [
+    {
+      path: "/form-design/index",
+      name: "FormDesign",
+      component: IFrame,
+      meta: {
+        title: $t("menus.pureFormDesign"),
+        keepAlive: true,
+        frameSrc:
+          "https://haixin-fang.github.io/vue-form-design/playground/index.html",
+        frameLoading: false
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/ganttastic.ts b/Yi.Pure.Vue3/src/router/modules/ganttastic.ts
new file mode 100644
index 00000000..1b68b725
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/ganttastic.ts
@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { ganttastic } from "@/router/enums";
+
+export default {
+  path: "/ganttastic",
+  redirect: "/ganttastic/index",
+  meta: {
+    icon: "ri:bar-chart-horizontal-line",
+    title: $t("menus.pureGanttastic"),
+    rank: ganttastic
+  },
+  children: [
+    {
+      path: "/ganttastic/index",
+      name: "Ganttastic",
+      component: () => import("@/views/ganttastic/index.vue"),
+      meta: {
+        title: $t("menus.pureGanttastic"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/guide.ts b/Yi.Pure.Vue3/src/router/modules/guide.ts
new file mode 100644
index 00000000..cf2bf7fd
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/guide.ts
@@ -0,0 +1,22 @@
+import { $t } from "@/plugins/i18n";
+import { guide } from "@/router/enums";
+
+export default {
+  path: "/guide",
+  redirect: "/guide/index",
+  meta: {
+    icon: "ep:guide",
+    title: $t("menus.pureGuide"),
+    rank: guide
+  },
+  children: [
+    {
+      path: "/guide/index",
+      name: "Guide",
+      component: () => import("@/views/guide/index.vue"),
+      meta: {
+        title: $t("menus.pureGuide")
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/home.ts b/Yi.Pure.Vue3/src/router/modules/home.ts
new file mode 100644
index 00000000..8bdc39f9
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/home.ts
@@ -0,0 +1,27 @@
+import { $t } from "@/plugins/i18n";
+import { home } from "@/router/enums";
+const { VITE_HIDE_HOME } = import.meta.env;
+const Layout = () => import("@/layout/index.vue");
+
+export default {
+  path: "/",
+  name: "Home",
+  component: Layout,
+  redirect: "/welcome",
+  meta: {
+    icon: "ep:home-filled",
+    title: $t("menus.pureHome"),
+    rank: home
+  },
+  children: [
+    {
+      path: "/welcome",
+      name: "Welcome",
+      component: () => import("@/views/welcome/index.vue"),
+      meta: {
+        title: $t("menus.pureHome"),
+        showLink: VITE_HIDE_HOME === "true" ? false : true
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/list.ts b/Yi.Pure.Vue3/src/router/modules/list.ts
new file mode 100644
index 00000000..65958460
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/list.ts
@@ -0,0 +1,24 @@
+import { $t } from "@/plugins/i18n";
+import { list } from "@/router/enums";
+
+export default {
+  path: "/list",
+  redirect: "/list/card",
+  meta: {
+    icon: "ri:list-check",
+    title: $t("menus.pureList"),
+    rank: list
+  },
+  children: [
+    {
+      path: "/list/card",
+      name: "CardList",
+      component: () => import("@/views/list/card/index.vue"),
+      meta: {
+        icon: "ri:bank-card-line",
+        title: $t("menus.pureCardList"),
+        showParent: true
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/menuoverflow.ts b/Yi.Pure.Vue3/src/router/modules/menuoverflow.ts
new file mode 100644
index 00000000..df6ddad3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/menuoverflow.ts
@@ -0,0 +1,22 @@
+import { $t } from "@/plugins/i18n";
+import { menuoverflow } from "@/router/enums";
+
+export default {
+  path: "/menuoverflow",
+  redirect: "/menuoverflow/index",
+  meta: {
+    title: $t("menus.pureMenuOverflow"),
+    rank: menuoverflow
+  },
+  children: [
+    {
+      path: "/menuoverflow/index",
+      name: "MenuOverflow",
+      component: () => import("@/views/menuoverflow/index.vue"),
+      meta: {
+        title: $t("menus.pureChildMenuOverflow"),
+        showParent: true
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/mind.ts b/Yi.Pure.Vue3/src/router/modules/mind.ts
new file mode 100644
index 00000000..49109c70
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/mind.ts
@@ -0,0 +1,25 @@
+import { $t } from "@/plugins/i18n";
+import { mind } from "@/router/enums";
+const IFrame = () => import("@/layout/frame.vue");
+
+export default {
+  path: "/mind-map",
+  redirect: "/mind-map/index",
+  meta: {
+    icon: "ri:mind-map",
+    title: $t("menus.pureMindMap"),
+    rank: mind
+  },
+  children: [
+    {
+      path: "/mind-map/index",
+      name: "FrameMindMap",
+      component: IFrame,
+      meta: {
+        title: $t("menus.pureMindMap"),
+        keepAlive: true,
+        frameSrc: "https://wanglin2.github.io/mind-map/#/"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/nested.ts b/Yi.Pure.Vue3/src/router/modules/nested.ts
new file mode 100644
index 00000000..bc42f462
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/nested.ts
@@ -0,0 +1,81 @@
+import { $t } from "@/plugins/i18n";
+import { nested } from "@/router/enums";
+
+export default {
+  path: "/nested",
+  redirect: "/nested/menu1/menu1-1",
+  meta: {
+    title: $t("menus.pureMenus"),
+    icon: "ep:histogram",
+    rank: nested
+  },
+  children: [
+    {
+      path: "/nested/menu1",
+      meta: {
+        title: $t("menus.pureMenu1"),
+        keepAlive: true
+      },
+      redirect: "/nested/menu1/menu1-1",
+      children: [
+        {
+          path: "/nested/menu1/menu1-1",
+          component: () => import("@/views/nested/menu1/menu1-1/index.vue"),
+          name: "Menu1-1",
+          meta: {
+            title: $t("menus.pureMenu1-1"),
+            keepAlive: true
+          }
+        },
+        {
+          path: "/nested/menu1/menu1-2",
+          redirect: "/nested/menu1/menu1-2/menu1-2-1",
+          meta: {
+            title: $t("menus.pureMenu1-2"),
+            keepAlive: true
+          },
+          children: [
+            {
+              path: "/nested/menu1/menu1-2/menu1-2-1",
+              component: () =>
+                import("@/views/nested/menu1/menu1-2/menu1-2-1/index.vue"),
+              name: "Menu1-2-1",
+              meta: {
+                title: $t("menus.pureMenu1-2-1"),
+                keepAlive: true
+              }
+            },
+            {
+              path: "/nested/menu1/menu1-2/menu1-2-2",
+              component: () =>
+                import("@/views/nested/menu1/menu1-2/menu1-2-2/index.vue"),
+              name: "Menu1-2-2",
+              meta: {
+                title: $t("menus.pureMenu1-2-2"),
+                keepAlive: true
+              }
+            }
+          ]
+        },
+        {
+          path: "/nested/menu1/menu1-3",
+          component: () => import("@/views/nested/menu1/menu1-3/index.vue"),
+          name: "Menu1-3",
+          meta: {
+            title: $t("menus.pureMenu1-3"),
+            keepAlive: true
+          }
+        }
+      ]
+    },
+    {
+      path: "/nested/menu2",
+      name: "Menu2",
+      component: () => import("@/views/nested/menu2/index.vue"),
+      meta: {
+        title: $t("menus.pureMenu2"),
+        keepAlive: true
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/ppt.ts b/Yi.Pure.Vue3/src/router/modules/ppt.ts
new file mode 100644
index 00000000..4d7f9fea
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/ppt.ts
@@ -0,0 +1,25 @@
+import { ppt } from "@/router/enums";
+const IFrame = () => import("@/layout/frame.vue");
+
+export default {
+  path: "/ppt",
+  redirect: "/ppt/index",
+  meta: {
+    icon: "ri:file-ppt-2-line",
+    title: "PPT",
+    rank: ppt
+  },
+  children: [
+    {
+      path: "/ppt/index",
+      name: "FramePpt",
+      component: IFrame,
+      meta: {
+        title: "PPT",
+        keepAlive: true,
+        frameSrc: "https://pipipi-pikachu.github.io/PPTist/",
+        frameLoading: false
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/remaining.ts b/Yi.Pure.Vue3/src/router/modules/remaining.ts
new file mode 100644
index 00000000..7e964198
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/remaining.ts
@@ -0,0 +1,52 @@
+import { $t } from "@/plugins/i18n";
+const Layout = () => import("@/layout/index.vue");
+
+export default [
+  {
+    path: "/login",
+    name: "Login",
+    component: () => import("@/views/login/index.vue"),
+    meta: {
+      title: $t("menus.pureLogin"),
+      showLink: false,
+      rank: 101
+    }
+  },
+  {
+    path: "/redirect",
+    component: Layout,
+    meta: {
+      title: $t("status.pureLoad"),
+      showLink: false,
+      rank: 102
+    },
+    children: [
+      {
+        path: "/redirect/:path(.*)",
+        name: "Redirect",
+        component: () => import("@/layout/redirect.vue")
+      }
+    ]
+  },
+  // 下面是一个无layout菜单的例子（一个全屏空白页面），因为这种情况极少发生，所以只需要在前端配置即可（配置路径：src/router/modules/remaining.ts）
+  {
+    path: "/empty",
+    name: "Empty",
+    component: () => import("@/views/empty/index.vue"),
+    meta: {
+      title: $t("menus.pureEmpty"),
+      showLink: false,
+      rank: 103
+    }
+  },
+  {
+    path: "/account-settings",
+    name: "AccountSettings",
+    component: () => import("@/views/account-settings/index.vue"),
+    meta: {
+      title: $t("buttons.pureAccountSettings"),
+      showLink: false,
+      rank: 104
+    }
+  }
+] satisfies Array<RouteConfigsTable>;
diff --git a/Yi.Pure.Vue3/src/router/modules/result.ts b/Yi.Pure.Vue3/src/router/modules/result.ts
new file mode 100644
index 00000000..4e894c16
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/result.ts
@@ -0,0 +1,30 @@
+import { $t } from "@/plugins/i18n";
+import { result } from "@/router/enums";
+
+export default {
+  path: "/result",
+  redirect: "/result/success",
+  meta: {
+    icon: "ri:checkbox-circle-line",
+    title: $t("menus.pureResult"),
+    rank: result
+  },
+  children: [
+    {
+      path: "/result/success",
+      name: "Success",
+      component: () => import("@/views/result/success.vue"),
+      meta: {
+        title: $t("menus.pureSuccess")
+      }
+    },
+    {
+      path: "/result/fail",
+      name: "Fail",
+      component: () => import("@/views/result/fail.vue"),
+      meta: {
+        title: $t("menus.pureFail")
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/table.ts b/Yi.Pure.Vue3/src/router/modules/table.ts
new file mode 100644
index 00000000..56b279f0
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/table.ts
@@ -0,0 +1,48 @@
+import { $t } from "@/plugins/i18n";
+import { table } from "@/router/enums";
+
+export default {
+  path: "/table",
+  redirect: "/table/index",
+  meta: {
+    icon: "ri:table-line",
+    title: $t("menus.pureTable"),
+    rank: table
+  },
+  children: [
+    {
+      path: "/table/index",
+      name: "PureTable",
+      component: () => import("@/views/table/index.vue"),
+      meta: {
+        title: $t("menus.pureTableBase")
+      }
+    },
+    {
+      path: "/table/high",
+      name: "PureTableHigh",
+      component: () => import("@/views/table/high.vue"),
+      meta: {
+        title: $t("menus.pureTableHigh")
+      }
+    },
+    {
+      path: "/table/edit",
+      name: "PureTableEdit",
+      component: () => import("@/views/table/edit.vue"),
+      meta: {
+        title: $t("menus.pureTableEdit"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/table/virtual",
+      name: "VxeTable",
+      component: () => import("@/views/table/virtual.vue"),
+      meta: {
+        title: $t("menus.pureVxeTable"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/modules/vueflow.ts b/Yi.Pure.Vue3/src/router/modules/vueflow.ts
new file mode 100644
index 00000000..7f01685e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/modules/vueflow.ts
@@ -0,0 +1,22 @@
+import { vueflow } from "@/router/enums";
+
+export default {
+  path: "/vue-flow",
+  redirect: "/vue-flow/index",
+  meta: {
+    icon: "ep:set-up",
+    title: "vue-flow",
+    rank: vueflow
+  },
+  children: [
+    {
+      path: "/vue-flow/index",
+      name: "VueFlow",
+      component: () => import("@/views/vue-flow/layouting/index.vue"),
+      meta: {
+        title: "vue-flow",
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
diff --git a/Yi.Pure.Vue3/src/router/utils.ts b/Yi.Pure.Vue3/src/router/utils.ts
new file mode 100644
index 00000000..dd6df9aa
--- /dev/null
+++ b/Yi.Pure.Vue3/src/router/utils.ts
@@ -0,0 +1,408 @@
+import {
+  type RouterHistory,
+  type RouteRecordRaw,
+  type RouteComponent,
+  createWebHistory,
+  createWebHashHistory
+} from "vue-router";
+import { router } from "./index";
+import { isProxy, toRaw } from "vue";
+import { useTimeoutFn } from "@vueuse/core";
+import {
+  isString,
+  cloneDeep,
+  isAllEmpty,
+  intersection,
+  storageLocal,
+  isIncludeAllChildren
+} from "@pureadmin/utils";
+import { getConfig } from "@/config";
+import { buildHierarchyTree } from "@/utils/tree";
+import { userKey, type DataInfo } from "@/utils/auth";
+import { type menuType, routerArrays } from "@/layout/types";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+const IFrame = () => import("@/layout/frame.vue");
+// https://cn.vitejs.dev/guide/features.html#glob-import
+const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
+
+// 动态路由
+import { getAsyncRoutes } from "@/api/routes";
+
+function handRank(routeInfo: any) {
+  const { name, path, parentId, meta } = routeInfo;
+  return isAllEmpty(parentId)
+    ? isAllEmpty(meta?.rank) ||
+      (meta?.rank === 0 && name !== "Home" && path !== "/")
+      ? true
+      : false
+    : false;
+}
+
+/** 按照路由中meta下的rank等级升序来排序路由 */
+function ascending(arr: any[]) {
+  arr.forEach((v, index) => {
+    // 当rank不存在时，根据顺序自动创建，首页路由永远在第一位
+    if (handRank(v)) v.meta.rank = index + 2;
+  });
+  return arr.sort(
+    (a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
+      return a?.meta.rank - b?.meta.rank;
+    }
+  );
+}
+
+/** 过滤meta中showLink为false的菜单 */
+function filterTree(data: RouteComponent[]) {
+  const newTree = cloneDeep(data).filter(
+    (v: { meta: { showLink: boolean } }) => v.meta?.showLink !== false
+  );
+  newTree.forEach(
+    (v: { children }) => v.children && (v.children = filterTree(v.children))
+  );
+  return newTree;
+}
+
+/** 过滤children长度为0的的目录，当目录下没有菜单时，会过滤此目录，目录没有赋予roles权限，当目录下只要有一个菜单有显示权限，那么此目录就会显示 */
+function filterChildrenTree(data: RouteComponent[]) {
+  const newTree = cloneDeep(data).filter((v: any) => v?.children?.length !== 0);
+  newTree.forEach(
+    (v: { children }) => v.children && (v.children = filterTree(v.children))
+  );
+  return newTree;
+}
+
+/** 判断两个数组彼此是否存在相同值 */
+function isOneOfArray(a: Array<string>, b: Array<string>) {
+  return Array.isArray(a) && Array.isArray(b)
+    ? intersection(a, b).length > 0
+      ? true
+      : false
+    : true;
+}
+
+/** 从localStorage里取出当前登录用户的角色roles，过滤无权限的菜单 */
+function filterNoPermissionTree(data: RouteComponent[]) {
+  const currentRoles =
+    storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
+  const newTree = cloneDeep(data).filter((v: any) =>
+    isOneOfArray(v.meta?.roles, currentRoles)
+  );
+  newTree.forEach(
+    (v: any) => v.children && (v.children = filterNoPermissionTree(v.children))
+  );
+  return filterChildrenTree(newTree);
+}
+
+/** 通过指定 `key` 获取父级路径集合，默认 `key` 为 `path` */
+function getParentPaths(value: string, routes: RouteRecordRaw[], key = "path") {
+  // 深度遍历查找
+  function dfs(routes: RouteRecordRaw[], value: string, parents: string[]) {
+    for (let i = 0; i < routes.length; i++) {
+      const item = routes[i];
+      // 返回父级path
+      if (item[key] === value) return parents;
+      // children不存在或为空则不递归
+      if (!item.children || !item.children.length) continue;
+      // 往下查找时将当前path入栈
+      parents.push(item.path);
+
+      if (dfs(item.children, value, parents).length) return parents;
+      // 深度遍历查找未找到时当前path 出栈
+      parents.pop();
+    }
+    // 未找到时返回空数组
+    return [];
+  }
+
+  return dfs(routes, value, []);
+}
+
+/** 查找对应 `path` 的路由信息 */
+function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
+  let res = routes.find((item: { path: string }) => item.path == path);
+  if (res) {
+    return isProxy(res) ? toRaw(res) : res;
+  } else {
+    for (let i = 0; i < routes.length; i++) {
+      if (
+        routes[i].children instanceof Array &&
+        routes[i].children.length > 0
+      ) {
+        res = findRouteByPath(path, routes[i].children);
+        if (res) {
+          return isProxy(res) ? toRaw(res) : res;
+        }
+      }
+    }
+    return null;
+  }
+}
+
+function addPathMatch() {
+  if (!router.hasRoute("pathMatch")) {
+    router.addRoute({
+      path: "/:pathMatch(.*)",
+      name: "pathMatch",
+      redirect: "/error/404"
+    });
+  }
+}
+
+/** 处理动态路由（后端返回的路由） */
+function handleAsyncRoutes(routeList) {
+  if (routeList.length === 0) {
+    usePermissionStoreHook().handleWholeMenus(routeList);
+  } else {
+    formatFlatteningRoutes(addAsyncRoutes(routeList)).map(
+      (v: RouteRecordRaw) => {
+        // 防止重复添加路由
+        if (
+          router.options.routes[0].children.findIndex(
+            value => value.path === v.path
+          ) !== -1
+        ) {
+          return;
+        } else {
+          // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
+          router.options.routes[0].children.push(v);
+          // 最终路由进行升序
+          ascending(router.options.routes[0].children);
+          if (!router.hasRoute(v?.name)) router.addRoute(v);
+          const flattenRouters: any = router
+            .getRoutes()
+            .find(n => n.path === "/");
+          router.addRoute(flattenRouters);
+        }
+      }
+    );
+    usePermissionStoreHook().handleWholeMenus(routeList);
+  }
+  if (!useMultiTagsStoreHook().getMultiTagsCache) {
+    useMultiTagsStoreHook().handleTags("equal", [
+      ...routerArrays,
+      ...usePermissionStoreHook().flatteningRoutes.filter(
+        v => v?.meta?.fixedTag
+      )
+    ]);
+  }
+  addPathMatch();
+}
+
+/** 初始化路由（`new Promise` 写法防止在异步请求中造成无限循环）*/
+function initRouter() {
+  if (getConfig()?.CachingAsyncRoutes) {
+    // 开启动态路由缓存本地localStorage
+    const key = "async-routes";
+    const asyncRouteList = storageLocal().getItem(key) as any;
+    if (asyncRouteList && asyncRouteList?.length > 0) {
+      return new Promise(resolve => {
+        handleAsyncRoutes(asyncRouteList);
+        resolve(router);
+      });
+    } else {
+      return new Promise(resolve => {
+        getAsyncRoutes().then(({ data }) => {
+          handleAsyncRoutes(cloneDeep(data));
+          storageLocal().setItem(key, data);
+          resolve(router);
+        });
+      });
+    }
+  } else {
+    return new Promise(resolve => {
+      getAsyncRoutes().then(({ data }) => {
+        handleAsyncRoutes(cloneDeep(data));
+        resolve(router);
+      });
+    });
+  }
+}
+
+/**
+ * 将多级嵌套路由处理成一维数组
+ * @param routesList 传入路由
+ * @returns 返回处理后的一维路由
+ */
+function formatFlatteningRoutes(routesList: RouteRecordRaw[]) {
+  if (routesList.length === 0) return routesList;
+  let hierarchyList = buildHierarchyTree(routesList);
+  for (let i = 0; i < hierarchyList.length; i++) {
+    if (hierarchyList[i].children) {
+      hierarchyList = hierarchyList
+        .slice(0, i + 1)
+        .concat(hierarchyList[i].children, hierarchyList.slice(i + 1));
+    }
+  }
+  return hierarchyList;
+}
+
+/**
+ * 一维数组处理成多级嵌套数组（三级及以上的路由全部拍成二级，keep-alive 只支持到二级缓存）
+ * https://github.com/pure-admin/vue-pure-admin/issues/67
+ * @param routesList 处理后的一维路由菜单数组
+ * @returns 返回将一维数组重新处理成规定路由的格式
+ */
+function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
+  if (routesList.length === 0) return routesList;
+  const newRoutesList: RouteRecordRaw[] = [];
+  routesList.forEach((v: RouteRecordRaw) => {
+    if (v.path === "/") {
+      newRoutesList.push({
+        component: v.component,
+        name: v.name,
+        path: v.path,
+        redirect: v.redirect,
+        meta: v.meta,
+        children: []
+      });
+    } else {
+      newRoutesList[0]?.children.push({ ...v });
+    }
+  });
+  return newRoutesList;
+}
+
+/** 处理缓存路由（添加、删除、刷新） */
+function handleAliveRoute({ name }: ToRouteType, mode?: string) {
+  switch (mode) {
+    case "add":
+      usePermissionStoreHook().cacheOperate({
+        mode: "add",
+        name
+      });
+      break;
+    case "delete":
+      usePermissionStoreHook().cacheOperate({
+        mode: "delete",
+        name
+      });
+      break;
+    case "refresh":
+      usePermissionStoreHook().cacheOperate({
+        mode: "refresh",
+        name
+      });
+      break;
+    default:
+      usePermissionStoreHook().cacheOperate({
+        mode: "delete",
+        name
+      });
+      useTimeoutFn(() => {
+        usePermissionStoreHook().cacheOperate({
+          mode: "add",
+          name
+        });
+      }, 100);
+  }
+}
+
+/** 过滤后端传来的动态路由 重新生成规范路由 */
+function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
+  if (!arrRoutes || !arrRoutes.length) return;
+  const modulesRoutesKeys = Object.keys(modulesRoutes);
+  arrRoutes.forEach((v: RouteRecordRaw) => {
+    // 将backstage属性加入meta，标识此路由为后端返回路由
+    v.meta.backstage = true;
+    // 父级的redirect属性取值：如果子级存在且父级的redirect属性不存在，默认取第一个子级的path；如果子级存在且父级的redirect属性存在，取存在的redirect属性，会覆盖默认值
+    if (v?.children && v.children.length && !v.redirect)
+      v.redirect = v.children[0].path;
+    // 父级的name属性取值：如果子级存在且父级的name属性不存在，默认取第一个子级的name；如果子级存在且父级的name属性存在，取存在的name属性，会覆盖默认值（注意：测试中发现父级的name不能和子级name重复，如果重复会造成重定向无效（跳转404），所以这里给父级的name起名的时候后面会自动加上`Parent`，避免重复）
+    if (v?.children && v.children.length && !v.name)
+      v.name = (v.children[0].name as string) + "Parent";
+    if (v.meta?.frameSrc) {
+      v.component = IFrame;
+    } else {
+      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会跟path保持一致）
+      const index = v?.component
+        ? modulesRoutesKeys.findIndex(ev => ev.includes(v.component as any))
+        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
+      v.component = modulesRoutes[modulesRoutesKeys[index]];
+    }
+    if (v?.children && v.children.length) {
+      addAsyncRoutes(v.children);
+    }
+  });
+  return arrRoutes;
+}
+
+/** 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html */
+function getHistoryMode(routerHistory): RouterHistory {
+  // len为1 代表只有历史模式 为2 代表历史模式中存在base参数 https://next.router.vuejs.org/zh/api/#%E5%8F%82%E6%95%B0-1
+  const historyMode = routerHistory.split(",");
+  const leftMode = historyMode[0];
+  const rightMode = historyMode[1];
+  // no param
+  if (historyMode.length === 1) {
+    if (leftMode === "hash") {
+      return createWebHashHistory("");
+    } else if (leftMode === "h5") {
+      return createWebHistory("");
+    }
+  } //has param
+  else if (historyMode.length === 2) {
+    if (leftMode === "hash") {
+      return createWebHashHistory(rightMode);
+    } else if (leftMode === "h5") {
+      return createWebHistory(rightMode);
+    }
+  }
+}
+
+/** 获取当前页面按钮级别的权限 */
+function getAuths(): Array<string> {
+  return router.currentRoute.value.meta.auths as Array<string>;
+}
+
+/** 是否有按钮级别的权限（根据路由`meta`中的`auths`字段进行判断）*/
+function hasAuth(value: string | Array<string>): boolean {
+  if (!value) return false;
+  /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
+  const metaAuths = getAuths();
+  if (!metaAuths) return false;
+  const isAuths = isString(value)
+    ? metaAuths.includes(value)
+    : isIncludeAllChildren(value, metaAuths);
+  return isAuths ? true : false;
+}
+
+function handleTopMenu(route) {
+  if (route?.children && route.children.length > 1) {
+    if (route.redirect) {
+      return route.children.filter(cur => cur.path === route.redirect)[0];
+    } else {
+      return route.children[0];
+    }
+  } else {
+    return route;
+  }
+}
+
+/** 获取所有菜单中的第一个菜单（顶级菜单）*/
+function getTopMenu(tag = false): menuType {
+  const topMenu = handleTopMenu(
+    usePermissionStoreHook().wholeMenus[0]?.children[0]
+  );
+  tag && useMultiTagsStoreHook().handleTags("push", topMenu);
+  return topMenu;
+}
+
+export {
+  hasAuth,
+  getAuths,
+  ascending,
+  filterTree,
+  initRouter,
+  getTopMenu,
+  addPathMatch,
+  isOneOfArray,
+  getHistoryMode,
+  addAsyncRoutes,
+  getParentPaths,
+  findRouteByPath,
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes,
+  filterNoPermissionTree
+};
diff --git a/Yi.Pure.Vue3/src/store/index.ts b/Yi.Pure.Vue3/src/store/index.ts
new file mode 100644
index 00000000..a8dc7527
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import { createPinia } from "pinia";
+const store = createPinia();
+
+export function setupStore(app: App<Element>) {
+  app.use(store);
+}
+
+export { store };
diff --git a/Yi.Pure.Vue3/src/store/modules/app.ts b/Yi.Pure.Vue3/src/store/modules/app.ts
new file mode 100644
index 00000000..ea928304
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/modules/app.ts
@@ -0,0 +1,91 @@
+import { defineStore } from "pinia";
+import {
+  type appType,
+  store,
+  getConfig,
+  storageLocal,
+  deviceDetection,
+  responsiveStorageNameSpace
+} from "../utils";
+
+export const useAppStore = defineStore({
+  id: "pure-app",
+  state: (): appType => ({
+    sidebar: {
+      opened:
+        storageLocal().getItem<StorageConfigs>(
+          `${responsiveStorageNameSpace()}layout`
+        )?.sidebarStatus ?? getConfig().SidebarStatus,
+      withoutAnimation: false,
+      isClickCollapse: false
+    },
+    // 这里的layout用于监听容器拖拉后恢复对应的导航模式
+    layout:
+      storageLocal().getItem<StorageConfigs>(
+        `${responsiveStorageNameSpace()}layout`
+      )?.layout ?? getConfig().Layout,
+    device: deviceDetection() ? "mobile" : "desktop",
+    // 浏览器窗口的可视区域大小
+    viewportSize: {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    },
+    // 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
+    sortSwap: false
+  }),
+  getters: {
+    getSidebarStatus(state) {
+      return state.sidebar.opened;
+    },
+    getDevice(state) {
+      return state.device;
+    },
+    getViewportWidth(state) {
+      return state.viewportSize.width;
+    },
+    getViewportHeight(state) {
+      return state.viewportSize.height;
+    }
+  },
+  actions: {
+    TOGGLE_SIDEBAR(opened?: boolean, resize?: string) {
+      const layout = storageLocal().getItem<StorageConfigs>(
+        `${responsiveStorageNameSpace()}layout`
+      );
+      if (opened && resize) {
+        this.sidebar.withoutAnimation = true;
+        this.sidebar.opened = true;
+        layout.sidebarStatus = true;
+      } else if (!opened && resize) {
+        this.sidebar.withoutAnimation = true;
+        this.sidebar.opened = false;
+        layout.sidebarStatus = false;
+      } else if (!opened && !resize) {
+        this.sidebar.withoutAnimation = false;
+        this.sidebar.opened = !this.sidebar.opened;
+        this.sidebar.isClickCollapse = !this.sidebar.opened;
+        layout.sidebarStatus = this.sidebar.opened;
+      }
+      storageLocal().setItem(`${responsiveStorageNameSpace()}layout`, layout);
+    },
+    async toggleSideBar(opened?: boolean, resize?: string) {
+      await this.TOGGLE_SIDEBAR(opened, resize);
+    },
+    toggleDevice(device: string) {
+      this.device = device;
+    },
+    setLayout(layout) {
+      this.layout = layout;
+    },
+    setViewportSize(size) {
+      this.viewportSize = size;
+    },
+    setSortSwap(val) {
+      this.sortSwap = val;
+    }
+  }
+});
+
+export function useAppStoreHook() {
+  return useAppStore(store);
+}
diff --git a/Yi.Pure.Vue3/src/store/modules/epTheme.ts b/Yi.Pure.Vue3/src/store/modules/epTheme.ts
new file mode 100644
index 00000000..fa73effd
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/modules/epTheme.ts
@@ -0,0 +1,50 @@
+import { defineStore } from "pinia";
+import {
+  store,
+  getConfig,
+  storageLocal,
+  responsiveStorageNameSpace
+} from "../utils";
+
+export const useEpThemeStore = defineStore({
+  id: "pure-epTheme",
+  state: () => ({
+    epThemeColor:
+      storageLocal().getItem<StorageConfigs>(
+        `${responsiveStorageNameSpace()}layout`
+      )?.epThemeColor ?? getConfig().EpThemeColor,
+    epTheme:
+      storageLocal().getItem<StorageConfigs>(
+        `${responsiveStorageNameSpace()}layout`
+      )?.theme ?? getConfig().Theme
+  }),
+  getters: {
+    getEpThemeColor(state) {
+      return state.epThemeColor;
+    },
+    /** 用于mix导航模式下hamburger-svg的fill属性 */
+    fill(state) {
+      if (state.epTheme === "light") {
+        return "#409eff";
+      } else {
+        return "#fff";
+      }
+    }
+  },
+  actions: {
+    setEpThemeColor(newColor: string): void {
+      const layout = storageLocal().getItem<StorageConfigs>(
+        `${responsiveStorageNameSpace()}layout`
+      );
+      this.epTheme = layout?.theme;
+      this.epThemeColor = newColor;
+      if (!layout) return;
+      layout.epThemeColor = newColor;
+      storageLocal().setItem(`${responsiveStorageNameSpace()}layout`, layout);
+    }
+  }
+});
+
+export function useEpThemeStoreHook() {
+  return useEpThemeStore(store);
+}
diff --git a/Yi.Pure.Vue3/src/store/modules/multiTags.ts b/Yi.Pure.Vue3/src/store/modules/multiTags.ts
new file mode 100644
index 00000000..fee22340
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/modules/multiTags.ts
@@ -0,0 +1,146 @@
+import { defineStore } from "pinia";
+import {
+  type multiType,
+  type positionType,
+  store,
+  isUrl,
+  isEqual,
+  isNumber,
+  isBoolean,
+  getConfig,
+  routerArrays,
+  storageLocal,
+  responsiveStorageNameSpace
+} from "../utils";
+import { usePermissionStoreHook } from "./permission";
+
+export const useMultiTagsStore = defineStore({
+  id: "pure-multiTags",
+  state: () => ({
+    // 存储标签页信息（路由信息）
+    multiTags: storageLocal().getItem<StorageConfigs>(
+      `${responsiveStorageNameSpace()}configure`
+    )?.multiTagsCache
+      ? storageLocal().getItem<StorageConfigs>(
+          `${responsiveStorageNameSpace()}tags`
+        )
+      : [
+          ...routerArrays,
+          ...usePermissionStoreHook().flatteningRoutes.filter(
+            v => v?.meta?.fixedTag
+          )
+        ],
+    multiTagsCache: storageLocal().getItem<StorageConfigs>(
+      `${responsiveStorageNameSpace()}configure`
+    )?.multiTagsCache
+  }),
+  getters: {
+    getMultiTagsCache(state) {
+      return state.multiTagsCache;
+    }
+  },
+  actions: {
+    multiTagsCacheChange(multiTagsCache: boolean) {
+      this.multiTagsCache = multiTagsCache;
+      if (multiTagsCache) {
+        storageLocal().setItem(
+          `${responsiveStorageNameSpace()}tags`,
+          this.multiTags
+        );
+      } else {
+        storageLocal().removeItem(`${responsiveStorageNameSpace()}tags`);
+      }
+    },
+    tagsCache(multiTags) {
+      this.getMultiTagsCache &&
+        storageLocal().setItem(
+          `${responsiveStorageNameSpace()}tags`,
+          multiTags
+        );
+    },
+    handleTags<T>(
+      mode: string,
+      value?: T | multiType,
+      position?: positionType
+    ): T {
+      switch (mode) {
+        case "equal":
+          this.multiTags = value;
+          this.tagsCache(this.multiTags);
+          break;
+        case "push":
+          {
+            const tagVal = value as multiType;
+            // 不添加到标签页
+            if (tagVal?.meta?.hiddenTag) return;
+            // 如果是外链无需添加信息到标签页
+            if (isUrl(tagVal?.name)) return;
+            // 如果title为空拒绝添加空信息到标签页
+            if (tagVal?.meta?.title.length === 0) return;
+            // showLink:false 不添加到标签页
+            if (isBoolean(tagVal?.meta?.showLink) && !tagVal?.meta?.showLink)
+              return;
+            const tagPath = tagVal.path;
+            // 判断tag是否已存在
+            const tagHasExits = this.multiTags.some(tag => {
+              return tag.path === tagPath;
+            });
+
+            // 判断tag中的query键值是否相等
+            const tagQueryHasExits = this.multiTags.some(tag => {
+              return isEqual(tag?.query, tagVal?.query);
+            });
+
+            // 判断tag中的params键值是否相等
+            const tagParamsHasExits = this.multiTags.some(tag => {
+              return isEqual(tag?.params, tagVal?.params);
+            });
+
+            if (tagHasExits && tagQueryHasExits && tagParamsHasExits) return;
+
+            // 动态路由可打开的最大数量
+            const dynamicLevel = tagVal?.meta?.dynamicLevel ?? -1;
+            if (dynamicLevel > 0) {
+              if (
+                this.multiTags.filter(e => e?.path === tagPath).length >=
+                dynamicLevel
+              ) {
+                // 如果当前已打开的动态路由数大于dynamicLevel，替换第一个动态路由标签
+                const index = this.multiTags.findIndex(
+                  item => item?.path === tagPath
+                );
+                index !== -1 && this.multiTags.splice(index, 1);
+              }
+            }
+            this.multiTags.push(value);
+            this.tagsCache(this.multiTags);
+            if (
+              getConfig()?.MaxTagsLevel &&
+              isNumber(getConfig().MaxTagsLevel)
+            ) {
+              if (this.multiTags.length > getConfig().MaxTagsLevel) {
+                this.multiTags.splice(1, 1);
+              }
+            }
+          }
+          break;
+        case "splice":
+          if (!position) {
+            const index = this.multiTags.findIndex(v => v.path === value);
+            if (index === -1) return;
+            this.multiTags.splice(index, 1);
+          } else {
+            this.multiTags.splice(position?.startIndex, position?.length);
+          }
+          this.tagsCache(this.multiTags);
+          return this.multiTags;
+        case "slice":
+          return this.multiTags.slice(-1);
+      }
+    }
+  }
+});
+
+export function useMultiTagsStoreHook() {
+  return useMultiTagsStore(store);
+}
diff --git a/Yi.Pure.Vue3/src/store/modules/permission.ts b/Yi.Pure.Vue3/src/store/modules/permission.ts
new file mode 100644
index 00000000..2ddca781
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/modules/permission.ts
@@ -0,0 +1,75 @@
+import { defineStore } from "pinia";
+import {
+  type cacheType,
+  store,
+  debounce,
+  ascending,
+  getKeyList,
+  filterTree,
+  constantMenus,
+  filterNoPermissionTree,
+  formatFlatteningRoutes
+} from "../utils";
+import { useMultiTagsStoreHook } from "./multiTags";
+
+export const usePermissionStore = defineStore({
+  id: "pure-permission",
+  state: () => ({
+    // 静态路由生成的菜单
+    constantMenus,
+    // 整体路由生成的菜单（静态、动态）
+    wholeMenus: [],
+    // 整体路由（一维数组格式）
+    flatteningRoutes: [],
+    // 缓存页面keepAlive
+    cachePageList: []
+  }),
+  actions: {
+    /** 组装整体路由生成的菜单 */
+    handleWholeMenus(routes: any[]) {
+      this.wholeMenus = filterNoPermissionTree(
+        filterTree(ascending(this.constantMenus.concat(routes)))
+      );
+      this.flatteningRoutes = formatFlatteningRoutes(
+        this.constantMenus.concat(routes)
+      );
+    },
+    cacheOperate({ mode, name }: cacheType) {
+      const delIndex = this.cachePageList.findIndex(v => v === name);
+      switch (mode) {
+        case "refresh":
+          this.cachePageList = this.cachePageList.filter(v => v !== name);
+          break;
+        case "add":
+          this.cachePageList.push(name);
+          break;
+        case "delete":
+          delIndex !== -1 && this.cachePageList.splice(delIndex, 1);
+          break;
+      }
+      /** 监听缓存页面是否存在于标签页，不存在则删除 */
+      debounce(() => {
+        let cacheLength = this.cachePageList.length;
+        const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
+        while (cacheLength > 0) {
+          nameList.findIndex(v => v === this.cachePageList[cacheLength - 1]) ===
+            -1 &&
+            this.cachePageList.splice(
+              this.cachePageList.indexOf(this.cachePageList[cacheLength - 1]),
+              1
+            );
+          cacheLength--;
+        }
+      })();
+    },
+    /** 清空缓存页面 */
+    clearAllCachePage() {
+      this.wholeMenus = [];
+      this.cachePageList = [];
+    }
+  }
+});
+
+export function usePermissionStoreHook() {
+  return usePermissionStore(store);
+}
diff --git a/Yi.Pure.Vue3/src/store/modules/settings.ts b/Yi.Pure.Vue3/src/store/modules/settings.ts
new file mode 100644
index 00000000..7f810f7f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/modules/settings.ts
@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { type setType, store, getConfig } from "../utils";
+
+export const useSettingStore = defineStore({
+  id: "pure-setting",
+  state: (): setType => ({
+    title: getConfig().Title,
+    fixedHeader: getConfig().FixedHeader,
+    hiddenSideBar: getConfig().HiddenSideBar
+  }),
+  getters: {
+    getTitle(state) {
+      return state.title;
+    },
+    getFixedHeader(state) {
+      return state.fixedHeader;
+    },
+    getHiddenSideBar(state) {
+      return state.hiddenSideBar;
+    }
+  },
+  actions: {
+    CHANGE_SETTING({ key, value }) {
+      if (Reflect.has(this, key)) {
+        this[key] = value;
+      }
+    },
+    changeSetting(data) {
+      this.CHANGE_SETTING(data);
+    }
+  }
+});
+
+export function useSettingStoreHook() {
+  return useSettingStore(store);
+}
diff --git a/Yi.Pure.Vue3/src/store/modules/user.ts b/Yi.Pure.Vue3/src/store/modules/user.ts
new file mode 100644
index 00000000..fac9f929
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/modules/user.ts
@@ -0,0 +1,122 @@
+import { defineStore } from "pinia";
+import {
+  type userType,
+  store,
+  router,
+  resetRouter,
+  routerArrays,
+  storageLocal
+} from "../utils";
+import {
+  type UserResult,
+  type RefreshTokenResult,
+  getLogin,
+  refreshTokenApi
+} from "@/api/user";
+import { useMultiTagsStoreHook } from "./multiTags";
+import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
+
+export const useUserStore = defineStore({
+  id: "pure-user",
+  state: (): userType => ({
+    // 头像
+    avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",
+    // 用户名
+    username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
+    // 昵称
+    nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
+    // 页面级别权限
+    roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
+    // 按钮级别权限
+    permissions:
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [],
+    // 前端生成的验证码（按实际需求替换）
+    verifyCode: "",
+    // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
+    currentPage: 0,
+    // 是否勾选了登录页的免登录
+    isRemembered: false,
+    // 登录页的免登录存储几天，默认7天
+    loginDay: 7
+  }),
+  actions: {
+    /** 存储头像 */
+    SET_AVATAR(avatar: string) {
+      this.avatar = avatar;
+    },
+    /** 存储用户名 */
+    SET_USERNAME(username: string) {
+      this.username = username;
+    },
+    /** 存储昵称 */
+    SET_NICKNAME(nickname: string) {
+      this.nickname = nickname;
+    },
+    /** 存储角色 */
+    SET_ROLES(roles: Array<string>) {
+      this.roles = roles;
+    },
+    /** 存储按钮级别权限 */
+    SET_PERMS(permissions: Array<string>) {
+      this.permissions = permissions;
+    },
+    /** 存储前端生成的验证码 */
+    SET_VERIFYCODE(verifyCode: string) {
+      this.verifyCode = verifyCode;
+    },
+    /** 存储登录页面显示哪个组件 */
+    SET_CURRENTPAGE(value: number) {
+      this.currentPage = value;
+    },
+    /** 存储是否勾选了登录页的免登录 */
+    SET_ISREMEMBERED(bool: boolean) {
+      this.isRemembered = bool;
+    },
+    /** 设置登录页的免登录存储几天 */
+    SET_LOGINDAY(value: number) {
+      this.loginDay = Number(value);
+    },
+    /** 登入 */
+    async loginByUsername(data) {
+      return new Promise<UserResult>((resolve, reject) => {
+        getLogin(data)
+          .then(data => {
+            if (data?.success) setToken(data.data);
+            resolve(data);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    },
+    /** 前端登出（不调用接口） */
+    logOut() {
+      this.username = "";
+      this.roles = [];
+      this.permissions = [];
+      removeToken();
+      useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
+      resetRouter();
+      router.push("/login");
+    },
+    /** 刷新`token` */
+    async handRefreshToken(data) {
+      return new Promise<RefreshTokenResult>((resolve, reject) => {
+        refreshTokenApi(data)
+          .then(data => {
+            if (data) {
+              setToken(data.data);
+              resolve(data);
+            }
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    }
+  }
+});
+
+export function useUserStoreHook() {
+  return useUserStore(store);
+}
diff --git a/Yi.Pure.Vue3/src/store/types.ts b/Yi.Pure.Vue3/src/store/types.ts
new file mode 100644
index 00000000..d6503d9c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/types.ts
@@ -0,0 +1,50 @@
+import type { RouteRecordName } from "vue-router";
+
+export type cacheType = {
+  mode: string;
+  name?: RouteRecordName;
+};
+
+export type positionType = {
+  startIndex?: number;
+  length?: number;
+};
+
+export type appType = {
+  sidebar: {
+    opened: boolean;
+    withoutAnimation: boolean;
+    // 判断是否手动点击Collapse
+    isClickCollapse: boolean;
+  };
+  layout: string;
+  device: string;
+  viewportSize: { width: number; height: number };
+  sortSwap: boolean;
+};
+
+export type multiType = {
+  path: string;
+  name: string;
+  meta: any;
+  query?: object;
+  params?: object;
+};
+
+export type setType = {
+  title: string;
+  fixedHeader: boolean;
+  hiddenSideBar: boolean;
+};
+
+export type userType = {
+  avatar?: string;
+  username?: string;
+  nickname?: string;
+  roles?: Array<string>;
+  permissions?: Array<string>;
+  verifyCode?: string;
+  currentPage?: number;
+  isRemembered?: boolean;
+  loginDay?: number;
+};
diff --git a/Yi.Pure.Vue3/src/store/utils.ts b/Yi.Pure.Vue3/src/store/utils.ts
new file mode 100644
index 00000000..5dd8c75f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/store/utils.ts
@@ -0,0 +1,28 @@
+export { store } from "@/store";
+export { routerArrays } from "@/layout/types";
+export { router, resetRouter, constantMenus } from "@/router";
+export { getConfig, responsiveStorageNameSpace } from "@/config";
+export {
+  ascending,
+  filterTree,
+  filterNoPermissionTree,
+  formatFlatteningRoutes
+} from "@/router/utils";
+export {
+  isUrl,
+  isEqual,
+  isNumber,
+  debounce,
+  isBoolean,
+  getKeyList,
+  storageLocal,
+  deviceDetection
+} from "@pureadmin/utils";
+export type {
+  setType,
+  appType,
+  userType,
+  multiType,
+  cacheType,
+  positionType
+} from "./types";
diff --git a/Yi.Pure.Vue3/src/style/dark.scss b/Yi.Pure.Vue3/src/style/dark.scss
new file mode 100644
index 00000000..74fe0747
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/dark.scss
@@ -0,0 +1,277 @@
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+
+/* 整体暗色风格适配 */
+html.dark {
+  $border-style: #303030;
+  $color-white: #fff;
+
+  /* 自定义深色背景颜色 */
+  // --el-bg-color: #020409;
+
+  /* 常用border-color 需要时可取用 */
+  --pure-border-color: rgb(253 253 253 / 12%);
+
+  /* switch关闭状态下的color 需要时可取用 */
+  --pure-switch-off-color: #ffffff3f;
+
+  /* vxe-table */
+  --vxe-form-background-color: #151515;
+  --vxe-toolbar-background-color: #151515;
+  --vxe-pager-background-color: #151515;
+  --vxe-button-default-background-color: color.adjust(#151515, $lightness: 15%);
+  --vxe-table-header-background-color: color.adjust(#151515, $lightness: 5%);
+  --vxe-font-color: color.adjust(#c9d1d9, $lightness: -12%);
+  --vxe-table-header-font-color: #c9d1d9;
+  --vxe-table-footer-font-color: #c9d1d9;
+  --vxe-table-body-background-color: #151515;
+  --vxe-table-footer-background-color: #151515;
+  --vxe-table-row-striped-background-color: #1e1e1e;
+  --vxe-table-border-color: #303030;
+  --vxe-table-row-hover-background-color: #1e1e1e;
+  --vxe-table-row-hover-striped-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: -10%
+  );
+  --vxe-table-row-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-hover-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-hover-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-checkbox-checked-background-color: fade(#1e1e1e, 15%);
+  --vxe-table-row-hover-checkbox-checked-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-menu-background-color: color.adjust(#303133, $lightness: 10%);
+  --vxe-table-filter-panel-background-color: color.adjust(
+    #151515,
+    $lightness: 5%
+  );
+  --vxe-grid-maximize-background-color: #151515;
+  --vxe-pager-perfect-background-color: #151515;
+  --vxe-pager-perfect-button-background-color: color.adjust(
+    #151515,
+    $lightness: 15%
+  );
+  --vxe-input-background-color: #151515;
+  --vxe-input-border-color: #303030;
+  --vxe-select-panel-background-color: #151515;
+  --vxe-table-popup-border-color: #303030;
+  --vxe-select-option-hover-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+  --vxe-pulldown-panel-background-color: #151515;
+  --vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px #43464c;
+  --vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px #43464c;
+  --vxe-loading-background-color: rgb(0 0 0 / 50%);
+  --vxe-tooltip-dark-background-color: color.adjust(#303133, $lightness: 25%);
+  --vxe-modal-header-background-color: #1e1e1e;
+  --vxe-modal-body-background-color: #303133;
+  --vxe-modal-border-color: #303030;
+  --vxe-toolbar-panel-background-color: #151515;
+  --vxe-input-disabled-color: color.adjust(#1e1e1e, $lightness: 20%);
+  --vxe-input-disabled-background-color: color.adjust(#1e1e1e, $lightness: 25%);
+  --vxe-checkbox-icon-background-color: color.adjust(#1e1e1e, $lightness: 15%);
+  --vxe-checkbox-checked-icon-border-color: #303030;
+  --vxe-checkbox-indeterminate-icon-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+
+  .navbar,
+  .tags-view,
+  .contextmenu,
+  .sidebar-container,
+  .horizontal-header,
+  .sidebar-logo-container,
+  .horizontal-header .el-sub-menu__title,
+  .horizontal-header .submenu-title-noDropdown {
+    background: var(--el-bg-color) !important;
+  }
+
+  .app-main,
+  .app-main-nofixed-header {
+    background: #020409 !important;
+  }
+
+  .logic-flow-view,
+  .wangeditor {
+    filter: invert(0.9) hue-rotate(180deg);
+  }
+
+  /* 标签页 */
+  .tags-view {
+    .arrow-left,
+    .arrow-right {
+      border-right: 1px solid $border-style;
+      box-shadow: none;
+    }
+
+    .arrow-right {
+      border-left: 1px solid $border-style;
+    }
+
+    .scroll-item {
+      .el-icon-close {
+        &:hover {
+          color: rgb(255 255 255 / 85%) !important;
+          background-color: rgb(255 255 255 / 12%);
+        }
+      }
+
+      .chrome-tab {
+        .tag-title {
+          color: #666;
+        }
+
+        &:hover {
+          .chrome-tab__bg {
+            color: #333;
+          }
+
+          .tag-title {
+            color: #adadad;
+          }
+        }
+      }
+    }
+  }
+
+  /* 系统配置面板 */
+  .right-panel-items {
+    .el-divider__text {
+      --el-bg-color: var(--el-bg-color);
+    }
+
+    .el-divider--horizontal {
+      border-top: none;
+    }
+  }
+
+  /* 表单设计器 */
+  .design-form {
+    .el-main.config-content,
+    .el-header,
+    .el-main.widget-empty,
+    .widget-form-list,
+    .el-aside,
+    .widget-view {
+      background: var(--el-bg-color) !important;
+    }
+
+    .form-edit-widget-label a {
+      color: $color-white;
+      background: var(--el-color-primary);
+      border: none;
+      border-radius: 5px;
+    }
+
+    .el-aside {
+      color: $color-white;
+    }
+  }
+
+  /* intro.js */
+  .introjs-tooltip-title,
+  .introjs-tooltiptext {
+    color: var(--el-color-primary);
+  }
+
+  .el-card {
+    --el-card-bg-color: var(--el-bg-color);
+  }
+
+  .el-backtop {
+    --el-backtop-bg-color: rgb(72 72 78);
+    --el-backtop-hover-bg-color: var(--el-color-primary);
+
+    transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+  }
+
+  .el-dropdown-menu__item:not(.is-disabled):hover {
+    background: transparent;
+  }
+
+  /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+  .el-icon {
+    &.el-dialog__close,
+    &.el-drawer__close,
+    &.el-message-box__close,
+    &.el-notification__closeBtn {
+      &:hover {
+        color: rgb(255 255 255 / 85%) !important;
+        background-color: rgb(255 255 255 / 12%);
+
+        .pure-dialog-svg {
+          color: rgb(255 255 255 / 85%) !important;
+        }
+      }
+    }
+  }
+
+  /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，整体浅色风格在 src/style/element-plus.scss 文件进行了适配 */
+  .pure-message {
+    background-color: rgb(36 37 37) !important;
+    background-image: initial !important;
+    box-shadow:
+      rgb(13 13 13 / 12%) 0 3px 6px -4px,
+      rgb(13 13 13 / 8%) 0 6px 16px 0,
+      rgb(13 13 13 / 5%) 0 9px 28px 8px !important;
+
+    & .el-message__content {
+      color: $color-white !important;
+      pointer-events: all !important;
+      background-image: initial !important;
+    }
+
+    & .el-message__closeBtn {
+      &:hover {
+        color: rgb(255 255 255 / 85%);
+        background-color: rgb(255 255 255 / 12%);
+      }
+    }
+  }
+
+  /* 自定义菜单搜索样式 */
+  .pure-search-dialog {
+    .el-dialog__footer {
+      box-shadow:
+        0 -1px 0 0 #555a64,
+        0 -3px 6px 0 rgb(69 98 155 / 12%);
+    }
+
+    .search-footer {
+      .search-footer-item {
+        color: rgb(235 235 235 / 60%);
+
+        .icon {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  /* ReSegmented 组件 */
+  .pure-segmented {
+    color: rgb(255 255 255 / 65%);
+    background-color: #000;
+
+    .pure-segmented-item-selected {
+      background-color: #1f1f1f;
+    }
+
+    .pure-segmented-item-disabled {
+      color: rgb(255 255 255 / 25%);
+    }
+  }
+
+  /* 仿 el-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
+  .pure-scrollbar {
+    scrollbar-color: rgb(63 64 66) transparent;
+
+    ::-webkit-scrollbar-thumb {
+      background-color: rgb(63 64 66);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgb(92 93 96);
+    }
+  }
+}
diff --git a/Yi.Pure.Vue3/src/style/element-plus.scss b/Yi.Pure.Vue3/src/style/element-plus.scss
new file mode 100644
index 00000000..165008f6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/element-plus.scss
@@ -0,0 +1,188 @@
+.el-form-item__label {
+  font-weight: 700;
+}
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-dropdown-menu {
+  padding: 0 !important;
+}
+
+.is-dark {
+  z-index: 9999 !important;
+}
+
+/* 重置 el-button 中 icon 的 margin */
+.reset-margin [class*="el-icon"] + span {
+  margin-left: 2px !important;
+}
+
+/* 自定义 popover 的类名 */
+.pure-popper {
+  padding: 0 !important;
+}
+
+/* nprogress 适配 element-plus 的主题色 */
+#nprogress {
+  & .bar {
+    background-color: var(--el-color-primary) !important;
+  }
+
+  & .peg {
+    box-shadow:
+      0 0 10px var(--el-color-primary),
+      0 0 5px var(--el-color-primary) !important;
+  }
+
+  & .spinner-icon {
+    border-top-color: var(--el-color-primary);
+    border-left-color: var(--el-color-primary);
+  }
+}
+
+.pure-dialog {
+  .el-dialog__header.show-close {
+    padding-right: 16px;
+  }
+
+  .el-dialog__headerbtn {
+    top: 16px;
+    right: 12px;
+    width: 24px;
+    height: 24px;
+  }
+
+  .pure-dialog-svg {
+    color: var(--el-color-info);
+  }
+
+  .el-dialog__footer {
+    padding-top: 0;
+  }
+}
+
+/* 全局覆盖element-plus的el-tour、el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
+.el-dialog__headerbtn,
+.el-message-box__headerbtn {
+  &:hover {
+    .el-dialog__close {
+      color: var(--el-color-info) !important;
+    }
+  }
+}
+
+.el-icon {
+  &.el-tour__close,
+  &.el-dialog__close,
+  &.el-drawer__close,
+  &.el-message-box__close,
+  &.el-notification__closeBtn,
+  .el-upload-list__item.is-ready &.el-icon--close {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    outline: none;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+
+    &:hover {
+      color: rgb(0 0 0 / 88%) !important;
+      text-decoration: none;
+      background-color: rgb(0 0 0 / 6%);
+
+      .pure-dialog-svg {
+        color: rgb(0 0 0 / 88%) !important;
+      }
+    }
+  }
+}
+
+/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，整体暗色风格在 src/style/dark.scss 文件进行了适配 */
+.pure-message {
+  background: #fff !important;
+  border-width: 0 !important;
+  box-shadow:
+    0 3px 6px -4px #0000001f,
+    0 6px 16px #00000014,
+    0 9px 28px 8px #0000000d !important;
+
+  & .el-message__content {
+    color: #000000d9 !important;
+    pointer-events: all !important;
+    background-image: initial !important;
+  }
+
+  & .el-message__closeBtn {
+    border-radius: 4px;
+    outline: none;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+
+    &:hover {
+      background-color: rgb(0 0 0 / 6%);
+    }
+  }
+}
+
+/* 自定义菜单搜索样式 */
+.pure-search-dialog {
+  @media screen and (width > 760px) and (width <= 940px) {
+    .el-input__inner {
+      font-size: 12px;
+    }
+  }
+
+  @media screen and (width <= 470px) {
+    .el-input__inner {
+      font-size: 12px;
+    }
+  }
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-input__inner {
+    font-size: 1.2em;
+  }
+
+  .el-dialog__footer {
+    width: calc(100% + 32px);
+    padding: 10px 20px;
+    margin: auto -16px -16px;
+    box-shadow:
+      0 -1px 0 0 #e0e3e8,
+      0 -3px 6px 0 rgb(69 98 155 / 12%);
+  }
+}
+
+/* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
+.pure-scrollbar {
+  /* Firefox */
+  scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
+  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
+  ::-webkit-scrollbar {
+    width: 6px; /* 滚动条宽度 */
+  }
+
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background: transparent; /* 轨道颜色 */
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(221 222 224);
+    border-radius: 4px;
+  }
+
+  /* 滚动条滑块：hover状态 */
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgb(199 201 203); /* 滑块hover颜色 */
+  }
+}
diff --git a/Yi.Pure.Vue3/src/style/index.scss b/Yi.Pure.Vue3/src/style/index.scss
new file mode 100644
index 00000000..d267d389
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/index.scss
@@ -0,0 +1,26 @@
+@import "./transition";
+@import "./element-plus";
+@import "./sidebar";
+@import "./dark";
+
+/* 自定义全局 CssVar */
+:root {
+  /* 左侧菜单展开、收起动画时长 */
+  --pure-transition-duration: 0.3s;
+
+  /* 常用border-color 需要时可取用 */
+  --pure-border-color: rgb(5 5 5 / 6%);
+
+  /* switch关闭状态下的color 需要时可取用 */
+  --pure-switch-off-color: #a6a6a6;
+}
+
+/* 灰色模式 */
+.html-grey {
+  filter: grayscale(100%);
+}
+
+/* 色弱模式 */
+.html-weakness {
+  filter: invert(80%);
+}
diff --git a/Yi.Pure.Vue3/src/style/login.css b/Yi.Pure.Vue3/src/style/login.css
new file mode 100644
index 00000000..3e0a8abb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/login.css
@@ -0,0 +1,96 @@
+.wave {
+  position: fixed;
+  height: 100%;
+  width: 80%;
+  left: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.login-container {
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 18rem;
+  padding: 0 2rem;
+}
+
+.img {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.img img {
+  width: 500px;
+}
+
+.login-box {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  overflow: hidden;
+}
+
+.login-form {
+  width: 360px;
+}
+
+.avatar {
+  width: 350px;
+  height: 80px;
+}
+
+.login-form h2 {
+  text-transform: uppercase;
+  margin: 15px 0;
+  color: #999;
+  font:
+    bold 200% Consolas,
+    Monaco,
+    monospace;
+}
+
+@media screen and (max-width: 1180px) {
+  .login-container {
+    grid-gap: 9rem;
+  }
+
+  .login-form {
+    width: 290px;
+  }
+
+  .login-form h2 {
+    font-size: 2.4rem;
+    margin: 8px 0;
+  }
+
+  .img img {
+    width: 360px;
+  }
+
+  .avatar {
+    width: 280px;
+    height: 80px;
+  }
+}
+
+@media screen and (max-width: 968px) {
+  .wave {
+    display: none;
+  }
+
+  .img {
+    display: none;
+  }
+
+  .login-container {
+    grid-template-columns: 1fr;
+  }
+
+  .login-box {
+    justify-content: center;
+  }
+}
diff --git a/Yi.Pure.Vue3/src/style/reset.scss b/Yi.Pure.Vue3/src/style/reset.scss
new file mode 100644
index 00000000..d79cdd9a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/reset.scss
@@ -0,0 +1,257 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  line-height: 1.5;
+  tab-size: 4;
+  text-size-adjust: 100%;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  line-height: inherit;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  text-indent: 0;
+  border-collapse: collapse;
+  border-color: inherit;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: inherit;
+  color: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: #9ca3af;
+  opacity: 1;
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+label {
+  font-weight: 700;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &::after {
+    display: block;
+    height: 0;
+    clear: both;
+    font-size: 0;
+    visibility: hidden;
+    content: " ";
+  }
+}
diff --git a/Yi.Pure.Vue3/src/style/sidebar.scss b/Yi.Pure.Vue3/src/style/sidebar.scss
new file mode 100644
index 00000000..34d05b0e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/sidebar.scss
@@ -0,0 +1,729 @@
+/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
+@mixin merge-style($sideBarWidth) {
+  $menuActiveText: #7a80b4;
+
+  @media screen and (width >= 150px) and (width <= 420px) {
+    .app-main-nofixed-header {
+      overflow-y: hidden;
+    }
+  }
+
+  @media screen and (width >= 420px) {
+    .app-main-nofixed-header {
+      overflow: hidden;
+    }
+  }
+
+  /* 修复 windows 下双滚动条问题 https://github.com/pure-admin/vue-pure-admin/pull/936#issuecomment-1968125992 */
+  .el-popper.pure-scrollbar {
+    overflow: hidden;
+  }
+
+  /* popper menu 超出内容区可滚动 */
+  .pure-scrollbar {
+    max-height: calc(100vh - calc(50px * 2.5));
+    overflow: hidden auto;
+  }
+
+  .sub-menu-icon {
+    margin-right: 5px;
+    font-size: 18px;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .set-icon,
+  .fullscreen-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 48px;
+    cursor: pointer;
+  }
+
+  .main-container {
+    position: relative;
+    height: 100vh;
+    min-height: 100%;
+    margin-left: $sideBarWidth;
+    background: #f0f2f5;
+
+    /* main-content 属性动画 */
+    transition: margin-left var(--pure-transition-duration);
+
+    .el-scrollbar__wrap {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 998;
+    width: calc(100% - #{$sideBarWidth});
+
+    /* fixed-header 属性左上角动画 */
+    transition: width var(--pure-transition-duration);
+  }
+
+  .main-hidden {
+    margin-left: 0 !important;
+
+    .fixed-header {
+      width: 100% !important;
+
+      + .app-main {
+        padding-top: 37px !important;
+      }
+    }
+  }
+
+  .sidebar-container {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    width: $sideBarWidth !important;
+    height: 100%;
+    overflow: visible;
+    font-size: 0;
+    background: $menuBg;
+    border-right: 1px solid var(--pure-border-color);
+
+    /* 展开动画 */
+    transition: width var(--pure-transition-duration);
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0;
+    }
+
+    &.has-logo {
+      .el-scrollbar.pc {
+        /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
+        height: calc(100% - 92px);
+      }
+
+      /* logo: 48px */
+      .el-scrollbar.mobile {
+        height: calc(100% - 48px);
+      }
+    }
+
+    &.no-logo {
+      .el-scrollbar.pc {
+        /* leftCollapse: 40px、leftCollapse-shadow: 4px */
+        height: calc(100% - 44px);
+      }
+
+      .el-scrollbar.mobile {
+        height: 100%;
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .el-menu {
+      height: 100%;
+      background-color: transparent !important;
+      border: none;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      height: 50px;
+      color: $menuText;
+      background-color: transparent !important;
+
+      &:hover {
+        color: $menuTitleHover !important;
+      }
+
+      div,
+      span {
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+
+    .submenu-title-noDropdown,
+    .el-sub-menu__title {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: $subMenuActiveText !important;
+
+      i {
+        color: $subMenuActiveText !important;
+      }
+    }
+
+    .is-active {
+      color: $subMenuActiveText !important;
+      transition: color 0.3s;
+    }
+
+    .el-menu-item.is-active.nest-menu > * {
+      z-index: 1;
+      color: #fff;
+    }
+
+    .el-menu-item.is-active.nest-menu::before {
+      position: absolute;
+      inset: 0 8px;
+      margin: 4px 0;
+      clear: both;
+      content: "";
+      background: var(--el-color-primary) !important;
+      border-radius: 3px;
+    }
+
+    .el-menu .el-menu--inline .el-sub-menu__title,
+    & .el-sub-menu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      font-size: 14px;
+      background-color: $subMenuBg !important;
+    }
+
+    /* 有子集的激活菜单左侧小竖条 */
+    .el-menu--collapse
+      .is-active.outer-most.el-sub-menu
+      > .el-sub-menu__title::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      clear: both;
+      content: "";
+      background-color: $menuActiveBefore;
+      transition: all var(--pure-transition-duration) ease-in-out;
+      transform: translateY(0);
+    }
+
+    .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
+      position: absolute;
+      top: 50%;
+      display: block;
+      width: 3px;
+      height: 0;
+      content: "";
+      transform: translateY(-50%);
+    }
+
+    /* 无子集的激活菜单背景 */
+    .is-active.submenu-title-noDropdown.outer-most > * {
+      z-index: 1;
+      color: #fff;
+    }
+
+    .is-active.submenu-title-noDropdown.outer-most::before {
+      position: absolute;
+      inset: 0 8px;
+      margin: 4px 0;
+      clear: both;
+      content: "";
+      background: var(--el-color-primary) !important;
+      border-radius: 3px;
+    }
+  }
+
+  /* vertical 菜单折叠 */
+  .el-menu--vertical {
+    .el-menu--popup {
+      background-color: $subMenuBg !important;
+
+      .el-menu-item {
+        span {
+          font-size: 14px;
+        }
+      }
+    }
+
+    & > .el-menu {
+      i,
+      svg {
+        margin-right: 5px;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: $subMenuActiveText !important;
+
+      i {
+        color: $subMenuActiveText !important;
+      }
+    }
+
+    /* 子菜单中还有子菜单 */
+    .el-menu .el-sub-menu__title {
+      min-width: $sideBarWidth !important;
+      font-size: 14px;
+      background-color: $subMenuBg !important;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      height: 50px;
+      line-height: 50px;
+      color: $menuText;
+      background-color: $subMenuBg;
+
+      &:hover {
+        color: $menuTitleHover !important;
+      }
+    }
+
+    .is-active {
+      color: $subMenuActiveText !important;
+      transition: color 0.3s;
+    }
+
+    .el-menu-item.is-active.nest-menu > * {
+      z-index: 1;
+      color: #fff;
+    }
+
+    .el-menu-item.is-active.nest-menu::before {
+      position: absolute;
+      inset: 0 8px;
+      clear: both;
+      content: "";
+      background: var(--el-color-primary) !important;
+      border-radius: 3px;
+    }
+
+    .el-menu-item,
+    .el-sub-menu {
+      .iconfont {
+        font-size: 18px;
+      }
+
+      .el-menu-tooltip__trigger {
+        width: 54px;
+        padding: 0;
+      }
+    }
+  }
+
+  /* horizontal 菜单 */
+  .el-menu--horizontal {
+    & > .el-sub-menu .el-sub-menu__icon-arrow {
+      position: static !important;
+      margin-top: 0;
+    }
+
+    /* 无子菜单时激活 border-bottom */
+    a > .is-active.submenu-title-noDropdown {
+      border-bottom: 2px solid var(--el-menu-active-color);
+    }
+
+    .el-menu--popup {
+      background-color: $subMenuBg !important;
+
+      a > .is-active.submenu-title-noDropdown {
+        border-bottom: none;
+      }
+
+      .el-menu-item {
+        color: $menuText;
+        background-color: $subMenuBg;
+
+        span {
+          font-size: 14px;
+        }
+      }
+
+      .el-sub-menu__title {
+        color: $menuText;
+      }
+    }
+
+    /* 子菜单中还有子菜单 */
+    .el-menu .el-sub-menu__title {
+      min-width: $sideBarWidth !important;
+      font-size: 14px;
+      background-color: $subMenuBg !important;
+
+      &:hover {
+        color: $menuTitleHover !important;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: $subMenuActiveText !important;
+
+      i {
+        color: $subMenuActiveText !important;
+      }
+    }
+
+    .nest-menu .el-sub-menu > .el-sub-menu__title,
+    .el-menu-item {
+      &:hover {
+        color: $menuTitleHover !important;
+      }
+    }
+
+    .el-menu-item.is-active {
+      color: $subMenuActiveText !important;
+      transition: color 0.3s;
+    }
+
+    .el-menu-item.is-active.nest-menu > * {
+      z-index: 1;
+      color: #fff;
+    }
+
+    .el-menu-item.is-active.nest-menu::before {
+      position: absolute;
+      inset: 0 5px;
+      clear: both;
+      content: "";
+      background: var(--el-color-primary) !important;
+      border-radius: 3px;
+    }
+  }
+
+  .horizontal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 48px;
+    background: $menuBg;
+
+    .horizontal-header-left {
+      display: flex;
+      align-items: center;
+      width: auto;
+      min-width: 200px;
+      height: 100%;
+      padding-left: 10px;
+      cursor: pointer;
+      transition: all var(--pure-transition-duration) ease;
+
+      img {
+        display: inline-block;
+        height: 32px;
+      }
+
+      span {
+        display: inline-block;
+        height: 32px;
+        margin: 2px 0 0 12px;
+        overflow: hidden;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 32px;
+        color: $subMenuActiveText;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .horizontal-header-menu {
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+    }
+
+    .horizontal-header-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      min-width: 340px;
+      color: $subMenuActiveText;
+
+      /* 搜索 */
+      .search-container,
+      /* 国际化 */
+      .globalization,
+      /* 全屏 */
+      .fullscreen-icon,
+      /* 消息通知 */
+      .dropdown-badge,
+      /* 用户名 */
+      .el-dropdown-link,
+      /* 设置 */
+      .set-icon {
+        &:hover {
+          background: $menuHover;
+        }
+      }
+
+      .dropdown-badge {
+        height: 48px;
+        color: $subMenuActiveText;
+      }
+
+      .globalization {
+        width: 40px;
+        height: 48px;
+        padding: 11px;
+        color: $subMenuActiveText;
+        cursor: pointer;
+        outline: none;
+      }
+
+      .el-dropdown-link {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        height: 48px;
+        padding: 10px;
+        color: $subMenuActiveText;
+        cursor: pointer;
+
+        p {
+          font-size: 14px;
+        }
+
+        img {
+          width: 22px;
+          height: 22px;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .el-menu {
+      width: 100% !important;
+      height: 100%;
+      background-color: transparent;
+      border: none;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      padding-right: var(--el-menu-base-level-padding);
+      color: $menuText;
+
+      &:hover {
+        color: $menuTitleHover !important;
+      }
+    }
+
+    .submenu-title-noDropdown,
+    .el-sub-menu__title {
+      height: 48px;
+      line-height: 48px;
+      background: $menuBg;
+
+      svg {
+        position: static !important;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: $subMenuActiveText !important;
+
+      i {
+        color: $subMenuActiveText !important;
+      }
+    }
+
+    .is-active {
+      color: $subMenuActiveText !important;
+      transition: color 0.3s;
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-sub-menu {
+    min-width: $sideBarWidth !important;
+  }
+
+  /* 手机端 */
+  .mobile {
+    .fixed-header {
+      width: 100% !important;
+      transition: width var(--pure-transition-duration);
+    }
+
+    .main-container {
+      margin-left: 0 !important;
+    }
+
+    .sidebar-container {
+      z-index: 2001;
+      width: $sideBarWidth;
+      transition: transform var(--pure-transition-duration);
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+      }
+    }
+  }
+}
+
+body[layout="vertical"] {
+  $sideBarWidth: 210px;
+
+  @include merge-style($sideBarWidth);
+
+  .el-menu--collapse {
+    width: 54px;
+  }
+
+  .sidebar-logo-container {
+    background: $sidebarLogo;
+  }
+
+  .hideSidebar {
+    .fixed-header {
+      width: calc(100% - 54px);
+      transition: width var(--pure-transition-duration);
+    }
+
+    .sidebar-container {
+      width: 54px !important;
+      transition: width var(--pure-transition-duration);
+
+      .is-active.submenu-title-noDropdown.outer-most {
+        background: transparent !important;
+      }
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    /* 菜单折叠 */
+    .el-menu--collapse {
+      .el-sub-menu {
+        & > .el-sub-menu__title {
+          & > span {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            visibility: visible;
+          }
+        }
+      }
+
+      .submenu-title-noDropdown {
+        background: transparent !important;
+      }
+
+      .el-sub-menu__title {
+        padding: 0;
+      }
+    }
+
+    .sub-menu-icon {
+      margin-right: 0;
+    }
+  }
+
+  /* 搜索 */
+  .search-container,
+  /* 国际化 */
+  .globalization,
+  /* 全屏 */
+  .fullscreen-icon,
+  /* 消息通知 */
+  .dropdown-badge,
+  /* 用户名 */
+  .el-dropdown-link,
+  /* 设置 */
+  .set-icon {
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+}
+
+body[layout="horizontal"] {
+  $sideBarWidth: 0;
+
+  @include merge-style($sideBarWidth);
+
+  .fixed-header,
+  .main-container {
+    transition: none !important;
+  }
+
+  .fixed-header {
+    width: 100%;
+  }
+}
+
+body[layout="mix"] {
+  $sideBarWidth: 210px;
+
+  @include merge-style($sideBarWidth);
+
+  .el-menu--collapse {
+    width: 54px;
+  }
+
+  .el-menu {
+    --el-menu-hover-bg-color: transparent !important;
+  }
+
+  .hideSidebar {
+    .fixed-header {
+      width: calc(100% - 54px);
+      transition: width var(--pure-transition-duration);
+    }
+
+    .sidebar-container {
+      width: 54px !important;
+      transition: width var(--pure-transition-duration);
+
+      .is-active.submenu-title-noDropdown.outer-most {
+        background: transparent !important;
+      }
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    /* 菜单折叠 */
+    .el-menu--collapse {
+      .el-sub-menu {
+        & > .el-sub-menu__title {
+          padding: 0;
+
+          & > span {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            visibility: visible;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/Yi.Pure.Vue3/src/style/tailwind.css b/Yi.Pure.Vue3/src/style/tailwind.css
new file mode 100644
index 00000000..3e48b687
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/tailwind.css
@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .flex-c {
+    @apply flex justify-center items-center;
+  }
+
+  .flex-ac {
+    @apply flex justify-around items-center;
+  }
+
+  .flex-bc {
+    @apply flex justify-between items-center;
+  }
+
+  .navbar-bg-hover {
+    @apply dark:text-white dark:hover:!bg-[#242424];
+  }
+}
diff --git a/Yi.Pure.Vue3/src/style/transition.scss b/Yi.Pure.Vue3/src/style/transition.scss
new file mode 100644
index 00000000..c7274ddc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/style/transition.scss
@@ -0,0 +1,54 @@
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active {
+  transition: all 0.4s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+  transition: all 0.3s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+/**
+ * @description 重置el-menu的展开收起动画时长
+ */
+.outer-most .el-collapse-transition-leave-active,
+.outer-most .el-collapse-transition-enter-active {
+  transition: 0.2s all ease-in-out !important;
+}
+
+.horizontal-collapse-transition {
+  transition: var(--pure-transition-duration) all !important;
+}
diff --git a/Yi.Pure.Vue3/src/utils/README.md b/Yi.Pure.Vue3/src/utils/README.md
new file mode 100644
index 00000000..6dfa9cb6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/README.md
@@ -0,0 +1,5 @@
+### 注意
+
+- `vue-pure-admin` 从 `3.3.0` 版本之后（不包括 `3.3.0` 版本），大部分工具和 `hooks` 都集成到了 [@pureadmin/utils](https://pure-admin-utils.netlify.app/)
+- [npm](https://www.npmjs.com/package/@pureadmin/utils)
+- [文档代码地址](https://github.com/pure-admin/pure-admin-utils-docs)
diff --git a/Yi.Pure.Vue3/src/utils/auth.ts b/Yi.Pure.Vue3/src/utils/auth.ts
new file mode 100644
index 00000000..f2b28cb8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/auth.ts
@@ -0,0 +1,141 @@
+import Cookies from "js-cookie";
+import { useUserStoreHook } from "@/store/modules/user";
+import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";
+
+export interface DataInfo<T> {
+  /** token */
+  accessToken: string;
+  /** `accessToken`的过期时间（时间戳） */
+  expires: T;
+  /** 用于调用刷新accessToken的接口时所需的token */
+  refreshToken: string;
+  /** 头像 */
+  avatar?: string;
+  /** 用户名 */
+  username?: string;
+  /** 昵称 */
+  nickname?: string;
+  /** 当前登录用户的角色 */
+  roles?: Array<string>;
+  /** 当前登录用户的按钮级别权限 */
+  permissions?: Array<string>;
+}
+
+export const userKey = "user-info";
+export const TokenKey = "authorized-token";
+/**
+ * 通过`multiple-tabs`是否在`cookie`中，判断用户是否已经登录系统，
+ * 从而支持多标签页打开已经登录的系统后无需再登录。
+ * 浏览器完全关闭后`multiple-tabs`将自动从`cookie`中销毁，
+ * 再次打开浏览器需要重新登录系统
+ * */
+export const multipleTabsKey = "multiple-tabs";
+
+/** 获取`token` */
+export function getToken(): DataInfo<number> {
+  // 此处与`TokenKey`相同，此写法解决初始化时`Cookies`中不存在`TokenKey`报错
+  return Cookies.get(TokenKey)
+    ? JSON.parse(Cookies.get(TokenKey))
+    : storageLocal().getItem(userKey);
+}
+
+/**
+ * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
+ * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
+ * 将`accessToken`、`expires`、`refreshToken`这三条信息放在key值为authorized-token的cookie里（过期自动销毁）
+ * 将`avatar`、`username`、`nickname`、`roles`、`permissions`、`refreshToken`、`expires`这七条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
+ */
+export function setToken(data: DataInfo<Date>) {
+  let expires = 0;
+  const { accessToken, refreshToken } = data;
+  const { isRemembered, loginDay } = useUserStoreHook();
+  expires = new Date(data.expires).getTime(); // 如果后端直接设置时间戳，将此处代码改为expires = data.expires，然后把上面的DataInfo<Date>改成DataInfo<number>即可
+  const cookieString = JSON.stringify({ accessToken, expires, refreshToken });
+
+  expires > 0
+    ? Cookies.set(TokenKey, cookieString, {
+        expires: (expires - Date.now()) / 86400000
+      })
+    : Cookies.set(TokenKey, cookieString);
+
+  Cookies.set(
+    multipleTabsKey,
+    "true",
+    isRemembered
+      ? {
+          expires: loginDay
+        }
+      : {}
+  );
+
+  function setUserKey({ avatar, username, nickname, roles, permissions }) {
+    useUserStoreHook().SET_AVATAR(avatar);
+    useUserStoreHook().SET_USERNAME(username);
+    useUserStoreHook().SET_NICKNAME(nickname);
+    useUserStoreHook().SET_ROLES(roles);
+    useUserStoreHook().SET_PERMS(permissions);
+    storageLocal().setItem(userKey, {
+      refreshToken,
+      expires,
+      avatar,
+      username,
+      nickname,
+      roles,
+      permissions
+    });
+  }
+
+  if (data.username && data.roles) {
+    const { username, roles } = data;
+    setUserKey({
+      avatar: data?.avatar ?? "",
+      username,
+      nickname: data?.nickname ?? "",
+      roles,
+      permissions: data?.permissions ?? []
+    });
+  } else {
+    const avatar =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "";
+    const username =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "";
+    const nickname =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "";
+    const roles =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
+    const permissions =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [];
+    setUserKey({
+      avatar,
+      username,
+      nickname,
+      roles,
+      permissions
+    });
+  }
+}
+
+/** 删除`token`以及key值为`user-info`的localStorage信息 */
+export function removeToken() {
+  Cookies.remove(TokenKey);
+  Cookies.remove(multipleTabsKey);
+  storageLocal().removeItem(userKey);
+}
+
+/** 格式化token（jwt格式） */
+export const formatToken = (token: string): string => {
+  return "Bearer " + token;
+};
+
+/** 是否有按钮级别的权限（根据登录接口返回的`permissions`字段进行判断）*/
+export const hasPerms = (value: string | Array<string>): boolean => {
+  if (!value) return false;
+  const allPerms = "*:*:*";
+  const { permissions } = useUserStoreHook();
+  if (!permissions) return false;
+  if (permissions.length === 1 && permissions[0] === allPerms) return true;
+  const isAuths = isString(value)
+    ? permissions.includes(value)
+    : isIncludeAllChildren(value, permissions);
+  return isAuths ? true : false;
+};
diff --git a/Yi.Pure.Vue3/src/utils/chinaArea.ts b/Yi.Pure.Vue3/src/utils/chinaArea.ts
new file mode 100644
index 00000000..692990fb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/chinaArea.ts
@@ -0,0 +1,190 @@
+import REGION_DATA from "china-area-data";
+import { cloneDeep } from "@pureadmin/utils";
+
+interface ProvinceData {
+  value: string;
+  label: string;
+  children?: Array<ProvinceData>;
+}
+
+// code转汉字大对象,例：CodeToText['110000']输出北京市
+const CodeToText = {};
+// 汉字转code大对象,例：TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
+const TextToCode = {};
+// 省份对象
+const provinceObject = REGION_DATA["86"];
+// 省市区三级联动数据（不带“全部”选项）
+const regionData = [];
+// 省市二级联动数据（不带“全部”选项）
+let provinceAndCityData = [];
+
+const ALL_TEXT = "全部";
+
+CodeToText[""] = ALL_TEXT;
+
+// 计算省
+Object.keys(provinceObject).forEach(prop => {
+  const provinceText = provinceObject[prop];
+  regionData.push({
+    value: prop, // 省份code值
+    label: provinceText // 省份汉字
+  });
+  CodeToText[prop] = provinceText;
+  TextToCode[provinceText] = {
+    code: prop
+  };
+  TextToCode[provinceText][ALL_TEXT] = {
+    code: ""
+  };
+});
+
+// 计算市
+regionData.forEach((item: ProvinceData) => {
+  const provinceCode = item.value;
+  const provinceText = item.label;
+  const provinceChildren = [];
+  const provinceData = REGION_DATA[provinceCode] ?? {};
+
+  Object.keys(provinceData).forEach(prop => {
+    provinceChildren.push({
+      value: prop,
+      label: provinceData[prop]
+    });
+    CodeToText[prop] = provinceData[prop];
+    TextToCode[provinceText][provinceData[prop]] = {
+      code: prop
+    };
+    TextToCode[provinceText][provinceData[prop]][ALL_TEXT] = {
+      code: ""
+    };
+  });
+
+  if (provinceChildren.length) {
+    item.children = provinceChildren;
+  }
+});
+provinceAndCityData = cloneDeep(regionData);
+
+// 计算区
+regionData.forEach((item: ProvinceData) => {
+  const province = item.children;
+  const provinceText = item.label;
+
+  if (province) {
+    province.forEach(pItem => {
+      const cityCode = pItem.value;
+      const cityText = pItem.label;
+      const cityChildren = [];
+      const cityData = REGION_DATA[cityCode] ?? {};
+
+      Object.keys(cityData).forEach(prop => {
+        cityChildren.push({
+          value: prop,
+          label: cityData[prop]
+        });
+        CodeToText[prop] = cityData[prop];
+        TextToCode[provinceText][cityText][cityData[prop]] = {
+          code: prop
+        };
+      });
+
+      if (cityChildren.length) {
+        pItem.children = cityChildren;
+      }
+    });
+  }
+});
+
+// 添加“全部”选项
+const provinceAndCityDataPlus = cloneDeep(provinceAndCityData);
+provinceAndCityDataPlus.unshift({
+  value: "",
+  label: ALL_TEXT
+});
+provinceAndCityDataPlus.forEach((item: ProvinceData) => {
+  const province = item.children;
+
+  if (province?.length) {
+    province.unshift({
+      value: "",
+      label: ALL_TEXT
+    });
+
+    province.forEach(pItem => {
+      const city = pItem.children;
+
+      if (city?.length) {
+        city.unshift({
+          value: "",
+          label: ALL_TEXT
+        });
+      }
+    });
+  }
+});
+
+const regionDataPlus = cloneDeep(regionData);
+regionDataPlus.unshift({
+  value: "",
+  label: ALL_TEXT
+});
+regionDataPlus.forEach((item: ProvinceData) => {
+  const province = item.children;
+
+  if (province?.length) {
+    province.unshift({
+      value: "",
+      label: ALL_TEXT
+    });
+    province.forEach(pItem => {
+      const city = pItem.children;
+
+      if (city?.length) {
+        city.unshift({
+          value: "",
+          label: ALL_TEXT
+        });
+      }
+    });
+  }
+});
+
+/**
+ * 汉字转区域码
+ * @param provinceText 省
+ * @param cityText 市
+ * @param regionText 区
+ * @returns
+ */
+function convertTextToCode(
+  provinceText: string,
+  cityText: string,
+  regionText?: string
+): string {
+  let code = "";
+  if (provinceText && TextToCode[provinceText]) {
+    const province = TextToCode[provinceText];
+    code = province.code;
+
+    if (cityText && province[cityText]) {
+      const city = province[cityText];
+      code = `${code}${cityText === ALL_TEXT ? "" : ", "}${city.code}`;
+
+      if (regionText && city[regionText]) {
+        code = `${code}${regionText === ALL_TEXT ? "" : ", "}${
+          city[regionText].code
+        }`;
+      }
+    }
+  }
+  return code;
+}
+export {
+  provinceAndCityData,
+  regionData,
+  provinceAndCityDataPlus,
+  regionDataPlus,
+  CodeToText,
+  TextToCode,
+  convertTextToCode
+};
diff --git a/Yi.Pure.Vue3/src/utils/globalPolyfills.ts b/Yi.Pure.Vue3/src/utils/globalPolyfills.ts
new file mode 100644
index 00000000..e9bc9a85
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/globalPolyfills.ts
@@ -0,0 +1,7 @@
+// 如果项目出现 `global is not defined` 报错，可能是您引入某个库的问题，比如 aws-sdk-js https://github.com/aws/aws-sdk-js
+// 解决办法就是将该文件引入 src/main.ts 即可 import "@/utils/globalPolyfills";
+if (typeof (window as any).global === "undefined") {
+  (window as any).global = window;
+}
+
+export {};
diff --git a/Yi.Pure.Vue3/src/utils/http/index.ts b/Yi.Pure.Vue3/src/utils/http/index.ts
new file mode 100644
index 00000000..19b5be24
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/http/index.ts
@@ -0,0 +1,194 @@
+import Axios, {
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type CustomParamsSerializer
+} from "axios";
+import type {
+  PureHttpError,
+  RequestMethods,
+  PureHttpResponse,
+  PureHttpRequestConfig
+} from "./types.d";
+import { stringify } from "qs";
+import NProgress from "../progress";
+import { getToken, formatToken } from "@/utils/auth";
+import { useUserStoreHook } from "@/store/modules/user";
+
+// 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
+const defaultConfig: AxiosRequestConfig = {
+  // 请求超时时间
+  timeout: 10000,
+  headers: {
+    Accept: "application/json, text/plain, */*",
+    "Content-Type": "application/json",
+    "X-Requested-With": "XMLHttpRequest"
+  },
+  // 数组格式参数序列化（https://github.com/axios/axios/issues/5142）
+  paramsSerializer: {
+    serialize: stringify as unknown as CustomParamsSerializer
+  }
+};
+
+class PureHttp {
+  constructor() {
+    this.httpInterceptorsRequest();
+    this.httpInterceptorsResponse();
+  }
+
+  /** `token`过期后，暂存待执行的请求 */
+  private static requests = [];
+
+  /** 防止重复刷新`token` */
+  private static isRefreshing = false;
+
+  /** 初始化配置对象 */
+  private static initConfig: PureHttpRequestConfig = {};
+
+  /** 保存当前`Axios`实例对象 */
+  private static axiosInstance: AxiosInstance = Axios.create(defaultConfig);
+
+  /** 重连原始请求 */
+  private static retryOriginalRequest(config: PureHttpRequestConfig) {
+    return new Promise(resolve => {
+      PureHttp.requests.push((token: string) => {
+        config.headers["Authorization"] = formatToken(token);
+        resolve(config);
+      });
+    });
+  }
+
+  /** 请求拦截 */
+  private httpInterceptorsRequest(): void {
+    PureHttp.axiosInstance.interceptors.request.use(
+      async (config: PureHttpRequestConfig): Promise<any> => {
+        // 开启进度条动画
+        NProgress.start();
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
+        if (typeof config.beforeRequestCallback === "function") {
+          config.beforeRequestCallback(config);
+          return config;
+        }
+        if (PureHttp.initConfig.beforeRequestCallback) {
+          PureHttp.initConfig.beforeRequestCallback(config);
+          return config;
+        }
+        /** 请求白名单，放置一些不需要`token`的接口（通过设置请求白名单，防止`token`过期后再请求造成的死循环问题） */
+        const whiteList = ["/refresh-token", "/login"];
+        return whiteList.some(url => config.url.endsWith(url))
+          ? config
+          : new Promise(resolve => {
+              const data = getToken();
+              if (data) {
+                const now = new Date().getTime();
+                const expired = parseInt(data.expires) - now <= 0;
+                if (expired) {
+                  if (!PureHttp.isRefreshing) {
+                    PureHttp.isRefreshing = true;
+                    // token过期刷新
+                    useUserStoreHook()
+                      .handRefreshToken({ refreshToken: data.refreshToken })
+                      .then(res => {
+                        const token = res.data.accessToken;
+                        config.headers["Authorization"] = formatToken(token);
+                        PureHttp.requests.forEach(cb => cb(token));
+                        PureHttp.requests = [];
+                      })
+                      .finally(() => {
+                        PureHttp.isRefreshing = false;
+                      });
+                  }
+                  resolve(PureHttp.retryOriginalRequest(config));
+                } else {
+                  config.headers["Authorization"] = formatToken(
+                    data.accessToken
+                  );
+                  resolve(config);
+                }
+              } else {
+                resolve(config);
+              }
+            });
+      },
+      error => {
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  /** 响应拦截 */
+  private httpInterceptorsResponse(): void {
+    const instance = PureHttp.axiosInstance;
+    instance.interceptors.response.use(
+      (response: PureHttpResponse) => {
+        const $config = response.config;
+        // 关闭进度条动画
+        NProgress.done();
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
+        if (typeof $config.beforeResponseCallback === "function") {
+          $config.beforeResponseCallback(response);
+          return response.data;
+        }
+        if (PureHttp.initConfig.beforeResponseCallback) {
+          PureHttp.initConfig.beforeResponseCallback(response);
+          return response.data;
+        }
+        return response.data;
+      },
+      (error: PureHttpError) => {
+        const $error = error;
+        $error.isCancelRequest = Axios.isCancel($error);
+        // 关闭进度条动画
+        NProgress.done();
+        // 所有的响应异常 区分来源为取消请求/非取消请求
+        return Promise.reject($error);
+      }
+    );
+  }
+
+  /** 通用请求工具函数 */
+  public request<T>(
+    method: RequestMethods,
+    url: string,
+    param?: AxiosRequestConfig,
+    axiosConfig?: PureHttpRequestConfig
+  ): Promise<T> {
+    const config = {
+      method,
+      url,
+      ...param,
+      ...axiosConfig
+    } as PureHttpRequestConfig;
+
+    // 单独处理自定义请求/响应回调
+    return new Promise((resolve, reject) => {
+      PureHttp.axiosInstance
+        .request(config)
+        .then((response: undefined) => {
+          resolve(response);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  /** 单独抽离的`post`工具函数 */
+  public post<T, P>(
+    url: string,
+    params?: AxiosRequestConfig<P>,
+    config?: PureHttpRequestConfig
+  ): Promise<T> {
+    return this.request<T>("post", url, params, config);
+  }
+
+  /** 单独抽离的`get`工具函数 */
+  public get<T, P>(
+    url: string,
+    params?: AxiosRequestConfig<P>,
+    config?: PureHttpRequestConfig
+  ): Promise<T> {
+    return this.request<T>("get", url, params, config);
+  }
+}
+
+export const http = new PureHttp();
diff --git a/Yi.Pure.Vue3/src/utils/http/types.d.ts b/Yi.Pure.Vue3/src/utils/http/types.d.ts
new file mode 100644
index 00000000..ef7c25f3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/http/types.d.ts
@@ -0,0 +1,47 @@
+import type {
+  Method,
+  AxiosError,
+  AxiosResponse,
+  AxiosRequestConfig
+} from "axios";
+
+export type resultType = {
+  accessToken?: string;
+};
+
+export type RequestMethods = Extract<
+  Method,
+  "get" | "post" | "put" | "delete" | "patch" | "option" | "head"
+>;
+
+export interface PureHttpError extends AxiosError {
+  isCancelRequest?: boolean;
+}
+
+export interface PureHttpResponse extends AxiosResponse {
+  config: PureHttpRequestConfig;
+}
+
+export interface PureHttpRequestConfig extends AxiosRequestConfig {
+  beforeRequestCallback?: (request: PureHttpRequestConfig) => void;
+  beforeResponseCallback?: (response: PureHttpResponse) => void;
+}
+
+export default class PureHttp {
+  request<T>(
+    method: RequestMethods,
+    url: string,
+    param?: AxiosRequestConfig,
+    axiosConfig?: PureHttpRequestConfig
+  ): Promise<T>;
+  post<T, P>(
+    url: string,
+    params?: P,
+    config?: PureHttpRequestConfig
+  ): Promise<T>;
+  get<T, P>(
+    url: string,
+    params?: P,
+    config?: PureHttpRequestConfig
+  ): Promise<T>;
+}
diff --git a/Yi.Pure.Vue3/src/utils/localforage/index.ts b/Yi.Pure.Vue3/src/utils/localforage/index.ts
new file mode 100644
index 00000000..013545fb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/localforage/index.ts
@@ -0,0 +1,109 @@
+import forage from "localforage";
+import type { LocalForage, ProxyStorage, ExpiresData } from "./types.d";
+
+class StorageProxy implements ProxyStorage {
+  protected storage: LocalForage;
+  constructor(storageModel) {
+    this.storage = storageModel;
+    this.storage.config({
+      // 首选IndexedDB作为第一驱动，不支持IndexedDB会自动降级到localStorage（WebSQL被弃用，详情看https://developer.chrome.com/blog/deprecating-web-sql）
+      driver: [this.storage.INDEXEDDB, this.storage.LOCALSTORAGE],
+      name: "pure-admin"
+    });
+  }
+
+  /**
+   * @description 将对应键名的数据保存到离线仓库
+   * @param k 键名
+   * @param v 键值
+   * @param m 缓存时间（单位`分`，默认`0`分钟，永久缓存）
+   */
+  public async setItem<T>(k: string, v: T, m = 0): Promise<T> {
+    return new Promise((resolve, reject) => {
+      this.storage
+        .setItem(k, {
+          data: v,
+          expires: m ? new Date().getTime() + m * 60 * 1000 : 0
+        })
+        .then(value => {
+          resolve(value.data);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  /**
+   * @description 从离线仓库中获取对应键名的值
+   * @param k 键名
+   */
+  public async getItem<T>(k: string): Promise<T> {
+    return new Promise((resolve, reject) => {
+      this.storage
+        .getItem(k)
+        .then((value: ExpiresData<T>) => {
+          value && (value.expires > new Date().getTime() || value.expires === 0)
+            ? resolve(value.data)
+            : resolve(null);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  /**
+   * @description 从离线仓库中删除对应键名的值
+   * @param k 键名
+   */
+  public async removeItem(k: string) {
+    return new Promise<void>((resolve, reject) => {
+      this.storage
+        .removeItem(k)
+        .then(() => {
+          resolve();
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  /**
+   * @description 从离线仓库中删除所有的键名，重置数据库
+   */
+  public async clear() {
+    return new Promise<void>((resolve, reject) => {
+      this.storage
+        .clear()
+        .then(() => {
+          resolve();
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+
+  /**
+   * @description 获取数据仓库中所有的key
+   */
+  public async keys() {
+    return new Promise<string[]>((resolve, reject) => {
+      this.storage
+        .keys()
+        .then(keys => {
+          resolve(keys);
+        })
+        .catch(err => {
+          reject(err);
+        });
+    });
+  }
+}
+
+/**
+ * 二次封装 [localforage](https://localforage.docschina.org/) 支持设置过期时间，提供完整的类型提示
+ */
+export const localForage = () => new StorageProxy(forage);
diff --git a/Yi.Pure.Vue3/src/utils/localforage/types.d.ts b/Yi.Pure.Vue3/src/utils/localforage/types.d.ts
new file mode 100644
index 00000000..b013c5b8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/localforage/types.d.ts
@@ -0,0 +1,166 @@
+// https://github.com/localForage/localForage/blob/master/typings/localforage.d.ts
+
+interface LocalForageDbInstanceOptions {
+  name?: string;
+
+  storeName?: string;
+}
+
+interface LocalForageOptions extends LocalForageDbInstanceOptions {
+  driver?: string | string[];
+
+  size?: number;
+
+  version?: number;
+
+  description?: string;
+}
+
+interface LocalForageDbMethodsCore {
+  getItem<T>(
+    key: string,
+    callback?: (err: any, value: T | null) => void
+  ): Promise<T | null>;
+
+  setItem<T>(
+    key: string,
+    value: T,
+    callback?: (err: any, value: T) => void
+  ): Promise<T>;
+
+  removeItem(key: string, callback?: (err: any) => void): Promise<void>;
+
+  clear(callback?: (err: any) => void): Promise<void>;
+
+  length(callback?: (err: any, numberOfKeys: number) => void): Promise<number>;
+
+  key(
+    keyIndex: number,
+    callback?: (err: any, key: string) => void
+  ): Promise<string>;
+
+  keys(callback?: (err: any, keys: string[]) => void): Promise<string[]>;
+
+  iterate<T, U>(
+    iteratee: (value: T, key: string, iterationNumber: number) => U,
+    callback?: (err: any, result: U) => void
+  ): Promise<U>;
+}
+
+interface LocalForageDropInstanceFn {
+  (
+    dbInstanceOptions?: LocalForageDbInstanceOptions,
+    callback?: (err: any) => void
+  ): Promise<void>;
+}
+
+interface LocalForageDriverMethodsOptional {
+  dropInstance?: LocalForageDropInstanceFn;
+}
+
+// duplicating LocalForageDriverMethodsOptional to preserve TS v2.0 support,
+// since Partial<> isn't supported there
+interface LocalForageDbMethodsOptional {
+  dropInstance: LocalForageDropInstanceFn;
+}
+
+interface LocalForageDriverDbMethods
+  extends LocalForageDbMethodsCore,
+    LocalForageDriverMethodsOptional {}
+
+interface LocalForageDriverSupportFunc {
+  (): Promise<boolean>;
+}
+
+interface LocalForageDriver extends LocalForageDriverDbMethods {
+  _driver: string;
+
+  _initStorage(options: LocalForageOptions): void;
+
+  _support?: boolean | LocalForageDriverSupportFunc;
+}
+
+interface LocalForageSerializer {
+  serialize<T>(
+    value: T | ArrayBuffer | Blob,
+    callback: (value: string, error: any) => void
+  ): void;
+
+  deserialize<T>(value: string): T | ArrayBuffer | Blob;
+
+  stringToBuffer(serializedString: string): ArrayBuffer;
+
+  bufferToString(buffer: ArrayBuffer): string;
+}
+
+interface LocalForageDbMethods
+  extends LocalForageDbMethodsCore,
+    LocalForageDbMethodsOptional {}
+
+export interface LocalForage extends LocalForageDbMethods {
+  LOCALSTORAGE: string;
+  WEBSQL: string;
+  INDEXEDDB: string;
+
+  /**
+   * Set and persist localForage options. This must be called before any other calls to localForage are made, but can be called after localForage is loaded.
+   * If you set any config values with this method they will persist after driver changes, so you can call config() then setDriver()
+   * @param {LocalForageOptions} options?
+   */
+  config(options: LocalForageOptions): boolean;
+  config(options: string): any;
+  config(): LocalForageOptions;
+
+  /**
+   * Create a new instance of localForage to point to a different store.
+   * All the configuration options used by config are supported.
+   * @param {LocalForageOptions} options
+   */
+  createInstance(options: LocalForageOptions): LocalForage;
+
+  driver(): string;
+
+  /**
+   * Force usage of a particular driver or drivers, if available.
+   * @param {string} driver
+   */
+  setDriver(
+    driver: string | string[],
+    callback?: () => void,
+    errorCallback?: (error: any) => void
+  ): Promise<void>;
+
+  defineDriver(
+    driver: LocalForageDriver,
+    callback?: () => void,
+    errorCallback?: (error: any) => void
+  ): Promise<void>;
+
+  /**
+   * Return a particular driver
+   * @param {string} driver
+   */
+  getDriver(driver: string): Promise<LocalForageDriver>;
+
+  getSerializer(
+    callback?: (serializer: LocalForageSerializer) => void
+  ): Promise<LocalForageSerializer>;
+
+  supports(driverName: string): boolean;
+
+  ready(callback?: (error: any) => void): Promise<void>;
+}
+
+// Customize
+
+export interface ProxyStorage {
+  setItem<T>(k: string, v: T, m: number): Promise<T>;
+  getItem<T>(k: string): Promise<T>;
+  removeItem(k: string): Promise<void>;
+  clear(): Promise<void>;
+}
+
+export interface ExpiresData<T> {
+  data: T;
+  expires: number;
+}
diff --git a/Yi.Pure.Vue3/src/utils/message.ts b/Yi.Pure.Vue3/src/utils/message.ts
new file mode 100644
index 00000000..40898ac4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/message.ts
@@ -0,0 +1,85 @@
+import type { VNode } from "vue";
+import { isFunction } from "@pureadmin/utils";
+import { type MessageHandler, ElMessage } from "element-plus";
+
+type messageStyle = "el" | "antd";
+type messageTypes = "info" | "success" | "warning" | "error";
+
+interface MessageParams {
+  /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
+  type?: messageTypes;
+  /** 自定义图标，该属性会覆盖 `type` 的图标 */
+  icon?: any;
+  /** 是否将 `message` 属性作为 `HTML` 片段处理，默认 `false` */
+  dangerouslyUseHTMLString?: boolean;
+  /** 消息风格，可选 `el` 、`antd` ，默认 `antd` */
+  customClass?: messageStyle;
+  /** 显示时间，单位为毫秒。设为 `0` 则不会自动关闭，`element-plus` 默认是 `3000` ，平台改成默认 `2000` */
+  duration?: number;
+  /** 是否显示关闭按钮，默认值 `false` */
+  showClose?: boolean;
+  /** 文字是否居中，默认值 `false` */
+  center?: boolean;
+  /** `Message` 距离窗口顶部的偏移量，默认 `20` */
+  offset?: number;
+  /** 设置组件的根元素，默认 `document.body` */
+  appendTo?: string | HTMLElement;
+  /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
+  grouping?: boolean;
+  /** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
+  onClose?: Function | null;
+}
+
+/** 用法非常简单，参考 src/views/components/message/index.vue 文件 */
+
+/**
+ * `Message` 消息提示函数
+ */
+const message = (
+  message: string | VNode | (() => VNode),
+  params?: MessageParams
+): MessageHandler => {
+  if (!params) {
+    return ElMessage({
+      message,
+      customClass: "pure-message"
+    });
+  } else {
+    const {
+      icon,
+      type = "info",
+      dangerouslyUseHTMLString = false,
+      customClass = "antd",
+      duration = 2000,
+      showClose = false,
+      center = false,
+      offset = 20,
+      appendTo = document.body,
+      grouping = false,
+      onClose
+    } = params;
+
+    return ElMessage({
+      message,
+      type,
+      icon,
+      dangerouslyUseHTMLString,
+      duration,
+      showClose,
+      center,
+      offset,
+      appendTo,
+      grouping,
+      // 全局搜 pure-message 即可知道该类的样式位置
+      customClass: customClass === "antd" ? "pure-message" : "",
+      onClose: () => (isFunction(onClose) ? onClose() : null)
+    });
+  }
+};
+
+/**
+ * 关闭所有 `Message` 消息提示函数
+ */
+const closeAllMessage = (): void => ElMessage.closeAll();
+
+export { message, closeAllMessage };
diff --git a/Yi.Pure.Vue3/src/utils/mitt.ts b/Yi.Pure.Vue3/src/utils/mitt.ts
new file mode 100644
index 00000000..7144241d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/mitt.ts
@@ -0,0 +1,20 @@
+import type { Emitter } from "mitt";
+import mitt from "mitt";
+
+/** 全局公共事件需要在此处添加类型 */
+type Events = {
+  openPanel: string;
+  tagViewsChange: string;
+  tagViewsShowModel: string;
+  logoChange: boolean;
+  changLayoutRoute: string;
+  imageInfo: {
+    img: HTMLImageElement;
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+  };
+};
+
+export const emitter: Emitter<Events> = mitt<Events>();
diff --git a/Yi.Pure.Vue3/src/utils/preventDefault.ts b/Yi.Pure.Vue3/src/utils/preventDefault.ts
new file mode 100644
index 00000000..42da8dfb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/preventDefault.ts
@@ -0,0 +1,28 @@
+import { useEventListener } from "@vueuse/core";
+
+/** 是否为`img`标签 */
+function isImgElement(element) {
+  return typeof HTMLImageElement !== "undefined"
+    ? element instanceof HTMLImageElement
+    : element.tagName.toLowerCase() === "img";
+}
+
+// 在 src/main.ts 引入并调用即可 import { addPreventDefault } from "@/utils/preventDefault"; addPreventDefault();
+export const addPreventDefault = () => {
+  // 阻止通过键盘F12快捷键打开浏览器开发者工具面板
+  useEventListener(
+    window.document,
+    "keydown",
+    ev => ev.key === "F12" && ev.preventDefault()
+  );
+  // 阻止浏览器默认的右键菜单弹出（不会影响自定义右键事件）
+  useEventListener(window.document, "contextmenu", ev => ev.preventDefault());
+  // 阻止页面元素选中
+  useEventListener(window.document, "selectstart", ev => ev.preventDefault());
+  // 浏览器中图片通常默认是可拖动的，并且可以在新标签页或窗口中打开，或者将其拖动到其他应用程序中，此处将其禁用，使其默认不可拖动
+  useEventListener(
+    window.document,
+    "dragstart",
+    ev => isImgElement(ev?.target) && ev.preventDefault()
+  );
+};
diff --git a/Yi.Pure.Vue3/src/utils/print.ts b/Yi.Pure.Vue3/src/utils/print.ts
new file mode 100644
index 00000000..6d2051c7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/print.ts
@@ -0,0 +1,213 @@
+interface PrintFunction {
+  extendOptions: Function;
+  getStyle: Function;
+  setDomHeight: Function;
+  toPrint: Function;
+}
+
+const Print = function (dom, options?: object): PrintFunction {
+  options = options || {};
+  // @ts-expect-error
+  if (!(this instanceof Print)) return new Print(dom, options);
+  this.conf = {
+    styleStr: "",
+    // Elements that need to dynamically get and set the height
+    setDomHeightArr: [],
+    // Callback before printing
+    printBeforeFn: null,
+    // Callback after printing
+    printDoneCallBack: null
+  };
+  for (const key in this.conf) {
+    if (key && options.hasOwnProperty(key)) {
+      this.conf[key] = options[key];
+    }
+  }
+  if (typeof dom === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+  if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) {
+    this.setDomHeight(this.conf.setDomHeightArr);
+  }
+  this.init();
+};
+
+Print.prototype = {
+  /**
+   * init
+   */
+  init: function (): void {
+    const content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  /**
+   * Configuration property extension
+   * @param {Object} obj
+   * @param {Object} obj2
+   */
+  extendOptions: function <T>(obj, obj2: T): T {
+    for (const k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+  /**
+    Copy all styles of the original page
+  */
+  getStyle: function (): string {
+    let str = "";
+    const styles: NodeListOf<Element> = document.querySelectorAll("style,link");
+    for (let i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += `<style>.no-print{display:none;}${this.conf.styleStr}</style>`;
+    return str;
+  },
+  // form assignment
+  getHtml: function (): Element {
+    const inputs = document.querySelectorAll("input");
+    const selects = document.querySelectorAll("select");
+    const textareas = document.querySelectorAll("textarea");
+    const canvass = document.querySelectorAll("canvas");
+
+    for (let k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute("checked", "checked");
+        } else {
+          inputs[k].removeAttribute("checked");
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute("value", inputs[k].value);
+      } else {
+        inputs[k].setAttribute("value", inputs[k].value);
+      }
+    }
+
+    for (let k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == "textarea") {
+        textareas[k2].innerHTML = textareas[k2].value;
+      }
+    }
+
+    for (let k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == "select-one") {
+        const child = selects[k3].children;
+        for (const i in child) {
+          if (child[i].tagName == "OPTION") {
+            if ((child[i] as any).selected == true) {
+              child[i].setAttribute("selected", "selected");
+            } else {
+              child[i].removeAttribute("selected");
+            }
+          }
+        }
+      }
+    }
+
+    for (let k4 = 0; k4 < canvass.length; k4++) {
+      const imageURL = canvass[k4].toDataURL("image/png");
+      const img = document.createElement("img");
+      img.src = imageURL;
+      img.setAttribute("style", "max-width: 100%;");
+      img.className = "isNeedRemove";
+      canvass[k4].parentNode.insertBefore(img, canvass[k4].nextElementSibling);
+    }
+
+    return this.dom.outerHTML;
+  },
+  /**
+    create iframe
+  */
+  writeIframe: function (content) {
+    let w: Document | Window;
+    let doc: Document;
+    const iframe: HTMLIFrameElement = document.createElement("iframe");
+    const f: HTMLIFrameElement = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    iframe.setAttribute(
+      "style",
+      "position:absolute;width:0;height:0;top:-10px;left:-10px;"
+    );
+
+    w = f.contentWindow || f.contentDocument;
+
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+
+    const removes = document.querySelectorAll(".isNeedRemove");
+    for (let k = 0; k < removes.length; k++) {
+      removes[k].parentNode.removeChild(removes[k]);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const _this = this;
+    iframe.onload = function (): void {
+      // Before popping, callback
+      if (_this.conf.printBeforeFn) {
+        _this.conf.printBeforeFn({ doc });
+      }
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe);
+        // After popup, callback
+        if (_this.conf.printDoneCallBack) {
+          _this.conf.printDoneCallBack();
+        }
+      }, 100);
+    };
+  },
+  /**
+    Print
+  */
+  toPrint: function (frameWindow): void {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand("print", false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.error(err);
+    }
+  },
+  isDOM:
+    typeof HTMLElement === "object"
+      ? function (obj) {
+          return obj instanceof HTMLElement;
+        }
+      : function (obj) {
+          return (
+            obj &&
+            typeof obj === "object" &&
+            obj.nodeType === 1 &&
+            typeof obj.nodeName === "string"
+          );
+        },
+  /**
+   * Set the height of the specified dom element by getting the existing height of the dom element and setting
+   * @param {Array} arr
+   */
+  setDomHeight(arr) {
+    if (arr && arr.length) {
+      arr.forEach(name => {
+        const domArr = document.querySelectorAll(name);
+        domArr.forEach(dom => {
+          dom.style.height = dom.offsetHeight + "px";
+        });
+      });
+    }
+  }
+};
+
+export default Print;
diff --git a/Yi.Pure.Vue3/src/utils/progress/index.ts b/Yi.Pure.Vue3/src/utils/progress/index.ts
new file mode 100644
index 00000000..d3098627
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/progress/index.ts
@@ -0,0 +1,17 @@
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+NProgress.configure({
+  // 动画方式
+  easing: "ease",
+  // 递增进度条的速度
+  speed: 500,
+  // 是否显示加载ico
+  showSpinner: false,
+  // 自动递增间隔
+  trickleSpeed: 200,
+  // 初始化时的最小百分比
+  minimum: 0.3
+});
+
+export default NProgress;
diff --git a/Yi.Pure.Vue3/src/utils/propTypes.ts b/Yi.Pure.Vue3/src/utils/propTypes.ts
new file mode 100644
index 00000000..a4d67ec1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/propTypes.ts
@@ -0,0 +1,39 @@
+import type { CSSProperties, VNodeChild } from "vue";
+import {
+  createTypes,
+  toValidableType,
+  type VueTypesInterface,
+  type VueTypeValidableDef
+} from "vue-types";
+
+export type VueNode = VNodeChild | JSX.Element;
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+};
+
+const newPropTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined
+}) as PropTypes;
+
+// 从 vue-types v5.0 开始，extend()方法已经废弃，当前已改为官方推荐的ES6+方法 https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#the-extend-method
+export default class propTypes extends newPropTypes {
+  // a native-like validator that supports the `.validable` method
+  static get style() {
+    return toValidableType("style", {
+      type: [String, Object]
+    });
+  }
+
+  static get VNodeChild() {
+    return toValidableType("VNodeChild", {
+      type: undefined
+    });
+  }
+}
diff --git a/Yi.Pure.Vue3/src/utils/responsive.ts b/Yi.Pure.Vue3/src/utils/responsive.ts
new file mode 100644
index 00000000..28f1bcfc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/responsive.ts
@@ -0,0 +1,46 @@
+// 响应式storage
+import type { App } from "vue";
+import Storage from "responsive-storage";
+import { routerArrays } from "@/layout/types";
+import { responsiveStorageNameSpace } from "@/config";
+
+export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
+  const nameSpace = responsiveStorageNameSpace();
+  const configObj = Object.assign(
+    {
+      // 国际化 默认中文zh
+      locale: Storage.getData("locale", nameSpace) ?? {
+        locale: config.Locale ?? "zh"
+      },
+      // layout模式以及主题
+      layout: Storage.getData("layout", nameSpace) ?? {
+        layout: config.Layout ?? "vertical",
+        theme: config.Theme ?? "light",
+        darkMode: config.DarkMode ?? false,
+        sidebarStatus: config.SidebarStatus ?? true,
+        epThemeColor: config.EpThemeColor ?? "#409EFF",
+        themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
+        overallStyle: config.OverallStyle ?? "light" // 整体风格（浅色：light、深色：dark、自动：system）
+      },
+      // 系统配置-界面显示
+      configure: Storage.getData("configure", nameSpace) ?? {
+        grey: config.Grey ?? false,
+        weak: config.Weak ?? false,
+        hideTabs: config.HideTabs ?? false,
+        hideFooter: config.HideFooter ?? true,
+        showLogo: config.ShowLogo ?? true,
+        showModel: config.ShowModel ?? "smart",
+        multiTagsCache: config.MultiTagsCache ?? false,
+        stretch: config.Stretch ?? false
+      }
+    },
+    config.MultiTagsCache
+      ? {
+          // 默认显示顶级菜单tag
+          tags: Storage.getData("tags", nameSpace) ?? routerArrays
+        }
+      : {}
+  );
+
+  app.use(Storage, { nameSpace, memory: configObj });
+};
diff --git a/Yi.Pure.Vue3/src/utils/sso.ts b/Yi.Pure.Vue3/src/utils/sso.ts
new file mode 100644
index 00000000..18021d0c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/sso.ts
@@ -0,0 +1,59 @@
+import { removeToken, setToken, type DataInfo } from "./auth";
+import { subBefore, getQueryMap } from "@pureadmin/utils";
+
+/**
+ * 简版前端单点登录，根据实际业务自行编写，平台启动后本地可以跳后面这个链接进行测试 http://localhost:8848/#/permission/page/index?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin
+ * 划重点：
+ * 判断是否为单点登录，不为则直接返回不再进行任何逻辑处理，下面是单点登录后的逻辑处理
+ * 1.清空本地旧信息；
+ * 2.获取url中的重要参数信息，然后通过 setToken 保存在本地；
+ * 3.删除不需要显示在 url 的参数
+ * 4.使用 window.location.replace 跳转正确页面
+ */
+(function () {
+  // 获取 url 中的参数
+  const params = getQueryMap(location.href) as DataInfo<Date>;
+  const must = ["username", "roles", "accessToken"];
+  const mustLength = must.length;
+  if (Object.keys(params).length !== mustLength) return;
+
+  // url 参数满足 must 里的全部值，才判定为单点登录，避免非单点登录时刷新页面无限循环
+  let sso = [];
+  let start = 0;
+
+  while (start < mustLength) {
+    if (Object.keys(params).includes(must[start]) && sso.length <= mustLength) {
+      sso.push(must[start]);
+    } else {
+      sso = [];
+    }
+    start++;
+  }
+
+  if (sso.length === mustLength) {
+    // 判定为单点登录
+
+    // 清空本地旧信息
+    removeToken();
+
+    // 保存新信息到本地
+    setToken(params);
+
+    // 删除不需要显示在 url 的参数
+    delete params.roles;
+    delete params.accessToken;
+
+    const newUrl = `${location.origin}${location.pathname}${subBefore(
+      location.hash,
+      "?"
+    )}?${JSON.stringify(params)
+      .replace(/["{}]/g, "")
+      .replace(/:/g, "=")
+      .replace(/,/g, "&")}`;
+
+    // 替换历史记录项
+    window.location.replace(newUrl);
+  } else {
+    return;
+  }
+})();
diff --git a/Yi.Pure.Vue3/src/utils/tree.ts b/Yi.Pure.Vue3/src/utils/tree.ts
new file mode 100644
index 00000000..f8f3783b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/utils/tree.ts
@@ -0,0 +1,188 @@
+/**
+ * @description 提取菜单树中的每一项uniqueId
+ * @param tree 树
+ * @returns 每一项uniqueId组成的数组
+ */
+export const extractPathList = (tree: any[]): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("tree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  const expandedPaths: Array<number | string> = [];
+  for (const node of tree) {
+    const hasChildren = node.children && node.children.length > 0;
+    if (hasChildren) {
+      extractPathList(node.children);
+    }
+    expandedPaths.push(node.uniqueId);
+  }
+  return expandedPaths;
+};
+
+/**
+ * @description 如果父级下children的length为1，删除children并自动组建唯一uniqueId
+ * @param tree 树
+ * @param pathList 每一项的id组成的数组
+ * @returns 组件唯一uniqueId后的树
+ */
+export const deleteChildren = (tree: any[], pathList = []): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("menuTree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  for (const [key, node] of tree.entries()) {
+    if (node.children && node.children.length === 1) delete node.children;
+    node.id = key;
+    node.parentId = pathList.length ? pathList[pathList.length - 1] : null;
+    node.pathList = [...pathList, node.id];
+    node.uniqueId =
+      node.pathList.length > 1 ? node.pathList.join("-") : node.pathList[0];
+    const hasChildren = node.children && node.children.length > 0;
+    if (hasChildren) {
+      deleteChildren(node.children, node.pathList);
+    }
+  }
+  return tree;
+};
+
+/**
+ * @description 创建层级关系
+ * @param tree 树
+ * @param pathList 每一项的id组成的数组
+ * @returns 创建层级关系后的树
+ */
+export const buildHierarchyTree = (tree: any[], pathList = []): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("tree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  for (const [key, node] of tree.entries()) {
+    node.id = key;
+    node.parentId = pathList.length ? pathList[pathList.length - 1] : null;
+    node.pathList = [...pathList, node.id];
+    const hasChildren = node.children && node.children.length > 0;
+    if (hasChildren) {
+      buildHierarchyTree(node.children, node.pathList);
+    }
+  }
+  return tree;
+};
+
+/**
+ * @description 广度优先遍历，根据唯一uniqueId找当前节点信息
+ * @param tree 树
+ * @param uniqueId 唯一uniqueId
+ * @returns 当前节点信息
+ */
+export const getNodeByUniqueId = (
+  tree: any[],
+  uniqueId: number | string
+): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("menuTree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  const item = tree.find(node => node.uniqueId === uniqueId);
+  if (item) return item;
+  const childrenList = tree
+    .filter(node => node.children)
+    .map(i => i.children)
+    .flat(1) as unknown;
+  return getNodeByUniqueId(childrenList as any[], uniqueId);
+};
+
+/**
+ * @description 向当前唯一uniqueId节点中追加字段
+ * @param tree 树
+ * @param uniqueId 唯一uniqueId
+ * @param fields 需要追加的字段
+ * @returns 追加字段后的树
+ */
+export const appendFieldByUniqueId = (
+  tree: any[],
+  uniqueId: number | string,
+  fields: object
+): any => {
+  if (!Array.isArray(tree)) {
+    console.warn("menuTree must be an array");
+    return [];
+  }
+  if (!tree || tree.length === 0) return [];
+  for (const node of tree) {
+    const hasChildren = node.children && node.children.length > 0;
+    if (
+      node.uniqueId === uniqueId &&
+      Object.prototype.toString.call(fields) === "[object Object]"
+    )
+      Object.assign(node, fields);
+    if (hasChildren) {
+      appendFieldByUniqueId(node.children, uniqueId, fields);
+    }
+  }
+  return tree;
+};
+
+/**
+ * @description 构造树型结构数据
+ * @param data 数据源
+ * @param id id字段 默认id
+ * @param parentId 父节点字段，默认parentId
+ * @param children 子节点字段，默认children
+ * @returns 追加字段后的树
+ */
+export const handleTree = (
+  data: any[],
+  id?: string,
+  parentId?: string,
+  children?: string
+): any => {
+  if (!Array.isArray(data)) {
+    console.warn("data must be an array");
+    return [];
+  }
+  const config = {
+    id: id || "id",
+    parentId: parentId || "parentId",
+    childrenList: children || "children"
+  };
+
+  const childrenListMap: any = {};
+  const nodeIds: any = {};
+  const tree = [];
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o: Record<string, any>) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+};
diff --git a/Yi.Pure.Vue3/src/views/able/barcode.vue b/Yi.Pure.Vue3/src/views/able/barcode.vue
new file mode 100644
index 00000000..b6c027fa
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/barcode.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import ReBarcode from "@/components/ReBarcode";
+
+defineOptions({
+  name: "BarCode"
+});
+
+const barcodes = [
+  {
+    text: "CODE128",
+    type: "CODE128",
+    options: {}
+  },
+  {
+    text: "CODE39",
+    type: "CODE39",
+    options: {
+      lineColor: "#990000"
+    }
+  },
+  {
+    text: "123456",
+    type: "pharmacode",
+    options: {
+      background: "#eee",
+      width: 5
+    }
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="font-medium">
+          条形码（基于
+          <el-link
+            href="https://lindell.me/JsBarcode/"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            JsBarcode
+          </el-link>
+          生成）
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/barcode.vue
+        </el-link>
+      </template>
+      <el-row :gutter="12">
+        <template v-for="(item, index) in barcodes" :key="index">
+          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+            <el-card shadow="hover" class="flex justify-center">
+              <ReBarcode
+                :text="item.text"
+                :type="item.type"
+                :options="item.options"
+              />
+            </el-card>
+          </el-col>
+        </template>
+      </el-row>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/danmaku/danmu.ts b/Yi.Pure.Vue3/src/views/able/danmaku/danmu.ts
new file mode 100644
index 00000000..9f8efc7e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/danmaku/danmu.ts
@@ -0,0 +1,35 @@
+const customDanmus = [
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAFBAYBAgMAB//aAAgBAQAAAAD7HU4ObhMC3AnlYvY8ISwA+6WDOd4/RA96FVeF66BOVWB3TsAOgZC27wv/xAAYAQEBAQEBAAAAAAAAAAAAAAACAwQAAf/aAAgBAhAAAAC3sw8uyRDQPV//xAAYAQADAQEAAAAAAAAAAAAAAAAAAgMBBP/aAAgBAxAAAACQ7LfmoUTNvFf/xAA0EAACAQMBBAcHAwUAAAAAAAABAgMABBESBRMxQRAhIjJRYbEUIzRCUnOBM3KSU2KRoeH/2gAIAQEAAT8AmmSCJpHOAoq6vZp8lmITkgonSQCMZxikkdGDxsVbxFbK2l7TGUkwHQfy6Ln4if7jetbcdglvH9TFv40hD71CGzlQpAyACRkt4VcxojxOdIj06GzwA5VKkilGUdjUcNxD9XlwI5g1Bfm0u4nC5UHDeYNWu0LS4B3D6mHHIwaufiJ/uN61tm6Et6GPCIbv8mtqi4gtrFkzjeuxIGRq+TP4orI1jpK+8MHAfVprYcM8kVysmoIGiwG8UfVgVcwh1ecDGiYcvlNWk7W9zDKucqwyPEVOczzfvb1q/wBkXWqR4Sja8nDHGCajAEagHIAx/jourmK0haaV9KrWyrFZLRZJ07MqNhc8Q3M/irfZFlaOGQF2HzOc1cACeYD+o3r0XptYEJKAyMx06TgsxOaupr+MhkIQk6TlfPlkVNCIxBc3A9onLjRG/WtWV1BPFlRp09TpzBHLoufiJ/uN69G05JLxt8C2ksQpTiAMHIq0mQz6HnMnZwurBwBRhKTLLK5Y6Oz/AGf9qwla3u4TykBRh/sdFx8RN9xvWpri43Unv5O6fmNSSSCHGtsb0DGfKrFm3zdZ7o9RUskhMnbbu+NLJJrh7bfqJz869onxjfSY/callk3knvG7x51//8QAIxEAAgEEAQMFAAAAAAAAAAAAAQIRAAMSMRAEIXETMjNBUf/aAAgBAgEBPwBMUTNv3tSdQrgZDYpwMmx0N8PdFv0iBMAyKS4QroF99JcxDhhMntwxgUCoJIER90jZCeG2PBpvjNWtHzx//8QAIBEAAgICAgIDAAAAAAAAAAAAAQIAERASAyEyM0GBkf/aAAgBAwEBPwBtmbURuErdRb1W/nCIW3vqMgJVr8YyWVIyvYG/5CKwJze36jY//9k=",
+    name: "美绪",
+    text: "马什么梅？"
+  },
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAABQIDBAEGB//aAAgBAQAAAAD65hzG3WLcATfCbHYQ9IY0uiEfRkU1IOr+RoUG1ornWj7Y6//EABgBAQADAQAAAAAAAAAAAAAAAAQAAgUD/9oACAECEAAAACEf3IJba51tGDNq/wD/xAAYAQEAAwEAAAAAAAAAAAAAAAAEAQMFAv/aAAgBAxAAAABSg0MWQdj+c6VozP/EAC0QAAIBAwMBBgUFAAAAAAAAAAECEQADBBASMUEiUVJhcZEFExQhgSAyQoKx/9oACAEBAAE/AKu5oEi2A3meKOXf8cfgV9Xe2kEgyOeCKsZSXAqs0XP91z7+wC3MSCzeg/RbuG06uO8T6a5kNkOOu0CpUXWQMdo4kQRPQihPd9tH+4jXIw0yDukq0RNHFu2/iOVku0pfx7foHt91MttbMyN7njqQDo3BPkdWEqRJEjkV8QOV2LVq2xBBlkoq+y181CrgHn1nXHffZQ+UH8aEwCaEoJP9qzbe+ySOUO7XCuxca2f5CR6jS477H7bftPWt7+NvekdzbWXYyo60rvtXtHgda3v4j71Yd/qLPaPJ6+Vb38be9f/EACYRAAECBAQHAQAAAAAAAAAAAAECAwAEEBIREzFSITNBQlFhgXL/2gAIAQIBAT8AffKDYjXqYznd5hhwuI46ijjOOaSfaYUm232Ik9F/KKQFRMN2LHgiJVdrmG6s32fYa5iP0Kf/xAAmEQABAgQFBAMAAAAAAAAAAAABAgMAEBESBBNCUoEhMTNhUXFy/9oACAEDAQE/AGGAoXK4EZLWwQ+2G19Oxk28RlhI9GEqur9xi9HMm3C2qtAfRhhy9J+axiUXIrtnhdfEOeNf5Mv/2Q==",
+    name: "博士",
+    text: "马东什么？"
+  },
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAxAAACAgMBAAAAAAAAAAAAAAAABgQFAQIHAwEBAAMBAAAAAAAAAAAAAAAAAwABAgT/2gAMAwEAAhADEAAAAI7CsPnN1VeZ0okpTbSWASKzwmMPRy3PuuWhpv4KvQ7pcJYTUb+hdLQYWJoaVU+RU3jcXiaoegAhWOAPeeaBd1wGtf/EAC4QAAIBAwIEBAUFAQAAAAAAAAECAwAEEQUhBhASMRMiQWEUI3KBoSAzQlFSkv/aAAgBAQABPwDTxidHHbdTyZGjdkcYYelBGKM4HlUgH7/osXInRfQsK0q18abxGHkj/JrV0KXrEfzUGtLiE0F1G48r4GfcVJDJFI0TbMp52W91D9VXt42mWQCu0QUqHZQC7SyDIRA22QO5NXkFyLeFpnWRggYsMZw/+ioAPsRVlOtrpsshx+6d2OFGw3J/oVK897YR6nbfORCTkp0OVQ7lRk5Aq5gMZSVR8qVepfbPpy0jDSRyEZxIg/6JrjKJytlEEJ63uJD7ttXB6Tn41bhW8Mwxxjqzt3OBWrx+Bw9fQsRvIgBzjYutcP3F8upWVmZZltvjFPQW22BqeAJpHh+kWyeyhsL+KXS9RcB1WLpYZGSc4NcKwxTrcRy+qrj2IJIqe3S5AEsSOAcgMobB+9Lb9KhVAAHYCntRIjI6hkYYZWGQRUGm2ltMssVsiSKCAVGMZqWFZ4fDY4XYn7ULaEgF182N/Me9cIuI3kY9gFodLAEHINFgKDKdqwK1LVotOMSsnWz5JAPYUeJZyTiKMVwv2n+la08npcZOBjke3LVWZtRuizE4kI5f/8QAIBEBAAIBAgcAAAAAAAAAAAAAAQARAwIQEiAhMTJBcf/aAAgBAgEBPwDL5HzkadfX0RDjmTSUJtks1MqWpVypk7uxt//EACARAQABAwMFAAAAAAAAAAAAAAEAAhEhAxATEiIxYXH/2gAIAQMBAT8A0m1L9l+2++Sg9sF45p1N7M6iUJYwM5GYW4ZmZT4Njb//2Q==",
+    name: "柚子",
+    text: "什么冬梅？"
+  }
+];
+
+const danmus = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+const getDanmuData = () => {
+  return danmus.map((text, index) => {
+    const _index = index % 3;
+    return {
+      avatar: customDanmus[_index].avatar,
+      name: customDanmus[_index].name,
+      text
+    };
+  });
+};
+
+export { customDanmus, danmus, getDanmuData };
diff --git a/Yi.Pure.Vue3/src/views/able/danmaku/index.vue b/Yi.Pure.Vue3/src/views/able/danmaku/index.vue
new file mode 100644
index 00000000..5d43c376
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/danmaku/index.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { danmus as danmusData, getDanmuData } from "./danmu.js";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import VueDanmaku from "vue3-danmaku";
+
+defineOptions({
+  name: "Danmaku"
+});
+
+const danmaku = ref();
+const danmus = ref<any[]>(getDanmuData());
+const danmuMsg = ref<string>("");
+let timer = 0;
+const config = reactive({
+  channels: 5, // 轨道数量，为0则弹幕轨道数会撑满容器
+  useSlot: true, // 是否开启slot
+  loop: true, // 是否开启弹幕循环
+  speeds: 200, // 弹幕速度，实际为弹幕滚动完一整屏的秒数，值越小速度越快
+  fontSize: 20, // 文本模式下的字号
+  top: 10, // 弹幕轨道间的垂直间距
+  right: 0, // 同一轨道弹幕的水平间距
+  debounce: 100, // 弹幕刷新频率（多少毫秒插入一条弹幕，建议不小于50）
+  randomChannel: true // 随机弹幕轨道
+});
+
+onMounted(() => {
+  window.onresize = () => resizeHandler();
+});
+
+onUnmounted(() => {
+  window.onresize = null;
+});
+
+function play(type: string) {
+  switch (type) {
+    case "play":
+      danmaku.value.play();
+      break;
+    case "pause":
+      danmaku.value.pause();
+      break;
+    case "stop":
+      danmaku.value.stop();
+      break;
+    case "show":
+      danmaku.value.show();
+      break;
+    case "hide":
+      danmaku.value.hide();
+      break;
+    case "reset":
+      danmaku.value.reset();
+      break;
+    default:
+      break;
+  }
+}
+
+function switchSlot(slot: boolean) {
+  config.useSlot = slot;
+  danmus.value = slot ? getDanmuData() : danmusData;
+
+  setTimeout(() => {
+    danmaku.value.stop();
+    danmaku.value.play();
+  });
+}
+function speedsChange(val: number) {
+  if (config.speeds <= 10 && val === -10) {
+    return;
+  }
+  config.speeds += val;
+  danmaku.value.reset();
+}
+function fontChange(val: number) {
+  config.fontSize += val;
+  danmaku.value.reset();
+}
+function channelChange(val: number) {
+  if (!config.channels && val === -1) {
+    return;
+  }
+  config.channels += val;
+}
+function resizeHandler() {
+  if (timer) clearTimeout(timer);
+  timer = window.setTimeout(() => {
+    danmaku.value.resize();
+  }, 500);
+}
+function addDanmu() {
+  if (!danmuMsg.value) return;
+  const _danmuMsg = config.useSlot
+    ? {
+        avatar: "https://i.loli.net/2021/01/17/xpwbm3jKytfaNOD.jpg",
+        name: "你",
+        text: danmuMsg.value
+      }
+    : danmuMsg.value;
+  danmaku.value.add(_danmuMsg);
+  danmuMsg.value = "";
+}
+</script>
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          弹幕组件，采用开源的
+          <el-link
+            href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vue3-danmaku
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku"
+        target="_blank"
+      >
+        代码位置 src/views/able/danmaku
+      </el-link>
+    </template>
+    <div class="flex gap-5">
+      <vue-danmaku
+        ref="danmaku"
+        v-model:danmus="danmus"
+        class="demo"
+        isSuspend
+        v-bind="config"
+      >
+        <!-- 弹幕slot -->
+        <template v-slot:dm="{ danmu, index }">
+          <div class="danmu-item">
+            <img class="img" :src="danmu.avatar" />
+            <span>{{ index }}{{ danmu.name }}：</span>
+            <span>{{ danmu.text }}</span>
+          </div>
+        </template>
+      </vue-danmaku>
+      <div class="main">
+        <p>
+          播放：
+          <el-button @click="play('play')">播放</el-button>
+          <el-button @click="play('pause')">暂停</el-button>
+          <el-button @click="play('stop')">停止</el-button>
+        </p>
+        <p>
+          模式：
+          <el-button @click="switchSlot(true)">弹幕 slot</el-button>
+          <el-button @click="switchSlot(false)">普通文本</el-button>
+        </p>
+        <p>
+          显示：
+          <el-button @click="play('show')">显示</el-button>
+          <el-button @click="play('hide')">隐藏</el-button>
+        </p>
+        <p>
+          速度：
+          <el-button @click="speedsChange(-10)">减速</el-button>
+          <el-button @click="speedsChange(10)">增速</el-button>
+          <span class="ml-5">当前速度：{{ config.speeds }}像素/s</span>
+        </p>
+        <p>
+          字号：
+          <el-button :disabled="config.useSlot" @click="fontChange(-1)">
+            缩小
+          </el-button>
+          <el-button :disabled="config.useSlot" @click="fontChange(1)">
+            放大
+          </el-button>
+          <span class="ml-5">当前字号：{{ config.fontSize }}px</span>
+        </p>
+        <p>
+          轨道：
+          <el-button @click="channelChange(-1)">-1</el-button>
+          <el-button @click="channelChange(1)">+1</el-button>
+          <el-button @click="channelChange(-config.channels)"> 填满 </el-button>
+          <span class="ml-5">当前轨道：{{ config.channels }}</span>
+        </p>
+        <p class="flex">
+          <el-input
+            v-model="danmuMsg"
+            type="text"
+            placeholder="输入评论后，回车发送弹幕"
+            @keyup.enter="addDanmu"
+          />
+        </p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<style lang="scss" scoped>
+.demo {
+  flex: 1;
+  height: 600px;
+  background: linear-gradient(45deg, #5ac381, #20568b);
+
+  .danmu-item {
+    display: flex;
+    align-items: center;
+
+    .img {
+      width: 25px;
+      height: 25px;
+      margin-right: 5px;
+      border-radius: 50%;
+    }
+  }
+}
+
+.main {
+  flex: 1;
+
+  p {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/able/debounce.vue b/Yi.Pure.Vue3/src/views/able/debounce.vue
new file mode 100644
index 00000000..71d5be11
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/debounce.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { message } from "@/utils/message";
+import { debounce, throttle } from "@pureadmin/utils";
+
+defineOptions({
+  name: "Debounce"
+});
+
+const handle = () => message("恭喜你，这是一条成功消息", { type: "success" });
+
+const immediateDebounce = debounce(handle, 1000, true);
+
+const debounceClick = debounce(handle, 1000);
+
+const throttleClick = throttle(handle);
+</script>
+
+<template>
+  <div>
+    <el-card class="mb-5" shadow="never">
+      <template #header>
+        <p class="font-medium">防抖：debounce</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/debounce.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/debounce.vue
+        </el-link>
+      </template>
+      <div class="mb-5">
+        所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
+        秒内又触发了事件，则会重新计算函数执行时间。
+      </div>
+      <el-button @click="immediateDebounce">
+        连续点击我，只会执行第一次点击事件，立即执行
+      </el-button>
+      <el-button @click="debounceClick">
+        连续点击我，只会执行最后一次点击事件，延后执行
+      </el-button>
+    </el-card>
+    <el-card shadow="never">
+      <template #header>
+        <div class="font-medium">节流：throttle</div>
+      </template>
+      <div class="mb-5">
+        所谓节流，就是指连续触发事件但是在 n
+        秒中只执行一次函数。节流会稀释函数的执行频率。
+      </div>
+      <el-button @click="throttleClick">
+        连续点击我，每一秒只会执行一次点击事件
+      </el-button>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/directives.vue b/Yi.Pure.Vue3/src/views/able/directives.vue
new file mode 100644
index 00000000..0ed0d1af
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/directives.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+
+defineOptions({
+  name: "Directives"
+});
+
+const search = ref("");
+const searchTwo = ref("");
+const searchThree = ref("");
+const searchFour = ref("");
+const searchFive = ref("");
+const searchSix = ref("copy");
+const text = ref("可复制的文本");
+const long = ref(false);
+const cbText = ref("");
+const idx = ref(0);
+
+function onInput() {
+  message(search.value);
+}
+function onInputTwo() {
+  message(searchTwo.value);
+}
+function onInputThree({ name, sex }) {
+  message(`${name}${sex}${searchThree.value}`);
+}
+
+function onInputFour() {
+  message(searchFour.value);
+}
+function onInputFive({ name, sex }) {
+  message(`${name}${sex}${searchFive.value}`);
+}
+
+function onLongpress() {
+  long.value = true;
+}
+function onCustomLongpress() {
+  long.value = true;
+}
+function onCbLongpress() {
+  idx.value += 1;
+  long.value = true;
+  cbText.value = `持续回调${idx.value}次`;
+}
+function onReset() {
+  long.value = false;
+  cbText.value = "";
+  idx.value = 0;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">自定义防抖、截流、文本复制、长按指令</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/directives.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/directives.vue
+        </el-link>
+      </div>
+    </template>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行第一次点击事件，立即执行）
+      <el-input
+        v-model="search"
+        v-optimize="{
+          event: 'input',
+          fn: onInput,
+          immediate: true,
+          timeout: 1000
+        }"
+        class="!w-[200px]"
+        clearable
+        @clear="onInput"
+      />
+    </div>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行最后一次事件，延后执行）
+      <el-input
+        v-model="searchTwo"
+        v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      防抖指令（连续输入，只会执行最后一次事件，延后执行，传参用法）
+      <el-input
+        v-model="searchThree"
+        v-optimize="{
+          event: 'input',
+          fn: onInputThree,
+          timeout: 400,
+          params: { name: '小明', sex: '男' }
+        }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      节流指令（连续输入，每一秒只会执行一次事件）
+      <el-input
+        v-model="searchFour"
+        v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      节流指令（连续输入，每一秒只会执行一次事件，传参用法）
+      <el-input
+        v-model="searchFive"
+        v-optimize:throttle="{
+          event: 'input',
+          fn: onInputFive,
+          params: { name: '小明', sex: '男' }
+        }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      文本复制指令（双击输入框内容即可复制）
+      <el-input v-model="searchSix" v-copy="searchSix" class="!w-[200px]" />
+    </div>
+    <div>
+      文本复制指令（自定义触发事件，单击复制）
+      <span v-copy:click="text" class="text-sky-500">{{ text }}</span>
+    </div>
+
+    <el-divider />
+    <el-space wrap>
+      长按指令
+      <el-button v-longpress="onLongpress">长按（默认500ms）</el-button>
+      <el-button v-longpress:1000="onCustomLongpress">
+        自定义长按时长（1000ms）
+      </el-button>
+      <el-button v-longpress:2000:200="onCbLongpress">
+        2秒后每200ms持续回调
+      </el-button>
+      <el-button @click="onReset"> 重置状态 </el-button>
+      <el-tag :type="long ? 'success' : 'info'" class="ml-2" size="large">
+        {{ long ? "当前为长按状态" : "当前非长按状态" }}
+      </el-tag>
+      <el-tag v-if="cbText" type="danger" class="ml-2" size="large">
+        {{ cbText }}
+      </el-tag>
+    </el-space>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/download.vue b/Yi.Pure.Vue3/src/views/able/download.vue
new file mode 100644
index 00000000..b1a0d2e0
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/download.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {
+  downloadByOnlineUrl,
+  downloadByBase64,
+  downloadByData,
+  downloadByUrl
+} from "@pureadmin/utils";
+import axios from "axios";
+
+defineOptions({
+  name: "Download"
+});
+
+const base64 =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALEAAAAwCAYAAABexZu4AAAAAXNSR0IArs4c6QAAC5pJREFUeF7tnQ9wFNUdx7+/vQQsiOb2orHyp0JuQ/1TpFVbS+2I7RS1aqdlKu2oU2WqQvbQFmtrO7QFpp22U0ZhgNuQInXa6rTFKo5oi3XGPzNqiwIWBDTZS2Boi8aQDQxYId7tr/M2CZNc7u69vdtLLrI7k2GG/b3fe+/3Pvu737597/cIRVw1ydaZEWAmE13MwEwCojj5R+PA/B4IxwA6RuD3uPff3UzYRhneU/X++7s7vn/xe0VUHRYJLTDEAqRqk5qV+2q0senbANwKYKZquVxyBHQy0eNw+XEnYfy9FF0jWbZmjT1bVv/hu4wXZDK57st0V42pbjm04Ly3i9FdzjKnr7bPqiJcWKiOYm2ST6cSxHqyZRkocivA5wVvAH7NMRs+raR34+4xNR1jZ1VrJ7Z1Ji46plSmTEJRy36eACnEbgZX+R00Vd2OaSiNX5lMkFOtbtksq4+BF7pN4yqZnOr9gkbQ19uT8AEeAHCjqkLfckRvOI3xGYXKCa+kRehegL8A4CN9sq8A2qOOWb/Kd50BFFAFLYR4qLGHDWLdap0P0G8DGO+CKgi0rsuMN+YTija1XU/sbs6rhPmPTqLhpnK3M1t/CHFui1eMJ44lW29jooeGAwwm3NLdaDySq67aDZ0T3BOH3wJwbqG2cET7fPeC+peGo739dYQQVzDEsWTbZUzuq8MFhEvpqYcbz9+fqz49aX8bhAcV2rLBMY3bFeQCEwkhrlCI61bsHN8zftyLBFwS2GgXVrTHMY2L8onoVmszQHcqtKWwnnX2BewiKdNDGhLOQmOvTE7cDyGuUIhjVurHDP6ZyiAGJFPQg+pW6jGA58rrYscxG2L55HpfDPG8TI+fl7AQ4gqEONrcdialM6+DaKpssIfcJ7wFF7tAfICAA3DpgKtpaWL3HCLUMXMdiOoYqBs0LcW43UkYG/LVF2tKLWLmNdL2SF7uQoilFgxMYERf7HTL/i6Alb56w+5ykLbFMY1/+innQaW5s92eMasOL556OF/ZM9fan9I0vELA2IL6JQ9DCLGf0SlNduQg3sgR/VDbDoALztcO6p6GC1Xjx1LMEk3avyTCDwvoeMYxjWsK1RFCXMoI+Cs7YhDH1rXNZdd9TLW5THRFd2P8ZVX5UuV6vxhqS7P1EOORyJjI9969Y1pHCHGpVg6m/IhBHG1K/ZyYl6h0g4AlXabxCxXZIGX0ZOoaBl8JwuXE2A7CVsc0HlWpI/TEKlYKRmbEINYt+xkAc2TdYGB7t2lcKpOrtPshxMM3IiMD8VLW9LqUWEzTvyYhb48ZtKDbjP9m+EwSTE0hxMHYUUVLMRDrydQsIDOHNS1GzLUgisHlQwy0E1O7y2gvtIiKate1Xeq67msKDTzomMZEBbnARHx8/p6XK7Q4e317XbonczFAM0C8opSG9aRx9rG7jc5+HZU4TxxN2kkQLijUTw042mUaX5HZQvRPJkPsvugkpi8bKKcKcSRSfZObPrGASbuZgLisLoB2gTObsusT5Uh1ao2AzSqdlzdGXSLfC90QDewu7+9cbfP+j3Km56cswAXE3+nqNeaXzP4QUokQqwAkeqiyhFNFV67VaKrlVJax5hmNIV9nSU/aD4CwWDrQA0CRygYkUAzEymV8trEUiH1WBYpgqcogZ8OoAlAlQOzXHtnyDKS6TcPo/3+KJu3fEeFbMsVM2g3djfVPyeSCvK8M5IAHTLmMz4YWC7HPanyJn6oQ9xnpUcc05nnhRKzJ3syM62XW0zTtskML67cVkvMAKvJiihzMfmlUBjKE2LP6qeKJT3pgjW7tWhj/PelN9itgfFbGXkTTGjoX1tv55JSBK1DREM+S5yNHoZhYb7KXglH0w5SveaEnHmqZYmNiGWs+7j/nmMYXSbdSLQA3yApWE9V1NMbfDSHutYDqi53MrqXcP8XDiV7TMV0rZicOAci7jLHfyHoap6XuNk5UPMSq3tsnPaEnDt4TE/A6AzuI+aWMS97GCNJwtWStzOCGMO4XEEt3p4pSThqnYRRALNqaa7u76nrifGxnT7aHnhgoIZz4mwb6ySEzvj2vU7TsbjGUCr5mJ+lWa5eYLpYJZ0/2Z8tXSkycqx8j+cVOZtdS7o/acEJhuja6ru3L5LpPq9iHopZtq3wxyUQQP7LAaKv0cCKEWD7sI/2xAwoQi17oVuurAF0m65EIJ8SC9s/IBDMuLjmyyNgRQuzzxY6wDK7rK8kJk3blh/pjhzLE9p8AfEPGpoD4rwCulQnK9p+F4URuC8rslquUarz9YQ4nej2xfT+Ae2RsUixpP8yEm2WCYLrXScSF0rxXvvxhKi9V3stjVlom5QdD8mSPZEwcQpwDF3VPrLRljqJW62oC3SWHuPhMO8ozICHE3jCEnriXxpjV8lWGtknGJil7O6DVMY3pMoW57ocQ+8uMGULcS5GebJ8DyogNGwUvqrVSl7jggmsi+jUU89PYF9uozUWHnjj0xANw1ZP210GQbkHz3pp1y/6vLN+ZkGOG1Z0wErInI/t+6IlDTzyICeWYuG0+4EqTWvZBrJYuihmdFMFsv1v1Q4hDiIuCONn6HRBJU/d6EEct+xYC/qDoYQvmPQtj4sEWKCYEC2Pi/hc7tbRqHsQ1a/d+TNOqc2amzAWl3yTJoSeuLE9M5E7qapwuQsi8l8qYFb12QjGciFn2DgY+KXOuJ78kRS17LQHK8a7ogKZpa7oW1j8uq0TFIEJHueaJo02pz4mVUrJ2QpIOa2B5VW85zJ5Y7FofL+unSptUxqycEOtrW78EjVTOczl6EmJ9tX0BqrDV/8ZKeo3ALQzaT8StYPdthhZlUBTgKBhTiGDKDFtOiGut9ukuMiJZt+wSCVkulwn1hWAVd2aHbqX2qZ2rQiscM/6DfP3Um+yrwdgis0MpEFf/7/iKQidoKe/9BHYO+qYfs+xfMXCfrPHlul8uTzyhuaW2OqOd3G4vaf/LGvBrYtrbmYinvHNLTmCys8j4R+V7YrUFM14/2F2uRaqeihw99qY77owJGUqLQ4XEAyyS6EiXIXgqchwgo+LB++x4kEBPZjL8Z1Sl94tE67GmFpESYiKY5jNooRJnTM2DII6u2j2Fxpy2FeBzlBQELFQuiEUzfRg3d6+y4rhKDCdE3gnVX70ghq5EiINoAth1rxuyusrnTEUgDelXUmaIN5Z0CtRogFh2SE+go1WyJw6iNe2OadTnXCIYs+wEA2uDqMWPjnJCHLVSdxK42U97BsmOBoi9ROnubhAmFd1PHwUrwBMvdkxjVd51rjHL/hEDw5r9spwQn/Hgv/WqnuNvqHyZzDmOowBiL2xqsheDvbMHy36NJMQMeqLbjH9NdLLwYYyWfaOXHUhhS3/JFmPe5CQaBp3Pobw4SXHeMdpk30yMh4tq6yiBuC/+Ly10GmggRgcIdbls5h9iehrg64qy/+BCe6BhXv+XY6UdB97T7eKeMv1MPZZJ474jdw/d+hQ0xN4AJ+05IIiE4v5ytI0iiAMC+TjAawESx8GJh2LI5R9izBNHVzBhCRgfLxLmQQBLPfHASsTB09URnktEwltKcxlLGriFiZ+PUOS5QlmF+hazi4Ma8x7G6K3nICRUE26LdkXXvPkJqqoSJ6beBHEojsqVBXHMsp9k4AZZUdkG21zlVXXL9sr1JYsUefamyNo54P4eAM8yIg91m9N2eZlFP8i8kxPiHAvCCs4CVWOyc4fxHxHaRXqO30HgbwKketj9QbC7Xqsa25x9MLuSJ87ugAB6rOZewRSZxuBpBExjwlkERAUj3p/3M8QdAL3DQAeBO5h4ezrjPnt00fldPoxaNtGalftqImN7ZgPa5Sz6AHh9AZAB0AJGi0gsThG84HfRU9kaXYRiXYSFvXPAE8E8EUTnEjCRAbHTvb03D3Bmnwt64nCi4V9FVFF0EW+5JTDL+5UXfy4me/+e5EfbC3L/kuHjzx0xZ4ht/EOu/wNFbO2YhmAeMQAAAABJRU5ErkJggg==";
+
+function down() {
+  axios
+    .get("https://xiaoxian521.github.io/hyperlink/img/pure.png", {
+      responseType: "blob"
+    })
+    .then(({ data }) => {
+      downloadByData(data, "test-data.png");
+    });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <p class="font-medium">文件下载功能</p>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/download.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/download.vue
+      </el-link>
+    </template>
+    <div class="flex flex-wrap">
+      <el-button
+        @click="
+          downloadByOnlineUrl(
+            'https://xiaoxian521.github.io/hyperlink/img/pure.png',
+            'test-url.png'
+          )
+        "
+      >
+        下载在线图片
+      </el-button>
+
+      <el-button @click="downloadByBase64(base64, 'test-base64.png')">
+        基于 base64 下载图片
+      </el-button>
+
+      <el-button
+        @click="
+          downloadByUrl(
+            'https://github.com/xiaoxian521/xiaoxian521/archive/refs/heads/main.zip',
+            'xiaoxian521.zip'
+          )
+        "
+      >
+        根据文件地址下载文件
+      </el-button>
+
+      <el-button @click="down"> 根据后台接口文件流下载 </el-button>
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/draggable.vue b/Yi.Pure.Vue3/src/views/able/draggable.vue
new file mode 100644
index 00000000..7da87fa7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/draggable.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import Sortable, { Swap } from "sortablejs";
+import draggable from "vuedraggable/src/vuedraggable";
+import { useAppStoreHook } from "@/store/modules/app";
+
+defineOptions({
+  name: "Draggable"
+});
+
+const { setSortSwap } = useAppStoreHook();
+
+const gridLists = ref<Array<Object>>([
+  { grid: "cn", num: 1 },
+  { grid: "cn", num: 2 },
+  { grid: "cn", num: 3 },
+  { grid: "cn", num: 4 },
+  { grid: "cn", num: 5 },
+  { grid: "cn", num: 6 },
+  { grid: "cn", num: 7 },
+  { grid: "cn", num: 8 },
+  { grid: "cn", num: 9 }
+]);
+
+const lists = ref<Array<Object>>([
+  { people: "cn", id: 1, name: "www.itxst.com" },
+  { people: "cn", id: 2, name: "www.baidu.com" },
+  { people: "cn", id: 3, name: "www.taobao.com" },
+  { people: "cn", id: 4, name: "www.google.com" }
+]);
+
+const cutLists = ref([
+  { people: "cn", id: 1, name: "cut1" },
+  { people: "cn", id: 2, name: "cut2" },
+  { people: "cn", id: 3, name: "cut3" },
+  { people: "cn", id: 4, name: "cut4" }
+]);
+
+const change = (evt): void => {
+  console.log("evt: ", evt);
+};
+
+onMounted(() => {
+  if (!useAppStoreHook().sortSwap) Sortable.mount(new Swap());
+  setSortSwap(true);
+  new Sortable(document.querySelector(".cut-container"), {
+    swap: true,
+    forceFallback: true,
+    chosenClass: "chosen",
+    swapClass: "highlight",
+    animation: 300
+  });
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          拖拽组件，采用开源的
+          <el-link
+            href="https://sortablejs.github.io/vue.draggable.next/#/simple"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vuedraggable
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/draggable.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/draggable.vue
+      </el-link>
+    </template>
+    <div class="drag-container">
+      <!-- grid列表拖拽 -->
+      <el-row :gutter="25">
+        <el-col :xs="25" :sm="8" :md="8" :lg="8">
+          <el-card shadow="never">
+            <template #header>
+              <div class="card-header">
+                <span>grid列表拖拽</span>
+              </div>
+            </template>
+            <draggable
+              v-model="gridLists"
+              class="grid-container"
+              item-key="grid"
+              animation="300"
+              chosenClass="chosen"
+              forceFallback="true"
+            >
+              <template #item="{ element }">
+                <div :class="'item' + ' ' + 'item-' + element.num">
+                  {{ element.num }}
+                </div>
+              </template>
+            </draggable>
+          </el-card>
+        </el-col>
+
+        <el-col :xs="25" :sm="8" :md="8" :lg="8">
+          <el-card shadow="never">
+            <template #header>
+              <div class="card-header">
+                <span>单列拖拽</span>
+              </div>
+            </template>
+            <!-- 单列拖拽 -->
+            <draggable
+              v-model="lists"
+              item-key="name"
+              chosen-class="chosen"
+              force-fallback="true"
+              animation="300"
+              @change="change"
+            >
+              <template #item="{ element, index }">
+                <div class="item-single">{{ element.name }} {{ index }}</div>
+              </template>
+            </draggable>
+          </el-card>
+        </el-col>
+
+        <el-col :xs="25" :sm="8" :md="8" :lg="8">
+          <el-card shadow="never">
+            <template #header>
+              <div class="card-header">
+                <span>拖拽实现元素位置交换</span>
+              </div>
+            </template>
+            <!-- 拖拽实现元素位置切换 -->
+            <div class="cut-container">
+              <div
+                v-for="(item, index) in cutLists"
+                :key="index"
+                class="item-cut"
+              >
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+/* grid列表拖拽 */
+.grid-container {
+  display: grid;
+  grid-template-rows: 33.3% 33.3% 33.3%;
+  grid-template-columns: 33.3% 33.3% 33.3%;
+}
+
+.item-single {
+  height: 77px;
+  font-size: 1.5em;
+  line-height: 85px;
+  text-align: center;
+  cursor: move;
+  border: 1px solid #e5e4e9;
+}
+
+.item-cut {
+  height: 77px;
+  font-size: 1.5em;
+  line-height: 77px;
+  text-align: center;
+  cursor: move;
+  border: 1px solid #e5e4e9;
+}
+
+.item {
+  font-size: 2em;
+  line-height: 100px;
+  text-align: center;
+  cursor: move;
+  border: 1px solid #e5e4e9;
+
+  @media screen and (width <= 750px) {
+    line-height: 90px;
+  }
+}
+
+.item-1 {
+  background-color: #ef342a;
+}
+
+.item-2 {
+  background-color: #f68f26;
+}
+
+.item-3 {
+  background-color: #4ba946;
+}
+
+.item-4 {
+  background-color: #0376c2;
+}
+
+.item-5 {
+  background-color: #c077af;
+}
+
+.item-6 {
+  background-color: #f8d29d;
+}
+
+.item-7 {
+  background-color: #b5a87f;
+}
+
+.item-8 {
+  background-color: #d0e4a9;
+}
+
+.item-9 {
+  background-color: #4dc7ec;
+}
+
+.chosen {
+  border: solid 2px #3089dc !important;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/able/excel.vue b/Yi.Pure.Vue3/src/views/able/excel.vue
new file mode 100644
index 00000000..3a8576a3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/excel.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { utils, writeFile } from "xlsx";
+
+defineOptions({
+  name: "Excel"
+});
+
+interface DataItem {
+  readonly id: string;
+  [propName: string]: string;
+}
+
+interface Columns {
+  dataKey: string;
+  key: string;
+  title: string;
+  width?: number;
+  [propName: string]: string | number;
+}
+
+const generateColumns = (length = 10, prefix = "column-", props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150
+  }));
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = "row-"
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
+        return rowData;
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null
+      }
+    );
+  });
+
+const columns = generateColumns(10);
+const data = generateData(columns, 1000);
+
+const exportExcel = () => {
+  const res: string[][] = data.map((item: DataItem) => {
+    const arr = [];
+    columns.forEach((column: Columns) => {
+      arr.push(item[column.dataKey]);
+    });
+    return arr;
+  });
+  const titleList: string[] = [];
+  columns.forEach((column: Columns) => {
+    titleList.push(column.title);
+  });
+  res.unshift(titleList);
+  const workSheet = utils.aoa_to_sheet(res);
+  const workBook = utils.book_new();
+  utils.book_append_sheet(workBook, workSheet, "数据报表");
+  writeFile(workBook, "tableV2.xlsx");
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/SheetJS/sheetjs"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          导出Excel
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/excel.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/excel.vue
+      </el-link>
+    </template>
+    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
+    <div class="h-[25rem] mt-3">
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <el-table-v2
+            :columns="columns"
+            :data="data"
+            :width="width"
+            :height="height"
+            fixed
+          />
+        </template>
+      </el-auto-resizer>
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/infinite-scroll.vue b/Yi.Pure.Vue3/src/views/able/infinite-scroll.vue
new file mode 100644
index 00000000..547b25d6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/infinite-scroll.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
+
+defineOptions({
+  name: "InfiniteScroll"
+});
+
+const dataTemplate = new Array(10).fill({
+  date: "2022-08-24",
+  name: "RealityBoy",
+  age: "18"
+});
+
+const data = ref([]);
+const page = ref(0);
+const total = ref(10);
+const isBottom = ref(false);
+
+const load = () => {
+  if (isBottom.value) return;
+
+  page.value++;
+  if (page.value <= total.value) {
+    data.value = data.value.concat(dataTemplate);
+  }
+
+  if (page.value === total.value) {
+    isBottom.value = true;
+  }
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/yujinpan/el-table-infinite-scroll"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          表格无限滚动
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/infinite-scroll.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/infinite-scroll.vue
+      </el-link>
+    </template>
+    <p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
+    <el-table
+      v-el-table-infinite-scroll="load"
+      border
+      height="435px"
+      :data="data"
+      :infinite-scroll-disabled="isBottom"
+    >
+      <el-table-column width="80" type="index" label="序号" />
+      <el-table-column prop="date" label="日期" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="age" label="年龄" />
+    </el-table>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/line-tree.vue b/Yi.Pure.Vue3/src/views/able/line-tree.vue
new file mode 100644
index 00000000..c7ca3d9e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/line-tree.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { clone } from "@pureadmin/utils";
+import { transformI18n } from "@/plugins/i18n";
+import ElTreeLine from "@/components/ReTreeLine";
+import { extractPathList, deleteChildren } from "@/utils/tree";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+defineOptions({
+  name: "LineTree"
+});
+
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
+const menusData = computed(() => {
+  return deleteChildren(menusTree);
+});
+const expandedKeys = extractPathList(menusData.value);
+const dataProps = {
+  value: "uniqueId",
+  children: "children"
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">
+          扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线
+        </p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/line-tree.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/line-tree.vue
+        </el-link>
+      </div>
+    </template>
+
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-header">普通树结构</div>
+          </template>
+          <div class="max-h-[550px] overflow-y-auto">
+            <el-tree
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              default-expand-all
+              node-key="uniqueId"
+              :indent="30"
+              ><template v-slot:default="{ node }">
+                <el-tree-line :node="node" :showLabelLine="true">
+                  <template v-slot:node-label>
+                    <span class="text-sm">
+                      {{ transformI18n(node.data.meta.title) }}
+                    </span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-header">虚拟树结构</div>
+          </template>
+          <div class="max-h-[550px] overflow-y-auto">
+            <el-tree-v2
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              :height="550"
+              :default-expanded-keys="expandedKeys"
+            >
+              <template v-slot:default="{ node }">
+                <el-tree-line
+                  :node="node"
+                  :treeData="menusData"
+                  :showLabelLine="true"
+                  :indent="30"
+                >
+                  <template v-slot:node-label>
+                    <span class="text-sm">
+                      {{ transformI18n(node.data.meta.title) }}
+                    </span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree-v2>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/map.vue b/Yi.Pure.Vue3/src/views/able/map.vue
new file mode 100644
index 00000000..a528eb62
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/map.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Amap } from "@/components/ReMap";
+
+defineOptions({
+  name: "MapPage"
+});
+</script>
+
+<template>
+  <Amap />
+</template>
+
+<style scoped>
+.main-content {
+  margin: 2px 0 0 !important;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/able/menu-tree.vue b/Yi.Pure.Vue3/src/views/able/menu-tree.vue
new file mode 100644
index 00000000..5dfde79e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/menu-tree.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { clone } from "@pureadmin/utils";
+import type { ElTreeV2 } from "element-plus";
+import { transformI18n } from "@/plugins/i18n";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { extractPathList, deleteChildren } from "@/utils/tree";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
+import NodeTree from "@iconify-icons/ri/node-tree";
+
+defineOptions({
+  name: "MenuTree"
+});
+
+interface treeNode extends TreeNode {
+  meta: {
+    title: string;
+  };
+}
+
+const query = ref("");
+const dataProps = ref({
+  value: "uniqueId",
+  children: "children"
+});
+const treeRef = ref<InstanceType<typeof ElTreeV2>>();
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
+
+const menusData = computed(() => {
+  return deleteChildren(menusTree);
+});
+
+const expandedKeys = extractPathList(menusData.value);
+
+const onQueryChanged = (query: string) => {
+  (treeRef as any).value!.filter(query);
+};
+
+const filterMethod = (query: string, node: treeNode) => {
+  return transformI18n(node.meta.title)!.indexOf(query) !== -1;
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          菜单树结构（采用 Element Plus 的
+          <el-link
+            href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
+            target="_blank"
+            :icon="useRenderIcon(NodeTree)"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            Tree V2
+          </el-link>
+          组件并支持国际化）
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/menu-tree.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/menu-tree.vue
+      </el-link>
+    </template>
+    <el-input
+      v-model="query"
+      class="mb-4"
+      placeholder="请输入关键字查找"
+      clearable
+      @input="onQueryChanged"
+    />
+    <el-tree-v2
+      ref="treeRef"
+      :data="menusData"
+      :props="dataProps"
+      show-checkbox
+      :height="500"
+      :filter-method="filterMethod"
+      :default-expanded-keys="expandedKeys"
+    >
+      <template #default="{ data }">
+        <span>{{ transformI18n(data.meta.title) }}</span>
+      </template>
+    </el-tree-v2>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/mqtt-client.vue b/Yi.Pure.Vue3/src/views/able/mqtt-client.vue
new file mode 100644
index 00000000..16d8606e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/mqtt-client.vue
@@ -0,0 +1,400 @@
+<script setup lang="ts">
+// vue 3 + vite use MQTT.js refer to https://github.com/mqttjs/MQTT.js/issues/1269
+import * as mqtt from "mqtt/dist/mqtt.min";
+import { reactive, ref, onUnmounted } from "vue";
+
+const protocol = location.protocol === "https:" ? "wss" : "ws";
+const port = protocol === "wss" ? 8084 : 8083;
+
+// https://github.com/mqttjs/MQTT.js#qos
+const qosList = [0, 1, 2];
+
+const connection = reactive({
+  protocol,
+  host: "broker.emqx.io",
+  port,
+  clientId: "emqx_vue3_" + Math.random().toString(16).substring(2, 8),
+  username: "emqx_test",
+  password: "emqx_test",
+  clean: true,
+  connectTimeout: 30 * 1000, // ms
+  reconnectPeriod: 4000 // ms
+  // for more options and details, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
+});
+
+// 订阅 topic/mqttx 主题
+const subscription = ref({
+  topic: "topic/mqttx",
+  qos: 0 as any
+});
+
+// 发布 topic/browser 主题
+const publish = ref({
+  topic: "topic/browser",
+  qos: 0 as any,
+  payload: '{ "msg": "Hello, I am browser." }'
+});
+
+let client = ref({
+  connected: false
+} as mqtt.MqttClient);
+
+const receivedMessages = ref("");
+const subscribedSuccess = ref(false);
+const btnLoadingType = ref("");
+const retryTimes = ref(0);
+
+const initData = () => {
+  client.value = {
+    connected: false
+  } as mqtt.MqttClient;
+  retryTimes.value = 0;
+  btnLoadingType.value = "";
+  subscribedSuccess.value = false;
+};
+
+const handleOnReConnect = () => {
+  retryTimes.value += 1;
+  if (retryTimes.value > 5) {
+    try {
+      client.value.end();
+      initData();
+      console.log("connection maxReconnectTimes limit, stop retry");
+    } catch (error) {
+      console.log("handleOnReConnect catch error:", error);
+    }
+  }
+};
+
+const createConnection = () => {
+  try {
+    btnLoadingType.value = "connect";
+    const { protocol, host, port, ...options } = connection;
+    const connectUrl = `${protocol}://${host}:${port}/mqtt`;
+    // 连接MQTT 服务器
+    client.value = mqtt.connect(connectUrl, options);
+
+    if (client.value.on) {
+      // https://github.com/mqttjs/MQTT.js#event-connect
+      client.value.on("connect", () => {
+        btnLoadingType.value = "";
+        console.log("connection successful");
+      });
+
+      // https://github.com/mqttjs/MQTT.js#event-reconnect
+      client.value.on("reconnect", handleOnReConnect);
+
+      // https://github.com/mqttjs/MQTT.js#event-error
+      client.value.on("error", error => {
+        console.log("connection error:", error);
+      });
+
+      // https://github.com/mqttjs/MQTT.js#event-message
+      client.value.on("message", (topic: string, message) => {
+        receivedMessages.value = receivedMessages.value.concat(
+          message.toString()
+        );
+        console.log(`received message: ${message} from topic: ${topic}`);
+      });
+    }
+  } catch (error) {
+    btnLoadingType.value = "";
+    console.log("mqtt.connect error:", error);
+  }
+};
+
+// subscribe topic
+// https://github.com/mqttjs/MQTT.js#mqttclientsubscribetopictopic-arraytopic-object-options-callback
+const doSubscribe = () => {
+  btnLoadingType.value = "subscribe";
+  const { topic, qos } = subscription.value;
+  client.value.subscribe(
+    topic,
+    { qos },
+    (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
+      btnLoadingType.value = "";
+      if (error) {
+        console.log("subscribe error:", error);
+        return;
+      }
+      subscribedSuccess.value = true;
+      console.log("subscribe successfully:", granted);
+    }
+  );
+};
+
+// unsubscribe topic
+// https://github.com/mqttjs/MQTT.js#mqttclientunsubscribetopictopic-array-options-callback
+const doUnSubscribe = () => {
+  btnLoadingType.value = "unsubscribe";
+  const { topic, qos } = subscription.value;
+  client.value.unsubscribe(topic, { qos }, error => {
+    btnLoadingType.value = "";
+    subscribedSuccess.value = false;
+    if (error) {
+      console.log("unsubscribe error:", error);
+      return;
+    }
+    console.log(`unsubscribed topic: ${topic}`);
+  });
+};
+
+// publish message
+// https://github.com/mqttjs/MQTT.js#mqttclientpublishtopic-message-options-callback
+const doPublish = () => {
+  btnLoadingType.value = "publish";
+  const { topic, qos, payload } = publish.value;
+  client.value.publish(topic, payload, { qos }, error => {
+    btnLoadingType.value = "";
+    if (error) {
+      console.log("publish error:", error);
+      return;
+    }
+    console.log(`published message: ${payload}`);
+  });
+};
+
+// disconnect
+// https://github.com/mqttjs/MQTT.js#mqttclientendforce-options-callback
+const destroyConnection = () => {
+  if (client.value.connected) {
+    btnLoadingType.value = "disconnect";
+    try {
+      client.value.end(false, () => {
+        initData();
+        console.log("disconnected successfully");
+      });
+    } catch (error) {
+      btnLoadingType.value = "";
+      console.log("disconnect error:", error);
+    }
+  }
+};
+
+const handleProtocolChange = (value: string) => {
+  connection.port = value === "wss" ? 8084 : 8083;
+};
+
+onUnmounted(() => {
+  try {
+    if (client.value.end) {
+      client.value.end();
+      console.log("disconnected successfully");
+    }
+  } catch (error) {
+    console.log(error);
+  }
+});
+</script>
+
+<template>
+  <el-card shadow="never" :body-style="{ padding: '20px' }">
+    <template #header>
+      <div>
+        基于
+        <el-link
+          type="primary"
+          :underline="false"
+          href="https://github.com/mqttjs/MQTT.js"
+          target="_blank"
+        >
+          MQTT.js
+        </el-link>
+        和 免费的公共MQTT代理
+        <el-link
+          type="primary"
+          :underline="false"
+          href="broker.emqx.io"
+          target="_blank"
+        >
+          EMQX
+        </el-link>
+        实现的一套 MQTT 客户端
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/mqtt-client.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/mqtt-client.vue
+      </el-link>
+    </template>
+
+    <el-card shadow="never">
+      <h1>设置</h1>
+      <el-form label-position="top" :model="connection">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item prop="protocol" label="协议">
+              <el-select
+                v-model="connection.protocol"
+                @change="handleProtocolChange"
+              >
+                <el-option label="ws://" value="ws" />
+                <el-option label="wss://" value="wss" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="host" label="主机">
+              <el-input v-model="connection.host" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="port" label="端口">
+              <el-input
+                v-model.number="connection.port"
+                type="number"
+                placeholder="8083/8084"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="clientId" label="客户端ID">
+              <el-input v-model="connection.clientId" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="username" label="用户名">
+              <el-input v-model="connection.username" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="password" label="密码">
+              <el-input v-model="connection.password" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-button
+              type="primary"
+              :disabled="client.connected"
+              :loading="btnLoadingType === 'connect'"
+              @click="createConnection"
+            >
+              {{ client.connected ? "已连接" : "连接" }}
+            </el-button>
+
+            <el-button
+              v-if="client.connected"
+              type="danger"
+              :loading="btnLoadingType === 'disconnect'"
+              @click="destroyConnection"
+            >
+              断开连接
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <el-card shadow="never" class="mt-4">
+      <h1>订阅</h1>
+      <el-form label-position="top" :model="subscription">
+        <el-row :gutter="20" :align="'middle'">
+          <el-col :span="8">
+            <el-form-item prop="topic" label="主题">
+              <el-input
+                v-model="subscription.topic"
+                :disabled="subscribedSuccess"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="qos" label="通信质量">
+              <el-select
+                v-model="subscription.qos"
+                :disabled="subscribedSuccess"
+              >
+                <el-option
+                  v-for="qos in qosList"
+                  :key="qos"
+                  :label="qos"
+                  :value="qos"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-button
+              type="primary"
+              class="sub-btn"
+              :loading="btnLoadingType === 'subscribe'"
+              :disabled="!client.connected || subscribedSuccess"
+              @click="doSubscribe"
+            >
+              {{ subscribedSuccess ? "已订阅" : "订阅" }}
+            </el-button>
+            <el-button
+              v-if="subscribedSuccess"
+              type="primary"
+              class="sub-btn"
+              :loading="btnLoadingType === 'unsubscribe'"
+              :disabled="!client.connected"
+              @click="doUnSubscribe"
+            >
+              取消订阅
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <el-card shadow="never" class="mt-4">
+      <h1>发布</h1>
+      <el-form label-position="top" :model="publish">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item prop="topic">
+              <template #label>
+                <span>主题</span>
+                <el-text type="info" size="small">
+                  可将订阅主题设置为topic/browser，测试MQTT的自发自收。
+                </el-text>
+              </template>
+              <el-input v-model="publish.topic" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="payload" label="有效载荷">
+              <el-input v-model="publish.payload" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="qos" label="通信质量">
+              <el-select v-model="publish.qos">
+                <el-option
+                  v-for="qos in qosList"
+                  :key="qos"
+                  :label="qos"
+                  :value="qos"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-col :span="24">
+        <el-button
+          type="primary"
+          :loading="btnLoadingType === 'publish'"
+          :disabled="!client.connected"
+          @click="doPublish"
+        >
+          发布
+        </el-button>
+      </el-col>
+    </el-card>
+    <el-card shadow="never" class="mt-4">
+      <h1>接收</h1>
+      <el-col :span="24">
+        <el-input
+          v-model="receivedMessages"
+          type="textarea"
+          :rows="3"
+          readonly
+        />
+      </el-col>
+    </el-card>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/pdf.vue b/Yi.Pure.Vue3/src/views/able/pdf.vue
new file mode 100644
index 00000000..70b4f7fc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/pdf.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import VuePdfEmbed from "vue-pdf-embed";
+
+defineOptions({
+  name: "Pdf"
+});
+
+const { t } = useI18n();
+const pdfRef = ref<any>();
+const pageCount = ref(1);
+const loading = ref(true);
+const currentPage = ref(1);
+const currentRotation = ref(0);
+const showAllPages = ref(false);
+const rotations = [0, 90, 180, 270];
+
+const source =
+  "https://xiaoxian521.github.io/hyperlink/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
+
+const handleDocumentRender = () => {
+  loading.value = false;
+  pageCount.value = pdfRef.value.doc.numPages;
+};
+
+const showAllPagesChange = () => {
+  currentPage.value = showAllPages.value ? null : 1;
+};
+
+const onPrint = () => {
+  // 如果在打印时，打印页面是本身的两倍，在打印配置 页面 设置 仅限页码为奇数的页面 即可
+  pdfRef.value.print();
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/hrynko/vue-pdf-embed"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          PDF预览
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/pdf.vue
+      </el-link>
+    </template>
+    <div
+      v-loading="loading"
+      class="h-[calc(100vh-295px)]"
+      :element-loading-text="t('status.pureLoad')"
+    >
+      <div class="flex justify-between items-center h-9">
+        <div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
+          共{{ pageCount }}页
+        </div>
+        <div v-else>
+          <el-pagination
+            v-model:current-page="currentPage"
+            background
+            layout="prev, slot, next"
+            :page-size="1"
+            :total="pageCount"
+          >
+            {{ currentPage }} / {{ pageCount }}
+          </el-pagination>
+        </div>
+        <div class="w-[170px] flex-bc">
+          <el-checkbox v-model="showAllPages" @change="showAllPagesChange">
+            显示所有页面
+          </el-checkbox>
+          <IconifyIconOnline
+            v-tippy="{
+              maxWidth: 'none',
+              content: `翻转（当前角度${rotations[currentRotation]}度）`
+            }"
+            icon="ic:baseline-rotate-90-degrees-ccw"
+            class="cursor-pointer outline-transparent"
+            @click="
+              currentRotation === 3
+                ? (currentRotation = 0)
+                : (currentRotation += 1)
+            "
+          />
+          <IconifyIconOnline
+            v-tippy="{
+              maxWidth: 'none',
+              content: '打印'
+            }"
+            icon="ri:printer-line"
+            class="cursor-pointer outline-transparent"
+            @click="onPrint"
+          />
+        </div>
+      </div>
+      <el-scrollbar>
+        <vue-pdf-embed
+          ref="pdfRef"
+          class="h-full container overflow-auto"
+          :rotation="rotations[currentRotation]"
+          :page="currentPage"
+          :source="source"
+          @rendered="handleDocumentRender"
+        />
+      </el-scrollbar>
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/pinyin.vue b/Yi.Pure.Vue3/src/views/able/pinyin.vue
new file mode 100644
index 00000000..52588c5a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/pinyin.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { html } from "pinyin-pro";
+
+defineOptions({
+  name: "Pinyin"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">汉语拼音</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pinyin.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/pinyin.vue
+        </el-link>
+      </div>
+    </template>
+    <p v-html="html('带 音 调')" />
+    <p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
+    <p class="mt-2 custom" v-html="html('自 定 义 样 式')" />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.custom {
+  /* 汉字的样式 */
+  :deep(.py-chinese-item) {
+    color: #409eff;
+  }
+
+  /* 拼音的样式 */
+  :deep(.py-pinyin-item) {
+    color: #f56c6c;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/able/print/index.vue b/Yi.Pure.Vue3/src/views/able/print/index.vue
new file mode 100644
index 00000000..de1d1d45
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/print/index.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Print from "@/utils/print";
+import pieChart from "./pieChart.vue";
+
+defineOptions({
+  name: "Print"
+});
+
+interface User {
+  date: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const value = ref("1");
+
+const options = [
+  {
+    value: "1",
+    el: ".el-table",
+    label: "Table"
+  },
+  {
+    value: "2",
+    el: ".echart",
+    label: "Echart"
+  },
+  {
+    value: "3",
+    el: ".img",
+    label: "Image"
+  }
+];
+
+function onPrint() {
+  const el = options.filter(v => v.value === value.value)[0]?.el;
+  Print(el).toPrint;
+}
+
+const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
+  if (rowIndex === 1) {
+    return "warning-row";
+  } else if (rowIndex === 3) {
+    return "success-row";
+  }
+  return "";
+};
+
+const tableData: User[] = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">打印功能（报表、图表、图片）</span>
+        <el-select
+          v-model="value"
+          class="!w-[100px] mr-2"
+          placeholder="Select"
+          size="small"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-button size="small" type="primary" @click="onPrint">
+          打印
+        </el-button>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/print"
+        target="_blank"
+      >
+        代码位置 src/views/able/print
+      </el-link>
+    </template>
+    <el-row :gutter="24">
+      <el-col
+        v-motion
+        :xs="24"
+        :sm="24"
+        :md="24"
+        :lg="24"
+        :xl="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
+      >
+        <p class="font-medium text-lg text-center">Table</p>
+        <el-table
+          border
+          :data="tableData"
+          :row-class-name="tableRowClassName"
+          class="el-table w-full mt-[10px]"
+        >
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="age" label="age" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-col>
+
+      <el-col
+        v-motion
+        :xs="11"
+        :sm="11"
+        :md="11"
+        :lg="11"
+        :xl="11"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
+      >
+        <p class="font-medium text-lg text-center">Echart</p>
+        <pieChart class="echart mt-[10px]" />
+      </el-col>
+
+      <el-col
+        v-motion
+        :xs="11"
+        :sm="11"
+        :md="11"
+        :lg="11"
+        :xl="11"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
+      >
+        <p class="font-medium text-lg text-center">Image</p>
+        <img
+          src="https://pure-admin-utils.netlify.app/logo.png"
+          alt="avatars"
+          class="img mt-[10px] m-auto"
+        />
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-table__row.warning-row) {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+
+:deep(.el-table__row.success-row) {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/able/print/pieChart.vue b/Yi.Pure.Vue3/src/views/able/print/pieChart.vue
new file mode 100644
index 00000000..8354ed2e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/print/pieChart.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useDark, useECharts } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+const pieChartRef = ref();
+const { setOptions } = useECharts(pieChartRef, {
+  theme
+});
+
+setOptions({
+  tooltip: {
+    trigger: "item"
+  },
+  legend: {
+    icon: "circle",
+    //@ts-expect-error
+    right: true
+  },
+  series: [
+    {
+      name: "饼图",
+      type: "pie",
+      top: "20%",
+      radius: "80%",
+      center: ["40%", "50%"],
+      color: ["#e6a23c", "#f56c6c", "#53a7ff"],
+      data: [
+        { value: 400, name: "watchers" },
+        { value: 1600, name: "forks" },
+        { value: 7200, name: "star" }
+      ]
+    }
+  ]
+});
+</script>
+
+<template>
+  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/qrcode.vue b/Yi.Pure.Vue3/src/views/able/qrcode.vue
new file mode 100644
index 00000000..4be46969
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/qrcode.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { message } from "@/utils/message";
+import ReQrcode from "@/components/ReQrcode";
+
+defineOptions({
+  name: "QrCode"
+});
+
+const qrcodeText = "vue-pure-admin";
+
+const asyncTitle = ref("");
+setTimeout(() => {
+  asyncTitle.value = unref(qrcodeText);
+}, 3000);
+const codeClick = () => {
+  message("点击事件", { type: "info" });
+};
+const disabledClick = () => {
+  message("失效", { type: "info" });
+};
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="font-medium">
+          二维码（基于
+          <el-link
+            href="https://github.com/soldair/node-qrcode"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            qrcode
+          </el-link>
+          生成）
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/qrcode.vue
+        </el-link>
+      </template>
+      <el-row :gutter="20" justify="space-between">
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">基础用法</div>
+            <ReQrcode :text="qrcodeText" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">img标签</div>
+            <ReQrcode :text="qrcodeText" tag="img" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">样式配置</div>
+            <ReQrcode
+              :text="qrcodeText"
+              :options="{
+                color: {
+                  dark: '#55D187',
+                  light: '#2d8cf0'
+                }
+              }"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">点击事件</div>
+            <ReQrcode :text="qrcodeText" @click="codeClick" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">异步内容</div>
+            <ReQrcode :text="asyncTitle" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">失效</div>
+            <ReQrcode
+              :text="qrcodeText"
+              disabled
+              @disabled-click="disabledClick"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">logo配置</div>
+            <ReQrcode
+              :text="qrcodeText"
+              logo="https://avatars.githubusercontent.com/u/44761321?v=4"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">logo样式</div>
+            <ReQrcode
+              :text="qrcodeText"
+              :logo="{
+                src: 'https://avatars.githubusercontent.com/u/44761321?v=4',
+                logoSize: 0.2,
+                borderSize: 0.05,
+                borderRadius: 50,
+                bgColor: 'blue'
+              }"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">大小配置</div>
+            <ReQrcode :text="qrcodeText" :width="100" />
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/ripple.vue b/Yi.Pure.Vue3/src/views/able/ripple.vue
new file mode 100644
index 00000000..b7301920
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/ripple.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+defineOptions({
+  name: "Ripple"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <p class="font-medium">波纹(Ripple)</p>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/ripple.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/ripple.vue
+      </el-link>
+    </template>
+    <div class="mb-5">组件中的波纹</div>
+    <el-alert
+      title="v-ripple在某些组件中使用波纹特效会异常，这是因为v-ripple指令只能作用于当前元素，某些组件有多层元素嵌套，且目标元素没在顶层，所以会导致特效异常"
+      type="warning"
+      :closable="false"
+    />
+    <el-space wrap class="my-5">
+      <el-button v-ripple>Default</el-button>
+      <el-button v-ripple type="primary">Primary</el-button>
+      <el-button v-ripple type="success">Success</el-button>
+      <el-button v-ripple type="info">Info</el-button>
+      <el-button v-ripple type="warning">Warning</el-button>
+      <el-button v-ripple type="danger">Danger</el-button>
+    </el-space>
+    <el-card v-ripple class="mb-5 w-[510px] select-none" shadow="hover">
+      卡片
+    </el-card>
+
+    <div class="mb-5">
+      只要在组件或HTML元素上使用v-ripple指令，就可以启用基本的ripple功能
+    </div>
+    <div
+      v-ripple
+      class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
+    >
+      HTML元素
+    </div>
+    <span
+      v-ripple
+      class="inline-block shadow-md rounded-md p-8 text-lg select-none"
+    >
+      行内元素需要添加display: block或display: inline-block才能生效
+    </span>
+
+    <div class="my-5">
+      当使用v-ripple.center时，将始终从目标的中心处产生波纹
+    </div>
+    <div
+      v-ripple.center
+      class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
+    >
+      始终从中心触发波纹
+    </div>
+
+    <div class="mb-5">
+      使用v-ripple="{ class: '' }"添加类来自定义波纹颜色，支持tailwindcss
+    </div>
+    <el-alert
+      title="自定义样式生效为文字颜色，例如：color: 'red';"
+      type="warning"
+      :closable="false"
+    />
+    <div
+      v-ripple="{ class: 'text-red-500' }"
+      class="my-5 text-center shadow-md rounded-md p-4 text-lg select-none"
+    >
+      自定义波纹颜色
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/sensitive.vue b/Yi.Pure.Vue3/src/views/able/sensitive.vue
new file mode 100644
index 00000000..6b141622
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/sensitive.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Mint from "mint-filter";
+
+defineOptions({
+  name: "Sensitive"
+});
+
+// 自定义敏感词字典
+const words = ["脑残", "废物", "白痴", "三八", "智障"];
+
+const modelValue = ref();
+const mint = new Mint(words);
+
+function onInput() {
+  modelValue.value = mint.filter(modelValue.value).text;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">敏感词过滤</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/sensitive.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/sensitive.vue
+        </el-link>
+      </div>
+    </template>
+    <div class="flex flex-wrap gap-2 my-2">
+      <span>自定义敏感词</span>
+      <el-tag
+        v-for="(word, index) in words"
+        :key="index"
+        type="warning"
+        class="mx-1"
+        effect="dark"
+        round
+      >
+        {{ word }}
+      </el-tag>
+    </div>
+    <el-input v-model="modelValue" @input="onInput" />
+    <p class="mt-2">{{ modelValue }}</p>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/typeit.vue b/Yi.Pure.Vue3/src/views/able/typeit.vue
new file mode 100644
index 00000000..5f6a6b9b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/typeit.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
+
+defineOptions({
+  name: "Typeit"
+});
+
+const options: TypeItOptions = {
+  strings: ["test1", "test2", "test3"]
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">打字机组件</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/typeit.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/typeit.vue
+        </el-link>
+      </div>
+    </template>
+    <TypeIt :options="options" />
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/verify.vue b/Yi.Pure.Vue3/src/views/able/verify.vue
new file mode 100644
index 00000000..f30379ee
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/verify.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Vcode from "vue3-puzzle-vcode";
+
+const isShow = ref(true);
+
+function onSuccess() {
+  console.log("验证成功");
+}
+
+function onFail() {
+  console.log("验证失败");
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          拼图人机验证、右滑拼图验证
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/verify.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/verify.vue
+      </el-link>
+    </template>
+    <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
+      <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/video-frame/canvasRenderer.ts b/Yi.Pure.Vue3/src/views/able/video-frame/canvasRenderer.ts
new file mode 100644
index 00000000..8a6e1c56
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/video-frame/canvasRenderer.ts
@@ -0,0 +1,185 @@
+// import { throttle } from "@pureadmin/utils";
+import { emitter } from "@/utils/mitt";
+
+export class CanvasRenderer {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private images: {
+    img: HTMLImageElement;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }[];
+  private container: HTMLElement;
+  private positionX: number;
+  private isDragging: boolean;
+  private startX: number;
+
+  constructor(containerId: string) {
+    this.canvas = document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d")!;
+    this.images = [];
+    this.positionX = 0;
+    this.isDragging = false;
+    this.startX = 0;
+
+    this.container = document.getElementById(containerId);
+    if (this.container) {
+      this.container.appendChild(this.canvas);
+      this.canvas.width = this.container.clientWidth;
+      this.canvas.height = this.container.clientHeight;
+    }
+  }
+
+  public addImage(
+    url: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) {
+    const img = new Image();
+    img.src = url;
+
+    this.images.push({
+      img,
+      x,
+      y,
+      width,
+      height
+    });
+
+    this.render();
+  }
+
+  public render() {
+    this.clearRect();
+
+    this.images.forEach(imgProps => {
+      const x = imgProps.x + this.positionX;
+      this.ctx.drawImage(
+        imgProps.img,
+        x,
+        imgProps.y,
+        imgProps.width,
+        imgProps.height
+      );
+    });
+  }
+
+  public clearImages() {
+    this.images = [];
+  }
+
+  public clearRect() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  public drawTick(event) {
+    this.render();
+
+    // 当前勾选图片的索引
+    const index =
+      Math.ceil(
+        (Math.abs(this.positionX) + event.offsetX) / this.images[0].width
+      ) - 1;
+    const x = event.offsetX;
+    const y = event.offsetY;
+
+    // 绘制样式
+    this.ctx.strokeStyle = "red";
+    this.ctx.lineWidth = 4;
+    this.ctx.lineCap = "round";
+
+    // 绘制对勾
+    this.ctx.beginPath();
+    this.ctx.moveTo(x - 10, y);
+    this.ctx.lineTo(x, y + 10);
+    this.ctx.lineTo(x + 15, y - 10);
+    this.ctx.stroke();
+
+    emitter.emit("imageInfo", this.images[index]);
+  }
+
+  public addListener() {
+    if (!this.canvas) return;
+    this.canvas.addEventListener("click", this.handleClick);
+    this.canvas.addEventListener("mousedown", this.handleMouseDown);
+    this.canvas.addEventListener("mousemove", this.handleMouseMove);
+    this.canvas.addEventListener("mouseup", this.handleMouseUp);
+    this.canvas.addEventListener("touchstart", this.handleTouchStart);
+    this.canvas.addEventListener("touchmove", this.handleTouchMove);
+    this.canvas.addEventListener("touchend", this.handleTouchEnd);
+    // window.addEventListener("resize", throttle(this.handleWindowResize, 200));
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    this.drawTick(event);
+  };
+
+  private handleMouseDown = (event: MouseEvent) => {
+    this.startDrag(event.clientX);
+  };
+
+  private handleMouseMove = (event: MouseEvent) => {
+    this.drag(event.clientX);
+  };
+
+  private handleMouseUp = () => {
+    this.endDrag();
+  };
+
+  private handleTouchStart = (event: TouchEvent) => {
+    if (event.touches.length === 1) {
+      event.preventDefault();
+      this.startDrag(event.touches[0].clientX);
+    }
+  };
+
+  private handleTouchMove = (event: TouchEvent) => {
+    if (event.touches.length === 1) {
+      event.preventDefault();
+      this.drag(event.touches[0].clientX);
+    }
+  };
+
+  private handleTouchEnd = () => {
+    this.endDrag();
+  };
+
+  private startDrag(clientX: number) {
+    this.canvas.style.cursor = "grabbing";
+    this.canvas.style.userSelect = "none";
+
+    this.startX = clientX;
+    this.isDragging = true;
+  }
+
+  private drag(clientX: number) {
+    if (!this.isDragging) return;
+
+    const deltaX = clientX - this.startX;
+    const maxPositionX =
+      this.images.length * this.images[0].width - this.container.clientWidth;
+    this.positionX = Math.max(
+      Math.min(this.positionX + deltaX, 0),
+      -maxPositionX
+    );
+    this.startX = clientX;
+
+    this.render();
+  }
+
+  private endDrag() {
+    this.canvas.style.cursor = "grab";
+    this.canvas.style.userSelect = "auto";
+    this.isDragging = false;
+  }
+
+  // private handleWindowResize = () => {
+  //   this.canvas.width = this.container.clientWidth;
+  //   this.canvas.height = this.container.clientHeight;
+  //   this.render();
+  // };
+}
diff --git a/Yi.Pure.Vue3/src/views/able/video-frame/index.vue b/Yi.Pure.Vue3/src/views/able/video-frame/index.vue
new file mode 100644
index 00000000..eab5a5bc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/video-frame/index.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { emitter } from "@/utils/mitt";
+import { useLoader } from "@pureadmin/utils";
+import { CanvasRenderer } from "./canvasRenderer";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+defineOptions({
+  name: "VideoFrame"
+});
+
+const num = 200;
+const curImg = ref("");
+const renderer = ref();
+const captureUtil = ref();
+const loading = ref(false);
+const { loadScript } = useLoader();
+
+const { VITE_PUBLIC_PATH } = import.meta.env;
+const getPath = path => `${VITE_PUBLIC_PATH}wasm/${path}`;
+const src = getPath("index.js");
+const workerPath = getPath("capture.worker.js");
+const wasmPath = getPath("capture.worker.wasm");
+
+loadScript({
+  src
+}).then(mgs => {
+  if (mgs[0].message === "加载成功") {
+    // @ts-expect-error
+    captureUtil.value = cheetahCapture.initCapture({
+      workerPath,
+      wasmPath
+    });
+  }
+});
+
+onMounted(() => {
+  renderer.value = new CanvasRenderer("canvas-container");
+  emitter.on("imageInfo", info => (curImg.value = info.img.src));
+});
+
+function beforeUpload(file) {
+  curImg.value = "";
+  loading.value = true;
+  renderer.value.clearImages();
+  // api参考 https://github.com/wanwu/cheetah-capture#api
+  captureUtil.value.then(res => {
+    res.capture({
+      // 视频文件
+      file,
+      // 抽取指定数目的帧图片，传递`number`是按照数目抽帧，传递数组是指定抽帧的时间，单位毫秒（抽帧策略：https://github.com/wanwu/cheetah-capture/issues/6#issuecomment-1634384486）
+      info: 16,
+      // 当抽帧结果变化的回调
+      onChange: (list, { url }) => {
+        renderer.value.addImage(url, num * list.url.length, 0, num, num);
+      },
+      // 当抽帧结束并成功的回调
+      onSuccess: () => {
+        renderer.value.addListener();
+        // 默认选中第一张
+        renderer.value.drawTick({ offsetX: num / 2, offsetY: num / 2 });
+        loading.value = false;
+      },
+      // 当抽帧过程出现错误的回调
+      onError: () => {
+        loading.value = false;
+      }
+    });
+  });
+
+  return false;
+}
+
+onBeforeUnmount(() => {
+  // 解绑`imageInfo`公共事件，防止多次触发
+  emitter.off("imageInfo");
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          <p>
+            基于自定义编译
+            <el-link
+              href="https://github.com/FFmpeg/FFmpeg"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              FFmpeg
+            </el-link>
+            的截帧工具，支持MP4、MOV、AVI、WebM、MKV等主流格式，支持
+            H.264（AVC）、H.265（HEVC）、MPEG-2、MPEG-4、VP8、VP9、WMV3编码格式
+          </p>
+          当然还可以支持更多视频格式，只要FFmpeg支持的，按理都能支持，您也可参考
+          <el-link
+            href="https://github.com/wanwu/cheetah-capture"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            cheetah-capture
+          </el-link>
+          和
+          <el-link
+            href="https://github.com/jordiwang/web-capture"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            web-capture
+          </el-link>
+          修改并编译wasm等文件（强烈推荐在Ubuntu系统进行编译）
+          <p>
+            mac系统推荐安装
+            <el-link
+              href="https://github.com/utmapp/UTM"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              UTM
+            </el-link>
+            虚拟机，windows系统推荐安装VMware虚拟机
+          </p>
+          <p>
+            当然这只是一个视频帧截取工具，如果您想要更多操作可以研究下
+            <el-link
+              href="https://ffmpegwasm.netlify.app/"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              ffmpeg.wasm
+            </el-link>
+            ，它是基于 FFmpeg 的纯 WebAssembly / JavaScript
+            工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
+          </p>
+        </span>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video-frame"
+          target="_blank"
+        >
+          代码位置 src/views/able/video-frame
+        </el-link>
+      </div>
+    </template>
+    <div class="flex flex-wrap">
+      <el-upload
+        drag
+        :show-file-list="false"
+        accept=".mp4,.mov,.avi,.webm,.mkv"
+        :before-upload="beforeUpload"
+      >
+        <div class="el-upload__text">
+          可拖拽上传视频（默认截取16张帧图片，可在代码中自行修改）
+        </div>
+      </el-upload>
+      <el-image
+        v-if="curImg"
+        :src="curImg"
+        :preview-src-list="Array.of(curImg)"
+        class="w-[180px] h-[180px] ml-2 rounded-[6px]"
+      />
+    </div>
+    <div
+      id="canvas-container"
+      v-loading="loading"
+      element-loading-text="温馨提示：可左右拖拽图片并单击选取所需的帧图片"
+      class="w-full h-[200px] overflow-hidden mt-6"
+    />
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+::v-deep(.el-upload-dragger) {
+  display: flex;
+  align-items: center;
+  height: 180px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/able/video.vue b/Yi.Pure.Vue3/src/views/able/video.vue
new file mode 100644
index 00000000..06590395
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/video.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { deviceDetection } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import VideoPlay from "@iconify-icons/ep/video-play";
+
+import Player from "xgplayer";
+import "xgplayer/dist/index.min.css";
+
+defineOptions({
+  name: "VideoPage"
+});
+
+onMounted(() => {
+  new Player({
+    id: "mse",
+    lang: "zh",
+    // 默认静音
+    volume: 0,
+    autoplay: false,
+    screenShot: true,
+    videoAttributes: {
+      crossOrigin: "anonymous"
+    },
+    url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
+    poster:
+      "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
+    fluid: deviceDetection(),
+    //传入倍速可选数组
+    playbackRate: [0.5, 0.75, 1, 1.5, 2]
+  });
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          视频组件，采用开源的
+          <el-link
+            href="https://v3.h5player.bytedance.com/"
+            target="_blank"
+            :icon="useRenderIcon(VideoPlay)"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            西瓜播放器
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/video.vue
+      </el-link>
+    </template>
+    <div id="mse" />
+  </el-card>
+</template>
+
+<style scoped>
+#mse {
+  flex: auto;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/able/watermark.vue b/Yi.Pure.Vue3/src/views/able/watermark.vue
new file mode 100644
index 00000000..156ba053
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/watermark.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
+import { useWatermark } from "@pureadmin/utils";
+
+defineOptions({
+  name: "WaterMark"
+});
+
+const local = ref();
+const preventLocal = ref();
+const color = ref("#409EFF");
+const value = ref("vue-pure-admin");
+const { setWatermark, clear } = useWatermark();
+const { setWatermark: setLocalWatermark, clear: clearLocal } =
+  useWatermark(local);
+const { setWatermark: setPreventLocalWatermark } = useWatermark(preventLocal);
+
+onMounted(() => {
+  nextTick(() => {
+    setPreventLocalWatermark("无法删除的水印", {
+      forever: true,
+      width: 180,
+      height: 70
+    });
+  });
+});
+
+onBeforeUnmount(() => {
+  // 在离开该页面时清除整页水印
+  clear();
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          <el-link
+            href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            页面水印
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/watermark.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/watermark.vue
+      </el-link>
+    </template>
+    <el-space wrap class="!mb-2">
+      <span> 请输入要创建水印的值：</span>
+      <el-input v-model="value" class="mr-4" style="width: 200px" clearable />
+      <span>请选择要创建水印的颜色：</span>
+      <el-color-picker v-model="color" show-alpha />
+    </el-space>
+
+    <el-space wrap>
+      <el-button plain @click="setWatermark(value, { color })">
+        创建整页水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建整页渐变水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            rotate: 0,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建整页渐变且水平90度的水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ],
+            shadowConfig: [20]
+          })
+        "
+      >
+        创建整页渐变且有阴影的水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            globalAlpha: 0.15, // 值越低越透明
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建整页高透明渐变水印
+      </el-button>
+      <el-button plain @click="clear">清除整页水印</el-button>
+    </el-space>
+
+    <div ref="local" class="w-1/2 h-[200px] border border-sky-500 mt-4" />
+
+    <el-space wrap class="mt-6">
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            color,
+            width: 140,
+            height: 65
+          })
+        "
+      >
+        创建局部水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建局部渐变水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            rotate: 0,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建局部渐变且水平90度的水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ],
+            shadowConfig: [20]
+          })
+        "
+      >
+        创建局部渐变且有阴影的水印
+      </el-button>
+      <el-button plain @click="clearLocal">清除局部水印</el-button>
+    </el-space>
+
+    <div
+      ref="preventLocal"
+      class="w-1/2 h-[200px] border border-indigo-500 mt-4"
+    />
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/wavesurfer/index.vue b/Yi.Pure.Vue3/src/views/able/wavesurfer/index.vue
new file mode 100644
index 00000000..a73b01e4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/wavesurfer/index.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import WaveSurfer from "wavesurfer.js";
+import { getTime } from "@pureadmin/utils";
+import { Play, Pause, Forward, Rewind } from "./svg";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+defineOptions({
+  name: "Wavesurfer"
+});
+
+const loading = ref(true);
+const wavesurfer = ref(null);
+const wavesurferRef = ref();
+// 音频总时长（格式化后 mm:ss）
+const totalTime = ref();
+// 音频总时长（单位秒）
+const totalSecondTime = ref();
+// 音频当前播放位置时长
+const curTime = ref();
+// 音频是否正在播放
+const isPlay = ref(false);
+
+const { VITE_PUBLIC_PATH } = import.meta.env;
+const url = `${VITE_PUBLIC_PATH}audio/海阔天空.mp3`;
+
+function init() {
+  wavesurfer.value = WaveSurfer.create({
+    container: wavesurferRef.value,
+    height: "auto",
+    waveColor: "rgb(200, 0, 200)",
+    progressColor: "rgb(100, 0, 100)",
+    cursorColor: "rgb(64, 158, 255)",
+    cursorWidth: 4,
+    // backend: "MediaElement",
+    url
+  });
+
+  // 音频被解码后触发
+  wavesurfer.value.on("decode", () => (loading.value = false));
+
+  // 当音频已解码并可以播放时触发
+  wavesurfer.value.on("ready", () => {
+    if (!wavesurfer.value) return;
+    const { decodedData } = wavesurfer.value;
+    totalSecondTime.value = decodedData.duration;
+    const { m, s } = getTime(decodedData.duration);
+    totalTime.value = `${m}:${s}`;
+    // 光标位置取中
+    wavesurfer.value.setTime(decodedData.duration / 2);
+    // 设置音频音量（范围0-1）
+    // wavesurfer.value.setVolume(1);
+  });
+
+  // 音频位置改变时，播放期间连续触发
+  wavesurfer.value.on("timeupdate", timer => {
+    if (timer > totalSecondTime.value) return;
+    const { m, s } = getTime(timer);
+    curTime.value = `${m}:${s}`;
+  });
+
+  // 音频播放时触发
+  wavesurfer.value.on("play", () => (isPlay.value = true));
+
+  // 音频暂停时触发
+  wavesurfer.value.on("pause", () => (isPlay.value = false));
+}
+
+onMounted(init);
+
+onBeforeUnmount(() => {
+  if (wavesurfer.value) {
+    wavesurfer.value.destroy();
+    wavesurfer.value = null;
+  }
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          音频可视化，采用开源的
+          <el-link
+            href="https://wavesurfer-js.org/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            wavesurfer.js
+          </el-link>
+          <span class="text-[red]">
+            （温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
+          </span>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/wavesurfer"
+        target="_blank"
+      >
+        代码位置 src/views/able/wavesurfer
+      </el-link>
+    </template>
+    <div
+      v-loading="loading"
+      class="w-8/12 !m-auto !mt-[20px]"
+      element-loading-background="transparent"
+    >
+      <div ref="wavesurferRef" />
+      <div v-show="totalTime" class="flex justify-between">
+        <span class="text-[#81888f]">00:00</span>
+        <h1 class="text-4xl mt-2">{{ curTime }}</h1>
+        <span class="text-[#81888f]">{{ totalTime }}</span>
+      </div>
+      <div v-show="totalTime" class="flex mt-2 w-[180px] justify-around m-auto">
+        <Rewind
+          v-tippy="{
+            content: '快退（可长按）',
+            placement: 'bottom'
+          }"
+          v-longpress:0:100="() => wavesurfer?.skip(-1)"
+          class="cursor-pointer"
+        />
+        <div
+          v-tippy="{
+            content: isPlay ? '暂停' : '播放',
+            placement: 'bottom'
+          }"
+          class="cursor-pointer"
+          @click="wavesurfer?.playPause()"
+        >
+          <Play v-if="isPlay" v-motion-pop />
+          <Pause v-else v-motion-pop />
+        </div>
+        <Forward
+          v-tippy="{
+            content: '快进（可长按）',
+            placement: 'bottom'
+          }"
+          v-longpress:0:100="() => wavesurfer?.skip(1)"
+          class="cursor-pointer"
+        />
+      </div>
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/forward.svg b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/forward.svg
new file mode 100644
index 00000000..95a55da2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#409EFF" d="M515.5 91.5C747.4 91.5 936 280.1 936 512S747.4 932.5 515.5 932.5 95 743.9 95 512 283.6 91.5 515.5 91.5m0-87C235.2 4.5 8 231.7 8 512s227.2 507.5 507.5 507.5S1023 792.3 1023 512 795.8 4.5 515.5 4.5"/><path fill="#81888f" d="m337.7 450.8 84.1 61.2-84.1 61.2zm-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L342.8 347c-10.6-7.7-22.4-11.2-33.9-11.2"/><path fill="#81888f" d="m529.1 450.8 84.1 61.2-84.1 61.2zm-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L534.2 347c-10.6-7.7-22.4-11.2-33.9-11.2"/><path fill="#81888f" d="M736.8 367c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/index.ts b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/index.ts
new file mode 100644
index 00000000..922a47b5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/index.ts
@@ -0,0 +1,15 @@
+import Play from "./play.svg?component";
+import Pause from "./pause.svg?component";
+import Forward from "./forward.svg?component";
+import Rewind from "./rewind.svg?component";
+
+export {
+  /** 播放 */
+  Play,
+  /** 暂停 */
+  Pause,
+  /** 快进 */
+  Forward,
+  /** 快退 */
+  Rewind
+};
diff --git a/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/pause.svg b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/pause.svg
new file mode 100644
index 00000000..7ba0fdca
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/pause.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="icon" viewBox="0 0 1024 1024"><path fill="#f56c6c" d="M512 42.667C252.793 42.667 42.667 252.793 42.667 512S252.793 981.333 512 981.333 981.333 771.207 981.333 512 771.207 42.667 512 42.667M708.547 543.16l-266.667 176A37.333 37.333 0 0 1 384 688V336.033a37.333 37.333 0 0 1 57.893-31.16l266.667 176a37.333 37.333 0 0 1 0 62.32z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/play.svg b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/play.svg
new file mode 100644
index 00000000..93eb60c7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="icon" viewBox="0 0 1024 1024"><path fill="#409eff" d="M512 0C229.227 0 0 229.227 0 512s229.227 512 512 512 512-229.227 512-512S794.773 0 512 0m-33.023 704.742c0 34.191-25.028 62.18-55.617 62.18s-55.618-27.975-55.618-62.18V319.258c0-34.19 25.028-62.18 55.618-62.18s55.617 27.975 55.617 62.18zm170.328 0c0 34.191-25.027 62.18-55.617 62.18s-55.617-27.975-55.617-62.18V319.258c0-34.19 25.027-62.18 55.617-62.18s55.617 27.975 55.617 62.18z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/rewind.svg b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/rewind.svg
new file mode 100644
index 00000000..a36465e3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/able/wavesurfer/svg/rewind.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#409EFF" d="M512 90.3c231.9 0 420.5 188.6 420.5 420.5S743.9 931.3 512 931.3 91.5 742.7 91.5 510.8 280.1 90.3 512 90.3m0-87C231.7 3.3 4.5 230.5 4.5 510.8s227.2 507.5 507.5 507.5 507.5-227.2 507.5-507.5S792.3 3.3 512 3.3"/><path fill="#81888f" d="M689.8 449.7V572l-84.1-61.2zm28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L522.3 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1"/><path fill="#81888f" d="M498.4 449.7V572l-84.1-61.2zm28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L330.9 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1"/><path fill="#81888f" d="M290.7 365.8c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/about/columns.tsx b/Yi.Pure.Vue3/src/views/about/columns.tsx
new file mode 100644
index 00000000..ebd94b3f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/about/columns.tsx
@@ -0,0 +1,108 @@
+export function useColumns() {
+  const { pkg, lastBuildTime } = __APP_INFO__;
+  const { version, engines } = pkg;
+  const columns = [
+    {
+      label: "当前版本",
+      minWidth: 100,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {version}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "最后编译时间",
+      minWidth: 120,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {lastBuildTime}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "推荐 node 版本",
+      minWidth: 140,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {engines.node}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "推荐 pnpm 版本",
+      minWidth: 140,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {engines.pnpm}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "完整版代码地址",
+      minWidth: 140,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a
+            href="https://github.com/pure-admin/vue-pure-admin"
+            target="_blank"
+          >
+            <span style="color: var(--el-color-primary)">完整版代码链接</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "精简版代码地址",
+      minWidth: 140,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a
+            href="https://github.com/pure-admin/pure-admin-thin"
+            target="_blank"
+          >
+            <span style="color: var(--el-color-primary)">精简版代码链接</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "文档地址",
+      minWidth: 100,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a href="https://pure-admin.github.io/pure-admin-doc" target="_blank">
+            <span style="color: var(--el-color-primary)">文档链接</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "预览地址",
+      minWidth: 100,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a href="https://pure-admin.github.io/vue-pure-admin" target="_blank">
+            <span style="color: var(--el-color-primary)">预览链接</span>
+          </a>
+        );
+      }
+    }
+  ];
+
+  return {
+    columns
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/about/index.vue b/Yi.Pure.Vue3/src/views/about/index.vue
new file mode 100644
index 00000000..0fab0fc0
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/about/index.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useColumns } from "./columns";
+
+export interface schemaItem {
+  field: string;
+  label: string;
+}
+
+defineOptions({
+  name: "About"
+});
+
+const { pkg } = __APP_INFO__;
+const { dependencies, devDependencies } = pkg;
+
+const schema: schemaItem[] = [];
+const devSchema: schemaItem[] = [];
+
+const { columns } = useColumns();
+
+const words = [
+  "@pureadmin/descriptions",
+  "@pureadmin/table",
+  "@pureadmin/utils",
+  "@vueuse/core",
+  "axios",
+  "dayjs",
+  "echarts",
+  "vue",
+  "element-plus",
+  "pinia",
+  "vue-i18n",
+  "vue-router",
+  "@iconify/vue",
+  "@vitejs/plugin-vue",
+  "@vitejs/plugin-vue-jsx",
+  "eslint",
+  "prettier",
+  "sass",
+  "stylelint",
+  "tailwindcss",
+  "typescript",
+  "vite",
+  "vue-tsc"
+];
+
+const getMainLabel = computed(
+  () => (label: string) => words.find(w => w === label) && "main-label"
+);
+
+Object.keys(dependencies).forEach(key => {
+  schema.push({ field: dependencies[key], label: key });
+});
+
+Object.keys(devDependencies).forEach(key => {
+  devSchema.push({ field: devDependencies[key], label: key });
+});
+</script>
+
+<template>
+  <div>
+    <el-card class="mb-4 box-card" shadow="never">
+      <span>
+        vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。完全采用
+        ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的
+        Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss
+        等主流技术开发。
+      </span>
+    </el-card>
+
+    <el-card class="m-4 box-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span class="font-medium">平台信息</span>
+        </div>
+      </template>
+      <el-scrollbar>
+        <PureDescriptions border :columns="columns" :column="4" />
+      </el-scrollbar>
+    </el-card>
+
+    <el-card class="m-4 box-card" shadow="never">
+      <template #header>
+        <div class="card-header flex items-center">
+          <span class="font-medium">生产环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ schema.length }}
+          </el-tag>
+        </div>
+      </template>
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="6">
+          <el-descriptions-item
+            v-for="(item, index) in schema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
+          >
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
+            >
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
+    </el-card>
+
+    <el-card class="m-4 box-card" shadow="never">
+      <template #header>
+        <div class="card-header flex items-center">
+          <span class="font-medium">开发环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ devSchema.length }}
+          </el-tag>
+        </div>
+      </template>
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="5">
+          <el-descriptions-item
+            v-for="(item, index) in devSchema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
+          >
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
+            >
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.main-label) {
+  font-size: 16px !important;
+  color: var(--el-color-danger) !important;
+}
+
+:deep(.pure-version) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.main-content {
+  margin: 0 !important;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/account-settings/components/AccountManagement.vue b/Yi.Pure.Vue3/src/views/account-settings/components/AccountManagement.vue
new file mode 100644
index 00000000..837f6a7b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/account-settings/components/AccountManagement.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+import { deviceDetection } from "@pureadmin/utils";
+
+defineOptions({
+  name: "AccountManagement"
+});
+
+const list = ref([
+  {
+    title: "账户密码",
+    illustrate: "当前密码强度：强",
+    button: "修改"
+  },
+  {
+    title: "密保手机",
+    illustrate: "已经绑定手机：158****6789",
+    button: "修改"
+  },
+  {
+    title: "密保问题",
+    illustrate: "未设置密保问题，密保问题可有效保护账户安全",
+    button: "修改"
+  },
+  {
+    title: "备用邮箱",
+    illustrate: "已绑定邮箱：pure***@163.com",
+    button: "修改"
+  }
+]);
+
+function onClick(item) {
+  console.log("onClick", item.title);
+  message("请根据具体业务自行实现", { type: "success" });
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">账户管理</h3>
+    <div v-for="(item, index) in list" :key="index">
+      <div class="flex items-center">
+        <div class="flex-1">
+          <p>{{ item.title }}</p>
+          <el-text class="mx-1" type="info">{{ item.illustrate }}</el-text>
+        </div>
+        <el-button type="primary" text @click="onClick(item)">
+          {{ item.button }}
+        </el-button>
+      </div>
+      <el-divider />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  border-top: 0.1px var(--el-border-color) var(--el-border-style);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/account-settings/components/Preferences.vue b/Yi.Pure.Vue3/src/views/account-settings/components/Preferences.vue
new file mode 100644
index 00000000..93a510a5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/account-settings/components/Preferences.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+import { deviceDetection } from "@pureadmin/utils";
+
+defineOptions({
+  name: "Preferences"
+});
+
+const list = ref([
+  {
+    title: "账户密码",
+    illustrate: "其他用户的消息将以站内信的形式通知",
+    checked: true
+  },
+  {
+    title: "系统消息",
+    illustrate: "系统消息将以站内信的形式通知",
+    checked: true
+  },
+  {
+    title: "待办任务",
+    illustrate: "待办任务将以站内信的形式通知",
+    checked: true
+  }
+]);
+
+function onChange(val, item) {
+  console.log("onChange", val);
+  message(`${item.title}设置成功`, { type: "success" });
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">偏好设置</h3>
+    <div v-for="(item, index) in list" :key="index">
+      <div class="flex items-center">
+        <div class="flex-1">
+          <p>{{ item.title }}</p>
+          <p class="wp-4">
+            <el-text class="mx-1" type="info">
+              {{ item.illustrate }}
+            </el-text>
+          </p>
+        </div>
+        <el-switch
+          v-model="item.checked"
+          inline-prompt
+          active-text="是"
+          inactive-text="否"
+          @change="val => onChange(val, item)"
+        />
+      </div>
+      <el-divider />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  border-top: 0.1px var(--el-border-color) var(--el-border-style);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/account-settings/components/Profile.vue b/Yi.Pure.Vue3/src/views/account-settings/components/Profile.vue
new file mode 100644
index 00000000..bde496a2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/account-settings/components/Profile.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { formUpload } from "@/api/mock";
+import { message } from "@/utils/message";
+import { type UserInfo, getMine } from "@/api/user";
+import type { FormInstance, FormRules } from "element-plus";
+import ReCropperPreview from "@/components/ReCropperPreview";
+import { createFormData, deviceDetection } from "@pureadmin/utils";
+import uploadLine from "@iconify-icons/ri/upload-line";
+
+defineOptions({
+  name: "Profile"
+});
+
+const imgSrc = ref("");
+const cropperBlob = ref();
+const cropRef = ref();
+const uploadRef = ref();
+const isShow = ref(false);
+const userInfoFormRef = ref<FormInstance>();
+
+const userInfos = reactive({
+  avatar: "",
+  nickname: "",
+  email: "",
+  phone: "",
+  description: ""
+});
+
+const rules = reactive<FormRules<UserInfo>>({
+  nickname: [{ required: true, message: "昵称必填", trigger: "blur" }]
+});
+
+function queryEmail(queryString, callback) {
+  const emailList = [
+    { value: "@qq.com" },
+    { value: "@126.com" },
+    { value: "@163.com" }
+  ];
+  let results = [];
+  let queryList = [];
+  emailList.map(item =>
+    queryList.push({ value: queryString.split("@")[0] + item.value })
+  );
+  results = queryString
+    ? queryList.filter(
+        item =>
+          item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      )
+    : queryList;
+  callback(results);
+}
+
+const onChange = uploadFile => {
+  const reader = new FileReader();
+  reader.onload = e => {
+    imgSrc.value = e.target.result as string;
+    isShow.value = true;
+  };
+  reader.readAsDataURL(uploadFile.raw);
+};
+
+const handleClose = () => {
+  cropRef.value.hidePopover();
+  uploadRef.value.clearFiles();
+  isShow.value = false;
+};
+
+const onCropper = ({ blob }) => (cropperBlob.value = blob);
+
+const handleSubmitImage = () => {
+  const formData = createFormData({
+    files: new File([cropperBlob.value], "avatar")
+  });
+  formUpload(formData)
+    .then(({ success, data }) => {
+      if (success) {
+        message("更新头像成功", { type: "success" });
+        handleClose();
+      } else {
+        message("更新头像失败");
+      }
+    })
+    .catch(error => {
+      message(`提交异常 ${error}`, { type: "error" });
+    });
+};
+
+// 更新信息
+const onSubmit = async (formEl: FormInstance) => {
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(userInfos);
+      message("更新信息成功", { type: "success" });
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+getMine().then(res => {
+  Object.assign(userInfos, res.data);
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">个人信息</h3>
+    <el-form
+      ref="userInfoFormRef"
+      label-position="top"
+      :rules="rules"
+      :model="userInfos"
+    >
+      <el-form-item label="头像">
+        <el-avatar :size="80" :src="userInfos.avatar" />
+        <el-upload
+          ref="uploadRef"
+          accept="image/*"
+          action="#"
+          :limit="1"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onChange"
+        >
+          <el-button plain class="ml-4">
+            <IconifyIconOffline :icon="uploadLine" />
+            <span class="ml-2">更新头像</span>
+          </el-button>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="userInfos.nickname" placeholder="请输入昵称" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-autocomplete
+          v-model="userInfos.email"
+          :fetch-suggestions="queryEmail"
+          :trigger-on-focus="false"
+          placeholder="请输入邮箱"
+          clearable
+          class="w-full"
+        />
+      </el-form-item>
+      <el-form-item label="联系电话">
+        <el-input
+          v-model="userInfos.phone"
+          placeholder="请输入联系电话"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="简介">
+        <el-input
+          v-model="userInfos.description"
+          placeholder="请输入简介"
+          type="textarea"
+          :autosize="{ minRows: 6, maxRows: 8 }"
+          maxlength="56"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-button type="primary" @click="onSubmit(userInfoFormRef)">
+        更新信息
+      </el-button>
+    </el-form>
+    <el-dialog
+      v-model="isShow"
+      width="40%"
+      title="编辑头像"
+      destroy-on-close
+      :closeOnClickModal="false"
+      :before-close="handleClose"
+      :fullscreen="deviceDetection()"
+    >
+      <ReCropperPreview ref="cropRef" :imgSrc="imgSrc" @cropper="onCropper" />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button bg text @click="handleClose">取消</el-button>
+          <el-button bg text type="primary" @click="handleSubmitImage">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/account-settings/components/SecurityLog.vue b/Yi.Pure.Vue3/src/views/account-settings/components/SecurityLog.vue
new file mode 100644
index 00000000..845540c2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/account-settings/components/SecurityLog.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { getMineLogs } from "@/api/user";
+import { reactive, ref, onMounted } from "vue";
+import { deviceDetection } from "@pureadmin/utils";
+import type { PaginationProps } from "@pureadmin/table";
+
+defineOptions({
+  name: "SecurityLog"
+});
+
+const loading = ref(true);
+const dataList = ref([]);
+const pagination = reactive<PaginationProps>({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true,
+  layout: "prev, pager, next"
+});
+const columns: TableColumnList = [
+  {
+    label: "详情",
+    prop: "summary",
+    minWidth: 140
+  },
+  {
+    label: "IP 地址",
+    prop: "ip",
+    minWidth: 100
+  },
+  {
+    label: "地点",
+    prop: "address",
+    minWidth: 140
+  },
+  {
+    label: "操作系统",
+    prop: "system",
+    minWidth: 100
+  },
+  {
+    label: "浏览器类型",
+    prop: "browser",
+    minWidth: 100
+  },
+  {
+    label: "时间",
+    prop: "operatingTime",
+    minWidth: 180,
+    formatter: ({ operatingTime }) =>
+      dayjs(operatingTime).format("YYYY-MM-DD HH:mm:ss")
+  }
+];
+
+async function onSearch() {
+  loading.value = true;
+  const { data } = await getMineLogs();
+  dataList.value = data.list;
+  pagination.total = data.total;
+  pagination.pageSize = data.pageSize;
+  pagination.currentPage = data.currentPage;
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 200);
+}
+
+onMounted(() => {
+  onSearch();
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">安全日志</h3>
+    <pure-table
+      row-key="id"
+      table-layout="auto"
+      :loading="loading"
+      :data="dataList"
+      :columns="columns"
+      :pagination="pagination"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/account-settings/index.vue b/Yi.Pure.Vue3/src/views/account-settings/index.vue
new file mode 100644
index 00000000..47486e36
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/account-settings/index.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { getMine } from "@/api/user";
+import { useRouter } from "vue-router";
+import { ref, onBeforeMount } from "vue";
+import { ReText } from "@/components/ReText";
+import Profile from "./components/Profile.vue";
+import Preferences from "./components/Preferences.vue";
+import SecurityLog from "./components/SecurityLog.vue";
+import { useGlobal, deviceDetection } from "@pureadmin/utils";
+import AccountManagement from "./components/AccountManagement.vue";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
+
+import leftLine from "@iconify-icons/ri/arrow-left-s-line";
+import ProfileIcon from "@iconify-icons/ri/user-3-line";
+import PreferencesIcon from "@iconify-icons/ri/settings-3-line";
+import SecurityLogIcon from "@iconify-icons/ri/window-line";
+import AccountManagementIcon from "@iconify-icons/ri/profile-line";
+
+defineOptions({
+  name: "AccountSettings"
+});
+
+const router = useRouter();
+const isOpen = ref(deviceDetection() ? false : true);
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+onBeforeMount(() => {
+  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+});
+
+const userInfo = ref({
+  avatar: "",
+  username: "",
+  nickname: ""
+});
+const panes = [
+  {
+    key: "profile",
+    label: "个人信息",
+    icon: ProfileIcon,
+    component: Profile
+  },
+  {
+    key: "preferences",
+    label: "偏好设置",
+    icon: PreferencesIcon,
+    component: Preferences
+  },
+  {
+    key: "securityLog",
+    label: "安全日志",
+    icon: SecurityLogIcon,
+    component: SecurityLog
+  },
+  {
+    key: "accountManagement",
+    label: "账户管理",
+    icon: AccountManagementIcon,
+    component: AccountManagement
+  }
+];
+const witchPane = ref("profile");
+
+getMine().then(res => {
+  userInfo.value = res.data;
+});
+</script>
+
+<template>
+  <el-container class="h-full">
+    <el-aside
+      v-if="isOpen"
+      class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]"
+      :width="deviceDetection() ? '180px' : '240px'"
+    >
+      <el-menu :default-active="witchPane" class="pure-account-settings-menu">
+        <el-menu-item
+          class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]"
+          @click="router.go(-1)"
+        >
+          <div class="flex items-center">
+            <IconifyIconOffline :icon="leftLine" />
+            <span class="ml-2">返回</span>
+          </div>
+        </el-menu-item>
+        <div class="flex items-center ml-8 mt-4 mb-4">
+          <el-avatar :size="48" :src="userInfo.avatar" />
+          <div class="ml-4 flex flex-col max-w-[130px]">
+            <ReText class="font-bold !self-baseline">
+              {{ userInfo.nickname }}
+            </ReText>
+            <ReText class="!self-baseline" type="info">
+              {{ userInfo.username }}
+            </ReText>
+          </div>
+        </div>
+        <el-menu-item
+          v-for="item in panes"
+          :key="item.key"
+          :index="item.key"
+          @click="
+            () => {
+              witchPane = item.key;
+              if (deviceDetection()) {
+                isOpen = !isOpen;
+              }
+            }
+          "
+        >
+          <div class="flex items-center z-10">
+            <el-icon><IconifyIconOffline :icon="item.icon" /></el-icon>
+            <span>{{ item.label }}</span>
+          </div>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-main>
+      <LaySidebarTopCollapse
+        v-if="deviceDetection()"
+        class="px-0"
+        :is-active="isOpen"
+        @toggleClick="isOpen = !isOpen"
+      />
+      <component
+        :is="panes.find(item => item.key === witchPane).component"
+        :class="[!deviceDetection() && 'ml-[120px]']"
+      />
+    </el-main>
+  </el-container>
+</template>
+
+<style lang="scss">
+.pure-account-settings {
+  background: $menuBg;
+}
+
+.pure-account-settings-menu {
+  background-color: transparent;
+  border: none;
+
+  .el-menu-item {
+    height: 48px !important;
+    color: $menuText;
+    background-color: transparent !important;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $menuTitleHover !important;
+    }
+
+    &.is-active {
+      color: #fff !important;
+
+      &:hover {
+        color: #fff !important;
+      }
+
+      &::before {
+        position: absolute;
+        inset: 0 8px;
+        margin: 4px 0;
+        clear: both;
+        content: "";
+        background: var(--el-color-primary);
+        border-radius: 3px;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+body[layout] {
+  .el-menu--vertical .is-active {
+    color: #fff !important;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #fff !important;
+    }
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/animatecss.vue b/Yi.Pure.Vue3/src/views/components/animatecss.vue
new file mode 100644
index 00000000..bd3a0cbb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/animatecss.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import ReAnimateSelector from "@/components/ReAnimateSelector";
+
+defineOptions({
+  name: "AnimateCss"
+});
+
+const animate = ref("");
+
+watch(animate, () => {
+  console.log("animate", animate.value);
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          <el-link
+            href="https://animate.style/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            animate.css
+          </el-link>
+          选择器
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/animatecss.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/animatecss.vue
+      </el-link>
+    </template>
+    <ReAnimateSelector v-model="animate" class="!w-[200px]" />
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/button.vue b/Yi.Pure.Vue3/src/views/components/button.vue
new file mode 100644
index 00000000..11c98d81
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/button.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "ButtonPage"
+});
+
+const { VITE_PUBLIC_PATH } = import.meta.env;
+
+const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">通过 iframe 引入按钮页面</span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/button.vue
+      </el-link>
+    </template>
+    <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/cascader.vue b/Yi.Pure.Vue3/src/views/components/cascader.vue
new file mode 100644
index 00000000..d42ffb33
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/cascader.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import {
+  provinceAndCityDataPlus,
+  provinceAndCityData,
+  convertTextToCode,
+  regionDataPlus,
+  regionData,
+  CodeToText
+} from "@/utils/chinaArea";
+import { ref } from "vue";
+
+defineOptions({
+  name: "Cascader"
+});
+
+const selectedOptions1 = ref(["110000", "110100"]);
+const selectedOptions2 = ref(["120000", "120100", "120101"]);
+const selectedOptions3 = ref(["130000", ""]);
+const selectedOptions4 = ref(["120000", "120100", ""]);
+
+const handleChange = value => {
+  console.log(value);
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <p class="font-medium">区域级联选择器</p>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cascader.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/cascader.vue
+      </el-link>
+    </template>
+    <el-row :gutter="24">
+      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+        <div class="flex flex-col items-center justify-center">
+          <span class="text-[var(--el-color-primary)]">
+            1. 二级联动（不带“全部”选项）
+            <el-cascader
+              v-model="selectedOptions1"
+              :options="provinceAndCityData"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions1 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions1[0]] }},
+              {{ CodeToText[selectedOptions1[1]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions1[0]],
+                  CodeToText[selectedOptions1[1]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+        <div class="flex flex-col items-center justify-center mt-3">
+          <span class="text-[var(--el-color-primary)]">
+            2. 二级联动（带有“全部”选项）
+            <el-cascader
+              v-model="selectedOptions3"
+              :options="provinceAndCityDataPlus"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions3 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions3[0]] }},
+              {{ CodeToText[selectedOptions3[1]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions3[0]],
+                  CodeToText[selectedOptions3[1]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+        <div class="flex flex-col items-center justify-center mt-3">
+          <span class="text-[var(--el-color-primary)]">
+            3. 三级联动（不带“全部”选项）
+            <el-cascader
+              v-model="selectedOptions2"
+              :options="regionData"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions2 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions2[0]] }},
+              {{ CodeToText[selectedOptions2[1]] }},
+              {{ CodeToText[selectedOptions2[2]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions2[0]],
+                  CodeToText[selectedOptions2[1]],
+                  CodeToText[selectedOptions2[2]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+        <div class="flex flex-col items-center justify-center mt-3">
+          <span class="text-[var(--el-color-primary)]">
+            4. 三级联动（带"全部选项"）
+            <el-cascader
+              v-model="selectedOptions4"
+              :options="regionDataPlus"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions4 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions4[0]] }},
+              {{ CodeToText[selectedOptions4[1]] }},
+              {{ CodeToText[selectedOptions4[2]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions4[0]],
+                  CodeToText[selectedOptions4[1]],
+                  CodeToText[selectedOptions4[2]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/check-button.vue b/Yi.Pure.Vue3/src/views/components/check-button.vue
new file mode 100644
index 00000000..924cb0c8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/check-button.vue
@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { message } from "@/utils/message";
+import { getKeyList } from "@pureadmin/utils";
+
+defineOptions({
+  name: "CheckButton"
+});
+
+const spaceSize = ref(20);
+const size = ref("default");
+const dynamicSize = ref();
+const checked = ref(true);
+
+const radio = ref("wait");
+const radioBox = ref("complete");
+const radioCustom = ref("progress");
+
+const checkboxGroup = ref(["apple", "tomato"]);
+const checkboxGroupBox = ref(["cucumber", "onion", "blueberry"]);
+const checkboxGroupCustom = ref(["tomato", "watermelon", "strawberry"]);
+
+/** 单选（可控制间距的按钮样式） */
+const checkTag = ref([
+  {
+    title: "等待中",
+    checked: false
+  },
+  {
+    title: "进行中",
+    checked: true
+  },
+  {
+    title: "已完成",
+    checked: false
+  }
+]);
+const curTagMap = ref({});
+function onChecked(tag, index) {
+  if (size.value === "disabled") return;
+  curTagMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkTag.value.map(item => (item.checked = false));
+  checkTag.value[index].checked = curTagMap.value[index].checked;
+  const { title, checked } = curTagMap.value[index];
+  message(checked ? `已选中${title}` : `取消选中${title}`, {
+    type: "success"
+  });
+}
+
+/** 多选（可控制间距的按钮样式） */
+const checkGroupTag = ref([
+  {
+    title: "苹果",
+    checked: true
+  },
+  {
+    title: "西红柿",
+    checked: true
+  },
+  {
+    title: "香蕉",
+    checked: false
+  }
+]);
+const curTagGroupMap = ref({});
+function onGroupChecked(tag, index) {
+  if (size.value === "disabled") return;
+  curTagGroupMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
+}
+
+function onSingleChecked() {
+  if (size.value === "disabled") return;
+  checked.value = !checked.value;
+}
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+            <el-radio value="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/check-button.vue
+      </el-link>
+    </template>
+    <p class="mb-2">单选（紧凑风格的按钮样式）</p>
+    <el-radio-group
+      v-model="radio"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio-button value="wait">等待中</el-radio-button>
+      <el-radio-button value="progress">进行中</el-radio-button>
+      <el-radio-button value="complete">已完成</el-radio-button>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">单选（带有边框）</p>
+    <el-radio-group
+      v-model="radioBox"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio value="wait" border>等待中</el-radio>
+      <el-radio value="progress" border>进行中</el-radio>
+      <el-radio value="complete" border>已完成</el-radio>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">单选（自定义内容）</p>
+    <el-radio-group
+      v-model="radioCustom"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio-button value="wait">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-8-fill" class="mr-1" />
+          等待中
+        </span>
+      </el-radio-button>
+      <el-radio-button value="progress">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-6-line" class="mr-1" />
+          进行中
+        </span>
+      </el-radio-button>
+      <el-radio-button value="complete">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-8-line" class="mr-1" />
+          已完成
+        </span>
+      </el-radio-button>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">多选（紧凑风格的按钮样式）</p>
+    <el-checkbox-group
+      v-model="checkboxGroup"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox-button value="apple">苹果</el-checkbox-button>
+      <el-checkbox-button value="tomato">西红柿</el-checkbox-button>
+      <el-checkbox-button value="banana">香蕉</el-checkbox-button>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p class="mb-2">多选（带有边框）</p>
+    <el-checkbox-group
+      v-model="checkboxGroupBox"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox value="cucumber" border>黄瓜</el-checkbox>
+      <el-checkbox value="onion" border>洋葱</el-checkbox>
+      <el-checkbox value="blueberry" border>蓝莓</el-checkbox>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p class="mb-2">多选（来点不一样的体验）</p>
+    <el-checkbox-group
+      v-model="checkboxGroupCustom"
+      class="pure-checkbox"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox-button value="tomato">
+        <span class="flex">
+          <IconifyIconOnline icon="streamline-emojis:tomato" class="mr-1" />
+          番茄
+        </span>
+      </el-checkbox-button>
+      <el-checkbox-button value="watermelon">
+        <span class="flex">
+          <IconifyIconOnline
+            icon="streamline-emojis:watermelon-1"
+            class="mr-1"
+          />
+          西瓜
+        </span>
+      </el-checkbox-button>
+      <el-checkbox-button value="strawberry">
+        <span class="flex">
+          <IconifyIconOnline
+            icon="streamline-emojis:strawberry-1"
+            class="mr-1"
+          />
+          草莓
+        </span>
+      </el-checkbox-button>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p>可控制间距的按钮样式</p>
+    <el-slider
+      v-model="spaceSize"
+      class="mb-2 !w-[300px]"
+      :show-tooltip="false"
+      :disabled="size === 'disabled'"
+    />
+    <p class="mb-2">单选</p>
+    <el-space wrap :size="spaceSize">
+      <el-check-tag
+        v-for="(tag, index) in checkTag"
+        :key="index"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
+        :checked="tag.checked"
+        @change="onChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <p class="mb-2 mt-4">
+      多选
+      {{
+        getKeyList(
+          checkGroupTag.filter(tag => tag.checked),
+          "title"
+        )
+      }}
+    </p>
+    <el-space wrap :size="spaceSize">
+      <el-check-tag
+        v-for="(tag, index) in checkGroupTag"
+        :key="index"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
+        :checked="tag.checked"
+        @change="onGroupChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <el-divider />
+
+    <p class="mb-2">单个可选按钮</p>
+    <el-check-tag
+      :class="[
+        'select-none',
+        size === 'disabled' && 'tag-disabled',
+        checked && 'is-active'
+      ]"
+      :checked="checked"
+      @change="onSingleChecked"
+    >
+      一个人也要努力 😊
+    </el-check-tag>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+
+:deep(.pure-checkbox) {
+  .el-checkbox-button {
+    /* 选中时的自定义样式 */
+    &.is-checked {
+      .el-checkbox-button__inner {
+        color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-8);
+        border-color: transparent;
+        border-left-color: #fff;
+      }
+    }
+
+    /* 禁用时的自定义样式 */
+    &.is-disabled {
+      .el-checkbox-button__inner {
+        color: var(--el-disabled-text-color);
+        background-color: var(
+          --el-button-disabled-bg-color,
+          var(--el-fill-color-blank)
+        );
+        border-color: var(
+          --el-button-disabled-border-color,
+          var(--el-border-color-light)
+        );
+      }
+    }
+  }
+}
+
+/** 可控制间距的按钮禁用样式 */
+.tag-disabled {
+  color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+  background-color: var(--el-color-info-light-9);
+
+  &:hover {
+    background-color: var(--el-color-info-light-9);
+  }
+
+  &.is-active {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/check-card.vue b/Yi.Pure.Vue3/src/views/components/check-card.vue
new file mode 100644
index 00000000..6288e99f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/check-card.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+// https://plus-pro-components.com/components/check-card-group.html
+import "plus-pro-components/es/components/check-card-group/style/css";
+import { PlusCheckCardGroup } from "plus-pro-components";
+
+defineOptions({
+  name: "CheckCard"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+const list = ref("0");
+const list1 = ref([]);
+
+const options = [
+  {
+    title: "标题一",
+    value: "0",
+    description: "坚持梦想，成就不凡的自己",
+    avatar:
+      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+  },
+  {
+    title: "标题二",
+    value: "1",
+    description: "每一次努力，都是成长的契机",
+    avatar:
+      "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
+  }
+];
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://plus-pro-components.com/components/check-card-group.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            多选卡片组
+          </el-link>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+            <el-radio value="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-card.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/check-card.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2 mt-4">单选</p>
+    <PlusCheckCardGroup
+      v-model="list"
+      :options="options"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">多选</p>
+    <PlusCheckCardGroup
+      v-model="list1"
+      :options="options"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      multiple
+    />
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/collapse.vue b/Yi.Pure.Vue3/src/views/components/collapse.vue
new file mode 100644
index 00000000..530042df
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/collapse.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "Collapse"
+});
+
+const radio = ref();
+const collapseRef = ref();
+const activeNames = ref(["1", "2", "3", "4", "5"]);
+const isOpen = ref(true);
+
+function onClick() {
+  isOpen.value
+    ? (activeNames.value = [])
+    : radio.value === "accordion"
+      ? (activeNames.value = ["5"])
+      : (activeNames.value = ["1", "2", "3", "4", "5"]);
+  isOpen.value = !isOpen.value;
+}
+
+const handleChange = (val: string[]) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/collapse.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            折叠面板
+          </el-link>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/collapse.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/collapse.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">基础用法</p>
+    <el-radio-group v-model="radio" class="mb-3">
+      <el-radio value="">可同时展开多个面板</el-radio>
+      <el-radio value="accordion">每次只能展开一个面板</el-radio>
+    </el-radio-group>
+    <el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
+      外部触发打开、关闭
+    </el-button>
+    <el-collapse
+      ref="collapseRef"
+      v-model="activeNames"
+      class="w-[360px]"
+      :accordion="radio === 'accordion' ? true : false"
+      @change="handleChange"
+    >
+      <el-collapse-item title="周一" name="1">
+        周一启航，新的篇章
+      </el-collapse-item>
+      <el-collapse-item title="周二" name="2">
+        周二律动，携手共进
+      </el-collapse-item>
+      <el-collapse-item title="周三" name="3">
+        周三昂扬，激情不减
+      </el-collapse-item>
+      <el-collapse-item title="周四" name="4">
+        周四精进，事半功倍
+      </el-collapse-item>
+      <el-collapse-item name="5">
+        <template #title>
+          周五
+          <IconifyIconOnline
+            icon="streamline-emojis:beaming-face-with-smiling-eyes"
+            class="ml-1"
+            width="30"
+          />
+        </template>
+        周五喜悦，收尾归档
+      </el-collapse-item>
+    </el-collapse>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/color-picker.vue b/Yi.Pure.Vue3/src/views/components/color-picker.vue
new file mode 100644
index 00000000..c911b533
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/color-picker.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "ColorPicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+const isOpen = ref(false);
+const colorPickerRef = ref();
+
+const color = ref("rgba(255, 69, 0, 0.68)");
+const otherColor = ref("hsla(209, 100%, 56%, 0.73)");
+const predefineColors = ref([
+  "#ff4500",
+  "#ff8c00",
+  "#ffd700",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "rgba(255, 69, 0, 0.68)",
+  "rgb(255, 120, 0)",
+  "hsv(51, 100, 98)",
+  "hsva(120, 40, 94, 0.5)",
+  "hsl(181, 100%, 37%)",
+  "hsla(209, 100%, 56%, 0.73)",
+  "#c7158577"
+]);
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+
+function onClick() {
+  isOpen.value ? colorPickerRef.value.hide() : colorPickerRef.value.show();
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/color-picker.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            颜色选择器
+          </el-link>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+            <el-radio value="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/color-picker.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>
+    <el-color-picker
+      v-model="color"
+      show-alpha
+      :predefine="predefineColors"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+    <el-divider />
+
+    <p class="mb-2">外部触发器</p>
+    <el-space wrap>
+      <el-color-picker
+        ref="colorPickerRef"
+        v-model="otherColor"
+        show-alpha
+        :predefine="predefineColors"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-button
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        @click="onClick"
+      >
+        {{ isOpen ? "关闭" : "打开" }}
+      </el-button>
+    </el-space>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/contextmenu/basic.vue b/Yi.Pure.Vue3/src/views/components/contextmenu/basic.vue
new file mode 100644
index 00000000..f6d92219
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/contextmenu/basic.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <p class="mb-2">基础用法</p>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>GitHub</v-contextmenu-item>
+      <v-contextmenu-item>GitLab</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-submenu title="蔬菜菜">
+        <v-contextmenu-item>土豆</v-contextmenu-item>
+
+        <v-contextmenu-submenu title="青菜">
+          <v-contextmenu-item>小油菜</v-contextmenu-item>
+          <v-contextmenu-item>空心菜</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item>黄瓜</v-contextmenu-item>
+      </v-contextmenu-submenu>
+
+      <v-contextmenu-item disabled>菠萝蜜</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-item>哈密瓜</v-contextmenu-item>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+export default defineComponent({
+  name: "ExampleSimple",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/contextmenu/index.vue b/Yi.Pure.Vue3/src/views/components/contextmenu/index.vue
new file mode 100644
index 00000000..8e44ccea
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/contextmenu/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import basic from "./basic.vue";
+import menuGroup from "./menuGroup.vue";
+import menuDynamic from "./menuDynamic.vue";
+import "v-contextmenu/dist/themes/default.css";
+
+defineOptions({
+  name: "ContextMenu"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">右键菜单</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/contextmenu"
+          target="_blank"
+        >
+          代码位置 src/views/components/contextmenu
+        </el-link>
+      </div>
+    </template>
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 基础用法 -->
+        <basic />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 按钮组 -->
+        <menuGroup />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 动态菜单 -->
+        <menuDynamic />
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/contextmenu/menuDynamic.vue b/Yi.Pure.Vue3/src/views/components/contextmenu/menuDynamic.vue
new file mode 100644
index 00000000..c326c333
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/contextmenu/menuDynamic.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <p class="mb-2">动态菜单</p>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-group title="操作">
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">
+          添加菜单
+        </v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">
+          添加菜单组
+        </v-contextmenu-item>
+        <v-contextmenu-item
+          :hide-on-click="false"
+          @click="extra.push('submenu')"
+        >
+          添加子菜单
+        </v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.pop()">
+          删除
+        </v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <template v-for="(item, index) of extra" :key="index">
+        <v-contextmenu-divider />
+
+        <v-contextmenu-group
+          v-if="item === 'group'"
+          :title="`菜单组 ${index + 1}`"
+        >
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-group>
+
+        <v-contextmenu-submenu
+          v-else-if="item === 'submenu'"
+          :title="`子菜单 ${index + 1}`"
+        >
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
+      </template>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+export default defineComponent({
+  name: "ExampleDynamic",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  },
+
+  data() {
+    return {
+      extra: []
+    };
+  },
+
+  methods: {
+    addItem(type = "item") {
+      this.extra.push(type);
+    },
+    removeItem() {
+      this.extra.pop();
+    }
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  margin-bottom: 30px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/contextmenu/menuGroup.vue b/Yi.Pure.Vue3/src/views/components/contextmenu/menuGroup.vue
new file mode 100644
index 00000000..3f3a5af8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/contextmenu/menuGroup.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <p class="mb-2">按钮组</p>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>菜单</v-contextmenu-item>
+
+      <v-contextmenu-group>
+        <v-contextmenu-item>Github</v-contextmenu-item>
+        <v-contextmenu-item>Codepen</v-contextmenu-item>
+        <v-contextmenu-item disabled>Alipay</v-contextmenu-item>
+        <v-contextmenu-item>Wechat</v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-group title="按钮组">
+        <v-contextmenu-item>菜单1</v-contextmenu-item>
+        <v-contextmenu-item>菜单2</v-contextmenu-item>
+        <v-contextmenu-item disabled>菜单3</v-contextmenu-item>
+      </v-contextmenu-group>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+const ExampleSFC = defineComponent({
+  name: "ExampleSFC",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+
+export default ExampleSFC;
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/count-to.vue b/Yi.Pure.Vue3/src/views/components/count-to.vue
new file mode 100644
index 00000000..f1c2a898
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/count-to.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
+
+defineOptions({
+  name: "CountTo"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">数字动画</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/count-to.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/count-to.vue
+        </el-link>
+      </div>
+    </template>
+    <ReNormalCountTo
+      prefix="$"
+      :duration="1000"
+      :color="'#409EFF'"
+      :fontSize="'2em'"
+      :startVal="1"
+      :endVal="1000"
+    />
+    <br />
+    <ul class="flex">
+      <ReboundCountTo
+        v-for="(num, inx) of [1, 6, 6, 6]"
+        :key="inx"
+        :i="num"
+        :blur="inx"
+        :delay="inx + 1"
+      />
+    </ul>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/cropping/avatar.png b/Yi.Pure.Vue3/src/views/components/cropping/avatar.png
new file mode 100644
index 00000000..71ca2d1b
Binary files /dev/null and b/Yi.Pure.Vue3/src/views/components/cropping/avatar.png differ
diff --git a/Yi.Pure.Vue3/src/views/components/cropping/index.vue b/Yi.Pure.Vue3/src/views/components/cropping/index.vue
new file mode 100644
index 00000000..e010f51e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/cropping/index.vue
@@ -0,0 +1,89 @@
+<script setup lang="tsx">
+import avatar from "./avatar.png";
+import { ref, onBeforeUnmount } from "vue";
+import ReCropper from "@/components/ReCropper";
+import { formatBytes } from "@pureadmin/utils";
+
+defineOptions({
+  name: "Cropping"
+});
+
+const infos = ref();
+const popoverRef = ref();
+const refCropper = ref();
+const showPopover = ref(false);
+const cropperImg = ref<string>("");
+
+function onCropper({ base64, blob, info }) {
+  console.log(blob);
+  infos.value = info;
+  cropperImg.value = base64;
+}
+
+onBeforeUnmount(() => {
+  popoverRef.value.hide();
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          图片裁剪，基于开源的
+          <el-link
+            href="https://fengyuanchen.github.io/cropperjs/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            cropperjs
+          </el-link>
+          进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
+        target="_blank"
+      >
+        代码位置 src/views/components/cropping
+      </el-link>
+    </template>
+    <div v-loading="!showPopover" element-loading-background="transparent">
+      <el-popover
+        ref="popoverRef"
+        :visible="showPopover"
+        placement="right"
+        width="300px"
+      >
+        <template #reference>
+          <ReCropper
+            ref="refCropper"
+            class="w-[30vw]"
+            :src="avatar"
+            circled
+            @cropper="onCropper"
+            @readied="showPopover = true"
+          />
+        </template>
+        <div class="flex flex-wrap justify-center items-center text-center">
+          <el-image
+            v-if="cropperImg"
+            :src="cropperImg"
+            :preview-src-list="Array.of(cropperImg)"
+            fit="cover"
+          />
+          <div v-if="infos" class="mt-1">
+            <p>
+              图像大小：{{ parseInt(infos.width) }} ×
+              {{ parseInt(infos.height) }}像素
+            </p>
+            <p>
+              文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
+            </p>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/date-picker.vue b/Yi.Pure.Vue3/src/views/components/date-picker.vue
new file mode 100644
index 00000000..88e27a6f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/date-picker.vue
@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "DatePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+const value = ref("");
+const shortcuts = [
+  {
+    text: "今天",
+    value: new Date()
+  },
+  {
+    text: "昨天",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    }
+  },
+  {
+    text: "一周前",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    }
+  }
+];
+
+const disabledDate = (time: Date) => {
+  return time.getTime() > Date.now();
+};
+
+const value1 = ref("");
+const value2 = ref("");
+const value3 = ref("");
+const value4 = ref("");
+
+const value5 = ref("");
+const shortcuts1 = [
+  {
+    text: "上周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: "上个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: "三个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+
+const value6 = ref("");
+const shortcuts2 = [
+  {
+    text: "本月",
+    value: [new Date(), new Date()]
+  },
+  {
+    text: "今年",
+    value: () => {
+      const end = new Date();
+      const start = new Date(new Date().getFullYear(), 0);
+      return [start, end];
+    }
+  },
+  {
+    text: "六个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setMonth(start.getMonth() - 6);
+      return [start, end];
+    }
+  }
+];
+
+const value7 = ref("");
+const dateFormat = ref("");
+
+const value8 = ref("");
+
+const value9 = ref("2023-10-30");
+const holidays = [
+  "2023-10-22",
+  "2023-10-23",
+  "2023-10-24",
+  "2023-10-25",
+  "2023-10-26",
+  "2023-10-27",
+  "2023-10-28",
+  "2023-10-29",
+  "2023-10-30",
+  "2023-10-31"
+];
+
+const isHoliday = ({ dayjs }) => {
+  return holidays.includes(dayjs.format("YYYY-MM-DD"));
+};
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/date-picker.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            日期选择器
+          </el-link>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+            <el-radio value="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/date-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/date-picker.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">选择某一天</p>
+    <el-date-picker
+      v-model="value"
+      type="date"
+      class="!w-[160px]"
+      placeholder="请选择"
+      :disabled-date="disabledDate"
+      :shortcuts="shortcuts"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">选择周、月、年或多个日期</p>
+    <el-space wrap>
+      <el-date-picker
+        v-model="value1"
+        type="week"
+        class="!w-[160px]"
+        format="YYYY年第ww周"
+        placeholder="选择某年中的某周"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value2"
+        type="month"
+        class="!w-[160px]"
+        placeholder="选择某月"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value3"
+        type="year"
+        class="!w-[160px]"
+        placeholder="选择某年"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value4"
+        type="dates"
+        class="!w-[160px]"
+        placeholder="选择多个日期"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+    </el-space>
+
+    <p class="mb-2 mt-4">选择一段时间</p>
+    <el-date-picker
+      v-model="value5"
+      type="daterange"
+      class="!w-[240px]"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始时间"
+      end-placeholder="结束时间"
+      :shortcuts="shortcuts1"
+      :popper-options="{
+        placement: 'bottom-start' // 下拉面板出现的位置，或 'top-start'、'bottom-end'、'top-end' 等，具体看 https://popper.js.org/docs/v2/constructors/#options
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">选择月份范围</p>
+    <el-date-picker
+      v-model="value6"
+      type="monthrange"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      :shortcuts="shortcuts2"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">日期格式</p>
+    <el-radio-group
+      v-model="dateFormat"
+      class="mb-2"
+      :disabled="size === 'disabled'"
+      @change="value7 = ''"
+    >
+      <el-radio value="">Date</el-radio>
+      <el-radio value="YYYY-MM-DD">年月日</el-radio>
+      <el-radio value="x">时间戳</el-radio>
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-date-picker
+        v-model="value7"
+        type="date"
+        class="!w-[160px]"
+        placeholder="请选择日期"
+        format="YYYY/MM/DD"
+        :value-format="dateFormat"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <span class="ml-2">{{ value7 }}</span>
+    </el-space>
+
+    <p class="mb-2 mt-4">自定义前缀</p>
+    <el-date-picker
+      v-model="value8"
+      type="date"
+      class="!w-[160px]"
+      placeholder="请选择日期"
+      :prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">自定义内容</p>
+    <el-date-picker
+      v-model="value9"
+      type="date"
+      placeholder="请选择日期"
+      format="YYYY/MM/DD"
+      value-format="YYYY-MM-DD"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <template #default="cell">
+        <div class="cell" :class="{ current: cell.isCurrent }">
+          <span class="text">{{ cell.text }}</span>
+          <span v-if="isHoliday(cell)" class="holiday" />
+        </div>
+      </template>
+    </el-date-picker>
+  </el-card>
+</template>
+
+<style scoped>
+.cell {
+  box-sizing: border-box;
+  height: 30px;
+  padding: 3px 0;
+}
+
+.cell .text {
+  position: absolute;
+  left: 50%;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 0 auto;
+  line-height: 24px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+
+.cell.current .text {
+  color: #fff;
+  background: #626aef;
+}
+
+.cell .holiday {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background: var(--el-color-danger);
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/datetime-picker.vue b/Yi.Pure.Vue3/src/views/components/datetime-picker.vue
new file mode 100644
index 00000000..eebe1b39
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/datetime-picker.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "DateTimePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+const value = ref("");
+const shortcuts = [
+  {
+    text: "今天",
+    value: new Date()
+  },
+  {
+    text: "昨天",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    }
+  },
+  {
+    text: "一周前",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    }
+  }
+];
+
+const value1 = ref("");
+const datetimeFormat = ref("");
+
+const value2 = ref("");
+const shortcuts1 = [
+  {
+    text: "上周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: "上个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: "三个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+
+const value3 = ref("");
+const datePickerRef = ref();
+const placement = ref("auto");
+const checkTag = ref([
+  {
+    title: "auto", // https://popper.js.org/docs/v2/constructors/#options
+    checked: false
+  },
+  {
+    title: "auto-start",
+    checked: false
+  },
+  {
+    title: "auto-end",
+    checked: false
+  },
+  {
+    title: "top",
+    checked: false
+  },
+  {
+    title: "top-start",
+    checked: false
+  },
+  {
+    title: "top-end",
+    checked: false
+  },
+  {
+    title: "bottom",
+    checked: false
+  },
+  {
+    title: "bottom-start",
+    checked: false
+  },
+  {
+    title: "bottom-end",
+    checked: false
+  },
+  {
+    title: "right",
+    checked: false
+  },
+  {
+    title: "right-start",
+    checked: false
+  },
+  {
+    title: "right-end",
+    checked: false
+  },
+  {
+    title: "left",
+    checked: false
+  },
+  {
+    title: "left-start",
+    checked: false
+  },
+  {
+    title: "left-end",
+    checked: false
+  }
+]);
+const curTagMap = ref({});
+function onChecked(tag, index) {
+  if (size.value === "disabled") return;
+  placement.value = tag.title;
+  curTagMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkTag.value.map(item => (item.checked = false));
+  checkTag.value[index].checked = curTagMap.value[index].checked;
+  // 外部触发日期时间选择面板的打开与关闭
+  curTagMap.value[index].checked
+    ? datePickerRef.value.handleOpen()
+    : datePickerRef.value.handleClose();
+}
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never" :style="{ height: '100vh' }">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/datetime-picker.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            日期时间选择器
+          </el-link>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+            <el-radio value="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/datetime-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/datetime-picker.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">日期和时间点</p>
+    <el-date-picker
+      v-model="value"
+      type="datetime"
+      class="!w-[200px]"
+      placeholder="请选择日期时间"
+      :shortcuts="shortcuts"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">日期时间格式</p>
+    <el-radio-group
+      v-model="datetimeFormat"
+      class="mb-2"
+      :disabled="size === 'disabled'"
+      @change="value1 = ''"
+    >
+      <el-radio value="">Date</el-radio>
+      <el-radio value="YYYY-MM-DD HH:mm:ss">年月日 时分秒</el-radio>
+      <el-radio value="x">时间戳</el-radio>
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        class="!w-[200px]"
+        placeholder="请选择日期时间"
+        format="YYYY/MM/DD hh:mm:ss"
+        :value-format="datetimeFormat"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <span class="ml-2">{{ value1 }}</span>
+    </el-space>
+
+    <p class="mb-2 mt-4">日期和时间范围</p>
+    <el-date-picker
+      v-model="value2"
+      type="datetimerange"
+      :shortcuts="shortcuts1"
+      range-separator="至"
+      start-placeholder="开始日期时间"
+      end-placeholder="结束日期时间"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">
+      弹出面板位置可控（如果弹出位置不足以完整展示面板会自动调整位置）
+    </p>
+    <el-space wrap class="w-[400px]">
+      <el-check-tag
+        v-for="(tag, index) in checkTag"
+        :key="index"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
+        :checked="tag.checked"
+        @change="onChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <el-date-picker
+      ref="datePickerRef"
+      v-model="value3"
+      type="datetime"
+      class="ml-[15%]"
+      placeholder="请选择日期时间"
+      :popper-options="{
+        placement
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.tag-disabled {
+  color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+  background-color: var(--el-color-info-light-9);
+
+  &:hover {
+    background-color: var(--el-color-info-light-9);
+  }
+
+  &.is-active {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/dialog/form.vue b/Yi.Pure.Vue3/src/views/components/dialog/form.vue
new file mode 100644
index 00000000..f5383d6a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/dialog/form.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+// 声明 props 类型
+export interface FormProps {
+  formInline: {
+    user: string;
+    region: string;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({ user: "", region: "" })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const newFormInline = ref(props.formInline);
+</script>
+
+<template>
+  <el-form :model="newFormInline">
+    <el-form-item label="姓名">
+      <el-input
+        v-model="newFormInline.user"
+        class="!w-[220px]"
+        placeholder="请输入姓名"
+      />
+    </el-form-item>
+    <el-form-item label="城市">
+      <el-select
+        v-model="newFormInline.region"
+        class="!w-[220px]"
+        placeholder="请选择城市"
+      >
+        <el-option label="上海" value="上海" />
+        <el-option label="浙江" value="浙江" />
+        <el-option label="深圳" value="深圳" />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/dialog/formPrimitive.vue b/Yi.Pure.Vue3/src/views/components/dialog/formPrimitive.vue
new file mode 100644
index 00000000..af4bc34c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/dialog/formPrimitive.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+
+// 声明 props 类型
+export interface FormProps {
+  data: string;
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  data: () => ""
+});
+
+// 使用 vueuse 的双向绑定工具
+const emit = defineEmits(["update:data"]);
+const data = useVModel(props, "data", emit);
+</script>
+
+<template>
+  <el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/dialog/index.vue b/Yi.Pure.Vue3/src/views/components/dialog/index.vue
new file mode 100644
index 00000000..8f045da7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/dialog/index.vue
@@ -0,0 +1,555 @@
+<script setup lang="tsx">
+import { useRouter } from "vue-router";
+import { h, createVNode, ref } from "vue";
+import { message } from "@/utils/message";
+import formPrimitive from "./formPrimitive.vue";
+import forms, { type FormProps } from "./form.vue";
+import { cloneDeep, debounce } from "@pureadmin/utils";
+import {
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+} from "@/components/ReDialog";
+
+defineOptions({
+  name: "DialogPage"
+});
+
+const router = useRouter();
+
+function onBaseClick() {
+  addDialog({
+    title: "基础用法",
+    contentRenderer: () => <p>弹框内容-基础用法</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
+  });
+}
+
+function onDraggableClick() {
+  addDialog({
+    title: "可拖拽",
+    draggable: true,
+    contentRenderer: () => h("p", "弹框内容-可拖拽") // h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
+  });
+}
+
+function onFullscreenClick() {
+  addDialog({
+    title: "全屏",
+    fullscreen: true,
+    contentRenderer: () => createVNode("p", null, "弹框内容-全屏") // createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
+  });
+}
+
+function onFullscreenIconClick() {
+  addDialog({
+    title: "全屏按钮和全屏事件",
+    fullscreenIcon: true,
+    fullscreenCallBack: ({ options, index }) =>
+      message(options.fullscreen ? "全屏" : "非全屏"),
+    contentRenderer: () => <p>弹框内容-全屏按钮和全屏事件</p>
+  });
+}
+
+function onModalClick() {
+  addDialog({
+    title: "无背景遮罩层",
+    modal: false,
+    contentRenderer: () => <p>弹框内容-无背景遮罩层</p>
+  });
+}
+
+function onStyleClick() {
+  addDialog({
+    title: "自定义弹出位置",
+    top: "60vh",
+    style: { marginRight: "20px" },
+    contentRenderer: () => <p>弹框内容-自定义弹出位置</p>
+  });
+}
+
+// 添加 600ms 防抖
+const onoOpenDelayClick = debounce(
+  () =>
+    addDialog({
+      title: "延时2秒打开弹框",
+      openDelay: 2000 - 600,
+      contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
+    }),
+  600
+);
+
+function onCloseDelayClick() {
+  addDialog({
+    title: "延时2秒关闭弹框",
+    closeDelay: 2000,
+    contentRenderer: () => <p>弹框内容-延时2秒关闭弹框</p>
+  });
+}
+
+function onShowCloseClick() {
+  addDialog({
+    title: "不显示右上角关闭按钮图标",
+    showClose: false,
+    contentRenderer: () => <p>弹框内容-不显示右上角关闭按钮图标</p>
+  });
+}
+
+function onBeforeCloseClick() {
+  addDialog({
+    title: "禁止通过键盘ESC关闭",
+    closeOnPressEscape: false,
+    contentRenderer: () => <p>弹框内容-禁止通过键盘ESC关闭</p>
+  });
+}
+
+function onCloseOnClickModalClick() {
+  addDialog({
+    title: "禁止通过点击modal关闭",
+    closeOnClickModal: false,
+    contentRenderer: () => <p>弹框内容-禁止通过点击modal关闭</p>
+  });
+}
+
+function onHideFooterClick() {
+  addDialog({
+    title: "隐藏底部取消、确定按钮",
+    hideFooter: true,
+    contentRenderer: () => <p>弹框内容-隐藏底部取消、确定按钮</p>
+  });
+}
+
+function onHeaderRendererClick() {
+  addDialog({
+    title: "自定义头部",
+    showClose: false,
+    headerRenderer: ({ close, titleId, titleClass }) => (
+      // jsx 语法
+      <div class="flex flex-row justify-between">
+        <h4 id={titleId} class={titleClass}>
+          自定义头部
+        </h4>
+        <el-button type="danger" onClick={close}>
+          关闭
+        </el-button>
+      </div>
+    ),
+    contentRenderer: () => <p>弹框内容-自定义头部</p>
+  });
+}
+
+function onFooterRendererClick() {
+  addDialog({
+    title: "自定义底部",
+    footerRenderer: ({ options, index }) => (
+      <el-button onClick={() => closeDialog(options, index)}>
+        {options.title}-{index}
+      </el-button>
+    ),
+    contentRenderer: () => <p>弹框内容-自定义底部</p>
+  });
+}
+
+function onFooterButtonsClick() {
+  addDialog({
+    title: "自定义底部按钮",
+    footerButtons: [
+      {
+        label: "按钮1",
+        size: "small",
+        type: "success",
+        btnClick: ({ dialog: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDialog(options, index);
+        }
+      },
+      {
+        label: "按钮2",
+        text: true,
+        bg: true,
+        btnClick: ({ dialog: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDialog(options, index);
+        }
+      },
+      {
+        label: "按钮3",
+        size: "large",
+        type: "warning",
+        btnClick: ({ dialog: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDialog(options, index);
+        }
+      }
+    ],
+    contentRenderer: () => <p>弹框内容-自定义底部按钮</p>
+  });
+}
+
+function onOpenClick() {
+  addDialog({
+    title: "打开后的回调",
+    open: ({ options, index }) => message({ options, index } as any),
+    contentRenderer: () => <p>弹框内容-打开后的回调</p>
+  });
+}
+
+function onCloseCallBackClick() {
+  addDialog({
+    title: "关闭后的回调",
+    closeCallBack: ({ options, index, args }) => {
+      console.log(options, index, args);
+      let text = "";
+      if (args?.command === "cancel") {
+        text = "您点击了取消按钮";
+      } else if (args?.command === "sure") {
+        text = "您点击了确定按钮";
+      } else {
+        text = "您点击了右上角关闭按钮或空白页或按下了esc键";
+      }
+      message(text);
+    },
+    contentRenderer: () => <p>弹框内容-关闭后的回调</p>
+  });
+}
+
+// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
+function onNestingClick() {
+  addDialog({
+    title: "嵌套的弹框",
+    contentRenderer: ({ index }) => (
+      <el-button
+        onClick={() =>
+          addDialog({
+            title: `第${index + 1}个子弹框`,
+            width: "40%",
+            contentRenderer: ({ index }) => (
+              <el-button
+                onClick={() =>
+                  addDialog({
+                    title: `第${index + 1}个子弹框`,
+                    width: "30%",
+                    contentRenderer: () => (
+                      <>
+                        <el-button round onClick={() => closeAllDialog()}>
+                          哎呦，你干嘛，赶快关闭所有弹框
+                        </el-button>
+                      </>
+                    )
+                  })
+                }
+              >
+                点击打开第{index + 1}个子弹框
+              </el-button>
+            )
+          })
+        }
+      >
+        点击打开第{index + 1}个子弹框
+      </el-button>
+    )
+  });
+}
+
+// 满足在 contentRenderer 内容区更改弹框自身属性值的场景
+function onUpdateClick() {
+  const curPage = ref(1);
+  addDialog({
+    title: `第${curPage.value}页`,
+    contentRenderer: () => (
+      <>
+        <el-button
+          disabled={curPage.value > 1 ? false : true}
+          onClick={() => {
+            curPage.value -= 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          上一页
+        </el-button>
+        <el-button
+          onClick={() => {
+            curPage.value += 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          下一页
+        </el-button>
+      </>
+    )
+  });
+}
+
+// popconfirm 确认框
+function onPopconfirmClick() {
+  addDialog({
+    width: "30%",
+    title: "popconfirm确认框示例",
+    popconfirm: { title: "是否确认修改当前数据" },
+    contentRenderer: () => <p>点击右下方确定按钮看看效果吧</p>
+  });
+}
+
+// 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
+function onFormOneClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第一种方式）",
+    contentRenderer: () => forms,
+    props: {
+      // 赋默认值
+      formInline: {
+        user: "菜虚鲲",
+        region: "浙江"
+      }
+    },
+    closeCallBack: ({ options, args }) => {
+      // options.props 是响应式的
+      const { formInline } = options.props as FormProps;
+      const text = `姓名：${formInline.user} 城市：${formInline.region}`;
+      if (args?.command === "cancel") {
+        // 您点击了取消按钮
+        message(`您点击了取消按钮，当前表单数据为 ${text}`);
+      } else if (args?.command === "sure") {
+        message(`您点击了确定按钮，当前表单数据为 ${text}`);
+      } else {
+        message(
+          `您点击了右上角关闭按钮或空白页或按下了esc键，当前表单数据为 ${text}`
+        );
+      }
+    }
+  });
+}
+
+// 结合Form表单（第二种方式）h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
+const formInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormInline = cloneDeep(formInline.value);
+function onFormTwoClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第二种方式）",
+    contentRenderer: () =>
+      h(forms, {
+        formInline: formInline.value
+      }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
+      );
+      // 重置表单数据
+      formInline.value = cloneDeep(resetFormInline);
+    }
+  });
+}
+
+// 结合Form表单（第三种方式）createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
+const formThreeInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormThreeInline = cloneDeep(formThreeInline.value);
+function onFormThreeClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第三种方式）",
+    contentRenderer: () =>
+      createVNode(forms, {
+        formInline: formThreeInline.value
+      }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
+      );
+      // 重置表单数据
+      formThreeInline.value = cloneDeep(resetFormThreeInline);
+    }
+  });
+}
+
+// 结合Form表单（第四种方式）使用jsx语法
+// 需要注意的是如果 forms 没注册，这里 forms 注册了是因为上面 contentRenderer: () => forms、h(forms) 、createVNode(createVNode) 间接给注册了
+// 如果只使用了jsx语法，如下 `contentRenderer: () => <forms formInline={formFourInline.value} />` 是不会给 forms 组件进行注册的，需要在 `script` 中任意位置（最好是末尾）写上 forms 即可
+// 同理如果在 tsx 文件中，这么使用 `contentRenderer: () => <forms formInline={formFourInline.value} />`，也是不会给 forms 组件进行注册，需要在 return 中写上 forms
+const formFourInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormFourInline = cloneDeep(formFourInline.value);
+function onFormFourClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第四种方式）",
+    contentRenderer: () => <forms formInline={formFourInline.value} />,
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formFourInline.value.user} 城市：${formFourInline.value.region}`
+      );
+      // 重置表单数据
+      formFourInline.value = cloneDeep(resetFormFourInline);
+    }
+  });
+}
+
+// 子组件 prop 为 primitive 类型的 demo
+const formPrimitiveParam = ref("Hello World");
+const resetFormPrimitiveParam = ref(formPrimitiveParam.value);
+function onFormPrimitiveFormClick() {
+  addDialog({
+    width: "30%",
+    title: "子组件 prop 为 primitive 类型 demo",
+    contentRenderer: () =>
+      h(formPrimitive, {
+        data: formPrimitiveParam.value,
+        "onUpdate:data": val => (formPrimitiveParam.value = val)
+      }),
+    closeCallBack: () => {
+      message(`当前表单内容：${formPrimitiveParam.value}`);
+      // 重置表单数据
+      formPrimitiveParam.value = resetFormPrimitiveParam.value;
+    }
+  });
+}
+
+function onBeforeCancelClick() {
+  addDialog({
+    title: "点击底部取消按钮的回调",
+    contentRenderer: () => (
+      <p>弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）</p>
+    ),
+    beforeCancel: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onBeforeSureClick() {
+  addDialog({
+    title: "点击底部确定按钮的回调",
+    contentRenderer: () => (
+      <p>
+        弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
+      </p>
+    ),
+    beforeSure: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onSureBtnLoading() {
+  addDialog({
+    sureBtnLoading: true,
+    title: "点击底部确定按钮可开启按钮动画",
+    contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
+    beforeSure: (done, { closeLoading }) => {
+      // closeLoading() // 关闭确定按钮动画，不关闭弹框
+      // done() // 关闭确定按钮动画并关闭弹框
+      setTimeout(() => done(), 800);
+    }
+  });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          二次封装 Element Plus 的
+          <el-link
+            href="https://element-plus.org/zh-CN/component/dialog.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Dialog
+          </el-link>
+          ，采用函数式调用弹框组件（更多操作实例请参考
+          <span
+            class="cursor-pointer text-primary"
+            @click="router.push({ name: 'SystemDept' })"
+          >
+            系统管理页面
+          </span>
+          ）
+        </span>
+      </div>
+      <el-link
+        href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/dialog"
+        target="_blank"
+      >
+        代码位置 src/views/components/dialog
+      </el-link>
+    </template>
+    <el-space wrap>
+      <el-button @click="onBaseClick"> 基础用法 </el-button>
+      <el-button @click="onDraggableClick"> 可拖拽 </el-button>
+      <el-button @click="onFullscreenClick"> 全屏 </el-button>
+      <el-button @click="onFullscreenIconClick"> 全屏按钮和全屏事件 </el-button>
+      <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
+      <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
+      <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>
+      <el-button @click="onCloseDelayClick"> 延时2秒关闭弹框 </el-button>
+      <el-button @click="onShowCloseClick">
+        不显示右上角关闭按钮图标
+      </el-button>
+      <el-button @click="onBeforeCloseClick"> 禁止通过键盘ESC关闭 </el-button>
+      <el-button @click="onCloseOnClickModalClick">
+        禁止通过点击modal关闭
+      </el-button>
+      <el-button @click="onHideFooterClick"> 隐藏底部取消、确定按钮 </el-button>
+      <el-button @click="onHeaderRendererClick"> 自定义头部 </el-button>
+      <el-button @click="onFooterRendererClick"> 自定义底部 </el-button>
+      <el-button @click="onFooterButtonsClick"> 自定义底部按钮 </el-button>
+      <el-button @click="onOpenClick"> 打开后的回调 </el-button>
+      <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
+      <el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
+      <el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
+      <el-button @click="onPopconfirmClick">popconfirm确认框</el-button>
+    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onFormOneClick">
+        结合Form表单（第一种方式）
+      </el-button>
+      <el-button @click="onFormTwoClick">
+        结合Form表单（第二种方式）
+      </el-button>
+      <el-button @click="onFormThreeClick">
+        结合Form表单（第三种方式）
+      </el-button>
+      <el-button @click="onFormFourClick">
+        结合Form表单（第四种方式）
+      </el-button>
+      <el-button @click="onFormPrimitiveFormClick">
+        子组件 prop 为 primitive 类型
+      </el-button>
+    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onBeforeCancelClick">
+        点击底部取消按钮的回调（会暂停弹框的关闭）
+      </el-button>
+      <el-button @click="onBeforeSureClick">
+        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
+      </el-button>
+      <el-button @click="onSureBtnLoading">
+        点击底部确定按钮可开启按钮动画
+      </el-button>
+    </el-space>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/el-button.vue b/Yi.Pure.Vue3/src/views/components/el-button.vue
new file mode 100644
index 00000000..9e9404a2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/el-button.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useDark } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "PureButton"
+});
+
+const { isDark } = useDark();
+const size = ref("default");
+const dynamicSize = ref();
+
+const baseRadio = ref("default");
+const buttonList = [
+  {
+    type: "",
+    text: "Default",
+    icon: "ep:search"
+  },
+  {
+    type: "primary",
+    text: "Primary",
+    icon: "ep:edit"
+  },
+  {
+    type: "success",
+    text: "Success",
+    icon: "ep:check"
+  },
+  {
+    type: "info",
+    text: "Info",
+    icon: "ep:message"
+  },
+  {
+    type: "warning",
+    text: "Warning",
+    icon: "ep:star"
+  },
+  {
+    type: "danger",
+    text: "Danger",
+    icon: "ep:delete"
+  }
+];
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/button.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            Button 按钮
+          </el-link>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+            <el-radio value="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/el-button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/el-button.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">基础按钮</p>
+    <el-radio-group v-model="baseRadio" class="mb-3">
+      <el-radio label="default" value="default" />
+      <el-radio label="plain" value="plain" />
+      <el-radio label="round" value="round" />
+      <el-radio label="circle" value="circle" />
+      <el-radio label="link" value="link" />
+      <el-radio label="text" value="text" />
+      <el-radio label="text-bg" value="text-bg" />
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-button
+        v-for="(button, index) in buttonList"
+        :key="index"
+        :type="button.type as any"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :plain="baseRadio === 'plain'"
+        :round="baseRadio === 'round'"
+        :circle="baseRadio === 'circle'"
+        :link="baseRadio === 'link'"
+        :text="baseRadio === 'text' || baseRadio === 'text-bg'"
+        :bg="baseRadio === 'text-bg'"
+        :icon="useRenderIcon(button.icon)"
+      >
+        <template v-if="baseRadio !== 'circle'" #default>
+          <p>{{ button.text }}</p>
+        </template>
+      </el-button>
+    </el-space>
+    <el-divider />
+
+    <p class="mb-4">加载状态按钮</p>
+    <el-button
+      text
+      bg
+      type="primary"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading="size !== 'disabled'"
+    >
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-button
+      type="primary"
+      plain
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading-icon="useRenderIcon('ep:eleme')"
+      :loading="size !== 'disabled'"
+    >
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-button
+      type="primary"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading="size !== 'disabled'"
+    >
+      <template #loading>
+        <div class="custom-loading">
+          <svg class="circular" viewBox="-10, -10, 50, 50">
+            <path
+              class="path"
+              d="
+            M 30 15
+            L 28 17
+            M 25.61 25.61
+            A 15 15, 0, 0, 1, 15 30
+            A 15 15, 0, 1, 1, 27.99 7.5
+            L 15 15
+          "
+              style="fill: rgb(0 0 0 / 0%); stroke-width: 4px"
+            />
+          </svg>
+        </div>
+      </template>
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-divider />
+
+    <p class="mb-4">自定义元素标签。例如：按钮、div、链接</p>
+    <el-button :size="dynamicSize" :disabled="size === 'disabled'">
+      button 标签
+    </el-button>
+    <el-button
+      tag="div"
+      role="button"
+      tabindex="0"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      div 标签
+    </el-button>
+    <el-button
+      type="primary"
+      tag="a"
+      :href="
+        size === 'disabled'
+          ? 'javascript:void(0);'
+          : 'https://element-plus.org/zh-CN/component/button.html#tag'
+      "
+      :target="size === 'disabled' ? '_self' : '_blank'"
+      rel="noopener noreferrer"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      a 链接
+    </el-button>
+    <el-divider />
+
+    <p class="mb-4">自定义颜色</p>
+    <el-space wrap>
+      <el-button
+        color="#626aef"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :dark="isDark"
+      >
+        Default
+      </el-button>
+      <el-button
+        color="#626aef"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :dark="isDark"
+        plain
+      >
+        Plain
+      </el-button>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+
+.el-button .custom-loading .circular {
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  animation: loading-rotate 2s linear infinite;
+}
+
+.el-button .custom-loading .circular .path {
+  stroke: var(--el-button-text-color);
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-width: 2;
+  animation: loading-dash 1.5s ease-in-out infinite;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/icon-select.vue b/Yi.Pure.Vue3/src/views/components/icon-select.vue
new file mode 100644
index 00000000..d098b0bf
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/icon-select.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { IconSelect } from "@/components/ReIcon";
+
+defineOptions({
+  name: "IconSelect"
+});
+
+const icon = ref("ep:add-location");
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">图标选择器</span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/icon-select.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/icon-select.vue
+      </el-link>
+    </template>
+    <IconSelect v-model="icon" class="w-[200px]" />
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/json-editor.vue b/Yi.Pure.Vue3/src/views/components/json-editor.vue
new file mode 100644
index 00000000..53817f9a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/json-editor.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { reactive, watch } from "vue";
+import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
+
+defineOptions({
+  name: "JsonEditor"
+});
+
+const defaultData = {
+  status: 200,
+  text: "",
+  error: null,
+  config: undefined,
+  data: [
+    {
+      news_id: 51184,
+      title: "iPhone X Review: Innovative future with real black technology",
+      source: "Netease phone"
+    },
+    {
+      news_id: 51183,
+      title:
+        "Traffic paradise: How to design streets for people and unmanned vehicles in the future?",
+      source: "Netease smart",
+      link: "http://netease.smart/traffic-paradise/1235"
+    },
+    {
+      news_id: 51182,
+      title:
+        "Teslamask's American Business Relations: The government does not pay billions to build factories",
+      source: "AI Finance",
+      members: ["Daniel", "Mike", "John"]
+    }
+  ]
+};
+
+const state = reactive({
+  val: JSON.stringify(defaultData),
+  data: defaultData,
+  showLine: true,
+  showLineNumber: true,
+  showDoubleQuotes: true,
+  showLength: true,
+  editable: true,
+  showIcon: true,
+  editableTrigger: "click",
+  deep: 3
+});
+
+watch(
+  () => state.val,
+  newVal => {
+    try {
+      state.data = JSON.parse(newVal);
+    } catch (err) {
+      // console.log('JSON ERROR');
+    }
+  }
+);
+
+watch(
+  () => state.data,
+  newVal => {
+    try {
+      state.val = JSON.stringify(newVal);
+    } catch (err) {
+      // console.log('JSON ERROR');
+    }
+  }
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          JSON编辑器，采用开源的
+          <el-link
+            href="https://github.com/leezng/vue-json-pretty"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vue-json-pretty
+          </el-link>
+          （支持大数据量）。
+        </span>
+        <span class="font-medium">
+          当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
+          <el-link
+            href="https://github.com/surmon-china/vue-codemirror"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            codemirror6
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/json-editor.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/json-editor.vue
+      </el-link>
+    </template>
+    <vue-json-pretty
+      v-model:data="state.data"
+      :deep="state.deep"
+      :show-double-quotes="state.showDoubleQuotes"
+      :show-line="state.showLine"
+      :show-length="state.showLength"
+      :show-icon="state.showIcon"
+      :show-line-number="state.showLineNumber"
+      :editable="state.editable"
+      :editable-trigger="state.editableTrigger as any"
+    />
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/message.vue b/Yi.Pure.Vue3/src/views/components/message.vue
new file mode 100644
index 00000000..16e8104a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/message.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { h } from "vue";
+import hot from "@/assets/svg/hot.svg?component";
+import { message, closeAllMessage } from "@/utils/message";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Check from "@iconify-icons/ep/check";
+
+defineOptions({
+  name: "Message"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"> 消息提示 </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/message.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/message.vue
+      </el-link>
+    </template>
+
+    <h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4>
+
+    <el-space wrap>
+      <el-button
+        type="info"
+        @click="message('Info类型消息', { customClass: 'el' })"
+      >
+        Info
+      </el-button>
+      <el-button
+        type="success"
+        @click="
+          message('Success类型消息', { customClass: 'el', type: 'success' })
+        "
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="
+          message('Warning类型消息', { customClass: 'el', type: 'warning' })
+        "
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { customClass: 'el', type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button
+        @click="message('可关闭消息', { customClass: 'el', showClose: true })"
+      >
+        可关闭
+      </el-button>
+      <el-button
+        @click="
+          message('分组消息合并', {
+            customClass: 'el',
+            type: 'success',
+            grouping: true
+          })
+        "
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            customClass: 'el',
+            icon: useRenderIcon(Check)
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            customClass: 'el',
+            duration: 3000,
+            onClose: () =>
+              message('消息已关闭', { customClass: 'el', type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ]),
+            { customClass: 'el' }
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            customClass: 'el',
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <h4 class="mb-4">
+      类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage
+      样式改版，不会影响 ElMessage
+      原本样式，使用和打包大小成本极低并适配整体暗色风格）
+    </h4>
+
+    <el-space wrap>
+      <el-button type="info" @click="message('Info类型消息')">Info</el-button>
+      <el-button
+        type="success"
+        @click="message('Success类型消息', { type: 'success' })"
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="message('Warning类型消息', { type: 'warning' })"
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button @click="message('可关闭消息', { showClose: true })">
+        可关闭
+      </el-button>
+      <el-button
+        @click="message('分组消息合并', { type: 'success', grouping: true })"
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            icon: hot
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            duration: 3000,
+            onClose: () => message('消息已关闭', { type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ])
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/progress.vue b/Yi.Pure.Vue3/src/views/components/progress.vue
new file mode 100644
index 00000000..3c70946b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/progress.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "PureProgress"
+});
+
+const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-link
+          v-tippy="{
+            content: '点击查看详细文档'
+          }"
+          href="https://element-plus.org/zh-CN/component/progress.html"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          进度条
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/progress.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/progress.vue
+      </el-link>
+    </template>
+
+    <p class="mb-4">直线进度条动画</p>
+    <div class="w-1/4">
+      <el-progress indeterminate :percentage="50" class="mb-4" />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        :format="format"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="success"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="50"
+        status="exception"
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">进度条内显示百分比标识</p>
+    <div class="w-1/4">
+      <el-progress
+        :text-inside="true"
+        :stroke-width="26"
+        :percentage="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="24"
+        :percentage="100"
+        status="success"
+        striped
+        striped-flow
+        :duration="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="22"
+        :percentage="80"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+        striped
+        striped-flow
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">自定义内容</p>
+    <div class="w-1/4 demo-progress">
+      <el-progress :percentage="50">
+        <el-button text>自定义内容</el-button>
+      </el-progress>
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+      >
+        <span>自定义内容</span>
+      </el-progress>
+      <el-progress type="circle" :percentage="100" status="success">
+        <el-button type="success" :icon="useRenderIcon('ep:check')" circle />
+      </el-progress>
+      <el-progress type="dashboard" :percentage="80">
+        <template #default="{ percentage }">
+          <span class="percentage-value">{{ percentage }}%</span>
+          <span class="percentage-label">上升率</span>
+        </template>
+      </el-progress>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.percentage-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.percentage-label {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.demo-progress .el-progress--line {
+  width: 350px;
+  margin-bottom: 15px;
+}
+
+.demo-progress .el-progress--circle {
+  margin-right: 15px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/seamless-scroll.vue b/Yi.Pure.Vue3/src/views/components/seamless-scroll.vue
new file mode 100644
index 00000000..1ad45b63
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/seamless-scroll.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref, reactive, unref } from "vue";
+import SeamlessScroll from "@/components/ReSeamlessScroll";
+
+defineOptions({
+  name: "SeamlessScroll"
+});
+
+const scroll = ref();
+
+const listData = ref([
+  {
+    title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
+  }
+]);
+
+const classOption = reactive({
+  direction: "top"
+});
+
+function changeDirection(val) {
+  (unref(scroll) as any).reset();
+  unref(classOption).direction = val;
+}
+</script>
+
+<template>
+  <el-space wrap>
+    <el-card class="box-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span class="font-medium">无缝滚动</span>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('top')"
+          >
+            <span
+              :style="{ color: classOption.direction === 'top' ? 'red' : '' }"
+            >
+              向上滚动
+            </span>
+          </el-button>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('bottom')"
+          >
+            <span
+              :style="{
+                color: classOption.direction === 'bottom' ? 'red' : ''
+              }"
+            >
+              向下滚动
+            </span>
+          </el-button>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('left')"
+          >
+            <span
+              :style="{ color: classOption.direction === 'left' ? 'red' : '' }"
+            >
+              向左滚动
+            </span>
+          </el-button>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('right')"
+          >
+            <span
+              :style="{ color: classOption.direction === 'right' ? 'red' : '' }"
+            >
+              向右滚动
+            </span>
+          </el-button>
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/seamless-scroll.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/seamless-scroll.vue
+        </el-link>
+      </template>
+      <SeamlessScroll
+        ref="scroll"
+        :data="listData"
+        :class-option="classOption"
+        class="warp"
+      >
+        <ul class="item">
+          <li v-for="(item, index) in listData" :key="index">
+            <span class="title" v-text="item.title" />
+          </li>
+        </ul>
+      </SeamlessScroll>
+    </el-card>
+  </el-space>
+</template>
+
+<style lang="scss" scoped>
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    margin-right: 20px;
+  }
+}
+
+.warp {
+  width: 360px;
+  height: 270px;
+  margin: 0 auto;
+  overflow: hidden;
+
+  ul {
+    padding: 0;
+    margin: 0 auto;
+    list-style: none;
+
+    li,
+    a {
+      display: flex;
+      justify-content: space-between;
+      height: 30px;
+      font-size: 15px;
+      line-height: 30px;
+    }
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/segmented.vue b/Yi.Pure.Vue3/src/views/components/segmented.vue
new file mode 100644
index 00000000..d13f2e37
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/segmented.vue
@@ -0,0 +1,265 @@
+<script setup lang="tsx">
+import { h, ref, watch } from "vue";
+import { message } from "@/utils/message";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Segmented, { type OptionsType } from "@/components/ReSegmented";
+
+defineOptions({
+  name: "Segmented"
+});
+
+/** 基础用法 */
+const value = ref(4); // 必须为number类型
+const size = ref("default");
+const dynamicSize = ref();
+
+const optionsBasis: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五"
+  }
+];
+
+/** tooltip 提示 */
+const optionsTooltip: Array<OptionsType> = [
+  {
+    label: "周一",
+    tip: "周一启航，新的篇章"
+  },
+  {
+    label: "周二",
+    tip: "周二律动，携手共进"
+  },
+  {
+    label: "周三",
+    tip: "周三昂扬，激情不减"
+  },
+  {
+    label: "周四",
+    tip: "周四精进，事半功倍"
+  },
+  {
+    label: "周五",
+    tip: "周五喜悦，收尾归档"
+  }
+];
+
+/** 禁用 */
+const optionsDisabled: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三",
+    disabled: true
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五",
+    disabled: true
+  }
+];
+
+/** block */
+const optionsBlock: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五喜悦，收尾归档，周末倒计时",
+    tip: "周五喜悦，收尾归档，周末倒计时"
+  }
+];
+
+/** 可设置图标 */
+const optionsIcon: Array<OptionsType> = [
+  {
+    label: "周一",
+    icon: HomeFilled
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三",
+    icon: "ri:terminal-window-line"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五",
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 只设置图标 */
+const optionsOnlyIcon: Array<OptionsType> = [
+  {
+    icon: HomeFilled
+  },
+  {
+    icon: "ri:terminal-window-line"
+  },
+  {
+    icon: "streamline-emojis:cow-face"
+  },
+  {
+    icon: "streamline-emojis:airplane"
+  },
+  {
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 自定义渲染 */
+const optionsLabel: Array<OptionsType> = [
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon(HomeFilled), {
+          class: "m-auto mt-1 w-[18px] h-[18px]"
+        })}
+        <p>周一</p>
+      </div>
+    )
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("ri:terminal-window-line"), {
+          class: "m-auto mt-1 w-[18px] h-[18px]"
+        })}
+        <p>周二</p>
+      </div>
+    )
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("streamline-emojis:cow-face"), {
+          class: "m-auto mt-1 w-[18px] h-[18px]"
+        })}
+        <p>周三</p>
+      </div>
+    )
+  }
+];
+
+const optionsChange: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3
+  }
+];
+
+/** change 事件 */
+function onChange({ index, option }) {
+  const { label, value } = option;
+  message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
+    type: "success"
+  });
+}
+
+watch(size, val => (dynamicSize.value = size.value));
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/segmented.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/segmented.vue
+      </el-link>
+    </template>
+    <el-scrollbar>
+      <p class="mb-2">
+        基础用法（v-model）<span class="text-primary">
+          {{ optionsBasis[value].label }}
+        </span>
+      </p>
+      <Segmented v-model="value" :options="optionsBasis" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">tooltip 提示</p>
+      <Segmented :options="optionsTooltip" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">change 事件</p>
+      <Segmented
+        :options="optionsChange"
+        :size="dynamicSize"
+        @change="onChange"
+      />
+      <el-divider />
+      <p class="mb-2">禁用</p>
+      <Segmented :options="optionsDisabled" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">全局禁用</p>
+      <Segmented :options="optionsBasis" :size="dynamicSize" disabled />
+      <el-divider />
+      <p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
+      <Segmented :options="optionsBlock" block :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">可设置图标</p>
+      <Segmented :options="optionsIcon" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">只设置图标</p>
+      <Segmented :options="optionsOnlyIcon" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">自定义渲染</p>
+      <Segmented :options="optionsLabel" :size="dynamicSize" />
+    </el-scrollbar>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/selector.vue b/Yi.Pure.Vue3/src/views/components/selector.vue
new file mode 100644
index 00000000..e63bfd52
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/selector.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Selector from "@/components/ReSelector";
+
+defineOptions({
+  name: "Selector"
+});
+
+const selectRange = ref<string>("");
+const dataLists = ref([
+  {
+    title: "基础用法",
+    echo: [],
+    disabled: false
+  },
+  {
+    title: "回显模式",
+    echo: [2, 7],
+    disabled: true
+  }
+]);
+
+const selectedVal = ({ left, right }): void => {
+  selectRange.value = `${left}-${right}`;
+};
+</script>
+
+<template>
+  <div>
+    <el-card
+      v-for="(item, key) in dataLists"
+      :key="key"
+      class="mb-2"
+      shadow="never"
+    >
+      <template #header>
+        <p class="font-medium">{{ item.title }}</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/selector.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/selector.vue
+        </el-link>
+      </template>
+      <Selector
+        :HsKey="key"
+        :echo="item.echo"
+        :disabled="item.disabled"
+        @selectedVal="selectedVal"
+      />
+      <h4 v-if="!item.disabled" class="mt-3">选中范围：{{ selectRange }}</h4>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/split-pane.vue b/Yi.Pure.Vue3/src/views/components/split-pane.vue
new file mode 100644
index 00000000..82f9a0b2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/split-pane.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import splitpane, { ContextProps } from "@/components/ReSplitPane";
+import { reactive } from "vue";
+
+defineOptions({
+  name: "SplitPane"
+});
+
+const settingLR: ContextProps = reactive({
+  minPercent: 20,
+  defaultPercent: 40,
+  split: "vertical"
+});
+
+const settingTB: ContextProps = reactive({
+  minPercent: 20,
+  defaultPercent: 40,
+  split: "horizontal"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">切割面板</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/split-pane.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/split-pane.vue
+        </el-link>
+      </div>
+    </template>
+    <div class="split-pane">
+      <splitpane :splitSet="settingLR">
+        <!-- #paneL 表示指定该组件为左侧面板 -->
+        <template #paneL>
+          <!-- 自定义左侧面板的内容 -->
+          <el-scrollbar>
+            <div class="dv-a">A</div>
+          </el-scrollbar>
+        </template>
+        <!-- #paneR 表示指定该组件为右侧面板 -->
+        <template #paneR>
+          <!-- 再次将右侧面板进行拆分 -->
+          <splitpane :splitSet="settingTB">
+            <template #paneL>
+              <el-scrollbar><div class="dv-b">B</div></el-scrollbar>
+            </template>
+            <template #paneR>
+              <el-scrollbar>
+                <div class="dv-c">C</div>
+              </el-scrollbar>
+            </template>
+          </splitpane>
+        </template>
+      </splitpane>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.split-pane {
+  width: 100%;
+  height: calc(100vh - 300px);
+  font-size: 50px;
+  text-align: center;
+  border: 1px solid #e5e6eb;
+
+  .dv-a {
+    padding-top: 30vh;
+    color: rgba($color: dodgerblue, $alpha: 80%);
+  }
+
+  .dv-b {
+    padding-top: 10vh;
+    color: rgba($color: #000, $alpha: 80%);
+  }
+
+  .dv-c {
+    padding-top: 18vh;
+    color: rgba($color: #ce272d, $alpha: 80%);
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/statistic.vue b/Yi.Pure.Vue3/src/views/components/statistic.vue
new file mode 100644
index 00000000..47a7c81f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/statistic.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import dayjs from "dayjs";
+import ReCol from "@/components/ReCol";
+import { useTransition } from "@vueuse/core";
+
+defineOptions({
+  name: "Statistic"
+});
+
+const value = ref(Date.now() + 1000 * 60 * 60 * 7);
+const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);
+const value2 = ref(dayjs().add(1, "month").startOf("month"));
+
+const source = ref(0);
+const outputValue = useTransition(source, {
+  duration: 1500
+});
+source.value = 36000;
+
+function reset() {
+  value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;
+}
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/statistic.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            统计组件
+          </el-link>
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/statistic.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/statistic.vue
+        </el-link>
+      </template>
+
+      <el-row :gutter="24">
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-statistic title="需求人数" :value="outputValue" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown title="距离答疑结束还剩" :value="value" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown
+            title="VIP到期时间还剩"
+            format="HH:mm:ss"
+            :value="value1"
+          />
+          <el-button class="mt-2" type="primary" text bg @click="reset">
+            重置
+          </el-button>
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown format="DD天 HH时 mm分 ss秒" :value="value2">
+            <template #title>
+              <div style="display: inline-flex; align-items: center">
+                <IconifyIconOnline icon="ep:calendar" class="mr-2" />
+                距离下个月还剩
+              </div>
+            </template>
+          </el-countdown>
+          <div class="mt-2">{{ value2.format("YYYY-MM-DD") }}</div>
+        </re-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.el-col {
+  text-align: center;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/swiper.vue b/Yi.Pure.Vue3/src/views/components/swiper.vue
new file mode 100644
index 00000000..a92f753b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/swiper.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import SwiperCore from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+
+defineOptions({
+  name: "Swiper"
+});
+
+SwiperCore.use([Autoplay, Navigation, Pagination]);
+
+const swiperExample: any[] = [
+  { id: 0, label: "基础滑动", options: {} },
+  {
+    id: 1,
+    label: "按钮切换",
+    options: {
+      navigation: true
+    }
+  },
+  {
+    id: 2,
+    label: "分页器",
+    options: {
+      pagination: true
+    }
+  },
+  {
+    id: 3,
+    label: "分页器 / 动态指示点",
+    options: {
+      pagination: { dynamicBullets: true }
+    }
+  },
+  {
+    id: 4,
+    label: "分页器 / 进度条",
+    options: {
+      navigation: true,
+      pagination: {
+        type: "progressbar"
+      }
+    }
+  },
+  {
+    id: 5,
+    label: "分页器 / 分式",
+    options: {
+      navigation: true,
+      pagination: {
+        type: "fraction"
+      }
+    }
+  },
+  {
+    id: 6,
+    label: "一次显示多个Slides",
+    options: {
+      pagination: {
+        clickable: true
+      },
+      slidesPerView: 3,
+      spaceBetween: 30
+    }
+  },
+  {
+    id: 7,
+    label: "无限循环",
+    options: {
+      autoplay: {
+        delay: 2000,
+        disableOnInteraction: false
+      },
+      navigation: true,
+      pagination: {
+        clickable: true
+      },
+      loop: true
+    }
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/nolimits4web/swiper"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          Swiper插件
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/swiper.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/swiper.vue
+      </el-link>
+    </template>
+    <el-row :gutter="10">
+      <el-col v-for="item in swiperExample" :key="item.id" :span="12">
+        <h6 class="py-[16px] text-base">{{ item.label }}</h6>
+        <swiper v-bind="item.options">
+          <swiper-slide v-for="i in 5" :key="i">
+            <div
+              class="flex justify-center items-center h-[240px] border border-[#999]"
+            >
+              Slide{{ i }}
+            </div>
+          </swiper-slide>
+        </swiper>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-card__body) {
+  padding-top: 0;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/tag.vue b/Yi.Pure.Vue3/src/views/components/tag.vue
new file mode 100644
index 00000000..554e7715
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/tag.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+
+defineOptions({
+  name: "PureTag"
+});
+
+const size = ref("default");
+const checked1 = ref(false);
+const checked2 = ref(false);
+const baseTag = ref("dark");
+const tagList = ref([
+  {
+    type: "primary",
+    text: "Primary"
+  },
+  {
+    type: "success",
+    text: "Success"
+  },
+  {
+    type: "info",
+    text: "Info"
+  },
+  {
+    type: "warning",
+    text: "Warning"
+  },
+  {
+    type: "danger",
+    text: "Danger"
+  }
+]);
+const handleClose = tag => {
+  tagList.value.splice(tagList.value.indexOf(tag), 1);
+};
+const copyTagList = cloneDeep(tagList.value);
+function onReset() {
+  tagList.value = cloneDeep(copyTagList);
+}
+
+/** 动态编辑标签 */
+const inputValue = ref("");
+const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
+const inputVisible = ref(false);
+const InputRef = ref();
+const handleDynamicClose = (tag: string) => {
+  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+};
+const showInput = () => {
+  inputVisible.value = true;
+  nextTick(() => {
+    InputRef.value!.input!.focus();
+  });
+};
+const handleInputConfirm = () => {
+  if (!isAllEmpty(inputValue.value)) {
+    dynamicTags.value.push(inputValue.value);
+  }
+  inputVisible.value = false;
+  inputValue.value = "";
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/tag.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            Tag 标签
+          </el-link>
+          <el-radio-group v-model="size">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/tag.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/tag.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">基础按钮</p>
+    <el-radio-group v-model="baseTag" class="mb-3">
+      <el-radio label="dark" value="dark" />
+      <el-radio label="light" value="light" />
+      <el-radio label="plain" value="plain" />
+    </el-radio-group>
+    <br />
+    <el-space class="mb-3">
+      <el-checkbox
+        v-if="tagList.length > 0"
+        v-model="checked1"
+        label="可移除"
+      />
+      <el-button v-else size="small" text bg class="mr-6" @click="onReset">
+        重置
+      </el-button>
+      <el-button
+        v-if="checked1 && tagList.length > 0"
+        size="small"
+        text
+        bg
+        class="mr-6 ml-4"
+        @click="tagList = []"
+      >
+        移除全部
+      </el-button>
+      <el-checkbox v-model="checked2" label="圆形" />
+    </el-space>
+    <br />
+    <el-space wrap>
+      <el-tag
+        v-for="(tag, index) in tagList"
+        :key="index"
+        :type="tag.type as any"
+        :effect="baseTag as any"
+        :closable="checked1"
+        :round="checked2"
+        :size="size as any"
+        :disabled="size === 'disabled'"
+        @close="handleClose(tag)"
+      >
+        {{ tag.text }}
+      </el-tag>
+    </el-space>
+    <el-divider />
+
+    <p class="mb-2">动态编辑标签</p>
+    <el-tag
+      v-for="tag in dynamicTags"
+      :key="tag"
+      class="mx-1"
+      closable
+      :size="size as any"
+      :disable-transitions="false"
+      @close="handleDynamicClose(tag)"
+    >
+      {{ tag }}
+    </el-tag>
+    <el-input
+      v-if="inputVisible"
+      ref="InputRef"
+      v-model="inputValue"
+      class="ml-1 !w-20"
+      size="small"
+      @keyup.enter="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <el-button
+      v-else
+      class="button-new-tag ml-1"
+      size="small"
+      @click="showInput"
+    >
+      新建标签
+    </el-button>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/text.vue b/Yi.Pure.Vue3/src/views/components/text.vue
new file mode 100644
index 00000000..20f609da
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/text.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import { ref } from "vue";
+import { ReText } from "@/components/ReText";
+
+defineOptions({
+  name: "PureText"
+});
+
+const customContent = ref("自定义tooltip内容");
+
+const changeTooltipContent = () => {
+  customContent.value =
+    "现在的时间是: " + dayjs().format("YYYY-MM-DD HH:mm:ss");
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          文本省略，基于
+          <el-link
+            href="https://element-plus.org/zh-CN/component/text.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            el-text
+          </el-link>
+          和
+          <el-link
+            href="https://vue-tippy.netlify.app/basic-usage"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            VueTippy
+          </el-link>
+          自动省略后显示 Tooltip 提示， 支持多行省略
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/text.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/text.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">基础用法</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText>
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+          <ReText :lineClamp="2">
+            测试文本，这是一个稍微有点长的文本，lineClamp参数为2，即两行过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+
+    <p class="mb-2">自定义 Tooltip 内容</p>
+    <div class="mb-2">
+      <el-button @click="changeTooltipContent">
+        点击切换下方 Tooltip 内容
+      </el-button>
+    </div>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText :tippyProps="{ content: customContent }">
+            props写法 -
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+        <li>
+          <ReText>
+            <template #content>
+              <div>
+                <b>这是插槽写法: </b>
+                <div>{{ customContent }}</div>
+              </div>
+            </template>
+            插槽写法 -
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+    <p class="mb-2">自定义 el-text 配置</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText type="primary" size="large">
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+        <li>
+          <ReText :lineClamp="4" type="info">
+            测试文本，这是一个非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长的文本，lineClamp参数为4，即四行过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+    <p class="mb-2">自定义 VueTippy 配置</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText
+            :tippyProps="{ offset: [0, -20], theme: 'light', arrow: false }"
+          >
+            偏移白色无箭头 -
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+        <li>
+          <ReText :lineClamp="4" :tippyProps="{ followCursor: true }">
+            鼠标跟随 -
+            测试文本，这是一个非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长的文本，lineClamp参数为4，即四行过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+    <p class="mb-2">组件嵌套: 不需要省略的需设置 truncated 为 false</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText tag="p" :lineClamp="2">
+            This is a paragraph. Paragraph start
+            <ReText :truncated="false">
+              【 This is ReText
+              <ReText tag="sup" size="small" :truncated="false">
+                superscript 】
+              </ReText>
+            </ReText>
+            <el-text>
+              【 This is El-Text
+              <el-text tag="sub" size="small"> subscript 】 </el-text>
+            </el-text>
+            <el-text tag="ins">【Inserted】</el-text>
+            <el-text tag="del">【Deleted】</el-text>
+            <el-text tag="mark">【Marked】</el-text>
+            Paragraph end.
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  width: 400px;
+  padding: 15px;
+  overflow: hidden;
+  resize: horizontal;
+  background-color: var(--el-color-info-light-9);
+  border-radius: 8px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/time-picker.vue b/Yi.Pure.Vue3/src/views/components/time-picker.vue
new file mode 100644
index 00000000..236f312c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/time-picker.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "TimePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+/** 时间选择器 */
+const value = ref("");
+const value1 = ref("");
+const value3 = ref();
+
+const value2 = ref(new Date(2016, 9, 10, 18, 30));
+
+const makeRange = (start: number, end: number) => {
+  const result: number[] = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+};
+const disabledHours = () => {
+  return makeRange(0, 16).concat(makeRange(19, 23));
+};
+const disabledMinutes = (hour: number) => {
+  if (hour === 17) {
+    return makeRange(0, 29);
+  }
+  if (hour === 18) {
+    return makeRange(31, 59);
+  }
+};
+const disabledSeconds = (hour: number, minute: number) => {
+  if (hour === 18 && minute === 30) {
+    return makeRange(1, 59);
+  }
+};
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+
+/** 时间选择 */
+const value4 = ref("");
+const value5 = ref("");
+const startTime = ref("");
+const endTime = ref("");
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/time-picker.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              时间选择器
+            </el-link>
+            <el-radio-group v-model="size">
+              <el-radio value="large">大尺寸</el-radio>
+              <el-radio value="default">默认尺寸</el-radio>
+              <el-radio value="small">小尺寸</el-radio>
+              <el-radio value="disabled">禁用</el-radio>
+            </el-radio-group>
+          </el-space>
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/time-picker.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/time-picker.vue
+        </el-link>
+      </template>
+
+      <p class="mb-2">日期和时间点</p>
+      <el-space wrap>
+        <p class="text-[15px]">鼠标滚轮进行选择</p>
+        <el-time-picker
+          v-model="value"
+          placeholder="请选择时间"
+          class="!w-[140px]"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+        <p class="text-[15px]">箭头进行选择</p>
+        <el-time-picker
+          v-model="value1"
+          arrow-control
+          placeholder="请选择时间"
+          class="!w-[140px]"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+      </el-space>
+      <el-divider />
+
+      <p class="mb-2">限制时间选择范围</p>
+      <el-time-picker
+        v-model="value2"
+        class="!w-[140px]"
+        :disabled-hours="disabledHours"
+        :disabled-minutes="disabledMinutes"
+        :disabled-seconds="disabledSeconds"
+        placeholder="Arbitrary time"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-divider />
+
+      <p class="mb-2">任意时间范围</p>
+      <el-time-picker
+        v-model="value3"
+        class="!w-[220px]"
+        is-range
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+    </el-card>
+
+    <el-card shadow="never" class="mt-4">
+      <template #header>
+        <div class="card-header">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/time-select.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            时间选择
+          </el-link>
+        </div>
+      </template>
+
+      <p class="mb-2">固定时间点</p>
+      <el-time-select
+        v-model="value4"
+        placeholder="请选择时间"
+        class="!w-[140px]"
+        start="08:30"
+        step="00:15"
+        end="18:30"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+
+      <p class="mb-2 mt-4">时间格式</p>
+      <el-time-select
+        v-model="value5"
+        placeholder="请选择时间"
+        class="!w-[140px]"
+        start="00:00"
+        step="00:30"
+        end="23:59"
+        format="hh:mm A"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+
+      <p class="mb-2 mt-4">固定时间范围</p>
+      <el-space wrap>
+        <el-time-select
+          v-model="startTime"
+          placeholder="开始时间"
+          class="!w-[140px]"
+          :max-time="endTime"
+          start="08:30"
+          step="00:15"
+          end="18:30"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+        <el-time-select
+          v-model="endTime"
+          placeholder="结束时间"
+          class="!w-[140px]"
+          :min-time="startTime"
+          start="08:30"
+          step="00:15"
+          end="18:30"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+      </el-space>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/timeline.vue b/Yi.Pure.Vue3/src/views/components/timeline.vue
new file mode 100644
index 00000000..6f26f979
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/timeline.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { markRaw } from "vue";
+import { randomGradient } from "@pureadmin/utils";
+import { useRenderFlicker } from "@/components/ReFlicker";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";
+
+defineOptions({
+  name: "TimeLine"
+});
+
+const { lastBuildTime } = __APP_INFO__;
+const activities = [
+  {
+    content: "支持圆点发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(useRenderFlicker())
+  },
+  {
+    content: "支持方形发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
+  },
+  {
+    content: "支持渐变发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(
+      useRenderFlicker({
+        background: randomGradient({
+          randomizeHue: true
+        })
+      })
+    )
+  },
+  {
+    content: "支持默认颜色",
+    timestamp: lastBuildTime
+  },
+  {
+    content: "支持自定义颜色",
+    timestamp: lastBuildTime,
+    color: "#F56C6C"
+  },
+  {
+    content: "支持自定义图标",
+    timestamp: lastBuildTime,
+    color: "transparent",
+    icon: useRenderIcon(Iphone, {
+      color: "#0bbd87"
+    })
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">时间线</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/timeline.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/timeline.vue
+        </el-link>
+      </div>
+    </template>
+    <div class="flex">
+      <el-timeline>
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :icon="activity.icon"
+          :color="activity.color"
+          :timestamp="activity.timestamp"
+        >
+          {{ activity.content }}
+        </el-timeline-item>
+      </el-timeline>
+
+      <el-timeline class="pl-40">
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :icon="activity.icon"
+          :color="activity.color"
+          :timestamp="activity.timestamp"
+          placement="bottom"
+        >
+          <div class="message">
+            vue-pure-admin 第{{ activities.length - index }}个版本发布啦
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.message {
+  position: relative;
+  box-sizing: border-box;
+  width: 200px;
+  padding: 5px 12px;
+  line-height: 18px;
+  color: #fff;
+  word-break: break-all;
+  background-color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+  border-radius: 6px;
+}
+
+.message::after {
+  position: absolute;
+  top: 8px;
+  left: -10px;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  content: "";
+  border-color: var(--el-color-primary) transparent transparent;
+  border-style: solid dashed dashed;
+  border-width: 10px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/upload/form.vue b/Yi.Pure.Vue3/src/views/components/upload/form.vue
new file mode 100644
index 00000000..070233ea
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/upload/form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { formUpload } from "@/api/mock";
+import { message } from "@/utils/message";
+import { createFormData } from "@pureadmin/utils";
+
+import UploadIcon from "@iconify-icons/ri/upload-2-line";
+
+const formRef = ref();
+const uploadRef = ref();
+const validateForm = reactive({
+  fileList: [],
+  date: ""
+});
+
+const submitForm = formEl => {
+  if (!formEl) return;
+  formEl.validate(valid => {
+    if (valid) {
+      // 多个 file 在一个接口同时上传
+      const formData = createFormData({
+        files: validateForm.fileList.map(file => ({ raw: file.raw })), // file 文件
+        date: validateForm.date // 别的字段
+      });
+      formUpload(formData)
+        .then(({ success }) => {
+          if (success) {
+            message("提交成功", { type: "success" });
+          } else {
+            message("提交失败");
+          }
+        })
+        .catch(error => {
+          message(`提交异常 ${error}`, { type: "error" });
+        });
+    } else {
+      return false;
+    }
+  });
+};
+
+const resetForm = formEl => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<template>
+  <el-form ref="formRef" :model="validateForm" label-width="82px">
+    <el-form-item
+      label="附件"
+      prop="fileList"
+      :rules="[{ required: true, message: '附件不能为空' }]"
+    >
+      <el-upload
+        ref="uploadRef"
+        v-model:file-list="validateForm.fileList"
+        drag
+        multiple
+        action="#"
+        class="!w-[200px]"
+        :auto-upload="false"
+      >
+        <div class="el-upload__text">
+          <IconifyIconOffline
+            :icon="UploadIcon"
+            width="26"
+            class="m-auto mb-2"
+          />
+          可点击或拖拽上传
+        </div>
+      </el-upload>
+    </el-form-item>
+    <el-form-item
+      label="日期"
+      prop="date"
+      :rules="[{ required: true, message: '日期不能为空' }]"
+    >
+      <el-date-picker
+        v-model="validateForm.date"
+        type="datetime"
+        class="!w-[200px]"
+        placeholder="请选择日期时间"
+        value-format="YYYY-MM-DD HH:mm:ss"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" text bg @click="submitForm(formRef)">
+        提交
+      </el-button>
+      <el-button text bg @click="resetForm(formRef)">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/upload/imgs/1.jpg b/Yi.Pure.Vue3/src/views/components/upload/imgs/1.jpg
new file mode 100644
index 00000000..6119df2e
Binary files /dev/null and b/Yi.Pure.Vue3/src/views/components/upload/imgs/1.jpg differ
diff --git a/Yi.Pure.Vue3/src/views/components/upload/imgs/2.jpg b/Yi.Pure.Vue3/src/views/components/upload/imgs/2.jpg
new file mode 100644
index 00000000..0997cb07
Binary files /dev/null and b/Yi.Pure.Vue3/src/views/components/upload/imgs/2.jpg differ
diff --git a/Yi.Pure.Vue3/src/views/components/upload/imgs/3.jpg b/Yi.Pure.Vue3/src/views/components/upload/imgs/3.jpg
new file mode 100644
index 00000000..4e9569ae
Binary files /dev/null and b/Yi.Pure.Vue3/src/views/components/upload/imgs/3.jpg differ
diff --git a/Yi.Pure.Vue3/src/views/components/upload/index.vue b/Yi.Pure.Vue3/src/views/components/upload/index.vue
new file mode 100644
index 00000000..ea2434c6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/upload/index.vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import axios from "axios";
+import Sortable from "sortablejs";
+import UploadForm from "./form.vue";
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import { message } from "@/utils/message";
+import type { UploadFile } from "element-plus";
+import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
+
+import Add from "@iconify-icons/ep/plus";
+import Eye from "@iconify-icons/ri/eye-line";
+import Delete from "@iconify-icons/ri/delete-bin-7-line";
+
+defineOptions({
+  name: "PureUpload"
+});
+
+const fileList = ref([]);
+const router = useRouter();
+const curOpenImgIndex = ref(0);
+const dialogVisible = ref(false);
+
+const urlList = computed(() => getKeyList(fileList.value, "url"));
+const imgInfos = computed(() => extractFields(fileList.value, "name", "size"));
+
+const getImgUrl = name => new URL(`./imgs/${name}.jpg`, import.meta.url).href;
+const srcList = Array.from({ length: 3 }).map((_, index) => {
+  return getImgUrl(index + 1);
+});
+
+/** 上传文件前校验 */
+const onBefore = file => {
+  if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+    message("只能上传图片");
+    return false;
+  }
+  const isExceed = file.size / 1024 / 1024 > 2;
+  if (isExceed) {
+    message(`单个图片大小不能超过2MB`);
+    return false;
+  }
+};
+
+/** 超出最大上传数时触发 */
+const onExceed = () => {
+  message("最多上传3张图片，请先删除在上传");
+};
+
+/** 移除上传的文件 */
+const handleRemove = (file: UploadFile) => {
+  fileList.value.splice(fileList.value.indexOf(file), 1);
+};
+
+/** 大图预览 */
+const handlePictureCardPreview = (file: UploadFile) => {
+  curOpenImgIndex.value = fileList.value.findIndex(img => img.uid === file.uid);
+  dialogVisible.value = true;
+};
+
+const getUploadItem = () => document.querySelectorAll("#pure-upload-item");
+
+/** 缩略图拖拽排序 */
+const imgDrop = uid => {
+  const CLASSNAME = "el-upload-list";
+  const _curIndex = fileList.value.findIndex(img => img.uid === uid);
+  getUploadItem()?.[_curIndex]?.classList?.add(`${CLASSNAME}__item-actions`);
+  const wrapper: HTMLElement = document.querySelector(`.${CLASSNAME}`);
+  Sortable.create(wrapper, {
+    handle: `.${CLASSNAME}__item`,
+    onEnd: ({ newIndex, oldIndex }) => {
+      const oldFile = fileList.value[oldIndex];
+      fileList.value.splice(oldIndex, 1);
+      fileList.value.splice(newIndex, 0, oldFile);
+      // fix: https://github.com/SortableJS/Sortable/issues/232 (firefox is ok, but chromium is bad. see https://bugs.chromium.org/p/chromium/issues/detail?id=410328)
+      getUploadItem().forEach(ele => {
+        ele.classList.remove(`${CLASSNAME}__item-actions`);
+      });
+    }
+  });
+};
+
+/** 下载图片 */
+const onDownload = () => {
+  [
+    { name: "巴旦木.jpeg", type: "img" },
+    { name: "恭喜发财.png", type: "img" },
+    { name: "可爱动物.gif", type: "gif" },
+    { name: "pure-upload.csv", type: "other" },
+    { name: "pure-upload.txt", type: "other" }
+  ].forEach(img => {
+    axios
+      .get(`https://xiaoxian521.github.io/hyperlink/${img.type}/${img.name}`, {
+        responseType: "blob"
+      })
+      .then(({ data }) => {
+        downloadByData(data, img.name);
+      });
+  });
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-link
+          v-tippy="{
+            content: '点击查看详细文档'
+          }"
+          href="https://element-plus.org/zh-CN/component/upload.html"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          文件上传
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
+        target="_blank"
+      >
+        代码位置 src/views/components/upload
+      </el-link>
+    </template>
+
+    <el-button class="mb-4" text bg @click="onDownload">
+      点击下载安全文件进行上传测试
+    </el-button>
+    <p class="mb-4">
+      综合示例<span class="text-[14px]">
+        （ <span class="text-[red]">自动上传</span>
+        、拖拽上传、拖拽排序、设置请求头、上传进度、大图预览、多选文件、最大文件数量、文件类型限制、文件大小限制、删除文件）
+      </span>
+    </p>
+    <p v-show="fileList.length > 0" class="mb-4">
+      {{ imgInfos }}
+    </p>
+    <el-upload
+      v-model:file-list="fileList"
+      drag
+      multiple
+      class="pure-upload"
+      list-type="picture-card"
+      accept="image/jpeg,image/png,image/gif"
+      action="https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b"
+      :limit="3"
+      :headers="{ Authorization: 'eyJhbGciOiJIUzUxMiJ9.admin' }"
+      :on-exceed="onExceed"
+      :before-upload="onBefore"
+    >
+      <IconifyIconOffline :icon="Add" class="m-auto mt-4" width="30" />
+      <template #file="{ file }">
+        <div
+          v-if="file.status == 'ready' || file.status == 'uploading'"
+          class="mt-[35%] m-auto"
+        >
+          <p class="font-medium">文件上传中</p>
+          <el-progress
+            class="mt-2"
+            :stroke-width="2"
+            :text-inside="true"
+            :show-text="false"
+            :percentage="file.percentage"
+          />
+        </div>
+        <div v-else @mouseenter.stop="imgDrop(file.uid)">
+          <img
+            class="el-upload-list__item-thumbnail select-none"
+            :src="file.url"
+          />
+          <span
+            id="pure-upload-item"
+            :class="[
+              'el-upload-list__item-actions',
+              fileList.length > 1 && '!cursor-move'
+            ]"
+          >
+            <span
+              title="查看"
+              class="hover:text-primary"
+              @click="handlePictureCardPreview(file)"
+            >
+              <IconifyIconOffline
+                :icon="Eye"
+                class="hover:scale-125 duration-100"
+              />
+            </span>
+            <span
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file)"
+            >
+              <span title="移除" class="hover:text-[var(--el-color-danger)]">
+                <IconifyIconOffline
+                  :icon="Delete"
+                  class="hover:scale-125 duration-100"
+                />
+              </span>
+            </span>
+          </span>
+        </div>
+      </template>
+    </el-upload>
+    <!-- 有时文档没写并不代表没有，多看源码好处多多😝 https://github.com/element-plus/element-plus/tree/dev/packages/components/image-viewer/src （emm...这让我想起刚开始写这个项目时，很多东西只有英文或者没有文档，需要看源码时，想笑🥹。那些美好时光都给这些坑了，giao） -->
+    <el-image-viewer
+      v-if="dialogVisible"
+      :initialIndex="curOpenImgIndex"
+      :url-list="urlList"
+      :zoom-rate="1.2"
+      :max-scale="7"
+      :min-scale="0.2"
+      @close="dialogVisible = false"
+      @switch="index => (curOpenImgIndex = index)"
+    />
+    <!-- 将自定义内容插入到body里，有了它在图片预览的时候，想插入个分页器或者别的东东在预览区某个位置就很方便咯（用户需求可以很灵活，开源组件库几乎不可能尽善尽美，很多时候寻找别的解决途径或许更好） -->
+    <teleport to="body">
+      <div
+        v-if="fileList[curOpenImgIndex] && dialogVisible"
+        effect="dark"
+        round
+        size="large"
+        type="info"
+        class="img-name"
+      >
+        <p class="text-[#fff] dark:text-black">
+          {{ fileList[curOpenImgIndex].name }}
+        </p>
+      </div>
+    </teleport>
+    <p class="el-upload__tip">
+      可拖拽上传最多3张单个不超过2MB且格式为jpeg/png/gif的图片
+    </p>
+    <el-divider />
+
+    <p class="mb-4 mt-4">
+      结合表单校验进行<span class="text-[red]">手动上传</span>
+      <span class="text-[14px]">
+        （可先打开浏览器控制台找到Network，然后填写表单内容后点击点提交观察请求变化）
+      </span>
+    </p>
+    <div class="flex justify-between">
+      <UploadForm />
+      <div>
+        <p class="text-center">上传接口相关截图</p>
+        <el-image
+          class="w-[200px] rounded-md"
+          :src="srcList[0]"
+          :preview-src-list="srcList"
+          fit="cover"
+        />
+      </div>
+    </div>
+    <el-divider />
+
+    <div class="flex flex-wrap">
+      <p>
+        裁剪、上传头像请参考
+        <span
+          class="font-bold text-[18x] cursor-pointer hover:text-[red]"
+          @click="router.push({ name: 'SystemUser' })"
+        >
+          系统管理-用户管理
+        </span>
+        表格操作栏中的上传头像功能
+      </p>
+      <p class="text-[red] text-[12px] flex flex-auto items-center justify-end">
+        免责声明：上传接口使用免费开源的
+        <el-link
+          href="https://designer.mocky.io/"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          &nbsp;Mocky&nbsp;
+        </el-link>
+        <span class="font-bold text-[18x]"> 请不要上传重要信息 </span
+        >，如果造成任何损失，我们概不负责
+      </p>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.card-header) {
+  display: flex;
+
+  .header-right {
+    display: flex;
+    flex: auto;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 14px;
+  }
+}
+
+:deep(.pure-upload) {
+  .el-upload-dragger {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.img-name {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  z-index: 4000;
+  padding: 5px 23px;
+  background-color: var(--el-text-color-regular);
+  border-radius: 22px;
+  transform: translateX(-50%);
+
+  /** 将下面的 left: 50%; bottom: 80px; transform: translateX(-50%); 注释掉
+   *  解开下面 left: 40px; top: 40px; 注释，体验不一样的感觉。啊？还是差强人意，自己调整位置吧🥹
+   */
+  // left: 40px;
+  // top: 40px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/virtual-list/horizontal.vue b/Yi.Pure.Vue3/src/views/components/virtual-list/horizontal.vue
new file mode 100644
index 00000000..531536fc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/virtual-list/horizontal.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
+
+const items = ref([]);
+const search = ref("");
+
+for (let i = 0; i < 800; i++) {
+  items.value.push({
+    id: i
+  });
+}
+
+const filteredItems = computed(() => {
+  if (!search.value) return items.value;
+  const lowerCaseSearch = search.value;
+  return items.value.filter(i => i.id == lowerCaseSearch);
+});
+</script>
+
+<template>
+  <div class="dynamic-scroller-demo">
+    <div class="flex-ac mb-4 shadow-2xl">
+      水平模式 horizontal
+      <el-input
+        v-model="search"
+        class="mr-2 !w-[1/1.5]"
+        clearable
+        placeholder="Filter..."
+        style="width: 300px"
+      />
+    </div>
+
+    <DynamicScroller
+      :items="filteredItems"
+      :min-item-size="54"
+      direction="horizontal"
+      class="scroller"
+    >
+      <template #default="{ item, index, active }">
+        <DynamicScrollerItem
+          :item="item"
+          :active="active"
+          :size-dependencies="[item.id]"
+          :data-index="index"
+          :data-active="active"
+          :title="`Click to change message ${index}`"
+          :style="{
+            width: `${Math.max(130, Math.round((item.id?.length / 20) * 20))}px`
+          }"
+          class="message"
+        >
+          <div>
+            <IconifyIconOnline
+              icon="openmoji:beaming-face-with-smiling-eyes"
+              width="40"
+            />
+            <p class="text-center">{{ item.id }}</p>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+  </div>
+</template>
+
+<style scoped>
+.dynamic-scroller-demo {
+  display: flex;
+  flex-direction: column;
+  height: 140px;
+  overflow: hidden;
+}
+
+.scroller {
+  flex: auto 1 1;
+  border: 1px solid var(--el-border-color);
+}
+
+.notice {
+  padding: 24px;
+  font-size: 20px;
+  color: #999;
+}
+
+.message {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 32px;
+  padding: 12px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/virtual-list/index.vue b/Yi.Pure.Vue3/src/views/components/virtual-list/index.vue
new file mode 100644
index 00000000..b6f28138
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/virtual-list/index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import verticalList from "./vertical.vue";
+import horizontalList from "./horizontal.vue";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+
+defineOptions({
+  name: "VirtualList"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          虚拟列表
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/virtual-list"
+        target="_blank"
+      >
+        代码位置 src/views/components/virtual-list
+      </el-link>
+    </template>
+    <div class="w-full flex justify-around flex-wrap">
+      <vertical-list class="h-[500px] w-[500px]" />
+      <horizontal-list class="h-[500px] w-[500px]" />
+    </div>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/components/virtual-list/vertical.vue b/Yi.Pure.Vue3/src/views/components/virtual-list/vertical.vue
new file mode 100644
index 00000000..6d89429d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/virtual-list/vertical.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
+
+const items = ref([]);
+const search = ref("");
+
+for (let i = 0; i < 800; i++) {
+  items.value.push({
+    id: i
+  });
+}
+
+const filteredItems = computed(() => {
+  if (!search.value) return items.value;
+  const lowerCaseSearch = search.value;
+  return items.value.filter(i => i.id == lowerCaseSearch);
+});
+</script>
+
+<template>
+  <div class="dynamic-scroller-demo">
+    <div class="flex-ac mb-4 shadow-2xl">
+      垂直模式 vertical
+      <el-input
+        v-model="search"
+        class="!w-[350px]"
+        clearable
+        placeholder="Filter..."
+      />
+    </div>
+
+    <DynamicScroller
+      :items="filteredItems"
+      :min-item-size="54"
+      class="scroller"
+    >
+      <template #default="{ item, index, active }">
+        <DynamicScrollerItem
+          :item="item"
+          :active="active"
+          :size-dependencies="[item.id]"
+          :data-index="index"
+          :data-active="active"
+          :title="`Click to change message ${index}`"
+          class="message"
+        >
+          <div class="flex items-center">
+            <IconifyIconOnline
+              icon="openmoji:beaming-face-with-smiling-eyes"
+              width="40"
+            />
+            <span>{{ item.id }}</span>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+  </div>
+</template>
+
+<style scoped>
+.dynamic-scroller-demo {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.scroller {
+  flex: auto 1 1;
+  border: 1px solid var(--el-border-color);
+}
+
+.message {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 32px;
+  padding: 12px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/waterfall/api.ts b/Yi.Pure.Vue3/src/views/components/waterfall/api.ts
new file mode 100644
index 00000000..7e3439ce
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/waterfall/api.ts
@@ -0,0 +1,38 @@
+export function randomID(length = 6) {
+  return Number(
+    Math.random().toString().substr(3, length) + Date.now()
+  ).toString(36);
+}
+
+const COLORS = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
+
+function getRandomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomColor() {
+  return COLORS[getRandomNum(0, 4)];
+}
+
+const website = "https://www.getphotoblanket.com";
+
+export const getList = ({ page = 1, pageSize = 20 }) => {
+  const url = `${website}/products.json?page=${page}&limit=${pageSize}`;
+  return fetch(url)
+    .then(res => res.json())
+    .then(res => res.products)
+    .then(res => {
+      return res.map((item: any) => {
+        return {
+          id: randomID(),
+          star: false,
+          price: item.variants[0].price,
+          src: {
+            original: item.images[0].src
+          },
+          backgroundColor: randomColor(),
+          name: item.title
+        };
+      });
+    });
+};
diff --git a/Yi.Pure.Vue3/src/views/components/waterfall/error.png b/Yi.Pure.Vue3/src/views/components/waterfall/error.png
new file mode 100644
index 00000000..aabee2d5
Binary files /dev/null and b/Yi.Pure.Vue3/src/views/components/waterfall/error.png differ
diff --git a/Yi.Pure.Vue3/src/views/components/waterfall/index.vue b/Yi.Pure.Vue3/src/views/components/waterfall/index.vue
new file mode 100644
index 00000000..a7e2f9a4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/components/waterfall/index.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { getList } from "./api";
+import error from "./error.png";
+import loading from "./loading.png";
+import { ElLoading } from "element-plus";
+import "vue-waterfall-plugin-next/dist/style.css";
+import InfiniteLoading from "v3-infinite-loading";
+import { onMounted, reactive, ref, nextTick } from "vue";
+import backTop from "@/assets/svg/back_top.svg?component";
+import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
+
+const options = reactive({
+  // 唯一key值
+  rowKey: "id",
+  // 卡片之间的间隙
+  gutter: 10,
+  // 是否有周围的gutter
+  hasAroundGutter: true,
+  // 卡片在PC上的宽度
+  width: 320,
+  // 自定义行显示个数，主要用于对移动端的适配
+  breakpoints: {
+    1200: {
+      // 当屏幕宽度小于等于1200
+      rowPerView: 4
+    },
+    800: {
+      // 当屏幕宽度小于等于800
+      rowPerView: 3
+    },
+    500: {
+      // 当屏幕宽度小于等于500
+      rowPerView: 2
+    }
+  },
+  // 动画效果 https://animate.style/
+  animationEffect: "animate__zoomInUp",
+  // 动画时间
+  animationDuration: 1000,
+  // 动画延迟
+  animationDelay: 300,
+  // 背景色
+  // backgroundColor: "#2C2E3A",
+  // 图片字段选择器，如果层级较深，使用 xxx.xxx.xxx 方式
+  imgSelector: "src.original",
+  // 加载配置
+  loadProps: {
+    loading,
+    error
+  },
+  // 是否懒加载
+  lazyload: true
+});
+
+const page = ref(1);
+const list = ref([]);
+const pageSize = ref();
+const loadingInstance = ref();
+
+/** 加载更多 */
+function handleLoadMore() {
+  loadingInstance.value = ElLoading.service({
+    target: ".content",
+    background: "transparent",
+    text: "加载中"
+  });
+  getList({
+    page: page.value,
+    pageSize: pageSize.value
+  }).then(res => {
+    setTimeout(() => {
+      list.value.push(...res);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
+  });
+}
+
+function handleDelete(item, index) {
+  list.value.splice(index, 1);
+}
+
+function handleClick(item) {
+  console.log(item);
+}
+
+onMounted(() => {
+  handleLoadMore();
+});
+</script>
+
+<template>
+  <el-scrollbar max-height="calc(100vh - 120px)" class="content">
+    <Waterfall :list="list" v-bind="options">
+      <template #item="{ item, url, index }">
+        <div
+          class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
+          @click="handleClick(item)"
+        >
+          <div class="overflow-hidden">
+            <LazyImg
+              :url="url"
+              class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+            />
+          </div>
+          <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
+            <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
+              {{ item.name }}
+            </h4>
+            <div
+              class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
+            >
+              <div class="text-gray-50">$ {{ item.price }}</div>
+              <div>
+                <button
+                  class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
+                  @click.stop="handleDelete(item, index)"
+                >
+                  删除
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Waterfall>
+
+    <!-- <div class="flex justify-center py-10">
+        <button
+          class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
+          @click="handleLoadMore"
+        >
+          加载更多
+        </button>
+      </div> -->
+
+    <el-backtop
+      title="回到顶部"
+      :right="35"
+      :bottom="50"
+      :visibility-height="400"
+      target=".content .el-scrollbar__wrap"
+    >
+      <backTop />
+    </el-backtop>
+
+    <!-- 加载更多 -->
+    <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
+  </el-scrollbar>
+</template>
+
+<style lang="scss" scoped>
+.main-content {
+  margin: 0 !important;
+}
+
+:deep(.el-loading-spinner .el-loading-text) {
+  font-size: 24px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/components/waterfall/loading.png b/Yi.Pure.Vue3/src/views/components/waterfall/loading.png
new file mode 100644
index 00000000..8f9e6649
Binary files /dev/null and b/Yi.Pure.Vue3/src/views/components/waterfall/loading.png differ
diff --git a/Yi.Pure.Vue3/src/views/editor/components/EditorBase.vue b/Yi.Pure.Vue3/src/views/editor/components/EditorBase.vue
new file mode 100644
index 00000000..762bd06f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/editor/components/EditorBase.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/editor/components/EditorMulti.vue b/Yi.Pure.Vue3/src/views/editor/components/EditorMulti.vue
new file mode 100644
index 00000000..dcbccf72
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/editor/components/EditorMulti.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import ReCol from "@/components/ReCol";
+import { onBeforeUnmount, ref, shallowRef } from "vue";
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+
+defineOptions({
+  name: "MultiEditor"
+});
+
+// 模拟后端返回多个编辑器的数据
+const endEditorList = [
+  {
+    value: "<p>测试一</p>"
+  },
+  {
+    value: "<p>测试二</p>"
+  },
+  {
+    value: "<p>测试三</p>"
+  },
+  {
+    value: "<p>测试四</p>"
+  }
+];
+
+// 多个编辑器的情况下，前端必须进行处理，满足 Toolbar 组件的 editor 属性 所需的 shallowRef 格式
+const editorList = ref([]);
+endEditorList.forEach(edit => {
+  editorList.value.push({
+    value: edit.value,
+    // 编辑器实例，必须用 shallowRef
+    editorRef: shallowRef()
+  });
+});
+
+const mode = "default";
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = (editor, index) => {
+  // 记录 editor 实例，重要！
+  editorList.value[index].editorRef = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  return editorList.value.map(edit => {
+    if (edit.editorRef == null) return;
+    edit.editorRef.destroy();
+  });
+});
+</script>
+
+<template>
+  <el-row :gutter="30" justify="space-around">
+    <re-col v-for="(edit, index) in editorList" :key="index" :value="11">
+      <div class="wangeditor">
+        <Toolbar
+          :editor="edit.editorRef"
+          :defaultConfig="toolbarConfig"
+          :mode="mode"
+          style="border-bottom: 1px solid #ccc"
+        />
+        <Editor
+          v-model="edit.value"
+          :defaultConfig="editorConfig"
+          :mode="mode"
+          style="height: 300px; overflow-y: hidden"
+          @onCreated="editor => handleCreated(editor, index)"
+        />
+      </div>
+    </re-col>
+  </el-row>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/editor/components/EditorUpload.vue b/Yi.Pure.Vue3/src/views/editor/components/EditorUpload.vue
new file mode 100644
index 00000000..de1ff3b3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/editor/components/EditorUpload.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, shallowRef } from "vue";
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+
+defineOptions({
+  name: "picUpload"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref(
+  "<p>仅提供代码参考，暂不可上传图片，可根据实际业务改写</p>"
+);
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
+
+// 更多详细配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
+editorConfig.MENU_CONF["uploadImage"] = {
+  // 服务端上传地址，根据实际业务改写
+  server: "",
+  // form-data 的 fieldName，根据实际业务改写
+  fieldName: "file",
+  // 选择文件时的类型限制，根据实际业务改写
+  allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  // 自定义插入图片
+  customInsert(res: any, insertFn) {
+    // res.data.url是后端返回的图片地址，根据实际业务改写
+    if (res.data.url) {
+      setTimeout(() => {
+        // insertFn插入图片进编辑器
+        insertFn(res.data.url);
+      }, 2000);
+    }
+  }
+};
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/editor/components/index.ts b/Yi.Pure.Vue3/src/views/editor/components/index.ts
new file mode 100644
index 00000000..1e1767f4
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/editor/components/index.ts
@@ -0,0 +1,3 @@
+export { default as EditorBase } from "./EditorBase.vue";
+export { default as EditorMulti } from "./EditorMulti.vue";
+export { default as EditorUpload } from "./EditorUpload.vue";
diff --git a/Yi.Pure.Vue3/src/views/editor/index.vue b/Yi.Pure.Vue3/src/views/editor/index.vue
new file mode 100644
index 00000000..3a9845cc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/editor/index.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { EditorBase, EditorMulti, EditorUpload } from "./components";
+
+defineOptions({
+  name: "Editor"
+});
+
+const activeNames = ref("1");
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          编辑器组件，采用开源的
+          <el-link
+            href="https://www.wangeditor.com"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Wangeditor
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/editor"
+        target="_blank"
+      >
+        代码位置 src/views/editor
+      </el-link>
+    </template>
+    <el-collapse v-model="activeNames" accordion>
+      <el-collapse-item title="基础用法" name="1">
+        <EditorBase v-if="activeNames === '1'" />
+      </el-collapse-item>
+      <el-collapse-item title="多个富文本" name="2">
+        <EditorMulti v-if="activeNames === '2'" />
+      </el-collapse-item>
+      <el-collapse-item title="自定义图片上传" name="3">
+        <EditorUpload v-if="activeNames === '3'" />
+      </el-collapse-item>
+    </el-collapse>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/empty/index.vue b/Yi.Pure.Vue3/src/views/empty/index.vue
new file mode 100644
index 00000000..6d3dab07
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/empty/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import back from "@/assets/svg/back.svg?component";
+
+defineOptions({
+  name: "Empty"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="w-full h-full text-center">
+    <h1>业务内容模块</h1>
+    <p>使用场景：需要外嵌平台某个页面，不需要展示菜单导航以及额外模块</p>
+    <div class="back" title="返回上一页" @click="router.go(-1)">
+      <back class="w-[80px] h-[80px]" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.back {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+  background: rgb(138 150 160 / 8%);
+  border-radius: 18px;
+  transform: translate(-50%, -50%);
+
+  &:hover {
+    background: rgb(138 150 160 / 20%);
+    transition: background 0.6s;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/error/403.vue b/Yi.Pure.Vue3/src/views/error/403.vue
new file mode 100644
index 00000000..a16be3ce
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/error/403.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import noAccess from "@/assets/status/403.svg?component";
+
+defineOptions({
+  name: "403"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-[640px]">
+    <noAccess />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 80
+          }
+        }"
+      >
+        403
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 120
+          }
+        }"
+      >
+        抱歉，你无权访问该页面
+      </p>
+      <el-button
+        v-motion
+        type="primary"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 160
+          }
+        }"
+        @click="router.push('/')"
+      >
+        返回首页
+      </el-button>
+    </div>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/error/404.vue b/Yi.Pure.Vue3/src/views/error/404.vue
new file mode 100644
index 00000000..cd780b7c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/error/404.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import noExist from "@/assets/status/404.svg?component";
+
+defineOptions({
+  name: "404"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-[640px]">
+    <noExist />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 80
+          }
+        }"
+      >
+        404
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 120
+          }
+        }"
+      >
+        抱歉，你访问的页面不存在
+      </p>
+      <el-button
+        v-motion
+        type="primary"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 160
+          }
+        }"
+        @click="router.push('/')"
+      >
+        返回首页
+      </el-button>
+    </div>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/error/500.vue b/Yi.Pure.Vue3/src/views/error/500.vue
new file mode 100644
index 00000000..e55a090e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/error/500.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import noServer from "@/assets/status/500.svg?component";
+
+defineOptions({
+  name: "500"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-[640px]">
+    <noServer />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 80
+          }
+        }"
+      >
+        500
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 120
+          }
+        }"
+      >
+        抱歉，服务器出错了
+      </p>
+      <el-button
+        v-motion
+        type="primary"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 160
+          }
+        }"
+        @click="router.push('/')"
+      >
+        返回首页
+      </el-button>
+    </div>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/flow-chart/dataTurbo.json b/Yi.Pure.Vue3/src/views/flow-chart/dataTurbo.json
new file mode 100644
index 00000000..f6432c4e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/flow-chart/dataTurbo.json
@@ -0,0 +1,240 @@
+{
+  "flowElementList": [
+    {
+      "incoming": [],
+      "outgoing": ["Flow_33inf2k"],
+      "dockers": [],
+      "type": 2,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "开始",
+        "x": 280,
+        "y": 200,
+        "text": {
+          "x": 280,
+          "y": 200,
+          "value": "开始"
+        },
+        "logicFlowType": "bpmn:startEvent"
+      },
+      "key": "Event_1d42u4p"
+    },
+    {
+      "incoming": ["Flow_379e0o9"],
+      "outgoing": [],
+      "dockers": [],
+      "type": 3,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "结束",
+        "x": 920,
+        "y": 200,
+        "text": {
+          "x": 920,
+          "y": 200,
+          "value": "结束"
+        },
+        "logicFlowType": "bpmn:endEvent"
+      },
+      "key": "Event_08p8i6q"
+    },
+    {
+      "incoming": ["Flow_0pfouf0"],
+      "outgoing": ["Flow_3918lhh"],
+      "dockers": [],
+      "type": 6,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "网关",
+        "x": 580,
+        "y": 200,
+        "text": {
+          "x": 580,
+          "y": 200,
+          "value": "网关"
+        },
+        "logicFlowType": "bpmn:exclusiveGateway"
+      },
+      "key": "Gateway_1fngqgj"
+    },
+    {
+      "incoming": ["Flow_33inf2k"],
+      "outgoing": ["Flow_0pfouf0"],
+      "dockers": [],
+      "type": 4,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "用户",
+        "x": 420,
+        "y": 200,
+        "text": {
+          "x": 420,
+          "y": 200,
+          "value": "用户"
+        },
+        "logicFlowType": "bpmn:userTask"
+      },
+      "key": "Activity_2mgtaia"
+    },
+    {
+      "incoming": ["Flow_3918lhh"],
+      "outgoing": ["Flow_379e0o9"],
+      "dockers": [],
+      "type": 5,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "服务",
+        "x": 760,
+        "y": 200,
+        "text": {
+          "x": 760,
+          "y": 200,
+          "value": "服务"
+        },
+        "logicFlowType": "bpmn:serviceTask"
+      },
+      "key": "Activity_1sp8qc8"
+    },
+    {
+      "incoming": ["Event_1d42u4p"],
+      "outgoing": ["Activity_2mgtaia"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边",
+        "text": {
+          "x": 331,
+          "y": 200,
+          "value": "边"
+        },
+        "startPoint": {
+          "x": 298,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 370,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 298,
+            "y": 200
+          },
+          {
+            "x": 370,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_33inf2k"
+    },
+    {
+      "incoming": ["Activity_2mgtaia"],
+      "outgoing": ["Gateway_1fngqgj"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边2",
+        "text": {
+          "x": 507,
+          "y": 200,
+          "value": "边2"
+        },
+        "startPoint": {
+          "x": 470,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 555,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 470,
+            "y": 200
+          },
+          {
+            "x": 555,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_0pfouf0"
+    },
+    {
+      "incoming": ["Gateway_1fngqgj"],
+      "outgoing": ["Activity_1sp8qc8"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边3",
+        "text": {
+          "x": 664,
+          "y": 200,
+          "value": "边3"
+        },
+        "startPoint": {
+          "x": 605,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 710,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 605,
+            "y": 200
+          },
+          {
+            "x": 710,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_3918lhh"
+    },
+    {
+      "incoming": ["Activity_1sp8qc8"],
+      "outgoing": ["Event_08p8i6q"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边4",
+        "text": {
+          "x": 871,
+          "y": 200,
+          "value": "边4"
+        },
+        "startPoint": {
+          "x": 810,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 902,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 810,
+            "y": 200
+          },
+          {
+            "x": 902,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_379e0o9"
+    }
+  ]
+}
diff --git a/Yi.Pure.Vue3/src/views/flow-chart/index.vue b/Yi.Pure.Vue3/src/views/flow-chart/index.vue
new file mode 100644
index 00000000..030fcee8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/flow-chart/index.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import demoData from "./dataTurbo.json";
+import "@logicflow/core/dist/style/index.css";
+import "@logicflow/extension/lib/style/index.css";
+
+import LogicFlow from "@logicflow/core";
+import { ref, unref, onMounted } from "vue";
+import { BpmnNode } from "@/components/ReFlowChart/src/config";
+import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
+import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
+import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
+
+defineOptions({
+  name: "FlowChart"
+});
+
+const lf = ref(null);
+const graphData = ref(null);
+const dataVisible = ref<boolean>(false);
+const config = ref({
+  grid: true,
+  background: {
+    color: "#f7f9ff"
+  },
+  keyboard: {
+    enabled: true
+  }
+});
+const nodeList = BpmnNode;
+
+function initLf() {
+  // 画布配置
+  LogicFlow.use(Snapshot);
+  // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
+  LogicFlow.use(BpmnElement);
+  // 启动右键菜单
+  LogicFlow.use(Menu);
+  const domLf = new LogicFlow({
+    ...unref(config),
+    container: document.querySelector("#turbo")
+  });
+  lf.value = domLf;
+  // 设置边类型bpmn:sequenceFlow为默认类型
+  unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
+  onRender();
+}
+
+function onRender() {
+  // Turbo数据转换为LogicFlow内部识别的数据结构
+  const lFData = toLogicflowData(demoData);
+  lf.value.render(lFData);
+}
+
+function catData() {
+  graphData.value = unref(lf).getGraphData();
+  dataVisible.value = true;
+}
+
+onMounted(() => {
+  initLf();
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          流程图组件，采用开源的
+          <el-link
+            href="https://site.logic-flow.cn/docs/#/zh/guide/start"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            LogicFlow
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/flow-chart"
+        target="_blank"
+      >
+        代码位置 src/views/flow-chart
+      </el-link>
+    </template>
+    <div class="logic-flow-view">
+      <!-- 辅助工具栏 -->
+      <Control
+        v-if="lf"
+        class="demo-control"
+        :lf="lf"
+        :catTurboData="false"
+        @catData="catData"
+      />
+      <!-- 节点面板 -->
+      <NodePanel v-if="lf" :lf="lf" :nodeList="nodeList" />
+      <!-- 画布 -->
+      <div id="turbo" />
+      <!-- 数据查看面板 -->
+      <el-dialog
+        v-model="dataVisible"
+        class="flow-dialog"
+        title="数据"
+        width="50%"
+      >
+        <el-scrollbar>
+          <DataDialog :graphData="graphData" />
+        </el-scrollbar>
+      </el-dialog>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+#turbo {
+  width: 100%;
+  height: 65vh;
+}
+
+.logic-flow-view {
+  position: relative;
+  margin: 10px;
+}
+
+.demo-title {
+  margin: 20px;
+  text-align: center;
+}
+
+.demo-control {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  z-index: 2;
+}
+
+.time-plus {
+  cursor: pointer;
+}
+
+.add-panel {
+  position: absolute;
+  z-index: 11;
+  padding: 10px 5px;
+  background-color: white;
+}
+
+.el-drawer__body {
+  z-index: 3;
+  height: 80%;
+  margin-top: -30px;
+  overflow: auto;
+}
+
+:deep(.flow-dialog) {
+  position: relative;
+  top: 5vh;
+  left: 0;
+  margin: 0 auto;
+  transform: none;
+}
+
+:deep(.flow-dialog) .el-dialog__body {
+  height: 85vh;
+  overflow: auto;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/ganttastic/index.vue b/Yi.Pure.Vue3/src/views/ganttastic/index.vue
new file mode 100644
index 00000000..c2015d02
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/ganttastic/index.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://zunnzunn.github.io/vue-ganttastic/introduction.html
+import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
+
+const context = ref([
+  [
+    {
+      week: "星期一",
+      beginDate: "06:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "0",
+        hasHandles: true,
+        label: "需求收集和分析  负责人：小张",
+        style: {
+          background: "#e96560"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期二",
+      beginDate: "09:00",
+      endDate: "18:00",
+      ganttBarConfig: {
+        id: "1",
+        hasHandles: true,
+        label: "系统设计  负责人：小强",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期三",
+      beginDate: "07:00",
+      endDate: "20:00",
+      ganttBarConfig: {
+        id: "2",
+        hasHandles: true,
+        label: "编码实现  负责人：老李",
+        style: {
+          background: "#77d6fa"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期四",
+      beginDate: "06:00",
+      endDate: "21:00",
+      ganttBarConfig: {
+        id: "3",
+        hasHandles: true,
+        label: "编码实现  负责人：小明",
+        style: {
+          color: "#fff",
+          background: "#1b2a47"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期五",
+      beginDate: "05:00",
+      endDate: "19:00",
+      ganttBarConfig: {
+        id: "4",
+        hasHandles: true,
+        label: "内部测试  负责人：小雪",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期六",
+      beginDate: "10:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "5",
+        hasHandles: true,
+        label: "系统优化和文档整理  负责人：小欣",
+        style: {
+          background: "#f8bc45"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期天",
+      beginDate: "04:00",
+      endDate: "23:59",
+      ganttBarConfig: {
+        id: "6",
+        immobile: false,
+        hasHandles: false,
+        label: "部署和上线  负责人：老王",
+        style: {
+          background: "#f3953d"
+        }
+      }
+    }
+  ]
+]);
+
+function getWeekRange() {
+  const today = new Date();
+  const dayOfWeek = today.getDay();
+
+  const startDate = new Date(today);
+  startDate.setDate(today.getDate() - dayOfWeek + 1);
+
+  const endDate = new Date(startDate);
+  endDate.setDate(startDate.getDate() + 6);
+
+  const formatDate = date => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const currentWeekStart = formatDate(startDate);
+  const currentWeekEnd = formatDate(endDate);
+
+  return {
+    currentWeekStart,
+    currentWeekEnd
+  };
+}
+
+const weekRangeInChina = getWeekRange();
+</script>
+
+<template>
+  <g-gantt-chart
+    chart-start="00:00"
+    chart-end="23:59"
+    precision="hour"
+    date-format="HH:mm"
+    bar-start="beginDate"
+    bar-end="endDate"
+    grid
+  >
+    <template #upper-timeunit>
+      <h1>
+        {{
+          `${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`
+        }}
+      </h1>
+    </template>
+    <g-gantt-row
+      v-for="(item, index) in context"
+      :key="index"
+      :bars="item"
+      :label="item[0].week"
+      highlight-on-hover
+    />
+  </g-gantt-chart>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/guide/index.vue b/Yi.Pure.Vue3/src/views/guide/index.vue
new file mode 100644
index 00000000..e10d098b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/guide/index.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import intro from "intro.js";
+import "intro.js/minified/introjs.min.css";
+
+type GuideStep = {
+  element: string | HTMLElement;
+  title: string;
+  intro: string;
+  position: "left" | "right" | "top" | "bottom";
+};
+
+defineOptions({
+  name: "Guide"
+});
+
+const GUIDE_STEPS = [
+  {
+    element: document.querySelector(".sidebar-logo-container") as
+      | string
+      | HTMLElement,
+    title: "项目名称和Logo",
+    intro: "您可以在这里设置项目名称和Logo",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-search") as string | HTMLElement,
+    title: "搜索菜单",
+    intro: "您可以在这里搜索想要查看的菜单",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-translation") as
+      | string
+      | HTMLElement,
+    title: "国际化",
+    intro: "您可以在这里进行语言切换",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#full-screen") as string | HTMLElement,
+    title: "全屏",
+    intro: "您可以在这里进行全屏切换",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-notice") as string | HTMLElement,
+    title: "消息通知",
+    intro: "您可以在这里查看管理员发送的消息",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".set-icon") as string | HTMLElement,
+    title: "系统配置",
+    intro: "您可以在这里查看系统配置",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".tags-view") as string | HTMLElement,
+    title: "多标签页",
+    intro: "这里是您访问过的页面的历史",
+    position: "bottom"
+  }
+] as Partial<GuideStep>[];
+
+const tourOpen = ref(false);
+
+const onGuide = () => {
+  intro()
+    .setOptions({
+      steps: GUIDE_STEPS
+    })
+    .start();
+};
+
+const onTour = () => {
+  tourOpen.value = true;
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          引导页常用于引导式介绍项目的基本功能或亮点
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/guide/index.vue"
+        target="_blank"
+      >
+        代码位置 src/views/guide/index.vue
+      </el-link>
+    </template>
+    <el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
+    <el-button @click="onTour"> 打开引导页 (el-tour) </el-button>
+
+    <el-tour v-model="tourOpen">
+      <el-tour-step
+        v-for="step in GUIDE_STEPS"
+        :key="step.title"
+        :target="() => step.element"
+        :title="step.title"
+        :description="step.intro"
+        :placement="step.position"
+      />
+    </el-tour>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/list/card/components/ListCard.vue b/Yi.Pure.Vue3/src/views/list/card/components/ListCard.vue
new file mode 100644
index 00000000..0501a4ae
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/list/card/components/ListCard.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import shopIcon from "@/assets/svg/shop.svg?component";
+import laptopIcon from "@/assets/svg/laptop.svg?component";
+import serviceIcon from "@/assets/svg/service.svg?component";
+import calendarIcon from "@/assets/svg/calendar.svg?component";
+import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+
+defineOptions({
+  name: "ReCard"
+});
+
+interface CardProductType {
+  type: number;
+  isSetup: boolean;
+  description: string;
+  name: string;
+}
+
+const props = defineProps({
+  product: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const emit = defineEmits(["manage-product", "delete-item"]);
+
+const handleClickManage = (product: CardProductType) => {
+  emit("manage-product", product);
+};
+
+const handleClickDelete = (product: CardProductType) => {
+  emit("delete-item", product);
+};
+
+const cardClass = computed(() => [
+  "list-card-item",
+  { "list-card-item__disabled": !props.product.isSetup }
+]);
+
+const cardLogoClass = computed(() => [
+  "list-card-item_detail--logo",
+  { "list-card-item_detail--logo__disabled": !props.product.isSetup }
+]);
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="list-card-item_detail bg-bg_color">
+      <el-row justify="space-between">
+        <div :class="cardLogoClass">
+          <shopIcon v-if="product.type === 1" />
+          <calendarIcon v-if="product.type === 2" />
+          <serviceIcon v-if="product.type === 3" />
+          <userAvatarIcon v-if="product.type === 4" />
+          <laptopIcon v-if="product.type === 5" />
+        </div>
+        <div class="list-card-item_detail--operation">
+          <el-tag
+            :color="product.isSetup ? '#00a870' : '#eee'"
+            effect="dark"
+            class="mx-1 list-card-item_detail--operation--tag"
+          >
+            {{ product.isSetup ? "已启用" : "已停用" }}
+          </el-tag>
+          <el-dropdown trigger="click" :disabled="!product.isSetup">
+            <IconifyIconOffline :icon="More2Fill" class="text-[24px]" />
+            <template #dropdown>
+              <el-dropdown-menu :disabled="!product.isSetup">
+                <el-dropdown-item @click="handleClickManage(product)">
+                  管理
+                </el-dropdown-item>
+                <el-dropdown-item @click="handleClickDelete(product)">
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-row>
+      <p class="list-card-item_detail--name text-text_color_primary">
+        {{ product.name }}
+      </p>
+      <p class="list-card-item_detail--desc text-text_color_regular">
+        {{ product.description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.list-card-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 3px;
+
+  &_detail {
+    flex: 1;
+    min-height: 140px;
+    padding: 24px 32px;
+
+    &--logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 46px;
+      height: 46px;
+      font-size: 26px;
+      color: #0052d9;
+      background: #e0ebff;
+      border-radius: 50%;
+
+      &__disabled {
+        color: #a1c4ff;
+      }
+    }
+
+    &--operation {
+      display: flex;
+      height: 100%;
+
+      &--tag {
+        border: 0;
+      }
+    }
+
+    &--name {
+      margin: 24px 0 8px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    &--desc {
+      display: -webkit-box;
+      height: 40px;
+      margin-bottom: 24px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  &__disabled {
+    .list-card-item_detail--name,
+    .list-card-item_detail--desc {
+      color: var(--el-text-color-disabled);
+    }
+
+    .list-card-item_detail--operation--tag {
+      color: #bababa;
+    }
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/list/card/components/ListDialogForm.vue b/Yi.Pure.Vue3/src/views/list/card/components/ListDialogForm.vue
new file mode 100644
index 00000000..86a95682
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/list/card/components/ListDialogForm.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { message } from "@/utils/message";
+import { FormInstance } from "element-plus";
+
+const SELECT_OPTIONS = [
+  { label: "网关", value: 1 },
+  { label: "人工智能", value: 2 },
+  { label: "CVM", value: 3 },
+  { label: "防火墙", value: 4 },
+  { label: "未知", value: 5 }
+];
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  }
+});
+
+const ruleFormRef = ref<FormInstance>();
+
+const formVisible = ref(false);
+const formData = ref(props.data);
+const textareaValue = ref("");
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      message("提交成功", { type: "success" });
+      formVisible.value = false;
+      resetForm(formEl);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const closeDialog = () => {
+  formVisible.value = false;
+  resetForm(ruleFormRef.value);
+};
+
+const emit = defineEmits(["update:visible"]);
+watch(
+  () => formVisible.value,
+  val => {
+    emit("update:visible", val);
+  }
+);
+
+watch(
+  () => props.visible,
+  val => {
+    formVisible.value = val;
+  }
+);
+
+watch(
+  () => props.data,
+  val => {
+    formData.value = val;
+  }
+);
+
+const rules = {
+  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
+};
+</script>
+
+<template>
+  <el-dialog
+    v-model="formVisible"
+    title="新建产品"
+    :width="680"
+    draggable
+    :before-close="closeDialog"
+  >
+    <!-- 表单内容 -->
+    <el-form
+      ref="ruleFormRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          :style="{ width: '480px' }"
+          placeholder="请输入产品名称"
+        />
+      </el-form-item>
+      <el-form-item label="产品状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio value="0">已停用</el-radio>
+          <el-radio value="1">已启用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="产品描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          :style="{ width: '480px' }"
+          placeholder="请输入产品描述"
+        />
+      </el-form-item>
+      <el-form-item label="产品类型" prop="type">
+        <el-select
+          v-model="formData.type"
+          clearable
+          :style="{ width: '480px' }"
+        >
+          <el-option
+            v-for="(item, index) in SELECT_OPTIONS"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+          >
+            {{ item.label }}
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="mark">
+        <el-input
+          v-model="textareaValue"
+          type="textarea"
+          :style="{ width: '480px' }"
+          placeholder="请输入内容"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="submitForm(ruleFormRef)">
+        确定
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/list/card/index.vue b/Yi.Pure.Vue3/src/views/list/card/index.vue
new file mode 100644
index 00000000..7cad5c4e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/list/card/index.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { getCardList } from "@/api/list";
+import { message } from "@/utils/message";
+import { ElMessageBox } from "element-plus";
+import { ref, onMounted, nextTick } from "vue";
+import ListCard from "./components/ListCard.vue";
+import ListDialogForm from "./components/ListDialogForm.vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+
+defineOptions({
+  name: "CardList"
+});
+
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `;
+
+const INITIAL_DATA = {
+  name: "",
+  status: "",
+  description: "",
+  type: "",
+  mark: ""
+};
+
+const pagination = ref({ current: 1, pageSize: 12, total: 0 });
+
+const productList = ref([]);
+const dataLoading = ref(true);
+
+const getCardListData = async () => {
+  try {
+    const { data } = await getCardList();
+    productList.value = data.list;
+    pagination.value = {
+      ...pagination.value,
+      total: data.list.length
+    };
+  } catch (e) {
+    console.log(e);
+  } finally {
+    setTimeout(() => {
+      dataLoading.value = false;
+    }, 500);
+  }
+};
+
+onMounted(() => {
+  getCardListData();
+});
+
+const formDialogVisible = ref(false);
+const formData = ref({ ...INITIAL_DATA });
+const searchValue = ref("");
+
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.current = 1;
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.current = current;
+};
+const handleDeleteItem = product => {
+  ElMessageBox.confirm(
+    product
+      ? `确认删除后${product.name}的所有产品信息将被清空, 且无法恢复`
+      : "",
+    "提示",
+    {
+      type: "warning"
+    }
+  )
+    .then(() => {
+      message("删除成功", { type: "success" });
+    })
+    .catch(() => {});
+};
+const handleManageProduct = product => {
+  formDialogVisible.value = true;
+  nextTick(() => {
+    formData.value = { ...product, status: product?.isSetup ? "1" : "0" };
+  });
+};
+</script>
+
+<template>
+  <div>
+    <div class="w-full flex justify-between mb-4">
+      <el-button
+        :icon="useRenderIcon(AddFill)"
+        @click="formDialogVisible = true"
+      >
+        新建产品
+      </el-button>
+      <el-input
+        v-model="searchValue"
+        style="width: 300px"
+        placeholder="请输入产品名称"
+        clearable
+      >
+        <template #suffix>
+          <el-icon class="el-input__icon">
+            <IconifyIconOffline
+              v-show="searchValue.length === 0"
+              icon="ri:search-line"
+            />
+          </el-icon>
+        </template>
+      </el-input>
+    </div>
+    <div
+      v-loading="dataLoading"
+      :element-loading-svg="svg"
+      element-loading-svg-view-box="-10, -10, 50, 50"
+    >
+      <el-empty
+        v-show="
+          productList
+            .slice(
+              pagination.pageSize * (pagination.current - 1),
+              pagination.pageSize * pagination.current
+            )
+            .filter(v =>
+              v.name.toLowerCase().includes(searchValue.toLowerCase())
+            ).length === 0
+        "
+        :description="`${searchValue} 产品不存在`"
+      />
+      <template v-if="pagination.total > 0">
+        <el-row :gutter="16">
+          <el-col
+            v-for="(product, index) in productList
+              .slice(
+                pagination.pageSize * (pagination.current - 1),
+                pagination.pageSize * pagination.current
+              )
+              .filter(v =>
+                v.name.toLowerCase().includes(searchValue.toLowerCase())
+              )"
+            :key="index"
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="4"
+          >
+            <ListCard
+              :product="product"
+              @delete-item="handleDeleteItem"
+              @manage-product="handleManageProduct"
+            />
+          </el-col>
+        </el-row>
+        <el-pagination
+          v-model:currentPage="pagination.current"
+          class="float-right"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[12, 24, 36]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="onPageSizeChange"
+          @current-change="onCurrentChange"
+        />
+      </template>
+    </div>
+    <ListDialogForm v-model:visible="formDialogVisible" :data="formData" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/login/components/LoginPhone.vue b/Yi.Pure.Vue3/src/views/login/components/LoginPhone.vue
new file mode 100644
index 00000000..0a943707
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/components/LoginPhone.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { message } from "@/utils/message";
+import { phoneRules } from "../utils/rule";
+import type { FormInstance } from "element-plus";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useVerifyCode } from "../utils/verifyCode";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";
+
+const { t } = useI18n();
+const loading = ref(false);
+const ruleForm = reactive({
+  phone: "",
+  verifyCode: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+
+const onLogin = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      // 模拟登录请求，需根据实际开发进行修改
+      setTimeout(() => {
+        message(transformI18n($t("login.pureLoginSuccess")), {
+          type: "success"
+        });
+        loading.value = false;
+      }, 2000);
+    } else {
+      loading.value = false;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
+    <Motion>
+      <el-form-item prop="phone">
+        <el-input
+          v-model="ruleForm.phone"
+          clearable
+          :placeholder="t('login.purePhone')"
+          :prefix-icon="useRenderIcon(Iphone)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            v-model="ruleForm.verifyCode"
+            clearable
+            :placeholder="t('login.pureSmsVerifyCode')"
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{
+              text.length > 0
+                ? text + t("login.pureInfo")
+                : t("login.pureGetVerifyCode")
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onLogin(ruleFormRef)"
+        >
+          {{ t("login.pureLogin") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          {{ t("login.pureBack") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/login/components/LoginQrCode.vue b/Yi.Pure.Vue3/src/views/login/components/LoginQrCode.vue
new file mode 100644
index 00000000..3963f84c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/components/LoginQrCode.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import Motion from "../utils/motion";
+import ReQrcode from "@/components/ReQrcode";
+import { useUserStoreHook } from "@/store/modules/user";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <Motion class="-mt-2 -mb-2">
+    <ReQrcode :text="t('login.pureTest')" />
+  </Motion>
+  <Motion :delay="100">
+    <el-divider>
+      <p class="text-gray-500 text-xs">{{ t("login.pureTip") }}</p>
+    </el-divider>
+  </Motion>
+  <Motion :delay="150">
+    <el-button
+      class="w-full mt-4"
+      @click="useUserStoreHook().SET_CURRENTPAGE(0)"
+    >
+      {{ t("login.pureBack") }}
+    </el-button>
+  </Motion>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/login/components/LoginRegist.vue b/Yi.Pure.Vue3/src/views/login/components/LoginRegist.vue
new file mode 100644
index 00000000..44379956
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/components/LoginRegist.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { message } from "@/utils/message";
+import { updateRules } from "../utils/rule";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
+import User from "@iconify-icons/ri/user-3-fill";
+
+const { t } = useI18n();
+const checked = ref(false);
+const loading = ref(false);
+const ruleForm = reactive({
+  username: "",
+  phone: "",
+  verifyCode: "",
+  password: "",
+  repeatPassword: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+const repeatPasswordRule = [
+  {
+    validator: (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
+      } else if (ruleForm.password !== value) {
+        callback(
+          new Error(transformI18n($t("login.purePassWordDifferentReg")))
+        );
+      } else {
+        callback();
+      }
+    },
+    trigger: "blur"
+  }
+];
+
+const onUpdate = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      if (checked.value) {
+        // 模拟请求，需根据实际开发进行修改
+        setTimeout(() => {
+          message(transformI18n($t("login.pureRegisterSuccess")), {
+            type: "success"
+          });
+          loading.value = false;
+        }, 2000);
+      } else {
+        loading.value = false;
+        message(transformI18n($t("login.pureTickPrivacy")), {
+          type: "warning"
+        });
+      }
+    } else {
+      loading.value = false;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="updateRules"
+    size="large"
+  >
+    <Motion>
+      <el-form-item
+        :rules="[
+          {
+            required: true,
+            message: transformI18n($t('login.pureUsernameReg')),
+            trigger: 'blur'
+          }
+        ]"
+        prop="username"
+      >
+        <el-input
+          v-model="ruleForm.username"
+          clearable
+          :placeholder="t('login.pureUsername')"
+          :prefix-icon="useRenderIcon(User)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="phone">
+        <el-input
+          v-model="ruleForm.phone"
+          clearable
+          :placeholder="t('login.purePhone')"
+          :prefix-icon="useRenderIcon(Iphone)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            v-model="ruleForm.verifyCode"
+            clearable
+            :placeholder="t('login.pureSmsVerifyCode')"
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{
+              text.length > 0
+                ? text + t("login.pureInfo")
+                : t("login.pureGetVerifyCode")
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item prop="password">
+        <el-input
+          v-model="ruleForm.password"
+          clearable
+          show-password
+          :placeholder="t('login.purePassword')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="250">
+      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
+        <el-input
+          v-model="ruleForm.repeatPassword"
+          clearable
+          show-password
+          :placeholder="t('login.pureSure')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="300">
+      <el-form-item>
+        <el-checkbox v-model="checked">
+          {{ t("login.pureReadAccept") }}
+        </el-checkbox>
+        <el-button link type="primary">
+          {{ t("login.purePrivacyPolicy") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="350">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onUpdate(ruleFormRef)"
+        >
+          {{ t("login.pureDefinite") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="400">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          {{ t("login.pureBack") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/login/components/LoginUpdate.vue b/Yi.Pure.Vue3/src/views/login/components/LoginUpdate.vue
new file mode 100644
index 00000000..469a4559
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/components/LoginUpdate.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { message } from "@/utils/message";
+import { updateRules } from "../utils/rule";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
+
+const { t } = useI18n();
+const loading = ref(false);
+const ruleForm = reactive({
+  phone: "",
+  verifyCode: "",
+  password: "",
+  repeatPassword: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+const repeatPasswordRule = [
+  {
+    validator: (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
+      } else if (ruleForm.password !== value) {
+        callback(
+          new Error(transformI18n($t("login.purePassWordDifferentReg")))
+        );
+      } else {
+        callback();
+      }
+    },
+    trigger: "blur"
+  }
+];
+
+const onUpdate = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      // 模拟请求，需根据实际开发进行修改
+      setTimeout(() => {
+        message(transformI18n($t("login.purePassWordUpdateReg")), {
+          type: "success"
+        });
+        loading.value = false;
+      }, 2000);
+    } else {
+      loading.value = false;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="updateRules"
+    size="large"
+  >
+    <Motion>
+      <el-form-item prop="phone">
+        <el-input
+          v-model="ruleForm.phone"
+          clearable
+          :placeholder="t('login.purePhone')"
+          :prefix-icon="useRenderIcon(Iphone)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            v-model="ruleForm.verifyCode"
+            clearable
+            :placeholder="t('login.pureSmsVerifyCode')"
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{
+              text.length > 0
+                ? text + t("login.pureInfo")
+                : t("login.pureGetVerifyCode")
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item prop="password">
+        <el-input
+          v-model="ruleForm.password"
+          clearable
+          show-password
+          :placeholder="t('login.purePassword')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
+        <el-input
+          v-model="ruleForm.repeatPassword"
+          clearable
+          show-password
+          :placeholder="t('login.pureSure')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="250">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onUpdate(ruleFormRef)"
+        >
+          {{ t("login.pureDefinite") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="300">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          {{ t("login.pureBack") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/login/index.vue b/Yi.Pure.Vue3/src/views/login/index.vue
new file mode 100644
index 00000000..a0bcaf3e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/index.vue
@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import Motion from "./utils/motion";
+import { useRouter } from "vue-router";
+import { message } from "@/utils/message";
+import { loginRules } from "./utils/rule";
+import TypeIt from "@/components/ReTypeit";
+import { debounce } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+import { useEventListener } from "@vueuse/core";
+import type { FormInstance } from "element-plus";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { operates, thirdParty } from "./utils/enums";
+import { useLayout } from "@/layout/hooks/useLayout";
+import LoginPhone from "./components/LoginPhone.vue";
+import LoginRegist from "./components/LoginRegist.vue";
+import LoginUpdate from "./components/LoginUpdate.vue";
+import LoginQrCode from "./components/LoginQrCode.vue";
+import { useUserStoreHook } from "@/store/modules/user";
+import { initRouter, getTopMenu } from "@/router/utils";
+import { bg, avatar, illustration } from "./utils/static";
+import { ReImageVerify } from "@/components/ReImageVerify";
+import { ref, toRaw, reactive, watch, computed } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+
+import dayIcon from "@/assets/svg/day.svg?component";
+import darkIcon from "@/assets/svg/dark.svg?component";
+import globalization from "@/assets/svg/globalization.svg?component";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Check from "@iconify-icons/ep/check";
+import User from "@iconify-icons/ri/user-3-fill";
+import Info from "@iconify-icons/ri/information-line";
+
+defineOptions({
+  name: "Login"
+});
+
+const imgCode = ref("");
+const loginDay = ref(7);
+const router = useRouter();
+const loading = ref(false);
+const checked = ref(false);
+const disabled = ref(false);
+const ruleFormRef = ref<FormInstance>();
+const currentPage = computed(() => {
+  return useUserStoreHook().currentPage;
+});
+
+const { t } = useI18n();
+const { initStorage } = useLayout();
+initStorage();
+const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
+dataThemeChange(overallStyle.value);
+const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
+const { locale, translationCh, translationEn } = useTranslationLang();
+
+const ruleForm = reactive({
+  username: "admin",
+  password: "admin123",
+  verifyCode: ""
+});
+
+const onLogin = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      loading.value = true;
+      useUserStoreHook()
+        .loginByUsername({ username: ruleForm.username, password: "admin123" })
+        .then(res => {
+          if (res.success) {
+            // 获取后端路由
+            return initRouter().then(() => {
+              disabled.value = true;
+              router
+                .push(getTopMenu(true).path)
+                .then(() => {
+                  message(t("login.pureLoginSuccess"), { type: "success" });
+                })
+                .finally(() => (disabled.value = false));
+            });
+          } else {
+            message(t("login.pureLoginFail"), { type: "error" });
+          }
+        })
+        .finally(() => (loading.value = false));
+    }
+  });
+};
+
+const immediateDebounce: any = debounce(
+  formRef => onLogin(formRef),
+  1000,
+  true
+);
+
+useEventListener(document, "keypress", ({ code }) => {
+  if (
+    ["Enter", "NumpadEnter"].includes(code) &&
+    !disabled.value &&
+    !loading.value
+  )
+    immediateDebounce(ruleFormRef.value);
+});
+
+watch(imgCode, value => {
+  useUserStoreHook().SET_VERIFYCODE(value);
+});
+watch(checked, bool => {
+  useUserStoreHook().SET_ISREMEMBERED(bool);
+});
+watch(loginDay, value => {
+  useUserStoreHook().SET_LOGINDAY(value);
+});
+</script>
+
+<template>
+  <div class="select-none">
+    <img :src="bg" class="wave" />
+    <div class="flex-c absolute right-5 top-3">
+      <!-- 主题 -->
+      <el-switch
+        v-model="dataTheme"
+        inline-prompt
+        :active-icon="dayIcon"
+        :inactive-icon="darkIcon"
+        @change="dataThemeChange"
+      />
+      <!-- 国际化 -->
+      <el-dropdown trigger="click">
+        <globalization
+          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
+        />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <IconifyIconOffline
+                v-show="locale === 'zh'"
+                class="check-zh"
+                :icon="Check"
+              />
+              简体中文
+            </el-dropdown-item>
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'en')"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              @click="translationEn"
+            >
+              <span v-show="locale === 'en'" class="check-en">
+                <IconifyIconOffline :icon="Check" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <div class="login-container">
+      <div class="img">
+        <component :is="toRaw(illustration)" />
+      </div>
+      <div class="login-box">
+        <div class="login-form">
+          <avatar class="avatar" />
+          <Motion>
+            <h2 class="outline-none">
+              <TypeIt
+                :options="{ strings: [title], cursor: false, speed: 100 }"
+              />
+            </h2>
+          </Motion>
+
+          <el-form
+            v-if="currentPage === 0"
+            ref="ruleFormRef"
+            :model="ruleForm"
+            :rules="loginRules"
+            size="large"
+          >
+            <Motion :delay="100">
+              <el-form-item
+                :rules="[
+                  {
+                    required: true,
+                    message: transformI18n($t('login.pureUsernameReg')),
+                    trigger: 'blur'
+                  }
+                ]"
+                prop="username"
+              >
+                <el-input
+                  v-model="ruleForm.username"
+                  clearable
+                  :placeholder="t('login.pureUsername')"
+                  :prefix-icon="useRenderIcon(User)"
+                />
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="150">
+              <el-form-item prop="password">
+                <el-input
+                  v-model="ruleForm.password"
+                  clearable
+                  show-password
+                  :placeholder="t('login.purePassword')"
+                  :prefix-icon="useRenderIcon(Lock)"
+                />
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="200">
+              <el-form-item prop="verifyCode">
+                <el-input
+                  v-model="ruleForm.verifyCode"
+                  clearable
+                  :placeholder="t('login.pureVerifyCode')"
+                  :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+                >
+                  <template v-slot:append>
+                    <ReImageVerify v-model:code="imgCode" />
+                  </template>
+                </el-input>
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="250">
+              <el-form-item>
+                <div class="w-full h-[20px] flex justify-between items-center">
+                  <el-checkbox v-model="checked">
+                    <span class="flex">
+                      <select
+                        v-model="loginDay"
+                        :style="{
+                          width: loginDay < 10 ? '10px' : '16px',
+                          outline: 'none',
+                          background: 'none',
+                          appearance: 'none'
+                        }"
+                      >
+                        <option value="1">1</option>
+                        <option value="7">7</option>
+                        <option value="30">30</option>
+                      </select>
+                      {{ t("login.pureRemember") }}
+                      <IconifyIconOffline
+                        v-tippy="{
+                          content: t('login.pureRememberInfo'),
+                          placement: 'top'
+                        }"
+                        :icon="Info"
+                        class="ml-1"
+                      />
+                    </span>
+                  </el-checkbox>
+                  <el-button
+                    link
+                    type="primary"
+                    @click="useUserStoreHook().SET_CURRENTPAGE(4)"
+                  >
+                    {{ t("login.pureForget") }}
+                  </el-button>
+                </div>
+                <el-button
+                  class="w-full mt-4"
+                  size="default"
+                  type="primary"
+                  :loading="loading"
+                  :disabled="disabled"
+                  @click="onLogin(ruleFormRef)"
+                >
+                  {{ t("login.pureLogin") }}
+                </el-button>
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="300">
+              <el-form-item>
+                <div class="w-full h-[20px] flex justify-between items-center">
+                  <el-button
+                    v-for="(item, index) in operates"
+                    :key="index"
+                    class="w-full mt-4"
+                    size="default"
+                    @click="useUserStoreHook().SET_CURRENTPAGE(index + 1)"
+                  >
+                    {{ t(item.title) }}
+                  </el-button>
+                </div>
+              </el-form-item>
+            </Motion>
+          </el-form>
+
+          <Motion v-if="currentPage === 0" :delay="350">
+            <el-form-item>
+              <el-divider>
+                <p class="text-gray-500 text-xs">
+                  {{ t("login.pureThirdLogin") }}
+                </p>
+              </el-divider>
+              <div class="w-full flex justify-evenly">
+                <span
+                  v-for="(item, index) in thirdParty"
+                  :key="index"
+                  :title="t(item.title)"
+                >
+                  <IconifyIconOnline
+                    :icon="`ri:${item.icon}-fill`"
+                    width="20"
+                    class="cursor-pointer text-gray-500 hover:text-blue-400"
+                  />
+                </span>
+              </div>
+            </el-form-item>
+          </Motion>
+          <!-- 手机号登录 -->
+          <LoginPhone v-if="currentPage === 1" />
+          <!-- 二维码登录 -->
+          <LoginQrCode v-if="currentPage === 2" />
+          <!-- 注册 -->
+          <LoginRegist v-if="currentPage === 3" />
+          <!-- 忘记密码 -->
+          <LoginUpdate v-if="currentPage === 4" />
+        </div>
+      </div>
+    </div>
+    <div
+      class="w-full flex-c absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
+    >
+      Copyright © 2020-present
+      <a
+        class="hover:text-primary"
+        href="https://github.com/pure-admin"
+        target="_blank"
+      >
+        &nbsp;{{ title }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url("@/style/login.css");
+</style>
+
+<style lang="scss" scoped>
+:deep(.el-input-group__append, .el-input-group__prepend) {
+  padding: 0;
+}
+
+.translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+  }
+
+  .check-en {
+    position: absolute;
+    left: 20px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/login/utils/enums.ts b/Yi.Pure.Vue3/src/views/login/utils/enums.ts
new file mode 100644
index 00000000..060c048a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/utils/enums.ts
@@ -0,0 +1,34 @@
+import { $t } from "@/plugins/i18n";
+
+const operates = [
+  {
+    title: $t("login.purePhoneLogin")
+  },
+  {
+    title: $t("login.pureQRCodeLogin")
+  },
+  {
+    title: $t("login.pureRegister")
+  }
+];
+
+const thirdParty = [
+  {
+    title: $t("login.pureWeChatLogin"),
+    icon: "wechat"
+  },
+  {
+    title: $t("login.pureAlipayLogin"),
+    icon: "alipay"
+  },
+  {
+    title: $t("login.pureQQLogin"),
+    icon: "qq"
+  },
+  {
+    title: $t("login.pureWeiBoLogin"),
+    icon: "weibo"
+  }
+];
+
+export { operates, thirdParty };
diff --git a/Yi.Pure.Vue3/src/views/login/utils/motion.ts b/Yi.Pure.Vue3/src/views/login/utils/motion.ts
new file mode 100644
index 00000000..2b1182c5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/utils/motion.ts
@@ -0,0 +1,40 @@
+import { h, defineComponent, withDirectives, resolveDirective } from "vue";
+
+/** 封装@vueuse/motion动画库中的自定义指令v-motion */
+export default defineComponent({
+  name: "Motion",
+  props: {
+    delay: {
+      type: Number,
+      default: 50
+    }
+  },
+  render() {
+    const { delay } = this;
+    const motion = resolveDirective("motion");
+    return withDirectives(
+      h(
+        "div",
+        {},
+        {
+          default: () => [this.$slots.default()]
+        }
+      ),
+      [
+        [
+          motion,
+          {
+            initial: { opacity: 0, y: 100 },
+            enter: {
+              opacity: 1,
+              y: 0,
+              transition: {
+                delay
+              }
+            }
+          }
+        ]
+      ]
+    );
+  }
+});
diff --git a/Yi.Pure.Vue3/src/views/login/utils/rule.ts b/Yi.Pure.Vue3/src/views/login/utils/rule.ts
new file mode 100644
index 00000000..2d629315
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/utils/rule.ts
@@ -0,0 +1,126 @@
+import { reactive } from "vue";
+import { isPhone } from "@pureadmin/utils";
+import type { FormRules } from "element-plus";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
+
+/** 6位数字验证码正则 */
+export const REGEXP_SIX = /^\d{6}$/;
+
+/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
+export const REGEXP_PWD =
+  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+
+/** 登录校验 */
+const loginRules = reactive<FormRules>({
+  password: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.purePassWordReg"))));
+        } else if (!REGEXP_PWD.test(value)) {
+          callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
+        } else if (useUserStoreHook().verifyCode !== value) {
+          callback(
+            new Error(transformI18n($t("login.pureVerifyCodeCorrectReg")))
+          );
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+/** 手机登录校验 */
+const phoneRules = reactive<FormRules>({
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.purePhoneReg"))));
+        } else if (!isPhone(value)) {
+          callback(new Error(transformI18n($t("login.purePhoneCorrectReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
+        } else if (!REGEXP_SIX.test(value)) {
+          callback(new Error(transformI18n($t("login.pureVerifyCodeSixReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+/** 忘记密码校验 */
+const updateRules = reactive<FormRules>({
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.purePhoneReg"))));
+        } else if (!isPhone(value)) {
+          callback(new Error(transformI18n($t("login.purePhoneCorrectReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
+        } else if (!REGEXP_SIX.test(value)) {
+          callback(new Error(transformI18n($t("login.pureVerifyCodeSixReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  password: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.purePassWordReg"))));
+        } else if (!REGEXP_PWD.test(value)) {
+          callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+export { loginRules, phoneRules, updateRules };
diff --git a/Yi.Pure.Vue3/src/views/login/utils/static.ts b/Yi.Pure.Vue3/src/views/login/utils/static.ts
new file mode 100644
index 00000000..18268d86
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/utils/static.ts
@@ -0,0 +1,5 @@
+import bg from "@/assets/login/bg.png";
+import avatar from "@/assets/login/avatar.svg?component";
+import illustration from "@/assets/login/illustration.svg?component";
+
+export { bg, avatar, illustration };
diff --git a/Yi.Pure.Vue3/src/views/login/utils/verifyCode.ts b/Yi.Pure.Vue3/src/views/login/utils/verifyCode.ts
new file mode 100644
index 00000000..b6d89a7b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/login/utils/verifyCode.ts
@@ -0,0 +1,50 @@
+import type { FormInstance, FormItemProp } from "element-plus";
+import { clone } from "@pureadmin/utils";
+import { ref } from "vue";
+
+const isDisabled = ref(false);
+const timer = ref(null);
+const text = ref("");
+
+export const useVerifyCode = () => {
+  const start = async (
+    formEl: FormInstance | undefined,
+    props: FormItemProp,
+    time = 60
+  ) => {
+    if (!formEl) return;
+    const initTime = clone(time, true);
+    await formEl.validateField(props, isValid => {
+      if (isValid) {
+        clearInterval(timer.value);
+        isDisabled.value = true;
+        text.value = `${time}`;
+        timer.value = setInterval(() => {
+          if (time > 0) {
+            time -= 1;
+            text.value = `${time}`;
+          } else {
+            text.value = "";
+            isDisabled.value = false;
+            clearInterval(timer.value);
+            time = initTime;
+          }
+        }, 1000);
+      }
+    });
+  };
+
+  const end = () => {
+    text.value = "";
+    isDisabled.value = false;
+    clearInterval(timer.value);
+  };
+
+  return {
+    isDisabled,
+    timer,
+    text,
+    start,
+    end
+  };
+};
diff --git a/Yi.Pure.Vue3/src/views/menuoverflow/index.vue b/Yi.Pure.Vue3/src/views/menuoverflow/index.vue
new file mode 100644
index 00000000..b52c5eab
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/menuoverflow/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  name: "MenuOverflow"
+});
+</script>
+
+<template>
+  <div>目录、菜单文字超出显示 Tooltip 文字提示</div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/monitor/online/hook.tsx b/Yi.Pure.Vue3/src/views/monitor/online/hook.tsx
new file mode 100644
index 00000000..65b5936e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/monitor/online/hook.tsx
@@ -0,0 +1,117 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { getOnlineLogsList } from "@/api/system";
+import { reactive, ref, onMounted, toRaw } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useRole() {
+  const form = reactive({
+    username: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "序号",
+      prop: "id",
+      minWidth: 60
+    },
+    {
+      label: "用户名",
+      prop: "username",
+      minWidth: 100
+    },
+    {
+      label: "登录 IP",
+      prop: "ip",
+      minWidth: 140
+    },
+    {
+      label: "登录地点",
+      prop: "address",
+      minWidth: 140
+    },
+    {
+      label: "操作系统",
+      prop: "system",
+      minWidth: 100
+    },
+    {
+      label: "浏览器类型",
+      prop: "browser",
+      minWidth: 100
+    },
+    {
+      label: "登录时间",
+      prop: "loginTime",
+      minWidth: 180,
+      formatter: ({ loginTime }) =>
+        dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  function handleOffline(row) {
+    message(`${row.username}已被强制下线`, { type: "success" });
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getOnlineLogsList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    resetForm,
+    handleOffline,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/monitor/online/index.vue b/Yi.Pure.Vue3/src/views/monitor/online/index.vue
new file mode 100644
index 00000000..fb854a79
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/monitor/online/index.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Plane from "@iconify-icons/ri/plane-line";
+import Refresh from "@iconify-icons/ep/refresh";
+
+defineOptions({
+  name: "OnlineUser"
+});
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  resetForm,
+  handleOffline,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole();
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="用户名" prop="username">
+        <el-input
+          v-model="form.username"
+          placeholder="请输入用户名"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="在线用户（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
+      <template v-slot="{ size, dynamicColumns }">
+        <pure-table
+          align-whole="center"
+          showOverflowTooltip
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 108 }"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :pagination="{ ...pagination, size }"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+        >
+          <template #operation="{ row }">
+            <el-popconfirm
+              :title="`是否强制下线${row.username}`"
+              @confirm="handleOffline(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(Plane)"
+                >
+                  强退
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/monitor/utils.ts b/Yi.Pure.Vue3/src/views/monitor/utils.ts
new file mode 100644
index 00000000..1350606c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/monitor/utils.ts
@@ -0,0 +1,129 @@
+/** 日期、时间选择器快捷选项，常搭配 [DatePicker](https://element-plus.org/zh-CN/component/date-picker.html) 和 [DateTimePicker](https://element-plus.org/zh-CN/component/datetime-picker.html) 的`shortcuts`属性使用 */
+export const getPickerShortcuts = (): Array<{
+  text: string;
+  value: Date | Function;
+}> => {
+  return [
+    {
+      text: "今天",
+      value: () => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const todayEnd = new Date();
+        todayEnd.setHours(23, 59, 59, 999);
+        return [today, todayEnd];
+      }
+    },
+    {
+      text: "昨天",
+      value: () => {
+        const yesterday = new Date();
+        yesterday.setDate(yesterday.getDate() - 1);
+        yesterday.setHours(0, 0, 0, 0);
+        const yesterdayEnd = new Date();
+        yesterdayEnd.setDate(yesterdayEnd.getDate() - 1);
+        yesterdayEnd.setHours(23, 59, 59, 999);
+        return [yesterday, yesterdayEnd];
+      }
+    },
+    {
+      text: "前天",
+      value: () => {
+        const beforeYesterday = new Date();
+        beforeYesterday.setDate(beforeYesterday.getDate() - 2);
+        beforeYesterday.setHours(0, 0, 0, 0);
+        const beforeYesterdayEnd = new Date();
+        beforeYesterdayEnd.setDate(beforeYesterdayEnd.getDate() - 2);
+        beforeYesterdayEnd.setHours(23, 59, 59, 999);
+        return [beforeYesterday, beforeYesterdayEnd];
+      }
+    },
+    {
+      text: "本周",
+      value: () => {
+        const today = new Date();
+        const startOfWeek = new Date(
+          today.getFullYear(),
+          today.getMonth(),
+          today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1)
+        );
+        startOfWeek.setHours(0, 0, 0, 0);
+        const endOfWeek = new Date(
+          startOfWeek.getTime() +
+            6 * 24 * 60 * 60 * 1000 +
+            23 * 60 * 60 * 1000 +
+            59 * 60 * 1000 +
+            59 * 1000 +
+            999
+        );
+        return [startOfWeek, endOfWeek];
+      }
+    },
+    {
+      text: "上周",
+      value: () => {
+        const today = new Date();
+        const startOfLastWeek = new Date(
+          today.getFullYear(),
+          today.getMonth(),
+          today.getDate() - today.getDay() - 7 + (today.getDay() === 0 ? -6 : 1)
+        );
+        startOfLastWeek.setHours(0, 0, 0, 0);
+        const endOfLastWeek = new Date(
+          startOfLastWeek.getTime() +
+            6 * 24 * 60 * 60 * 1000 +
+            23 * 60 * 60 * 1000 +
+            59 * 60 * 1000 +
+            59 * 1000 +
+            999
+        );
+        return [startOfLastWeek, endOfLastWeek];
+      }
+    },
+    {
+      text: "本月",
+      value: () => {
+        const today = new Date();
+        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+        startOfMonth.setHours(0, 0, 0, 0);
+        const endOfMonth = new Date(
+          today.getFullYear(),
+          today.getMonth() + 1,
+          0
+        );
+        endOfMonth.setHours(23, 59, 59, 999);
+        return [startOfMonth, endOfMonth];
+      }
+    },
+    {
+      text: "上个月",
+      value: () => {
+        const today = new Date();
+        const startOfLastMonth = new Date(
+          today.getFullYear(),
+          today.getMonth() - 1,
+          1
+        );
+        startOfLastMonth.setHours(0, 0, 0, 0);
+        const endOfLastMonth = new Date(
+          today.getFullYear(),
+          today.getMonth(),
+          0
+        );
+        endOfLastMonth.setHours(23, 59, 59, 999);
+        return [startOfLastMonth, endOfLastMonth];
+      }
+    },
+    {
+      text: "本年",
+      value: () => {
+        const today = new Date();
+        const startOfYear = new Date(today.getFullYear(), 0, 1);
+        startOfYear.setHours(0, 0, 0, 0);
+        const endOfYear = new Date(today.getFullYear(), 11, 31);
+        endOfYear.setHours(23, 59, 59, 999);
+        return [startOfYear, endOfYear];
+      }
+    }
+  ];
+};
diff --git a/Yi.Pure.Vue3/src/views/nested/menu1/menu1-1/index.vue b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-1/index.vue
new file mode 100644
index 00000000..f2f33028
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-1/index.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu1-1"
+});
+
+const input = ref("");
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="dark:text-white">
+    <p>{{ t("menus.pureMenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.pureMenu1-1") }}</p>
+    <el-input v-model="input" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
new file mode 100644
index 00000000..a304199c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu1-2-1"
+});
+
+const input = ref("");
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="dark:text-white">
+    <p>{{ t("menus.pureMenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.pureMenu1-2") }}</p>
+    <p style="text-indent: 4em">{{ t("menus.pureMenu1-2-1") }}</p>
+    <el-input v-model="input" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
new file mode 100644
index 00000000..9c12cd92
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+
+defineOptions({
+  name: "Menu1-2-2"
+});
+
+const input = ref("");
+const { t } = useI18n();
+const { query } = useRoute();
+</script>
+
+<template>
+  <div class="dark:text-white">
+    <p>{{ t("menus.pureMenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.pureMenu1-2") }}</p>
+    <p style="text-indent: 4em">{{ t("menus.pureMenu1-2-2") }}</p>
+    <el-input v-model="input" />
+
+    <div v-if="query.text" class="mt-4">
+      此页面携带的参数值为：{{ query.text }}
+    </div>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/nested/menu1/menu1-3/index.vue b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-3/index.vue
new file mode 100644
index 00000000..f443e90a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/nested/menu1/menu1-3/index.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu1-3"
+});
+
+const input = ref("");
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="dark:text-white">
+    <p>{{ t("menus.pureMenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.pureMenu1-3") }}</p>
+    <el-input v-model="input" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/nested/menu2/index.vue b/Yi.Pure.Vue3/src/views/nested/menu2/index.vue
new file mode 100644
index 00000000..9fb7b670
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/nested/menu2/index.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu2"
+});
+
+const input = ref("");
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="dark:text-white">
+    <p>{{ t("menus.pureMenu2") }}</p>
+    <el-input v-model="input" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/permission/button/index.vue b/Yi.Pure.Vue3/src/views/permission/button/index.vue
new file mode 100644
index 00000000..c1d5297c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/permission/button/index.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { hasAuth, getAuths } from "@/router/utils";
+
+defineOptions({
+  name: "PermissionButtonRouter"
+});
+</script>
+
+<template>
+  <div>
+    <p class="mb-2">当前拥有的code列表：{{ getAuths() }}</p>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">组件方式判断权限</div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue"
+          target="_blank"
+        >
+          代码位置 src/views/permission/button/index.vue
+        </el-link>
+      </template>
+      <el-space wrap>
+        <Auth value="permission:btn:add">
+          <el-button plain type="warning">
+            拥有code：'permission:btn:add' 权限可见
+          </el-button>
+        </Auth>
+        <Auth :value="['permission:btn:edit']">
+          <el-button plain type="primary">
+            拥有code：['permission:btn:edit'] 权限可见
+          </el-button>
+        </Auth>
+        <Auth
+          :value="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+        >
+          <el-button plain type="danger">
+            拥有code：['permission:btn:add', 'permission:btn:edit',
+            'permission:btn:delete'] 权限可见
+          </el-button>
+        </Auth>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">函数方式判断权限</div>
+      </template>
+      <el-space wrap>
+        <el-button v-if="hasAuth('permission:btn:add')" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button v-if="hasAuth(['permission:btn:edit'])" plain type="primary">
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-if="
+            hasAuth([
+              'permission:btn:add',
+              'permission:btn:edit',
+              'permission:btn:delete'
+            ])
+          "
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          指令方式判断权限（该方式不能动态修改权限）
+        </div>
+      </template>
+      <el-space wrap>
+        <el-button v-auth="'permission:btn:add'" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button v-auth="['permission:btn:edit']" plain type="primary">
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-auth="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/permission/button/perms.vue b/Yi.Pure.Vue3/src/views/permission/button/perms.vue
new file mode 100644
index 00000000..5a256a25
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/permission/button/perms.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { hasPerms } from "@/utils/auth";
+import { useUserStoreHook } from "@/store/modules/user";
+
+const { permissions } = useUserStoreHook();
+
+defineOptions({
+  name: "PermissionButtonLogin"
+});
+</script>
+
+<template>
+  <div>
+    <p class="mb-2">当前拥有的code列表：{{ permissions }}</p>
+    <p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
+      *:*:* 代表拥有全部按钮级别权限
+    </p>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">组件方式判断权限</div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/perms.vue"
+          target="_blank"
+        >
+          代码位置 src/views/permission/button/perms.vue
+        </el-link>
+      </template>
+      <el-space wrap>
+        <Perms value="permission:btn:add">
+          <el-button plain type="warning">
+            拥有code：'permission:btn:add' 权限可见
+          </el-button>
+        </Perms>
+        <Perms :value="['permission:btn:edit']">
+          <el-button plain type="primary">
+            拥有code：['permission:btn:edit'] 权限可见
+          </el-button>
+        </Perms>
+        <Perms
+          :value="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+        >
+          <el-button plain type="danger">
+            拥有code：['permission:btn:add', 'permission:btn:edit',
+            'permission:btn:delete'] 权限可见
+          </el-button>
+        </Perms>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">函数方式判断权限</div>
+      </template>
+      <el-space wrap>
+        <el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button
+          v-if="hasPerms(['permission:btn:edit'])"
+          plain
+          type="primary"
+        >
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-if="
+            hasPerms([
+              'permission:btn:add',
+              'permission:btn:edit',
+              'permission:btn:delete'
+            ])
+          "
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          指令方式判断权限（该方式不能动态修改权限）
+        </div>
+      </template>
+      <el-space wrap>
+        <el-button v-perms="'permission:btn:add'" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button v-perms="['permission:btn:edit']" plain type="primary">
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-perms="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/permission/page/index.vue b/Yi.Pure.Vue3/src/views/permission/page/index.vue
new file mode 100644
index 00000000..cd602c6f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/permission/page/index.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { initRouter } from "@/router/utils";
+import { storageLocal } from "@pureadmin/utils";
+import { type CSSProperties, ref, computed } from "vue";
+import { useUserStoreHook } from "@/store/modules/user";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+defineOptions({
+  name: "PermissionPage"
+});
+
+const elStyle = computed((): CSSProperties => {
+  return {
+    width: "85vw",
+    justifyContent: "start"
+  };
+});
+
+const username = ref(useUserStoreHook()?.username);
+
+const options = [
+  {
+    value: "admin",
+    label: "管理员角色"
+  },
+  {
+    value: "common",
+    label: "普通角色"
+  }
+];
+
+function onChange() {
+  useUserStoreHook()
+    .loginByUsername({ username: username.value, password: "admin123" })
+    .then(res => {
+      if (res.success) {
+        storageLocal().removeItem("async-routes");
+        usePermissionStoreHook().clearAllCachePage();
+        initRouter();
+      }
+    });
+}
+</script>
+
+<template>
+  <div>
+    <p class="mb-2">
+      模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
+    </p>
+    <el-card shadow="never" :style="elStyle">
+      <template #header>
+        <div class="card-header">
+          <span>当前角色：{{ username }}</span>
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/page/index.vue"
+          target="_blank"
+        >
+          代码位置 src/views/permission/page/index.vue
+        </el-link>
+      </template>
+      <el-select v-model="username" class="!w-[160px]" @change="onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-card>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/result/columns.tsx b/Yi.Pure.Vue3/src/views/result/columns.tsx
new file mode 100644
index 00000000..f6ad232a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/result/columns.tsx
@@ -0,0 +1,62 @@
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
+
+export function useColumns() {
+  const columns = [
+    {
+      cellRenderer: () => {
+        return (
+          <div class="w-full">
+            <div class="flex items-center">
+              <iconify-icon-offline
+                icon={CloseCircleLine}
+                width="18px"
+                height="18px"
+              />
+              <span class="ml-1 mr-4">您的账户已被冻结</span>
+              <a
+                href="javascript:void(0);"
+                class="flex items-center"
+                style="color: var(--el-color-primary)"
+              >
+                立即解冻
+                <iconify-icon-offline
+                  icon={ArrowRightSLine}
+                  color="var(--el-color-primary)"
+                  width="18px"
+                  height="18px"
+                />
+              </a>
+            </div>
+            <br />
+            <div class="flex items-center">
+              <iconify-icon-offline
+                icon={CloseCircleLine}
+                width="18px"
+                height="18px"
+              />
+              <span class="ml-1 mr-4">您的账户还不具备申请资格</span>
+              <a
+                href="javascript:void(0);"
+                class="flex items-center"
+                style="color: var(--el-color-primary)"
+              >
+                立即升级
+                <iconify-icon-offline
+                  icon={ArrowRightSLine}
+                  color="var(--el-color-primary)"
+                  width="18px"
+                  height="18px"
+                />
+              </a>
+            </div>
+          </div>
+        );
+      }
+    }
+  ];
+
+  return {
+    columns
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/result/fail.vue b/Yi.Pure.Vue3/src/views/result/fail.vue
new file mode 100644
index 00000000..98b6cef2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/result/fail.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+defineOptions({
+  name: "Fail"
+});
+
+const { columns } = useColumns();
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">失败页</span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/fail.vue"
+        target="_blank"
+      >
+        代码位置 src/views/result/fail.vue
+      </el-link>
+    </template>
+    <el-result
+      icon="error"
+      title="提交失败"
+      sub-title="请核对并修改以下信息后，再重新提交。"
+    >
+      <template #extra>
+        <el-button type="primary">返回修改</el-button>
+      </template>
+    </el-result>
+    <PureDescriptions
+      :columns="columns"
+      title="您提交的内容有如下错误："
+      class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]"
+    />
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-descriptions__body) {
+  background: transparent;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/result/success.vue b/Yi.Pure.Vue3/src/views/result/success.vue
new file mode 100644
index 00000000..8871a655
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/result/success.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+defineOptions({
+  name: "Success"
+});
+
+const { lastBuildTime } = __APP_INFO__;
+
+const columns = [
+  {
+    label: "项目 ID：",
+    value: "12345"
+  },
+  {
+    label: "负责人：",
+    value: "明明"
+  },
+  {
+    label: "生效时间：",
+    value: lastBuildTime
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">成功页</span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/success.vue"
+        target="_blank"
+      >
+        代码位置 src/views/result/success.vue
+      </el-link>
+    </template>
+    <el-result
+      icon="success"
+      title="提交成功"
+      sub-title="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
+    >
+      <template #extra>
+        <div class="flex">
+          <el-button type="primary">返回列表</el-button>
+          <el-button>查看项目</el-button>
+          <el-button>打印</el-button>
+        </div>
+      </template>
+    </el-result>
+    <div class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]">
+      <PureDescriptions title="项目名称" :columns="columns" class="mb-5" />
+      <el-steps :active="2">
+        <el-step title="创建项目">
+          <template #description>
+            <p>明明</p>
+            <p>{{ lastBuildTime }}</p>
+          </template>
+        </el-step>
+        <el-step title="部门初审">
+          <template #description>
+            <p class="flex items-center">
+              亮亮
+              <span
+                role="img"
+                aria-label="dingding"
+                class="anticon anticon-dingding flex items-center cursor-pointer"
+                style="margin-left: 8px; color: rgb(0 160 233)"
+              >
+                <svg
+                  viewBox="64 64 896 896"
+                  focusable="false"
+                  data-icon="dingding"
+                  width="1em"
+                  height="1em"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M573.7 252.5C422.5 197.4 201.3 96.7 201.3 96.7c-15.7-4.1-17.9 11.1-17.9 11.1-5 61.1 33.6 160.5 53.6 182.8 19.9 22.3 319.1 113.7 319.1 113.7S326 357.9 270.5 341.9c-55.6-16-37.9 17.8-37.9 17.8 11.4 61.7 64.9 131.8 107.2 138.4 42.2 6.6 220.1 4 220.1 4s-35.5 4.1-93.2 11.9c-42.7 5.8-97 12.5-111.1 17.8-33.1 12.5 24 62.6 24 62.6 84.7 76.8 129.7 50.5 129.7 50.5 33.3-10.7 61.4-18.5 85.2-24.2L565 743.1h84.6L603 928l205.3-271.9H700.8l22.3-38.7c.3.5.4.8.4.8S799.8 496.1 829 433.8l.6-1h-.1c5-10.8 8.6-19.7 10-25.8 17-71.3-114.5-99.4-265.8-154.5z"
+                  />
+                </svg>
+                催一下
+              </span>
+            </p>
+          </template>
+        </el-step>
+        <el-step title="财务复核" />
+        <el-step title="完成" />
+      </el-steps>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-descriptions__body) {
+  background: transparent;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/schema-form/form/base.vue b/Yi.Pure.Vue3/src/views/schema-form/form/base.vue
new file mode 100644
index 00000000..caf12c52
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/schema-form/form/base.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/form.html
+import "plus-pro-components/es/components/form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusForm
+} from "plus-pro-components";
+
+const state = ref<FieldValues>({
+  status: "1",
+  name: "",
+  rate: 4,
+  progress: 100,
+  switch: true,
+  time: new Date().toString(),
+  endTime: []
+});
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: "请输入名称"
+    }
+  ]
+};
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "我是名称"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "执行进度",
+    width: 200,
+    prop: "progress"
+  },
+  {
+    label: "评分",
+    width: 200,
+    prop: "rate",
+    valueType: "rate"
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const handleChange = (values: FieldValues, prop: PlusColumn) => {
+  console.log(values, prop, "change");
+};
+const handleSubmit = (values: FieldValues) => {
+  console.log(values, "Submit");
+};
+const handleSubmitError = (err: any) => {
+  console.log(err, "err");
+};
+const handleReset = () => {
+  console.log("handleReset");
+};
+</script>
+
+<template>
+  <PlusForm
+    v-model="state"
+    class="w-[450px] m-auto"
+    :columns="columns"
+    :rules="rules"
+    label-position="right"
+    @change="handleChange"
+    @submit="handleSubmit"
+    @submit-error="handleSubmitError"
+    @reset="handleReset"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/schema-form/form/dialog.vue b/Yi.Pure.Vue3/src/views/schema-form/form/dialog.vue
new file mode 100644
index 00000000..3f2d3d4c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/schema-form/form/dialog.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/dialog-form.html
+import "plus-pro-components/es/components/dialog-form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusDialogForm
+} from "plus-pro-components";
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "要求",
+    prop: "demand",
+    valueType: "checkbox",
+    options: [
+      {
+        label: "四六级",
+        value: "0"
+      },
+      {
+        label: "计算机二级证书",
+        value: "1"
+      },
+      {
+        label: "普通话证书",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const visible = ref(false);
+const values = ref<FieldValues>({});
+
+const handleOpen = () => {
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div>
+    <el-button @click="handleOpen">打开弹窗表单</el-button>
+    <PlusDialogForm
+      v-model:visible="visible"
+      v-model="values"
+      :form="{ columns }"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/schema-form/form/drawer.vue b/Yi.Pure.Vue3/src/views/schema-form/form/drawer.vue
new file mode 100644
index 00000000..74aecc1c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/schema-form/form/drawer.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/drawer-form.html
+import "plus-pro-components/es/components/drawer-form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusDrawerForm
+} from "plus-pro-components";
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "要求",
+    prop: "demand",
+    valueType: "checkbox",
+    options: [
+      {
+        label: "四六级",
+        value: "0"
+      },
+      {
+        label: "计算机二级证书",
+        value: "1"
+      },
+      {
+        label: "普通话证书",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const visible = ref(false);
+const values = ref<FieldValues>({});
+
+const handleOpen = () => {
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div>
+    <el-button @click="handleOpen">打开抽屉表单</el-button>
+    <PlusDrawerForm
+      v-model:visible="visible"
+      v-model="values"
+      :form="{ columns }"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/schema-form/form/search.vue b/Yi.Pure.Vue3/src/views/schema-form/form/search.vue
new file mode 100644
index 00000000..8f4adaa9
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/schema-form/form/search.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/search.html
+import "plus-pro-components/es/components/search/style/css";
+import { type PlusColumn, PlusSearch } from "plus-pro-components";
+
+const state = ref({
+  status: "0",
+  time: new Date().toString()
+});
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择",
+      endPlaceholder: "请选择"
+    }
+  },
+  {
+    label: "奖励",
+    prop: "price"
+  },
+  {
+    label: "提成",
+    prop: "percentage"
+  }
+];
+
+const handleChange = (values: any) => {
+  console.log(values, "change");
+};
+const handleSearch = (values: any) => {
+  console.log(values, "search");
+};
+const handleRest = () => {
+  console.log("handleRest");
+};
+</script>
+
+<template>
+  <PlusSearch
+    v-model="state"
+    :columns="columns"
+    :show-number="2"
+    label-width="80"
+    label-position="right"
+    @change="handleChange"
+    @search="handleSearch"
+    @reset="handleRest"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/schema-form/form/steps.vue b/Yi.Pure.Vue3/src/views/schema-form/form/steps.vue
new file mode 100644
index 00000000..1c6c5c2d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/schema-form/form/steps.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/steps-form.html
+import "plus-pro-components/es/components/steps-form/style/css";
+import { PlusStepsForm } from "plus-pro-components";
+
+const stepForm = ref([
+  {
+    title: "第一步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      modelValue: {},
+      columns: [
+        {
+          label: "名称",
+          width: 120,
+          prop: "name",
+          valueType: "copy",
+          tooltip: "名称最多显示6个字符"
+        },
+        {
+          label: "状态",
+          width: 120,
+          prop: "status",
+          valueType: "select",
+          options: [
+            {
+              label: "未解决",
+              value: "0",
+              color: "red"
+            },
+            {
+              label: "已解决",
+              value: "1",
+              color: "blue"
+            },
+            {
+              label: "解决中",
+              value: "2",
+              color: "yellow"
+            },
+            {
+              label: "失败",
+              value: "3",
+              color: "red"
+            }
+          ]
+        }
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入名称"
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: "第二步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      labelWidth: "100",
+      modelValue: {},
+      columns: [
+        {
+          label: "标签",
+          width: 120,
+          prop: "tag"
+        },
+        {
+          label: "执行进度",
+          width: 200,
+          prop: "progress"
+        },
+        {
+          label: "评分",
+          width: 200,
+          prop: "rate",
+          valueType: "rate"
+        },
+        {
+          label: "是否显示",
+          width: 100,
+          prop: "switch",
+          valueType: "switch"
+        }
+      ],
+      rules: {
+        tag: [
+          {
+            required: true,
+            message: "请输入标签"
+          }
+        ],
+        progress: [
+          {
+            required: true,
+            message: "请输入执行进度"
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: "第三步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      modelValue: {},
+      columns: [
+        {
+          label: "时间",
+          prop: "time",
+          valueType: "date-picker"
+        },
+        {
+          label: "要求",
+          prop: "demand",
+          valueType: "checkbox",
+          options: [
+            {
+              label: "四六级",
+              value: "0"
+            },
+            {
+              label: "计算机二级证书",
+              value: "1"
+            },
+            {
+              label: "普通话证书",
+              value: "2"
+            }
+          ]
+        },
+        {
+          label: "奖励",
+          prop: "price"
+        },
+        {
+          label: "提成",
+          prop: "percentage"
+        },
+        {
+          label: "说明",
+          prop: "desc",
+          valueType: "textarea",
+          fieldProps: {
+            maxlength: 10,
+            showWordLimit: true,
+            autosize: { minRows: 2, maxRows: 4 }
+          }
+        }
+      ],
+      rules: {
+        time: [
+          {
+            required: true,
+            trigger: "change",
+            message: "请选择时间"
+          }
+        ],
+        demand: [
+          {
+            required: true,
+            trigger: "change",
+            message: "请选择要求"
+          }
+        ]
+      }
+    }
+  }
+]);
+
+const active = ref(1);
+
+const next = (actives: number, values: any) => {
+  active.value = actives;
+  console.log(active, values, stepForm.value);
+};
+</script>
+
+<template>
+  <PlusStepsForm
+    v-model="active"
+    simple
+    class="w-[800px] m-auto"
+    :data="stepForm as any"
+    align-center
+    @next="next"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/schema-form/index.vue b/Yi.Pure.Vue3/src/views/schema-form/index.vue
new file mode 100644
index 00000000..9f588b2f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/schema-form/index.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./list";
+
+defineOptions({
+  name: "SchemaForm"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          JSON 格式配置表单，采用优秀开源的
+          <el-link
+            href="https://plus-pro-components.com/components/form.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            PlusProComponents
+          </el-link>
+          ，维护整体表单只需操作 columns 配置即可
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/schema-form"
+        target="_blank"
+      >
+        代码位置 src/views/schema-form
+      </el-link>
+    </template>
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <span
+              v-tippy="{
+                maxWidth: 'none',
+                content: `（第 ${index + 1} 个示例）${item.content}`
+              }"
+            >
+              {{ item.title }}
+            </span>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/schema-form/list.tsx b/Yi.Pure.Vue3/src/views/schema-form/list.tsx
new file mode 100644
index 00000000..5c98df94
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/schema-form/list.tsx
@@ -0,0 +1,41 @@
+import Base from "./form/base.vue";
+import Dialog from "./form/dialog.vue";
+import Drawer from "./form/drawer.vue";
+import Steps from "./form/steps.vue";
+import Search from "./form/search.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/schema-form/form/${val}.vue`;
+
+export const list = [
+  {
+    key: "base",
+    content: rendContent("base"),
+    title: "基础表单",
+    component: Base
+  },
+  {
+    key: "dialog",
+    content: rendContent("dialog"),
+    title: "弹框表单",
+    component: Dialog
+  },
+  {
+    key: "drawer",
+    content: rendContent("drawer"),
+    title: "抽屉表单",
+    component: Drawer
+  },
+  {
+    key: "steps",
+    content: rendContent("steps"),
+    title: "分步表单",
+    component: Steps
+  },
+  {
+    key: "search",
+    content: rendContent("search"),
+    title: "搜索表单",
+    component: Search
+  }
+];
diff --git a/Yi.Pure.Vue3/src/views/system/dept/form.vue b/Yi.Pure.Vue3/src/views/system/dept/form.vue
new file mode 100644
index 00000000..2cec5fcb
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/dept/form.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+import { usePublicHooks } from "../hooks";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    higherDeptOptions: [],
+    parentId: 0,
+    name: "",
+    principal: "",
+    phone: "",
+    email: "",
+    sort: 0,
+    status: 1,
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const { switchStyle } = usePublicHooks();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-row :gutter="30">
+      <re-col>
+        <el-form-item label="上级部门">
+          <el-cascader
+            v-model="newFormInline.parentId"
+            class="w-full"
+            :options="newFormInline.higherDeptOptions"
+            :props="{
+              value: 'id',
+              label: 'name',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            filterable
+            placeholder="请选择上级部门"
+          >
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门名称" prop="name">
+          <el-input
+            v-model="newFormInline.name"
+            clearable
+            placeholder="请输入部门名称"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门负责人">
+          <el-input
+            v-model="newFormInline.principal"
+            clearable
+            placeholder="请输入部门负责人"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="手机号" prop="phone">
+          <el-input
+            v-model="newFormInline.phone"
+            clearable
+            placeholder="请输入手机号"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            v-model="newFormInline.email"
+            clearable
+            placeholder="请输入邮箱"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="排序">
+          <el-input-number
+            v-model="newFormInline.sort"
+            class="!w-full"
+            :min="0"
+            :max="9999"
+            controls-position="right"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门状态">
+          <el-switch
+            v-model="newFormInline.status"
+            inline-prompt
+            :active-value="1"
+            :inactive-value="0"
+            active-text="启用"
+            inactive-text="停用"
+            :style="switchStyle"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col>
+        <el-form-item label="备注">
+          <el-input
+            v-model="newFormInline.remark"
+            placeholder="请输入备注信息"
+            type="textarea"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/system/dept/index.vue b/Yi.Pure.Vue3/src/views/system/dept/index.vue
new file mode 100644
index 00000000..917d52e5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/dept/index.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useDept } from "./utils/hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+
+defineOptions({
+  name: "SystemDept"
+});
+
+const formRef = ref();
+const tableRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  onSearch,
+  resetForm,
+  openDialog,
+  handleDelete,
+  handleSelectionChange
+} = useDept();
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="部门名称：" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入部门名称"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item label="状态：" prop="status">
+        <el-select
+          v-model="form.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-[180px]"
+        >
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="部门管理（仅演示，操作后不生效）"
+      :columns="columns"
+      :tableRef="tableRef?.getTableRef()"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
+          新增部门
+        </el-button>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <pure-table
+          ref="tableRef"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 45 }"
+          align-whole="center"
+          row-key="id"
+          showOverflowTooltip
+          table-layout="auto"
+          default-expand-all
+          :loading="loading"
+          :size="size"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(EditPen)"
+              @click="openDialog('修改', row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(AddFill)"
+              @click="openDialog('新增', { parentId: row.id } as any)"
+            >
+              新增
+            </el-button>
+            <el-popconfirm
+              :title="`是否确认删除部门名称为${row.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(Delete)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-table__inner-wrapper::before) {
+  height: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/system/dept/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/dept/utils/hook.tsx
new file mode 100644
index 00000000..465636a6
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/dept/utils/hook.tsx
@@ -0,0 +1,178 @@
+import dayjs from "dayjs";
+import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
+import { message } from "@/utils/message";
+import { getDeptList } from "@/api/system";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { reactive, ref, onMounted, h } from "vue";
+import type { FormItemProps } from "../utils/types";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
+
+export function useDept() {
+  const form = reactive({
+    name: "",
+    status: null
+  });
+
+  const formRef = ref();
+  const dataList = ref([]);
+  const loading = ref(true);
+  const { tagStyle } = usePublicHooks();
+
+  const columns: TableColumnList = [
+    {
+      label: "部门名称",
+      prop: "name",
+      width: 180,
+      align: "left"
+    },
+    {
+      label: "排序",
+      prop: "sort",
+      minWidth: 70
+    },
+    {
+      label: "状态",
+      prop: "status",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
+          {row.status === 1 ? "启用" : "停用"}
+        </el-tag>
+      )
+    },
+    {
+      label: "创建时间",
+      minWidth: 200,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 320
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ];
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  function resetForm(formEl) {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+    let newData = data;
+    if (!isAllEmpty(form.name)) {
+      // 前端搜索部门名称
+      newData = newData.filter(item => item.name.includes(form.name));
+    }
+    if (!isAllEmpty(form.status)) {
+      // 前端搜索状态
+      newData = newData.filter(item => item.status === form.status);
+    }
+    dataList.value = handleTree(newData); // 处理成树结构
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  function formatHigherDeptOptions(treeList) {
+    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      formatHigherDeptOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  }
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}部门`,
+      props: {
+        formInline: {
+          higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
+          parentId: row?.parentId ?? 0,
+          name: row?.name ?? "",
+          principal: row?.principal ?? "",
+          phone: row?.phone ?? "",
+          email: row?.email ?? "",
+          sort: row?.sort ?? 0,
+          status: row?.status ?? 1,
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: true,
+      fullscreen: deviceDetection(),
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了部门名称为${curData.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  function handleDelete(row) {
+    message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    /** 搜索 */
+    onSearch,
+    /** 重置 */
+    resetForm,
+    /** 新增、修改部门 */
+    openDialog,
+    /** 删除部门 */
+    handleDelete,
+    handleSelectionChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/system/dept/utils/rule.ts b/Yi.Pure.Vue3/src/views/system/dept/utils/rule.ts
new file mode 100644
index 00000000..b20bf673
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/dept/utils/rule.ts
@@ -0,0 +1,37 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+import { isPhone, isEmail } from "@pureadmin/utils";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+      // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
+    }
+  ],
+  email: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isEmail(value)) {
+          callback(new Error("请输入正确的邮箱格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
diff --git a/Yi.Pure.Vue3/src/views/system/dept/utils/types.ts b/Yi.Pure.Vue3/src/views/system/dept/utils/types.ts
new file mode 100644
index 00000000..7547d6ba
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/dept/utils/types.ts
@@ -0,0 +1,16 @@
+interface FormItemProps {
+  higherDeptOptions: Record<string, unknown>[];
+  parentId: number;
+  name: string;
+  principal: string;
+  phone: string | number;
+  email: string;
+  sort: number;
+  status: number;
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };
diff --git a/Yi.Pure.Vue3/src/views/system/hooks.ts b/Yi.Pure.Vue3/src/views/system/hooks.ts
new file mode 100644
index 00000000..5465d94e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/hooks.ts
@@ -0,0 +1,39 @@
+// 抽离可公用的工具函数等用于系统管理页面逻辑
+import { computed } from "vue";
+import { useDark } from "@pureadmin/utils";
+
+export function usePublicHooks() {
+  const { isDark } = useDark();
+
+  const switchStyle = computed(() => {
+    return {
+      "--el-switch-on-color": "#6abe39",
+      "--el-switch-off-color": "#e84749"
+    };
+  });
+
+  const tagStyle = computed(() => {
+    return (status: number) => {
+      return status === 1
+        ? {
+            "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
+            "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
+            "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
+          }
+        : {
+            "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
+            "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
+            "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
+          };
+    };
+  });
+
+  return {
+    /** 当前网页是否为`dark`模式 */
+    isDark,
+    /** 表现更鲜明的`el-switch`组件  */
+    switchStyle,
+    /** 表现更鲜明的`el-tag`组件  */
+    tagStyle
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/system/menu/README.md b/Yi.Pure.Vue3/src/views/system/menu/README.md
new file mode 100644
index 00000000..99301ded
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/menu/README.md
@@ -0,0 +1,26 @@
+## 字段含义
+
+| 字段              | 说明                                                         |
+| :---------------- | :----------------------------------------------------------- |
+| `menuType`        | 菜单类型（`0`代表菜单、`1`代表`iframe`、`2`代表外链、`3`代表按钮） |
+| `parentId`        |                                                              |
+| `title`           | 菜单名称（兼容国际化、非国际化，如果用国际化的写法就必须在根目录的`locales`文件夹下对应添加） |
+| `name`            | 路由名称（必须唯一并且和当前路由`component`字段对应的页面里用`defineOptions`包起来的`name`保持一致） |
+| `path`            | 路由路径                                                     |
+| `component`       | 组件路径（传`component`组件路径，那么`path`可以随便写，如果不传，`component`组件路径会跟`path`保持一致） |
+| `rank`            | 菜单排序（平台规定只有`home`路由的`rank`才能为`0`，所以后端在返回`rank`的时候需要从非`0`开始 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E8%8F%9C%E5%8D%95%E6%8E%92%E5%BA%8F-rank)） |
+| `redirect`        | 路由重定向                                                   |
+| `icon`            | 菜单图标                                                     |
+| `extraIcon`       | 右侧图标                                                     |
+| `enterTransition` | 进场动画（页面加载动画）                                     |
+| `leaveTransition` | 离场动画（页面加载动画）                                     |
+| `activePath`      | 菜单激活（将某个菜单激活，主要用于通过`query`或`params`传参的路由，当它们通过配置`showLink: false`后不在菜单中显示，就不会有任何菜单高亮，而通过设置`activePath`指定激活菜单即可获得高亮，`activePath`为指定激活菜单的`path`） |
+| `auths`           | 权限标识（按钮级别权限设置）                                 |
+| `frameSrc`        | 链接地址（需要内嵌的`iframe`链接地址）                       |
+| `frameLoading`    | 加载动画（内嵌的`iframe`页面是否开启首次加载动画）           |
+| `keepAlive`       | 缓存页面（是否缓存该路由页面，开启后会保存该页面的整体状态，刷新后会清空状态） |
+| `hiddenTag`       | 标签页（当前菜单名称或自定义信息禁止添加到标签页）           |
+| `fixedTag`        | 固定标签页（当前菜单名称是否固定显示在标签页且不可关闭）           |
+| `showLink`        | 菜单（是否显示该菜单）                                       |
+| `showParent`      | 父级菜单（是否显示父级菜单 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E7%AC%AC%E4%B8%80%E7%A7%8D-%E8%AF%A5%E6%A8%A1%E5%BC%8F%E9%92%88%E5%AF%B9%E7%88%B6%E7%BA%A7%E8%8F%9C%E5%8D%95%E4%B8%8B%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84%E6%83%85%E5%86%B5-%E5%9C%A8%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84-meta-%E5%B1%9E%E6%80%A7%E4%B8%AD%E5%8A%A0%E4%B8%8A-showparent-true-%E5%8D%B3%E5%8F%AF)） |
+
diff --git a/Yi.Pure.Vue3/src/views/system/menu/form.vue b/Yi.Pure.Vue3/src/views/system/menu/form.vue
new file mode 100644
index 00000000..711e297f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/menu/form.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+import { transformI18n } from "@/plugins/i18n";
+import { IconSelect } from "@/components/ReIcon";
+import Segmented from "@/components/ReSegmented";
+import ReAnimateSelector from "@/components/ReAnimateSelector";
+import {
+  menuTypeOptions,
+  showLinkOptions,
+  fixedTagOptions,
+  keepAliveOptions,
+  hiddenTagOptions,
+  showParentOptions,
+  frameLoadingOptions
+} from "./utils/enums";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    menuType: 0,
+    higherMenuOptions: [],
+    parentId: 0,
+    title: "",
+    name: "",
+    path: "",
+    component: "",
+    rank: 99,
+    redirect: "",
+    icon: "",
+    extraIcon: "",
+    enterTransition: "",
+    leaveTransition: "",
+    activePath: "",
+    auths: "",
+    frameSrc: "",
+    frameLoading: true,
+    keepAlive: false,
+    hiddenTag: false,
+    fixedTag: false,
+    showLink: true,
+    showParent: false
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-row :gutter="30">
+      <re-col>
+        <el-form-item label="菜单类型">
+          <Segmented
+            v-model="newFormInline.menuType"
+            :options="menuTypeOptions"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col>
+        <el-form-item label="上级菜单">
+          <el-cascader
+            v-model="newFormInline.parentId"
+            class="w-full"
+            :options="newFormInline.higherMenuOptions"
+            :props="{
+              value: 'id',
+              label: 'title',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            filterable
+            placeholder="请选择上级菜单"
+          >
+            <template #default="{ node, data }">
+              <span>{{ transformI18n(data.title) }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="菜单名称" prop="title">
+          <el-input
+            v-model="newFormInline.title"
+            clearable
+            placeholder="请输入菜单名称"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
+        <el-form-item label="路由名称" prop="name">
+          <el-input
+            v-model="newFormInline.name"
+            clearable
+            placeholder="请输入路由名称"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
+        <el-form-item label="路由路径" prop="path">
+          <el-input
+            v-model="newFormInline.path"
+            clearable
+            placeholder="请输入路由路径"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col
+        v-show="newFormInline.menuType === 0"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="组件路径">
+          <el-input
+            v-model="newFormInline.component"
+            clearable
+            placeholder="请输入组件路径"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="菜单排序">
+          <el-input-number
+            v-model="newFormInline.rank"
+            class="!w-full"
+            :min="1"
+            :max="9999"
+            controls-position="right"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col
+        v-show="newFormInline.menuType === 0"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="路由重定向">
+          <el-input
+            v-model="newFormInline.redirect"
+            clearable
+            placeholder="请输入默认跳转地址"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col
+        v-show="newFormInline.menuType !== 3"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="菜单图标">
+          <IconSelect v-model="newFormInline.icon" class="w-full" />
+        </el-form-item>
+      </re-col>
+      <re-col
+        v-show="newFormInline.menuType !== 3"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="右侧图标">
+          <el-input
+            v-model="newFormInline.extraIcon"
+            clearable
+            placeholder="菜单名称右侧的额外图标"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+        <el-form-item label="进场动画">
+          <ReAnimateSelector
+            v-model="newFormInline.enterTransition"
+            placeholder="请选择页面进场加载动画"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+        <el-form-item label="离场动画">
+          <ReAnimateSelector
+            v-model="newFormInline.leaveTransition"
+            placeholder="请选择页面离场加载动画"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col
+        v-show="newFormInline.menuType === 0"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="菜单激活">
+          <el-input
+            v-model="newFormInline.activePath"
+            clearable
+            placeholder="请输入需要激活的菜单"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col v-if="newFormInline.menuType === 3" :value="12" :xs="24" :sm="24">
+        <!-- 按钮级别权限设置 -->
+        <el-form-item label="权限标识" prop="auths">
+          <el-input
+            v-model="newFormInline.auths"
+            clearable
+            placeholder="请输入权限标识"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col
+        v-show="newFormInline.menuType === 1"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <!-- iframe -->
+        <el-form-item label="链接地址">
+          <el-input
+            v-model="newFormInline.frameSrc"
+            clearable
+            placeholder="请输入 iframe 链接地址"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col v-if="newFormInline.menuType === 1" :value="12" :xs="24" :sm="24">
+        <el-form-item label="加载动画">
+          <Segmented
+            :modelValue="newFormInline.frameLoading ? 0 : 1"
+            :options="frameLoadingOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.frameLoading = value;
+              }
+            "
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col
+        v-show="newFormInline.menuType !== 3"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="菜单">
+          <Segmented
+            :modelValue="newFormInline.showLink ? 0 : 1"
+            :options="showLinkOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.showLink = value;
+              }
+            "
+          />
+        </el-form-item>
+      </re-col>
+      <re-col
+        v-show="newFormInline.menuType !== 3"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="父级菜单">
+          <Segmented
+            :modelValue="newFormInline.showParent ? 0 : 1"
+            :options="showParentOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.showParent = value;
+              }
+            "
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+        <el-form-item label="缓存页面">
+          <Segmented
+            :modelValue="newFormInline.keepAlive ? 0 : 1"
+            :options="keepAliveOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.keepAlive = value;
+              }
+            "
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+        <el-form-item label="标签页">
+          <Segmented
+            :modelValue="newFormInline.hiddenTag ? 1 : 0"
+            :options="hiddenTagOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.hiddenTag = value;
+              }
+            "
+          />
+        </el-form-item>
+      </re-col>
+      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+        <el-form-item label="固定标签页">
+          <Segmented
+            :modelValue="newFormInline.fixedTag ? 0 : 1"
+            :options="fixedTagOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.fixedTag = value;
+              }
+            "
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/system/menu/index.vue b/Yi.Pure.Vue3/src/views/system/menu/index.vue
new file mode 100644
index 00000000..c27e3a81
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/menu/index.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useMenu } from "./utils/hook";
+import { transformI18n } from "@/plugins/i18n";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+
+defineOptions({
+  name: "SystemMenu"
+});
+
+const formRef = ref();
+const tableRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  onSearch,
+  resetForm,
+  openDialog,
+  handleDelete,
+  handleSelectionChange
+} = useMenu();
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="菜单名称：" prop="title">
+        <el-input
+          v-model="form.title"
+          placeholder="请输入菜单名称"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="菜单管理（仅演示，操作后不生效）"
+      :columns="columns"
+      :isExpandAll="false"
+      :tableRef="tableRef?.getTableRef()"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
+          新增菜单
+        </el-button>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <pure-table
+          ref="tableRef"
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 45 }"
+          align-whole="center"
+          row-key="id"
+          showOverflowTooltip
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          :data="dataList"
+          :columns="dynamicColumns"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @selection-change="handleSelectionChange"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(EditPen)"
+              @click="openDialog('修改', row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-show="row.menuType !== 3"
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(AddFill)"
+              @click="openDialog('新增', { parentId: row.id } as any)"
+            >
+              新增
+            </el-button>
+            <el-popconfirm
+              :title="`是否确认删除菜单名称为${transformI18n(row.title)}的这条数据${row?.children?.length > 0 ? '。注意下级菜单也会一并删除，请谨慎操作' : ''}`"
+              @confirm="handleDelete(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(Delete)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-table__inner-wrapper::before) {
+  height: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts b/Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts
new file mode 100644
index 00000000..4466b61d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/enums.ts
@@ -0,0 +1,108 @@
+import type { OptionsType } from "@/components/ReSegmented";
+
+const menuTypeOptions: Array<OptionsType> = [
+  {
+    label: "菜单",
+    value: 0
+  },
+  {
+    label: "iframe",
+    value: 1
+  },
+  {
+    label: "外链",
+    value: 2
+  },
+  {
+    label: "按钮",
+    value: 3
+  }
+];
+
+const showLinkOptions: Array<OptionsType> = [
+  {
+    label: "显示",
+    tip: "会在菜单中显示",
+    value: true
+  },
+  {
+    label: "隐藏",
+    tip: "不会在菜单中显示",
+    value: false
+  }
+];
+
+const fixedTagOptions: Array<OptionsType> = [
+  {
+    label: "固定",
+    tip: "当前菜单名称固定显示在标签页且不可关闭",
+    value: true
+  },
+  {
+    label: "不固定",
+    tip: "当前菜单名称不固定显示在标签页且可关闭",
+    value: false
+  }
+];
+
+const keepAliveOptions: Array<OptionsType> = [
+  {
+    label: "缓存",
+    tip: "会保存该页面的整体状态，刷新后会清空状态",
+    value: true
+  },
+  {
+    label: "不缓存",
+    tip: "不会保存该页面的整体状态",
+    value: false
+  }
+];
+
+const hiddenTagOptions: Array<OptionsType> = [
+  {
+    label: "允许",
+    tip: "当前菜单名称或自定义信息允许添加到标签页",
+    value: false
+  },
+  {
+    label: "禁止",
+    tip: "当前菜单名称或自定义信息禁止添加到标签页",
+    value: true
+  }
+];
+
+const showParentOptions: Array<OptionsType> = [
+  {
+    label: "显示",
+    tip: "会显示父级菜单",
+    value: true
+  },
+  {
+    label: "隐藏",
+    tip: "不会显示父级菜单",
+    value: false
+  }
+];
+
+const frameLoadingOptions: Array<OptionsType> = [
+  {
+    label: "开启",
+    tip: "有首次加载动画",
+    value: true
+  },
+  {
+    label: "关闭",
+    tip: "无首次加载动画",
+    value: false
+  }
+];
+
+export {
+  menuTypeOptions,
+  showLinkOptions,
+  fixedTagOptions,
+  keepAliveOptions,
+  hiddenTagOptions,
+  showParentOptions,
+  frameLoadingOptions
+};
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
new file mode 100644
index 00000000..6aa8e812
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/hook.tsx
@@ -0,0 +1,225 @@
+import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
+import { message } from "@/utils/message";
+import { getMenuList } from "@/api/system";
+import { transformI18n } from "@/plugins/i18n";
+import { addDialog } from "@/components/ReDialog";
+import { reactive, ref, onMounted, h } from "vue";
+import type { FormItemProps } from "../utils/types";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
+
+export function useMenu() {
+  const form = reactive({
+    title: ""
+  });
+
+  const formRef = ref();
+  const dataList = ref([]);
+  const loading = ref(true);
+
+  const getMenuType = (type, text = false) => {
+    switch (type) {
+      case 0:
+        return text ? "菜单" : "primary";
+      case 1:
+        return text ? "iframe" : "warning";
+      case 2:
+        return text ? "外链" : "danger";
+      case 3:
+        return text ? "按钮" : "info";
+    }
+  };
+
+  const columns: TableColumnList = [
+    {
+      label: "菜单名称",
+      prop: "title",
+      align: "left",
+      cellRenderer: ({ row }) => (
+        <>
+          <span class="inline-block mr-1">
+            {h(useRenderIcon(row.icon), {
+              style: { paddingTop: "1px" }
+            })}
+          </span>
+          <span>{transformI18n(row.title)}</span>
+        </>
+      )
+    },
+    {
+      label: "菜单类型",
+      prop: "menuType",
+      width: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={getMenuType(row.menuType)}
+          effect="plain"
+        >
+          {getMenuType(row.menuType, true)}
+        </el-tag>
+      )
+    },
+    {
+      label: "路由路径",
+      prop: "path"
+    },
+    {
+      label: "组件路径",
+      prop: "component",
+      formatter: ({ path, component }) =>
+        isAllEmpty(component) ? path : component
+    },
+    {
+      label: "权限标识",
+      prop: "auths"
+    },
+    {
+      label: "排序",
+      prop: "rank",
+      width: 100
+    },
+    {
+      label: "隐藏",
+      prop: "showLink",
+      formatter: ({ showLink }) => (showLink ? "否" : "是"),
+      width: 100
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ];
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  function resetForm(formEl) {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getMenuList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+    let newData = data;
+    if (!isAllEmpty(form.title)) {
+      // 前端搜索菜单名称
+      newData = newData.filter(item =>
+        transformI18n(item.title).includes(form.title)
+      );
+    }
+    dataList.value = handleTree(newData); // 处理成树结构
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  function formatHigherMenuOptions(treeList) {
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].title = transformI18n(treeList[i].title);
+      formatHigherMenuOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  }
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}菜单`,
+      props: {
+        formInline: {
+          menuType: row?.menuType ?? 0,
+          higherMenuOptions: formatHigherMenuOptions(cloneDeep(dataList.value)),
+          parentId: row?.parentId ?? 0,
+          title: row?.title ?? "",
+          name: row?.name ?? "",
+          path: row?.path ?? "",
+          component: row?.component ?? "",
+          rank: row?.rank ?? 99,
+          redirect: row?.redirect ?? "",
+          icon: row?.icon ?? "",
+          extraIcon: row?.extraIcon ?? "",
+          enterTransition: row?.enterTransition ?? "",
+          leaveTransition: row?.leaveTransition ?? "",
+          activePath: row?.activePath ?? "",
+          auths: row?.auths ?? "",
+          frameSrc: row?.frameSrc ?? "",
+          frameLoading: row?.frameLoading ?? true,
+          keepAlive: row?.keepAlive ?? false,
+          hiddenTag: row?.hiddenTag ?? false,
+          fixedTag: row?.fixedTag ?? false,
+          showLink: row?.showLink ?? true,
+          showParent: row?.showParent ?? false
+        }
+      },
+      width: "45%",
+      draggable: true,
+      fullscreen: deviceDetection(),
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(
+            `您${title}了菜单名称为${transformI18n(curData.title)}的这条数据`,
+            {
+              type: "success"
+            }
+          );
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  function handleDelete(row) {
+    message(`您删除了菜单名称为${transformI18n(row.title)}的这条数据`, {
+      type: "success"
+    });
+    onSearch();
+  }
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    /** 搜索 */
+    onSearch,
+    /** 重置 */
+    resetForm,
+    /** 新增、修改菜单 */
+    openDialog,
+    /** 删除菜单 */
+    handleDelete,
+    handleSelectionChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts b/Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts
new file mode 100644
index 00000000..90b35489
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/rule.ts
@@ -0,0 +1,10 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  title: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
+  name: [{ required: true, message: "路由名称为必填项", trigger: "blur" }],
+  path: [{ required: true, message: "路由路径为必填项", trigger: "blur" }],
+  auths: [{ required: true, message: "权限标识为必填项", trigger: "blur" }]
+});
diff --git a/Yi.Pure.Vue3/src/views/system/menu/utils/types.ts b/Yi.Pure.Vue3/src/views/system/menu/utils/types.ts
new file mode 100644
index 00000000..f07d1f71
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/menu/utils/types.ts
@@ -0,0 +1,30 @@
+interface FormItemProps {
+  /** 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）*/
+  menuType: number;
+  higherMenuOptions: Record<string, unknown>[];
+  parentId: number;
+  title: string;
+  name: string;
+  path: string;
+  component: string;
+  rank: number;
+  redirect: string;
+  icon: string;
+  extraIcon: string;
+  enterTransition: string;
+  leaveTransition: string;
+  activePath: string;
+  auths: string;
+  frameSrc: string;
+  frameLoading: boolean;
+  keepAlive: boolean;
+  hiddenTag: boolean;
+  fixedTag: boolean;
+  showLink: boolean;
+  showParent: boolean;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };
diff --git a/Yi.Pure.Vue3/src/views/system/role/form.vue b/Yi.Pure.Vue3/src/views/system/role/form.vue
new file mode 100644
index 00000000..65d4ef00
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/role/form.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    name: "",
+    code: "",
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-form-item label="角色名称" prop="name">
+      <el-input
+        v-model="newFormInline.name"
+        clearable
+        placeholder="请输入角色名称"
+      />
+    </el-form-item>
+
+    <el-form-item label="角色标识" prop="code">
+      <el-input
+        v-model="newFormInline.code"
+        clearable
+        placeholder="请输入角色标识"
+      />
+    </el-form-item>
+
+    <el-form-item label="备注">
+      <el-input
+        v-model="newFormInline.remark"
+        placeholder="请输入备注信息"
+        type="textarea"
+      />
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/system/role/index.vue b/Yi.Pure.Vue3/src/views/system/role/index.vue
new file mode 100644
index 00000000..b5514db2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/role/index.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { useRole } from "./utils/hook";
+import { ref, computed, nextTick, onMounted } from "vue";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import {
+  delay,
+  subBefore,
+  deviceDetection,
+  useResizeObserver
+} from "@pureadmin/utils";
+
+// import Database from "@iconify-icons/ri/database-2-line";
+// import More from "@iconify-icons/ep/more-filled";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Refresh from "@iconify-icons/ep/refresh";
+import Menu from "@iconify-icons/ep/menu";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+import Close from "@iconify-icons/ep/close";
+import Check from "@iconify-icons/ep/check";
+
+defineOptions({
+  name: "SystemRole"
+});
+
+const iconClass = computed(() => {
+  return [
+    "w-[22px]",
+    "h-[22px]",
+    "flex",
+    "justify-center",
+    "items-center",
+    "outline-none",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
+const treeRef = ref();
+const formRef = ref();
+const tableRef = ref();
+const contentRef = ref();
+const treeHeight = ref();
+
+const {
+  form,
+  isShow,
+  curRow,
+  loading,
+  columns,
+  rowStyle,
+  dataList,
+  treeData,
+  treeProps,
+  isLinkage,
+  pagination,
+  isExpandAll,
+  isSelectAll,
+  treeSearchValue,
+  // buttonClass,
+  onSearch,
+  resetForm,
+  openDialog,
+  handleMenu,
+  handleSave,
+  handleDelete,
+  filterMethod,
+  transformI18n,
+  onQueryChanged,
+  // handleDatabase,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole(treeRef);
+
+onMounted(() => {
+  useResizeObserver(contentRef, async () => {
+    await nextTick();
+    delay(60).then(() => {
+      treeHeight.value = parseFloat(
+        subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
+      );
+    });
+  });
+});
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="角色名称：" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="请输入角色名称"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item label="角色标识：" prop="code">
+        <el-input
+          v-model="form.code"
+          placeholder="请输入角色标识"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item label="状态：" prop="status">
+        <el-select
+          v-model="form.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-[180px]"
+        >
+          <el-option label="已启用" value="1" />
+          <el-option label="已停用" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <div
+      ref="contentRef"
+      :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
+    >
+      <PureTableBar
+        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
+        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
+        title="角色管理（仅演示，操作后不生效）"
+        :columns="columns"
+        @refresh="onSearch"
+      >
+        <template #buttons>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            @click="openDialog()"
+          >
+            新增角色
+          </el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <pure-table
+            ref="tableRef"
+            align-whole="center"
+            showOverflowTooltip
+            table-layout="auto"
+            :loading="loading"
+            :size="size"
+            adaptive
+            :row-style="rowStyle"
+            :adaptiveConfig="{ offsetBottom: 108 }"
+            :data="dataList"
+            :columns="dynamicColumns"
+            :pagination="{ ...pagination, size }"
+            :header-cell-style="{
+              background: 'var(--el-fill-color-light)',
+              color: 'var(--el-text-color-primary)'
+            }"
+            @selection-change="handleSelectionChange"
+            @page-size-change="handleSizeChange"
+            @page-current-change="handleCurrentChange"
+          >
+            <template #operation="{ row }">
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(EditPen)"
+                @click="openDialog('修改', row)"
+              >
+                修改
+              </el-button>
+              <el-popconfirm
+                :title="`是否确认删除角色名称为${row.name}的这条数据`"
+                @confirm="handleDelete(row)"
+              >
+                <template #reference>
+                  <el-button
+                    class="reset-margin"
+                    link
+                    type="primary"
+                    :size="size"
+                    :icon="useRenderIcon(Delete)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-popconfirm>
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(Menu)"
+                @click="handleMenu(row)"
+              >
+                权限
+              </el-button>
+              <!-- <el-dropdown>
+              <el-button
+                class="ml-3 mt-[2px]"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(More)"
+              />
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>
+                    <el-button
+                      :class="buttonClass"
+                      link
+                      type="primary"
+                      :size="size"
+                      :icon="useRenderIcon(Menu)"
+                      @click="handleMenu"
+                    >
+                      菜单权限
+                    </el-button>
+                  </el-dropdown-item>
+                  <el-dropdown-item>
+                    <el-button
+                      :class="buttonClass"
+                      link
+                      type="primary"
+                      :size="size"
+                      :icon="useRenderIcon(Database)"
+                      @click="handleDatabase"
+                    >
+                      数据权限
+                    </el-button>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown> -->
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+
+      <div
+        v-if="isShow"
+        class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
+      >
+        <div class="flex justify-between w-full px-3 pt-5 pb-4">
+          <div class="flex">
+            <span :class="iconClass">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '关闭'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Close"
+                @click="handleMenu"
+              />
+            </span>
+            <span :class="[iconClass, 'ml-2']">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '保存菜单权限'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Check"
+                @click="handleSave"
+              />
+            </span>
+          </div>
+          <p class="font-bold truncate">
+            菜单权限
+            {{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
+          </p>
+        </div>
+        <el-input
+          v-model="treeSearchValue"
+          placeholder="请输入菜单进行搜索"
+          class="mb-1"
+          clearable
+          @input="onQueryChanged"
+        />
+        <div class="flex flex-wrap">
+          <el-checkbox v-model="isExpandAll" label="展开/折叠" />
+          <el-checkbox v-model="isSelectAll" label="全选/全不选" />
+          <el-checkbox v-model="isLinkage" label="父子联动" />
+        </div>
+        <el-tree-v2
+          ref="treeRef"
+          show-checkbox
+          :data="treeData"
+          :props="treeProps"
+          :height="treeHeight"
+          :check-strictly="!isLinkage"
+          :filter-method="filterMethod"
+        >
+          <template #default="{ node }">
+            <span>{{ transformI18n(node.label) }}</span>
+          </template>
+        </el-tree-v2>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
new file mode 100644
index 00000000..b589d35a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/hook.tsx
@@ -0,0 +1,318 @@
+import dayjs from "dayjs";
+import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
+import { message } from "@/utils/message";
+import { ElMessageBox } from "element-plus";
+import { usePublicHooks } from "../../hooks";
+import { transformI18n } from "@/plugins/i18n";
+import { addDialog } from "@/components/ReDialog";
+import type { FormItemProps } from "../utils/types";
+import type { PaginationProps } from "@pureadmin/table";
+import { getKeyList, deviceDetection } from "@pureadmin/utils";
+import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
+import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
+
+export function useRole(treeRef: Ref) {
+  const form = reactive({
+    name: "",
+    code: "",
+    status: ""
+  });
+  const curRow = ref();
+  const formRef = ref();
+  const dataList = ref([]);
+  const treeIds = ref([]);
+  const treeData = ref([]);
+  const isShow = ref(false);
+  const loading = ref(true);
+  const isLinkage = ref(false);
+  const treeSearchValue = ref();
+  const switchLoadMap = ref({});
+  const isExpandAll = ref(false);
+  const isSelectAll = ref(false);
+  const { switchStyle } = usePublicHooks();
+  const treeProps = {
+    value: "id",
+    label: "title",
+    children: "children"
+  };
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "角色编号",
+      prop: "id"
+    },
+    {
+      label: "角色名称",
+      prop: "name"
+    },
+    {
+      label: "角色标识",
+      prop: "code"
+    },
+    {
+      label: "状态",
+      cellRenderer: scope => (
+        <el-switch
+          size={scope.props.size === "small" ? "small" : "default"}
+          loading={switchLoadMap.value[scope.index]?.loading}
+          v-model={scope.row.status}
+          active-value={1}
+          inactive-value={0}
+          active-text="已启用"
+          inactive-text="已停用"
+          inline-prompt
+          style={switchStyle.value}
+          onChange={() => onChange(scope as any)}
+        />
+      ),
+      minWidth: 90
+    },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 160
+    },
+    {
+      label: "创建时间",
+      prop: "createTime",
+      minWidth: 160,
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ];
+  // const buttonClass = computed(() => {
+  //   return [
+  //     "!h-[20px]",
+  //     "reset-margin",
+  //     "!text-gray-500",
+  //     "dark:!text-white",
+  //     "dark:hover:!text-primary"
+  //   ];
+  // });
+
+  function onChange({ row, index }) {
+    ElMessageBox.confirm(
+      `确认要<strong>${
+        row.status === 0 ? "停用" : "启用"
+      }</strong><strong style='color:var(--el-color-primary)'>${
+        row.name
+      }</strong>吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        switchLoadMap.value[index] = Object.assign(
+          {},
+          switchLoadMap.value[index],
+          {
+            loading: true
+          }
+        );
+        setTimeout(() => {
+          switchLoadMap.value[index] = Object.assign(
+            {},
+            switchLoadMap.value[index],
+            {
+              loading: false
+            }
+          );
+          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
+            type: "success"
+          });
+        }, 300);
+      })
+      .catch(() => {
+        row.status === 0 ? (row.status = 1) : (row.status = 0);
+      });
+  }
+
+  function handleDelete(row) {
+    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getRoleList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}角色`,
+      props: {
+        formInline: {
+          name: row?.name ?? "",
+          code: row?.code ?? "",
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: true,
+      fullscreen: deviceDetection(),
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  /** 菜单权限 */
+  async function handleMenu(row?: any) {
+    const { id } = row;
+    if (id) {
+      curRow.value = row;
+      isShow.value = true;
+      const { data } = await getRoleMenuIds({ id });
+      treeRef.value.setCheckedKeys(data);
+    } else {
+      curRow.value = null;
+      isShow.value = false;
+    }
+  }
+
+  /** 高亮当前权限选中行 */
+  function rowStyle({ row: { id } }) {
+    return {
+      cursor: "pointer",
+      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
+    };
+  }
+
+  /** 菜单权限-保存 */
+  function handleSave() {
+    const { id, name } = curRow.value;
+    // 根据用户 id 调用实际项目中菜单权限修改接口
+    console.log(id, treeRef.value.getCheckedKeys());
+    message(`角色名称为${name}的菜单权限修改成功`, {
+      type: "success"
+    });
+  }
+
+  /** 数据权限 可自行开发 */
+  // function handleDatabase() {}
+
+  const onQueryChanged = (query: string) => {
+    treeRef.value!.filter(query);
+  };
+
+  const filterMethod = (query: string, node) => {
+    return transformI18n(node.title)!.includes(query);
+  };
+
+  onMounted(async () => {
+    onSearch();
+    const { data } = await getRoleMenu();
+    treeIds.value = getKeyList(data, "id");
+    treeData.value = handleTree(data);
+  });
+
+  watch(isExpandAll, val => {
+    val
+      ? treeRef.value.setExpandedKeys(treeIds.value)
+      : treeRef.value.setExpandedKeys([]);
+  });
+
+  watch(isSelectAll, val => {
+    val
+      ? treeRef.value.setCheckedKeys(treeIds.value)
+      : treeRef.value.setCheckedKeys([]);
+  });
+
+  return {
+    form,
+    isShow,
+    curRow,
+    loading,
+    columns,
+    rowStyle,
+    dataList,
+    treeData,
+    treeProps,
+    isLinkage,
+    pagination,
+    isExpandAll,
+    isSelectAll,
+    treeSearchValue,
+    // buttonClass,
+    onSearch,
+    resetForm,
+    openDialog,
+    handleMenu,
+    handleSave,
+    handleDelete,
+    filterMethod,
+    transformI18n,
+    onQueryChanged,
+    // handleDatabase,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/system/role/utils/rule.ts b/Yi.Pure.Vue3/src/views/system/role/utils/rule.ts
new file mode 100644
index 00000000..ea1dd19a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/rule.ts
@@ -0,0 +1,8 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
+  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
+});
diff --git a/Yi.Pure.Vue3/src/views/system/role/utils/types.ts b/Yi.Pure.Vue3/src/views/system/role/utils/types.ts
new file mode 100644
index 00000000..a17e900d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/role/utils/types.ts
@@ -0,0 +1,15 @@
+// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
+
+interface FormItemProps {
+  /** 角色名称 */
+  name: string;
+  /** 角色编号 */
+  code: string;
+  /** 备注 */
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };
diff --git a/Yi.Pure.Vue3/src/views/system/user/form/index.vue b/Yi.Pure.Vue3/src/views/system/user/form/index.vue
new file mode 100644
index 00000000..f6834dac
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/form/index.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ReCol from "@/components/ReCol";
+import { formRules } from "../utils/rule";
+import { FormProps } from "../utils/types";
+import { usePublicHooks } from "../../hooks";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    title: "新增",
+    higherDeptOptions: [],
+    parentId: 0,
+    nickname: "",
+    username: "",
+    password: "",
+    phone: "",
+    email: "",
+    sex: "",
+    status: 1,
+    remark: ""
+  })
+});
+
+const sexOptions = [
+  {
+    value: 0,
+    label: "男"
+  },
+  {
+    value: 1,
+    label: "女"
+  }
+];
+const ruleFormRef = ref();
+const { switchStyle } = usePublicHooks();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-row :gutter="30">
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="用户昵称" prop="nickname">
+          <el-input
+            v-model="newFormInline.nickname"
+            clearable
+            placeholder="请输入用户昵称"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="用户名称" prop="username">
+          <el-input
+            v-model="newFormInline.username"
+            clearable
+            placeholder="请输入用户名称"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col
+        v-if="newFormInline.title === '新增'"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="用户密码" prop="password">
+          <el-input
+            v-model="newFormInline.password"
+            clearable
+            placeholder="请输入用户密码"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="手机号" prop="phone">
+          <el-input
+            v-model="newFormInline.phone"
+            clearable
+            placeholder="请输入手机号"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            v-model="newFormInline.email"
+            clearable
+            placeholder="请输入邮箱"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="用户性别">
+          <el-select
+            v-model="newFormInline.sex"
+            placeholder="请选择用户性别"
+            class="w-full"
+            clearable
+          >
+            <el-option
+              v-for="(item, index) in sexOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="归属部门">
+          <el-cascader
+            v-model="newFormInline.parentId"
+            class="w-full"
+            :options="newFormInline.higherDeptOptions"
+            :props="{
+              value: 'id',
+              label: 'name',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            filterable
+            placeholder="请选择归属部门"
+          >
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+      </re-col>
+      <re-col
+        v-if="newFormInline.title === '新增'"
+        :value="12"
+        :xs="24"
+        :sm="24"
+      >
+        <el-form-item label="用户状态">
+          <el-switch
+            v-model="newFormInline.status"
+            inline-prompt
+            :active-value="1"
+            :inactive-value="0"
+            active-text="启用"
+            inactive-text="停用"
+            :style="switchStyle"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col>
+        <el-form-item label="备注">
+          <el-input
+            v-model="newFormInline.remark"
+            placeholder="请输入备注信息"
+            type="textarea"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/system/user/form/role.vue b/Yi.Pure.Vue3/src/views/system/user/form/role.vue
new file mode 100644
index 00000000..19adc5bc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/form/role.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ReCol from "@/components/ReCol";
+import { RoleFormProps } from "../utils/types";
+
+const props = withDefaults(defineProps<RoleFormProps>(), {
+  formInline: () => ({
+    username: "",
+    nickname: "",
+    roleOptions: [],
+    ids: []
+  })
+});
+
+const newFormInline = ref(props.formInline);
+</script>
+
+<template>
+  <el-form :model="newFormInline">
+    <el-row :gutter="30">
+      <!-- <re-col>
+        <el-form-item label="用户名称" prop="username">
+          <el-input disabled v-model="newFormInline.username" />
+        </el-form-item>
+      </re-col> -->
+      <re-col>
+        <el-form-item label="用户昵称" prop="nickname">
+          <el-input v-model="newFormInline.nickname" disabled />
+        </el-form-item>
+      </re-col>
+      <re-col>
+        <el-form-item label="角色列表" prop="ids">
+          <el-select
+            v-model="newFormInline.ids"
+            placeholder="请选择"
+            class="w-full"
+            clearable
+            multiple
+          >
+            <el-option
+              v-for="(item, index) in newFormInline.roleOptions"
+              :key="index"
+              :value="item.id"
+              :label="item.name"
+            >
+              {{ item.name }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/system/user/index.vue b/Yi.Pure.Vue3/src/views/system/user/index.vue
new file mode 100644
index 00000000..da9e451e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/index.vue
@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import tree from "./tree.vue";
+import { useUser } from "./utils/hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Upload from "@iconify-icons/ri/upload-line";
+import Role from "@iconify-icons/ri/admin-line";
+import Password from "@iconify-icons/ri/lock-password-line";
+import More from "@iconify-icons/ep/more-filled";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Refresh from "@iconify-icons/ep/refresh";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+
+defineOptions({
+  name: "SystemUser"
+});
+
+const treeRef = ref();
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  treeData,
+  treeLoading,
+  selectedNum,
+  pagination,
+  buttonClass,
+  deviceDetection,
+  onSearch,
+  resetForm,
+  onbatchDel,
+  openDialog,
+  onTreeSelect,
+  handleUpdate,
+  handleDelete,
+  handleUpload,
+  handleReset,
+  handleRole,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCurrentChange,
+  handleSelectionChange
+} = useUser(tableRef, treeRef);
+</script>
+
+<template>
+  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
+    <tree
+      ref="treeRef"
+      :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']"
+      :treeData="treeData"
+      :treeLoading="treeLoading"
+      @tree-select="onTreeSelect"
+    />
+    <div
+      :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']"
+    >
+      <el-form
+        ref="formRef"
+        :inline="true"
+        :model="form"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+      >
+        <el-form-item label="用户名称：" prop="username">
+          <el-input
+            v-model="form.username"
+            placeholder="请输入用户名称"
+            clearable
+            class="!w-[180px]"
+          />
+        </el-form-item>
+        <el-form-item label="手机号码：" prop="phone">
+          <el-input
+            v-model="form.phone"
+            placeholder="请输入手机号码"
+            clearable
+            class="!w-[180px]"
+          />
+        </el-form-item>
+        <el-form-item label="状态：" prop="status">
+          <el-select
+            v-model="form.status"
+            placeholder="请选择"
+            clearable
+            class="!w-[180px]"
+          >
+            <el-option label="已开启" value="1" />
+            <el-option label="已关闭" value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon('ri:search-line')"
+            :loading="loading"
+            @click="onSearch"
+          >
+            搜索
+          </el-button>
+          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <PureTableBar
+        title="用户管理（仅演示，操作后不生效）"
+        :columns="columns"
+        @refresh="onSearch"
+      >
+        <template #buttons>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            @click="openDialog()"
+          >
+            新增用户
+          </el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <div
+            v-if="selectedNum > 0"
+            v-motion-fade
+            class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+          >
+            <div class="flex-auto">
+              <span
+                style="font-size: var(--el-font-size-base)"
+                class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+              >
+                已选 {{ selectedNum }} 项
+              </span>
+              <el-button type="primary" text @click="onSelectionCancel">
+                取消选择
+              </el-button>
+            </div>
+            <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+              <template #reference>
+                <el-button type="danger" text class="mr-1">
+                  批量删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </div>
+          <pure-table
+            ref="tableRef"
+            row-key="id"
+            adaptive
+            :adaptiveConfig="{ offsetBottom: 108 }"
+            align-whole="center"
+            table-layout="auto"
+            :loading="loading"
+            :size="size"
+            :data="dataList"
+            :columns="dynamicColumns"
+            :pagination="{ ...pagination, size }"
+            :header-cell-style="{
+              background: 'var(--el-fill-color-light)',
+              color: 'var(--el-text-color-primary)'
+            }"
+            @selection-change="handleSelectionChange"
+            @page-size-change="handleSizeChange"
+            @page-current-change="handleCurrentChange"
+          >
+            <template #operation="{ row }">
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(EditPen)"
+                @click="openDialog('修改', row)"
+              >
+                修改
+              </el-button>
+              <el-popconfirm
+                :title="`是否确认删除用户编号为${row.id}的这条数据`"
+                @confirm="handleDelete(row)"
+              >
+                <template #reference>
+                  <el-button
+                    class="reset-margin"
+                    link
+                    type="primary"
+                    :size="size"
+                    :icon="useRenderIcon(Delete)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-popconfirm>
+              <el-dropdown>
+                <el-button
+                  class="ml-3 mt-[2px]"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(More)"
+                  @click="handleUpdate(row)"
+                />
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <el-button
+                        :class="buttonClass"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon(Upload)"
+                        @click="handleUpload(row)"
+                      >
+                        上传头像
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button
+                        :class="buttonClass"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon(Password)"
+                        @click="handleReset(row)"
+                      >
+                        重置密码
+                      </el-button>
+                    </el-dropdown-item>
+                    <el-dropdown-item>
+                      <el-button
+                        :class="buttonClass"
+                        link
+                        type="primary"
+                        :size="size"
+                        :icon="useRenderIcon(Role)"
+                        @click="handleRole(row)"
+                      >
+                        分配角色
+                      </el-button>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+:deep(.el-button:focus-visible) {
+  outline: none;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/system/user/svg/expand.svg b/Yi.Pure.Vue3/src/views/system/user/svg/expand.svg
new file mode 100644
index 00000000..bb41c350
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/svg/expand.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/system/user/svg/unexpand.svg b/Yi.Pure.Vue3/src/views/system/user/svg/unexpand.svg
new file mode 100644
index 00000000..04b3e9d7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/svg/unexpand.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5 1.41 1.42L22 12l-7.92-7.92-1.41 1.42 5.5 5.5H4z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/system/user/tree.vue b/Yi.Pure.Vue3/src/views/system/user/tree.vue
new file mode 100644
index 00000000..2e9e82c1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/tree.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ref, computed, watch, getCurrentInstance } from "vue";
+
+import Dept from "@iconify-icons/ri/git-branch-line";
+// import Reset from "@iconify-icons/ri/restart-line";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+import OfficeBuilding from "@iconify-icons/ep/office-building";
+import LocationCompany from "@iconify-icons/ep/add-location";
+import ExpandIcon from "./svg/expand.svg?component";
+import UnExpandIcon from "./svg/unexpand.svg?component";
+
+interface Tree {
+  id: number;
+  name: string;
+  highlight?: boolean;
+  children?: Tree[];
+}
+
+defineProps({
+  treeLoading: Boolean,
+  treeData: Array
+});
+
+const emit = defineEmits(["tree-select"]);
+
+const treeRef = ref();
+const isExpand = ref(true);
+const searchValue = ref("");
+const highlightMap = ref({});
+const { proxy } = getCurrentInstance();
+const defaultProps = {
+  children: "children",
+  label: "name"
+};
+const buttonClass = computed(() => {
+  return [
+    "!h-[20px]",
+    "!text-sm",
+    "reset-margin",
+    "!text-[var(--el-text-color-regular)]",
+    "dark:!text-white",
+    "dark:hover:!text-primary"
+  ];
+});
+
+const filterNode = (value: string, data: Tree) => {
+  if (!value) return true;
+  return data.name.includes(value);
+};
+
+function nodeClick(value) {
+  const nodeId = value.$treeNodeId;
+  highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
+    ? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
+        highlight: false
+      })
+    : Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
+        highlight: true
+      });
+  Object.values(highlightMap.value).forEach((v: Tree) => {
+    if (v.id !== nodeId) {
+      v.highlight = false;
+    }
+  });
+  emit(
+    "tree-select",
+    highlightMap.value[nodeId]?.highlight
+      ? Object.assign({ ...value, selected: true })
+      : Object.assign({ ...value, selected: false })
+  );
+}
+
+function toggleRowExpansionAll(status) {
+  isExpand.value = status;
+  const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
+  for (let i = 0; i < nodes.length; i++) {
+    nodes[i].expanded = status;
+  }
+}
+
+/** 重置部门树状态（选中状态、搜索框值、树初始化） */
+function onTreeReset() {
+  highlightMap.value = {};
+  searchValue.value = "";
+  toggleRowExpansionAll(true);
+}
+
+watch(searchValue, val => {
+  treeRef.value!.filter(val);
+});
+
+defineExpose({ onTreeReset });
+</script>
+
+<template>
+  <div
+    v-loading="treeLoading"
+    class="h-full bg-bg_color overflow-auto"
+    :style="{ minHeight: `calc(100vh - 141px)` }"
+  >
+    <div class="flex items-center h-[34px]">
+      <el-input
+        v-model="searchValue"
+        class="ml-2"
+        size="small"
+        placeholder="请输入部门名称"
+        clearable
+      >
+        <template #suffix>
+          <el-icon class="el-input__icon">
+            <IconifyIconOffline
+              v-show="searchValue.length === 0"
+              icon="ri:search-line"
+            />
+          </el-icon>
+        </template>
+      </el-input>
+      <el-dropdown :hide-on-click="false">
+        <IconifyIconOffline
+          class="w-[28px] cursor-pointer"
+          width="18px"
+          :icon="More2Fill"
+        />
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item>
+              <el-button
+                :class="buttonClass"
+                link
+                type="primary"
+                :icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
+                @click="toggleRowExpansionAll(isExpand ? false : true)"
+              >
+                {{ isExpand ? "折叠全部" : "展开全部" }}
+              </el-button>
+            </el-dropdown-item>
+            <!-- <el-dropdown-item>
+              <el-button
+                :class="buttonClass"
+                link
+                type="primary"
+                :icon="useRenderIcon(Reset)"
+                @click="onTreeReset"
+              >
+                重置状态
+              </el-button>
+            </el-dropdown-item> -->
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <el-divider />
+    <el-tree
+      ref="treeRef"
+      :data="treeData"
+      node-key="id"
+      size="small"
+      :props="defaultProps"
+      default-expand-all
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      @node-click="nodeClick"
+    >
+      <template #default="{ node, data }">
+        <span
+          :class="[
+            'pl-1',
+            'pr-1',
+            'rounded',
+            'flex',
+            'items-center',
+            'select-none',
+            'hover:text-primary',
+            searchValue.trim().length > 0 &&
+              node.label.includes(searchValue) &&
+              'text-red-500',
+            highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
+          ]"
+          :style="{
+            color: highlightMap[node.id]?.highlight
+              ? 'var(--el-color-primary)'
+              : '',
+            background: highlightMap[node.id]?.highlight
+              ? 'var(--el-color-primary-light-7)'
+              : 'transparent'
+          }"
+        >
+          <IconifyIconOffline
+            :icon="
+              data.type === 1
+                ? OfficeBuilding
+                : data.type === 2
+                  ? LocationCompany
+                  : Dept
+            "
+          />
+          {{ node.label }}
+        </span>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider) {
+  margin: 0;
+}
+
+:deep(.el-tree) {
+  --el-tree-node-hover-bg-color: transparent;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx b/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx
new file mode 100644
index 00000000..825cbad8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/hook.tsx
@@ -0,0 +1,535 @@
+import "./reset.css";
+import dayjs from "dayjs";
+import roleForm from "../form/role.vue";
+import editForm from "../form/index.vue";
+import { zxcvbn } from "@zxcvbn-ts/core";
+import { handleTree } from "@/utils/tree";
+import { message } from "@/utils/message";
+import userAvatar from "@/assets/user.jpg";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import type { PaginationProps } from "@pureadmin/table";
+import ReCropperPreview from "@/components/ReCropperPreview";
+import type { FormItemProps, RoleFormItemProps } from "../utils/types";
+import {
+  getKeyList,
+  isAllEmpty,
+  hideTextAtIndex,
+  deviceDetection
+} from "@pureadmin/utils";
+import {
+  getRoleIds,
+  getDeptList,
+  getUserList,
+  getAllRoleList
+} from "@/api/system";
+import {
+  ElForm,
+  ElInput,
+  ElFormItem,
+  ElProgress,
+  ElMessageBox
+} from "element-plus";
+import {
+  type Ref,
+  h,
+  ref,
+  toRaw,
+  watch,
+  computed,
+  reactive,
+  onMounted
+} from "vue";
+
+export function useUser(tableRef: Ref, treeRef: Ref) {
+  const form = reactive({
+    // 左侧部门树的id
+    deptId: "",
+    username: "",
+    phone: "",
+    status: ""
+  });
+  const formRef = ref();
+  const ruleFormRef = ref();
+  const dataList = ref([]);
+  const loading = ref(true);
+  // 上传头像信息
+  const avatarInfo = ref();
+  const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
+  const higherDeptOptions = ref();
+  const treeData = ref([]);
+  const treeLoading = ref(true);
+  const selectedNum = ref(0);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "用户编号",
+      prop: "id",
+      width: 90
+    },
+    {
+      label: "用户头像",
+      prop: "avatar",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.avatar || userAvatar}
+          preview-src-list={Array.of(row.avatar || userAvatar)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+      width: 90
+    },
+    {
+      label: "用户名称",
+      prop: "username",
+      minWidth: 130
+    },
+    {
+      label: "用户昵称",
+      prop: "nickname",
+      minWidth: 130
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      minWidth: 90,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.sex === 1 ? "danger" : null}
+          effect="plain"
+        >
+          {row.sex === 1 ? "女" : "男"}
+        </el-tag>
+      )
+    },
+    {
+      label: "部门",
+      prop: "dept.name",
+      minWidth: 90
+    },
+    {
+      label: "手机号码",
+      prop: "phone",
+      minWidth: 90,
+      formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 })
+    },
+    {
+      label: "状态",
+      prop: "status",
+      minWidth: 90,
+      cellRenderer: scope => (
+        <el-switch
+          size={scope.props.size === "small" ? "small" : "default"}
+          loading={switchLoadMap.value[scope.index]?.loading}
+          v-model={scope.row.status}
+          active-value={1}
+          inactive-value={0}
+          active-text="已启用"
+          inactive-text="已停用"
+          inline-prompt
+          style={switchStyle.value}
+          onChange={() => onChange(scope as any)}
+        />
+      )
+    },
+    {
+      label: "创建时间",
+      minWidth: 90,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 180,
+      slot: "operation"
+    }
+  ];
+  const buttonClass = computed(() => {
+    return [
+      "!h-[20px]",
+      "reset-margin",
+      "!text-gray-500",
+      "dark:!text-white",
+      "dark:hover:!text-primary"
+    ];
+  });
+  // 重置的新密码
+  const pwdForm = reactive({
+    newPwd: ""
+  });
+  const pwdProgress = [
+    { color: "#e74242", text: "非常弱" },
+    { color: "#EFBD47", text: "弱" },
+    { color: "#ffa500", text: "一般" },
+    { color: "#1bbf1b", text: "强" },
+    { color: "#008000", text: "非常强" }
+  ];
+  // 当前密码强度（0-4）
+  const curScore = ref();
+  const roleOptions = ref([]);
+
+  function onChange({ row, index }) {
+    ElMessageBox.confirm(
+      `确认要<strong>${
+        row.status === 0 ? "停用" : "启用"
+      }</strong><strong style='color:var(--el-color-primary)'>${
+        row.username
+      }</strong>用户吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(() => {
+        switchLoadMap.value[index] = Object.assign(
+          {},
+          switchLoadMap.value[index],
+          {
+            loading: true
+          }
+        );
+        setTimeout(() => {
+          switchLoadMap.value[index] = Object.assign(
+            {},
+            switchLoadMap.value[index],
+            {
+              loading: false
+            }
+          );
+          message("已成功修改用户状态", {
+            type: "success"
+          });
+        }, 300);
+      })
+      .catch(() => {
+        row.status === 0 ? (row.status = 1) : (row.status = 0);
+      });
+  }
+
+  function handleUpdate(row) {
+    console.log(row);
+  }
+
+  function handleDelete(row) {
+    message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除用户编号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getUserList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    form.deptId = "";
+    treeRef.value.onTreeReset();
+    onSearch();
+  };
+
+  function onTreeSelect({ id, selected }) {
+    form.deptId = selected ? id : "";
+    onSearch();
+  }
+
+  function formatHigherDeptOptions(treeList) {
+    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      formatHigherDeptOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  }
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}用户`,
+      props: {
+        formInline: {
+          title,
+          higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
+          parentId: row?.dept.id ?? 0,
+          nickname: row?.nickname ?? "",
+          username: row?.username ?? "",
+          password: row?.password ?? "",
+          phone: row?.phone ?? "",
+          email: row?.email ?? "",
+          sex: row?.sex ?? "",
+          status: row?.status ?? 1,
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "46%",
+      draggable: true,
+      fullscreen: deviceDetection(),
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了用户名称为${curData.username}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  const cropRef = ref();
+  /** 上传头像 */
+  function handleUpload(row) {
+    addDialog({
+      title: "裁剪、上传头像",
+      width: "40%",
+      closeOnClickModal: false,
+      fullscreen: deviceDetection(),
+      contentRenderer: () =>
+        h(ReCropperPreview, {
+          ref: cropRef,
+          imgSrc: row.avatar || userAvatar,
+          onCropper: info => (avatarInfo.value = info)
+        }),
+      beforeSure: done => {
+        console.log("裁剪后的图片信息：", avatarInfo.value);
+        // 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
+        done(); // 关闭弹框
+        onSearch(); // 刷新表格数据
+      },
+      closeCallBack: () => cropRef.value.hidePopover()
+    });
+  }
+
+  watch(
+    pwdForm,
+    ({ newPwd }) =>
+      (curScore.value = isAllEmpty(newPwd) ? -1 : zxcvbn(newPwd).score)
+  );
+
+  /** 重置密码 */
+  function handleReset(row) {
+    addDialog({
+      title: `重置 ${row.username} 用户的密码`,
+      width: "30%",
+      draggable: true,
+      closeOnClickModal: false,
+      fullscreen: deviceDetection(),
+      contentRenderer: () => (
+        <>
+          <ElForm ref={ruleFormRef} model={pwdForm}>
+            <ElFormItem
+              prop="newPwd"
+              rules={[
+                {
+                  required: true,
+                  message: "请输入新密码",
+                  trigger: "blur"
+                }
+              ]}
+            >
+              <ElInput
+                clearable
+                show-password
+                type="password"
+                v-model={pwdForm.newPwd}
+                placeholder="请输入新密码"
+              />
+            </ElFormItem>
+          </ElForm>
+          <div class="mt-4 flex">
+            {pwdProgress.map(({ color, text }, idx) => (
+              <div
+                class="w-[19vw]"
+                style={{ marginLeft: idx !== 0 ? "4px" : 0 }}
+              >
+                <ElProgress
+                  striped
+                  striped-flow
+                  duration={curScore.value === idx ? 6 : 0}
+                  percentage={curScore.value >= idx ? 100 : 0}
+                  color={color}
+                  stroke-width={10}
+                  show-text={false}
+                />
+                <p
+                  class="text-center"
+                  style={{ color: curScore.value === idx ? color : "" }}
+                >
+                  {text}
+                </p>
+              </div>
+            ))}
+          </div>
+        </>
+      ),
+      closeCallBack: () => (pwdForm.newPwd = ""),
+      beforeSure: done => {
+        ruleFormRef.value.validate(valid => {
+          if (valid) {
+            // 表单规则校验通过
+            message(`已成功重置 ${row.username} 用户的密码`, {
+              type: "success"
+            });
+            console.log(pwdForm.newPwd);
+            // 根据实际业务使用pwdForm.newPwd和row里的某些字段去调用重置用户密码接口即可
+            done(); // 关闭弹框
+            onSearch(); // 刷新表格数据
+          }
+        });
+      }
+    });
+  }
+
+  /** 分配角色 */
+  async function handleRole(row) {
+    // 选中的角色列表
+    const ids = (await getRoleIds({ userId: row.id })).data ?? [];
+    addDialog({
+      title: `分配 ${row.username} 用户的角色`,
+      props: {
+        formInline: {
+          username: row?.username ?? "",
+          nickname: row?.nickname ?? "",
+          roleOptions: roleOptions.value ?? [],
+          ids
+        }
+      },
+      width: "400px",
+      draggable: true,
+      fullscreen: deviceDetection(),
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(roleForm),
+      beforeSure: (done, { options }) => {
+        const curData = options.props.formInline as RoleFormItemProps;
+        console.log("curIds", curData.ids);
+        // 根据实际业务使用curData.ids和row里的某些字段去调用修改角色接口即可
+        done(); // 关闭弹框
+      }
+    });
+  }
+
+  onMounted(async () => {
+    treeLoading.value = true;
+    onSearch();
+
+    // 归属部门
+    const { data } = await getDeptList();
+    higherDeptOptions.value = handleTree(data);
+    treeData.value = handleTree(data);
+    treeLoading.value = false;
+
+    // 角色列表
+    roleOptions.value = (await getAllRoleList()).data;
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    treeData,
+    treeLoading,
+    selectedNum,
+    pagination,
+    buttonClass,
+    deviceDetection,
+    onSearch,
+    resetForm,
+    onbatchDel,
+    openDialog,
+    onTreeSelect,
+    handleUpdate,
+    handleDelete,
+    handleUpload,
+    handleReset,
+    handleRole,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/system/user/utils/reset.css b/Yi.Pure.Vue3/src/views/system/user/utils/reset.css
new file mode 100644
index 00000000..97f4e4fa
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/reset.css
@@ -0,0 +1,5 @@
+/** 局部重置 ElProgress 的部分样式 */
+.el-progress-bar__outer,
+.el-progress-bar__inner {
+  border-radius: 0;
+}
diff --git a/Yi.Pure.Vue3/src/views/system/user/utils/rule.ts b/Yi.Pure.Vue3/src/views/system/user/utils/rule.ts
new file mode 100644
index 00000000..f946ee27
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/rule.ts
@@ -0,0 +1,39 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+import { isPhone, isEmail } from "@pureadmin/utils";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  nickname: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
+  username: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
+  password: [{ required: true, message: "用户密码为必填项", trigger: "blur" }],
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+      // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
+    }
+  ],
+  email: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isEmail(value)) {
+          callback(new Error("请输入正确的邮箱格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
diff --git a/Yi.Pure.Vue3/src/views/system/user/utils/types.ts b/Yi.Pure.Vue3/src/views/system/user/utils/types.ts
new file mode 100644
index 00000000..c5ab88c0
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/system/user/utils/types.ts
@@ -0,0 +1,36 @@
+interface FormItemProps {
+  id?: number;
+  /** 用于判断是`新增`还是`修改` */
+  title: string;
+  higherDeptOptions: Record<string, unknown>[];
+  parentId: number;
+  nickname: string;
+  username: string;
+  password: string;
+  phone: string | number;
+  email: string;
+  sex: string | number;
+  status: number;
+  dept?: {
+    id?: number;
+    name?: string;
+  };
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+interface RoleFormItemProps {
+  username: string;
+  nickname: string;
+  /** 角色列表 */
+  roleOptions: any[];
+  /** 选中的角色列表 */
+  ids: Record<number, unknown>[];
+}
+interface RoleFormProps {
+  formInline: RoleFormItemProps;
+}
+
+export type { FormItemProps, FormProps, RoleFormItemProps, RoleFormProps };
diff --git a/Yi.Pure.Vue3/src/views/table/base/base.vue b/Yi.Pure.Vue3/src/views/table/base/base.vue
new file mode 100644
index 00000000..35da65cc
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/base.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/border.vue b/Yi.Pure.Vue3/src/views/table/base/border.vue
new file mode 100644
index 00000000..86078a65
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/border.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" border />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/column-template/columns.tsx b/Yi.Pure.Vue3/src/views/table/base/column-template/columns.tsx
new file mode 100644
index 00000000..0508513f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/column-template/columns.tsx
@@ -0,0 +1,72 @@
+import { message } from "@/utils/message";
+import { tableData } from "../data";
+
+// 如果您不习惯tsx写法，可以传slot，然后在template里写
+// 需是hooks写法（函数中有return），避免失去响应性
+export function useColumns() {
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row }) => (
+        <div style="display: flex; align-items: center">
+          <iconify-icon-online icon="ep:timer" />
+          <span style="margin-left: 10px">{row.date}</span>
+        </div>
+      )
+    },
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row }) => (
+        <el-popover effect="light" trigger="hover" placement="top" width="auto">
+          {{
+            default: () => (
+              <>
+                <div>name: {row.name}</div>
+                <div>address: {row.address}</div>
+              </>
+            ),
+            reference: () => <el-tag>{row.name}</el-tag>
+          }}
+        </el-popover>
+      )
+    },
+    {
+      label: "地址",
+      prop: "address"
+    },
+    {
+      label: "操作",
+      cellRenderer: ({ index, row }) => (
+        <>
+          <el-button size="small" onClick={() => handleEdit(index + 1, row)}>
+            Edit
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            onClick={() => handleDelete(index + 1, row)}
+          >
+            Delete
+          </el-button>
+        </>
+      )
+    }
+  ];
+
+  const handleEdit = (index: number, row) => {
+    message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+      type: "success"
+    });
+  };
+
+  const handleDelete = (index: number, row) => {
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  return {
+    columns,
+    tableData
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/base/column-template/index.vue b/Yi.Pure.Vue3/src/views/table/base/column-template/index.vue
new file mode 100644
index 00000000..0962509f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/column-template/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, tableData } = useColumns();
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/customIndex.vue b/Yi.Pure.Vue3/src/views/table/base/customIndex.vue
new file mode 100644
index 00000000..f8960097
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/customIndex.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const indexMethod = (index: number) => {
+  return index * 2;
+};
+
+const columns: TableColumnList = [
+  {
+    type: "index",
+    index: indexMethod
+  },
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/data.ts b/Yi.Pure.Vue3/src/views/table/base/data.ts
new file mode 100644
index 00000000..1d5f99e8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/data.ts
@@ -0,0 +1,297 @@
+import dayjs from "dayjs";
+import { clone } from "@pureadmin/utils";
+
+const date = dayjs(new Date()).format("YYYY-MM-DD");
+
+const tableData = [
+  {
+    date,
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Jack",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Dick",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Harry",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Sam",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Lucy",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mary",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+
+const cloneData = clone(tableData, true);
+
+const tableDataMore = cloneData.map(item =>
+  Object.assign(item, {
+    state: "California",
+    city: "Los Angeles",
+    "post-code": "CA 90036"
+  })
+);
+
+const tableDataImage = cloneData.map((item, index) =>
+  Object.assign(item, {
+    image: `https://pure-admin.github.io/pure-admin-table/imgs/${index + 1}.jpg`
+  })
+);
+
+const tableDataSortable = cloneData.map((item, index) =>
+  Object.assign(item, {
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  })
+);
+
+const tableDataExpand = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  }
+];
+
+export {
+  tableData,
+  tableDataMore,
+  tableDataImage,
+  tableDataExpand,
+  tableDataSortable
+};
diff --git a/Yi.Pure.Vue3/src/views/table/base/expand.vue b/Yi.Pure.Vue3/src/views/table/base/expand.vue
new file mode 100644
index 00000000..9b8d4d10
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/expand.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableDataExpand } from "./data";
+
+const parentBorder = ref(false);
+const childBorder = ref(false);
+
+const columns: TableColumnList = [
+  {
+    type: "expand",
+    slot: "expand"
+  },
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  }
+];
+
+const childColumns: TableColumnList = [
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "State",
+    prop: "state"
+  },
+  {
+    label: "City",
+    prop: "city"
+  },
+  {
+    label: "Address",
+    prop: "address"
+  },
+  {
+    label: "Zip",
+    prop: "zip"
+  }
+];
+</script>
+
+<template>
+  <div>
+    switch parent border: <el-switch v-model="parentBorder" /> switch child
+    border: <el-switch v-model="childBorder" />
+    <pure-table
+      :data="tableDataExpand"
+      :columns="columns"
+      :border="parentBorder"
+    >
+      <template #expand="{ row }">
+        <div class="m-4">
+          <p class="mb-2">State: {{ row.state }}</p>
+          <p class="mb-2">City: {{ row.city }}</p>
+          <p class="mb-2">Address: {{ row.address }}</p>
+          <p class="mb-4">Zip: {{ row.zip }}</p>
+          <h3>Family</h3>
+          <pure-table
+            :data="row.family"
+            :columns="childColumns"
+            :border="childBorder"
+          />
+        </div>
+      </template>
+    </pure-table>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/filters.vue b/Yi.Pure.Vue3/src/views/table/base/filters.vue
new file mode 100644
index 00000000..a24f0a14
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/filters.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const tableRef = ref();
+
+const clearFilter = val => {
+  const { clearFilter } = tableRef.value.getTableRef();
+  clearFilter(val);
+};
+
+const resetDateFilter = () => {
+  clearFilter(["date"]);
+};
+
+const filterTag = (value, row) => {
+  return row.tag === value;
+};
+
+const filterHandler = (value, row, column) => {
+  const property = column["property"];
+  return row[property] === value;
+};
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    sortable: true,
+    columnKey: "date",
+    filters: [
+      { text: "2016-05-01", value: "2016-05-01" },
+      { text: "2016-05-02", value: "2016-05-02" },
+      { text: "2016-05-03", value: "2016-05-03" },
+      { text: "2016-05-04", value: "2016-05-04" }
+    ],
+    filterMethod: filterHandler
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  },
+  {
+    label: "标签",
+    prop: "tag",
+    filters: [
+      { text: "Home", value: "Home" },
+      { text: "Office", value: "Office" }
+    ],
+    filterMethod: filterTag,
+    filterPlacement: "bottom-end",
+    slot: "tag"
+  }
+];
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Home"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Office"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Home"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Office"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-button @click="resetDateFilter">reset date filter</el-button>
+    <el-button @click="clearFilter">reset all filters</el-button>
+    <pure-table
+      ref="tableRef"
+      row-key="date"
+      :data="tableData"
+      :columns="columns"
+    >
+      <template #tag="{ row }">
+        <el-tag
+          :type="row.tag === 'Home' ? null : 'success'"
+          disable-transitions
+        >
+          {{ row.tag }}
+        </el-tag>
+      </template>
+    </pure-table>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/fixColumn.vue b/Yi.Pure.Vue3/src/views/table/base/fixColumn.vue
new file mode 100644
index 00000000..0b62c307
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/fixColumn.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { tableDataMore } from "./data";
+
+withDefaults(
+  defineProps<{
+    height?: string;
+  }>(),
+  {
+    height: null
+  }
+);
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    width: "260",
+    fixed: true
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    width: "260"
+  },
+  {
+    label: "地区",
+    prop: "state",
+    width: "260"
+  },
+  {
+    label: "城市",
+    prop: "city",
+    width: "260"
+  },
+  {
+    label: "地址",
+    prop: "address",
+    width: "260"
+  },
+  {
+    label: "邮编",
+    prop: "post-code",
+    width: "260"
+  },
+  {
+    label: "操作",
+    width: "120",
+    fixed: "right",
+    slot: "operation"
+  }
+];
+
+function handleClick(row) {
+  console.log(
+    "%crow===>>>: ",
+    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+    row
+  );
+}
+</script>
+
+<template>
+  <pure-table
+    :data="
+      height
+        ? tableDataMore.concat(tableDataMore).concat(tableDataMore)
+        : tableDataMore
+    "
+    :columns="columns"
+    :height="height"
+  >
+    <template #operation="{ row }">
+      <el-button link type="primary" size="small" @click="handleClick(row)">
+        Detail
+      </el-button>
+      <el-button link type="primary" size="small">Edit</el-button>
+    </template>
+  </pure-table>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/fixHeader.vue b/Yi.Pure.Vue3/src/views/table/base/fixHeader.vue
new file mode 100644
index 00000000..9195f9c2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/fixHeader.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableData.concat(tableData).concat(tableData)"
+    :columns="columns"
+    height="360"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/fluidHeight.vue b/Yi.Pure.Vue3/src/views/table/base/fluidHeight.vue
new file mode 100644
index 00000000..3d46a514
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/fluidHeight.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { tableDataMore } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    width: "260",
+    fixed: true
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    width: "260"
+  },
+  {
+    label: "地区",
+    prop: "state",
+    width: "260"
+  },
+  {
+    label: "城市",
+    prop: "city",
+    width: "260"
+  },
+  {
+    label: "地址",
+    prop: "address",
+    width: "260"
+  },
+  {
+    label: "邮编",
+    prop: "post-code",
+    width: "260"
+  },
+  {
+    label: "操作",
+    width: "120",
+    fixed: "right",
+    slot: "operation"
+  }
+];
+
+const now = new Date();
+const tableData = ref(tableDataMore);
+
+const deleteRow = (index: number) => {
+  tableData.value.splice(index, 1);
+};
+
+const onAddItem = () => {
+  now.setDate(now.getDate() + 1);
+  tableData.value.push({
+    date: dayjs(now).format("YYYY-MM-DD"),
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    state: "California",
+    city: "Los Angeles",
+    "post-code": "CA 90036"
+  });
+};
+</script>
+
+<template>
+  <div>
+    <pure-table :data="tableData" :columns="columns" maxHeight="500">
+      <template #operation="{ $index }">
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click.prevent="deleteRow($index)"
+        >
+          Remove
+        </el-button>
+      </template>
+    </pure-table>
+    <el-button class="mt-4" style="width: 100%" @click="onAddItem">
+      Add Item
+    </el-button>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/groupHeader.vue b/Yi.Pure.Vue3/src/views/table/base/groupHeader.vue
new file mode 100644
index 00000000..867d5376
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/groupHeader.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { tableDataMore } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    fixed: true
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    children: [
+      {
+        label: "地区",
+        children: [
+          {
+            label: "城市",
+            prop: "city"
+          },
+          {
+            label: "地址",
+            prop: "address"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "邮编",
+    prop: "post-code"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableDataMore" :columns="columns" alignWhole="center" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/header-renderer/columns.tsx b/Yi.Pure.Vue3/src/views/table/base/header-renderer/columns.tsx
new file mode 100644
index 00000000..51235562
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/header-renderer/columns.tsx
@@ -0,0 +1,72 @@
+import { message } from "@/utils/message";
+import { tableData } from "../data";
+import { ref, computed } from "vue";
+
+// 需是hooks写法（函数中有return），避免失去响应性
+export function useColumns() {
+  const search = ref("");
+  const filterTableData = computed(() =>
+    tableData.filter(
+      data =>
+        !search.value ||
+        data.name.toLowerCase().includes(search.value.toLowerCase())
+    )
+  );
+
+  const handleEdit = (index: number, row) => {
+    message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+      type: "success"
+    });
+  };
+
+  const handleDelete = (index: number, row) => {
+    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  const columns: TableColumnList = [
+    {
+      prop: "date",
+      // 自定义表头，slot用法  #nameHeader="{ column, $index }"
+      headerSlot: "nameHeader"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    },
+    {
+      align: "right",
+      // 自定义表头，tsx用法
+      headerRenderer: () => (
+        <el-input
+          v-model={search.value}
+          size="small"
+          clearable
+          placeholder="Type to search"
+        />
+      ),
+      cellRenderer: ({ index, row }) => (
+        <>
+          <el-button size="small" onClick={() => handleEdit(index + 1, row)}>
+            Edit
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            onClick={() => handleDelete(index + 1, row)}
+          >
+            Delete
+          </el-button>
+        </>
+      )
+    }
+  ];
+
+  return {
+    columns,
+    filterTableData
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/base/header-renderer/index.vue b/Yi.Pure.Vue3/src/views/table/base/header-renderer/index.vue
new file mode 100644
index 00000000..33355f71
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/header-renderer/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import Calendar from "@iconify-icons/ri/calendar-2-line";
+
+const { columns, filterTableData } = useColumns();
+</script>
+
+<template>
+  <pure-table :data="filterTableData" :columns="columns">
+    <template #nameHeader>
+      <span class="flex items-center">
+        <IconifyIconOffline :icon="Calendar" />
+        日期
+      </span>
+    </template>
+  </pure-table>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/imgPreview.vue b/Yi.Pure.Vue3/src/views/table/base/imgPreview.vue
new file mode 100644
index 00000000..05a58c9a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/imgPreview.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { tableDataImage } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  },
+  {
+    label: "视频",
+    slot: "video"
+  },
+  {
+    label: "图像",
+    slot: "image"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableDataImage" :columns="columns">
+    <template #video>
+      <video width="180" height="180" controls>
+        <source
+          src="https://pure-admin.github.io/pure-admin-doc/video/url.mov"
+          type="video/mp4"
+        />
+      </video>
+    </template>
+    <template #image="{ row, index }">
+      <el-image
+        preview-teleported
+        loading="lazy"
+        :src="row.image"
+        :preview-src-list="tableDataImage.map(v => v.image)"
+        :initial-index="index"
+        fit="cover"
+        class="w-[100px] h-[100px]"
+      />
+    </template>
+  </pure-table>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/layout.vue b/Yi.Pure.Vue3/src/views/table/base/layout.vue
new file mode 100644
index 00000000..3977f623
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/layout.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableData } from "./data";
+
+type TableLayout = "fixed" | "auto";
+
+const tableLayout = ref<TableLayout>("fixed");
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-radio-group v-model="tableLayout">
+      <el-radio-button label="fixed" value="fixed" />
+      <el-radio-button label="auto" value="auto" />
+    </el-radio-group>
+
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      :table-layout="tableLayout"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/list.tsx b/Yi.Pure.Vue3/src/views/table/base/list.tsx
new file mode 100644
index 00000000..d9c32cc8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/list.tsx
@@ -0,0 +1,166 @@
+import Base from "./base.vue";
+import Stripe from "./stripe.vue";
+import Border from "./border.vue";
+import Status from "./status.vue";
+import FixHeader from "./fixHeader.vue";
+import FixColumn from "./fixColumn.vue";
+import FluidHeight from "./fluidHeight.vue";
+import GroupHeader from "./groupHeader.vue";
+import Radio from "./radio.vue";
+import MultipleChoice from "./multipleChoice.vue";
+import Sortable from "./sortable.vue";
+import Filters from "./filters.vue";
+import ColumnTemplate from "./column-template/index.vue";
+import HeaderRenderer from "./header-renderer/index.vue";
+import Expand from "./expand.vue";
+import TreeTable from "./tree.vue";
+import TotalRow from "./totalRow.vue";
+import Merge from "./merge.vue";
+import CustomIndex from "./customIndex.vue";
+import Layout from "./layout.vue";
+import NestProp from "./nestProp.vue";
+import ImgPreview from "./imgPreview.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/table/base/${val}.vue`;
+
+export const list = [
+  {
+    key: "base",
+    content: rendContent("base"),
+    title: "基础表格",
+    component: Base
+  },
+  {
+    key: "stripe",
+    content: rendContent("stripe"),
+    title: "带斑马纹表格",
+    component: Stripe
+  },
+  {
+    key: "border",
+    content: rendContent("border"),
+    title: "带边框表格",
+    component: Border
+  },
+  {
+    key: "status",
+    content: rendContent("status"),
+    title: "带状态表格",
+    component: Status
+  },
+  {
+    key: "fixHeader",
+    content: rendContent("fixHeader"),
+    title: "固定表头",
+    component: FixHeader
+  },
+  {
+    key: "fixColumn",
+    content: rendContent("fixColumn"),
+    title: "固定列",
+    component: FixColumn
+  },
+  {
+    key: "fixColumnHeader",
+    content: rendContent("fixColumn"),
+    title: "固定列和表头",
+    component: () => <FixColumn height={"360"} />
+  },
+  {
+    key: "groupHeader",
+    content: rendContent("groupHeader"),
+    title: "多级表头（表头分组）",
+    component: GroupHeader
+  },
+  {
+    key: "fluidHeight",
+    content: rendContent("fluidHeight"),
+    title: "流体高度",
+    component: FluidHeight
+  },
+  {
+    key: "radio",
+    content: rendContent("radio"),
+    title: "单选",
+    component: Radio
+  },
+  {
+    key: "multipleChoice",
+    content: rendContent("multipleChoice"),
+    title: "多选",
+    component: MultipleChoice
+  },
+  {
+    key: "sortable",
+    content: rendContent("sortable"),
+    title: "排序和格式化",
+    component: Sortable
+  },
+  {
+    key: "filters",
+    content: rendContent("filters"),
+    title: "筛选",
+    component: Filters
+  },
+  {
+    key: "column-template",
+    content: rendContent("column-template/index"),
+    title: "自定义列模板",
+    component: ColumnTemplate
+  },
+  {
+    key: "header-renderer",
+    content: rendContent("header-renderer/index"),
+    title: "自定义表头",
+    component: HeaderRenderer
+  },
+  {
+    key: "expand",
+    content: rendContent("expand"),
+    title: "展开行",
+    component: Expand
+  },
+  {
+    key: "tree",
+    content: rendContent("tree"),
+    title: "树形数据与懒加载",
+    component: TreeTable
+  },
+  {
+    key: "totalRow",
+    content: rendContent("totalRow"),
+    title: "表尾合计行",
+    component: TotalRow
+  },
+  {
+    key: "merge",
+    content: rendContent("merge"),
+    title: "合并行或列",
+    component: Merge
+  },
+  {
+    key: "customIndex",
+    content: rendContent("customIndex"),
+    title: "自定义索引",
+    component: CustomIndex
+  },
+  {
+    key: "layout",
+    content: rendContent("layout"),
+    title: "表格布局",
+    component: Layout
+  },
+  {
+    key: "nestProp",
+    content: rendContent("nestProp"),
+    title: "多种数据格式（深层结构）",
+    component: NestProp
+  },
+  {
+    key: "imgPreview",
+    content: rendContent("imgPreview"),
+    title: "图像预览",
+    component: ImgPreview
+  }
+];
diff --git a/Yi.Pure.Vue3/src/views/table/base/merge.vue b/Yi.Pure.Vue3/src/views/table/base/merge.vue
new file mode 100644
index 00000000..d09407c3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/merge.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+interface User {
+  id: string;
+  name: string;
+  amount1: string;
+  amount2: string;
+  amount3: number;
+}
+
+interface SpanMethodProps {
+  row: User;
+  column: any;
+  rowIndex: number;
+  columnIndex: number;
+}
+
+const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
+  if (rowIndex % 2 === 0) {
+    if (columnIndex === 0) {
+      return [1, 2];
+    } else if (columnIndex === 1) {
+      return [0, 0];
+    }
+  }
+};
+
+const objectSpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
+  if (columnIndex === 0) {
+    if (rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0
+      };
+    }
+  }
+};
+
+const tableData: User[] = [
+  {
+    id: "12987122",
+    name: "Tom",
+    amount1: "234",
+    amount2: "3.2",
+    amount3: 10
+  },
+  {
+    id: "12987123",
+    name: "Tom",
+    amount1: "165",
+    amount2: "4.43",
+    amount3: 12
+  },
+  {
+    id: "12987124",
+    name: "Tom",
+    amount1: "324",
+    amount2: "1.9",
+    amount3: 9
+  },
+  {
+    id: "12987125",
+    name: "Tom",
+    amount1: "621",
+    amount2: "2.2",
+    amount3: 17
+  },
+  {
+    id: "12987126",
+    name: "Tom",
+    amount1: "539",
+    amount2: "4.1",
+    amount3: 15
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "ID",
+    prop: "id"
+  },
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "Amount 1",
+    prop: "amount1",
+    sortable: true
+  },
+  {
+    label: "Amount 2",
+    prop: "amount2",
+    sortable: true
+  },
+  {
+    label: "Amount 3",
+    prop: "amount3",
+    sortable: true
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      :span-method="arraySpanMethod"
+      border
+    />
+
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      :span-method="objectSpanMethod"
+      border
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/multipleChoice.vue b/Yi.Pure.Vue3/src/views/table/base/multipleChoice.vue
new file mode 100644
index 00000000..6f4fd572
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/multipleChoice.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableData } from "./data";
+
+const tableRef = ref();
+
+const multipleSelection = ref([]);
+const toggleSelection = (rows?: any) => {
+  const { toggleRowSelection, clearSelection } = tableRef.value.getTableRef();
+  if (rows) {
+    rows.forEach(row => {
+      toggleRowSelection(row, undefined);
+    });
+  } else {
+    clearSelection();
+  }
+};
+const handleSelectionChange = val => {
+  multipleSelection.value = val;
+};
+
+const columns: TableColumnList = [
+  {
+    type: "selection",
+    align: "left"
+  },
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      ref="tableRef"
+      :data="tableData"
+      :columns="columns"
+      @selection-change="handleSelectionChange"
+    />
+    <div style="margin-top: 20px">
+      <el-button @click="toggleSelection([tableData[1], tableData[2]])">
+        Toggle selection status of second and third rows
+      </el-button>
+      <el-button @click="toggleSelection()">Clear selection</el-button>
+    </div>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/nestProp.vue b/Yi.Pure.Vue3/src/views/table/base/nestProp.vue
new file mode 100644
index 00000000..2291203c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/nestProp.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const tableData = [
+  {
+    userInfo: { name: "Test1", age: 22 },
+    other: [
+      { sex: "女" },
+      {
+        more: {
+          content: '<div><span style="color: red">我是 html 片段</span></div>'
+        }
+      }
+    ],
+    role: "设计师"
+  },
+  {
+    userInfo: { name: "Test2", age: 28 },
+    other: [
+      { sex: "男" },
+      {
+        more: {
+          content:
+            '<img width="100" height="100" src="https://pure-admin.github.io/pure-admin-table/imgs/11.jpg">'
+        }
+      }
+    ],
+    role: "后端"
+  },
+  {
+    userInfo: { name: "Test3", age: 20 },
+    other: [
+      { sex: "女" },
+      {
+        more: {
+          content:
+            '<img width="100" height="100" src="https://pure-admin.github.io/pure-admin-table/imgs/1.jpg">'
+        }
+      }
+    ],
+    role: "程序员鼓励师"
+  },
+  {
+    userInfo: { name: "Test4", age: 26 },
+    other: [
+      { sex: "男" },
+      {
+        more: {
+          content:
+            '<a href="https://github.com/xiaoxian521" target="_black">我是链接，点我去 Follow</a>'
+        }
+      }
+    ],
+    role: "前端"
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "姓名",
+    prop: "userInfo.name"
+  },
+  {
+    label: "性别",
+    prop: "other[0].sex"
+  },
+  {
+    label: "年龄",
+    prop: "userInfo.age"
+  },
+  {
+    label: "Html片段",
+    slot: "content"
+  },
+  {
+    label: "角色",
+    prop: "role"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns">
+    <template #content="{ row }">
+      <span v-html="row.other[1].more.content" />
+    </template>
+  </pure-table>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/radio.vue b/Yi.Pure.Vue3/src/views/table/base/radio.vue
new file mode 100644
index 00000000..bf16dd07
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/radio.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableData } from "./data";
+
+const tableRef = ref();
+const currentRow = ref();
+
+const setCurrent = (row?: any) => {
+  // 获取表格的方法 tableRef.value.getTableRef()
+  const { setCurrentRow } = tableRef.value.getTableRef();
+  setCurrentRow(row);
+};
+const handleCurrentChange = val => {
+  currentRow.value = val;
+};
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      ref="tableRef"
+      :data="tableData"
+      :columns="columns"
+      highlight-current-row
+      @page-current-change="handleCurrentChange"
+    />
+    <div style="margin-top: 20px">
+      <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
+      <el-button @click="setCurrent()">Clear selection</el-button>
+    </div>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/sortable.vue b/Yi.Pure.Vue3/src/views/table/base/sortable.vue
new file mode 100644
index 00000000..494630f7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/sortable.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { tableDataSortable } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    sortable: true
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address",
+    formatter: ({ address }) => `格式化后的内容：${address}`
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableDataSortable"
+    :columns="columns"
+    :default-sort="{ prop: 'date', order: 'ascending' }"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/status.vue b/Yi.Pure.Vue3/src/views/table/base/status.vue
new file mode 100644
index 00000000..fcfba45f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/status.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
+  if (rowIndex === 1 || rowIndex === 5) {
+    return "pure-warning-row";
+  } else if (rowIndex === 3 || rowIndex === 7) {
+    return "pure-success-row";
+  }
+  return "";
+};
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableData"
+    :columns="columns"
+    :row-class-name="tableRowClassName"
+  />
+</template>
+
+<style>
+/* 此处样式会在全局都生效，上面 tableRowClassName 函数返回的值也就是类名必须在全局中唯一，避免样式突出 */
+.pure-warning-row {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+
+.pure-success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/table/base/stripe.vue b/Yi.Pure.Vue3/src/views/table/base/stripe.vue
new file mode 100644
index 00000000..324be621
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/stripe.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" stripe />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/totalRow.vue b/Yi.Pure.Vue3/src/views/table/base/totalRow.vue
new file mode 100644
index 00000000..17b529a5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/totalRow.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+interface Product {
+  id: string;
+  name: string;
+  amount1: string;
+  amount2: string;
+  amount3: number;
+}
+
+interface SummaryMethodProps<T = Product> {
+  columns: any[];
+  data: T[];
+}
+
+const getSummaries = (param: SummaryMethodProps) => {
+  const { columns, data } = param;
+  const sums: string[] = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = "Total Cost";
+      return;
+    }
+    const values = data.map(item => Number(item[column.property]));
+    if (!values.every(value => Number.isNaN(value))) {
+      sums[index] = `$ ${values.reduce((prev, curr) => {
+        const value = Number(curr);
+        if (!Number.isNaN(value)) {
+          return prev + curr;
+        } else {
+          return prev;
+        }
+      }, 0)}`;
+    } else {
+      sums[index] = "N/A";
+    }
+  });
+
+  return sums;
+};
+
+const tableData: Product[] = [
+  {
+    id: "12987122",
+    name: "Tom",
+    amount1: "234",
+    amount2: "3.2",
+    amount3: 10
+  },
+  {
+    id: "12987123",
+    name: "Tom",
+    amount1: "165",
+    amount2: "4.43",
+    amount3: 12
+  },
+  {
+    id: "12987124",
+    name: "Tom",
+    amount1: "324",
+    amount2: "1.9",
+    amount3: 9
+  },
+  {
+    id: "12987125",
+    name: "Tom",
+    amount1: "621",
+    amount2: "2.2",
+    amount3: 17
+  },
+  {
+    id: "12987126",
+    name: "Tom",
+    amount1: "539",
+    amount2: "4.1",
+    amount3: 15
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "ID",
+    prop: "id"
+  },
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "Amount 1",
+    prop: "amount1",
+    sortable: true
+  },
+  {
+    label: "Amount 2",
+    prop: "amount2",
+    sortable: true
+  },
+  {
+    label: "Amount 3",
+    prop: "amount3",
+    sortable: true
+  }
+];
+
+const columns1: TableColumnList = [
+  {
+    label: "ID",
+    prop: "id"
+  },
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "Cost 1 ($)",
+    prop: "amount1"
+  },
+  {
+    label: "Cost 2 ($)",
+    prop: "amount2"
+  },
+  {
+    label: "Cost 3 ($)",
+    prop: "amount3"
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableData"
+    :columns="columns"
+    border
+    show-summary
+    class="mb-6"
+  />
+  <pure-table
+    :data="tableData"
+    :columns="columns1"
+    border
+    :summary-method="getSummaries"
+    show-summary
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/base/tree.vue b/Yi.Pure.Vue3/src/views/table/base/tree.vue
new file mode 100644
index 00000000..ccb1b886
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/base/tree.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+interface User {
+  id: number;
+  date: string;
+  name: string;
+  hasChildren?: boolean;
+  children?: User[];
+}
+
+const load = (
+  row: User,
+  treeNode: unknown,
+  resolve: (date: User[]) => void
+) => {
+  setTimeout(() => {
+    resolve([
+      {
+        id: 31,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      },
+      {
+        id: 32,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      }
+    ]);
+  }, 1000);
+};
+
+const tableData: User[] = [
+  {
+    id: 1,
+    date: "2016-05-02",
+    name: "wangxiaohu"
+  },
+  {
+    id: 2,
+    date: "2016-05-04",
+    name: "wangxiaohu"
+  },
+  {
+    id: 3,
+    date: "2016-05-01",
+    name: "wangxiaohu",
+    children: [
+      {
+        id: 31,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      },
+      {
+        id: 32,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      }
+    ]
+  },
+  {
+    id: 4,
+    date: "2016-05-03",
+    name: "wangxiaohu"
+  }
+];
+
+const tableData1: User[] = [
+  {
+    id: 1,
+    date: "2016-05-02",
+    name: "wangxiaohu"
+  },
+  {
+    id: 2,
+    date: "2016-05-04",
+    name: "wangxiaohu"
+  },
+  {
+    id: 3,
+    date: "2016-05-01",
+    name: "wangxiaohu",
+    hasChildren: true
+  },
+  {
+    id: 4,
+    date: "2016-05-03",
+    name: "wangxiaohu"
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      row-key="id"
+      border
+      default-expand-all
+      class="mb-6"
+    />
+    <pure-table
+      :data="tableData1"
+      :columns="columns"
+      row-key="id"
+      border
+      lazy
+      :load="load"
+      :tree-props="{
+        hasChildren: 'hasChildren',
+        children: 'children',
+        checkStrictly: false
+      }"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/edit.vue b/Yi.Pure.Vue3/src/views/table/edit.vue
new file mode 100644
index 00000000..2bcffab1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./edit/list";
+
+defineOptions({
+  name: "PureTableEdit"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          可编辑用法全部采用 TSX 语法，充分发挥
+          <el-link
+            href="https://github.com/pure-admin/pure-admin-table"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            @pureadmin/table
+          </el-link>
+          的灵活性，维护整体表格只需操作 columns 配置即可
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/edit"
+        target="_blank"
+      >
+        代码位置 src/views/table/edit
+      </el-link>
+    </template>
+
+    <el-alert
+      title="可编辑用法中所有表格都设置了 row-key ，它是唯一值的字段，比如id。作用：1. 用来优化 Table
+      的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
+      type="info"
+      :closable="false"
+    />
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <span
+              v-tippy="{
+                maxWidth: 'none',
+                content: `（第 ${index + 1} 个示例）${item.content}`
+              }"
+            >
+              {{ item.title }}
+            </span>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
+  margin-top: 10px;
+}
+
+:deep(.el-alert__title) {
+  font-size: 15px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/table/edit/data.ts b/Yi.Pure.Vue3/src/views/table/edit/data.ts
new file mode 100644
index 00000000..1fbeaf34
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/data.ts
@@ -0,0 +1,74 @@
+const tableData = [
+  {
+    id: 1,
+    name: "Tom",
+    sex: 0, // 0代表男 1代表女
+    hobby: 2,
+    date: "2024-03-17"
+  },
+  {
+    id: 2,
+    name: "Jack",
+    sex: 0,
+    hobby: 1,
+    date: "2024-03-18"
+  },
+  {
+    id: 3,
+    name: "Lily",
+    sex: 1,
+    hobby: 1,
+    date: "2024-03-19"
+  },
+  {
+    id: 4,
+    name: "Mia",
+    sex: 1,
+    hobby: 3,
+    date: "2024-03-20"
+  }
+];
+
+const options = [
+  {
+    value: 0,
+    label: "上午写代码"
+  },
+  {
+    value: 1,
+    label: "下午写代码"
+  },
+  {
+    value: 2,
+    label: "晚上写代码"
+  },
+  {
+    value: 3,
+    label: "凌晨休息了"
+  }
+];
+
+const tableDataEdit = [
+  {
+    id: 1,
+    name: "Tom",
+    address: "home"
+  },
+  {
+    id: 2,
+    name: "Jack",
+    address: "office"
+  },
+  {
+    id: 3,
+    name: "Lily",
+    address: "library"
+  },
+  {
+    id: 4,
+    name: "Mia",
+    address: "playground"
+  }
+];
+
+export { tableData, tableDataEdit, options };
diff --git a/Yi.Pure.Vue3/src/views/table/edit/demo1/columns.tsx b/Yi.Pure.Vue3/src/views/table/edit/demo1/columns.tsx
new file mode 100644
index 00000000..30efd47e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/demo1/columns.tsx
@@ -0,0 +1,87 @@
+import { ref } from "vue";
+import { options } from "../data";
+
+export function useColumns() {
+  const dataList = ref([]);
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row }) => <el-input v-model={row.name} />
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row }) => (
+        <el-switch
+          v-model={row.sex}
+          inline-prompt
+          active-value={0}
+          inactive-value={1}
+          active-text="男"
+          inactive-text="女"
+        />
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row }) => (
+        <el-select v-model={row.hobby} clearable placeholder="请选择爱好">
+          {options.map(item => {
+            return (
+              <el-option
+                key={item.value}
+                label={item.label}
+                value={item.value}
+              />
+            );
+          })}
+        </el-select>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row }) => (
+        <el-date-picker
+          v-model={row.date}
+          type="date"
+          format="YYYY/MM/DD"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择日期"
+        />
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 90,
+      slot: "operation"
+    }
+  ];
+
+  function onAdd() {
+    dataList.value.push({
+      id: dataList.value.length + 1,
+      name: "",
+      sex: 0,
+      hobby: "",
+      date: ""
+    });
+  }
+
+  function onDel(row) {
+    const index = dataList.value.indexOf(row);
+    if (index !== -1) dataList.value.splice(index, 1);
+  }
+
+  return {
+    columns,
+    dataList,
+    onAdd,
+    onDel
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/edit/demo1/index.vue b/Yi.Pure.Vue3/src/views/table/edit/demo1/index.vue
new file mode 100644
index 00000000..6beea0cd
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/demo1/index.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import Empty from "../empty.svg?component";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ep/plus";
+import Delete from "@iconify-icons/ep/delete";
+
+const { columns, dataList, onAdd, onDel } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar height="540px">
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList"
+      :columns="columns"
+    >
+      <template #empty>
+        <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
+      </template>
+      <template #append>
+        <el-button
+          plain
+          class="w-full my-2"
+          :icon="useRenderIcon(AddFill)"
+          @click="onAdd"
+        >
+          添加一行数据
+        </el-button>
+      </template>
+      <template #operation="{ row }">
+        <el-button
+          class="reset-margin"
+          link
+          type="primary"
+          :icon="useRenderIcon(Delete)"
+          @click="onDel(row)"
+        />
+      </template>
+    </pure-table>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-table__inner-wrapper::before) {
+  height: 0;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/table/edit/demo2/columns.tsx b/Yi.Pure.Vue3/src/views/table/edit/demo2/columns.tsx
new file mode 100644
index 00000000..4d955f6a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/demo2/columns.tsx
@@ -0,0 +1,116 @@
+import { ref } from "vue";
+import { tableData, options } from "../data";
+import { clone, delObjectProperty } from "@pureadmin/utils";
+
+export function useColumns() {
+  const editMap = ref({});
+  const dataList = ref(clone(tableData, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-input v-model={row.name} />
+          ) : (
+            <p>{row.name}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-switch
+              v-model={row.sex}
+              inline-prompt
+              active-value={0}
+              inactive-value={1}
+              active-text="男"
+              inactive-text="女"
+            />
+          ) : (
+            <p>{row.sex === 0 ? "男" : "女"}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-select v-model={row.hobby} clearable placeholder="请选择爱好">
+              {options.map(item => {
+                return (
+                  <el-option
+                    key={item.value}
+                    label={item.label}
+                    value={item.value}
+                  />
+                );
+              })}
+            </el-select>
+          ) : (
+            <el-tag type="primary">
+              {options.filter(opt => opt.value == row.hobby)[0]?.label}
+            </el-tag>
+          )}
+        </>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-date-picker
+              v-model={row.date}
+              type="date"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择日期"
+            />
+          ) : (
+            <p>{row.date}</p>
+          )}
+        </>
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function onEdit(row, index) {
+    editMap.value[index] = Object.assign({ ...row, editable: true });
+  }
+
+  function onSave(index) {
+    editMap.value[index].editable = false;
+  }
+
+  function onCancel(index) {
+    editMap.value[index].editable = false;
+    dataList.value[index] = delObjectProperty(editMap.value[index], "editable");
+  }
+
+  return {
+    editMap,
+    columns,
+    dataList,
+    onEdit,
+    onSave,
+    onCancel
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/edit/demo2/index.vue b/Yi.Pure.Vue3/src/views/table/edit/demo2/index.vue
new file mode 100644
index 00000000..c2d242b7
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/demo2/index.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { editMap, columns, dataList, onEdit, onSave, onCancel } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar>
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList"
+      :columns="columns"
+    >
+      <template #operation="{ row, index }">
+        <el-button
+          v-if="!editMap[index]?.editable"
+          class="reset-margin"
+          link
+          type="primary"
+          @click="onEdit(row, index)"
+        >
+          修改
+        </el-button>
+        <div v-else>
+          <el-button
+            class="reset-margin"
+            link
+            type="primary"
+            @click="onSave(index)"
+          >
+            保存
+          </el-button>
+          <el-button class="reset-margin" link @click="onCancel(index)">
+            取消
+          </el-button>
+        </div>
+      </template>
+    </pure-table>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/edit/demo3/columns.tsx b/Yi.Pure.Vue3/src/views/table/edit/demo3/columns.tsx
new file mode 100644
index 00000000..77694166
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/demo3/columns.tsx
@@ -0,0 +1,87 @@
+import { ref, computed } from "vue";
+import { tableDataEdit } from "../data";
+
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Check from "@iconify-icons/ep/check";
+
+export function useColumns() {
+  const editMap = ref({});
+  const activeIndex = ref(-1);
+  const dataList = ref(tableDataEdit);
+
+  const editing = computed(() => {
+    return index => {
+      return editMap.value[index]?.editing;
+    };
+  });
+
+  const iconClass = computed(() => {
+    return (index, other = false) => {
+      return [
+        "cursor-pointer",
+        "ml-2",
+        "transition",
+        "delay-100",
+        other
+          ? ["hover:scale-110", "hover:text-red-500"]
+          : editing.value(index) && ["scale-150", "text-red-500"]
+      ];
+    };
+  });
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名（可修改）",
+      prop: "name",
+      cellRenderer: ({ row, index }) => (
+        <div
+          class="flex-bc w-full h-[32px]"
+          onMouseenter={() => (activeIndex.value = index)}
+          onMouseleave={() => onMouseleave(index)}
+        >
+          {!editing.value(index) ? (
+            <p>{row.name}</p>
+          ) : (
+            <>
+              <el-input v-model={row.name} />
+              <iconify-icon-offline
+                icon={Check}
+                class={iconClass.value(index)}
+                onClick={() => onSave(index)}
+              />
+            </>
+          )}
+          <iconify-icon-offline
+            v-show={activeIndex.value === index && !editing.value(index)}
+            icon={EditPen}
+            class={iconClass.value(index, true)}
+            onClick={() => onEdit(row, index)}
+          />
+        </div>
+      )
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  function onMouseleave(index) {
+    editing.value[index]
+      ? (activeIndex.value = index)
+      : (activeIndex.value = -1);
+  }
+
+  function onEdit(row, index) {
+    editMap.value[index] = Object.assign({ ...row, editing: true });
+  }
+
+  function onSave(index) {
+    editMap.value[index].editing = false;
+  }
+
+  return {
+    columns,
+    dataList
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/edit/demo3/index.vue b/Yi.Pure.Vue3/src/views/table/edit/demo3/index.vue
new file mode 100644
index 00000000..1c461012
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/demo3/index.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar>
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      class="!w-[30vw]"
+      row-key="id"
+      border
+      :data="dataList"
+      :columns="columns"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/edit/empty.svg b/Yi.Pure.Vue3/src/views/table/edit/empty.svg
new file mode 100644
index 00000000..5c8b211c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="empty-icon" viewBox="0 0 1024 1024"><path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18M673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4zm146.5-486.1c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8m-444.5 51.6L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4M512 239.3h2.5c19.5.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/table/edit/list.tsx b/Yi.Pure.Vue3/src/views/table/edit/list.tsx
new file mode 100644
index 00000000..25360934
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/edit/list.tsx
@@ -0,0 +1,27 @@
+import Demo1 from "./demo1/index.vue";
+import Demo2 from "./demo2/index.vue";
+import Demo3 from "./demo3/index.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/table/edit/${val}/index.vue`;
+
+export const list = [
+  {
+    key: "demo1",
+    content: rendContent("demo1"),
+    title: "整体编辑",
+    component: Demo1
+  },
+  {
+    key: "demo2",
+    content: rendContent("demo2"),
+    title: "单行编辑",
+    component: Demo2
+  },
+  {
+    key: "demo3",
+    content: rendContent("demo3"),
+    title: "单元格编辑",
+    component: Demo3
+  }
+];
diff --git a/Yi.Pure.Vue3/src/views/table/high.vue b/Yi.Pure.Vue3/src/views/table/high.vue
new file mode 100644
index 00000000..413d2268
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./high/list";
+
+defineOptions({
+  name: "PureTableHigh"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          高级用法全部采用 TSX 语法，充分发挥
+          <el-link
+            href="https://github.com/pure-admin/pure-admin-table"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            @pureadmin/table
+          </el-link>
+          的灵活性，维护整体表格只需操作 columns 配置即可
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/high"
+        target="_blank"
+      >
+        代码位置 src/views/table/high
+      </el-link>
+    </template>
+
+    <el-alert
+      title="高级用法中所有表格都设置了 row-key ，后端需返回唯一值的字段，比如id。作用：1. 用来优化 Table
+      的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
+      type="info"
+      :closable="false"
+    />
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <span
+              v-tippy="{
+                maxWidth: 'none',
+                content: `（第 ${index + 1} 个示例）${item.content}`
+              }"
+            >
+              {{ item.title }}
+            </span>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
+  margin-top: 10px;
+}
+
+:deep(.el-alert__title) {
+  font-size: 15px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/table/high/adaptive/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/adaptive/columns.tsx
new file mode 100644
index 00000000..21503ae1
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/adaptive/columns.tsx
@@ -0,0 +1,105 @@
+import type {
+  LoadingConfig,
+  AdaptiveConfig,
+  PaginationProps
+} from "@pureadmin/table";
+import { tableData } from "../data";
+import { ref, onMounted, reactive } from "vue";
+import { clone, delay } from "@pureadmin/utils";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 20,
+    currentPage: 1,
+    pageSizes: [20, 40, 60],
+    total: 0,
+    align: "right",
+    background: true,
+    size: "default"
+  });
+
+  /** 加载动画配置 */
+  const loadingConfig = reactive<LoadingConfig>({
+    text: "正在加载第一页...",
+    viewBox: "-10, -10, 50, 50",
+    spinner: `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `
+    // svg: "",
+    // background: rgba()
+  });
+
+  /** 撑满内容区自适应高度相关配置 */
+  const adaptiveConfig: AdaptiveConfig = {
+    /** 表格距离页面底部的偏移量，默认值为 `96` */
+    offsetBottom: 110
+    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
+    // fixHeader: true
+    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
+    // timeout: 60
+    /** 表头的 `z-index`，默认值为 `100` */
+    // zIndex: 100
+  };
+
+  function onSizeChange(val) {
+    console.log("onSizeChange", val);
+  }
+
+  function onCurrentChange(val) {
+    loadingConfig.text = `正在加载第${val}页...`;
+    loading.value = true;
+    delay(600).then(() => {
+      loading.value = false;
+    });
+  }
+
+  onMounted(() => {
+    delay(600).then(() => {
+      const newList = [];
+      Array.from({ length: 6 }).forEach(() => {
+        newList.push(clone(tableData, true));
+      });
+      newList.flat(Infinity).forEach((item, index) => {
+        dataList.value.push({ id: index, ...item });
+      });
+      pagination.total = dataList.value.length;
+      loading.value = false;
+    });
+  });
+
+  return {
+    loading,
+    columns,
+    dataList,
+    pagination,
+    loadingConfig,
+    adaptiveConfig,
+    onSizeChange,
+    onCurrentChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/adaptive/index.vue b/Yi.Pure.Vue3/src/views/table/high/adaptive/index.vue
new file mode 100644
index 00000000..0536bdff
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/adaptive/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const tableRef = ref();
+
+const {
+  loading,
+  columns,
+  dataList,
+  pagination,
+  loadingConfig,
+  adaptiveConfig,
+  onSizeChange,
+  onCurrentChange
+} = useColumns();
+</script>
+
+<template>
+  <pure-table
+    ref="tableRef"
+    border
+    adaptive
+    :adaptiveConfig="adaptiveConfig"
+    row-key="id"
+    alignWhole="center"
+    showOverflowTooltip
+    :loading="loading"
+    :loading-config="loadingConfig"
+    :data="
+      dataList.slice(
+        (pagination.currentPage - 1) * pagination.pageSize,
+        pagination.currentPage * pagination.pageSize
+      )
+    "
+    :columns="columns"
+    :pagination="pagination"
+    @page-size-change="onSizeChange"
+    @page-current-change="onCurrentChange"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/contextmenu/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/contextmenu/columns.tsx
new file mode 100644
index 00000000..a83d9da3
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/contextmenu/columns.tsx
@@ -0,0 +1,73 @@
+import { ref } from "vue";
+import { tableDataDrag } from "../data";
+import { clone } from "@pureadmin/utils";
+import { message } from "@/utils/message";
+import { CustomMouseMenu } from "@howdyjs/mouse-menu";
+
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    }
+  ];
+
+  // 配置参考：https://kongfandong.cn/howdy/mouse-menu/readme
+  const menuOptions = {
+    menuList: [
+      {
+        label: ({ id }) => `ID为：${id}`,
+        disabled: true
+      },
+      {
+        label: "修改",
+        tips: "Edit",
+        fn: row =>
+          message(
+            `您修改了第 ${
+              dataList.value.findIndex(v => v.id === row.id) + 1
+            } 行，数据为：${JSON.stringify(row)}`,
+            {
+              type: "success"
+            }
+          )
+      }
+    ]
+  };
+
+  function showMouseMenu(row, column, event) {
+    event.preventDefault();
+    const { x, y } = event;
+    const ctx = CustomMouseMenu({
+      el: event.currentTarget,
+      params: row,
+      // 菜单容器的CSS设置
+      menuWrapperCss: {
+        background: "var(--el-bg-color)"
+      },
+      menuItemCss: {
+        labelColor: "var(--el-text-color)",
+        hoverLabelColor: "var(--el-color-primary)",
+        hoverTipsColor: "var(--el-color-primary)"
+      },
+      ...menuOptions
+    });
+    ctx.show(x, y);
+  }
+
+  return {
+    columns,
+    dataList,
+    showMouseMenu
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/contextmenu/index.vue b/Yi.Pure.Vue3/src/views/table/high/contextmenu/index.vue
new file mode 100644
index 00000000..a3a00c77
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/contextmenu/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList, showMouseMenu } = useColumns();
+</script>
+
+<template>
+  <pure-table
+    row-key="id"
+    border
+    :data="dataList"
+    :columns="columns"
+    @row-contextmenu="showMouseMenu"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/data.ts b/Yi.Pure.Vue3/src/views/table/high/data.ts
new file mode 100644
index 00000000..909db024
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/data.ts
@@ -0,0 +1,106 @@
+import dayjs from "dayjs";
+import { clone } from "@pureadmin/utils";
+
+const date = dayjs(new Date()).format("YYYY-MM-DD");
+
+const tableData = [
+  {
+    date,
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Jack",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Dick",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Harry",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Sam",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Lucy",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mary",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike1",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike2",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+
+const tableDataMore = clone(tableData, true).map(item =>
+  Object.assign(item, {
+    state: "California",
+    city: "Los Angeles",
+    "post-code": "CA 90036"
+  })
+);
+
+const tableDataImage = clone(tableData, true).map((item, index) =>
+  Object.assign(item, {
+    image: `https://pure-admin.github.io/pure-admin-table/imgs/${index + 1}.jpg`
+  })
+);
+
+const tableDataSortable = clone(tableData, true).map((item, index) => {
+  delete item.date;
+  Object.assign(item, {
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  });
+});
+
+const tableDataDrag = clone(tableData, true).map((item, index) => {
+  delete item.address;
+  delete item.date;
+  return Object.assign(item, {
+    id: index + 1,
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  });
+});
+
+const tableDataEdit = clone(tableData, true).map((item, index) => {
+  delete item.date;
+  return Object.assign(item, {
+    id: index + 1,
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`,
+    address: "China",
+    sex: index % 2 === 0 ? "男" : "女"
+  });
+});
+
+export {
+  tableData,
+  tableDataDrag,
+  tableDataMore,
+  tableDataEdit,
+  tableDataImage,
+  tableDataSortable
+};
diff --git a/Yi.Pure.Vue3/src/views/table/high/drag/column/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/drag/column/columns.tsx
new file mode 100644
index 00000000..00b2d5d2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/drag/column/columns.tsx
@@ -0,0 +1,69 @@
+import Sortable from "sortablejs";
+import { clone } from "@pureadmin/utils";
+import { tableDataDrag } from "../../data";
+import { ref, nextTick, onMounted } from "vue";
+
+// 列拖拽演示
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true));
+
+  const columnsDrag = ref<TableColumnList>([
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    }
+  ]);
+
+  const columns = ref<TableColumnList>([
+    {
+      label: "ID",
+      prop: index => columnsDrag.value[index].prop as string
+    },
+    {
+      label: "日期",
+      prop: index => columnsDrag.value[index].prop as string
+    },
+    {
+      label: "姓名",
+      prop: index => columnsDrag.value[index].prop as string
+    }
+  ]);
+
+  const columnDrop = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    nextTick(() => {
+      const wrapper: HTMLElement = document.querySelector(
+        ".el-table__header-wrapper tr"
+      );
+      Sortable.create(wrapper, {
+        animation: 300,
+        delay: 0,
+        onEnd: ({ newIndex, oldIndex }) => {
+          const oldItem = columnsDrag.value[oldIndex];
+          columnsDrag.value.splice(oldIndex, 1);
+          columnsDrag.value.splice(newIndex, 0, oldItem);
+        }
+      });
+    });
+  };
+
+  onMounted(() => {
+    nextTick(() => {
+      columnDrop(event);
+    });
+  });
+
+  return {
+    columns,
+    dataList,
+    columnsDrag
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/drag/column/index.vue b/Yi.Pure.Vue3/src/views/table/high/drag/column/index.vue
new file mode 100644
index 00000000..edc95e7f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/drag/column/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList, columnsDrag } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar height="700px">
+      <code>
+        <pre class="w-[700px]"> {{ columnsDrag }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table row-key="id" :data="dataList" :columns="columns" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/drag/row/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/drag/row/columns.tsx
new file mode 100644
index 00000000..fcd05c95
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/drag/row/columns.tsx
@@ -0,0 +1,70 @@
+import Sortable from "sortablejs";
+import { ref, nextTick } from "vue";
+import { clone } from "@pureadmin/utils";
+import { tableDataDrag } from "../../data";
+
+// 行拖拽演示
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true));
+
+  const rowDrop = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    nextTick(() => {
+      const wrapper: HTMLElement = document.querySelector(
+        ".el-table__body-wrapper tbody"
+      );
+      Sortable.create(wrapper, {
+        animation: 300,
+        handle: ".drag-btn",
+        onEnd: ({ newIndex, oldIndex }) => {
+          const currentRow = dataList.value.splice(oldIndex, 1)[0];
+          dataList.value.splice(newIndex, 0, currentRow);
+        }
+      });
+    });
+  };
+
+  const columns: TableColumnList = [
+    // {
+    //   width: 60,
+    //   cellRenderer: () => (
+    //     <iconify-icon-online
+    //       icon="icon-park-outline:drag"
+    //       class="drag-btn cursor-grab"
+    //       onMouseenter={(event: { preventDefault: () => void }) =>
+    //         rowDrop(event)
+    //       }
+    //     />
+    //   )
+    // },
+    {
+      label: "ID",
+      prop: "id",
+      cellRenderer: ({ row }) => (
+        <div class="flex items-center">
+          <iconify-icon-online
+            icon="icon-park-outline:drag"
+            class="drag-btn cursor-grab"
+            onMouseenter={(event: { preventDefault: () => void }) =>
+              rowDrop(event)
+            }
+          />
+          <p class="ml-[16px]">{row.id}</p>
+        </div>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    }
+  ];
+
+  return {
+    columns,
+    dataList
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/drag/row/index.vue b/Yi.Pure.Vue3/src/views/table/high/drag/row/index.vue
new file mode 100644
index 00000000..65ee65fe
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/drag/row/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar height="700px">
+      <code>
+        <pre class="w-[700px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table row-key="id" :data="dataList" :columns="columns" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/echarts/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/echarts/columns.tsx
new file mode 100644
index 00000000..0f73cfc2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/echarts/columns.tsx
@@ -0,0 +1,83 @@
+import { ref, computed } from "vue";
+import { tableDataDrag } from "../data";
+import { message } from "@/utils/message";
+import { templateRef } from "@vueuse/core";
+import { clone, useDark, useECharts } from "@pureadmin/utils";
+
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true).splice(0, 4));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "echarts图表",
+      slot: "echart"
+    }
+  ];
+
+  const { isDark } = useDark();
+
+  const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+  dataList.value.forEach((_, i) => {
+    const { setOptions } = useECharts(templateRef(`PieChartRef${i}`), {
+      theme
+    });
+
+    setOptions(
+      {
+        tooltip: {
+          trigger: "item",
+          // 将 tooltip 控制在图表区域里
+          confine: true
+        },
+        series: [
+          {
+            name: "Github信息",
+            type: "pie",
+            // center: ["30%", "50%"],
+            data: [
+              { value: 1067, name: "watchers" },
+              { value: 4037, name: "star" },
+              { value: 859, name: "forks" }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      },
+      {
+        name: "click",
+        callback: ({ data: { name, value } }) => {
+          message(
+            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`,
+            {
+              type: "success"
+            }
+          );
+        }
+      }
+    );
+  });
+
+  return {
+    columns,
+    dataList
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/echarts/index.vue b/Yi.Pure.Vue3/src/views/table/high/echarts/index.vue
new file mode 100644
index 00000000..057a6ce9
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/echarts/index.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList } = useColumns();
+</script>
+
+<template>
+  <pure-table row-key="id" border :data="dataList" :columns="columns">
+    <template #echart="{ index }">
+      <div :ref="'PieChartRef' + index" class="w-full h-[100px]" />
+    </template>
+  </pure-table>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/excel/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/excel/columns.tsx
new file mode 100644
index 00000000..7ddcb1ac
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/excel/columns.tsx
@@ -0,0 +1,52 @@
+import { ref } from "vue";
+import { utils, writeFile } from "xlsx";
+import { tableDataDrag } from "../data";
+import { clone } from "@pureadmin/utils";
+import { message } from "@/utils/message";
+
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    }
+  ];
+
+  const exportExcel = () => {
+    const res = dataList.value.map(item => {
+      const arr = [];
+      columns.forEach(column => {
+        arr.push(item[column.prop as string]);
+      });
+      return arr;
+    });
+    const titleList = [];
+    columns.forEach(column => {
+      titleList.push(column.label);
+    });
+    res.unshift(titleList);
+    const workSheet = utils.aoa_to_sheet(res);
+    const workBook = utils.book_new();
+    utils.book_append_sheet(workBook, workSheet, "数据报表");
+    writeFile(workBook, "pure-admin-table.xlsx");
+    message("导出成功", {
+      type: "success"
+    });
+  };
+
+  return {
+    columns,
+    dataList,
+    exportExcel
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/excel/index.vue b/Yi.Pure.Vue3/src/views/table/high/excel/index.vue
new file mode 100644
index 00000000..67fcce86
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/excel/index.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList, exportExcel } = useColumns();
+</script>
+
+<template>
+  <div>
+    <el-button
+      type="primary"
+      class="mb-[20px] float-right"
+      @click="exportExcel"
+    >
+      导出
+    </el-button>
+    <pure-table row-key="id" border :data="dataList" :columns="columns" />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/list.tsx b/Yi.Pure.Vue3/src/views/table/high/list.tsx
new file mode 100644
index 00000000..d0b6c19d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/list.tsx
@@ -0,0 +1,76 @@
+import Adaptive from "./adaptive/index.vue";
+import Page from "./page/index.vue";
+import RowDrag from "./drag/row/index.vue";
+import ColumnDrag from "./drag/column/index.vue";
+import Contextmenu from "./contextmenu/index.vue";
+import Excel from "./excel/index.vue";
+import Watermark from "./watermark/index.vue";
+import Print from "./prints/index.vue";
+import Echarts from "./echarts/index.vue";
+import TableSelect from "./table-select/index.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/table/high/${val}/index.vue`;
+
+export const list = [
+  {
+    key: "adaptive",
+    content: rendContent("adaptive"),
+    title: "自适应内容区高度",
+    component: Adaptive
+  },
+  {
+    key: "page",
+    content: rendContent("page"),
+    title: "分页、加载动画、动态列",
+    component: Page
+  },
+  {
+    key: "tableSelect",
+    content: rendContent("table-select"),
+    title: "表格选择器",
+    component: TableSelect
+  },
+  {
+    key: "rowDrag",
+    content: rendContent("drag/row"),
+    title: "拖拽表格（行拖拽）",
+    component: RowDrag
+  },
+  {
+    key: "columnDrag",
+    content: rendContent("drag/column"),
+    title: "拖拽表格（列拖拽）",
+    component: ColumnDrag
+  },
+  {
+    key: "contextmenu",
+    content: rendContent("contextmenu"),
+    title: "右键菜单",
+    component: Contextmenu
+  },
+  {
+    key: "excel",
+    content: rendContent("excel"),
+    title: "导出excel",
+    component: Excel
+  },
+  {
+    key: "print",
+    content: rendContent("print"),
+    title: "打印",
+    component: Print
+  },
+  {
+    key: "watermark",
+    content: rendContent("watermark"),
+    title: "水印",
+    component: Watermark
+  },
+  {
+    key: "echarts",
+    content: rendContent("echarts"),
+    title: "内嵌echarts图表",
+    component: Echarts
+  }
+];
diff --git a/Yi.Pure.Vue3/src/views/table/high/page/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/page/columns.tsx
new file mode 100644
index 00000000..d8153754
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/page/columns.tsx
@@ -0,0 +1,114 @@
+import { tableData } from "../data";
+import { clone, delay } from "@pureadmin/utils";
+import { ref, onMounted, reactive, watchEffect } from "vue";
+import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const select = ref("no");
+  const hideVal = ref("nohide");
+  const tableSize = ref("default");
+  const paginationAlign = ref("right");
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      align: "left",
+      reserveSelection: true,
+      hide: () => (select.value === "no" ? true : false)
+    },
+    {
+      label: "日期",
+      prop: "date",
+      hide: () => (hideVal.value === "hideDate" ? true : false)
+    },
+    {
+      label: "姓名",
+      prop: "name",
+      hide: () => (hideVal.value === "hideName" ? true : false)
+    },
+    {
+      label: "地址",
+      prop: "address",
+      hide: () => (hideVal.value === "hideAddress" ? true : false)
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 10,
+    currentPage: 1,
+    pageSizes: [10, 15, 20],
+    total: 0,
+    align: "right",
+    background: true,
+    size: "default"
+  });
+
+  /** 加载动画配置 */
+  const loadingConfig = reactive<LoadingConfig>({
+    text: "正在加载第一页...",
+    viewBox: "-10, -10, 50, 50",
+    spinner: `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `
+    // svg: "",
+    // background: rgba()
+  });
+
+  function onChange(val) {
+    pagination.size = val;
+  }
+
+  function onSizeChange(val) {
+    console.log("onSizeChange", val);
+  }
+
+  function onCurrentChange(val) {
+    loadingConfig.text = `正在加载第${val}页...`;
+    loading.value = true;
+    delay(600).then(() => {
+      loading.value = false;
+    });
+  }
+
+  watchEffect(() => {
+    pagination.align = paginationAlign.value as Align;
+  });
+
+  onMounted(() => {
+    delay(600).then(() => {
+      const newList = [];
+      Array.from({ length: 6 }).forEach(() => {
+        newList.push(clone(tableData, true));
+      });
+      newList.flat(Infinity).forEach((item, index) => {
+        dataList.value.push({ id: index, ...item });
+      });
+      pagination.total = dataList.value.length;
+      loading.value = false;
+    });
+  });
+
+  return {
+    loading,
+    columns,
+    dataList,
+    select,
+    hideVal,
+    tableSize,
+    pagination,
+    loadingConfig,
+    paginationAlign,
+    onChange,
+    onSizeChange,
+    onCurrentChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/page/index.vue b/Yi.Pure.Vue3/src/views/table/high/page/index.vue
new file mode 100644
index 00000000..13ba795a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/page/index.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const {
+  loading,
+  columns,
+  dataList,
+  select,
+  hideVal,
+  tableSize,
+  pagination,
+  loadingConfig,
+  paginationAlign,
+  onChange,
+  onSizeChange,
+  onCurrentChange
+} = useColumns();
+</script>
+
+<template>
+  <div>
+    <el-space class="float-right mb-4">
+      <p class="text-sm">多选：</p>
+      <el-radio-group v-model="select" size="small">
+        <el-radio-button value="yes">是</el-radio-button>
+        <el-radio-button value="no">否</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
+      <p class="text-sm">动态列：</p>
+      <el-radio-group v-model="hideVal" size="small">
+        <el-radio-button value="nohide">不隐藏</el-radio-button>
+        <el-radio-button value="hideDate">隐藏日期</el-radio-button>
+        <el-radio-button value="hideName">隐藏姓名</el-radio-button>
+        <el-radio-button value="hideAddress">隐藏地址</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
+      <p class="text-sm">表格大小：</p>
+      <el-radio-group v-model="tableSize" size="small">
+        <el-radio-button value="large">large</el-radio-button>
+        <el-radio-button value="default">default</el-radio-button>
+        <el-radio-button value="small">small</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
+      <p class="text-sm">分页大小：</p>
+      <el-radio-group v-model="pagination.size" size="small" @change="onChange">
+        <el-radio-button value="large">large</el-radio-button>
+        <el-radio-button value="default">default</el-radio-button>
+        <el-radio-button value="small">small</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
+      <p class="text-sm">分页的对齐方式：</p>
+      <el-radio-group v-model="paginationAlign" size="small">
+        <el-radio-button value="right">right</el-radio-button>
+        <el-radio-button value="center">center</el-radio-button>
+        <el-radio-button value="left">left</el-radio-button>
+      </el-radio-group>
+    </el-space>
+
+    <pure-table
+      border
+      row-key="id"
+      alignWhole="center"
+      showOverflowTooltip
+      :size="tableSize as any"
+      :loading="loading"
+      :loading-config="loadingConfig"
+      :height="tableSize === 'small' ? 352 : 440"
+      :data="
+        dataList.slice(
+          (pagination.currentPage - 1) * pagination.pageSize,
+          pagination.currentPage * pagination.pageSize
+        )
+      "
+      :columns="columns"
+      :pagination="pagination"
+      @page-size-change="onSizeChange"
+      @page-current-change="onCurrentChange"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/prints/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/prints/columns.tsx
new file mode 100644
index 00000000..bb92b37c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/prints/columns.tsx
@@ -0,0 +1,60 @@
+import Print from "@/utils/print";
+import { ref, type Ref } from "vue";
+import { tableDataEdit } from "../data";
+import { clone } from "@pureadmin/utils";
+
+export function useColumns(printRef: Ref) {
+  const dataList = ref(clone(tableDataEdit, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  const print = () => {
+    Print(printRef.value.getTableDoms().tableWrapper).toPrint;
+  };
+
+  function cellStyle({ column: { property }, rowIndex }) {
+    if (property === "id") {
+      return rowIndex < 3
+        ? { background: "#87baf9" }
+        : { background: "#87e8de" };
+    }
+  }
+
+  function headerCellStyle({ columnIndex }) {
+    return columnIndex === 0
+      ? { background: "#f3b2d0" }
+      : { background: "#fafafa" };
+  }
+
+  function rowStyle({ rowIndex }) {
+    return rowIndex % 2 === 1
+      ? { background: "#ffa39e" }
+      : { background: "#91d5ff" };
+  }
+
+  return {
+    columns,
+    dataList,
+    print,
+    rowStyle,
+    cellStyle,
+    headerCellStyle
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/prints/index.vue b/Yi.Pure.Vue3/src/views/table/high/prints/index.vue
new file mode 100644
index 00000000..8c3b44db
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/prints/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const printRef = ref();
+const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } =
+  useColumns(printRef);
+</script>
+
+<template>
+  <div>
+    <el-button type="primary" class="mb-[20px] float-right" @click="print">
+      打印
+    </el-button>
+    <!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->
+    <pure-table
+      ref="printRef"
+      rowHoverBgColor="transparent"
+      row-key="id"
+      border
+      :data="dataList"
+      :columns="columns"
+      :row-style="rowStyle"
+      :cell-style="cellStyle"
+      :header-cell-style="headerCellStyle"
+    />
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/table-select/index.vue b/Yi.Pure.Vue3/src/views/table/high/table-select/index.vue
new file mode 100644
index 00000000..abf87ca0
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/table-select/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import radioSelectTable from "./radio/index.vue";
+import multipleSelectTable from "./multiple/index.vue";
+
+const model = ref("radio");
+</script>
+
+<template>
+  <el-space>
+    <el-radio-group v-model="model">
+      <el-radio-button value="radio">单选</el-radio-button>
+      <el-radio-button value="multiple">多选</el-radio-button>
+    </el-radio-group>
+    <el-divider direction="vertical" />
+    <component
+      :is="model === 'radio' ? radioSelectTable : multipleSelectTable"
+    />
+  </el-space>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/table-select/multiple/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/table-select/multiple/columns.tsx
new file mode 100644
index 00000000..e024a49a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/table-select/multiple/columns.tsx
@@ -0,0 +1,142 @@
+import { message } from "@/utils/message";
+import { tableDataEdit } from "../../data";
+import type { PaginationProps } from "@pureadmin/table";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+import { type Ref, ref, reactive, watch, nextTick } from "vue";
+
+export function useColumns(selectRef: Ref, formRef: Ref, tableRef: Ref) {
+  const tableData = ref(tableDataEdit);
+  const cloneTableData = cloneDeep(tableData.value);
+  const selectValue = ref([1, 3, 4]);
+  const searchForm = reactive({
+    sexValue: "",
+    searchDate: ""
+  });
+  const sexOptions = [
+    {
+      value: 0,
+      label: "男"
+    },
+    {
+      value: 1,
+      label: "女"
+    }
+  ];
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      reserveSelection: true,
+      align: "left"
+    },
+    {
+      label: "ID",
+      prop: "id",
+      width: 50
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "性别",
+      prop: "sex"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    },
+    {
+      label: "日期",
+      prop: "date",
+      minWidth: 120
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 5,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: tableData.value.length,
+    background: true,
+    size: "small"
+  });
+
+  const handleSelectionChange = val => {
+    const arr = [];
+    val.forEach(v => {
+      arr.push({ label: v.name, id: v.id });
+    });
+    selectValue.value = arr;
+  };
+
+  const onSearch = () => {
+    tableData.value = cloneTableData;
+    if (!isAllEmpty(searchForm.sexValue)) {
+      let sex = sexOptions
+        .map(sex => sex.value === Number(searchForm.sexValue) && sex.label)
+        .filter(Boolean)[0];
+      tableData.value = tableData.value.filter(data => data.sex === sex);
+    }
+    if (!isAllEmpty(searchForm.searchDate)) {
+      tableData.value = tableData.value.filter(
+        data => data.date === searchForm.searchDate
+      );
+    }
+    pagination.total = tableData.value.length;
+  };
+
+  const onReset = () => {
+    formRef.value.resetFields();
+    onClear();
+    tableData.value = cloneTableData;
+    pagination.total = tableData.value.length;
+  };
+
+  const removeTag = ({ id }) => {
+    const { toggleRowSelection } = tableRef.value.getTableRef();
+    toggleRowSelection(tableData.value.filter(v => v.id == id)?.[0], false);
+  };
+
+  const onClear = () => {
+    const { clearSelection } = tableRef.value.getTableRef();
+    clearSelection();
+  };
+
+  const onSure = () => {
+    selectRef.value.blur();
+    message(`当前选中的数据为：${JSON.stringify(selectValue.value)}`, {
+      type: "success"
+    });
+  };
+
+  watch(
+    selectValue,
+    async () => {
+      await nextTick();
+      const { toggleRowSelection } = tableRef.value.getTableRef();
+      selectValue.value.forEach(val => {
+        tableData.value.forEach(row => {
+          // 默认回显
+          row.id === val ? toggleRowSelection(row) : undefined;
+        });
+      });
+    },
+    { immediate: true }
+  );
+
+  return {
+    searchForm,
+    sexOptions,
+    columns,
+    pagination,
+    selectValue,
+    tableData,
+    onSure,
+    onClear,
+    onReset,
+    onSearch,
+    removeTag,
+    handleSelectionChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/table-select/multiple/index.vue b/Yi.Pure.Vue3/src/views/table/high/table-select/multiple/index.vue
new file mode 100644
index 00000000..c97406c5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/table-select/multiple/index.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const formRef = ref();
+const tableRef = ref();
+const selectRef = ref();
+const {
+  searchForm,
+  sexOptions,
+  columns,
+  pagination,
+  selectValue,
+  tableData,
+  onSure,
+  onClear,
+  onReset,
+  onSearch,
+  removeTag,
+  handleSelectionChange
+} = useColumns(selectRef, formRef, tableRef);
+</script>
+
+<template>
+  <el-select
+    ref="selectRef"
+    v-model="selectValue"
+    class="!w-[200px]"
+    placeholder="请选择"
+    clearable
+    multiple
+    collapse-tags
+    value-key="id"
+    @remove-tag="removeTag"
+    @clear="onClear"
+  >
+    <template #empty>
+      <div class="m-4">
+        <!-- <el-config-provider size="small"> -->
+        <el-form ref="formRef" :inline="true" :model="searchForm">
+          <el-form-item prop="sexValue">
+            <el-select
+              v-model="searchForm.sexValue"
+              class="!w-[120px]"
+              placeholder="请选择性别"
+              :teleported="false"
+              clearable
+            >
+              <el-option
+                v-for="item in sexOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="searchDate">
+            <el-date-picker
+              v-model="searchForm.searchDate"
+              class="!w-[150px]"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-D"
+            />
+          </el-form-item>
+          <el-form-item class="float-right !mr-0">
+            <el-button type="primary" text bg @click="onSearch">
+              查询
+            </el-button>
+            <el-button text bg @click="onReset"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          alignWhole="center"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          :data="
+            tableData.slice(
+              (pagination.currentPage - 1) * pagination.pageSize,
+              pagination.currentPage * pagination.pageSize
+            )
+          "
+          :columns="columns"
+          :pagination="pagination"
+          @selection-change="handleSelectionChange"
+        />
+        <el-button
+          class="absolute bottom-[25px] left-[20px]"
+          type="primary"
+          size="small"
+          text
+          bg
+          @click="onSure"
+        >
+          确定
+        </el-button>
+        <!-- </el-config-provider> -->
+      </div>
+    </template>
+  </el-select>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/table-select/radio/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/table-select/radio/columns.tsx
new file mode 100644
index 00000000..33ec165d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/table-select/radio/columns.tsx
@@ -0,0 +1,62 @@
+import { message } from "@/utils/message";
+import { tableDataEdit } from "../../data";
+import { ref, reactive, type Ref } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useColumns(selectRef: Ref) {
+  const selectValue = ref("");
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id",
+      width: 80
+    },
+    {
+      label: "日期",
+      prop: "date",
+      minWidth: 120
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 5,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: tableDataEdit.length,
+    background: true,
+    size: "small"
+  });
+
+  /** 高亮当前选中行 */
+  function rowStyle({ row: { name } }) {
+    return {
+      cursor: "pointer",
+      background: name === selectValue.value ? "var(--el-fill-color-light)" : ""
+    };
+  }
+
+  /** 行点击 */
+  function onRowClick(row) {
+    selectValue.value = row.name;
+    selectRef.value.blur();
+    message(`当前选中行的数据为：${JSON.stringify(row)}`, { type: "success" });
+  }
+
+  return {
+    columns,
+    pagination,
+    selectValue,
+    tableDataEdit,
+    rowStyle,
+    onRowClick
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/table-select/radio/index.vue b/Yi.Pure.Vue3/src/views/table/high/table-select/radio/index.vue
new file mode 100644
index 00000000..b0a2e9af
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/table-select/radio/index.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const selectRef = ref();
+const {
+  columns,
+  pagination,
+  selectValue,
+  tableDataEdit,
+  rowStyle,
+  onRowClick
+} = useColumns(selectRef);
+</script>
+
+<template>
+  <el-select
+    ref="selectRef"
+    v-model="selectValue"
+    class="!w-[200px]"
+    placeholder="请选择"
+    value-key="id"
+    clearable
+  >
+    <template #empty>
+      <div class="m-4">
+        <pure-table
+          row-key="id"
+          alignWhole="center"
+          :header-cell-style="{
+            background: 'var(--el-fill-color-light)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          :row-style="rowStyle"
+          :data="
+            tableDataEdit.slice(
+              (pagination.currentPage - 1) * pagination.pageSize,
+              pagination.currentPage * pagination.pageSize
+            )
+          "
+          :columns="columns"
+          :pagination="pagination"
+          @row-click="onRowClick"
+        />
+      </div>
+    </template>
+  </el-select>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/high/watermark/columns.tsx b/Yi.Pure.Vue3/src/views/table/high/watermark/columns.tsx
new file mode 100644
index 00000000..d5689664
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/watermark/columns.tsx
@@ -0,0 +1,47 @@
+import { tableDataEdit } from "../data";
+import { ref, onMounted, type Ref } from "vue";
+import { clone, useWatermark, delay } from "@pureadmin/utils";
+
+export function useColumns(waterRef: Ref) {
+  const dataList = ref(clone(tableDataEdit, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  onMounted(() => {
+    delay().then(() => {
+      // https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark.html
+      const { setWatermark } = useWatermark(
+        waterRef.value.getTableDoms().tableWrapper
+      );
+      setWatermark("编程即艺术", {
+        font: "16px Microsoft YaHei",
+        globalAlpha: 0.8,
+        forever: true,
+        width: 240,
+        height: 90
+      });
+    });
+  });
+
+  return {
+    columns,
+    dataList
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/table/high/watermark/index.vue b/Yi.Pure.Vue3/src/views/table/high/watermark/index.vue
new file mode 100644
index 00000000..6fe6bd5c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/high/watermark/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const waterRef = ref();
+const { columns, dataList } = useColumns(waterRef);
+</script>
+
+<template>
+  <pure-table
+    ref="waterRef"
+    row-key="id"
+    border
+    :data="dataList"
+    :columns="columns"
+  />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/index.vue b/Yi.Pure.Vue3/src/views/table/index.vue
new file mode 100644
index 00000000..6d545bcf
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/index.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./base/list";
+
+defineOptions({
+  name: "PureTable"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          二次封装 Element Plus 的
+          <el-link
+            href="https://element-plus.org/zh-CN/component/table.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            el-table
+          </el-link>
+          完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
+          template 里了
+          <el-link
+            href="https://github.com/pure-admin/pure-admin-table"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            @pureadmin/table 源码
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/base"
+        target="_blank"
+      >
+        代码位置 src/views/table/base
+      </el-link>
+    </template>
+
+    <el-alert
+      title="基础用法中大部分表格都没设置 row-key ，不过最好都设置一下，后端需返回唯一值的字段，比如id。作用：1. 用来优化 Table
+      的渲染，尤其当字段在深层结构中；2. 防止某些操作导致表格组件内部混乱"
+      type="info"
+      :closable="false"
+    />
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <span
+              v-tippy="{
+                maxWidth: 'none',
+                content: `（第 ${index + 1} 个示例）${item.content}`
+              }"
+            >
+              {{ item.title }}
+            </span>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
+  margin-top: 10px;
+}
+
+:deep(.el-alert__title) {
+  font-size: 15px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/table/virtual.vue b/Yi.Pure.Vue3/src/views/table/virtual.vue
new file mode 100644
index 00000000..d8fe0261
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/virtual.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./virtual/list";
+
+defineOptions({
+  name: "VxeTable"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          虚拟滚动采用
+          <el-link
+            href="https://vxetable.cn/#/table/scroll/scroll"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vxe-table
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/virtual"
+        target="_blank"
+      >
+        代码位置 src/views/table/virtual
+      </el-link>
+    </template>
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <span
+              v-tippy="{
+                maxWidth: 'none',
+                content: `（第 ${index + 1} 个示例）${item.content}`
+              }"
+            >
+              {{ item.title }}
+            </span>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/table/virtual/list.tsx b/Yi.Pure.Vue3/src/views/table/virtual/list.tsx
new file mode 100644
index 00000000..f4c5f43c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/virtual/list.tsx
@@ -0,0 +1,27 @@
+import List from "./list.vue";
+import TreeList from "./treeList.vue";
+import PageList from "./pageList.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/table/virtual/${val}.vue`;
+
+export const list = [
+  {
+    key: "list",
+    content: rendContent("list"),
+    title: "虚拟表格",
+    component: List
+  },
+  {
+    key: "treeList",
+    content: rendContent("treeList"),
+    title: "虚拟树形表格",
+    component: TreeList
+  },
+  {
+    key: "pageList",
+    content: rendContent("pageList"),
+    title: "分页表格",
+    component: PageList
+  }
+];
diff --git a/Yi.Pure.Vue3/src/views/table/virtual/list.vue b/Yi.Pure.Vue3/src/views/table/virtual/list.vue
new file mode 100644
index 00000000..3316a747
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/virtual/list.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { VxeTableBar } from "@/components/ReVxeTableBar";
+
+const vxeTableRef = ref();
+const loading = ref(true);
+const tableData = ref([]);
+
+const columns = [
+  { type: "seq", field: "seq", title: "序号", width: 100 },
+  { field: "name", title: "名称", sortable: true },
+  { field: "role", title: "角色" },
+  { field: "sex", title: "性别" }
+];
+
+async function onSearch() {
+  loading.value = true;
+  // 模拟数据
+  const mockList = [];
+  for (let index = 0; index < 500; index++) {
+    mockList.push({
+      id: index,
+      name: "Test" + index,
+      role: "Developer",
+      sex: "男"
+    });
+  }
+  tableData.value = mockList;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+onSearch();
+</script>
+
+<template>
+  <VxeTableBar
+    :vxeTableRef="vxeTableRef"
+    :columns="columns"
+    title="虚拟表格"
+    @refresh="onSearch"
+  >
+    <template v-slot="{ size, dynamicColumns }">
+      <vxe-grid
+        ref="vxeTableRef"
+        v-loading="loading"
+        show-overflow
+        height="500"
+        :size="size"
+        :row-config="{ isHover: true }"
+        :scroll-y="{ enabled: true }"
+        :columns="dynamicColumns"
+        :data="tableData"
+      />
+    </template>
+  </VxeTableBar>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/virtual/pageList.vue b/Yi.Pure.Vue3/src/views/table/virtual/pageList.vue
new file mode 100644
index 00000000..21a926f5
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/virtual/pageList.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { ref, reactive, computed } from "vue";
+import { VxeTableBar } from "@/components/ReVxeTableBar";
+
+const vxeTableRef = ref();
+const loading = ref(true);
+const tableData = ref([]);
+
+const getTableHeight = computed(() => {
+  return (size: string) => {
+    switch (size) {
+      case "medium":
+        return 531;
+      case "small":
+        return 482;
+      case "mini":
+        return 433;
+    }
+  };
+});
+
+const pagerConfig = reactive({
+  total: 0,
+  currentPage: 1,
+  pageSize: 10,
+  pageSizes: [5, 10, 15, 20]
+});
+
+const columns = [
+  { type: "seq", field: "seq", title: "序号", width: 100 },
+  { field: "name", title: "名称", sortable: true },
+  { field: "role", title: "角色" },
+  { field: "sex", title: "性别" }
+];
+
+async function onSearch() {
+  loading.value = true;
+  // 模拟数据
+  const mockList = [];
+  for (let index = 0; index < 10; index++) {
+    mockList.push({
+      id: index,
+      name: "Test" + index,
+      role: "Developer",
+      sex: "男"
+    });
+  }
+  pagerConfig.total = 20;
+  tableData.value = mockList;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const handlePageChange = ({ currentPage, pageSize }) => {
+  pagerConfig.currentPage = currentPage;
+  pagerConfig.pageSize = pageSize;
+  onSearch();
+};
+
+onSearch();
+</script>
+
+<template>
+  <VxeTableBar
+    :vxeTableRef="vxeTableRef"
+    :columns="columns"
+    title="分页表格"
+    @refresh="onSearch"
+  >
+    <template v-slot="{ size, dynamicColumns }">
+      <vxe-grid
+        ref="vxeTableRef"
+        v-loading="loading"
+        show-overflow
+        :height="getTableHeight(size)"
+        :size="size"
+        :column-config="{ resizable: true }"
+        :columns="dynamicColumns"
+        :pagerConfig="pagerConfig"
+        :data="tableData"
+        @page-change="handlePageChange"
+      />
+    </template>
+  </VxeTableBar>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/table/virtual/tree.json b/Yi.Pure.Vue3/src/views/table/virtual/tree.json
new file mode 100644
index 00000000..eb0ff95d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/virtual/tree.json
@@ -0,0 +1,16287 @@
+[
+  {
+    "id": 1,
+    "parentId": null,
+    "name": "北京"
+  },
+  {
+    "id": 2,
+    "parentId": 1,
+    "name": "北京市"
+  },
+  {
+    "id": 3,
+    "parentId": 2,
+    "name": "东城区"
+  },
+  {
+    "id": 8,
+    "parentId": 2,
+    "name": "丰台区"
+  },
+  {
+    "id": 16,
+    "parentId": 2,
+    "name": "大兴区"
+  },
+  {
+    "id": 6,
+    "parentId": 2,
+    "name": "宣武区"
+  },
+  {
+    "id": 19,
+    "parentId": 2,
+    "name": "密云县"
+  },
+  {
+    "id": 5,
+    "parentId": 2,
+    "name": "崇文区"
+  },
+  {
+    "id": 18,
+    "parentId": 2,
+    "name": "平谷区"
+  },
+  {
+    "id": 20,
+    "parentId": 2,
+    "name": "延庆县"
+  },
+  {
+    "id": 17,
+    "parentId": 2,
+    "name": "怀柔区"
+  },
+  {
+    "id": 12,
+    "parentId": 2,
+    "name": "房山区"
+  },
+  {
+    "id": 15,
+    "parentId": 2,
+    "name": "昌平区"
+  },
+  {
+    "id": 7,
+    "parentId": 2,
+    "name": "朝阳区"
+  },
+  {
+    "id": 10,
+    "parentId": 2,
+    "name": "海淀区"
+  },
+  {
+    "id": 9,
+    "parentId": 2,
+    "name": "石景山区"
+  },
+  {
+    "id": 4,
+    "parentId": 2,
+    "name": "西城区"
+  },
+  {
+    "id": 13,
+    "parentId": 2,
+    "name": "通州区"
+  },
+  {
+    "id": 11,
+    "parentId": 2,
+    "name": "门头沟区"
+  },
+  {
+    "id": 14,
+    "parentId": 2,
+    "name": "顺义区"
+  },
+  {
+    "id": 104,
+    "parentId": null,
+    "name": "安徽"
+  },
+  {
+    "id": 105,
+    "parentId": 104,
+    "name": "合肥市"
+  },
+  {
+    "id": 109,
+    "parentId": 105,
+    "name": "包河区"
+  },
+  {
+    "id": 3255,
+    "parentId": 105,
+    "name": "巢湖市"
+  },
+  {
+    "id": 107,
+    "parentId": 105,
+    "name": "庐阳区"
+  },
+  {
+    "id": 106,
+    "parentId": 105,
+    "name": "瑶海区"
+  },
+  {
+    "id": 111,
+    "parentId": 105,
+    "name": "肥东县"
+  },
+  {
+    "id": 112,
+    "parentId": 105,
+    "name": "肥西县"
+  },
+  {
+    "id": 108,
+    "parentId": 105,
+    "name": "蜀山区"
+  },
+  {
+    "id": 110,
+    "parentId": 105,
+    "name": "长丰县"
+  },
+  {
+    "id": 113,
+    "parentId": 104,
+    "name": "安庆市"
+  },
+  {
+    "id": 115,
+    "parentId": 113,
+    "name": "大观区"
+  },
+  {
+    "id": 120,
+    "parentId": 113,
+    "name": "太湖县"
+  },
+  {
+    "id": 121,
+    "parentId": 113,
+    "name": "宿松县"
+  },
+  {
+    "id": 123,
+    "parentId": 113,
+    "name": "岳西县"
+  },
+  {
+    "id": 117,
+    "parentId": 113,
+    "name": "怀宁县"
+  },
+  {
+    "id": 122,
+    "parentId": 113,
+    "name": "望江县"
+  },
+  {
+    "id": 118,
+    "parentId": 113,
+    "name": "枞阳县"
+  },
+  {
+    "id": 124,
+    "parentId": 113,
+    "name": "桐城市"
+  },
+  {
+    "id": 119,
+    "parentId": 113,
+    "name": "潜山县"
+  },
+  {
+    "id": 114,
+    "parentId": 113,
+    "name": "迎江区"
+  },
+  {
+    "id": 116,
+    "parentId": 113,
+    "name": "郊区"
+  },
+  {
+    "id": 125,
+    "parentId": 104,
+    "name": "蚌埠市"
+  },
+  {
+    "id": 131,
+    "parentId": 125,
+    "name": "五河县"
+  },
+  {
+    "id": 132,
+    "parentId": 125,
+    "name": "固镇县"
+  },
+  {
+    "id": 130,
+    "parentId": 125,
+    "name": "怀远县"
+  },
+  {
+    "id": 129,
+    "parentId": 125,
+    "name": "淮上区"
+  },
+  {
+    "id": 128,
+    "parentId": 125,
+    "name": "禹会区"
+  },
+  {
+    "id": 127,
+    "parentId": 125,
+    "name": "蚌山区"
+  },
+  {
+    "id": 126,
+    "parentId": 125,
+    "name": "龙子湖区"
+  },
+  {
+    "id": 133,
+    "parentId": 104,
+    "name": "亳州市"
+  },
+  {
+    "id": 137,
+    "parentId": 133,
+    "name": "利辛县"
+  },
+  {
+    "id": 135,
+    "parentId": 133,
+    "name": "涡阳县"
+  },
+  {
+    "id": 136,
+    "parentId": 133,
+    "name": "蒙城县"
+  },
+  {
+    "id": 134,
+    "parentId": 133,
+    "name": "谯城区"
+  },
+  {
+    "id": 138,
+    "parentId": 104,
+    "name": "巢湖市"
+  },
+  {
+    "id": 142,
+    "parentId": 138,
+    "name": "含山县"
+  },
+  {
+    "id": 143,
+    "parentId": 138,
+    "name": "和县"
+  },
+  {
+    "id": 139,
+    "parentId": 138,
+    "name": "居巢区"
+  },
+  {
+    "id": 140,
+    "parentId": 138,
+    "name": "庐江县"
+  },
+  {
+    "id": 141,
+    "parentId": 138,
+    "name": "无为县"
+  },
+  {
+    "id": 144,
+    "parentId": 104,
+    "name": "池州市"
+  },
+  {
+    "id": 146,
+    "parentId": 144,
+    "name": "东至县"
+  },
+  {
+    "id": 147,
+    "parentId": 144,
+    "name": "石台县"
+  },
+  {
+    "id": 145,
+    "parentId": 144,
+    "name": "贵池区"
+  },
+  {
+    "id": 148,
+    "parentId": 144,
+    "name": "青阳县"
+  },
+  {
+    "id": 149,
+    "parentId": 104,
+    "name": "滁州市"
+  },
+  {
+    "id": 153,
+    "parentId": 149,
+    "name": "全椒县"
+  },
+  {
+    "id": 155,
+    "parentId": 149,
+    "name": "凤阳县"
+  },
+  {
+    "id": 151,
+    "parentId": 149,
+    "name": "南谯区"
+  },
+  {
+    "id": 156,
+    "parentId": 149,
+    "name": "天长市"
+  },
+  {
+    "id": 154,
+    "parentId": 149,
+    "name": "定远县"
+  },
+  {
+    "id": 157,
+    "parentId": 149,
+    "name": "明光市"
+  },
+  {
+    "id": 152,
+    "parentId": 149,
+    "name": "来安县"
+  },
+  {
+    "id": 150,
+    "parentId": 149,
+    "name": "琅琊区"
+  },
+  {
+    "id": 158,
+    "parentId": 104,
+    "name": "阜阳市"
+  },
+  {
+    "id": 162,
+    "parentId": 158,
+    "name": "临泉县"
+  },
+  {
+    "id": 163,
+    "parentId": 158,
+    "name": "太和县"
+  },
+  {
+    "id": 166,
+    "parentId": 158,
+    "name": "界首市"
+  },
+  {
+    "id": 164,
+    "parentId": 158,
+    "name": "阜南县"
+  },
+  {
+    "id": 165,
+    "parentId": 158,
+    "name": "颍上县"
+  },
+  {
+    "id": 160,
+    "parentId": 158,
+    "name": "颍东区"
+  },
+  {
+    "id": 159,
+    "parentId": 158,
+    "name": "颍州区"
+  },
+  {
+    "id": 161,
+    "parentId": 158,
+    "name": "颍泉区"
+  },
+  {
+    "id": 167,
+    "parentId": 104,
+    "name": "淮北市"
+  },
+  {
+    "id": 168,
+    "parentId": 167,
+    "name": "杜集区"
+  },
+  {
+    "id": 171,
+    "parentId": 167,
+    "name": "濉溪县"
+  },
+  {
+    "id": 170,
+    "parentId": 167,
+    "name": "烈山区"
+  },
+  {
+    "id": 169,
+    "parentId": 167,
+    "name": "相山区"
+  },
+  {
+    "id": 172,
+    "parentId": 104,
+    "name": "淮南市"
+  },
+  {
+    "id": 176,
+    "parentId": 172,
+    "name": "八公山区"
+  },
+  {
+    "id": 178,
+    "parentId": 172,
+    "name": "凤台县"
+  },
+  {
+    "id": 173,
+    "parentId": 172,
+    "name": "大通区"
+  },
+  {
+    "id": 177,
+    "parentId": 172,
+    "name": "潘集区"
+  },
+  {
+    "id": 174,
+    "parentId": 172,
+    "name": "田家庵区"
+  },
+  {
+    "id": 175,
+    "parentId": 172,
+    "name": "谢家集区"
+  },
+  {
+    "id": 179,
+    "parentId": 104,
+    "name": "黄山市"
+  },
+  {
+    "id": 184,
+    "parentId": 179,
+    "name": "休宁县"
+  },
+  {
+    "id": 180,
+    "parentId": 179,
+    "name": "屯溪区"
+  },
+  {
+    "id": 182,
+    "parentId": 179,
+    "name": "徽州区"
+  },
+  {
+    "id": 183,
+    "parentId": 179,
+    "name": "歙县"
+  },
+  {
+    "id": 186,
+    "parentId": 179,
+    "name": "祁门县"
+  },
+  {
+    "id": 181,
+    "parentId": 179,
+    "name": "黄山区"
+  },
+  {
+    "id": 185,
+    "parentId": 179,
+    "name": "黟县"
+  },
+  {
+    "id": 187,
+    "parentId": 104,
+    "name": "六安市"
+  },
+  {
+    "id": 190,
+    "parentId": 187,
+    "name": "寿县"
+  },
+  {
+    "id": 192,
+    "parentId": 187,
+    "name": "舒城县"
+  },
+  {
+    "id": 189,
+    "parentId": 187,
+    "name": "裕安区"
+  },
+  {
+    "id": 188,
+    "parentId": 187,
+    "name": "金安区"
+  },
+  {
+    "id": 193,
+    "parentId": 187,
+    "name": "金寨县"
+  },
+  {
+    "id": 194,
+    "parentId": 187,
+    "name": "霍山县"
+  },
+  {
+    "id": 191,
+    "parentId": 187,
+    "name": "霍邱县"
+  },
+  {
+    "id": 195,
+    "parentId": 104,
+    "name": "马鞍山市"
+  },
+  {
+    "id": 199,
+    "parentId": 195,
+    "name": "当涂县"
+  },
+  {
+    "id": 197,
+    "parentId": 195,
+    "name": "花山区"
+  },
+  {
+    "id": 196,
+    "parentId": 195,
+    "name": "金家庄区"
+  },
+  {
+    "id": 198,
+    "parentId": 195,
+    "name": "雨山区"
+  },
+  {
+    "id": 200,
+    "parentId": 104,
+    "name": "宿州市"
+  },
+  {
+    "id": 201,
+    "parentId": 200,
+    "name": "墉桥区"
+  },
+  {
+    "id": 205,
+    "parentId": 200,
+    "name": "泗县"
+  },
+  {
+    "id": 204,
+    "parentId": 200,
+    "name": "灵璧县"
+  },
+  {
+    "id": 202,
+    "parentId": 200,
+    "name": "砀山县"
+  },
+  {
+    "id": 203,
+    "parentId": 200,
+    "name": "萧县"
+  },
+  {
+    "id": 206,
+    "parentId": 104,
+    "name": "铜陵市"
+  },
+  {
+    "id": 208,
+    "parentId": 206,
+    "name": "狮子山区"
+  },
+  {
+    "id": 209,
+    "parentId": 206,
+    "name": "郊区"
+  },
+  {
+    "id": 207,
+    "parentId": 206,
+    "name": "铜官山区"
+  },
+  {
+    "id": 210,
+    "parentId": 206,
+    "name": "铜陵县"
+  },
+  {
+    "id": 211,
+    "parentId": 104,
+    "name": "芜湖市"
+  },
+  {
+    "id": 218,
+    "parentId": 211,
+    "name": "南陵县"
+  },
+  {
+    "id": 214,
+    "parentId": 211,
+    "name": "新芜区"
+  },
+  {
+    "id": 217,
+    "parentId": 211,
+    "name": "繁昌县"
+  },
+  {
+    "id": 216,
+    "parentId": 211,
+    "name": "芜湖县"
+  },
+  {
+    "id": 212,
+    "parentId": 211,
+    "name": "镜湖区"
+  },
+  {
+    "id": 213,
+    "parentId": 211,
+    "name": "马塘区"
+  },
+  {
+    "id": 215,
+    "parentId": 211,
+    "name": "鸠江区"
+  },
+  {
+    "id": 219,
+    "parentId": 104,
+    "name": "宣城市"
+  },
+  {
+    "id": 226,
+    "parentId": 219,
+    "name": "宁国市"
+  },
+  {
+    "id": 220,
+    "parentId": 219,
+    "name": "宣州区"
+  },
+  {
+    "id": 222,
+    "parentId": 219,
+    "name": "广德县"
+  },
+  {
+    "id": 225,
+    "parentId": 219,
+    "name": "旌德县"
+  },
+  {
+    "id": 223,
+    "parentId": 219,
+    "name": "泾县"
+  },
+  {
+    "id": 224,
+    "parentId": 219,
+    "name": "绩溪县"
+  },
+  {
+    "id": 221,
+    "parentId": 219,
+    "name": "郎溪县"
+  },
+  {
+    "id": 1176,
+    "parentId": null,
+    "name": "黑龙江"
+  },
+  {
+    "id": 1177,
+    "parentId": 1176,
+    "name": "哈尔滨市"
+  },
+  {
+    "id": 1196,
+    "parentId": 1177,
+    "name": "五常市"
+  },
+  {
+    "id": 1186,
+    "parentId": 1177,
+    "name": "依兰县"
+  },
+  {
+    "id": 1182,
+    "parentId": 1177,
+    "name": "动力区"
+  },
+  {
+    "id": 1179,
+    "parentId": 1177,
+    "name": "南岗区"
+  },
+  {
+    "id": 1194,
+    "parentId": 1177,
+    "name": "双城市"
+  },
+  {
+    "id": 1185,
+    "parentId": 1177,
+    "name": "呼兰区"
+  },
+  {
+    "id": 1188,
+    "parentId": 1177,
+    "name": "宾县"
+  },
+  {
+    "id": 1195,
+    "parentId": 1177,
+    "name": "尚志市"
+  },
+  {
+    "id": 1189,
+    "parentId": 1177,
+    "name": "巴彦县"
+  },
+  {
+    "id": 1183,
+    "parentId": 1177,
+    "name": "平房区"
+  },
+  {
+    "id": 1192,
+    "parentId": 1177,
+    "name": "延寿县"
+  },
+  {
+    "id": 1187,
+    "parentId": 1177,
+    "name": "方正县"
+  },
+  {
+    "id": 1190,
+    "parentId": 1177,
+    "name": "木兰县"
+  },
+  {
+    "id": 1184,
+    "parentId": 1177,
+    "name": "松北区"
+  },
+  {
+    "id": 1191,
+    "parentId": 1177,
+    "name": "通河县"
+  },
+  {
+    "id": 1180,
+    "parentId": 1177,
+    "name": "道外区"
+  },
+  {
+    "id": 1178,
+    "parentId": 1177,
+    "name": "道里区"
+  },
+  {
+    "id": 1193,
+    "parentId": 1177,
+    "name": "阿城市"
+  },
+  {
+    "id": 1181,
+    "parentId": 1177,
+    "name": "香坊区"
+  },
+  {
+    "id": 1197,
+    "parentId": 1176,
+    "name": "大庆市"
+  },
+  {
+    "id": 1202,
+    "parentId": 1197,
+    "name": "大同区"
+  },
+  {
+    "id": 1206,
+    "parentId": 1197,
+    "name": "杜尔伯特蒙古族自治县"
+  },
+  {
+    "id": 1205,
+    "parentId": 1197,
+    "name": "林甸县"
+  },
+  {
+    "id": 1201,
+    "parentId": 1197,
+    "name": "红岗区"
+  },
+  {
+    "id": 1203,
+    "parentId": 1197,
+    "name": "肇州县"
+  },
+  {
+    "id": 1204,
+    "parentId": 1197,
+    "name": "肇源县"
+  },
+  {
+    "id": 1198,
+    "parentId": 1197,
+    "name": "萨尔图区"
+  },
+  {
+    "id": 1200,
+    "parentId": 1197,
+    "name": "让胡路区"
+  },
+  {
+    "id": 1199,
+    "parentId": 1197,
+    "name": "龙凤区"
+  },
+  {
+    "id": 1207,
+    "parentId": 1176,
+    "name": "大兴安岭地区"
+  },
+  {
+    "id": 1208,
+    "parentId": 1207,
+    "name": "呼玛县"
+  },
+  {
+    "id": 1209,
+    "parentId": 1207,
+    "name": "塔河县"
+  },
+  {
+    "id": 1210,
+    "parentId": 1207,
+    "name": "漠河县"
+  },
+  {
+    "id": 1211,
+    "parentId": 1176,
+    "name": "鹤岗市"
+  },
+  {
+    "id": 1216,
+    "parentId": 1211,
+    "name": "东山区"
+  },
+  {
+    "id": 1215,
+    "parentId": 1211,
+    "name": "兴安区"
+  },
+  {
+    "id": 1217,
+    "parentId": 1211,
+    "name": "兴山区"
+  },
+  {
+    "id": 1214,
+    "parentId": 1211,
+    "name": "南山区"
+  },
+  {
+    "id": 1212,
+    "parentId": 1211,
+    "name": "向阳区"
+  },
+  {
+    "id": 1213,
+    "parentId": 1211,
+    "name": "工农区"
+  },
+  {
+    "id": 1219,
+    "parentId": 1211,
+    "name": "绥滨县"
+  },
+  {
+    "id": 1218,
+    "parentId": 1211,
+    "name": "萝北县"
+  },
+  {
+    "id": 1220,
+    "parentId": 1176,
+    "name": "黑河市"
+  },
+  {
+    "id": 1226,
+    "parentId": 1220,
+    "name": "五大连池市"
+  },
+  {
+    "id": 1225,
+    "parentId": 1220,
+    "name": "北安市"
+  },
+  {
+    "id": 1222,
+    "parentId": 1220,
+    "name": "嫩江县"
+  },
+  {
+    "id": 1224,
+    "parentId": 1220,
+    "name": "孙吴县"
+  },
+  {
+    "id": 1221,
+    "parentId": 1220,
+    "name": "爱辉区"
+  },
+  {
+    "id": 1223,
+    "parentId": 1220,
+    "name": "逊克县"
+  },
+  {
+    "id": 1227,
+    "parentId": 1176,
+    "name": "鸡西市"
+  },
+  {
+    "id": 1232,
+    "parentId": 1227,
+    "name": "城子河区"
+  },
+  {
+    "id": 1236,
+    "parentId": 1227,
+    "name": "密山市"
+  },
+  {
+    "id": 1229,
+    "parentId": 1227,
+    "name": "恒山区"
+  },
+  {
+    "id": 1231,
+    "parentId": 1227,
+    "name": "梨树区"
+  },
+  {
+    "id": 1230,
+    "parentId": 1227,
+    "name": "滴道区"
+  },
+  {
+    "id": 1235,
+    "parentId": 1227,
+    "name": "虎林市"
+  },
+  {
+    "id": 1234,
+    "parentId": 1227,
+    "name": "鸡东县"
+  },
+  {
+    "id": 1228,
+    "parentId": 1227,
+    "name": "鸡冠区"
+  },
+  {
+    "id": 1233,
+    "parentId": 1227,
+    "name": "麻山区"
+  },
+  {
+    "id": 1237,
+    "parentId": 1176,
+    "name": "佳木斯市"
+  },
+  {
+    "id": 1241,
+    "parentId": 1237,
+    "name": "东风区"
+  },
+  {
+    "id": 1240,
+    "parentId": 1237,
+    "name": "前进区"
+  },
+  {
+    "id": 1247,
+    "parentId": 1237,
+    "name": "同江市"
+  },
+  {
+    "id": 1239,
+    "parentId": 1237,
+    "name": "向阳区"
+  },
+  {
+    "id": 1248,
+    "parentId": 1237,
+    "name": "富锦市"
+  },
+  {
+    "id": 1246,
+    "parentId": 1237,
+    "name": "抚远县"
+  },
+  {
+    "id": 1243,
+    "parentId": 1237,
+    "name": "桦南县"
+  },
+  {
+    "id": 1244,
+    "parentId": 1237,
+    "name": "桦川县"
+  },
+  {
+    "id": 1238,
+    "parentId": 1237,
+    "name": "永红区"
+  },
+  {
+    "id": 1245,
+    "parentId": 1237,
+    "name": "汤原县"
+  },
+  {
+    "id": 1242,
+    "parentId": 1237,
+    "name": "郊区"
+  },
+  {
+    "id": 1249,
+    "parentId": 1176,
+    "name": "牡丹江市"
+  },
+  {
+    "id": 1254,
+    "parentId": 1249,
+    "name": "东宁县"
+  },
+  {
+    "id": 1250,
+    "parentId": 1249,
+    "name": "东安区"
+  },
+  {
+    "id": 1258,
+    "parentId": 1249,
+    "name": "宁安市"
+  },
+  {
+    "id": 1255,
+    "parentId": 1249,
+    "name": "林口县"
+  },
+  {
+    "id": 1257,
+    "parentId": 1249,
+    "name": "海林市"
+  },
+  {
+    "id": 1252,
+    "parentId": 1249,
+    "name": "爱民区"
+  },
+  {
+    "id": 1259,
+    "parentId": 1249,
+    "name": "穆棱市"
+  },
+  {
+    "id": 1256,
+    "parentId": 1249,
+    "name": "绥芬河市"
+  },
+  {
+    "id": 1253,
+    "parentId": 1249,
+    "name": "西安区"
+  },
+  {
+    "id": 1251,
+    "parentId": 1249,
+    "name": "阳明区"
+  },
+  {
+    "id": 1260,
+    "parentId": 1176,
+    "name": "七台河市"
+  },
+  {
+    "id": 1264,
+    "parentId": 1260,
+    "name": "勃利县"
+  },
+  {
+    "id": 1261,
+    "parentId": 1260,
+    "name": "新兴区"
+  },
+  {
+    "id": 1262,
+    "parentId": 1260,
+    "name": "桃山区"
+  },
+  {
+    "id": 1263,
+    "parentId": 1260,
+    "name": "茄子河区"
+  },
+  {
+    "id": 1265,
+    "parentId": 1176,
+    "name": "齐齐哈尔市"
+  },
+  {
+    "id": 1274,
+    "parentId": 1265,
+    "name": "依安县"
+  },
+  {
+    "id": 1279,
+    "parentId": 1265,
+    "name": "克东县"
+  },
+  {
+    "id": 1278,
+    "parentId": 1265,
+    "name": "克山县"
+  },
+  {
+    "id": 1270,
+    "parentId": 1265,
+    "name": "富拉尔基区"
+  },
+  {
+    "id": 1277,
+    "parentId": 1265,
+    "name": "富裕县"
+  },
+  {
+    "id": 1267,
+    "parentId": 1265,
+    "name": "建华区"
+  },
+  {
+    "id": 1280,
+    "parentId": 1265,
+    "name": "拜泉县"
+  },
+  {
+    "id": 1269,
+    "parentId": 1265,
+    "name": "昂昂溪区"
+  },
+  {
+    "id": 1272,
+    "parentId": 1265,
+    "name": "梅里斯达斡尔族区"
+  },
+  {
+    "id": 1275,
+    "parentId": 1265,
+    "name": "泰来县"
+  },
+  {
+    "id": 1276,
+    "parentId": 1265,
+    "name": "甘南县"
+  },
+  {
+    "id": 1271,
+    "parentId": 1265,
+    "name": "碾子山区"
+  },
+  {
+    "id": 1281,
+    "parentId": 1265,
+    "name": "讷河市"
+  },
+  {
+    "id": 1268,
+    "parentId": 1265,
+    "name": "铁锋区"
+  },
+  {
+    "id": 1273,
+    "parentId": 1265,
+    "name": "龙江县"
+  },
+  {
+    "id": 1266,
+    "parentId": 1265,
+    "name": "龙沙区"
+  },
+  {
+    "id": 1282,
+    "parentId": 1176,
+    "name": "双鸭山市"
+  },
+  {
+    "id": 1288,
+    "parentId": 1282,
+    "name": "友谊县"
+  },
+  {
+    "id": 1285,
+    "parentId": 1282,
+    "name": "四方台区"
+  },
+  {
+    "id": 1286,
+    "parentId": 1282,
+    "name": "宝山区"
+  },
+  {
+    "id": 1289,
+    "parentId": 1282,
+    "name": "宝清县"
+  },
+  {
+    "id": 1283,
+    "parentId": 1282,
+    "name": "尖山区"
+  },
+  {
+    "id": 1284,
+    "parentId": 1282,
+    "name": "岭东区"
+  },
+  {
+    "id": 1287,
+    "parentId": 1282,
+    "name": "集贤县"
+  },
+  {
+    "id": 1290,
+    "parentId": 1282,
+    "name": "饶河县"
+  },
+  {
+    "id": 1291,
+    "parentId": 1176,
+    "name": "绥化市"
+  },
+  {
+    "id": 1294,
+    "parentId": 1291,
+    "name": "兰西县"
+  },
+  {
+    "id": 1292,
+    "parentId": 1291,
+    "name": "北林区"
+  },
+  {
+    "id": 1299,
+    "parentId": 1291,
+    "name": "安达市"
+  },
+  {
+    "id": 1296,
+    "parentId": 1291,
+    "name": "庆安县"
+  },
+  {
+    "id": 1297,
+    "parentId": 1291,
+    "name": "明水县"
+  },
+  {
+    "id": 1293,
+    "parentId": 1291,
+    "name": "望奎县"
+  },
+  {
+    "id": 1301,
+    "parentId": 1291,
+    "name": "海伦市"
+  },
+  {
+    "id": 1298,
+    "parentId": 1291,
+    "name": "绥棱县"
+  },
+  {
+    "id": 1300,
+    "parentId": 1291,
+    "name": "肇东市"
+  },
+  {
+    "id": 1295,
+    "parentId": 1291,
+    "name": "青冈县"
+  },
+  {
+    "id": 1302,
+    "parentId": 1176,
+    "name": "伊春市"
+  },
+  {
+    "id": 1317,
+    "parentId": 1302,
+    "name": "上甘岭区"
+  },
+  {
+    "id": 1315,
+    "parentId": 1302,
+    "name": "乌伊岭区"
+  },
+  {
+    "id": 1312,
+    "parentId": 1302,
+    "name": "乌马河区"
+  },
+  {
+    "id": 1311,
+    "parentId": 1302,
+    "name": "五营区"
+  },
+  {
+    "id": 1303,
+    "parentId": 1302,
+    "name": "伊春区"
+  },
+  {
+    "id": 1304,
+    "parentId": 1302,
+    "name": "南岔区"
+  },
+  {
+    "id": 1305,
+    "parentId": 1302,
+    "name": "友好区"
+  },
+  {
+    "id": 1318,
+    "parentId": 1302,
+    "name": "嘉荫县"
+  },
+  {
+    "id": 1314,
+    "parentId": 1302,
+    "name": "带岭区"
+  },
+  {
+    "id": 1308,
+    "parentId": 1302,
+    "name": "新青区"
+  },
+  {
+    "id": 1313,
+    "parentId": 1302,
+    "name": "汤旺河区"
+  },
+  {
+    "id": 1316,
+    "parentId": 1302,
+    "name": "红星区"
+  },
+  {
+    "id": 1309,
+    "parentId": 1302,
+    "name": "美溪区"
+  },
+  {
+    "id": 1307,
+    "parentId": 1302,
+    "name": "翠峦区"
+  },
+  {
+    "id": 1306,
+    "parentId": 1302,
+    "name": "西林区"
+  },
+  {
+    "id": 1310,
+    "parentId": 1302,
+    "name": "金山屯区"
+  },
+  {
+    "id": 1319,
+    "parentId": 1302,
+    "name": "铁力市"
+  },
+  {
+    "id": 1320,
+    "parentId": null,
+    "name": "湖北"
+  },
+  {
+    "id": 1321,
+    "parentId": 1320,
+    "name": "武汉市"
+  },
+  {
+    "id": 1329,
+    "parentId": 1321,
+    "name": "东西湖区"
+  },
+  {
+    "id": 1334,
+    "parentId": 1321,
+    "name": "新洲区"
+  },
+  {
+    "id": 1326,
+    "parentId": 1321,
+    "name": "武昌区"
+  },
+  {
+    "id": 1330,
+    "parentId": 1321,
+    "name": "汉南区"
+  },
+  {
+    "id": 1325,
+    "parentId": 1321,
+    "name": "汉阳区"
+  },
+  {
+    "id": 1332,
+    "parentId": 1321,
+    "name": "江夏区"
+  },
+  {
+    "id": 1322,
+    "parentId": 1321,
+    "name": "江岸区"
+  },
+  {
+    "id": 1323,
+    "parentId": 1321,
+    "name": "江汉区"
+  },
+  {
+    "id": 1328,
+    "parentId": 1321,
+    "name": "洪山区"
+  },
+  {
+    "id": 1324,
+    "parentId": 1321,
+    "name": "硚口区"
+  },
+  {
+    "id": 1331,
+    "parentId": 1321,
+    "name": "蔡甸区"
+  },
+  {
+    "id": 1327,
+    "parentId": 1321,
+    "name": "青山区"
+  },
+  {
+    "id": 1333,
+    "parentId": 1321,
+    "name": "黄陂区"
+  },
+  {
+    "id": 1335,
+    "parentId": 1320,
+    "name": "鄂州市"
+  },
+  {
+    "id": 1337,
+    "parentId": 1335,
+    "name": "华容区"
+  },
+  {
+    "id": 1336,
+    "parentId": 1335,
+    "name": "梁子湖区"
+  },
+  {
+    "id": 1338,
+    "parentId": 1335,
+    "name": "鄂城区"
+  },
+  {
+    "id": 1339,
+    "parentId": 1320,
+    "name": "恩施土家族苗族自治州"
+  },
+  {
+    "id": 1341,
+    "parentId": 1339,
+    "name": "利川市"
+  },
+  {
+    "id": 1345,
+    "parentId": 1339,
+    "name": "咸丰县"
+  },
+  {
+    "id": 1344,
+    "parentId": 1339,
+    "name": "宣恩县"
+  },
+  {
+    "id": 1343,
+    "parentId": 1339,
+    "name": "巴东县"
+  },
+  {
+    "id": 1342,
+    "parentId": 1339,
+    "name": "建始县"
+  },
+  {
+    "id": 1340,
+    "parentId": 1339,
+    "name": "恩施市"
+  },
+  {
+    "id": 1346,
+    "parentId": 1339,
+    "name": "来凤县"
+  },
+  {
+    "id": 1347,
+    "parentId": 1339,
+    "name": "鹤峰县"
+  },
+  {
+    "id": 1348,
+    "parentId": 1320,
+    "name": "黄冈市"
+  },
+  {
+    "id": 1350,
+    "parentId": 1348,
+    "name": "团风县"
+  },
+  {
+    "id": 1358,
+    "parentId": 1348,
+    "name": "武穴市"
+  },
+  {
+    "id": 1354,
+    "parentId": 1348,
+    "name": "浠水县"
+  },
+  {
+    "id": 1351,
+    "parentId": 1348,
+    "name": "红安县"
+  },
+  {
+    "id": 1352,
+    "parentId": 1348,
+    "name": "罗田县"
+  },
+  {
+    "id": 1353,
+    "parentId": 1348,
+    "name": "英山县"
+  },
+  {
+    "id": 1355,
+    "parentId": 1348,
+    "name": "蕲春县"
+  },
+  {
+    "id": 1357,
+    "parentId": 1348,
+    "name": "麻城市"
+  },
+  {
+    "id": 1349,
+    "parentId": 1348,
+    "name": "黄州区"
+  },
+  {
+    "id": 1356,
+    "parentId": 1348,
+    "name": "黄梅县"
+  },
+  {
+    "id": 1359,
+    "parentId": 1320,
+    "name": "黄石市"
+  },
+  {
+    "id": 1362,
+    "parentId": 1359,
+    "name": "下陆区"
+  },
+  {
+    "id": 1365,
+    "parentId": 1359,
+    "name": "大冶市"
+  },
+  {
+    "id": 1361,
+    "parentId": 1359,
+    "name": "西塞山区"
+  },
+  {
+    "id": 1363,
+    "parentId": 1359,
+    "name": "铁山区"
+  },
+  {
+    "id": 1364,
+    "parentId": 1359,
+    "name": "阳新县"
+  },
+  {
+    "id": 1360,
+    "parentId": 1359,
+    "name": "黄石港区"
+  },
+  {
+    "id": 1366,
+    "parentId": 1320,
+    "name": "荆门市"
+  },
+  {
+    "id": 1367,
+    "parentId": 1366,
+    "name": "东宝区"
+  },
+  {
+    "id": 1369,
+    "parentId": 1366,
+    "name": "京山县"
+  },
+  {
+    "id": 1368,
+    "parentId": 1366,
+    "name": "掇刀区"
+  },
+  {
+    "id": 1370,
+    "parentId": 1366,
+    "name": "沙洋县"
+  },
+  {
+    "id": 1371,
+    "parentId": 1366,
+    "name": "钟祥市"
+  },
+  {
+    "id": 1372,
+    "parentId": 1320,
+    "name": "荆州市"
+  },
+  {
+    "id": 1375,
+    "parentId": 1372,
+    "name": "公安县"
+  },
+  {
+    "id": 1380,
+    "parentId": 1372,
+    "name": "松滋市"
+  },
+  {
+    "id": 1377,
+    "parentId": 1372,
+    "name": "江陵县"
+  },
+  {
+    "id": 1373,
+    "parentId": 1372,
+    "name": "沙市区"
+  },
+  {
+    "id": 1379,
+    "parentId": 1372,
+    "name": "洪湖市"
+  },
+  {
+    "id": 1376,
+    "parentId": 1372,
+    "name": "监利县"
+  },
+  {
+    "id": 1378,
+    "parentId": 1372,
+    "name": "石首市"
+  },
+  {
+    "id": 1374,
+    "parentId": 1372,
+    "name": "荆州区"
+  },
+  {
+    "id": 1383,
+    "parentId": 1320,
+    "name": "十堰市"
+  },
+  {
+    "id": 1391,
+    "parentId": 1383,
+    "name": "丹江口市"
+  },
+  {
+    "id": 1385,
+    "parentId": 1383,
+    "name": "张湾区"
+  },
+  {
+    "id": 1390,
+    "parentId": 1383,
+    "name": "房县"
+  },
+  {
+    "id": 1388,
+    "parentId": 1383,
+    "name": "竹山县"
+  },
+  {
+    "id": 1389,
+    "parentId": 1383,
+    "name": "竹溪县"
+  },
+  {
+    "id": 1384,
+    "parentId": 1383,
+    "name": "茅箭区"
+  },
+  {
+    "id": 1386,
+    "parentId": 1383,
+    "name": "郧县"
+  },
+  {
+    "id": 1387,
+    "parentId": 1383,
+    "name": "郧西县"
+  },
+  {
+    "id": 1392,
+    "parentId": 1320,
+    "name": "随州市"
+  },
+  {
+    "id": 1394,
+    "parentId": 1392,
+    "name": "广水市"
+  },
+  {
+    "id": 1393,
+    "parentId": 1392,
+    "name": "曾都区"
+  },
+  {
+    "id": 1397,
+    "parentId": 1320,
+    "name": "咸宁市"
+  },
+  {
+    "id": 1398,
+    "parentId": 1397,
+    "name": "咸安区"
+  },
+  {
+    "id": 1399,
+    "parentId": 1397,
+    "name": "嘉鱼县"
+  },
+  {
+    "id": 1401,
+    "parentId": 1397,
+    "name": "崇阳县"
+  },
+  {
+    "id": 1403,
+    "parentId": 1397,
+    "name": "赤壁市"
+  },
+  {
+    "id": 1400,
+    "parentId": 1397,
+    "name": "通城县"
+  },
+  {
+    "id": 1402,
+    "parentId": 1397,
+    "name": "通山县"
+  },
+  {
+    "id": 1404,
+    "parentId": 1320,
+    "name": "襄樊市"
+  },
+  {
+    "id": 1410,
+    "parentId": 1404,
+    "name": "保康县"
+  },
+  {
+    "id": 1408,
+    "parentId": 1404,
+    "name": "南漳县"
+  },
+  {
+    "id": 1413,
+    "parentId": 1404,
+    "name": "宜城市"
+  },
+  {
+    "id": 1412,
+    "parentId": 1404,
+    "name": "枣阳市"
+  },
+  {
+    "id": 1406,
+    "parentId": 1404,
+    "name": "樊城区"
+  },
+  {
+    "id": 1411,
+    "parentId": 1404,
+    "name": "老河口市"
+  },
+  {
+    "id": 1405,
+    "parentId": 1404,
+    "name": "襄城区"
+  },
+  {
+    "id": 1407,
+    "parentId": 1404,
+    "name": "襄阳区"
+  },
+  {
+    "id": 1409,
+    "parentId": 1404,
+    "name": "谷城县"
+  },
+  {
+    "id": 1414,
+    "parentId": 1320,
+    "name": "孝感市"
+  },
+  {
+    "id": 1418,
+    "parentId": 1414,
+    "name": "云梦县"
+  },
+  {
+    "id": 1417,
+    "parentId": 1414,
+    "name": "大悟县"
+  },
+  {
+    "id": 1415,
+    "parentId": 1414,
+    "name": "孝南区"
+  },
+  {
+    "id": 1416,
+    "parentId": 1414,
+    "name": "孝昌县"
+  },
+  {
+    "id": 1420,
+    "parentId": 1414,
+    "name": "安陆市"
+  },
+  {
+    "id": 1419,
+    "parentId": 1414,
+    "name": "应城市"
+  },
+  {
+    "id": 1421,
+    "parentId": 1414,
+    "name": "汉川市"
+  },
+  {
+    "id": 1422,
+    "parentId": 1320,
+    "name": "宜昌市"
+  },
+  {
+    "id": 1432,
+    "parentId": 1422,
+    "name": "五峰土家族自治县"
+  },
+  {
+    "id": 1424,
+    "parentId": 1422,
+    "name": "伍家岗区"
+  },
+  {
+    "id": 1429,
+    "parentId": 1422,
+    "name": "兴山县"
+  },
+  {
+    "id": 1427,
+    "parentId": 1422,
+    "name": "夷陵区"
+  },
+  {
+    "id": 1433,
+    "parentId": 1422,
+    "name": "宜都市"
+  },
+  {
+    "id": 1434,
+    "parentId": 1422,
+    "name": "当阳市"
+  },
+  {
+    "id": 1435,
+    "parentId": 1422,
+    "name": "枝江市"
+  },
+  {
+    "id": 1425,
+    "parentId": 1422,
+    "name": "点军区"
+  },
+  {
+    "id": 1426,
+    "parentId": 1422,
+    "name": "猇亭区"
+  },
+  {
+    "id": 1430,
+    "parentId": 1422,
+    "name": "秭归县"
+  },
+  {
+    "id": 1423,
+    "parentId": 1422,
+    "name": "西陵区"
+  },
+  {
+    "id": 1428,
+    "parentId": 1422,
+    "name": "远安县"
+  },
+  {
+    "id": 1431,
+    "parentId": 1422,
+    "name": "长阳土家族自治县"
+  },
+  {
+    "id": 1436,
+    "parentId": null,
+    "name": "湖南"
+  },
+  {
+    "id": 1437,
+    "parentId": 1436,
+    "name": "长沙市"
+  },
+  {
+    "id": 1439,
+    "parentId": 1437,
+    "name": "天心区"
+  },
+  {
+    "id": 1445,
+    "parentId": 1437,
+    "name": "宁乡县"
+  },
+  {
+    "id": 1440,
+    "parentId": 1437,
+    "name": "岳麓区"
+  },
+  {
+    "id": 1441,
+    "parentId": 1437,
+    "name": "开福区"
+  },
+  {
+    "id": 1444,
+    "parentId": 1437,
+    "name": "望城县"
+  },
+  {
+    "id": 1446,
+    "parentId": 1437,
+    "name": "浏阳市"
+  },
+  {
+    "id": 1438,
+    "parentId": 1437,
+    "name": "芙蓉区"
+  },
+  {
+    "id": 1443,
+    "parentId": 1437,
+    "name": "长沙县"
+  },
+  {
+    "id": 1442,
+    "parentId": 1437,
+    "name": "雨花区"
+  },
+  {
+    "id": 1447,
+    "parentId": 1436,
+    "name": "常德市"
+  },
+  {
+    "id": 1453,
+    "parentId": 1447,
+    "name": "临澧县"
+  },
+  {
+    "id": 1450,
+    "parentId": 1447,
+    "name": "安乡县"
+  },
+  {
+    "id": 1454,
+    "parentId": 1447,
+    "name": "桃源县"
+  },
+  {
+    "id": 1448,
+    "parentId": 1447,
+    "name": "武陵区"
+  },
+  {
+    "id": 1451,
+    "parentId": 1447,
+    "name": "汉寿县"
+  },
+  {
+    "id": 1456,
+    "parentId": 1447,
+    "name": "津市市"
+  },
+  {
+    "id": 1452,
+    "parentId": 1447,
+    "name": "澧县"
+  },
+  {
+    "id": 1455,
+    "parentId": 1447,
+    "name": "石门县"
+  },
+  {
+    "id": 1449,
+    "parentId": 1447,
+    "name": "鼎城区"
+  },
+  {
+    "id": 1457,
+    "parentId": 1436,
+    "name": "郴州市"
+  },
+  {
+    "id": 1464,
+    "parentId": 1457,
+    "name": "临武县"
+  },
+  {
+    "id": 1458,
+    "parentId": 1457,
+    "name": "北湖区"
+  },
+  {
+    "id": 1463,
+    "parentId": 1457,
+    "name": "嘉禾县"
+  },
+  {
+    "id": 1467,
+    "parentId": 1457,
+    "name": "安仁县"
+  },
+  {
+    "id": 1461,
+    "parentId": 1457,
+    "name": "宜章县"
+  },
+  {
+    "id": 1466,
+    "parentId": 1457,
+    "name": "桂东县"
+  },
+  {
+    "id": 1460,
+    "parentId": 1457,
+    "name": "桂阳县"
+  },
+  {
+    "id": 1462,
+    "parentId": 1457,
+    "name": "永兴县"
+  },
+  {
+    "id": 1465,
+    "parentId": 1457,
+    "name": "汝城县"
+  },
+  {
+    "id": 1459,
+    "parentId": 1457,
+    "name": "苏仙区"
+  },
+  {
+    "id": 1468,
+    "parentId": 1457,
+    "name": "资兴市"
+  },
+  {
+    "id": 1469,
+    "parentId": 1436,
+    "name": "衡阳市"
+  },
+  {
+    "id": 1474,
+    "parentId": 1469,
+    "name": "南岳区"
+  },
+  {
+    "id": 1481,
+    "parentId": 1469,
+    "name": "常宁市"
+  },
+  {
+    "id": 1470,
+    "parentId": 1469,
+    "name": "珠晖区"
+  },
+  {
+    "id": 1472,
+    "parentId": 1469,
+    "name": "石鼓区"
+  },
+  {
+    "id": 1479,
+    "parentId": 1469,
+    "name": "祁东县"
+  },
+  {
+    "id": 1480,
+    "parentId": 1469,
+    "name": "耒阳市"
+  },
+  {
+    "id": 1473,
+    "parentId": 1469,
+    "name": "蒸湘区"
+  },
+  {
+    "id": 1478,
+    "parentId": 1469,
+    "name": "衡东县"
+  },
+  {
+    "id": 1476,
+    "parentId": 1469,
+    "name": "衡南县"
+  },
+  {
+    "id": 1477,
+    "parentId": 1469,
+    "name": "衡山县"
+  },
+  {
+    "id": 1475,
+    "parentId": 1469,
+    "name": "衡阳县"
+  },
+  {
+    "id": 1471,
+    "parentId": 1469,
+    "name": "雁峰区"
+  },
+  {
+    "id": 1482,
+    "parentId": 1436,
+    "name": "怀化市"
+  },
+  {
+    "id": 1484,
+    "parentId": 1482,
+    "name": "中方县"
+  },
+  {
+    "id": 1488,
+    "parentId": 1482,
+    "name": "会同县"
+  },
+  {
+    "id": 1490,
+    "parentId": 1482,
+    "name": "新晃侗族自治县"
+  },
+  {
+    "id": 1485,
+    "parentId": 1482,
+    "name": "沅陵县"
+  },
+  {
+    "id": 1494,
+    "parentId": 1482,
+    "name": "洪江市"
+  },
+  {
+    "id": 1487,
+    "parentId": 1482,
+    "name": "溆浦县"
+  },
+  {
+    "id": 1491,
+    "parentId": 1482,
+    "name": "芷江侗族自治县"
+  },
+  {
+    "id": 1486,
+    "parentId": 1482,
+    "name": "辰溪县"
+  },
+  {
+    "id": 1493,
+    "parentId": 1482,
+    "name": "通道侗族自治县"
+  },
+  {
+    "id": 1492,
+    "parentId": 1482,
+    "name": "靖州苗族侗族自治县"
+  },
+  {
+    "id": 1483,
+    "parentId": 1482,
+    "name": "鹤城区"
+  },
+  {
+    "id": 1489,
+    "parentId": 1482,
+    "name": "麻阳苗族自治县"
+  },
+  {
+    "id": 1495,
+    "parentId": 1436,
+    "name": "娄底市"
+  },
+  {
+    "id": 1499,
+    "parentId": 1495,
+    "name": "冷水江市"
+  },
+  {
+    "id": 1497,
+    "parentId": 1495,
+    "name": "双峰县"
+  },
+  {
+    "id": 1496,
+    "parentId": 1495,
+    "name": "娄星区"
+  },
+  {
+    "id": 1498,
+    "parentId": 1495,
+    "name": "新化县"
+  },
+  {
+    "id": 1500,
+    "parentId": 1495,
+    "name": "涟源市"
+  },
+  {
+    "id": 1501,
+    "parentId": 1436,
+    "name": "邵阳市"
+  },
+  {
+    "id": 1504,
+    "parentId": 1501,
+    "name": "北塔区"
+  },
+  {
+    "id": 1502,
+    "parentId": 1501,
+    "name": "双清区"
+  },
+  {
+    "id": 1512,
+    "parentId": 1501,
+    "name": "城步苗族自治县"
+  },
+  {
+    "id": 1503,
+    "parentId": 1501,
+    "name": "大祥区"
+  },
+  {
+    "id": 1511,
+    "parentId": 1501,
+    "name": "新宁县"
+  },
+  {
+    "id": 1506,
+    "parentId": 1501,
+    "name": "新邵县"
+  },
+  {
+    "id": 1513,
+    "parentId": 1501,
+    "name": "武冈市"
+  },
+  {
+    "id": 1509,
+    "parentId": 1501,
+    "name": "洞口县"
+  },
+  {
+    "id": 1510,
+    "parentId": 1501,
+    "name": "绥宁县"
+  },
+  {
+    "id": 1505,
+    "parentId": 1501,
+    "name": "邵东县"
+  },
+  {
+    "id": 1507,
+    "parentId": 1501,
+    "name": "邵阳县"
+  },
+  {
+    "id": 1508,
+    "parentId": 1501,
+    "name": "隆回县"
+  },
+  {
+    "id": 1514,
+    "parentId": 1436,
+    "name": "湘潭市"
+  },
+  {
+    "id": 1516,
+    "parentId": 1514,
+    "name": "岳塘区"
+  },
+  {
+    "id": 1518,
+    "parentId": 1514,
+    "name": "湘乡市"
+  },
+  {
+    "id": 1517,
+    "parentId": 1514,
+    "name": "湘潭县"
+  },
+  {
+    "id": 1515,
+    "parentId": 1514,
+    "name": "雨湖区"
+  },
+  {
+    "id": 1519,
+    "parentId": 1514,
+    "name": "韶山市"
+  },
+  {
+    "id": 1520,
+    "parentId": 1436,
+    "name": "湘西土家族苗族自治州"
+  },
+  {
+    "id": 1525,
+    "parentId": 1520,
+    "name": "保靖县"
+  },
+  {
+    "id": 1523,
+    "parentId": 1520,
+    "name": "凤凰县"
+  },
+  {
+    "id": 1526,
+    "parentId": 1520,
+    "name": "古丈县"
+  },
+  {
+    "id": 1521,
+    "parentId": 1520,
+    "name": "吉首市"
+  },
+  {
+    "id": 1527,
+    "parentId": 1520,
+    "name": "永顺县"
+  },
+  {
+    "id": 1522,
+    "parentId": 1520,
+    "name": "泸溪县"
+  },
+  {
+    "id": 1524,
+    "parentId": 1520,
+    "name": "花垣县"
+  },
+  {
+    "id": 1528,
+    "parentId": 1520,
+    "name": "龙山县"
+  },
+  {
+    "id": 1529,
+    "parentId": 1436,
+    "name": "益阳市"
+  },
+  {
+    "id": 1532,
+    "parentId": 1529,
+    "name": "南县"
+  },
+  {
+    "id": 1534,
+    "parentId": 1529,
+    "name": "安化县"
+  },
+  {
+    "id": 1533,
+    "parentId": 1529,
+    "name": "桃江县"
+  },
+  {
+    "id": 1535,
+    "parentId": 1529,
+    "name": "沅江市"
+  },
+  {
+    "id": 1530,
+    "parentId": 1529,
+    "name": "资阳区"
+  },
+  {
+    "id": 1531,
+    "parentId": 1529,
+    "name": "赫山区"
+  },
+  {
+    "id": 1536,
+    "parentId": 1436,
+    "name": "永州市"
+  },
+  {
+    "id": 1540,
+    "parentId": 1536,
+    "name": "东安县"
+  },
+  {
+    "id": 1538,
+    "parentId": 1536,
+    "name": "冷水滩区"
+  },
+  {
+    "id": 1541,
+    "parentId": 1536,
+    "name": "双牌县"
+  },
+  {
+    "id": 1544,
+    "parentId": 1536,
+    "name": "宁远县"
+  },
+  {
+    "id": 1546,
+    "parentId": 1536,
+    "name": "新田县"
+  },
+  {
+    "id": 1547,
+    "parentId": 1536,
+    "name": "江华瑶族自治县"
+  },
+  {
+    "id": 1543,
+    "parentId": 1536,
+    "name": "江永县"
+  },
+  {
+    "id": 1539,
+    "parentId": 1536,
+    "name": "祁阳县"
+  },
+  {
+    "id": 1537,
+    "parentId": 1536,
+    "name": "芝山区"
+  },
+  {
+    "id": 1545,
+    "parentId": 1536,
+    "name": "蓝山县"
+  },
+  {
+    "id": 1542,
+    "parentId": 1536,
+    "name": "道县"
+  },
+  {
+    "id": 1548,
+    "parentId": 1436,
+    "name": "岳阳市"
+  },
+  {
+    "id": 1557,
+    "parentId": 1548,
+    "name": "临湘市"
+  },
+  {
+    "id": 1550,
+    "parentId": 1548,
+    "name": "云溪区"
+  },
+  {
+    "id": 1553,
+    "parentId": 1548,
+    "name": "华容县"
+  },
+  {
+    "id": 1551,
+    "parentId": 1548,
+    "name": "君山区"
+  },
+  {
+    "id": 1552,
+    "parentId": 1548,
+    "name": "岳阳县"
+  },
+  {
+    "id": 1549,
+    "parentId": 1548,
+    "name": "岳阳楼区"
+  },
+  {
+    "id": 1555,
+    "parentId": 1548,
+    "name": "平江县"
+  },
+  {
+    "id": 1556,
+    "parentId": 1548,
+    "name": "汨罗市"
+  },
+  {
+    "id": 1554,
+    "parentId": 1548,
+    "name": "湘阴县"
+  },
+  {
+    "id": 1558,
+    "parentId": 1436,
+    "name": "张家界市"
+  },
+  {
+    "id": 1561,
+    "parentId": 1558,
+    "name": "慈利县"
+  },
+  {
+    "id": 1562,
+    "parentId": 1558,
+    "name": "桑植县"
+  },
+  {
+    "id": 1560,
+    "parentId": 1558,
+    "name": "武陵源区"
+  },
+  {
+    "id": 1559,
+    "parentId": 1558,
+    "name": "永定区"
+  },
+  {
+    "id": 1563,
+    "parentId": 1436,
+    "name": "株洲市"
+  },
+  {
+    "id": 1567,
+    "parentId": 1563,
+    "name": "天元区"
+  },
+  {
+    "id": 1569,
+    "parentId": 1563,
+    "name": "攸县"
+  },
+  {
+    "id": 1568,
+    "parentId": 1563,
+    "name": "株洲县"
+  },
+  {
+    "id": 1571,
+    "parentId": 1563,
+    "name": "炎陵县"
+  },
+  {
+    "id": 1566,
+    "parentId": 1563,
+    "name": "石峰区"
+  },
+  {
+    "id": 1565,
+    "parentId": 1563,
+    "name": "芦淞区"
+  },
+  {
+    "id": 1570,
+    "parentId": 1563,
+    "name": "茶陵县"
+  },
+  {
+    "id": 1564,
+    "parentId": 1563,
+    "name": "荷塘区"
+  },
+  {
+    "id": 1572,
+    "parentId": 1563,
+    "name": "醴陵市"
+  },
+  {
+    "id": 1573,
+    "parentId": null,
+    "name": "吉林"
+  },
+  {
+    "id": 1574,
+    "parentId": 1573,
+    "name": "长春市"
+  },
+  {
+    "id": 1582,
+    "parentId": 1574,
+    "name": "九台市"
+  },
+  {
+    "id": 1578,
+    "parentId": 1574,
+    "name": "二道区"
+  },
+  {
+    "id": 1581,
+    "parentId": 1574,
+    "name": "农安县"
+  },
+  {
+    "id": 1575,
+    "parentId": 1574,
+    "name": "南关区"
+  },
+  {
+    "id": 1580,
+    "parentId": 1574,
+    "name": "双阳区"
+  },
+  {
+    "id": 1576,
+    "parentId": 1574,
+    "name": "宽城区"
+  },
+  {
+    "id": 1584,
+    "parentId": 1574,
+    "name": "德惠市"
+  },
+  {
+    "id": 1577,
+    "parentId": 1574,
+    "name": "朝阳区"
+  },
+  {
+    "id": 1583,
+    "parentId": 1574,
+    "name": "榆树市"
+  },
+  {
+    "id": 1579,
+    "parentId": 1574,
+    "name": "绿园区"
+  },
+  {
+    "id": 1585,
+    "parentId": 1573,
+    "name": "白城市"
+  },
+  {
+    "id": 1590,
+    "parentId": 1585,
+    "name": "大安市"
+  },
+  {
+    "id": 1586,
+    "parentId": 1585,
+    "name": "洮北区"
+  },
+  {
+    "id": 1589,
+    "parentId": 1585,
+    "name": "洮南市"
+  },
+  {
+    "id": 1588,
+    "parentId": 1585,
+    "name": "通榆县"
+  },
+  {
+    "id": 1587,
+    "parentId": 1585,
+    "name": "镇赉县"
+  },
+  {
+    "id": 1591,
+    "parentId": 1573,
+    "name": "白山市"
+  },
+  {
+    "id": 1597,
+    "parentId": 1591,
+    "name": "临江市"
+  },
+  {
+    "id": 1592,
+    "parentId": 1591,
+    "name": "八道江区"
+  },
+  {
+    "id": 1593,
+    "parentId": 1591,
+    "name": "抚松县"
+  },
+  {
+    "id": 1596,
+    "parentId": 1591,
+    "name": "江源县"
+  },
+  {
+    "id": 1595,
+    "parentId": 1591,
+    "name": "长白朝鲜族自治县"
+  },
+  {
+    "id": 1594,
+    "parentId": 1591,
+    "name": "靖宇县"
+  },
+  {
+    "id": 1598,
+    "parentId": 1573,
+    "name": "吉林市"
+  },
+  {
+    "id": 1602,
+    "parentId": 1598,
+    "name": "丰满区"
+  },
+  {
+    "id": 1599,
+    "parentId": 1598,
+    "name": "昌邑区"
+  },
+  {
+    "id": 1605,
+    "parentId": 1598,
+    "name": "桦甸市"
+  },
+  {
+    "id": 1603,
+    "parentId": 1598,
+    "name": "永吉县"
+  },
+  {
+    "id": 1607,
+    "parentId": 1598,
+    "name": "磐石市"
+  },
+  {
+    "id": 1606,
+    "parentId": 1598,
+    "name": "舒兰市"
+  },
+  {
+    "id": 1601,
+    "parentId": 1598,
+    "name": "船营区"
+  },
+  {
+    "id": 1604,
+    "parentId": 1598,
+    "name": "蛟河市"
+  },
+  {
+    "id": 1600,
+    "parentId": 1598,
+    "name": "龙潭区"
+  },
+  {
+    "id": 1608,
+    "parentId": 1573,
+    "name": "辽源市"
+  },
+  {
+    "id": 1611,
+    "parentId": 1608,
+    "name": "东丰县"
+  },
+  {
+    "id": 1612,
+    "parentId": 1608,
+    "name": "东辽县"
+  },
+  {
+    "id": 1610,
+    "parentId": 1608,
+    "name": "西安区"
+  },
+  {
+    "id": 1609,
+    "parentId": 1608,
+    "name": "龙山区"
+  },
+  {
+    "id": 1613,
+    "parentId": 1573,
+    "name": "四平市"
+  },
+  {
+    "id": 1617,
+    "parentId": 1613,
+    "name": "伊通满族自治县"
+  },
+  {
+    "id": 1618,
+    "parentId": 1613,
+    "name": "公主岭市"
+  },
+  {
+    "id": 1619,
+    "parentId": 1613,
+    "name": "双辽市"
+  },
+  {
+    "id": 1616,
+    "parentId": 1613,
+    "name": "梨树县"
+  },
+  {
+    "id": 1615,
+    "parentId": 1613,
+    "name": "铁东区"
+  },
+  {
+    "id": 1614,
+    "parentId": 1613,
+    "name": "铁西区"
+  },
+  {
+    "id": 1620,
+    "parentId": 1573,
+    "name": "松原市"
+  },
+  {
+    "id": 1624,
+    "parentId": 1620,
+    "name": "乾安县"
+  },
+  {
+    "id": 1622,
+    "parentId": 1620,
+    "name": "前郭尔罗斯蒙古族自治县"
+  },
+  {
+    "id": 1621,
+    "parentId": 1620,
+    "name": "宁江区"
+  },
+  {
+    "id": 1625,
+    "parentId": 1620,
+    "name": "扶余县"
+  },
+  {
+    "id": 1623,
+    "parentId": 1620,
+    "name": "长岭县"
+  },
+  {
+    "id": 1626,
+    "parentId": 1573,
+    "name": "通化市"
+  },
+  {
+    "id": 1627,
+    "parentId": 1626,
+    "name": "东昌区"
+  },
+  {
+    "id": 1628,
+    "parentId": 1626,
+    "name": "二道江区"
+  },
+  {
+    "id": 1631,
+    "parentId": 1626,
+    "name": "柳河县"
+  },
+  {
+    "id": 1632,
+    "parentId": 1626,
+    "name": "梅河口市"
+  },
+  {
+    "id": 1630,
+    "parentId": 1626,
+    "name": "辉南县"
+  },
+  {
+    "id": 1629,
+    "parentId": 1626,
+    "name": "通化县"
+  },
+  {
+    "id": 1633,
+    "parentId": 1626,
+    "name": "集安市"
+  },
+  {
+    "id": 1634,
+    "parentId": 1573,
+    "name": "延边朝鲜族自治州"
+  },
+  {
+    "id": 1640,
+    "parentId": 1634,
+    "name": "和龙市"
+  },
+  {
+    "id": 1636,
+    "parentId": 1634,
+    "name": "图们市"
+  },
+  {
+    "id": 1642,
+    "parentId": 1634,
+    "name": "安图县"
+  },
+  {
+    "id": 1635,
+    "parentId": 1634,
+    "name": "延吉市"
+  },
+  {
+    "id": 1637,
+    "parentId": 1634,
+    "name": "敦化市"
+  },
+  {
+    "id": 1641,
+    "parentId": 1634,
+    "name": "汪清县"
+  },
+  {
+    "id": 1638,
+    "parentId": 1634,
+    "name": "珲春市"
+  },
+  {
+    "id": 1639,
+    "parentId": 1634,
+    "name": "龙井市"
+  },
+  {
+    "id": 1643,
+    "parentId": null,
+    "name": "江苏"
+  },
+  {
+    "id": 1644,
+    "parentId": 1643,
+    "name": "南京市"
+  },
+  {
+    "id": 1650,
+    "parentId": 1644,
+    "name": "下关区"
+  },
+  {
+    "id": 1655,
+    "parentId": 1644,
+    "name": "六合区"
+  },
+  {
+    "id": 1648,
+    "parentId": 1644,
+    "name": "建邺区"
+  },
+  {
+    "id": 1652,
+    "parentId": 1644,
+    "name": "栖霞区"
+  },
+  {
+    "id": 1654,
+    "parentId": 1644,
+    "name": "江宁区"
+  },
+  {
+    "id": 1651,
+    "parentId": 1644,
+    "name": "浦口区"
+  },
+  {
+    "id": 1656,
+    "parentId": 1644,
+    "name": "溧水县"
+  },
+  {
+    "id": 1645,
+    "parentId": 1644,
+    "name": "玄武区"
+  },
+  {
+    "id": 1646,
+    "parentId": 1644,
+    "name": "白下区"
+  },
+  {
+    "id": 1647,
+    "parentId": 1644,
+    "name": "秦淮区"
+  },
+  {
+    "id": 1653,
+    "parentId": 1644,
+    "name": "雨花台区"
+  },
+  {
+    "id": 1657,
+    "parentId": 1644,
+    "name": "高淳县"
+  },
+  {
+    "id": 1649,
+    "parentId": 1644,
+    "name": "鼓楼区"
+  },
+  {
+    "id": 1658,
+    "parentId": 1643,
+    "name": "常州市"
+  },
+  {
+    "id": 1659,
+    "parentId": 1658,
+    "name": "天宁区"
+  },
+  {
+    "id": 1661,
+    "parentId": 1658,
+    "name": "戚墅堰区"
+  },
+  {
+    "id": 1662,
+    "parentId": 1658,
+    "name": "新北区"
+  },
+  {
+    "id": 1663,
+    "parentId": 1658,
+    "name": "武进区"
+  },
+  {
+    "id": 1664,
+    "parentId": 1658,
+    "name": "溧阳市"
+  },
+  {
+    "id": 1665,
+    "parentId": 1658,
+    "name": "金坛市"
+  },
+  {
+    "id": 1660,
+    "parentId": 1658,
+    "name": "钟楼区"
+  },
+  {
+    "id": 1666,
+    "parentId": 1643,
+    "name": "淮安市"
+  },
+  {
+    "id": 1668,
+    "parentId": 1666,
+    "name": "楚州区"
+  },
+  {
+    "id": 1672,
+    "parentId": 1666,
+    "name": "洪泽县"
+  },
+  {
+    "id": 1671,
+    "parentId": 1666,
+    "name": "涟水县"
+  },
+  {
+    "id": 1669,
+    "parentId": 1666,
+    "name": "淮阴区"
+  },
+  {
+    "id": 1667,
+    "parentId": 1666,
+    "name": "清河区"
+  },
+  {
+    "id": 1670,
+    "parentId": 1666,
+    "name": "清浦区"
+  },
+  {
+    "id": 1673,
+    "parentId": 1666,
+    "name": "盱眙县"
+  },
+  {
+    "id": 1674,
+    "parentId": 1666,
+    "name": "金湖县"
+  },
+  {
+    "id": 1675,
+    "parentId": 1643,
+    "name": "连云港市"
+  },
+  {
+    "id": 1680,
+    "parentId": 1675,
+    "name": "东海县"
+  },
+  {
+    "id": 1677,
+    "parentId": 1675,
+    "name": "新浦区"
+  },
+  {
+    "id": 1678,
+    "parentId": 1675,
+    "name": "海州区"
+  },
+  {
+    "id": 1681,
+    "parentId": 1675,
+    "name": "灌云县"
+  },
+  {
+    "id": 1682,
+    "parentId": 1675,
+    "name": "灌南县"
+  },
+  {
+    "id": 1679,
+    "parentId": 1675,
+    "name": "赣榆县"
+  },
+  {
+    "id": 1676,
+    "parentId": 1675,
+    "name": "连云区"
+  },
+  {
+    "id": 1683,
+    "parentId": 1643,
+    "name": "南通市"
+  },
+  {
+    "id": 1688,
+    "parentId": 1683,
+    "name": "启东市"
+  },
+  {
+    "id": 1687,
+    "parentId": 1683,
+    "name": "如东县"
+  },
+  {
+    "id": 1689,
+    "parentId": 1683,
+    "name": "如皋市"
+  },
+  {
+    "id": 1684,
+    "parentId": 1683,
+    "name": "崇川区"
+  },
+  {
+    "id": 1686,
+    "parentId": 1683,
+    "name": "海安县"
+  },
+  {
+    "id": 1691,
+    "parentId": 1683,
+    "name": "海门市"
+  },
+  {
+    "id": 1685,
+    "parentId": 1683,
+    "name": "港闸区"
+  },
+  {
+    "id": 1690,
+    "parentId": 1683,
+    "name": "通州市"
+  },
+  {
+    "id": 1692,
+    "parentId": 1643,
+    "name": "苏州市"
+  },
+  {
+    "id": 1697,
+    "parentId": 1692,
+    "name": "吴中区"
+  },
+  {
+    "id": 1702,
+    "parentId": 1692,
+    "name": "吴江市"
+  },
+  {
+    "id": 1703,
+    "parentId": 1692,
+    "name": "太仓市"
+  },
+  {
+    "id": 3257,
+    "parentId": 1692,
+    "name": "姑苏区"
+  },
+  {
+    "id": 3240,
+    "parentId": 1692,
+    "name": "工业园区"
+  },
+  {
+    "id": 1699,
+    "parentId": 1692,
+    "name": "常熟市"
+  },
+  {
+    "id": 1694,
+    "parentId": 1692,
+    "name": "平江区"
+  },
+  {
+    "id": 1700,
+    "parentId": 1692,
+    "name": "张家港市"
+  },
+  {
+    "id": 1701,
+    "parentId": 1692,
+    "name": "昆山市"
+  },
+  {
+    "id": 1693,
+    "parentId": 1692,
+    "name": "沧浪区"
+  },
+  {
+    "id": 1698,
+    "parentId": 1692,
+    "name": "相城区"
+  },
+  {
+    "id": 1696,
+    "parentId": 1692,
+    "name": "虎丘区"
+  },
+  {
+    "id": 1695,
+    "parentId": 1692,
+    "name": "金阊区"
+  },
+  {
+    "id": 1704,
+    "parentId": 1643,
+    "name": "宿迁市"
+  },
+  {
+    "id": 1705,
+    "parentId": 1704,
+    "name": "宿城区"
+  },
+  {
+    "id": 1706,
+    "parentId": 1704,
+    "name": "宿豫区"
+  },
+  {
+    "id": 1707,
+    "parentId": 1704,
+    "name": "沭阳县"
+  },
+  {
+    "id": 1709,
+    "parentId": 1704,
+    "name": "泗洪县"
+  },
+  {
+    "id": 1708,
+    "parentId": 1704,
+    "name": "泗阳县"
+  },
+  {
+    "id": 1710,
+    "parentId": 1643,
+    "name": "泰州市"
+  },
+  {
+    "id": 1713,
+    "parentId": 1710,
+    "name": "兴化市"
+  },
+  {
+    "id": 1716,
+    "parentId": 1710,
+    "name": "姜堰市"
+  },
+  {
+    "id": 1715,
+    "parentId": 1710,
+    "name": "泰兴市"
+  },
+  {
+    "id": 1711,
+    "parentId": 1710,
+    "name": "海陵区"
+  },
+  {
+    "id": 1714,
+    "parentId": 1710,
+    "name": "靖江市"
+  },
+  {
+    "id": 1712,
+    "parentId": 1710,
+    "name": "高港区"
+  },
+  {
+    "id": 1717,
+    "parentId": 1643,
+    "name": "无锡市"
+  },
+  {
+    "id": 1720,
+    "parentId": 1717,
+    "name": "北塘区"
+  },
+  {
+    "id": 1719,
+    "parentId": 1717,
+    "name": "南长区"
+  },
+  {
+    "id": 1725,
+    "parentId": 1717,
+    "name": "宜兴市"
+  },
+  {
+    "id": 1718,
+    "parentId": 1717,
+    "name": "崇安区"
+  },
+  {
+    "id": 1722,
+    "parentId": 1717,
+    "name": "惠山区"
+  },
+  {
+    "id": 1724,
+    "parentId": 1717,
+    "name": "江阴市"
+  },
+  {
+    "id": 1723,
+    "parentId": 1717,
+    "name": "滨湖区"
+  },
+  {
+    "id": 1721,
+    "parentId": 1717,
+    "name": "锡山区"
+  },
+  {
+    "id": 1726,
+    "parentId": 1643,
+    "name": "徐州市"
+  },
+  {
+    "id": 1732,
+    "parentId": 1726,
+    "name": "丰县"
+  },
+  {
+    "id": 1729,
+    "parentId": 1726,
+    "name": "九里区"
+  },
+  {
+    "id": 1728,
+    "parentId": 1726,
+    "name": "云龙区"
+  },
+  {
+    "id": 1736,
+    "parentId": 1726,
+    "name": "新沂市"
+  },
+  {
+    "id": 1733,
+    "parentId": 1726,
+    "name": "沛县"
+  },
+  {
+    "id": 1731,
+    "parentId": 1726,
+    "name": "泉山区"
+  },
+  {
+    "id": 1735,
+    "parentId": 1726,
+    "name": "睢宁县"
+  },
+  {
+    "id": 1730,
+    "parentId": 1726,
+    "name": "贾汪区"
+  },
+  {
+    "id": 1737,
+    "parentId": 1726,
+    "name": "邳州市"
+  },
+  {
+    "id": 1734,
+    "parentId": 1726,
+    "name": "铜山县"
+  },
+  {
+    "id": 1727,
+    "parentId": 1726,
+    "name": "鼓楼区"
+  },
+  {
+    "id": 1738,
+    "parentId": 1643,
+    "name": "盐城市"
+  },
+  {
+    "id": 1746,
+    "parentId": 1738,
+    "name": "东台市"
+  },
+  {
+    "id": 1739,
+    "parentId": 1738,
+    "name": "亭湖区"
+  },
+  {
+    "id": 1741,
+    "parentId": 1738,
+    "name": "响水县"
+  },
+  {
+    "id": 1747,
+    "parentId": 1738,
+    "name": "大丰市"
+  },
+  {
+    "id": 1744,
+    "parentId": 1738,
+    "name": "射阳县"
+  },
+  {
+    "id": 1745,
+    "parentId": 1738,
+    "name": "建湖县"
+  },
+  {
+    "id": 1742,
+    "parentId": 1738,
+    "name": "滨海县"
+  },
+  {
+    "id": 1740,
+    "parentId": 1738,
+    "name": "盐都区"
+  },
+  {
+    "id": 1743,
+    "parentId": 1738,
+    "name": "阜宁县"
+  },
+  {
+    "id": 1748,
+    "parentId": 1643,
+    "name": "扬州市"
+  },
+  {
+    "id": 1753,
+    "parentId": 1748,
+    "name": "仪征市"
+  },
+  {
+    "id": 1752,
+    "parentId": 1748,
+    "name": "宝应县"
+  },
+  {
+    "id": 1749,
+    "parentId": 1748,
+    "name": "广陵区"
+  },
+  {
+    "id": 1755,
+    "parentId": 1748,
+    "name": "江都市"
+  },
+  {
+    "id": 1750,
+    "parentId": 1748,
+    "name": "邗江区"
+  },
+  {
+    "id": 1751,
+    "parentId": 1748,
+    "name": "郊区"
+  },
+  {
+    "id": 1754,
+    "parentId": 1748,
+    "name": "高邮市"
+  },
+  {
+    "id": 1756,
+    "parentId": 1643,
+    "name": "镇江市"
+  },
+  {
+    "id": 1759,
+    "parentId": 1756,
+    "name": "丹徒区"
+  },
+  {
+    "id": 1760,
+    "parentId": 1756,
+    "name": "丹阳市"
+  },
+  {
+    "id": 1757,
+    "parentId": 1756,
+    "name": "京口区"
+  },
+  {
+    "id": 1762,
+    "parentId": 1756,
+    "name": "句容市"
+  },
+  {
+    "id": 1761,
+    "parentId": 1756,
+    "name": "扬中市"
+  },
+  {
+    "id": 1758,
+    "parentId": 1756,
+    "name": "润州区"
+  },
+  {
+    "id": 1763,
+    "parentId": null,
+    "name": "江西"
+  },
+  {
+    "id": 1764,
+    "parentId": 1763,
+    "name": "南昌市"
+  },
+  {
+    "id": 1765,
+    "parentId": 1764,
+    "name": "东湖区"
+  },
+  {
+    "id": 1770,
+    "parentId": 1764,
+    "name": "南昌县"
+  },
+  {
+    "id": 1772,
+    "parentId": 1764,
+    "name": "安义县"
+  },
+  {
+    "id": 1771,
+    "parentId": 1764,
+    "name": "新建县"
+  },
+  {
+    "id": 1768,
+    "parentId": 1764,
+    "name": "湾里区"
+  },
+  {
+    "id": 3288,
+    "parentId": 1764,
+    "name": "红谷滩"
+  },
+  {
+    "id": 1766,
+    "parentId": 1764,
+    "name": "西湖区"
+  },
+  {
+    "id": 1773,
+    "parentId": 1764,
+    "name": "进贤县"
+  },
+  {
+    "id": 1767,
+    "parentId": 1764,
+    "name": "青云谱区"
+  },
+  {
+    "id": 1769,
+    "parentId": 1764,
+    "name": "青山湖区"
+  },
+  {
+    "id": 1774,
+    "parentId": 1763,
+    "name": "抚州市"
+  },
+  {
+    "id": 1784,
+    "parentId": 1774,
+    "name": "东乡县"
+  },
+  {
+    "id": 1775,
+    "parentId": 1774,
+    "name": "临川区"
+  },
+  {
+    "id": 1780,
+    "parentId": 1774,
+    "name": "乐安县"
+  },
+  {
+    "id": 1778,
+    "parentId": 1774,
+    "name": "南丰县"
+  },
+  {
+    "id": 1776,
+    "parentId": 1774,
+    "name": "南城县"
+  },
+  {
+    "id": 1781,
+    "parentId": 1774,
+    "name": "宜黄县"
+  },
+  {
+    "id": 1779,
+    "parentId": 1774,
+    "name": "崇仁县"
+  },
+  {
+    "id": 1785,
+    "parentId": 1774,
+    "name": "广昌县"
+  },
+  {
+    "id": 1783,
+    "parentId": 1774,
+    "name": "资溪县"
+  },
+  {
+    "id": 1782,
+    "parentId": 1774,
+    "name": "金溪县"
+  },
+  {
+    "id": 1777,
+    "parentId": 1774,
+    "name": "黎川县"
+  },
+  {
+    "id": 1786,
+    "parentId": 1763,
+    "name": "赣州市"
+  },
+  {
+    "id": 1791,
+    "parentId": 1786,
+    "name": "上犹县"
+  },
+  {
+    "id": 1798,
+    "parentId": 1786,
+    "name": "于都县"
+  },
+  {
+    "id": 1800,
+    "parentId": 1786,
+    "name": "会昌县"
+  },
+  {
+    "id": 1789,
+    "parentId": 1786,
+    "name": "信丰县"
+  },
+  {
+    "id": 1796,
+    "parentId": 1786,
+    "name": "全南县"
+  },
+  {
+    "id": 1799,
+    "parentId": 1786,
+    "name": "兴国县"
+  },
+  {
+    "id": 1804,
+    "parentId": 1786,
+    "name": "南康市"
+  },
+  {
+    "id": 1790,
+    "parentId": 1786,
+    "name": "大余县"
+  },
+  {
+    "id": 1797,
+    "parentId": 1786,
+    "name": "宁都县"
+  },
+  {
+    "id": 1793,
+    "parentId": 1786,
+    "name": "安远县"
+  },
+  {
+    "id": 1795,
+    "parentId": 1786,
+    "name": "定南县"
+  },
+  {
+    "id": 1801,
+    "parentId": 1786,
+    "name": "寻乌县"
+  },
+  {
+    "id": 1792,
+    "parentId": 1786,
+    "name": "崇义县"
+  },
+  {
+    "id": 1803,
+    "parentId": 1786,
+    "name": "瑞金市"
+  },
+  {
+    "id": 1802,
+    "parentId": 1786,
+    "name": "石城县"
+  },
+  {
+    "id": 1787,
+    "parentId": 1786,
+    "name": "章贡区"
+  },
+  {
+    "id": 1788,
+    "parentId": 1786,
+    "name": "赣县"
+  },
+  {
+    "id": 1794,
+    "parentId": 1786,
+    "name": "龙南县"
+  },
+  {
+    "id": 1805,
+    "parentId": 1763,
+    "name": "吉安市"
+  },
+  {
+    "id": 1815,
+    "parentId": 1805,
+    "name": "万安县"
+  },
+  {
+    "id": 1818,
+    "parentId": 1805,
+    "name": "井冈山市"
+  },
+  {
+    "id": 1808,
+    "parentId": 1805,
+    "name": "吉安县"
+  },
+  {
+    "id": 1806,
+    "parentId": 1805,
+    "name": "吉州区"
+  },
+  {
+    "id": 1809,
+    "parentId": 1805,
+    "name": "吉水县"
+  },
+  {
+    "id": 1816,
+    "parentId": 1805,
+    "name": "安福县"
+  },
+  {
+    "id": 1810,
+    "parentId": 1805,
+    "name": "峡江县"
+  },
+  {
+    "id": 1811,
+    "parentId": 1805,
+    "name": "新干县"
+  },
+  {
+    "id": 1812,
+    "parentId": 1805,
+    "name": "永丰县"
+  },
+  {
+    "id": 1817,
+    "parentId": 1805,
+    "name": "永新县"
+  },
+  {
+    "id": 1813,
+    "parentId": 1805,
+    "name": "泰和县"
+  },
+  {
+    "id": 1814,
+    "parentId": 1805,
+    "name": "遂川县"
+  },
+  {
+    "id": 1807,
+    "parentId": 1805,
+    "name": "青原区"
+  },
+  {
+    "id": 1819,
+    "parentId": 1763,
+    "name": "景德镇市"
+  },
+  {
+    "id": 1823,
+    "parentId": 1819,
+    "name": "乐平市"
+  },
+  {
+    "id": 1820,
+    "parentId": 1819,
+    "name": "昌江区"
+  },
+  {
+    "id": 1822,
+    "parentId": 1819,
+    "name": "浮梁县"
+  },
+  {
+    "id": 1821,
+    "parentId": 1819,
+    "name": "珠山区"
+  },
+  {
+    "id": 1824,
+    "parentId": 1763,
+    "name": "九江市"
+  },
+  {
+    "id": 1827,
+    "parentId": 1824,
+    "name": "九江县"
+  },
+  {
+    "id": 1829,
+    "parentId": 1824,
+    "name": "修水县"
+  },
+  {
+    "id": 1825,
+    "parentId": 1824,
+    "name": "庐山区"
+  },
+  {
+    "id": 1835,
+    "parentId": 1824,
+    "name": "彭泽县"
+  },
+  {
+    "id": 1831,
+    "parentId": 1824,
+    "name": "德安县"
+  },
+  {
+    "id": 1832,
+    "parentId": 1824,
+    "name": "星子县"
+  },
+  {
+    "id": 1828,
+    "parentId": 1824,
+    "name": "武宁县"
+  },
+  {
+    "id": 1830,
+    "parentId": 1824,
+    "name": "永修县"
+  },
+  {
+    "id": 1826,
+    "parentId": 1824,
+    "name": "浔阳区"
+  },
+  {
+    "id": 1834,
+    "parentId": 1824,
+    "name": "湖口县"
+  },
+  {
+    "id": 1836,
+    "parentId": 1824,
+    "name": "瑞昌市"
+  },
+  {
+    "id": 1833,
+    "parentId": 1824,
+    "name": "都昌县"
+  },
+  {
+    "id": 1837,
+    "parentId": 1763,
+    "name": "萍乡市"
+  },
+  {
+    "id": 1841,
+    "parentId": 1837,
+    "name": "上栗县"
+  },
+  {
+    "id": 1838,
+    "parentId": 1837,
+    "name": "安源区"
+  },
+  {
+    "id": 1839,
+    "parentId": 1837,
+    "name": "湘东区"
+  },
+  {
+    "id": 1842,
+    "parentId": 1837,
+    "name": "芦溪县"
+  },
+  {
+    "id": 1840,
+    "parentId": 1837,
+    "name": "莲花县"
+  },
+  {
+    "id": 1843,
+    "parentId": 1763,
+    "name": "上饶市"
+  },
+  {
+    "id": 1853,
+    "parentId": 1843,
+    "name": "万年县"
+  },
+  {
+    "id": 1845,
+    "parentId": 1843,
+    "name": "上饶县"
+  },
+  {
+    "id": 1851,
+    "parentId": 1843,
+    "name": "余干县"
+  },
+  {
+    "id": 1844,
+    "parentId": 1843,
+    "name": "信州区"
+  },
+  {
+    "id": 1854,
+    "parentId": 1843,
+    "name": "婺源县"
+  },
+  {
+    "id": 1846,
+    "parentId": 1843,
+    "name": "广丰县"
+  },
+  {
+    "id": 1850,
+    "parentId": 1843,
+    "name": "弋阳县"
+  },
+  {
+    "id": 1855,
+    "parentId": 1843,
+    "name": "德兴市"
+  },
+  {
+    "id": 1849,
+    "parentId": 1843,
+    "name": "横峰县"
+  },
+  {
+    "id": 1847,
+    "parentId": 1843,
+    "name": "玉山县"
+  },
+  {
+    "id": 1852,
+    "parentId": 1843,
+    "name": "鄱阳县"
+  },
+  {
+    "id": 1848,
+    "parentId": 1843,
+    "name": "铅山县"
+  },
+  {
+    "id": 1856,
+    "parentId": 1763,
+    "name": "新余市"
+  },
+  {
+    "id": 1858,
+    "parentId": 1856,
+    "name": "分宜县"
+  },
+  {
+    "id": 1857,
+    "parentId": 1856,
+    "name": "渝水区"
+  },
+  {
+    "id": 1859,
+    "parentId": 1763,
+    "name": "宜春市"
+  },
+  {
+    "id": 1862,
+    "parentId": 1859,
+    "name": "万载县"
+  },
+  {
+    "id": 1863,
+    "parentId": 1859,
+    "name": "上高县"
+  },
+  {
+    "id": 1867,
+    "parentId": 1859,
+    "name": "丰城市"
+  },
+  {
+    "id": 1861,
+    "parentId": 1859,
+    "name": "奉新县"
+  },
+  {
+    "id": 1864,
+    "parentId": 1859,
+    "name": "宜丰县"
+  },
+  {
+    "id": 1868,
+    "parentId": 1859,
+    "name": "樟树市"
+  },
+  {
+    "id": 1860,
+    "parentId": 1859,
+    "name": "袁州区"
+  },
+  {
+    "id": 1866,
+    "parentId": 1859,
+    "name": "铜鼓县"
+  },
+  {
+    "id": 1865,
+    "parentId": 1859,
+    "name": "靖安县"
+  },
+  {
+    "id": 1869,
+    "parentId": 1859,
+    "name": "高安市"
+  },
+  {
+    "id": 1870,
+    "parentId": 1763,
+    "name": "鹰潭市"
+  },
+  {
+    "id": 1872,
+    "parentId": 1870,
+    "name": "余江县"
+  },
+  {
+    "id": 1871,
+    "parentId": 1870,
+    "name": "月湖区"
+  },
+  {
+    "id": 1873,
+    "parentId": 1870,
+    "name": "贵溪市"
+  },
+  {
+    "id": 1874,
+    "parentId": null,
+    "name": "辽宁"
+  },
+  {
+    "id": 1875,
+    "parentId": 1874,
+    "name": "沈阳市"
+  },
+  {
+    "id": 1882,
+    "parentId": 1875,
+    "name": "东陵区"
+  },
+  {
+    "id": 1884,
+    "parentId": 1875,
+    "name": "于洪区"
+  },
+  {
+    "id": 1876,
+    "parentId": 1875,
+    "name": "和平区"
+  },
+  {
+    "id": 1878,
+    "parentId": 1875,
+    "name": "大东区"
+  },
+  {
+    "id": 1886,
+    "parentId": 1875,
+    "name": "康平县"
+  },
+  {
+    "id": 1883,
+    "parentId": 1875,
+    "name": "新城子区"
+  },
+  {
+    "id": 1888,
+    "parentId": 1875,
+    "name": "新民市"
+  },
+  {
+    "id": 1877,
+    "parentId": 1875,
+    "name": "沈河区"
+  },
+  {
+    "id": 1887,
+    "parentId": 1875,
+    "name": "法库县"
+  },
+  {
+    "id": 1879,
+    "parentId": 1875,
+    "name": "皇姑区"
+  },
+  {
+    "id": 1881,
+    "parentId": 1875,
+    "name": "苏家屯区"
+  },
+  {
+    "id": 1885,
+    "parentId": 1875,
+    "name": "辽中县"
+  },
+  {
+    "id": 1880,
+    "parentId": 1875,
+    "name": "铁西区"
+  },
+  {
+    "id": 1889,
+    "parentId": 1874,
+    "name": "鞍山市"
+  },
+  {
+    "id": 1893,
+    "parentId": 1889,
+    "name": "千山区"
+  },
+  {
+    "id": 1894,
+    "parentId": 1889,
+    "name": "台安县"
+  },
+  {
+    "id": 1895,
+    "parentId": 1889,
+    "name": "岫岩满族自治县"
+  },
+  {
+    "id": 1896,
+    "parentId": 1889,
+    "name": "海城市"
+  },
+  {
+    "id": 1892,
+    "parentId": 1889,
+    "name": "立山区"
+  },
+  {
+    "id": 1890,
+    "parentId": 1889,
+    "name": "铁东区"
+  },
+  {
+    "id": 1891,
+    "parentId": 1889,
+    "name": "铁西区"
+  },
+  {
+    "id": 1897,
+    "parentId": 1874,
+    "name": "本溪市"
+  },
+  {
+    "id": 1901,
+    "parentId": 1897,
+    "name": "南芬区"
+  },
+  {
+    "id": 1898,
+    "parentId": 1897,
+    "name": "平山区"
+  },
+  {
+    "id": 1900,
+    "parentId": 1897,
+    "name": "明山区"
+  },
+  {
+    "id": 1902,
+    "parentId": 1897,
+    "name": "本溪满族自治县"
+  },
+  {
+    "id": 1903,
+    "parentId": 1897,
+    "name": "桓仁满族自治县"
+  },
+  {
+    "id": 1899,
+    "parentId": 1897,
+    "name": "溪湖区"
+  },
+  {
+    "id": 1904,
+    "parentId": 1874,
+    "name": "朝阳市"
+  },
+  {
+    "id": 1911,
+    "parentId": 1904,
+    "name": "凌源市"
+  },
+  {
+    "id": 1910,
+    "parentId": 1904,
+    "name": "北票市"
+  },
+  {
+    "id": 1905,
+    "parentId": 1904,
+    "name": "双塔区"
+  },
+  {
+    "id": 1909,
+    "parentId": 1904,
+    "name": "喀喇沁左翼蒙古族自治县"
+  },
+  {
+    "id": 1908,
+    "parentId": 1904,
+    "name": "建平县"
+  },
+  {
+    "id": 1907,
+    "parentId": 1904,
+    "name": "朝阳县"
+  },
+  {
+    "id": 1906,
+    "parentId": 1904,
+    "name": "龙城区"
+  },
+  {
+    "id": 1912,
+    "parentId": 1874,
+    "name": "大连市"
+  },
+  {
+    "id": 1913,
+    "parentId": 1912,
+    "name": "中山区"
+  },
+  {
+    "id": 1922,
+    "parentId": 1912,
+    "name": "庄河市"
+  },
+  {
+    "id": 1917,
+    "parentId": 1912,
+    "name": "旅顺口区"
+  },
+  {
+    "id": 1921,
+    "parentId": 1912,
+    "name": "普兰店市"
+  },
+  {
+    "id": 1915,
+    "parentId": 1912,
+    "name": "沙河口区"
+  },
+  {
+    "id": 1920,
+    "parentId": 1912,
+    "name": "瓦房店市"
+  },
+  {
+    "id": 1916,
+    "parentId": 1912,
+    "name": "甘井子区"
+  },
+  {
+    "id": 1914,
+    "parentId": 1912,
+    "name": "西岗区"
+  },
+  {
+    "id": 1918,
+    "parentId": 1912,
+    "name": "金州区"
+  },
+  {
+    "id": 1919,
+    "parentId": 1912,
+    "name": "长海县"
+  },
+  {
+    "id": 1923,
+    "parentId": 1874,
+    "name": "丹东市"
+  },
+  {
+    "id": 1928,
+    "parentId": 1923,
+    "name": "东港市"
+  },
+  {
+    "id": 1924,
+    "parentId": 1923,
+    "name": "元宝区"
+  },
+  {
+    "id": 1929,
+    "parentId": 1923,
+    "name": "凤城市"
+  },
+  {
+    "id": 1927,
+    "parentId": 1923,
+    "name": "宽甸满族自治县"
+  },
+  {
+    "id": 1925,
+    "parentId": 1923,
+    "name": "振兴区"
+  },
+  {
+    "id": 1926,
+    "parentId": 1923,
+    "name": "振安区"
+  },
+  {
+    "id": 1930,
+    "parentId": 1874,
+    "name": "抚顺市"
+  },
+  {
+    "id": 1932,
+    "parentId": 1930,
+    "name": "东洲区"
+  },
+  {
+    "id": 1935,
+    "parentId": 1930,
+    "name": "抚顺县"
+  },
+  {
+    "id": 1936,
+    "parentId": 1930,
+    "name": "新宾满族自治县"
+  },
+  {
+    "id": 1931,
+    "parentId": 1930,
+    "name": "新抚区"
+  },
+  {
+    "id": 1933,
+    "parentId": 1930,
+    "name": "望花区"
+  },
+  {
+    "id": 1937,
+    "parentId": 1930,
+    "name": "清原满族自治县"
+  },
+  {
+    "id": 1934,
+    "parentId": 1930,
+    "name": "顺城区"
+  },
+  {
+    "id": 1938,
+    "parentId": 1874,
+    "name": "阜新市"
+  },
+  {
+    "id": 1941,
+    "parentId": 1938,
+    "name": "太平区"
+  },
+  {
+    "id": 1945,
+    "parentId": 1938,
+    "name": "彰武县"
+  },
+  {
+    "id": 1940,
+    "parentId": 1938,
+    "name": "新邱区"
+  },
+  {
+    "id": 1939,
+    "parentId": 1938,
+    "name": "海州区"
+  },
+  {
+    "id": 1942,
+    "parentId": 1938,
+    "name": "清河门区"
+  },
+  {
+    "id": 1943,
+    "parentId": 1938,
+    "name": "细河区"
+  },
+  {
+    "id": 1944,
+    "parentId": 1938,
+    "name": "阜新蒙古族自治县"
+  },
+  {
+    "id": 1946,
+    "parentId": 1874,
+    "name": "葫芦岛市"
+  },
+  {
+    "id": 1952,
+    "parentId": 1946,
+    "name": "兴城市"
+  },
+  {
+    "id": 1949,
+    "parentId": 1946,
+    "name": "南票区"
+  },
+  {
+    "id": 1951,
+    "parentId": 1946,
+    "name": "建昌县"
+  },
+  {
+    "id": 1950,
+    "parentId": 1946,
+    "name": "绥中县"
+  },
+  {
+    "id": 1947,
+    "parentId": 1946,
+    "name": "连山区"
+  },
+  {
+    "id": 1948,
+    "parentId": 1946,
+    "name": "龙港区"
+  },
+  {
+    "id": 1953,
+    "parentId": 1874,
+    "name": "锦州市"
+  },
+  {
+    "id": 1958,
+    "parentId": 1953,
+    "name": "义县"
+  },
+  {
+    "id": 1955,
+    "parentId": 1953,
+    "name": "凌河区"
+  },
+  {
+    "id": 1959,
+    "parentId": 1953,
+    "name": "凌海市"
+  },
+  {
+    "id": 1960,
+    "parentId": 1953,
+    "name": "北宁市"
+  },
+  {
+    "id": 1954,
+    "parentId": 1953,
+    "name": "古塔区"
+  },
+  {
+    "id": 1956,
+    "parentId": 1953,
+    "name": "太和区"
+  },
+  {
+    "id": 1957,
+    "parentId": 1953,
+    "name": "黑山县"
+  },
+  {
+    "id": 1961,
+    "parentId": 1874,
+    "name": "辽阳市"
+  },
+  {
+    "id": 1966,
+    "parentId": 1961,
+    "name": "太子河区"
+  },
+  {
+    "id": 1964,
+    "parentId": 1961,
+    "name": "宏伟区"
+  },
+  {
+    "id": 1965,
+    "parentId": 1961,
+    "name": "弓长岭区"
+  },
+  {
+    "id": 1963,
+    "parentId": 1961,
+    "name": "文圣区"
+  },
+  {
+    "id": 1968,
+    "parentId": 1961,
+    "name": "灯塔市"
+  },
+  {
+    "id": 1962,
+    "parentId": 1961,
+    "name": "白塔区"
+  },
+  {
+    "id": 1967,
+    "parentId": 1961,
+    "name": "辽阳县"
+  },
+  {
+    "id": 1969,
+    "parentId": 1874,
+    "name": "盘锦市"
+  },
+  {
+    "id": 1971,
+    "parentId": 1969,
+    "name": "兴隆台区"
+  },
+  {
+    "id": 1970,
+    "parentId": 1969,
+    "name": "双台子区"
+  },
+  {
+    "id": 1972,
+    "parentId": 1969,
+    "name": "大洼县"
+  },
+  {
+    "id": 1973,
+    "parentId": 1969,
+    "name": "盘山县"
+  },
+  {
+    "id": 1974,
+    "parentId": 1874,
+    "name": "铁岭市"
+  },
+  {
+    "id": 1981,
+    "parentId": 1974,
+    "name": "开原市"
+  },
+  {
+    "id": 1979,
+    "parentId": 1974,
+    "name": "昌图县"
+  },
+  {
+    "id": 1976,
+    "parentId": 1974,
+    "name": "清河区"
+  },
+  {
+    "id": 1978,
+    "parentId": 1974,
+    "name": "西丰县"
+  },
+  {
+    "id": 1980,
+    "parentId": 1974,
+    "name": "调兵山市"
+  },
+  {
+    "id": 1977,
+    "parentId": 1974,
+    "name": "铁岭县"
+  },
+  {
+    "id": 1975,
+    "parentId": 1974,
+    "name": "银州区"
+  },
+  {
+    "id": 1982,
+    "parentId": 1874,
+    "name": "营口市"
+  },
+  {
+    "id": 1988,
+    "parentId": 1982,
+    "name": "大石桥市"
+  },
+  {
+    "id": 1987,
+    "parentId": 1982,
+    "name": "盖州市"
+  },
+  {
+    "id": 1983,
+    "parentId": 1982,
+    "name": "站前区"
+  },
+  {
+    "id": 1986,
+    "parentId": 1982,
+    "name": "老边区"
+  },
+  {
+    "id": 1984,
+    "parentId": 1982,
+    "name": "西市区"
+  },
+  {
+    "id": 1985,
+    "parentId": 1982,
+    "name": "鲅鱼圈区"
+  },
+  {
+    "id": 1989,
+    "parentId": null,
+    "name": "内蒙古"
+  },
+  {
+    "id": 1990,
+    "parentId": 1989,
+    "name": "呼和浩特市"
+  },
+  {
+    "id": 1997,
+    "parentId": 1990,
+    "name": "和林格尔县"
+  },
+  {
+    "id": 1992,
+    "parentId": 1990,
+    "name": "回民区"
+  },
+  {
+    "id": 1995,
+    "parentId": 1990,
+    "name": "土默特左旗"
+  },
+  {
+    "id": 1996,
+    "parentId": 1990,
+    "name": "托克托县"
+  },
+  {
+    "id": 1991,
+    "parentId": 1990,
+    "name": "新城区"
+  },
+  {
+    "id": 1999,
+    "parentId": 1990,
+    "name": "武川县"
+  },
+  {
+    "id": 1998,
+    "parentId": 1990,
+    "name": "清水河县"
+  },
+  {
+    "id": 1993,
+    "parentId": 1990,
+    "name": "玉泉区"
+  },
+  {
+    "id": 1994,
+    "parentId": 1990,
+    "name": "赛罕区"
+  },
+  {
+    "id": 2000,
+    "parentId": 1989,
+    "name": "阿拉善盟"
+  },
+  {
+    "id": 2002,
+    "parentId": 2000,
+    "name": "阿拉善右旗"
+  },
+  {
+    "id": 2001,
+    "parentId": 2000,
+    "name": "阿拉善左旗"
+  },
+  {
+    "id": 2003,
+    "parentId": 2000,
+    "name": "额济纳旗"
+  },
+  {
+    "id": 2004,
+    "parentId": 1989,
+    "name": "巴彦淖尔市"
+  },
+  {
+    "id": 2005,
+    "parentId": 2004,
+    "name": "临河区"
+  },
+  {
+    "id": 2009,
+    "parentId": 2004,
+    "name": "乌拉特中旗"
+  },
+  {
+    "id": 2008,
+    "parentId": 2004,
+    "name": "乌拉特前旗"
+  },
+  {
+    "id": 2010,
+    "parentId": 2004,
+    "name": "乌拉特后旗"
+  },
+  {
+    "id": 2006,
+    "parentId": 2004,
+    "name": "五原县"
+  },
+  {
+    "id": 2011,
+    "parentId": 2004,
+    "name": "杭锦后旗"
+  },
+  {
+    "id": 2007,
+    "parentId": 2004,
+    "name": "磴口县"
+  },
+  {
+    "id": 2012,
+    "parentId": 1989,
+    "name": "包头市"
+  },
+  {
+    "id": 2013,
+    "parentId": 2012,
+    "name": "东河区"
+  },
+  {
+    "id": 2018,
+    "parentId": 2012,
+    "name": "九原区"
+  },
+  {
+    "id": 2020,
+    "parentId": 2012,
+    "name": "固阳县"
+  },
+  {
+    "id": 2019,
+    "parentId": 2012,
+    "name": "土默特右旗"
+  },
+  {
+    "id": 2014,
+    "parentId": 2012,
+    "name": "昆都仑区"
+  },
+  {
+    "id": 2017,
+    "parentId": 2012,
+    "name": "白云矿区"
+  },
+  {
+    "id": 2016,
+    "parentId": 2012,
+    "name": "石拐区"
+  },
+  {
+    "id": 2021,
+    "parentId": 2012,
+    "name": "达尔罕茂明安联合旗"
+  },
+  {
+    "id": 2015,
+    "parentId": 2012,
+    "name": "青山区"
+  },
+  {
+    "id": 2022,
+    "parentId": 1989,
+    "name": "赤峰市"
+  },
+  {
+    "id": 2024,
+    "parentId": 2022,
+    "name": "元宝山区"
+  },
+  {
+    "id": 2030,
+    "parentId": 2022,
+    "name": "克什克腾旗"
+  },
+  {
+    "id": 2032,
+    "parentId": 2022,
+    "name": "喀喇沁旗"
+  },
+  {
+    "id": 2033,
+    "parentId": 2022,
+    "name": "宁城县"
+  },
+  {
+    "id": 2028,
+    "parentId": 2022,
+    "name": "巴林右旗"
+  },
+  {
+    "id": 2027,
+    "parentId": 2022,
+    "name": "巴林左旗"
+  },
+  {
+    "id": 2034,
+    "parentId": 2022,
+    "name": "敖汉旗"
+  },
+  {
+    "id": 2025,
+    "parentId": 2022,
+    "name": "松山区"
+  },
+  {
+    "id": 2029,
+    "parentId": 2022,
+    "name": "林西县"
+  },
+  {
+    "id": 2023,
+    "parentId": 2022,
+    "name": "红山区"
+  },
+  {
+    "id": 2031,
+    "parentId": 2022,
+    "name": "翁牛特旗"
+  },
+  {
+    "id": 2026,
+    "parentId": 2022,
+    "name": "阿鲁科尔沁旗"
+  },
+  {
+    "id": 2035,
+    "parentId": 1989,
+    "name": "鄂尔多斯市"
+  },
+  {
+    "id": 2036,
+    "parentId": 2035,
+    "name": "东胜区"
+  },
+  {
+    "id": 2042,
+    "parentId": 2035,
+    "name": "乌审旗"
+  },
+  {
+    "id": 2043,
+    "parentId": 2035,
+    "name": "伊金霍洛旗"
+  },
+  {
+    "id": 2038,
+    "parentId": 2035,
+    "name": "准格尔旗"
+  },
+  {
+    "id": 2041,
+    "parentId": 2035,
+    "name": "杭锦旗"
+  },
+  {
+    "id": 2037,
+    "parentId": 2035,
+    "name": "达拉特旗"
+  },
+  {
+    "id": 2039,
+    "parentId": 2035,
+    "name": "鄂托克前旗"
+  },
+  {
+    "id": 2040,
+    "parentId": 2035,
+    "name": "鄂托克旗"
+  },
+  {
+    "id": 2044,
+    "parentId": 1989,
+    "name": "呼伦贝尔市"
+  },
+  {
+    "id": 2055,
+    "parentId": 2044,
+    "name": "扎兰屯市"
+  },
+  {
+    "id": 2052,
+    "parentId": 2044,
+    "name": "新巴尔虎右旗"
+  },
+  {
+    "id": 2051,
+    "parentId": 2044,
+    "name": "新巴尔虎左旗"
+  },
+  {
+    "id": 2057,
+    "parentId": 2044,
+    "name": "根河市"
+  },
+  {
+    "id": 2045,
+    "parentId": 2044,
+    "name": "海拉尔区"
+  },
+  {
+    "id": 2053,
+    "parentId": 2044,
+    "name": "满洲里市"
+  },
+  {
+    "id": 2054,
+    "parentId": 2044,
+    "name": "牙克石市"
+  },
+  {
+    "id": 2047,
+    "parentId": 2044,
+    "name": "莫力达瓦达斡尔族自治旗"
+  },
+  {
+    "id": 2048,
+    "parentId": 2044,
+    "name": "鄂伦春自治旗"
+  },
+  {
+    "id": 2049,
+    "parentId": 2044,
+    "name": "鄂温克族自治旗"
+  },
+  {
+    "id": 2046,
+    "parentId": 2044,
+    "name": "阿荣旗"
+  },
+  {
+    "id": 2050,
+    "parentId": 2044,
+    "name": "陈巴尔虎旗"
+  },
+  {
+    "id": 2056,
+    "parentId": 2044,
+    "name": "额尔古纳市"
+  },
+  {
+    "id": 2058,
+    "parentId": 1989,
+    "name": "通辽市"
+  },
+  {
+    "id": 2064,
+    "parentId": 2058,
+    "name": "奈曼旗"
+  },
+  {
+    "id": 2063,
+    "parentId": 2058,
+    "name": "库伦旗"
+  },
+  {
+    "id": 2062,
+    "parentId": 2058,
+    "name": "开鲁县"
+  },
+  {
+    "id": 2065,
+    "parentId": 2058,
+    "name": "扎鲁特旗"
+  },
+  {
+    "id": 2059,
+    "parentId": 2058,
+    "name": "科尔沁区"
+  },
+  {
+    "id": 2060,
+    "parentId": 2058,
+    "name": "科尔沁左翼中旗"
+  },
+  {
+    "id": 2061,
+    "parentId": 2058,
+    "name": "科尔沁左翼后旗"
+  },
+  {
+    "id": 2066,
+    "parentId": 2058,
+    "name": "霍林郭勒市"
+  },
+  {
+    "id": 2067,
+    "parentId": 1989,
+    "name": "乌海市"
+  },
+  {
+    "id": 2070,
+    "parentId": 2067,
+    "name": "乌达区"
+  },
+  {
+    "id": 2068,
+    "parentId": 2067,
+    "name": "海勃湾区"
+  },
+  {
+    "id": 2069,
+    "parentId": 2067,
+    "name": "海南区"
+  },
+  {
+    "id": 2071,
+    "parentId": 1989,
+    "name": "乌兰察布市"
+  },
+  {
+    "id": 2082,
+    "parentId": 2071,
+    "name": "丰镇市"
+  },
+  {
+    "id": 2076,
+    "parentId": 2071,
+    "name": "兴和县"
+  },
+  {
+    "id": 2077,
+    "parentId": 2071,
+    "name": "凉城县"
+  },
+  {
+    "id": 2074,
+    "parentId": 2071,
+    "name": "化德县"
+  },
+  {
+    "id": 2073,
+    "parentId": 2071,
+    "name": "卓资县"
+  },
+  {
+    "id": 2075,
+    "parentId": 2071,
+    "name": "商都县"
+  },
+  {
+    "id": 2081,
+    "parentId": 2071,
+    "name": "四子王旗"
+  },
+  {
+    "id": 2079,
+    "parentId": 2071,
+    "name": "察哈尔右翼中旗"
+  },
+  {
+    "id": 2078,
+    "parentId": 2071,
+    "name": "察哈尔右翼前旗"
+  },
+  {
+    "id": 2080,
+    "parentId": 2071,
+    "name": "察哈尔右翼后旗"
+  },
+  {
+    "id": 2072,
+    "parentId": 2071,
+    "name": "集宁区"
+  },
+  {
+    "id": 2083,
+    "parentId": 1989,
+    "name": "锡林郭勒盟"
+  },
+  {
+    "id": 2089,
+    "parentId": 2083,
+    "name": "东乌珠穆沁旗"
+  },
+  {
+    "id": 2084,
+    "parentId": 2083,
+    "name": "二连浩特市"
+  },
+  {
+    "id": 2095,
+    "parentId": 2083,
+    "name": "多伦县"
+  },
+  {
+    "id": 2091,
+    "parentId": 2083,
+    "name": "太仆寺旗"
+  },
+  {
+    "id": 2094,
+    "parentId": 2083,
+    "name": "正蓝旗"
+  },
+  {
+    "id": 2093,
+    "parentId": 2083,
+    "name": "正镶白旗"
+  },
+  {
+    "id": 2088,
+    "parentId": 2083,
+    "name": "苏尼特右旗"
+  },
+  {
+    "id": 2087,
+    "parentId": 2083,
+    "name": "苏尼特左旗"
+  },
+  {
+    "id": 2090,
+    "parentId": 2083,
+    "name": "西乌珠穆沁旗"
+  },
+  {
+    "id": 2085,
+    "parentId": 2083,
+    "name": "锡林浩特市"
+  },
+  {
+    "id": 2092,
+    "parentId": 2083,
+    "name": "镶黄旗"
+  },
+  {
+    "id": 2086,
+    "parentId": 2083,
+    "name": "阿巴嘎旗"
+  },
+  {
+    "id": 2096,
+    "parentId": 1989,
+    "name": "兴安盟"
+  },
+  {
+    "id": 2097,
+    "parentId": 2096,
+    "name": "乌兰浩特市"
+  },
+  {
+    "id": 2101,
+    "parentId": 2096,
+    "name": "扎赉特旗"
+  },
+  {
+    "id": 2100,
+    "parentId": 2096,
+    "name": "科尔沁右翼中旗"
+  },
+  {
+    "id": 2099,
+    "parentId": 2096,
+    "name": "科尔沁右翼前旗"
+  },
+  {
+    "id": 2102,
+    "parentId": 2096,
+    "name": "突泉县"
+  },
+  {
+    "id": 2098,
+    "parentId": 2096,
+    "name": "阿尔山市"
+  },
+  {
+    "id": 21,
+    "parentId": null,
+    "name": "上海"
+  },
+  {
+    "id": 22,
+    "parentId": 21,
+    "name": "上海市"
+  },
+  {
+    "id": 39,
+    "parentId": 22,
+    "name": "南汇区"
+  },
+  {
+    "id": 24,
+    "parentId": 22,
+    "name": "卢湾区"
+  },
+  {
+    "id": 34,
+    "parentId": 22,
+    "name": "嘉定区"
+  },
+  {
+    "id": 40,
+    "parentId": 22,
+    "name": "奉贤区"
+  },
+  {
+    "id": 33,
+    "parentId": 22,
+    "name": "宝山区"
+  },
+  {
+    "id": 41,
+    "parentId": 22,
+    "name": "崇明县"
+  },
+  {
+    "id": 25,
+    "parentId": 22,
+    "name": "徐汇区"
+  },
+  {
+    "id": 28,
+    "parentId": 22,
+    "name": "普陀区"
+  },
+  {
+    "id": 31,
+    "parentId": 22,
+    "name": "杨浦区"
+  },
+  {
+    "id": 37,
+    "parentId": 22,
+    "name": "松江区"
+  },
+  {
+    "id": 35,
+    "parentId": 22,
+    "name": "浦东新区"
+  },
+  {
+    "id": 30,
+    "parentId": 22,
+    "name": "虹口区"
+  },
+  {
+    "id": 36,
+    "parentId": 22,
+    "name": "金山区"
+  },
+  {
+    "id": 26,
+    "parentId": 22,
+    "name": "长宁区"
+  },
+  {
+    "id": 32,
+    "parentId": 22,
+    "name": "闵行区"
+  },
+  {
+    "id": 29,
+    "parentId": 22,
+    "name": "闸北区"
+  },
+  {
+    "id": 38,
+    "parentId": 22,
+    "name": "青浦区"
+  },
+  {
+    "id": 27,
+    "parentId": 22,
+    "name": "静安区"
+  },
+  {
+    "id": 23,
+    "parentId": 22,
+    "name": "黄浦区"
+  },
+  {
+    "id": 2103,
+    "parentId": null,
+    "name": "宁夏"
+  },
+  {
+    "id": 2104,
+    "parentId": 2103,
+    "name": "银川市"
+  },
+  {
+    "id": 2105,
+    "parentId": 2104,
+    "name": "兴庆区"
+  },
+  {
+    "id": 2108,
+    "parentId": 2104,
+    "name": "永宁县"
+  },
+  {
+    "id": 2110,
+    "parentId": 2104,
+    "name": "灵武市"
+  },
+  {
+    "id": 2106,
+    "parentId": 2104,
+    "name": "西夏区"
+  },
+  {
+    "id": 2109,
+    "parentId": 2104,
+    "name": "贺兰县"
+  },
+  {
+    "id": 2107,
+    "parentId": 2104,
+    "name": "金凤区"
+  },
+  {
+    "id": 2111,
+    "parentId": 2103,
+    "name": "固原市"
+  },
+  {
+    "id": 2112,
+    "parentId": 2111,
+    "name": "原州区"
+  },
+  {
+    "id": 2116,
+    "parentId": 2111,
+    "name": "彭阳县"
+  },
+  {
+    "id": 2115,
+    "parentId": 2111,
+    "name": "泾源县"
+  },
+  {
+    "id": 2113,
+    "parentId": 2111,
+    "name": "西吉县"
+  },
+  {
+    "id": 2114,
+    "parentId": 2111,
+    "name": "隆德县"
+  },
+  {
+    "id": 2117,
+    "parentId": 2103,
+    "name": "石嘴山市"
+  },
+  {
+    "id": 2118,
+    "parentId": 2117,
+    "name": "大武口区"
+  },
+  {
+    "id": 2120,
+    "parentId": 2117,
+    "name": "平罗县"
+  },
+  {
+    "id": 2119,
+    "parentId": 2117,
+    "name": "惠农区"
+  },
+  {
+    "id": 2121,
+    "parentId": 2103,
+    "name": "吴忠市"
+  },
+  {
+    "id": 2122,
+    "parentId": 2121,
+    "name": "利通区"
+  },
+  {
+    "id": 2124,
+    "parentId": 2121,
+    "name": "同心县"
+  },
+  {
+    "id": 2123,
+    "parentId": 2121,
+    "name": "盐池县"
+  },
+  {
+    "id": 2125,
+    "parentId": 2121,
+    "name": "青铜峡市"
+  },
+  {
+    "id": 2126,
+    "parentId": 2103,
+    "name": "中卫市"
+  },
+  {
+    "id": 2128,
+    "parentId": 2126,
+    "name": "中宁县"
+  },
+  {
+    "id": 2127,
+    "parentId": 2126,
+    "name": "沙坡头区"
+  },
+  {
+    "id": 2129,
+    "parentId": 2126,
+    "name": "海原县"
+  },
+  {
+    "id": 2130,
+    "parentId": null,
+    "name": "青海"
+  },
+  {
+    "id": 2131,
+    "parentId": 2130,
+    "name": "西宁市"
+  },
+  {
+    "id": 2132,
+    "parentId": 2131,
+    "name": "城东区"
+  },
+  {
+    "id": 2133,
+    "parentId": 2131,
+    "name": "城中区"
+  },
+  {
+    "id": 2135,
+    "parentId": 2131,
+    "name": "城北区"
+  },
+  {
+    "id": 2134,
+    "parentId": 2131,
+    "name": "城西区"
+  },
+  {
+    "id": 2136,
+    "parentId": 2131,
+    "name": "大通回族土族自治县"
+  },
+  {
+    "id": 2137,
+    "parentId": 2131,
+    "name": "湟中县"
+  },
+  {
+    "id": 2138,
+    "parentId": 2131,
+    "name": "湟源县"
+  },
+  {
+    "id": 2139,
+    "parentId": 2130,
+    "name": "果洛藏族自治州"
+  },
+  {
+    "id": 2144,
+    "parentId": 2139,
+    "name": "久治县"
+  },
+  {
+    "id": 2145,
+    "parentId": 2139,
+    "name": "玛多县"
+  },
+  {
+    "id": 2140,
+    "parentId": 2139,
+    "name": "玛沁县"
+  },
+  {
+    "id": 2141,
+    "parentId": 2139,
+    "name": "班玛县"
+  },
+  {
+    "id": 2142,
+    "parentId": 2139,
+    "name": "甘德县"
+  },
+  {
+    "id": 2143,
+    "parentId": 2139,
+    "name": "达日县"
+  },
+  {
+    "id": 2146,
+    "parentId": 2130,
+    "name": "海北藏族自治州"
+  },
+  {
+    "id": 2150,
+    "parentId": 2146,
+    "name": "刚察县"
+  },
+  {
+    "id": 2149,
+    "parentId": 2146,
+    "name": "海晏县"
+  },
+  {
+    "id": 2148,
+    "parentId": 2146,
+    "name": "祁连县"
+  },
+  {
+    "id": 2147,
+    "parentId": 2146,
+    "name": "门源回族自治县"
+  },
+  {
+    "id": 2151,
+    "parentId": 2130,
+    "name": "海东地区"
+  },
+  {
+    "id": 2154,
+    "parentId": 2151,
+    "name": "乐都县"
+  },
+  {
+    "id": 2155,
+    "parentId": 2151,
+    "name": "互助土族自治县"
+  },
+  {
+    "id": 2156,
+    "parentId": 2151,
+    "name": "化隆回族自治县"
+  },
+  {
+    "id": 2152,
+    "parentId": 2151,
+    "name": "平安县"
+  },
+  {
+    "id": 2157,
+    "parentId": 2151,
+    "name": "循化撒拉族自治县"
+  },
+  {
+    "id": 2153,
+    "parentId": 2151,
+    "name": "民和回族土族自治县"
+  },
+  {
+    "id": 2158,
+    "parentId": 2130,
+    "name": "海南藏族自治州"
+  },
+  {
+    "id": 2159,
+    "parentId": 2158,
+    "name": "共和县"
+  },
+  {
+    "id": 2162,
+    "parentId": 2158,
+    "name": "兴海县"
+  },
+  {
+    "id": 2160,
+    "parentId": 2158,
+    "name": "同德县"
+  },
+  {
+    "id": 2163,
+    "parentId": 2158,
+    "name": "贵南县"
+  },
+  {
+    "id": 2161,
+    "parentId": 2158,
+    "name": "贵德县"
+  },
+  {
+    "id": 2164,
+    "parentId": 2130,
+    "name": "海西蒙古族藏族自治州"
+  },
+  {
+    "id": 2167,
+    "parentId": 2164,
+    "name": "乌兰县"
+  },
+  {
+    "id": 2169,
+    "parentId": 2164,
+    "name": "天峻县"
+  },
+  {
+    "id": 2166,
+    "parentId": 2164,
+    "name": "德令哈市"
+  },
+  {
+    "id": 2165,
+    "parentId": 2164,
+    "name": "格尔木市"
+  },
+  {
+    "id": 2168,
+    "parentId": 2164,
+    "name": "都兰县"
+  },
+  {
+    "id": 2170,
+    "parentId": 2130,
+    "name": "黄南藏族自治州"
+  },
+  {
+    "id": 2171,
+    "parentId": 2170,
+    "name": "同仁县"
+  },
+  {
+    "id": 2172,
+    "parentId": 2170,
+    "name": "尖扎县"
+  },
+  {
+    "id": 2174,
+    "parentId": 2170,
+    "name": "河南蒙古族自治县"
+  },
+  {
+    "id": 2173,
+    "parentId": 2170,
+    "name": "泽库县"
+  },
+  {
+    "id": 2175,
+    "parentId": 2130,
+    "name": "玉树藏族自治州"
+  },
+  {
+    "id": 2180,
+    "parentId": 2175,
+    "name": "囊谦县"
+  },
+  {
+    "id": 2181,
+    "parentId": 2175,
+    "name": "曲麻莱县"
+  },
+  {
+    "id": 2177,
+    "parentId": 2175,
+    "name": "杂多县"
+  },
+  {
+    "id": 2179,
+    "parentId": 2175,
+    "name": "治多县"
+  },
+  {
+    "id": 2176,
+    "parentId": 2175,
+    "name": "玉树县"
+  },
+  {
+    "id": 2178,
+    "parentId": 2175,
+    "name": "称多县"
+  },
+  {
+    "id": 2182,
+    "parentId": null,
+    "name": "山东"
+  },
+  {
+    "id": 2183,
+    "parentId": 2182,
+    "name": "济南市"
+  },
+  {
+    "id": 2184,
+    "parentId": 2183,
+    "name": "历下区"
+  },
+  {
+    "id": 2188,
+    "parentId": 2183,
+    "name": "历城区"
+  },
+  {
+    "id": 2192,
+    "parentId": 2183,
+    "name": "商河县"
+  },
+  {
+    "id": 2187,
+    "parentId": 2183,
+    "name": "天桥区"
+  },
+  {
+    "id": 2185,
+    "parentId": 2183,
+    "name": "市中区"
+  },
+  {
+    "id": 2190,
+    "parentId": 2183,
+    "name": "平阴县"
+  },
+  {
+    "id": 2186,
+    "parentId": 2183,
+    "name": "槐荫区"
+  },
+  {
+    "id": 2191,
+    "parentId": 2183,
+    "name": "济阳县"
+  },
+  {
+    "id": 2193,
+    "parentId": 2183,
+    "name": "章丘市"
+  },
+  {
+    "id": 2189,
+    "parentId": 2183,
+    "name": "长清区"
+  },
+  {
+    "id": 2194,
+    "parentId": 2182,
+    "name": "滨州市"
+  },
+  {
+    "id": 2200,
+    "parentId": 2194,
+    "name": "博兴县"
+  },
+  {
+    "id": 2196,
+    "parentId": 2194,
+    "name": "惠民县"
+  },
+  {
+    "id": 2198,
+    "parentId": 2194,
+    "name": "无棣县"
+  },
+  {
+    "id": 2199,
+    "parentId": 2194,
+    "name": "沾化县"
+  },
+  {
+    "id": 2195,
+    "parentId": 2194,
+    "name": "滨城区"
+  },
+  {
+    "id": 2201,
+    "parentId": 2194,
+    "name": "邹平县"
+  },
+  {
+    "id": 2197,
+    "parentId": 2194,
+    "name": "阳信县"
+  },
+  {
+    "id": 2202,
+    "parentId": 2182,
+    "name": "德州市"
+  },
+  {
+    "id": 2207,
+    "parentId": 2202,
+    "name": "临邑县"
+  },
+  {
+    "id": 2212,
+    "parentId": 2202,
+    "name": "乐陵市"
+  },
+  {
+    "id": 2210,
+    "parentId": 2202,
+    "name": "夏津县"
+  },
+  {
+    "id": 2205,
+    "parentId": 2202,
+    "name": "宁津县"
+  },
+  {
+    "id": 2209,
+    "parentId": 2202,
+    "name": "平原县"
+  },
+  {
+    "id": 2206,
+    "parentId": 2202,
+    "name": "庆云县"
+  },
+  {
+    "id": 2203,
+    "parentId": 2202,
+    "name": "德城区"
+  },
+  {
+    "id": 2211,
+    "parentId": 2202,
+    "name": "武城县"
+  },
+  {
+    "id": 2213,
+    "parentId": 2202,
+    "name": "禹城市"
+  },
+  {
+    "id": 2204,
+    "parentId": 2202,
+    "name": "陵县"
+  },
+  {
+    "id": 2208,
+    "parentId": 2202,
+    "name": "齐河县"
+  },
+  {
+    "id": 2214,
+    "parentId": 2182,
+    "name": "东营市"
+  },
+  {
+    "id": 2215,
+    "parentId": 2214,
+    "name": "东营区"
+  },
+  {
+    "id": 2218,
+    "parentId": 2214,
+    "name": "利津县"
+  },
+  {
+    "id": 2217,
+    "parentId": 2214,
+    "name": "垦利县"
+  },
+  {
+    "id": 2219,
+    "parentId": 2214,
+    "name": "广饶县"
+  },
+  {
+    "id": 2216,
+    "parentId": 2214,
+    "name": "河口区"
+  },
+  {
+    "id": 2220,
+    "parentId": 2182,
+    "name": "菏泽市"
+  },
+  {
+    "id": 2229,
+    "parentId": 2220,
+    "name": "东明县"
+  },
+  {
+    "id": 2223,
+    "parentId": 2220,
+    "name": "单县"
+  },
+  {
+    "id": 2228,
+    "parentId": 2220,
+    "name": "定陶县"
+  },
+  {
+    "id": 2225,
+    "parentId": 2220,
+    "name": "巨野县"
+  },
+  {
+    "id": 2224,
+    "parentId": 2220,
+    "name": "成武县"
+  },
+  {
+    "id": 2222,
+    "parentId": 2220,
+    "name": "曹县"
+  },
+  {
+    "id": 2221,
+    "parentId": 2220,
+    "name": "牡丹区"
+  },
+  {
+    "id": 2226,
+    "parentId": 2220,
+    "name": "郓城县"
+  },
+  {
+    "id": 2227,
+    "parentId": 2220,
+    "name": "鄄城县"
+  },
+  {
+    "id": 2230,
+    "parentId": 2182,
+    "name": "济宁市"
+  },
+  {
+    "id": 2232,
+    "parentId": 2230,
+    "name": "任城区"
+  },
+  {
+    "id": 2241,
+    "parentId": 2230,
+    "name": "兖州市"
+  },
+  {
+    "id": 2236,
+    "parentId": 2230,
+    "name": "嘉祥县"
+  },
+  {
+    "id": 2231,
+    "parentId": 2230,
+    "name": "市中区"
+  },
+  {
+    "id": 2233,
+    "parentId": 2230,
+    "name": "微山县"
+  },
+  {
+    "id": 2240,
+    "parentId": 2230,
+    "name": "曲阜市"
+  },
+  {
+    "id": 2239,
+    "parentId": 2230,
+    "name": "梁山县"
+  },
+  {
+    "id": 2237,
+    "parentId": 2230,
+    "name": "汶上县"
+  },
+  {
+    "id": 2238,
+    "parentId": 2230,
+    "name": "泗水县"
+  },
+  {
+    "id": 2242,
+    "parentId": 2230,
+    "name": "邹城市"
+  },
+  {
+    "id": 2235,
+    "parentId": 2230,
+    "name": "金乡县"
+  },
+  {
+    "id": 2234,
+    "parentId": 2230,
+    "name": "鱼台县"
+  },
+  {
+    "id": 2243,
+    "parentId": 2182,
+    "name": "莱芜市"
+  },
+  {
+    "id": 2244,
+    "parentId": 2243,
+    "name": "莱城区"
+  },
+  {
+    "id": 2245,
+    "parentId": 2243,
+    "name": "钢城区"
+  },
+  {
+    "id": 2246,
+    "parentId": 2182,
+    "name": "聊城市"
+  },
+  {
+    "id": 2247,
+    "parentId": 2246,
+    "name": "东昌府区"
+  },
+  {
+    "id": 2251,
+    "parentId": 2246,
+    "name": "东阿县"
+  },
+  {
+    "id": 2254,
+    "parentId": 2246,
+    "name": "临清市"
+  },
+  {
+    "id": 2252,
+    "parentId": 2246,
+    "name": "冠县"
+  },
+  {
+    "id": 2250,
+    "parentId": 2246,
+    "name": "茌平县"
+  },
+  {
+    "id": 2249,
+    "parentId": 2246,
+    "name": "莘县"
+  },
+  {
+    "id": 2248,
+    "parentId": 2246,
+    "name": "阳谷县"
+  },
+  {
+    "id": 2253,
+    "parentId": 2246,
+    "name": "高唐县"
+  },
+  {
+    "id": 2255,
+    "parentId": 2182,
+    "name": "临沂市"
+  },
+  {
+    "id": 2267,
+    "parentId": 2255,
+    "name": "临沭县"
+  },
+  {
+    "id": 2256,
+    "parentId": 2255,
+    "name": "兰山区"
+  },
+  {
+    "id": 2264,
+    "parentId": 2255,
+    "name": "平邑县"
+  },
+  {
+    "id": 2259,
+    "parentId": 2255,
+    "name": "沂南县"
+  },
+  {
+    "id": 2261,
+    "parentId": 2255,
+    "name": "沂水县"
+  },
+  {
+    "id": 2258,
+    "parentId": 2255,
+    "name": "河东区"
+  },
+  {
+    "id": 2257,
+    "parentId": 2255,
+    "name": "罗庄区"
+  },
+  {
+    "id": 2262,
+    "parentId": 2255,
+    "name": "苍山县"
+  },
+  {
+    "id": 2265,
+    "parentId": 2255,
+    "name": "莒南县"
+  },
+  {
+    "id": 2266,
+    "parentId": 2255,
+    "name": "蒙阴县"
+  },
+  {
+    "id": 2263,
+    "parentId": 2255,
+    "name": "费县"
+  },
+  {
+    "id": 2260,
+    "parentId": 2255,
+    "name": "郯城县"
+  },
+  {
+    "id": 2268,
+    "parentId": 2182,
+    "name": "青岛市"
+  },
+  {
+    "id": 2277,
+    "parentId": 2268,
+    "name": "即墨市"
+  },
+  {
+    "id": 2271,
+    "parentId": 2268,
+    "name": "四方区"
+  },
+  {
+    "id": 2275,
+    "parentId": 2268,
+    "name": "城阳区"
+  },
+  {
+    "id": 2273,
+    "parentId": 2268,
+    "name": "崂山区"
+  },
+  {
+    "id": 2270,
+    "parentId": 2268,
+    "name": "市北区"
+  },
+  {
+    "id": 2269,
+    "parentId": 2268,
+    "name": "市南区"
+  },
+  {
+    "id": 2278,
+    "parentId": 2268,
+    "name": "平度市"
+  },
+  {
+    "id": 2274,
+    "parentId": 2268,
+    "name": "李沧区"
+  },
+  {
+    "id": 2279,
+    "parentId": 2268,
+    "name": "胶南市"
+  },
+  {
+    "id": 2276,
+    "parentId": 2268,
+    "name": "胶州市"
+  },
+  {
+    "id": 2280,
+    "parentId": 2268,
+    "name": "莱西市"
+  },
+  {
+    "id": 2272,
+    "parentId": 2268,
+    "name": "黄岛区"
+  },
+  {
+    "id": 2281,
+    "parentId": 2182,
+    "name": "日照市"
+  },
+  {
+    "id": 2282,
+    "parentId": 2281,
+    "name": "东港区"
+  },
+  {
+    "id": 2284,
+    "parentId": 2281,
+    "name": "五莲县"
+  },
+  {
+    "id": 2283,
+    "parentId": 2281,
+    "name": "岚山区"
+  },
+  {
+    "id": 2285,
+    "parentId": 2281,
+    "name": "莒县"
+  },
+  {
+    "id": 2286,
+    "parentId": 2182,
+    "name": "泰安市"
+  },
+  {
+    "id": 2290,
+    "parentId": 2286,
+    "name": "东平县"
+  },
+  {
+    "id": 2289,
+    "parentId": 2286,
+    "name": "宁阳县"
+  },
+  {
+    "id": 2288,
+    "parentId": 2286,
+    "name": "岱岳区"
+  },
+  {
+    "id": 2291,
+    "parentId": 2286,
+    "name": "新泰市"
+  },
+  {
+    "id": 2287,
+    "parentId": 2286,
+    "name": "泰山区"
+  },
+  {
+    "id": 2292,
+    "parentId": 2286,
+    "name": "肥城市"
+  },
+  {
+    "id": 2293,
+    "parentId": 2182,
+    "name": "威海市"
+  },
+  {
+    "id": 2297,
+    "parentId": 2293,
+    "name": "乳山市"
+  },
+  {
+    "id": 2295,
+    "parentId": 2293,
+    "name": "文登市"
+  },
+  {
+    "id": 2294,
+    "parentId": 2293,
+    "name": "环翠区"
+  },
+  {
+    "id": 2296,
+    "parentId": 2293,
+    "name": "荣成市"
+  },
+  {
+    "id": 2298,
+    "parentId": 2182,
+    "name": "潍坊市"
+  },
+  {
+    "id": 2303,
+    "parentId": 2298,
+    "name": "临朐县"
+  },
+  {
+    "id": 2301,
+    "parentId": 2298,
+    "name": "坊子区"
+  },
+  {
+    "id": 2302,
+    "parentId": 2298,
+    "name": "奎文区"
+  },
+  {
+    "id": 2308,
+    "parentId": 2298,
+    "name": "安丘市"
+  },
+  {
+    "id": 2300,
+    "parentId": 2298,
+    "name": "寒亭区"
+  },
+  {
+    "id": 2307,
+    "parentId": 2298,
+    "name": "寿光市"
+  },
+  {
+    "id": 2304,
+    "parentId": 2298,
+    "name": "昌乐县"
+  },
+  {
+    "id": 2310,
+    "parentId": 2298,
+    "name": "昌邑市"
+  },
+  {
+    "id": 2299,
+    "parentId": 2298,
+    "name": "潍城区"
+  },
+  {
+    "id": 2306,
+    "parentId": 2298,
+    "name": "诸城市"
+  },
+  {
+    "id": 2305,
+    "parentId": 2298,
+    "name": "青州市"
+  },
+  {
+    "id": 2309,
+    "parentId": 2298,
+    "name": "高密市"
+  },
+  {
+    "id": 2311,
+    "parentId": 2182,
+    "name": "烟台市"
+  },
+  {
+    "id": 2321,
+    "parentId": 2311,
+    "name": "招远市"
+  },
+  {
+    "id": 2322,
+    "parentId": 2311,
+    "name": "栖霞市"
+  },
+  {
+    "id": 2323,
+    "parentId": 2311,
+    "name": "海阳市"
+  },
+  {
+    "id": 2314,
+    "parentId": 2311,
+    "name": "牟平区"
+  },
+  {
+    "id": 2313,
+    "parentId": 2311,
+    "name": "福山区"
+  },
+  {
+    "id": 2312,
+    "parentId": 2311,
+    "name": "芝罘区"
+  },
+  {
+    "id": 2315,
+    "parentId": 2311,
+    "name": "莱山区"
+  },
+  {
+    "id": 2319,
+    "parentId": 2311,
+    "name": "莱州市"
+  },
+  {
+    "id": 2318,
+    "parentId": 2311,
+    "name": "莱阳市"
+  },
+  {
+    "id": 2320,
+    "parentId": 2311,
+    "name": "蓬莱市"
+  },
+  {
+    "id": 2316,
+    "parentId": 2311,
+    "name": "长岛县"
+  },
+  {
+    "id": 2317,
+    "parentId": 2311,
+    "name": "龙口市"
+  },
+  {
+    "id": 2324,
+    "parentId": 2182,
+    "name": "枣庄市"
+  },
+  {
+    "id": 2328,
+    "parentId": 2324,
+    "name": "台儿庄区"
+  },
+  {
+    "id": 2329,
+    "parentId": 2324,
+    "name": "山亭区"
+  },
+  {
+    "id": 2327,
+    "parentId": 2324,
+    "name": "峄城区"
+  },
+  {
+    "id": 2325,
+    "parentId": 2324,
+    "name": "市中区"
+  },
+  {
+    "id": 2330,
+    "parentId": 2324,
+    "name": "滕州市"
+  },
+  {
+    "id": 2326,
+    "parentId": 2324,
+    "name": "薛城区"
+  },
+  {
+    "id": 2331,
+    "parentId": 2182,
+    "name": "淄博市"
+  },
+  {
+    "id": 2335,
+    "parentId": 2331,
+    "name": "临淄区"
+  },
+  {
+    "id": 2334,
+    "parentId": 2331,
+    "name": "博山区"
+  },
+  {
+    "id": 2336,
+    "parentId": 2331,
+    "name": "周村区"
+  },
+  {
+    "id": 2333,
+    "parentId": 2331,
+    "name": "张店区"
+  },
+  {
+    "id": 2337,
+    "parentId": 2331,
+    "name": "桓台县"
+  },
+  {
+    "id": 2339,
+    "parentId": 2331,
+    "name": "沂源县"
+  },
+  {
+    "id": 2332,
+    "parentId": 2331,
+    "name": "淄川区"
+  },
+  {
+    "id": 2338,
+    "parentId": 2331,
+    "name": "高青县"
+  },
+  {
+    "id": 227,
+    "parentId": null,
+    "name": "福建"
+  },
+  {
+    "id": 228,
+    "parentId": 227,
+    "name": "福州市"
+  },
+  {
+    "id": 231,
+    "parentId": 228,
+    "name": "仓山区"
+  },
+  {
+    "id": 230,
+    "parentId": 228,
+    "name": "台江区"
+  },
+  {
+    "id": 239,
+    "parentId": 228,
+    "name": "平潭县"
+  },
+  {
+    "id": 233,
+    "parentId": 228,
+    "name": "晋安区"
+  },
+  {
+    "id": 238,
+    "parentId": 228,
+    "name": "永泰县"
+  },
+  {
+    "id": 240,
+    "parentId": 228,
+    "name": "福清市"
+  },
+  {
+    "id": 236,
+    "parentId": 228,
+    "name": "罗源县"
+  },
+  {
+    "id": 235,
+    "parentId": 228,
+    "name": "连江县"
+  },
+  {
+    "id": 241,
+    "parentId": 228,
+    "name": "长乐市"
+  },
+  {
+    "id": 234,
+    "parentId": 228,
+    "name": "闽侯县"
+  },
+  {
+    "id": 237,
+    "parentId": 228,
+    "name": "闽清县"
+  },
+  {
+    "id": 232,
+    "parentId": 228,
+    "name": "马尾区"
+  },
+  {
+    "id": 229,
+    "parentId": 228,
+    "name": "鼓楼区"
+  },
+  {
+    "id": 242,
+    "parentId": 227,
+    "name": "龙岩市"
+  },
+  {
+    "id": 246,
+    "parentId": 242,
+    "name": "上杭县"
+  },
+  {
+    "id": 243,
+    "parentId": 242,
+    "name": "新罗区"
+  },
+  {
+    "id": 247,
+    "parentId": 242,
+    "name": "武平县"
+  },
+  {
+    "id": 245,
+    "parentId": 242,
+    "name": "永定县"
+  },
+  {
+    "id": 249,
+    "parentId": 242,
+    "name": "漳平市"
+  },
+  {
+    "id": 248,
+    "parentId": 242,
+    "name": "连城县"
+  },
+  {
+    "id": 244,
+    "parentId": 242,
+    "name": "长汀县"
+  },
+  {
+    "id": 250,
+    "parentId": 227,
+    "name": "南平市"
+  },
+  {
+    "id": 254,
+    "parentId": 250,
+    "name": "光泽县"
+  },
+  {
+    "id": 251,
+    "parentId": 250,
+    "name": "延平区"
+  },
+  {
+    "id": 259,
+    "parentId": 250,
+    "name": "建瓯市"
+  },
+  {
+    "id": 260,
+    "parentId": 250,
+    "name": "建阳市"
+  },
+  {
+    "id": 256,
+    "parentId": 250,
+    "name": "政和县"
+  },
+  {
+    "id": 255,
+    "parentId": 250,
+    "name": "松溪县"
+  },
+  {
+    "id": 258,
+    "parentId": 250,
+    "name": "武夷山市"
+  },
+  {
+    "id": 253,
+    "parentId": 250,
+    "name": "浦城县"
+  },
+  {
+    "id": 257,
+    "parentId": 250,
+    "name": "邵武市"
+  },
+  {
+    "id": 252,
+    "parentId": 250,
+    "name": "顺昌县"
+  },
+  {
+    "id": 261,
+    "parentId": 227,
+    "name": "宁德市"
+  },
+  {
+    "id": 264,
+    "parentId": 261,
+    "name": "古田县"
+  },
+  {
+    "id": 267,
+    "parentId": 261,
+    "name": "周宁县"
+  },
+  {
+    "id": 266,
+    "parentId": 261,
+    "name": "寿宁县"
+  },
+  {
+    "id": 265,
+    "parentId": 261,
+    "name": "屏南县"
+  },
+  {
+    "id": 268,
+    "parentId": 261,
+    "name": "柘荣县"
+  },
+  {
+    "id": 269,
+    "parentId": 261,
+    "name": "福安市"
+  },
+  {
+    "id": 270,
+    "parentId": 261,
+    "name": "福鼎市"
+  },
+  {
+    "id": 262,
+    "parentId": 261,
+    "name": "蕉城区"
+  },
+  {
+    "id": 263,
+    "parentId": 261,
+    "name": "霞浦县"
+  },
+  {
+    "id": 271,
+    "parentId": 227,
+    "name": "莆田市"
+  },
+  {
+    "id": 276,
+    "parentId": 271,
+    "name": "仙游县"
+  },
+  {
+    "id": 272,
+    "parentId": 271,
+    "name": "城厢区"
+  },
+  {
+    "id": 273,
+    "parentId": 271,
+    "name": "涵江区"
+  },
+  {
+    "id": 275,
+    "parentId": 271,
+    "name": "秀屿区"
+  },
+  {
+    "id": 274,
+    "parentId": 271,
+    "name": "荔城区"
+  },
+  {
+    "id": 277,
+    "parentId": 227,
+    "name": "泉州市"
+  },
+  {
+    "id": 279,
+    "parentId": 277,
+    "name": "丰泽区"
+  },
+  {
+    "id": 289,
+    "parentId": 277,
+    "name": "南安市"
+  },
+  {
+    "id": 283,
+    "parentId": 277,
+    "name": "安溪县"
+  },
+  {
+    "id": 285,
+    "parentId": 277,
+    "name": "德化县"
+  },
+  {
+    "id": 282,
+    "parentId": 277,
+    "name": "惠安县"
+  },
+  {
+    "id": 288,
+    "parentId": 277,
+    "name": "晋江市"
+  },
+  {
+    "id": 284,
+    "parentId": 277,
+    "name": "永春县"
+  },
+  {
+    "id": 281,
+    "parentId": 277,
+    "name": "泉港区"
+  },
+  {
+    "id": 280,
+    "parentId": 277,
+    "name": "洛江区"
+  },
+  {
+    "id": 287,
+    "parentId": 277,
+    "name": "石狮市"
+  },
+  {
+    "id": 286,
+    "parentId": 277,
+    "name": "金门县"
+  },
+  {
+    "id": 278,
+    "parentId": 277,
+    "name": "鲤城区"
+  },
+  {
+    "id": 290,
+    "parentId": 227,
+    "name": "三明市"
+  },
+  {
+    "id": 292,
+    "parentId": 290,
+    "name": "三元区"
+  },
+  {
+    "id": 296,
+    "parentId": 290,
+    "name": "大田县"
+  },
+  {
+    "id": 295,
+    "parentId": 290,
+    "name": "宁化县"
+  },
+  {
+    "id": 299,
+    "parentId": 290,
+    "name": "将乐县"
+  },
+  {
+    "id": 297,
+    "parentId": 290,
+    "name": "尤溪县"
+  },
+  {
+    "id": 301,
+    "parentId": 290,
+    "name": "建宁县"
+  },
+  {
+    "id": 293,
+    "parentId": 290,
+    "name": "明溪县"
+  },
+  {
+    "id": 291,
+    "parentId": 290,
+    "name": "梅列区"
+  },
+  {
+    "id": 302,
+    "parentId": 290,
+    "name": "永安市"
+  },
+  {
+    "id": 298,
+    "parentId": 290,
+    "name": "沙县"
+  },
+  {
+    "id": 300,
+    "parentId": 290,
+    "name": "泰宁县"
+  },
+  {
+    "id": 294,
+    "parentId": 290,
+    "name": "清流县"
+  },
+  {
+    "id": 303,
+    "parentId": 227,
+    "name": "厦门市"
+  },
+  {
+    "id": 308,
+    "parentId": 303,
+    "name": "同安区"
+  },
+  {
+    "id": 304,
+    "parentId": 303,
+    "name": "思明区"
+  },
+  {
+    "id": 305,
+    "parentId": 303,
+    "name": "海沧区"
+  },
+  {
+    "id": 306,
+    "parentId": 303,
+    "name": "湖里区"
+  },
+  {
+    "id": 309,
+    "parentId": 303,
+    "name": "翔安区"
+  },
+  {
+    "id": 307,
+    "parentId": 303,
+    "name": "集美区"
+  },
+  {
+    "id": 310,
+    "parentId": 227,
+    "name": "漳州市"
+  },
+  {
+    "id": 317,
+    "parentId": 310,
+    "name": "东山县"
+  },
+  {
+    "id": 313,
+    "parentId": 310,
+    "name": "云霄县"
+  },
+  {
+    "id": 320,
+    "parentId": 310,
+    "name": "华安县"
+  },
+  {
+    "id": 318,
+    "parentId": 310,
+    "name": "南靖县"
+  },
+  {
+    "id": 319,
+    "parentId": 310,
+    "name": "平和县"
+  },
+  {
+    "id": 314,
+    "parentId": 310,
+    "name": "漳浦县"
+  },
+  {
+    "id": 311,
+    "parentId": 310,
+    "name": "芗城区"
+  },
+  {
+    "id": 315,
+    "parentId": 310,
+    "name": "诏安县"
+  },
+  {
+    "id": 316,
+    "parentId": 310,
+    "name": "长泰县"
+  },
+  {
+    "id": 312,
+    "parentId": 310,
+    "name": "龙文区"
+  },
+  {
+    "id": 321,
+    "parentId": 310,
+    "name": "龙海市"
+  },
+  {
+    "id": 2340,
+    "parentId": null,
+    "name": "山西"
+  },
+  {
+    "id": 2341,
+    "parentId": 2340,
+    "name": "太原市"
+  },
+  {
+    "id": 2346,
+    "parentId": 2341,
+    "name": "万柏林区"
+  },
+  {
+    "id": 2351,
+    "parentId": 2341,
+    "name": "古交市"
+  },
+  {
+    "id": 2350,
+    "parentId": 2341,
+    "name": "娄烦县"
+  },
+  {
+    "id": 2342,
+    "parentId": 2341,
+    "name": "小店区"
+  },
+  {
+    "id": 2345,
+    "parentId": 2341,
+    "name": "尖草坪区"
+  },
+  {
+    "id": 2347,
+    "parentId": 2341,
+    "name": "晋源区"
+  },
+  {
+    "id": 2344,
+    "parentId": 2341,
+    "name": "杏花岭区"
+  },
+  {
+    "id": 2348,
+    "parentId": 2341,
+    "name": "清徐县"
+  },
+  {
+    "id": 2343,
+    "parentId": 2341,
+    "name": "迎泽区"
+  },
+  {
+    "id": 2349,
+    "parentId": 2341,
+    "name": "阳曲县"
+  },
+  {
+    "id": 2352,
+    "parentId": 2340,
+    "name": "长治市"
+  },
+  {
+    "id": 2353,
+    "parentId": 2352,
+    "name": "城区"
+  },
+  {
+    "id": 2360,
+    "parentId": 2352,
+    "name": "壶关县"
+  },
+  {
+    "id": 2357,
+    "parentId": 2352,
+    "name": "屯留县"
+  },
+  {
+    "id": 2358,
+    "parentId": 2352,
+    "name": "平顺县"
+  },
+  {
+    "id": 2362,
+    "parentId": 2352,
+    "name": "武乡县"
+  },
+  {
+    "id": 2363,
+    "parentId": 2352,
+    "name": "沁县"
+  },
+  {
+    "id": 2364,
+    "parentId": 2352,
+    "name": "沁源县"
+  },
+  {
+    "id": 2365,
+    "parentId": 2352,
+    "name": "潞城市"
+  },
+  {
+    "id": 2356,
+    "parentId": 2352,
+    "name": "襄垣县"
+  },
+  {
+    "id": 2354,
+    "parentId": 2352,
+    "name": "郊区"
+  },
+  {
+    "id": 2361,
+    "parentId": 2352,
+    "name": "长子县"
+  },
+  {
+    "id": 2355,
+    "parentId": 2352,
+    "name": "长治县"
+  },
+  {
+    "id": 2359,
+    "parentId": 2352,
+    "name": "黎城县"
+  },
+  {
+    "id": 2366,
+    "parentId": 2340,
+    "name": "大同市"
+  },
+  {
+    "id": 2369,
+    "parentId": 2366,
+    "name": "南郊区"
+  },
+  {
+    "id": 2367,
+    "parentId": 2366,
+    "name": "城区"
+  },
+  {
+    "id": 2377,
+    "parentId": 2366,
+    "name": "大同县"
+  },
+  {
+    "id": 2372,
+    "parentId": 2366,
+    "name": "天镇县"
+  },
+  {
+    "id": 2376,
+    "parentId": 2366,
+    "name": "左云县"
+  },
+  {
+    "id": 2373,
+    "parentId": 2366,
+    "name": "广灵县"
+  },
+  {
+    "id": 2370,
+    "parentId": 2366,
+    "name": "新荣区"
+  },
+  {
+    "id": 2375,
+    "parentId": 2366,
+    "name": "浑源县"
+  },
+  {
+    "id": 2374,
+    "parentId": 2366,
+    "name": "灵丘县"
+  },
+  {
+    "id": 2368,
+    "parentId": 2366,
+    "name": "矿区"
+  },
+  {
+    "id": 2371,
+    "parentId": 2366,
+    "name": "阳高县"
+  },
+  {
+    "id": 2378,
+    "parentId": 2340,
+    "name": "晋城市"
+  },
+  {
+    "id": 2379,
+    "parentId": 2378,
+    "name": "城区"
+  },
+  {
+    "id": 2380,
+    "parentId": 2378,
+    "name": "沁水县"
+  },
+  {
+    "id": 2383,
+    "parentId": 2378,
+    "name": "泽州县"
+  },
+  {
+    "id": 2381,
+    "parentId": 2378,
+    "name": "阳城县"
+  },
+  {
+    "id": 2382,
+    "parentId": 2378,
+    "name": "陵川县"
+  },
+  {
+    "id": 2384,
+    "parentId": 2378,
+    "name": "高平市"
+  },
+  {
+    "id": 2385,
+    "parentId": 2340,
+    "name": "晋中市"
+  },
+  {
+    "id": 2396,
+    "parentId": 2385,
+    "name": "介休市"
+  },
+  {
+    "id": 2389,
+    "parentId": 2385,
+    "name": "和顺县"
+  },
+  {
+    "id": 2392,
+    "parentId": 2385,
+    "name": "太谷县"
+  },
+  {
+    "id": 2391,
+    "parentId": 2385,
+    "name": "寿阳县"
+  },
+  {
+    "id": 2388,
+    "parentId": 2385,
+    "name": "左权县"
+  },
+  {
+    "id": 2394,
+    "parentId": 2385,
+    "name": "平遥县"
+  },
+  {
+    "id": 2390,
+    "parentId": 2385,
+    "name": "昔阳县"
+  },
+  {
+    "id": 2386,
+    "parentId": 2385,
+    "name": "榆次区"
+  },
+  {
+    "id": 2387,
+    "parentId": 2385,
+    "name": "榆社县"
+  },
+  {
+    "id": 2395,
+    "parentId": 2385,
+    "name": "灵石县"
+  },
+  {
+    "id": 2393,
+    "parentId": 2385,
+    "name": "祁县"
+  },
+  {
+    "id": 2397,
+    "parentId": 2340,
+    "name": "临汾市"
+  },
+  {
+    "id": 2407,
+    "parentId": 2397,
+    "name": "乡宁县"
+  },
+  {
+    "id": 2413,
+    "parentId": 2397,
+    "name": "侯马市"
+  },
+  {
+    "id": 2403,
+    "parentId": 2397,
+    "name": "古县"
+  },
+  {
+    "id": 2406,
+    "parentId": 2397,
+    "name": "吉县"
+  },
+  {
+    "id": 2408,
+    "parentId": 2397,
+    "name": "大宁县"
+  },
+  {
+    "id": 2404,
+    "parentId": 2397,
+    "name": "安泽县"
+  },
+  {
+    "id": 2398,
+    "parentId": 2397,
+    "name": "尧都区"
+  },
+  {
+    "id": 2399,
+    "parentId": 2397,
+    "name": "曲沃县"
+  },
+  {
+    "id": 2410,
+    "parentId": 2397,
+    "name": "永和县"
+  },
+  {
+    "id": 2412,
+    "parentId": 2397,
+    "name": "汾西县"
+  },
+  {
+    "id": 2402,
+    "parentId": 2397,
+    "name": "洪洞县"
+  },
+  {
+    "id": 2405,
+    "parentId": 2397,
+    "name": "浮山县"
+  },
+  {
+    "id": 2400,
+    "parentId": 2397,
+    "name": "翼城县"
+  },
+  {
+    "id": 2411,
+    "parentId": 2397,
+    "name": "蒲县"
+  },
+  {
+    "id": 2401,
+    "parentId": 2397,
+    "name": "襄汾县"
+  },
+  {
+    "id": 2409,
+    "parentId": 2397,
+    "name": "隰县"
+  },
+  {
+    "id": 2414,
+    "parentId": 2397,
+    "name": "霍州市"
+  },
+  {
+    "id": 2415,
+    "parentId": 2340,
+    "name": "吕梁市"
+  },
+  {
+    "id": 2425,
+    "parentId": 2415,
+    "name": "中阳县"
+  },
+  {
+    "id": 2420,
+    "parentId": 2415,
+    "name": "临县"
+  },
+  {
+    "id": 2426,
+    "parentId": 2415,
+    "name": "交口县"
+  },
+  {
+    "id": 2418,
+    "parentId": 2415,
+    "name": "交城县"
+  },
+  {
+    "id": 2419,
+    "parentId": 2415,
+    "name": "兴县"
+  },
+  {
+    "id": 2427,
+    "parentId": 2415,
+    "name": "孝义市"
+  },
+  {
+    "id": 2423,
+    "parentId": 2415,
+    "name": "岚县"
+  },
+  {
+    "id": 2417,
+    "parentId": 2415,
+    "name": "文水县"
+  },
+  {
+    "id": 2424,
+    "parentId": 2415,
+    "name": "方山县"
+  },
+  {
+    "id": 2421,
+    "parentId": 2415,
+    "name": "柳林县"
+  },
+  {
+    "id": 2428,
+    "parentId": 2415,
+    "name": "汾阳市"
+  },
+  {
+    "id": 2422,
+    "parentId": 2415,
+    "name": "石楼县"
+  },
+  {
+    "id": 2416,
+    "parentId": 2415,
+    "name": "离石区"
+  },
+  {
+    "id": 2429,
+    "parentId": 2340,
+    "name": "朔州市"
+  },
+  {
+    "id": 2434,
+    "parentId": 2429,
+    "name": "右玉县"
+  },
+  {
+    "id": 2432,
+    "parentId": 2429,
+    "name": "山阴县"
+  },
+  {
+    "id": 2431,
+    "parentId": 2429,
+    "name": "平鲁区"
+  },
+  {
+    "id": 2433,
+    "parentId": 2429,
+    "name": "应县"
+  },
+  {
+    "id": 2435,
+    "parentId": 2429,
+    "name": "怀仁县"
+  },
+  {
+    "id": 2430,
+    "parentId": 2429,
+    "name": "朔城区"
+  },
+  {
+    "id": 2436,
+    "parentId": 2340,
+    "name": "忻州市"
+  },
+  {
+    "id": 2439,
+    "parentId": 2436,
+    "name": "五台县"
+  },
+  {
+    "id": 2445,
+    "parentId": 2436,
+    "name": "五寨县"
+  },
+  {
+    "id": 2440,
+    "parentId": 2436,
+    "name": "代县"
+  },
+  {
+    "id": 2448,
+    "parentId": 2436,
+    "name": "保德县"
+  },
+  {
+    "id": 2449,
+    "parentId": 2436,
+    "name": "偏关县"
+  },
+  {
+    "id": 2450,
+    "parentId": 2436,
+    "name": "原平市"
+  },
+  {
+    "id": 2442,
+    "parentId": 2436,
+    "name": "宁武县"
+  },
+  {
+    "id": 2438,
+    "parentId": 2436,
+    "name": "定襄县"
+  },
+  {
+    "id": 2446,
+    "parentId": 2436,
+    "name": "岢岚县"
+  },
+  {
+    "id": 2437,
+    "parentId": 2436,
+    "name": "忻府区"
+  },
+  {
+    "id": 2447,
+    "parentId": 2436,
+    "name": "河曲县"
+  },
+  {
+    "id": 2444,
+    "parentId": 2436,
+    "name": "神池县"
+  },
+  {
+    "id": 2441,
+    "parentId": 2436,
+    "name": "繁峙县"
+  },
+  {
+    "id": 2443,
+    "parentId": 2436,
+    "name": "静乐县"
+  },
+  {
+    "id": 2451,
+    "parentId": 2340,
+    "name": "阳泉市"
+  },
+  {
+    "id": 2452,
+    "parentId": 2451,
+    "name": "城区"
+  },
+  {
+    "id": 2455,
+    "parentId": 2451,
+    "name": "平定县"
+  },
+  {
+    "id": 2456,
+    "parentId": 2451,
+    "name": "盂县"
+  },
+  {
+    "id": 2453,
+    "parentId": 2451,
+    "name": "矿区"
+  },
+  {
+    "id": 2454,
+    "parentId": 2451,
+    "name": "郊区"
+  },
+  {
+    "id": 2457,
+    "parentId": 2340,
+    "name": "运城市"
+  },
+  {
+    "id": 2460,
+    "parentId": 2457,
+    "name": "万荣县"
+  },
+  {
+    "id": 2459,
+    "parentId": 2457,
+    "name": "临猗县"
+  },
+  {
+    "id": 2465,
+    "parentId": 2457,
+    "name": "垣曲县"
+  },
+  {
+    "id": 2466,
+    "parentId": 2457,
+    "name": "夏县"
+  },
+  {
+    "id": 2467,
+    "parentId": 2457,
+    "name": "平陆县"
+  },
+  {
+    "id": 2463,
+    "parentId": 2457,
+    "name": "新绛县"
+  },
+  {
+    "id": 2469,
+    "parentId": 2457,
+    "name": "永济市"
+  },
+  {
+    "id": 2470,
+    "parentId": 2457,
+    "name": "河津市"
+  },
+  {
+    "id": 2458,
+    "parentId": 2457,
+    "name": "盐湖区"
+  },
+  {
+    "id": 2462,
+    "parentId": 2457,
+    "name": "稷山县"
+  },
+  {
+    "id": 2464,
+    "parentId": 2457,
+    "name": "绛县"
+  },
+  {
+    "id": 2468,
+    "parentId": 2457,
+    "name": "芮城县"
+  },
+  {
+    "id": 2461,
+    "parentId": 2457,
+    "name": "闻喜县"
+  },
+  {
+    "id": 2471,
+    "parentId": null,
+    "name": "陕西"
+  },
+  {
+    "id": 2472,
+    "parentId": 2471,
+    "name": "西安市"
+  },
+  {
+    "id": 2480,
+    "parentId": 2472,
+    "name": "临潼区"
+  },
+  {
+    "id": 2483,
+    "parentId": 2472,
+    "name": "周至县"
+  },
+  {
+    "id": 2484,
+    "parentId": 2472,
+    "name": "户县"
+  },
+  {
+    "id": 2473,
+    "parentId": 2472,
+    "name": "新城区"
+  },
+  {
+    "id": 2477,
+    "parentId": 2472,
+    "name": "未央区"
+  },
+  {
+    "id": 2476,
+    "parentId": 2472,
+    "name": "灞桥区"
+  },
+  {
+    "id": 2474,
+    "parentId": 2472,
+    "name": "碑林区"
+  },
+  {
+    "id": 2475,
+    "parentId": 2472,
+    "name": "莲湖区"
+  },
+  {
+    "id": 2482,
+    "parentId": 2472,
+    "name": "蓝田县"
+  },
+  {
+    "id": 2481,
+    "parentId": 2472,
+    "name": "长安区"
+  },
+  {
+    "id": 2479,
+    "parentId": 2472,
+    "name": "阎良区"
+  },
+  {
+    "id": 2478,
+    "parentId": 2472,
+    "name": "雁塔区"
+  },
+  {
+    "id": 2485,
+    "parentId": 2472,
+    "name": "高陵县"
+  },
+  {
+    "id": 2486,
+    "parentId": 2471,
+    "name": "安康市"
+  },
+  {
+    "id": 2490,
+    "parentId": 2486,
+    "name": "宁陕县"
+  },
+  {
+    "id": 2492,
+    "parentId": 2486,
+    "name": "岚皋县"
+  },
+  {
+    "id": 2493,
+    "parentId": 2486,
+    "name": "平利县"
+  },
+  {
+    "id": 2495,
+    "parentId": 2486,
+    "name": "旬阳县"
+  },
+  {
+    "id": 2487,
+    "parentId": 2486,
+    "name": "汉滨区"
+  },
+  {
+    "id": 2488,
+    "parentId": 2486,
+    "name": "汉阴县"
+  },
+  {
+    "id": 2496,
+    "parentId": 2486,
+    "name": "白河县"
+  },
+  {
+    "id": 2489,
+    "parentId": 2486,
+    "name": "石泉县"
+  },
+  {
+    "id": 2491,
+    "parentId": 2486,
+    "name": "紫阳县"
+  },
+  {
+    "id": 2494,
+    "parentId": 2486,
+    "name": "镇坪县"
+  },
+  {
+    "id": 2497,
+    "parentId": 2471,
+    "name": "宝鸡市"
+  },
+  {
+    "id": 2508,
+    "parentId": 2497,
+    "name": "凤县"
+  },
+  {
+    "id": 2501,
+    "parentId": 2497,
+    "name": "凤翔县"
+  },
+  {
+    "id": 2506,
+    "parentId": 2497,
+    "name": "千阳县"
+  },
+  {
+    "id": 2509,
+    "parentId": 2497,
+    "name": "太白县"
+  },
+  {
+    "id": 2502,
+    "parentId": 2497,
+    "name": "岐山县"
+  },
+  {
+    "id": 2503,
+    "parentId": 2497,
+    "name": "扶风县"
+  },
+  {
+    "id": 2498,
+    "parentId": 2497,
+    "name": "渭滨区"
+  },
+  {
+    "id": 2504,
+    "parentId": 2497,
+    "name": "眉县"
+  },
+  {
+    "id": 2499,
+    "parentId": 2497,
+    "name": "金台区"
+  },
+  {
+    "id": 2505,
+    "parentId": 2497,
+    "name": "陇县"
+  },
+  {
+    "id": 2500,
+    "parentId": 2497,
+    "name": "陈仓区"
+  },
+  {
+    "id": 2507,
+    "parentId": 2497,
+    "name": "麟游县"
+  },
+  {
+    "id": 2510,
+    "parentId": 2471,
+    "name": "汉中市"
+  },
+  {
+    "id": 2521,
+    "parentId": 2510,
+    "name": "佛坪县"
+  },
+  {
+    "id": 2516,
+    "parentId": 2510,
+    "name": "勉县"
+  },
+  {
+    "id": 2512,
+    "parentId": 2510,
+    "name": "南郑县"
+  },
+  {
+    "id": 2513,
+    "parentId": 2510,
+    "name": "城固县"
+  },
+  {
+    "id": 2517,
+    "parentId": 2510,
+    "name": "宁强县"
+  },
+  {
+    "id": 2511,
+    "parentId": 2510,
+    "name": "汉台区"
+  },
+  {
+    "id": 2514,
+    "parentId": 2510,
+    "name": "洋县"
+  },
+  {
+    "id": 2520,
+    "parentId": 2510,
+    "name": "留坝县"
+  },
+  {
+    "id": 2518,
+    "parentId": 2510,
+    "name": "略阳县"
+  },
+  {
+    "id": 2515,
+    "parentId": 2510,
+    "name": "西乡县"
+  },
+  {
+    "id": 2519,
+    "parentId": 2510,
+    "name": "镇巴县"
+  },
+  {
+    "id": 2522,
+    "parentId": 2471,
+    "name": "商洛市"
+  },
+  {
+    "id": 2525,
+    "parentId": 2522,
+    "name": "丹凤县"
+  },
+  {
+    "id": 2526,
+    "parentId": 2522,
+    "name": "商南县"
+  },
+  {
+    "id": 2523,
+    "parentId": 2522,
+    "name": "商州区"
+  },
+  {
+    "id": 2527,
+    "parentId": 2522,
+    "name": "山阳县"
+  },
+  {
+    "id": 2529,
+    "parentId": 2522,
+    "name": "柞水县"
+  },
+  {
+    "id": 2524,
+    "parentId": 2522,
+    "name": "洛南县"
+  },
+  {
+    "id": 2528,
+    "parentId": 2522,
+    "name": "镇安县"
+  },
+  {
+    "id": 2530,
+    "parentId": 2471,
+    "name": "铜川市"
+  },
+  {
+    "id": 2532,
+    "parentId": 2530,
+    "name": "印台区"
+  },
+  {
+    "id": 2534,
+    "parentId": 2530,
+    "name": "宜君县"
+  },
+  {
+    "id": 2531,
+    "parentId": 2530,
+    "name": "王益区"
+  },
+  {
+    "id": 2533,
+    "parentId": 2530,
+    "name": "耀州区"
+  },
+  {
+    "id": 2535,
+    "parentId": 2471,
+    "name": "渭南市"
+  },
+  {
+    "id": 2536,
+    "parentId": 2535,
+    "name": "临渭区"
+  },
+  {
+    "id": 2537,
+    "parentId": 2535,
+    "name": "华县"
+  },
+  {
+    "id": 2546,
+    "parentId": 2535,
+    "name": "华阴市"
+  },
+  {
+    "id": 2540,
+    "parentId": 2535,
+    "name": "合阳县"
+  },
+  {
+    "id": 2539,
+    "parentId": 2535,
+    "name": "大荔县"
+  },
+  {
+    "id": 2544,
+    "parentId": 2535,
+    "name": "富平县"
+  },
+  {
+    "id": 2538,
+    "parentId": 2535,
+    "name": "潼关县"
+  },
+  {
+    "id": 2541,
+    "parentId": 2535,
+    "name": "澄城县"
+  },
+  {
+    "id": 2543,
+    "parentId": 2535,
+    "name": "白水县"
+  },
+  {
+    "id": 2542,
+    "parentId": 2535,
+    "name": "蒲城县"
+  },
+  {
+    "id": 2545,
+    "parentId": 2535,
+    "name": "韩城市"
+  },
+  {
+    "id": 2547,
+    "parentId": 2471,
+    "name": "咸阳市"
+  },
+  {
+    "id": 2551,
+    "parentId": 2547,
+    "name": "三原县"
+  },
+  {
+    "id": 2553,
+    "parentId": 2547,
+    "name": "乾县"
+  },
+  {
+    "id": 2561,
+    "parentId": 2547,
+    "name": "兴平市"
+  },
+  {
+    "id": 2556,
+    "parentId": 2547,
+    "name": "彬县"
+  },
+  {
+    "id": 2558,
+    "parentId": 2547,
+    "name": "旬邑县"
+  },
+  {
+    "id": 2549,
+    "parentId": 2547,
+    "name": "杨凌区"
+  },
+  {
+    "id": 2560,
+    "parentId": 2547,
+    "name": "武功县"
+  },
+  {
+    "id": 2555,
+    "parentId": 2547,
+    "name": "永寿县"
+  },
+  {
+    "id": 2552,
+    "parentId": 2547,
+    "name": "泾阳县"
+  },
+  {
+    "id": 2559,
+    "parentId": 2547,
+    "name": "淳化县"
+  },
+  {
+    "id": 2550,
+    "parentId": 2547,
+    "name": "渭城区"
+  },
+  {
+    "id": 2554,
+    "parentId": 2547,
+    "name": "礼泉县"
+  },
+  {
+    "id": 2548,
+    "parentId": 2547,
+    "name": "秦都区"
+  },
+  {
+    "id": 2557,
+    "parentId": 2547,
+    "name": "长武县"
+  },
+  {
+    "id": 2562,
+    "parentId": 2471,
+    "name": "延安市"
+  },
+  {
+    "id": 2569,
+    "parentId": 2562,
+    "name": "吴旗县"
+  },
+  {
+    "id": 2566,
+    "parentId": 2562,
+    "name": "子长县"
+  },
+  {
+    "id": 2567,
+    "parentId": 2562,
+    "name": "安塞县"
+  },
+  {
+    "id": 2573,
+    "parentId": 2562,
+    "name": "宜川县"
+  },
+  {
+    "id": 2563,
+    "parentId": 2562,
+    "name": "宝塔区"
+  },
+  {
+    "id": 2571,
+    "parentId": 2562,
+    "name": "富县"
+  },
+  {
+    "id": 2565,
+    "parentId": 2562,
+    "name": "延川县"
+  },
+  {
+    "id": 2564,
+    "parentId": 2562,
+    "name": "延长县"
+  },
+  {
+    "id": 2568,
+    "parentId": 2562,
+    "name": "志丹县"
+  },
+  {
+    "id": 2572,
+    "parentId": 2562,
+    "name": "洛川县"
+  },
+  {
+    "id": 2570,
+    "parentId": 2562,
+    "name": "甘泉县"
+  },
+  {
+    "id": 2575,
+    "parentId": 2562,
+    "name": "黄陵县"
+  },
+  {
+    "id": 2574,
+    "parentId": 2562,
+    "name": "黄龙县"
+  },
+  {
+    "id": 2576,
+    "parentId": 2471,
+    "name": "榆林市"
+  },
+  {
+    "id": 2585,
+    "parentId": 2576,
+    "name": "佳县"
+  },
+  {
+    "id": 2586,
+    "parentId": 2576,
+    "name": "吴堡县"
+  },
+  {
+    "id": 2588,
+    "parentId": 2576,
+    "name": "子洲县"
+  },
+  {
+    "id": 2582,
+    "parentId": 2576,
+    "name": "定边县"
+  },
+  {
+    "id": 2579,
+    "parentId": 2576,
+    "name": "府谷县"
+  },
+  {
+    "id": 2577,
+    "parentId": 2576,
+    "name": "榆阳区"
+  },
+  {
+    "id": 2580,
+    "parentId": 2576,
+    "name": "横山县"
+  },
+  {
+    "id": 2587,
+    "parentId": 2576,
+    "name": "清涧县"
+  },
+  {
+    "id": 2578,
+    "parentId": 2576,
+    "name": "神木县"
+  },
+  {
+    "id": 2584,
+    "parentId": 2576,
+    "name": "米脂县"
+  },
+  {
+    "id": 2583,
+    "parentId": 2576,
+    "name": "绥德县"
+  },
+  {
+    "id": 2581,
+    "parentId": 2576,
+    "name": "靖边县"
+  },
+  {
+    "id": 2589,
+    "parentId": null,
+    "name": "四川"
+  },
+  {
+    "id": 2590,
+    "parentId": 2589,
+    "name": "成都市"
+  },
+  {
+    "id": 2601,
+    "parentId": 2590,
+    "name": "双流县"
+  },
+  {
+    "id": 2603,
+    "parentId": 2590,
+    "name": "大邑县"
+  },
+  {
+    "id": 2609,
+    "parentId": 2590,
+    "name": "崇州市"
+  },
+  {
+    "id": 2607,
+    "parentId": 2590,
+    "name": "彭州市"
+  },
+  {
+    "id": 2595,
+    "parentId": 2590,
+    "name": "成华区"
+  },
+  {
+    "id": 2605,
+    "parentId": 2590,
+    "name": "新津县"
+  },
+  {
+    "id": 2598,
+    "parentId": 2590,
+    "name": "新都区"
+  },
+  {
+    "id": 2594,
+    "parentId": 2590,
+    "name": "武侯区"
+  },
+  {
+    "id": 2599,
+    "parentId": 2590,
+    "name": "温江区"
+  },
+  {
+    "id": 2604,
+    "parentId": 2590,
+    "name": "蒲江县"
+  },
+  {
+    "id": 2608,
+    "parentId": 2590,
+    "name": "邛崃市"
+  },
+  {
+    "id": 2602,
+    "parentId": 2590,
+    "name": "郫县"
+  },
+  {
+    "id": 2606,
+    "parentId": 2590,
+    "name": "都江堰市"
+  },
+  {
+    "id": 2600,
+    "parentId": 2590,
+    "name": "金堂县"
+  },
+  {
+    "id": 2593,
+    "parentId": 2590,
+    "name": "金牛区"
+  },
+  {
+    "id": 2591,
+    "parentId": 2590,
+    "name": "锦江区"
+  },
+  {
+    "id": 2597,
+    "parentId": 2590,
+    "name": "青白江区"
+  },
+  {
+    "id": 2592,
+    "parentId": 2590,
+    "name": "青羊区"
+  },
+  {
+    "id": 2596,
+    "parentId": 2590,
+    "name": "龙泉驿区"
+  },
+  {
+    "id": 2610,
+    "parentId": 2589,
+    "name": "阿坝藏族羌族自治州"
+  },
+  {
+    "id": 2615,
+    "parentId": 2610,
+    "name": "九寨沟县"
+  },
+  {
+    "id": 2620,
+    "parentId": 2610,
+    "name": "壤塘县"
+  },
+  {
+    "id": 2617,
+    "parentId": 2610,
+    "name": "小金县"
+  },
+  {
+    "id": 2614,
+    "parentId": 2610,
+    "name": "松潘县"
+  },
+  {
+    "id": 2611,
+    "parentId": 2610,
+    "name": "汶川县"
+  },
+  {
+    "id": 2612,
+    "parentId": 2610,
+    "name": "理县"
+  },
+  {
+    "id": 2623,
+    "parentId": 2610,
+    "name": "红原县"
+  },
+  {
+    "id": 2622,
+    "parentId": 2610,
+    "name": "若尔盖县"
+  },
+  {
+    "id": 2613,
+    "parentId": 2610,
+    "name": "茂县"
+  },
+  {
+    "id": 2616,
+    "parentId": 2610,
+    "name": "金川县"
+  },
+  {
+    "id": 2621,
+    "parentId": 2610,
+    "name": "阿坝县"
+  },
+  {
+    "id": 2619,
+    "parentId": 2610,
+    "name": "马尔康县"
+  },
+  {
+    "id": 2618,
+    "parentId": 2610,
+    "name": "黑水县"
+  },
+  {
+    "id": 2624,
+    "parentId": 2589,
+    "name": "巴中市"
+  },
+  {
+    "id": 2627,
+    "parentId": 2624,
+    "name": "南江县"
+  },
+  {
+    "id": 2625,
+    "parentId": 2624,
+    "name": "巴州区"
+  },
+  {
+    "id": 2628,
+    "parentId": 2624,
+    "name": "平昌县"
+  },
+  {
+    "id": 2626,
+    "parentId": 2624,
+    "name": "通江县"
+  },
+  {
+    "id": 2629,
+    "parentId": 2589,
+    "name": "达州市"
+  },
+  {
+    "id": 2636,
+    "parentId": 2629,
+    "name": "万源市"
+  },
+  {
+    "id": 2634,
+    "parentId": 2629,
+    "name": "大竹县"
+  },
+  {
+    "id": 2632,
+    "parentId": 2629,
+    "name": "宣汉县"
+  },
+  {
+    "id": 2633,
+    "parentId": 2629,
+    "name": "开江县"
+  },
+  {
+    "id": 2635,
+    "parentId": 2629,
+    "name": "渠县"
+  },
+  {
+    "id": 2631,
+    "parentId": 2629,
+    "name": "达县"
+  },
+  {
+    "id": 3252,
+    "parentId": 2629,
+    "name": "达川区"
+  },
+  {
+    "id": 2630,
+    "parentId": 2629,
+    "name": "通川区"
+  },
+  {
+    "id": 2637,
+    "parentId": 2589,
+    "name": "德阳市"
+  },
+  {
+    "id": 2639,
+    "parentId": 2637,
+    "name": "中江县"
+  },
+  {
+    "id": 2642,
+    "parentId": 2637,
+    "name": "什邡市"
+  },
+  {
+    "id": 2641,
+    "parentId": 2637,
+    "name": "广汉市"
+  },
+  {
+    "id": 2638,
+    "parentId": 2637,
+    "name": "旌阳区"
+  },
+  {
+    "id": 2643,
+    "parentId": 2637,
+    "name": "绵竹市"
+  },
+  {
+    "id": 2640,
+    "parentId": 2637,
+    "name": "罗江县"
+  },
+  {
+    "id": 2644,
+    "parentId": 2589,
+    "name": "甘孜藏族自治州"
+  },
+  {
+    "id": 2647,
+    "parentId": 2644,
+    "name": "丹巴县"
+  },
+  {
+    "id": 2648,
+    "parentId": 2644,
+    "name": "九龙县"
+  },
+  {
+    "id": 2660,
+    "parentId": 2644,
+    "name": "乡城县"
+  },
+  {
+    "id": 2659,
+    "parentId": 2644,
+    "name": "巴塘县"
+  },
+  {
+    "id": 2645,
+    "parentId": 2644,
+    "name": "康定县"
+  },
+  {
+    "id": 2662,
+    "parentId": 2644,
+    "name": "得荣县"
+  },
+  {
+    "id": 2654,
+    "parentId": 2644,
+    "name": "德格县"
+  },
+  {
+    "id": 2653,
+    "parentId": 2644,
+    "name": "新龙县"
+  },
+  {
+    "id": 2646,
+    "parentId": 2644,
+    "name": "泸定县"
+  },
+  {
+    "id": 2651,
+    "parentId": 2644,
+    "name": "炉霍县"
+  },
+  {
+    "id": 2658,
+    "parentId": 2644,
+    "name": "理塘县"
+  },
+  {
+    "id": 2652,
+    "parentId": 2644,
+    "name": "甘孜县"
+  },
+  {
+    "id": 2655,
+    "parentId": 2644,
+    "name": "白玉县"
+  },
+  {
+    "id": 2656,
+    "parentId": 2644,
+    "name": "石渠县"
+  },
+  {
+    "id": 2661,
+    "parentId": 2644,
+    "name": "稻城县"
+  },
+  {
+    "id": 2657,
+    "parentId": 2644,
+    "name": "色达县"
+  },
+  {
+    "id": 2650,
+    "parentId": 2644,
+    "name": "道孚县"
+  },
+  {
+    "id": 2649,
+    "parentId": 2644,
+    "name": "雅江县"
+  },
+  {
+    "id": 2663,
+    "parentId": 2589,
+    "name": "广安市"
+  },
+  {
+    "id": 2668,
+    "parentId": 2663,
+    "name": "华莹市"
+  },
+  {
+    "id": 2665,
+    "parentId": 2663,
+    "name": "岳池县"
+  },
+  {
+    "id": 2664,
+    "parentId": 2663,
+    "name": "广安区"
+  },
+  {
+    "id": 2666,
+    "parentId": 2663,
+    "name": "武胜县"
+  },
+  {
+    "id": 2667,
+    "parentId": 2663,
+    "name": "邻水县"
+  },
+  {
+    "id": 2669,
+    "parentId": 2589,
+    "name": "广元市"
+  },
+  {
+    "id": 2671,
+    "parentId": 2669,
+    "name": "元坝区"
+  },
+  {
+    "id": 2675,
+    "parentId": 2669,
+    "name": "剑阁县"
+  },
+  {
+    "id": 2670,
+    "parentId": 2669,
+    "name": "市中区"
+  },
+  {
+    "id": 2673,
+    "parentId": 2669,
+    "name": "旺苍县"
+  },
+  {
+    "id": 2672,
+    "parentId": 2669,
+    "name": "朝天区"
+  },
+  {
+    "id": 2676,
+    "parentId": 2669,
+    "name": "苍溪县"
+  },
+  {
+    "id": 2674,
+    "parentId": 2669,
+    "name": "青川县"
+  },
+  {
+    "id": 2677,
+    "parentId": 2589,
+    "name": "乐山市"
+  },
+  {
+    "id": 2680,
+    "parentId": 2677,
+    "name": "五通桥区"
+  },
+  {
+    "id": 2683,
+    "parentId": 2677,
+    "name": "井研县"
+  },
+  {
+    "id": 2684,
+    "parentId": 2677,
+    "name": "夹江县"
+  },
+  {
+    "id": 2688,
+    "parentId": 2677,
+    "name": "峨眉山市"
+  },
+  {
+    "id": 2686,
+    "parentId": 2677,
+    "name": "峨边彝族自治县"
+  },
+  {
+    "id": 2678,
+    "parentId": 2677,
+    "name": "市中区"
+  },
+  {
+    "id": 2685,
+    "parentId": 2677,
+    "name": "沐川县"
+  },
+  {
+    "id": 2679,
+    "parentId": 2677,
+    "name": "沙湾区"
+  },
+  {
+    "id": 2682,
+    "parentId": 2677,
+    "name": "犍为县"
+  },
+  {
+    "id": 2681,
+    "parentId": 2677,
+    "name": "金口河区"
+  },
+  {
+    "id": 2687,
+    "parentId": 2677,
+    "name": "马边彝族自治县"
+  },
+  {
+    "id": 2689,
+    "parentId": 2589,
+    "name": "凉山彝族自治州"
+  },
+  {
+    "id": 2695,
+    "parentId": 2689,
+    "name": "会东县"
+  },
+  {
+    "id": 2694,
+    "parentId": 2689,
+    "name": "会理县"
+  },
+  {
+    "id": 2702,
+    "parentId": 2689,
+    "name": "冕宁县"
+  },
+  {
+    "id": 2701,
+    "parentId": 2689,
+    "name": "喜德县"
+  },
+  {
+    "id": 2696,
+    "parentId": 2689,
+    "name": "宁南县"
+  },
+  {
+    "id": 2698,
+    "parentId": 2689,
+    "name": "布拖县"
+  },
+  {
+    "id": 2693,
+    "parentId": 2689,
+    "name": "德昌县"
+  },
+  {
+    "id": 2700,
+    "parentId": 2689,
+    "name": "昭觉县"
+  },
+  {
+    "id": 2697,
+    "parentId": 2689,
+    "name": "普格县"
+  },
+  {
+    "id": 2691,
+    "parentId": 2689,
+    "name": "木里藏族自治县"
+  },
+  {
+    "id": 2704,
+    "parentId": 2689,
+    "name": "甘洛县"
+  },
+  {
+    "id": 2692,
+    "parentId": 2689,
+    "name": "盐源县"
+  },
+  {
+    "id": 2705,
+    "parentId": 2689,
+    "name": "美姑县"
+  },
+  {
+    "id": 2690,
+    "parentId": 2689,
+    "name": "西昌市"
+  },
+  {
+    "id": 2703,
+    "parentId": 2689,
+    "name": "越西县"
+  },
+  {
+    "id": 2699,
+    "parentId": 2689,
+    "name": "金阳县"
+  },
+  {
+    "id": 2706,
+    "parentId": 2689,
+    "name": "雷波县"
+  },
+  {
+    "id": 2707,
+    "parentId": 2589,
+    "name": "泸州市"
+  },
+  {
+    "id": 2713,
+    "parentId": 2707,
+    "name": "叙永县"
+  },
+  {
+    "id": 2714,
+    "parentId": 2707,
+    "name": "古蔺县"
+  },
+  {
+    "id": 2712,
+    "parentId": 2707,
+    "name": "合江县"
+  },
+  {
+    "id": 2708,
+    "parentId": 2707,
+    "name": "江阳区"
+  },
+  {
+    "id": 2711,
+    "parentId": 2707,
+    "name": "泸县"
+  },
+  {
+    "id": 2709,
+    "parentId": 2707,
+    "name": "纳溪区"
+  },
+  {
+    "id": 2710,
+    "parentId": 2707,
+    "name": "龙马潭区"
+  },
+  {
+    "id": 2715,
+    "parentId": 2589,
+    "name": "眉山市"
+  },
+  {
+    "id": 2716,
+    "parentId": 2715,
+    "name": "东坡区"
+  },
+  {
+    "id": 2720,
+    "parentId": 2715,
+    "name": "丹棱县"
+  },
+  {
+    "id": 2717,
+    "parentId": 2715,
+    "name": "仁寿县"
+  },
+  {
+    "id": 2718,
+    "parentId": 2715,
+    "name": "彭山县"
+  },
+  {
+    "id": 2719,
+    "parentId": 2715,
+    "name": "洪雅县"
+  },
+  {
+    "id": 2721,
+    "parentId": 2715,
+    "name": "青神县"
+  },
+  {
+    "id": 2722,
+    "parentId": 2589,
+    "name": "绵阳市"
+  },
+  {
+    "id": 2725,
+    "parentId": 2722,
+    "name": "三台县"
+  },
+  {
+    "id": 2729,
+    "parentId": 2722,
+    "name": "北川羌族自治县"
+  },
+  {
+    "id": 2727,
+    "parentId": 2722,
+    "name": "安县"
+  },
+  {
+    "id": 2730,
+    "parentId": 2722,
+    "name": "平武县"
+  },
+  {
+    "id": 2728,
+    "parentId": 2722,
+    "name": "梓潼县"
+  },
+  {
+    "id": 2731,
+    "parentId": 2722,
+    "name": "江油市"
+  },
+  {
+    "id": 2723,
+    "parentId": 2722,
+    "name": "涪城区"
+  },
+  {
+    "id": 2724,
+    "parentId": 2722,
+    "name": "游仙区"
+  },
+  {
+    "id": 2726,
+    "parentId": 2722,
+    "name": "盐亭县"
+  },
+  {
+    "id": 2732,
+    "parentId": 2589,
+    "name": "内江市"
+  },
+  {
+    "id": 2734,
+    "parentId": 2732,
+    "name": "东兴区"
+  },
+  {
+    "id": 2735,
+    "parentId": 2732,
+    "name": "威远县"
+  },
+  {
+    "id": 2733,
+    "parentId": 2732,
+    "name": "市中区"
+  },
+  {
+    "id": 2736,
+    "parentId": 2732,
+    "name": "资中县"
+  },
+  {
+    "id": 2737,
+    "parentId": 2732,
+    "name": "隆昌县"
+  },
+  {
+    "id": 2738,
+    "parentId": 2589,
+    "name": "南充市"
+  },
+  {
+    "id": 2745,
+    "parentId": 2738,
+    "name": "仪陇县"
+  },
+  {
+    "id": 2742,
+    "parentId": 2738,
+    "name": "南部县"
+  },
+  {
+    "id": 2741,
+    "parentId": 2738,
+    "name": "嘉陵区"
+  },
+  {
+    "id": 2743,
+    "parentId": 2738,
+    "name": "营山县"
+  },
+  {
+    "id": 2744,
+    "parentId": 2738,
+    "name": "蓬安县"
+  },
+  {
+    "id": 2746,
+    "parentId": 2738,
+    "name": "西充县"
+  },
+  {
+    "id": 2747,
+    "parentId": 2738,
+    "name": "阆中市"
+  },
+  {
+    "id": 2739,
+    "parentId": 2738,
+    "name": "顺庆区"
+  },
+  {
+    "id": 2740,
+    "parentId": 2738,
+    "name": "高坪区"
+  },
+  {
+    "id": 2748,
+    "parentId": 2589,
+    "name": "攀枝花市"
+  },
+  {
+    "id": 2749,
+    "parentId": 2748,
+    "name": "东区"
+  },
+  {
+    "id": 2751,
+    "parentId": 2748,
+    "name": "仁和区"
+  },
+  {
+    "id": 2753,
+    "parentId": 2748,
+    "name": "盐边县"
+  },
+  {
+    "id": 2752,
+    "parentId": 2748,
+    "name": "米易县"
+  },
+  {
+    "id": 2750,
+    "parentId": 2748,
+    "name": "西区"
+  },
+  {
+    "id": 2754,
+    "parentId": 2589,
+    "name": "遂宁市"
+  },
+  {
+    "id": 2759,
+    "parentId": 2754,
+    "name": "大英县"
+  },
+  {
+    "id": 2756,
+    "parentId": 2754,
+    "name": "安居区"
+  },
+  {
+    "id": 2758,
+    "parentId": 2754,
+    "name": "射洪县"
+  },
+  {
+    "id": 2755,
+    "parentId": 2754,
+    "name": "船山区"
+  },
+  {
+    "id": 2757,
+    "parentId": 2754,
+    "name": "蓬溪县"
+  },
+  {
+    "id": 2760,
+    "parentId": 2589,
+    "name": "雅安市"
+  },
+  {
+    "id": 2762,
+    "parentId": 2760,
+    "name": "名山县"
+  },
+  {
+    "id": 2766,
+    "parentId": 2760,
+    "name": "天全县"
+  },
+  {
+    "id": 2768,
+    "parentId": 2760,
+    "name": "宝兴县"
+  },
+  {
+    "id": 2764,
+    "parentId": 2760,
+    "name": "汉源县"
+  },
+  {
+    "id": 2765,
+    "parentId": 2760,
+    "name": "石棉县"
+  },
+  {
+    "id": 2767,
+    "parentId": 2760,
+    "name": "芦山县"
+  },
+  {
+    "id": 2763,
+    "parentId": 2760,
+    "name": "荥经县"
+  },
+  {
+    "id": 2761,
+    "parentId": 2760,
+    "name": "雨城区"
+  },
+  {
+    "id": 2769,
+    "parentId": 2589,
+    "name": "宜宾市"
+  },
+  {
+    "id": 2778,
+    "parentId": 2769,
+    "name": "兴文县"
+  },
+  {
+    "id": 2772,
+    "parentId": 2769,
+    "name": "南溪县"
+  },
+  {
+    "id": 2771,
+    "parentId": 2769,
+    "name": "宜宾县"
+  },
+  {
+    "id": 2779,
+    "parentId": 2769,
+    "name": "屏山县"
+  },
+  {
+    "id": 2773,
+    "parentId": 2769,
+    "name": "江安县"
+  },
+  {
+    "id": 2776,
+    "parentId": 2769,
+    "name": "珙县"
+  },
+  {
+    "id": 2777,
+    "parentId": 2769,
+    "name": "筠连县"
+  },
+  {
+    "id": 2770,
+    "parentId": 2769,
+    "name": "翠屏区"
+  },
+  {
+    "id": 2774,
+    "parentId": 2769,
+    "name": "长宁县"
+  },
+  {
+    "id": 2775,
+    "parentId": 2769,
+    "name": "高县"
+  },
+  {
+    "id": 2780,
+    "parentId": 2589,
+    "name": "资阳市"
+  },
+  {
+    "id": 2783,
+    "parentId": 2780,
+    "name": "乐至县"
+  },
+  {
+    "id": 2782,
+    "parentId": 2780,
+    "name": "安岳县"
+  },
+  {
+    "id": 2784,
+    "parentId": 2780,
+    "name": "简阳市"
+  },
+  {
+    "id": 2781,
+    "parentId": 2780,
+    "name": "雁江区"
+  },
+  {
+    "id": 2785,
+    "parentId": 2589,
+    "name": "自贡市"
+  },
+  {
+    "id": 2788,
+    "parentId": 2785,
+    "name": "大安区"
+  },
+  {
+    "id": 2791,
+    "parentId": 2785,
+    "name": "富顺县"
+  },
+  {
+    "id": 2789,
+    "parentId": 2785,
+    "name": "沿滩区"
+  },
+  {
+    "id": 2786,
+    "parentId": 2785,
+    "name": "自流井区"
+  },
+  {
+    "id": 2790,
+    "parentId": 2785,
+    "name": "荣县"
+  },
+  {
+    "id": 2787,
+    "parentId": 2785,
+    "name": "贡井区"
+  },
+  {
+    "id": 2792,
+    "parentId": null,
+    "name": "西藏"
+  },
+  {
+    "id": 2793,
+    "parentId": 2792,
+    "name": "拉萨市"
+  },
+  {
+    "id": 2794,
+    "parentId": 2793,
+    "name": "城关区"
+  },
+  {
+    "id": 2799,
+    "parentId": 2793,
+    "name": "堆龙德庆县"
+  },
+  {
+    "id": 2801,
+    "parentId": 2793,
+    "name": "墨竹工卡县"
+  },
+  {
+    "id": 2797,
+    "parentId": 2793,
+    "name": "尼木县"
+  },
+  {
+    "id": 2796,
+    "parentId": 2793,
+    "name": "当雄县"
+  },
+  {
+    "id": 2798,
+    "parentId": 2793,
+    "name": "曲水县"
+  },
+  {
+    "id": 2795,
+    "parentId": 2793,
+    "name": "林周县"
+  },
+  {
+    "id": 2800,
+    "parentId": 2793,
+    "name": "达孜县"
+  },
+  {
+    "id": 2802,
+    "parentId": 2792,
+    "name": "阿里地区"
+  },
+  {
+    "id": 2805,
+    "parentId": 2802,
+    "name": "噶尔县"
+  },
+  {
+    "id": 2809,
+    "parentId": 2802,
+    "name": "措勤县"
+  },
+  {
+    "id": 2808,
+    "parentId": 2802,
+    "name": "改则县"
+  },
+  {
+    "id": 2806,
+    "parentId": 2802,
+    "name": "日土县"
+  },
+  {
+    "id": 2803,
+    "parentId": 2802,
+    "name": "普兰县"
+  },
+  {
+    "id": 2804,
+    "parentId": 2802,
+    "name": "札达县"
+  },
+  {
+    "id": 2807,
+    "parentId": 2802,
+    "name": "革吉县"
+  },
+  {
+    "id": 2810,
+    "parentId": 2792,
+    "name": "昌都地区"
+  },
+  {
+    "id": 2815,
+    "parentId": 2810,
+    "name": "丁青县"
+  },
+  {
+    "id": 2817,
+    "parentId": 2810,
+    "name": "八宿县"
+  },
+  {
+    "id": 2816,
+    "parentId": 2810,
+    "name": "察雅县"
+  },
+  {
+    "id": 2818,
+    "parentId": 2810,
+    "name": "左贡县"
+  },
+  {
+    "id": 2811,
+    "parentId": 2810,
+    "name": "昌都县"
+  },
+  {
+    "id": 2812,
+    "parentId": 2810,
+    "name": "江达县"
+  },
+  {
+    "id": 2820,
+    "parentId": 2810,
+    "name": "洛隆县"
+  },
+  {
+    "id": 2814,
+    "parentId": 2810,
+    "name": "类乌齐县"
+  },
+  {
+    "id": 2819,
+    "parentId": 2810,
+    "name": "芒康县"
+  },
+  {
+    "id": 2813,
+    "parentId": 2810,
+    "name": "贡觉县"
+  },
+  {
+    "id": 2821,
+    "parentId": 2810,
+    "name": "边坝县"
+  },
+  {
+    "id": 2822,
+    "parentId": 2792,
+    "name": "林芝地区"
+  },
+  {
+    "id": 2826,
+    "parentId": 2822,
+    "name": "墨脱县"
+  },
+  {
+    "id": 2828,
+    "parentId": 2822,
+    "name": "察隅县"
+  },
+  {
+    "id": 2824,
+    "parentId": 2822,
+    "name": "工布江达县"
+  },
+  {
+    "id": 2829,
+    "parentId": 2822,
+    "name": "朗县"
+  },
+  {
+    "id": 2823,
+    "parentId": 2822,
+    "name": "林芝县"
+  },
+  {
+    "id": 2827,
+    "parentId": 2822,
+    "name": "波密县"
+  },
+  {
+    "id": 2825,
+    "parentId": 2822,
+    "name": "米林县"
+  },
+  {
+    "id": 2830,
+    "parentId": 2792,
+    "name": "那曲地区"
+  },
+  {
+    "id": 2832,
+    "parentId": 2830,
+    "name": "嘉黎县"
+  },
+  {
+    "id": 2835,
+    "parentId": 2830,
+    "name": "安多县"
+  },
+  {
+    "id": 2840,
+    "parentId": 2830,
+    "name": "尼玛县"
+  },
+  {
+    "id": 2839,
+    "parentId": 2830,
+    "name": "巴青县"
+  },
+  {
+    "id": 2833,
+    "parentId": 2830,
+    "name": "比如县"
+  },
+  {
+    "id": 2838,
+    "parentId": 2830,
+    "name": "班戈县"
+  },
+  {
+    "id": 2836,
+    "parentId": 2830,
+    "name": "申扎县"
+  },
+  {
+    "id": 2837,
+    "parentId": 2830,
+    "name": "索县"
+  },
+  {
+    "id": 2834,
+    "parentId": 2830,
+    "name": "聂荣县"
+  },
+  {
+    "id": 2831,
+    "parentId": 2830,
+    "name": "那曲县"
+  },
+  {
+    "id": 2841,
+    "parentId": 2792,
+    "name": "日喀则地区"
+  },
+  {
+    "id": 2855,
+    "parentId": 2841,
+    "name": "亚东县"
+  },
+  {
+    "id": 2851,
+    "parentId": 2841,
+    "name": "仁布县"
+  },
+  {
+    "id": 2854,
+    "parentId": 2841,
+    "name": "仲巴县"
+  },
+  {
+    "id": 2843,
+    "parentId": 2841,
+    "name": "南木林县"
+  },
+  {
+    "id": 2856,
+    "parentId": 2841,
+    "name": "吉隆县"
+  },
+  {
+    "id": 2845,
+    "parentId": 2841,
+    "name": "定日县"
+  },
+  {
+    "id": 2853,
+    "parentId": 2841,
+    "name": "定结县"
+  },
+  {
+    "id": 2859,
+    "parentId": 2841,
+    "name": "岗巴县"
+  },
+  {
+    "id": 2852,
+    "parentId": 2841,
+    "name": "康马县"
+  },
+  {
+    "id": 2847,
+    "parentId": 2841,
+    "name": "拉孜县"
+  },
+  {
+    "id": 2842,
+    "parentId": 2841,
+    "name": "日喀则市"
+  },
+  {
+    "id": 2848,
+    "parentId": 2841,
+    "name": "昂仁县"
+  },
+  {
+    "id": 2844,
+    "parentId": 2841,
+    "name": "江孜县"
+  },
+  {
+    "id": 2850,
+    "parentId": 2841,
+    "name": "白朗县"
+  },
+  {
+    "id": 2857,
+    "parentId": 2841,
+    "name": "聂拉木县"
+  },
+  {
+    "id": 2858,
+    "parentId": 2841,
+    "name": "萨嘎县"
+  },
+  {
+    "id": 2846,
+    "parentId": 2841,
+    "name": "萨迦县"
+  },
+  {
+    "id": 2849,
+    "parentId": 2841,
+    "name": "谢通门县"
+  },
+  {
+    "id": 2860,
+    "parentId": 2792,
+    "name": "山南地区"
+  },
+  {
+    "id": 2861,
+    "parentId": 2860,
+    "name": "乃东县"
+  },
+  {
+    "id": 2869,
+    "parentId": 2860,
+    "name": "加查县"
+  },
+  {
+    "id": 2862,
+    "parentId": 2860,
+    "name": "扎囊县"
+  },
+  {
+    "id": 2867,
+    "parentId": 2860,
+    "name": "措美县"
+  },
+  {
+    "id": 2866,
+    "parentId": 2860,
+    "name": "曲松县"
+  },
+  {
+    "id": 2864,
+    "parentId": 2860,
+    "name": "桑日县"
+  },
+  {
+    "id": 2868,
+    "parentId": 2860,
+    "name": "洛扎县"
+  },
+  {
+    "id": 2872,
+    "parentId": 2860,
+    "name": "浪卡子县"
+  },
+  {
+    "id": 2865,
+    "parentId": 2860,
+    "name": "琼结县"
+  },
+  {
+    "id": 2863,
+    "parentId": 2860,
+    "name": "贡嘎县"
+  },
+  {
+    "id": 2871,
+    "parentId": 2860,
+    "name": "错那县"
+  },
+  {
+    "id": 2870,
+    "parentId": 2860,
+    "name": "隆子县"
+  },
+  {
+    "id": 2873,
+    "parentId": null,
+    "name": "新疆"
+  },
+  {
+    "id": 2874,
+    "parentId": 2873,
+    "name": "乌鲁木齐市"
+  },
+  {
+    "id": 2881,
+    "parentId": 2874,
+    "name": "东山区"
+  },
+  {
+    "id": 2882,
+    "parentId": 2874,
+    "name": "乌鲁木齐县"
+  },
+  {
+    "id": 2875,
+    "parentId": 2874,
+    "name": "天山区"
+  },
+  {
+    "id": 2879,
+    "parentId": 2874,
+    "name": "头屯河区"
+  },
+  {
+    "id": 2877,
+    "parentId": 2874,
+    "name": "新市区"
+  },
+  {
+    "id": 2878,
+    "parentId": 2874,
+    "name": "水磨沟区"
+  },
+  {
+    "id": 2876,
+    "parentId": 2874,
+    "name": "沙依巴克区"
+  },
+  {
+    "id": 2880,
+    "parentId": 2874,
+    "name": "达坂城区"
+  },
+  {
+    "id": 2883,
+    "parentId": 2873,
+    "name": "阿克苏地区"
+  },
+  {
+    "id": 2890,
+    "parentId": 2883,
+    "name": "乌什县"
+  },
+  {
+    "id": 2886,
+    "parentId": 2883,
+    "name": "库车县"
+  },
+  {
+    "id": 2889,
+    "parentId": 2883,
+    "name": "拜城县"
+  },
+  {
+    "id": 2888,
+    "parentId": 2883,
+    "name": "新和县"
+  },
+  {
+    "id": 2892,
+    "parentId": 2883,
+    "name": "柯坪县"
+  },
+  {
+    "id": 2887,
+    "parentId": 2883,
+    "name": "沙雅县"
+  },
+  {
+    "id": 2885,
+    "parentId": 2883,
+    "name": "温宿县"
+  },
+  {
+    "id": 2884,
+    "parentId": 2883,
+    "name": "阿克苏市"
+  },
+  {
+    "id": 2891,
+    "parentId": 2883,
+    "name": "阿瓦提县"
+  },
+  {
+    "id": 2894,
+    "parentId": 2873,
+    "name": "阿勒泰地区"
+  },
+  {
+    "id": 2901,
+    "parentId": 2894,
+    "name": "吉木乃县"
+  },
+  {
+    "id": 2899,
+    "parentId": 2894,
+    "name": "哈巴河县"
+  },
+  {
+    "id": 2897,
+    "parentId": 2894,
+    "name": "富蕴县"
+  },
+  {
+    "id": 2896,
+    "parentId": 2894,
+    "name": "布尔津县"
+  },
+  {
+    "id": 2898,
+    "parentId": 2894,
+    "name": "福海县"
+  },
+  {
+    "id": 2895,
+    "parentId": 2894,
+    "name": "阿勒泰市"
+  },
+  {
+    "id": 2900,
+    "parentId": 2894,
+    "name": "青河县"
+  },
+  {
+    "id": 2902,
+    "parentId": 2873,
+    "name": "巴音郭楞蒙古自治州"
+  },
+  {
+    "id": 2907,
+    "parentId": 2902,
+    "name": "且末县"
+  },
+  {
+    "id": 2911,
+    "parentId": 2902,
+    "name": "博湖县"
+  },
+  {
+    "id": 2910,
+    "parentId": 2902,
+    "name": "和硕县"
+  },
+  {
+    "id": 2909,
+    "parentId": 2902,
+    "name": "和静县"
+  },
+  {
+    "id": 2905,
+    "parentId": 2902,
+    "name": "尉犁县"
+  },
+  {
+    "id": 2903,
+    "parentId": 2902,
+    "name": "库尔勒市"
+  },
+  {
+    "id": 2908,
+    "parentId": 2902,
+    "name": "焉耆回族自治县"
+  },
+  {
+    "id": 2906,
+    "parentId": 2902,
+    "name": "若羌县"
+  },
+  {
+    "id": 2904,
+    "parentId": 2902,
+    "name": "轮台县"
+  },
+  {
+    "id": 2912,
+    "parentId": 2873,
+    "name": "博尔塔拉蒙古自治州"
+  },
+  {
+    "id": 2913,
+    "parentId": 2912,
+    "name": "博乐市"
+  },
+  {
+    "id": 2915,
+    "parentId": 2912,
+    "name": "温泉县"
+  },
+  {
+    "id": 2914,
+    "parentId": 2912,
+    "name": "精河县"
+  },
+  {
+    "id": 2916,
+    "parentId": 2873,
+    "name": "昌吉回族自治州"
+  },
+  {
+    "id": 2923,
+    "parentId": 2916,
+    "name": "吉木萨尔县"
+  },
+  {
+    "id": 2920,
+    "parentId": 2916,
+    "name": "呼图壁县"
+  },
+  {
+    "id": 2922,
+    "parentId": 2916,
+    "name": "奇台县"
+  },
+  {
+    "id": 2917,
+    "parentId": 2916,
+    "name": "昌吉市"
+  },
+  {
+    "id": 2924,
+    "parentId": 2916,
+    "name": "木垒哈萨克自治县"
+  },
+  {
+    "id": 2921,
+    "parentId": 2916,
+    "name": "玛纳斯县"
+  },
+  {
+    "id": 2919,
+    "parentId": 2916,
+    "name": "米泉市"
+  },
+  {
+    "id": 2918,
+    "parentId": 2916,
+    "name": "阜康市"
+  },
+  {
+    "id": 2925,
+    "parentId": 2873,
+    "name": "哈密地区"
+  },
+  {
+    "id": 2928,
+    "parentId": 2925,
+    "name": "伊吾县"
+  },
+  {
+    "id": 2926,
+    "parentId": 2925,
+    "name": "哈密市"
+  },
+  {
+    "id": 2927,
+    "parentId": 2925,
+    "name": "巴里坤哈萨克自治县"
+  },
+  {
+    "id": 2929,
+    "parentId": 2873,
+    "name": "和田地区"
+  },
+  {
+    "id": 2936,
+    "parentId": 2929,
+    "name": "于田县"
+  },
+  {
+    "id": 2931,
+    "parentId": 2929,
+    "name": "和田县"
+  },
+  {
+    "id": 2930,
+    "parentId": 2929,
+    "name": "和田市"
+  },
+  {
+    "id": 2932,
+    "parentId": 2929,
+    "name": "墨玉县"
+  },
+  {
+    "id": 2937,
+    "parentId": 2929,
+    "name": "民丰县"
+  },
+  {
+    "id": 2934,
+    "parentId": 2929,
+    "name": "洛浦县"
+  },
+  {
+    "id": 2933,
+    "parentId": 2929,
+    "name": "皮山县"
+  },
+  {
+    "id": 2935,
+    "parentId": 2929,
+    "name": "策勒县"
+  },
+  {
+    "id": 2938,
+    "parentId": 2873,
+    "name": "喀什地区"
+  },
+  {
+    "id": 2948,
+    "parentId": 2938,
+    "name": "伽师县"
+  },
+  {
+    "id": 2945,
+    "parentId": 2938,
+    "name": "叶城县"
+  },
+  {
+    "id": 2939,
+    "parentId": 2938,
+    "name": "喀什市"
+  },
+  {
+    "id": 2950,
+    "parentId": 2938,
+    "name": "塔什库尔干塔吉克自治县"
+  },
+  {
+    "id": 2947,
+    "parentId": 2938,
+    "name": "岳普湖县"
+  },
+  {
+    "id": 2949,
+    "parentId": 2938,
+    "name": "巴楚县"
+  },
+  {
+    "id": 2943,
+    "parentId": 2938,
+    "name": "泽普县"
+  },
+  {
+    "id": 2941,
+    "parentId": 2938,
+    "name": "疏勒县"
+  },
+  {
+    "id": 2940,
+    "parentId": 2938,
+    "name": "疏附县"
+  },
+  {
+    "id": 2942,
+    "parentId": 2938,
+    "name": "英吉沙县"
+  },
+  {
+    "id": 2944,
+    "parentId": 2938,
+    "name": "莎车县"
+  },
+  {
+    "id": 2946,
+    "parentId": 2938,
+    "name": "麦盖提县"
+  },
+  {
+    "id": 2951,
+    "parentId": 2873,
+    "name": "克拉玛依市"
+  },
+  {
+    "id": 2955,
+    "parentId": 2951,
+    "name": "乌尔禾区"
+  },
+  {
+    "id": 2953,
+    "parentId": 2951,
+    "name": "克拉玛依区"
+  },
+  {
+    "id": 2952,
+    "parentId": 2951,
+    "name": "独山子区"
+  },
+  {
+    "id": 2954,
+    "parentId": 2951,
+    "name": "白碱滩区"
+  },
+  {
+    "id": 2956,
+    "parentId": 2873,
+    "name": "克孜勒苏柯尔克孜自治州"
+  },
+  {
+    "id": 2960,
+    "parentId": 2956,
+    "name": "乌恰县"
+  },
+  {
+    "id": 2958,
+    "parentId": 2956,
+    "name": "阿克陶县"
+  },
+  {
+    "id": 2959,
+    "parentId": 2956,
+    "name": "阿合奇县"
+  },
+  {
+    "id": 2957,
+    "parentId": 2956,
+    "name": "阿图什市"
+  },
+  {
+    "id": 2962,
+    "parentId": 2873,
+    "name": "塔城地区"
+  },
+  {
+    "id": 2964,
+    "parentId": 2962,
+    "name": "乌苏市"
+  },
+  {
+    "id": 2969,
+    "parentId": 2962,
+    "name": "和布克赛尔蒙古自治县"
+  },
+  {
+    "id": 2963,
+    "parentId": 2962,
+    "name": "塔城市"
+  },
+  {
+    "id": 2967,
+    "parentId": 2962,
+    "name": "托里县"
+  },
+  {
+    "id": 2966,
+    "parentId": 2962,
+    "name": "沙湾县"
+  },
+  {
+    "id": 2968,
+    "parentId": 2962,
+    "name": "裕民县"
+  },
+  {
+    "id": 2965,
+    "parentId": 2962,
+    "name": "额敏县"
+  },
+  {
+    "id": 2971,
+    "parentId": 2873,
+    "name": "吐鲁番地区"
+  },
+  {
+    "id": 2972,
+    "parentId": 2971,
+    "name": "吐鲁番市"
+  },
+  {
+    "id": 2974,
+    "parentId": 2971,
+    "name": "托克逊县"
+  },
+  {
+    "id": 2973,
+    "parentId": 2971,
+    "name": "鄯善县"
+  },
+  {
+    "id": 2976,
+    "parentId": 2873,
+    "name": "伊犁哈萨克自治州"
+  },
+  {
+    "id": 2979,
+    "parentId": 2976,
+    "name": "伊宁县"
+  },
+  {
+    "id": 2977,
+    "parentId": 2976,
+    "name": "伊宁市"
+  },
+  {
+    "id": 2978,
+    "parentId": 2976,
+    "name": "奎屯市"
+  },
+  {
+    "id": 2980,
+    "parentId": 2976,
+    "name": "察布查尔锡伯自治县"
+  },
+  {
+    "id": 2986,
+    "parentId": 2976,
+    "name": "尼勒克县"
+  },
+  {
+    "id": 2982,
+    "parentId": 2976,
+    "name": "巩留县"
+  },
+  {
+    "id": 2983,
+    "parentId": 2976,
+    "name": "新源县"
+  },
+  {
+    "id": 2984,
+    "parentId": 2976,
+    "name": "昭苏县"
+  },
+  {
+    "id": 2985,
+    "parentId": 2976,
+    "name": "特克斯县"
+  },
+  {
+    "id": 2981,
+    "parentId": 2976,
+    "name": "霍城县"
+  },
+  {
+    "id": 2987,
+    "parentId": null,
+    "name": "云南"
+  },
+  {
+    "id": 2988,
+    "parentId": 2987,
+    "name": "昆明市"
+  },
+  {
+    "id": 2993,
+    "parentId": 2988,
+    "name": "东川区"
+  },
+  {
+    "id": 2989,
+    "parentId": 2988,
+    "name": "五华区"
+  },
+  {
+    "id": 2994,
+    "parentId": 2988,
+    "name": "呈贡县"
+  },
+  {
+    "id": 3002,
+    "parentId": 2988,
+    "name": "安宁市"
+  },
+  {
+    "id": 2991,
+    "parentId": 2988,
+    "name": "官渡区"
+  },
+  {
+    "id": 2997,
+    "parentId": 2988,
+    "name": "宜良县"
+  },
+  {
+    "id": 2996,
+    "parentId": 2988,
+    "name": "富民县"
+  },
+  {
+    "id": 3001,
+    "parentId": 2988,
+    "name": "寻甸回族彝族自治县"
+  },
+  {
+    "id": 2999,
+    "parentId": 2988,
+    "name": "嵩明县"
+  },
+  {
+    "id": 2995,
+    "parentId": 2988,
+    "name": "晋宁县"
+  },
+  {
+    "id": 2990,
+    "parentId": 2988,
+    "name": "盘龙区"
+  },
+  {
+    "id": 2998,
+    "parentId": 2988,
+    "name": "石林彝族自治县"
+  },
+  {
+    "id": 3000,
+    "parentId": 2988,
+    "name": "禄劝彝族苗族自治县"
+  },
+  {
+    "id": 2992,
+    "parentId": 2988,
+    "name": "西山区"
+  },
+  {
+    "id": 3003,
+    "parentId": 2987,
+    "name": "保山市"
+  },
+  {
+    "id": 3005,
+    "parentId": 3003,
+    "name": "施甸县"
+  },
+  {
+    "id": 3008,
+    "parentId": 3003,
+    "name": "昌宁县"
+  },
+  {
+    "id": 3006,
+    "parentId": 3003,
+    "name": "腾冲县"
+  },
+  {
+    "id": 3004,
+    "parentId": 3003,
+    "name": "隆阳区"
+  },
+  {
+    "id": 3007,
+    "parentId": 3003,
+    "name": "龙陵县"
+  },
+  {
+    "id": 3009,
+    "parentId": 2987,
+    "name": "楚雄彝族自治州"
+  },
+  {
+    "id": 3017,
+    "parentId": 3009,
+    "name": "元谋县"
+  },
+  {
+    "id": 3013,
+    "parentId": 3009,
+    "name": "南华县"
+  },
+  {
+    "id": 3011,
+    "parentId": 3009,
+    "name": "双柏县"
+  },
+  {
+    "id": 3015,
+    "parentId": 3009,
+    "name": "大姚县"
+  },
+  {
+    "id": 3014,
+    "parentId": 3009,
+    "name": "姚安县"
+  },
+  {
+    "id": 3010,
+    "parentId": 3009,
+    "name": "楚雄市"
+  },
+  {
+    "id": 3018,
+    "parentId": 3009,
+    "name": "武定县"
+  },
+  {
+    "id": 3016,
+    "parentId": 3009,
+    "name": "永仁县"
+  },
+  {
+    "id": 3012,
+    "parentId": 3009,
+    "name": "牟定县"
+  },
+  {
+    "id": 3019,
+    "parentId": 3009,
+    "name": "禄丰县"
+  },
+  {
+    "id": 3020,
+    "parentId": 2987,
+    "name": "大理白族自治州"
+  },
+  {
+    "id": 3029,
+    "parentId": 3020,
+    "name": "云龙县"
+  },
+  {
+    "id": 3031,
+    "parentId": 3020,
+    "name": "剑川县"
+  },
+  {
+    "id": 3026,
+    "parentId": 3020,
+    "name": "南涧彝族自治县"
+  },
+  {
+    "id": 3021,
+    "parentId": 3020,
+    "name": "大理市"
+  },
+  {
+    "id": 3024,
+    "parentId": 3020,
+    "name": "宾川县"
+  },
+  {
+    "id": 3027,
+    "parentId": 3020,
+    "name": "巍山彝族回族自治县"
+  },
+  {
+    "id": 3025,
+    "parentId": 3020,
+    "name": "弥渡县"
+  },
+  {
+    "id": 3028,
+    "parentId": 3020,
+    "name": "永平县"
+  },
+  {
+    "id": 3030,
+    "parentId": 3020,
+    "name": "洱源县"
+  },
+  {
+    "id": 3022,
+    "parentId": 3020,
+    "name": "漾濞彝族自治县"
+  },
+  {
+    "id": 3023,
+    "parentId": 3020,
+    "name": "祥云县"
+  },
+  {
+    "id": 3032,
+    "parentId": 3020,
+    "name": "鹤庆县"
+  },
+  {
+    "id": 3033,
+    "parentId": 2987,
+    "name": "德宏傣族景颇族自治州"
+  },
+  {
+    "id": 3036,
+    "parentId": 3033,
+    "name": "梁河县"
+  },
+  {
+    "id": 3035,
+    "parentId": 3033,
+    "name": "潞西市"
+  },
+  {
+    "id": 3034,
+    "parentId": 3033,
+    "name": "瑞丽市"
+  },
+  {
+    "id": 3037,
+    "parentId": 3033,
+    "name": "盈江县"
+  },
+  {
+    "id": 3038,
+    "parentId": 3033,
+    "name": "陇川县"
+  },
+  {
+    "id": 3039,
+    "parentId": 2987,
+    "name": "迪庆藏族自治州"
+  },
+  {
+    "id": 3041,
+    "parentId": 3039,
+    "name": "德钦县"
+  },
+  {
+    "id": 3042,
+    "parentId": 3039,
+    "name": "维西傈僳族自治县"
+  },
+  {
+    "id": 3040,
+    "parentId": 3039,
+    "name": "香格里拉县"
+  },
+  {
+    "id": 3043,
+    "parentId": 2987,
+    "name": "红河哈尼族彝族自治州"
+  },
+  {
+    "id": 3044,
+    "parentId": 3043,
+    "name": "个旧市"
+  },
+  {
+    "id": 3052,
+    "parentId": 3043,
+    "name": "元阳县"
+  },
+  {
+    "id": 3047,
+    "parentId": 3043,
+    "name": "屏边苗族自治县"
+  },
+  {
+    "id": 3048,
+    "parentId": 3043,
+    "name": "建水县"
+  },
+  {
+    "id": 3045,
+    "parentId": 3043,
+    "name": "开远市"
+  },
+  {
+    "id": 3050,
+    "parentId": 3043,
+    "name": "弥勒县"
+  },
+  {
+    "id": 3056,
+    "parentId": 3043,
+    "name": "河口瑶族自治县"
+  },
+  {
+    "id": 3051,
+    "parentId": 3043,
+    "name": "泸西县"
+  },
+  {
+    "id": 3049,
+    "parentId": 3043,
+    "name": "石屏县"
+  },
+  {
+    "id": 3053,
+    "parentId": 3043,
+    "name": "红河县"
+  },
+  {
+    "id": 3055,
+    "parentId": 3043,
+    "name": "绿春县"
+  },
+  {
+    "id": 3046,
+    "parentId": 3043,
+    "name": "蒙自县"
+  },
+  {
+    "id": 3054,
+    "parentId": 3043,
+    "name": "金平苗族瑶族傣族自治县"
+  },
+  {
+    "id": 3057,
+    "parentId": 2987,
+    "name": "丽江市"
+  },
+  {
+    "id": 3061,
+    "parentId": 3057,
+    "name": "华坪县"
+  },
+  {
+    "id": 3058,
+    "parentId": 3057,
+    "name": "古城区"
+  },
+  {
+    "id": 3062,
+    "parentId": 3057,
+    "name": "宁蒗彝族自治县"
+  },
+  {
+    "id": 3060,
+    "parentId": 3057,
+    "name": "永胜县"
+  },
+  {
+    "id": 3059,
+    "parentId": 3057,
+    "name": "玉龙纳西族自治县"
+  },
+  {
+    "id": 3063,
+    "parentId": 2987,
+    "name": "临沧市"
+  },
+  {
+    "id": 3064,
+    "parentId": 3063,
+    "name": "临翔区"
+  },
+  {
+    "id": 3066,
+    "parentId": 3063,
+    "name": "云县"
+  },
+  {
+    "id": 3065,
+    "parentId": 3063,
+    "name": "凤庆县"
+  },
+  {
+    "id": 3069,
+    "parentId": 3063,
+    "name": "双江拉祜族佤族布朗族傣族自治县"
+  },
+  {
+    "id": 3067,
+    "parentId": 3063,
+    "name": "永德县"
+  },
+  {
+    "id": 3071,
+    "parentId": 3063,
+    "name": "沧源佤族自治县"
+  },
+  {
+    "id": 3070,
+    "parentId": 3063,
+    "name": "耿马傣族佤族自治县"
+  },
+  {
+    "id": 3068,
+    "parentId": 3063,
+    "name": "镇康县"
+  },
+  {
+    "id": 3072,
+    "parentId": 2987,
+    "name": "怒江傈僳族自治州"
+  },
+  {
+    "id": 3076,
+    "parentId": 3072,
+    "name": "兰坪白族普米族自治县"
+  },
+  {
+    "id": 3073,
+    "parentId": 3072,
+    "name": "泸水县"
+  },
+  {
+    "id": 3074,
+    "parentId": 3072,
+    "name": "福贡县"
+  },
+  {
+    "id": 3075,
+    "parentId": 3072,
+    "name": "贡山独龙族怒族自治县"
+  },
+  {
+    "id": 3077,
+    "parentId": 2987,
+    "name": "曲靖市"
+  },
+  {
+    "id": 3084,
+    "parentId": 3077,
+    "name": "会泽县"
+  },
+  {
+    "id": 3086,
+    "parentId": 3077,
+    "name": "宣威市"
+  },
+  {
+    "id": 3083,
+    "parentId": 3077,
+    "name": "富源县"
+  },
+  {
+    "id": 3081,
+    "parentId": 3077,
+    "name": "师宗县"
+  },
+  {
+    "id": 3085,
+    "parentId": 3077,
+    "name": "沾益县"
+  },
+  {
+    "id": 3082,
+    "parentId": 3077,
+    "name": "罗平县"
+  },
+  {
+    "id": 3080,
+    "parentId": 3077,
+    "name": "陆良县"
+  },
+  {
+    "id": 3079,
+    "parentId": 3077,
+    "name": "马龙县"
+  },
+  {
+    "id": 3078,
+    "parentId": 3077,
+    "name": "麒麟区"
+  },
+  {
+    "id": 3087,
+    "parentId": 2987,
+    "name": "思茅市"
+  },
+  {
+    "id": 3090,
+    "parentId": 3087,
+    "name": "墨江哈尼族自治县"
+  },
+  {
+    "id": 3095,
+    "parentId": 3087,
+    "name": "孟连傣族拉祜族佤族自治县"
+  },
+  {
+    "id": 3089,
+    "parentId": 3087,
+    "name": "普洱哈尼族彝族自治县"
+  },
+  {
+    "id": 3091,
+    "parentId": 3087,
+    "name": "景东彝族自治县"
+  },
+  {
+    "id": 3092,
+    "parentId": 3087,
+    "name": "景谷傣族彝族自治县"
+  },
+  {
+    "id": 3094,
+    "parentId": 3087,
+    "name": "江城哈尼族彝族自治县"
+  },
+  {
+    "id": 3096,
+    "parentId": 3087,
+    "name": "澜沧拉祜族自治县"
+  },
+  {
+    "id": 3088,
+    "parentId": 3087,
+    "name": "翠云区"
+  },
+  {
+    "id": 3097,
+    "parentId": 3087,
+    "name": "西盟佤族自治县"
+  },
+  {
+    "id": 3093,
+    "parentId": 3087,
+    "name": "镇沅彝族哈尼族拉祜族自治县"
+  },
+  {
+    "id": 3098,
+    "parentId": 2987,
+    "name": "文山壮族苗族自治州"
+  },
+  {
+    "id": 3104,
+    "parentId": 3098,
+    "name": "丘北县"
+  },
+  {
+    "id": 3106,
+    "parentId": 3098,
+    "name": "富宁县"
+  },
+  {
+    "id": 3105,
+    "parentId": 3098,
+    "name": "广南县"
+  },
+  {
+    "id": 3099,
+    "parentId": 3098,
+    "name": "文山县"
+  },
+  {
+    "id": 3100,
+    "parentId": 3098,
+    "name": "砚山县"
+  },
+  {
+    "id": 3101,
+    "parentId": 3098,
+    "name": "西畴县"
+  },
+  {
+    "id": 3103,
+    "parentId": 3098,
+    "name": "马关县"
+  },
+  {
+    "id": 3102,
+    "parentId": 3098,
+    "name": "麻栗坡县"
+  },
+  {
+    "id": 3107,
+    "parentId": 2987,
+    "name": "西双版纳傣族自治州"
+  },
+  {
+    "id": 3109,
+    "parentId": 3107,
+    "name": "勐海县"
+  },
+  {
+    "id": 3110,
+    "parentId": 3107,
+    "name": "勐腊县"
+  },
+  {
+    "id": 3108,
+    "parentId": 3107,
+    "name": "景洪市"
+  },
+  {
+    "id": 3111,
+    "parentId": 2987,
+    "name": "玉溪市"
+  },
+  {
+    "id": 3120,
+    "parentId": 3111,
+    "name": "元江哈尼族彝族傣族自治县"
+  },
+  {
+    "id": 3116,
+    "parentId": 3111,
+    "name": "华宁县"
+  },
+  {
+    "id": 3118,
+    "parentId": 3111,
+    "name": "峨山彝族自治县"
+  },
+  {
+    "id": 3119,
+    "parentId": 3111,
+    "name": "新平彝族傣族自治县"
+  },
+  {
+    "id": 3117,
+    "parentId": 3111,
+    "name": "易门县"
+  },
+  {
+    "id": 3113,
+    "parentId": 3111,
+    "name": "江川县"
+  },
+  {
+    "id": 3114,
+    "parentId": 3111,
+    "name": "澄江县"
+  },
+  {
+    "id": 3112,
+    "parentId": 3111,
+    "name": "红塔区"
+  },
+  {
+    "id": 3115,
+    "parentId": 3111,
+    "name": "通海县"
+  },
+  {
+    "id": 3121,
+    "parentId": 2987,
+    "name": "昭通市"
+  },
+  {
+    "id": 3126,
+    "parentId": 3121,
+    "name": "大关县"
+  },
+  {
+    "id": 3131,
+    "parentId": 3121,
+    "name": "威信县"
+  },
+  {
+    "id": 3124,
+    "parentId": 3121,
+    "name": "巧家县"
+  },
+  {
+    "id": 3130,
+    "parentId": 3121,
+    "name": "彝良县"
+  },
+  {
+    "id": 3122,
+    "parentId": 3121,
+    "name": "昭阳区"
+  },
+  {
+    "id": 3132,
+    "parentId": 3121,
+    "name": "水富县"
+  },
+  {
+    "id": 3127,
+    "parentId": 3121,
+    "name": "永善县"
+  },
+  {
+    "id": 3125,
+    "parentId": 3121,
+    "name": "盐津县"
+  },
+  {
+    "id": 3128,
+    "parentId": 3121,
+    "name": "绥江县"
+  },
+  {
+    "id": 3129,
+    "parentId": 3121,
+    "name": "镇雄县"
+  },
+  {
+    "id": 3123,
+    "parentId": 3121,
+    "name": "鲁甸县"
+  },
+  {
+    "id": 3241,
+    "parentId": 2987,
+    "name": "普洱"
+  },
+  {
+    "id": 3244,
+    "parentId": 3241,
+    "name": "墨江"
+  },
+  {
+    "id": 3249,
+    "parentId": 3241,
+    "name": "孟连"
+  },
+  {
+    "id": 3243,
+    "parentId": 3241,
+    "name": "宁洱"
+  },
+  {
+    "id": 3242,
+    "parentId": 3241,
+    "name": "思茅"
+  },
+  {
+    "id": 3245,
+    "parentId": 3241,
+    "name": "景东"
+  },
+  {
+    "id": 3246,
+    "parentId": 3241,
+    "name": "景谷"
+  },
+  {
+    "id": 3248,
+    "parentId": 3241,
+    "name": "江城"
+  },
+  {
+    "id": 3250,
+    "parentId": 3241,
+    "name": "澜沧"
+  },
+  {
+    "id": 3251,
+    "parentId": 3241,
+    "name": "西盟"
+  },
+  {
+    "id": 3247,
+    "parentId": 3241,
+    "name": "镇沅"
+  },
+  {
+    "id": 3133,
+    "parentId": null,
+    "name": "浙江"
+  },
+  {
+    "id": 3134,
+    "parentId": 3133,
+    "name": "杭州市"
+  },
+  {
+    "id": 3135,
+    "parentId": 3134,
+    "name": "上城区"
+  },
+  {
+    "id": 3136,
+    "parentId": 3134,
+    "name": "下城区"
+  },
+  {
+    "id": 3147,
+    "parentId": 3134,
+    "name": "临安市"
+  },
+  {
+    "id": 3142,
+    "parentId": 3134,
+    "name": "余杭区"
+  },
+  {
+    "id": 3146,
+    "parentId": 3134,
+    "name": "富阳市"
+  },
+  {
+    "id": 3145,
+    "parentId": 3134,
+    "name": "建德市"
+  },
+  {
+    "id": 3138,
+    "parentId": 3134,
+    "name": "拱墅区"
+  },
+  {
+    "id": 3143,
+    "parentId": 3134,
+    "name": "桐庐县"
+  },
+  {
+    "id": 3137,
+    "parentId": 3134,
+    "name": "江干区"
+  },
+  {
+    "id": 3144,
+    "parentId": 3134,
+    "name": "淳安县"
+  },
+  {
+    "id": 3140,
+    "parentId": 3134,
+    "name": "滨江区"
+  },
+  {
+    "id": 3141,
+    "parentId": 3134,
+    "name": "萧山区"
+  },
+  {
+    "id": 3139,
+    "parentId": 3134,
+    "name": "西湖区"
+  },
+  {
+    "id": 3148,
+    "parentId": 3133,
+    "name": "湖州市"
+  },
+  {
+    "id": 3150,
+    "parentId": 3148,
+    "name": "南浔区"
+  },
+  {
+    "id": 3149,
+    "parentId": 3148,
+    "name": "吴兴区"
+  },
+  {
+    "id": 3153,
+    "parentId": 3148,
+    "name": "安吉县"
+  },
+  {
+    "id": 3151,
+    "parentId": 3148,
+    "name": "德清县"
+  },
+  {
+    "id": 3152,
+    "parentId": 3148,
+    "name": "长兴县"
+  },
+  {
+    "id": 3154,
+    "parentId": 3133,
+    "name": "嘉兴市"
+  },
+  {
+    "id": 3256,
+    "parentId": 3154,
+    "name": "南湖区"
+  },
+  {
+    "id": 3157,
+    "parentId": 3154,
+    "name": "嘉善县"
+  },
+  {
+    "id": 3160,
+    "parentId": 3154,
+    "name": "平湖市"
+  },
+  {
+    "id": 3161,
+    "parentId": 3154,
+    "name": "桐乡市"
+  },
+  {
+    "id": 3159,
+    "parentId": 3154,
+    "name": "海宁市"
+  },
+  {
+    "id": 3158,
+    "parentId": 3154,
+    "name": "海盐县"
+  },
+  {
+    "id": 3155,
+    "parentId": 3154,
+    "name": "秀城区"
+  },
+  {
+    "id": 3156,
+    "parentId": 3154,
+    "name": "秀洲区"
+  },
+  {
+    "id": 3162,
+    "parentId": 3133,
+    "name": "金华市"
+  },
+  {
+    "id": 3170,
+    "parentId": 3162,
+    "name": "东阳市"
+  },
+  {
+    "id": 3169,
+    "parentId": 3162,
+    "name": "义乌市"
+  },
+  {
+    "id": 3168,
+    "parentId": 3162,
+    "name": "兰溪市"
+  },
+  {
+    "id": 3163,
+    "parentId": 3162,
+    "name": "婺城区"
+  },
+  {
+    "id": 3165,
+    "parentId": 3162,
+    "name": "武义县"
+  },
+  {
+    "id": 3171,
+    "parentId": 3162,
+    "name": "永康市"
+  },
+  {
+    "id": 3166,
+    "parentId": 3162,
+    "name": "浦江县"
+  },
+  {
+    "id": 3167,
+    "parentId": 3162,
+    "name": "磐安县"
+  },
+  {
+    "id": 3164,
+    "parentId": 3162,
+    "name": "金东区"
+  },
+  {
+    "id": 3172,
+    "parentId": 3133,
+    "name": "丽水市"
+  },
+  {
+    "id": 3178,
+    "parentId": 3172,
+    "name": "云和县"
+  },
+  {
+    "id": 3179,
+    "parentId": 3172,
+    "name": "庆元县"
+  },
+  {
+    "id": 3180,
+    "parentId": 3172,
+    "name": "景宁畲族自治县"
+  },
+  {
+    "id": 3177,
+    "parentId": 3172,
+    "name": "松阳县"
+  },
+  {
+    "id": 3175,
+    "parentId": 3172,
+    "name": "缙云县"
+  },
+  {
+    "id": 3173,
+    "parentId": 3172,
+    "name": "莲都区"
+  },
+  {
+    "id": 3176,
+    "parentId": 3172,
+    "name": "遂昌县"
+  },
+  {
+    "id": 3174,
+    "parentId": 3172,
+    "name": "青田县"
+  },
+  {
+    "id": 3181,
+    "parentId": 3172,
+    "name": "龙泉市"
+  },
+  {
+    "id": 3182,
+    "parentId": 3133,
+    "name": "宁波市"
+  },
+  {
+    "id": 3191,
+    "parentId": 3182,
+    "name": "余姚市"
+  },
+  {
+    "id": 3186,
+    "parentId": 3182,
+    "name": "北仑区"
+  },
+  {
+    "id": 3193,
+    "parentId": 3182,
+    "name": "奉化市"
+  },
+  {
+    "id": 3190,
+    "parentId": 3182,
+    "name": "宁海县"
+  },
+  {
+    "id": 3192,
+    "parentId": 3182,
+    "name": "慈溪市"
+  },
+  {
+    "id": 3184,
+    "parentId": 3182,
+    "name": "江东区"
+  },
+  {
+    "id": 3185,
+    "parentId": 3182,
+    "name": "江北区"
+  },
+  {
+    "id": 3183,
+    "parentId": 3182,
+    "name": "海曙区"
+  },
+  {
+    "id": 3189,
+    "parentId": 3182,
+    "name": "象山县"
+  },
+  {
+    "id": 3188,
+    "parentId": 3182,
+    "name": "鄞州区"
+  },
+  {
+    "id": 3187,
+    "parentId": 3182,
+    "name": "镇海区"
+  },
+  {
+    "id": 3194,
+    "parentId": 3133,
+    "name": "衢州市"
+  },
+  {
+    "id": 3197,
+    "parentId": 3194,
+    "name": "常山县"
+  },
+  {
+    "id": 3198,
+    "parentId": 3194,
+    "name": "开化县"
+  },
+  {
+    "id": 3195,
+    "parentId": 3194,
+    "name": "柯城区"
+  },
+  {
+    "id": 3200,
+    "parentId": 3194,
+    "name": "江山市"
+  },
+  {
+    "id": 3196,
+    "parentId": 3194,
+    "name": "衢江区"
+  },
+  {
+    "id": 3199,
+    "parentId": 3194,
+    "name": "龙游县"
+  },
+  {
+    "id": 3201,
+    "parentId": 3133,
+    "name": "绍兴市"
+  },
+  {
+    "id": 3206,
+    "parentId": 3201,
+    "name": "上虞市"
+  },
+  {
+    "id": 3207,
+    "parentId": 3201,
+    "name": "嵊州市"
+  },
+  {
+    "id": 3204,
+    "parentId": 3201,
+    "name": "新昌县"
+  },
+  {
+    "id": 3239,
+    "parentId": 3201,
+    "name": "柯桥区"
+  },
+  {
+    "id": 3203,
+    "parentId": 3201,
+    "name": "绍兴县"
+  },
+  {
+    "id": 3205,
+    "parentId": 3201,
+    "name": "诸暨市"
+  },
+  {
+    "id": 3202,
+    "parentId": 3201,
+    "name": "越城区"
+  },
+  {
+    "id": 3208,
+    "parentId": 3133,
+    "name": "台州市"
+  },
+  {
+    "id": 3213,
+    "parentId": 3208,
+    "name": "三门县"
+  },
+  {
+    "id": 3217,
+    "parentId": 3208,
+    "name": "临海市"
+  },
+  {
+    "id": 3215,
+    "parentId": 3208,
+    "name": "仙居县"
+  },
+  {
+    "id": 3214,
+    "parentId": 3208,
+    "name": "天台县"
+  },
+  {
+    "id": 3209,
+    "parentId": 3208,
+    "name": "椒江区"
+  },
+  {
+    "id": 3216,
+    "parentId": 3208,
+    "name": "温岭市"
+  },
+  {
+    "id": 3212,
+    "parentId": 3208,
+    "name": "玉环县"
+  },
+  {
+    "id": 3211,
+    "parentId": 3208,
+    "name": "路桥区"
+  },
+  {
+    "id": 3210,
+    "parentId": 3208,
+    "name": "黄岩区"
+  },
+  {
+    "id": 3218,
+    "parentId": 3133,
+    "name": "温州市"
+  },
+  {
+    "id": 3229,
+    "parentId": 3218,
+    "name": "乐清市"
+  },
+  {
+    "id": 3224,
+    "parentId": 3218,
+    "name": "平阳县"
+  },
+  {
+    "id": 3226,
+    "parentId": 3218,
+    "name": "文成县"
+  },
+  {
+    "id": 3223,
+    "parentId": 3218,
+    "name": "永嘉县"
+  },
+  {
+    "id": 3227,
+    "parentId": 3218,
+    "name": "泰顺县"
+  },
+  {
+    "id": 3222,
+    "parentId": 3218,
+    "name": "洞头县"
+  },
+  {
+    "id": 3228,
+    "parentId": 3218,
+    "name": "瑞安市"
+  },
+  {
+    "id": 3221,
+    "parentId": 3218,
+    "name": "瓯海区"
+  },
+  {
+    "id": 3225,
+    "parentId": 3218,
+    "name": "苍南县"
+  },
+  {
+    "id": 3219,
+    "parentId": 3218,
+    "name": "鹿城区"
+  },
+  {
+    "id": 3220,
+    "parentId": 3218,
+    "name": "龙湾区"
+  },
+  {
+    "id": 3230,
+    "parentId": 3133,
+    "name": "舟山市"
+  },
+  {
+    "id": 3231,
+    "parentId": 3230,
+    "name": "定海区"
+  },
+  {
+    "id": 3233,
+    "parentId": 3230,
+    "name": "岱山县"
+  },
+  {
+    "id": 3234,
+    "parentId": 3230,
+    "name": "嵊泗县"
+  },
+  {
+    "id": 3232,
+    "parentId": 3230,
+    "name": "普陀区"
+  },
+  {
+    "id": 322,
+    "parentId": null,
+    "name": "甘肃"
+  },
+  {
+    "id": 323,
+    "parentId": 322,
+    "name": "兰州市"
+  },
+  {
+    "id": 325,
+    "parentId": 323,
+    "name": "七里河区"
+  },
+  {
+    "id": 324,
+    "parentId": 323,
+    "name": "城关区"
+  },
+  {
+    "id": 327,
+    "parentId": 323,
+    "name": "安宁区"
+  },
+  {
+    "id": 331,
+    "parentId": 323,
+    "name": "榆中县"
+  },
+  {
+    "id": 329,
+    "parentId": 323,
+    "name": "永登县"
+  },
+  {
+    "id": 330,
+    "parentId": 323,
+    "name": "皋兰县"
+  },
+  {
+    "id": 328,
+    "parentId": 323,
+    "name": "红古区"
+  },
+  {
+    "id": 326,
+    "parentId": 323,
+    "name": "西固区"
+  },
+  {
+    "id": 332,
+    "parentId": 322,
+    "name": "白银市"
+  },
+  {
+    "id": 336,
+    "parentId": 332,
+    "name": "会宁县"
+  },
+  {
+    "id": 334,
+    "parentId": 332,
+    "name": "平川区"
+  },
+  {
+    "id": 337,
+    "parentId": 332,
+    "name": "景泰县"
+  },
+  {
+    "id": 333,
+    "parentId": 332,
+    "name": "白银区"
+  },
+  {
+    "id": 335,
+    "parentId": 332,
+    "name": "靖远县"
+  },
+  {
+    "id": 338,
+    "parentId": 322,
+    "name": "定西市"
+  },
+  {
+    "id": 343,
+    "parentId": 338,
+    "name": "临洮县"
+  },
+  {
+    "id": 339,
+    "parentId": 338,
+    "name": "安定区"
+  },
+  {
+    "id": 345,
+    "parentId": 338,
+    "name": "岷县"
+  },
+  {
+    "id": 342,
+    "parentId": 338,
+    "name": "渭源县"
+  },
+  {
+    "id": 344,
+    "parentId": 338,
+    "name": "漳县"
+  },
+  {
+    "id": 340,
+    "parentId": 338,
+    "name": "通渭县"
+  },
+  {
+    "id": 341,
+    "parentId": 338,
+    "name": "陇西县"
+  },
+  {
+    "id": 346,
+    "parentId": 322,
+    "name": "甘南藏族自治州"
+  },
+  {
+    "id": 348,
+    "parentId": 346,
+    "name": "临潭县"
+  },
+  {
+    "id": 349,
+    "parentId": 346,
+    "name": "卓尼县"
+  },
+  {
+    "id": 347,
+    "parentId": 346,
+    "name": "合作市"
+  },
+  {
+    "id": 354,
+    "parentId": 346,
+    "name": "夏河县"
+  },
+  {
+    "id": 352,
+    "parentId": 346,
+    "name": "玛曲县"
+  },
+  {
+    "id": 353,
+    "parentId": 346,
+    "name": "碌曲县"
+  },
+  {
+    "id": 350,
+    "parentId": 346,
+    "name": "舟曲县"
+  },
+  {
+    "id": 351,
+    "parentId": 346,
+    "name": "迭部县"
+  },
+  {
+    "id": 356,
+    "parentId": 322,
+    "name": "金昌市"
+  },
+  {
+    "id": 358,
+    "parentId": 356,
+    "name": "永昌县"
+  },
+  {
+    "id": 357,
+    "parentId": 356,
+    "name": "金川区"
+  },
+  {
+    "id": 359,
+    "parentId": 322,
+    "name": "酒泉市"
+  },
+  {
+    "id": 362,
+    "parentId": 359,
+    "name": "安西县"
+  },
+  {
+    "id": 366,
+    "parentId": 359,
+    "name": "敦煌市"
+  },
+  {
+    "id": 365,
+    "parentId": 359,
+    "name": "玉门市"
+  },
+  {
+    "id": 363,
+    "parentId": 359,
+    "name": "肃北蒙古族自治县"
+  },
+  {
+    "id": 360,
+    "parentId": 359,
+    "name": "肃州区"
+  },
+  {
+    "id": 361,
+    "parentId": 359,
+    "name": "金塔县"
+  },
+  {
+    "id": 364,
+    "parentId": 359,
+    "name": "阿克塞哈萨克族自治县"
+  },
+  {
+    "id": 367,
+    "parentId": 322,
+    "name": "临夏回族自治州"
+  },
+  {
+    "id": 374,
+    "parentId": 367,
+    "name": "东乡族自治县"
+  },
+  {
+    "id": 369,
+    "parentId": 367,
+    "name": "临夏县"
+  },
+  {
+    "id": 368,
+    "parentId": 367,
+    "name": "临夏市"
+  },
+  {
+    "id": 373,
+    "parentId": 367,
+    "name": "和政县"
+  },
+  {
+    "id": 372,
+    "parentId": 367,
+    "name": "广河县"
+  },
+  {
+    "id": 370,
+    "parentId": 367,
+    "name": "康乐县"
+  },
+  {
+    "id": 371,
+    "parentId": 367,
+    "name": "永靖县"
+  },
+  {
+    "id": 375,
+    "parentId": 367,
+    "name": "积石山保安族东乡族撒拉族自治县"
+  },
+  {
+    "id": 376,
+    "parentId": 322,
+    "name": "陇南市"
+  },
+  {
+    "id": 385,
+    "parentId": 376,
+    "name": "两当县"
+  },
+  {
+    "id": 380,
+    "parentId": 376,
+    "name": "宕昌县"
+  },
+  {
+    "id": 381,
+    "parentId": 376,
+    "name": "康县"
+  },
+  {
+    "id": 384,
+    "parentId": 376,
+    "name": "徽县"
+  },
+  {
+    "id": 378,
+    "parentId": 376,
+    "name": "成县"
+  },
+  {
+    "id": 379,
+    "parentId": 376,
+    "name": "文县"
+  },
+  {
+    "id": 377,
+    "parentId": 376,
+    "name": "武都区"
+  },
+  {
+    "id": 383,
+    "parentId": 376,
+    "name": "礼县"
+  },
+  {
+    "id": 382,
+    "parentId": 376,
+    "name": "西和县"
+  },
+  {
+    "id": 386,
+    "parentId": 322,
+    "name": "平凉市"
+  },
+  {
+    "id": 391,
+    "parentId": 386,
+    "name": "华亭县"
+  },
+  {
+    "id": 387,
+    "parentId": 386,
+    "name": "崆峒区"
+  },
+  {
+    "id": 390,
+    "parentId": 386,
+    "name": "崇信县"
+  },
+  {
+    "id": 392,
+    "parentId": 386,
+    "name": "庄浪县"
+  },
+  {
+    "id": 388,
+    "parentId": 386,
+    "name": "泾川县"
+  },
+  {
+    "id": 389,
+    "parentId": 386,
+    "name": "灵台县"
+  },
+  {
+    "id": 393,
+    "parentId": 386,
+    "name": "静宁县"
+  },
+  {
+    "id": 394,
+    "parentId": 322,
+    "name": "庆阳市"
+  },
+  {
+    "id": 398,
+    "parentId": 394,
+    "name": "华池县"
+  },
+  {
+    "id": 399,
+    "parentId": 394,
+    "name": "合水县"
+  },
+  {
+    "id": 401,
+    "parentId": 394,
+    "name": "宁县"
+  },
+  {
+    "id": 396,
+    "parentId": 394,
+    "name": "庆城县"
+  },
+  {
+    "id": 400,
+    "parentId": 394,
+    "name": "正宁县"
+  },
+  {
+    "id": 397,
+    "parentId": 394,
+    "name": "环县"
+  },
+  {
+    "id": 395,
+    "parentId": 394,
+    "name": "西峰区"
+  },
+  {
+    "id": 402,
+    "parentId": 394,
+    "name": "镇原县"
+  },
+  {
+    "id": 403,
+    "parentId": 322,
+    "name": "天水市"
+  },
+  {
+    "id": 405,
+    "parentId": 403,
+    "name": "北道区"
+  },
+  {
+    "id": 410,
+    "parentId": 403,
+    "name": "张家川回族自治县"
+  },
+  {
+    "id": 409,
+    "parentId": 403,
+    "name": "武山县"
+  },
+  {
+    "id": 406,
+    "parentId": 403,
+    "name": "清水县"
+  },
+  {
+    "id": 408,
+    "parentId": 403,
+    "name": "甘谷县"
+  },
+  {
+    "id": 404,
+    "parentId": 403,
+    "name": "秦城区"
+  },
+  {
+    "id": 407,
+    "parentId": 403,
+    "name": "秦安县"
+  },
+  {
+    "id": 411,
+    "parentId": 322,
+    "name": "武威市"
+  },
+  {
+    "id": 412,
+    "parentId": 411,
+    "name": "凉州区"
+  },
+  {
+    "id": 414,
+    "parentId": 411,
+    "name": "古浪县"
+  },
+  {
+    "id": 415,
+    "parentId": 411,
+    "name": "天祝藏族自治县"
+  },
+  {
+    "id": 413,
+    "parentId": 411,
+    "name": "民勤县"
+  },
+  {
+    "id": 416,
+    "parentId": 322,
+    "name": "张掖市"
+  },
+  {
+    "id": 420,
+    "parentId": 416,
+    "name": "临泽县"
+  },
+  {
+    "id": 422,
+    "parentId": 416,
+    "name": "山丹县"
+  },
+  {
+    "id": 419,
+    "parentId": 416,
+    "name": "民乐县"
+  },
+  {
+    "id": 417,
+    "parentId": 416,
+    "name": "甘州区"
+  },
+  {
+    "id": 418,
+    "parentId": 416,
+    "name": "肃南裕固族自治县"
+  },
+  {
+    "id": 421,
+    "parentId": 416,
+    "name": "高台县"
+  },
+  {
+    "id": 42,
+    "parentId": null,
+    "name": "天津"
+  },
+  {
+    "id": 43,
+    "parentId": 42,
+    "name": "天津市"
+  },
+  {
+    "id": 53,
+    "parentId": 43,
+    "name": "东丽区"
+  },
+  {
+    "id": 56,
+    "parentId": 43,
+    "name": "北辰区"
+  },
+  {
+    "id": 47,
+    "parentId": 43,
+    "name": "南开区"
+  },
+  {
+    "id": 44,
+    "parentId": 43,
+    "name": "和平区"
+  },
+  {
+    "id": 50,
+    "parentId": 43,
+    "name": "塘沽区"
+  },
+  {
+    "id": 52,
+    "parentId": 43,
+    "name": "大港区"
+  },
+  {
+    "id": 59,
+    "parentId": 43,
+    "name": "宁河县"
+  },
+  {
+    "id": 58,
+    "parentId": 43,
+    "name": "宝坻区"
+  },
+  {
+    "id": 57,
+    "parentId": 43,
+    "name": "武清区"
+  },
+  {
+    "id": 51,
+    "parentId": 43,
+    "name": "汉沽区"
+  },
+  {
+    "id": 45,
+    "parentId": 43,
+    "name": "河东区"
+  },
+  {
+    "id": 48,
+    "parentId": 43,
+    "name": "河北区"
+  },
+  {
+    "id": 46,
+    "parentId": 43,
+    "name": "河西区"
+  },
+  {
+    "id": 55,
+    "parentId": 43,
+    "name": "津南区"
+  },
+  {
+    "id": 49,
+    "parentId": 43,
+    "name": "红桥区"
+  },
+  {
+    "id": 61,
+    "parentId": 43,
+    "name": "蓟县"
+  },
+  {
+    "id": 54,
+    "parentId": 43,
+    "name": "西青区"
+  },
+  {
+    "id": 60,
+    "parentId": 43,
+    "name": "静海县"
+  },
+  {
+    "id": 423,
+    "parentId": null,
+    "name": "广东"
+  },
+  {
+    "id": 424,
+    "parentId": 423,
+    "name": "广州市"
+  },
+  {
+    "id": 425,
+    "parentId": 424,
+    "name": "东山区"
+  },
+  {
+    "id": 436,
+    "parentId": 424,
+    "name": "从化市"
+  },
+  {
+    "id": 435,
+    "parentId": 424,
+    "name": "增城市"
+  },
+  {
+    "id": 429,
+    "parentId": 424,
+    "name": "天河区"
+  },
+  {
+    "id": 428,
+    "parentId": 424,
+    "name": "海珠区"
+  },
+  {
+    "id": 433,
+    "parentId": 424,
+    "name": "番禺区"
+  },
+  {
+    "id": 431,
+    "parentId": 424,
+    "name": "白云区"
+  },
+  {
+    "id": 434,
+    "parentId": 424,
+    "name": "花都区"
+  },
+  {
+    "id": 430,
+    "parentId": 424,
+    "name": "芳村区"
+  },
+  {
+    "id": 426,
+    "parentId": 424,
+    "name": "荔湾区"
+  },
+  {
+    "id": 427,
+    "parentId": 424,
+    "name": "越秀区"
+  },
+  {
+    "id": 432,
+    "parentId": 424,
+    "name": "黄埔区"
+  },
+  {
+    "id": 437,
+    "parentId": 423,
+    "name": "潮州市"
+  },
+  {
+    "id": 438,
+    "parentId": 437,
+    "name": "湘桥区"
+  },
+  {
+    "id": 439,
+    "parentId": 437,
+    "name": "潮安县"
+  },
+  {
+    "id": 440,
+    "parentId": 437,
+    "name": "饶平县"
+  },
+  {
+    "id": 441,
+    "parentId": 423,
+    "name": "东莞市"
+  },
+  {
+    "id": 3262,
+    "parentId": 441,
+    "name": "万江区"
+  },
+  {
+    "id": 3267,
+    "parentId": 441,
+    "name": "东坑镇"
+  },
+  {
+    "id": 3271,
+    "parentId": 441,
+    "name": "东城区"
+  },
+  {
+    "id": 3285,
+    "parentId": 441,
+    "name": "中堂镇"
+  },
+  {
+    "id": 3269,
+    "parentId": 441,
+    "name": "企石镇"
+  },
+  {
+    "id": 3265,
+    "parentId": 441,
+    "name": "凤岗镇"
+  },
+  {
+    "id": 3253,
+    "parentId": 441,
+    "name": "南城区"
+  },
+  {
+    "id": 3261,
+    "parentId": 441,
+    "name": "厚街镇"
+  },
+  {
+    "id": 3264,
+    "parentId": 441,
+    "name": "塘厦镇"
+  },
+  {
+    "id": 3258,
+    "parentId": 441,
+    "name": "大岭山镇"
+  },
+  {
+    "id": 3266,
+    "parentId": 441,
+    "name": "大朗镇"
+  },
+  {
+    "id": 3254,
+    "parentId": 441,
+    "name": "寮步镇"
+  },
+  {
+    "id": 3260,
+    "parentId": 441,
+    "name": "常平镇"
+  },
+  {
+    "id": 3284,
+    "parentId": 441,
+    "name": "望牛墩镇"
+  },
+  {
+    "id": 3282,
+    "parentId": 441,
+    "name": "松山湖"
+  },
+  {
+    "id": 3283,
+    "parentId": 441,
+    "name": "桥头镇"
+  },
+  {
+    "id": 3263,
+    "parentId": 441,
+    "name": "樟木头镇"
+  },
+  {
+    "id": 3259,
+    "parentId": 441,
+    "name": "横沥镇"
+  },
+  {
+    "id": 3276,
+    "parentId": 441,
+    "name": "沙田镇"
+  },
+  {
+    "id": 3280,
+    "parentId": 441,
+    "name": "洪梅镇"
+  },
+  {
+    "id": 3268,
+    "parentId": 441,
+    "name": "清溪镇"
+  },
+  {
+    "id": 3274,
+    "parentId": 441,
+    "name": "石排镇"
+  },
+  {
+    "id": 3279,
+    "parentId": 441,
+    "name": "石碣镇"
+  },
+  {
+    "id": 3278,
+    "parentId": 441,
+    "name": "石龙镇"
+  },
+  {
+    "id": 3270,
+    "parentId": 441,
+    "name": "茶山镇"
+  },
+  {
+    "id": 3236,
+    "parentId": 441,
+    "name": "莞城区"
+  },
+  {
+    "id": 3272,
+    "parentId": 441,
+    "name": "虎门镇"
+  },
+  {
+    "id": 3286,
+    "parentId": 441,
+    "name": "谢岗镇"
+  },
+  {
+    "id": 3275,
+    "parentId": 441,
+    "name": "道滘镇"
+  },
+  {
+    "id": 3235,
+    "parentId": 441,
+    "name": "长安镇"
+  },
+  {
+    "id": 3277,
+    "parentId": 441,
+    "name": "高埗镇"
+  },
+  {
+    "id": 3281,
+    "parentId": 441,
+    "name": "麻涌镇"
+  },
+  {
+    "id": 3273,
+    "parentId": 441,
+    "name": "黄江镇"
+  },
+  {
+    "id": 442,
+    "parentId": 423,
+    "name": "佛山市"
+  },
+  {
+    "id": 446,
+    "parentId": 442,
+    "name": "三水区"
+  },
+  {
+    "id": 444,
+    "parentId": 442,
+    "name": "南海区"
+  },
+  {
+    "id": 443,
+    "parentId": 442,
+    "name": "禅城区"
+  },
+  {
+    "id": 445,
+    "parentId": 442,
+    "name": "顺德区"
+  },
+  {
+    "id": 447,
+    "parentId": 442,
+    "name": "高明区"
+  },
+  {
+    "id": 448,
+    "parentId": 423,
+    "name": "河源市"
+  },
+  {
+    "id": 454,
+    "parentId": 448,
+    "name": "东源县"
+  },
+  {
+    "id": 453,
+    "parentId": 448,
+    "name": "和平县"
+  },
+  {
+    "id": 449,
+    "parentId": 448,
+    "name": "源城区"
+  },
+  {
+    "id": 450,
+    "parentId": 448,
+    "name": "紫金县"
+  },
+  {
+    "id": 452,
+    "parentId": 448,
+    "name": "连平县"
+  },
+  {
+    "id": 451,
+    "parentId": 448,
+    "name": "龙川县"
+  },
+  {
+    "id": 455,
+    "parentId": 423,
+    "name": "惠州市"
+  },
+  {
+    "id": 458,
+    "parentId": 455,
+    "name": "博罗县"
+  },
+  {
+    "id": 459,
+    "parentId": 455,
+    "name": "惠东县"
+  },
+  {
+    "id": 456,
+    "parentId": 455,
+    "name": "惠城区"
+  },
+  {
+    "id": 457,
+    "parentId": 455,
+    "name": "惠阳区"
+  },
+  {
+    "id": 460,
+    "parentId": 455,
+    "name": "龙门县"
+  },
+  {
+    "id": 461,
+    "parentId": 423,
+    "name": "江门市"
+  },
+  {
+    "id": 465,
+    "parentId": 461,
+    "name": "台山市"
+  },
+  {
+    "id": 466,
+    "parentId": 461,
+    "name": "开平市"
+  },
+  {
+    "id": 468,
+    "parentId": 461,
+    "name": "恩平市"
+  },
+  {
+    "id": 464,
+    "parentId": 461,
+    "name": "新会区"
+  },
+  {
+    "id": 463,
+    "parentId": 461,
+    "name": "江海区"
+  },
+  {
+    "id": 462,
+    "parentId": 461,
+    "name": "蓬江区"
+  },
+  {
+    "id": 467,
+    "parentId": 461,
+    "name": "鹤山市"
+  },
+  {
+    "id": 469,
+    "parentId": 423,
+    "name": "揭阳市"
+  },
+  {
+    "id": 473,
+    "parentId": 469,
+    "name": "惠来县"
+  },
+  {
+    "id": 471,
+    "parentId": 469,
+    "name": "揭东县"
+  },
+  {
+    "id": 472,
+    "parentId": 469,
+    "name": "揭西县"
+  },
+  {
+    "id": 474,
+    "parentId": 469,
+    "name": "普宁市"
+  },
+  {
+    "id": 470,
+    "parentId": 469,
+    "name": "榕城区"
+  },
+  {
+    "id": 475,
+    "parentId": 423,
+    "name": "茂名市"
+  },
+  {
+    "id": 481,
+    "parentId": 475,
+    "name": "信宜市"
+  },
+  {
+    "id": 480,
+    "parentId": 475,
+    "name": "化州市"
+  },
+  {
+    "id": 478,
+    "parentId": 475,
+    "name": "电白县"
+  },
+  {
+    "id": 476,
+    "parentId": 475,
+    "name": "茂南区"
+  },
+  {
+    "id": 477,
+    "parentId": 475,
+    "name": "茂港区"
+  },
+  {
+    "id": 479,
+    "parentId": 475,
+    "name": "高州市"
+  },
+  {
+    "id": 483,
+    "parentId": 423,
+    "name": "梅州市"
+  },
+  {
+    "id": 486,
+    "parentId": 483,
+    "name": "丰顺县"
+  },
+  {
+    "id": 487,
+    "parentId": 483,
+    "name": "五华县"
+  },
+  {
+    "id": 490,
+    "parentId": 483,
+    "name": "兴宁市"
+  },
+  {
+    "id": 485,
+    "parentId": 483,
+    "name": "大埔县"
+  },
+  {
+    "id": 488,
+    "parentId": 483,
+    "name": "平远县"
+  },
+  {
+    "id": 484,
+    "parentId": 483,
+    "name": "梅县"
+  },
+  {
+    "id": 489,
+    "parentId": 483,
+    "name": "蕉岭县"
+  },
+  {
+    "id": 491,
+    "parentId": 423,
+    "name": "清远市"
+  },
+  {
+    "id": 493,
+    "parentId": 491,
+    "name": "佛冈县"
+  },
+  {
+    "id": 492,
+    "parentId": 491,
+    "name": "清城区"
+  },
+  {
+    "id": 497,
+    "parentId": 491,
+    "name": "清新县"
+  },
+  {
+    "id": 498,
+    "parentId": 491,
+    "name": "英德市"
+  },
+  {
+    "id": 496,
+    "parentId": 491,
+    "name": "连南瑶族自治县"
+  },
+  {
+    "id": 495,
+    "parentId": 491,
+    "name": "连山壮族瑶族自治县"
+  },
+  {
+    "id": 499,
+    "parentId": 491,
+    "name": "连州市"
+  },
+  {
+    "id": 494,
+    "parentId": 491,
+    "name": "阳山县"
+  },
+  {
+    "id": 500,
+    "parentId": 423,
+    "name": "汕头市"
+  },
+  {
+    "id": 507,
+    "parentId": 500,
+    "name": "南澳县"
+  },
+  {
+    "id": 505,
+    "parentId": 500,
+    "name": "潮南区"
+  },
+  {
+    "id": 504,
+    "parentId": 500,
+    "name": "潮阳区"
+  },
+  {
+    "id": 506,
+    "parentId": 500,
+    "name": "澄海区"
+  },
+  {
+    "id": 503,
+    "parentId": 500,
+    "name": "濠江区"
+  },
+  {
+    "id": 502,
+    "parentId": 500,
+    "name": "金平区"
+  },
+  {
+    "id": 501,
+    "parentId": 500,
+    "name": "龙湖区"
+  },
+  {
+    "id": 508,
+    "parentId": 423,
+    "name": "汕尾市"
+  },
+  {
+    "id": 509,
+    "parentId": 508,
+    "name": "城区"
+  },
+  {
+    "id": 510,
+    "parentId": 508,
+    "name": "海丰县"
+  },
+  {
+    "id": 512,
+    "parentId": 508,
+    "name": "陆丰市"
+  },
+  {
+    "id": 511,
+    "parentId": 508,
+    "name": "陆河县"
+  },
+  {
+    "id": 513,
+    "parentId": 423,
+    "name": "韶关市"
+  },
+  {
+    "id": 522,
+    "parentId": 513,
+    "name": "乐昌市"
+  },
+  {
+    "id": 520,
+    "parentId": 513,
+    "name": "乳源瑶族自治县"
+  },
+  {
+    "id": 518,
+    "parentId": 513,
+    "name": "仁化县"
+  },
+  {
+    "id": 523,
+    "parentId": 513,
+    "name": "南雄市"
+  },
+  {
+    "id": 517,
+    "parentId": 513,
+    "name": "始兴县"
+  },
+  {
+    "id": 521,
+    "parentId": 513,
+    "name": "新丰县"
+  },
+  {
+    "id": 516,
+    "parentId": 513,
+    "name": "曲江区"
+  },
+  {
+    "id": 514,
+    "parentId": 513,
+    "name": "武江区"
+  },
+  {
+    "id": 515,
+    "parentId": 513,
+    "name": "浈江区"
+  },
+  {
+    "id": 519,
+    "parentId": 513,
+    "name": "翁源县"
+  },
+  {
+    "id": 524,
+    "parentId": 423,
+    "name": "深圳市"
+  },
+  {
+    "id": 527,
+    "parentId": 524,
+    "name": "南山区"
+  },
+  {
+    "id": 528,
+    "parentId": 524,
+    "name": "宝安区"
+  },
+  {
+    "id": 530,
+    "parentId": 524,
+    "name": "盐田区"
+  },
+  {
+    "id": 526,
+    "parentId": 524,
+    "name": "福田区"
+  },
+  {
+    "id": 525,
+    "parentId": 524,
+    "name": "罗湖区"
+  },
+  {
+    "id": 3290,
+    "parentId": 524,
+    "name": "龙华新区"
+  },
+  {
+    "id": 529,
+    "parentId": 524,
+    "name": "龙岗区"
+  },
+  {
+    "id": 3291,
+    "parentId": 524,
+    "name": "光明区"
+  },
+  {
+    "id": 531,
+    "parentId": 423,
+    "name": "阳江市"
+  },
+  {
+    "id": 532,
+    "parentId": 531,
+    "name": "江城区"
+  },
+  {
+    "id": 534,
+    "parentId": 531,
+    "name": "阳东县"
+  },
+  {
+    "id": 535,
+    "parentId": 531,
+    "name": "阳春市"
+  },
+  {
+    "id": 533,
+    "parentId": 531,
+    "name": "阳西县"
+  },
+  {
+    "id": 536,
+    "parentId": 423,
+    "name": "云浮市"
+  },
+  {
+    "id": 537,
+    "parentId": 536,
+    "name": "云城区"
+  },
+  {
+    "id": 540,
+    "parentId": 536,
+    "name": "云安县"
+  },
+  {
+    "id": 538,
+    "parentId": 536,
+    "name": "新兴县"
+  },
+  {
+    "id": 541,
+    "parentId": 536,
+    "name": "罗定市"
+  },
+  {
+    "id": 539,
+    "parentId": 536,
+    "name": "郁南县"
+  },
+  {
+    "id": 542,
+    "parentId": 423,
+    "name": "湛江市"
+  },
+  {
+    "id": 551,
+    "parentId": 542,
+    "name": "吴川市"
+  },
+  {
+    "id": 545,
+    "parentId": 542,
+    "name": "坡头区"
+  },
+  {
+    "id": 549,
+    "parentId": 542,
+    "name": "廉江市"
+  },
+  {
+    "id": 548,
+    "parentId": 542,
+    "name": "徐闻县"
+  },
+  {
+    "id": 543,
+    "parentId": 542,
+    "name": "赤坎区"
+  },
+  {
+    "id": 547,
+    "parentId": 542,
+    "name": "遂溪县"
+  },
+  {
+    "id": 550,
+    "parentId": 542,
+    "name": "雷州市"
+  },
+  {
+    "id": 544,
+    "parentId": 542,
+    "name": "霞山区"
+  },
+  {
+    "id": 546,
+    "parentId": 542,
+    "name": "麻章区"
+  },
+  {
+    "id": 552,
+    "parentId": 423,
+    "name": "肇庆市"
+  },
+  {
+    "id": 560,
+    "parentId": 552,
+    "name": "四会市"
+  },
+  {
+    "id": 557,
+    "parentId": 552,
+    "name": "封开县"
+  },
+  {
+    "id": 555,
+    "parentId": 552,
+    "name": "广宁县"
+  },
+  {
+    "id": 558,
+    "parentId": 552,
+    "name": "德庆县"
+  },
+  {
+    "id": 556,
+    "parentId": 552,
+    "name": "怀集县"
+  },
+  {
+    "id": 553,
+    "parentId": 552,
+    "name": "端州区"
+  },
+  {
+    "id": 559,
+    "parentId": 552,
+    "name": "高要市"
+  },
+  {
+    "id": 554,
+    "parentId": 552,
+    "name": "鼎湖区"
+  },
+  {
+    "id": 561,
+    "parentId": 423,
+    "name": "中山市"
+  },
+  {
+    "id": 3238,
+    "parentId": 561,
+    "name": "城区"
+  },
+  {
+    "id": 562,
+    "parentId": 423,
+    "name": "珠海市"
+  },
+  {
+    "id": 564,
+    "parentId": 562,
+    "name": "斗门区"
+  },
+  {
+    "id": 565,
+    "parentId": 562,
+    "name": "金湾区"
+  },
+  {
+    "id": 563,
+    "parentId": 562,
+    "name": "香洲区"
+  },
+  {
+    "id": 566,
+    "parentId": null,
+    "name": "广西"
+  },
+  {
+    "id": 567,
+    "parentId": 566,
+    "name": "南宁市"
+  },
+  {
+    "id": 577,
+    "parentId": 567,
+    "name": "上林县"
+  },
+  {
+    "id": 568,
+    "parentId": 567,
+    "name": "兴宁区"
+  },
+  {
+    "id": 578,
+    "parentId": 567,
+    "name": "宾阳县"
+  },
+  {
+    "id": 579,
+    "parentId": 567,
+    "name": "横县"
+  },
+  {
+    "id": 574,
+    "parentId": 567,
+    "name": "武鸣县"
+  },
+  {
+    "id": 570,
+    "parentId": 567,
+    "name": "江南区"
+  },
+  {
+    "id": 572,
+    "parentId": 567,
+    "name": "良庆区"
+  },
+  {
+    "id": 571,
+    "parentId": 567,
+    "name": "西乡塘区"
+  },
+  {
+    "id": 573,
+    "parentId": 567,
+    "name": "邕宁区"
+  },
+  {
+    "id": 575,
+    "parentId": 567,
+    "name": "隆安县"
+  },
+  {
+    "id": 569,
+    "parentId": 567,
+    "name": "青秀区"
+  },
+  {
+    "id": 576,
+    "parentId": 567,
+    "name": "马山县"
+  },
+  {
+    "id": 580,
+    "parentId": 566,
+    "name": "百色市"
+  },
+  {
+    "id": 589,
+    "parentId": 580,
+    "name": "乐业县"
+  },
+  {
+    "id": 588,
+    "parentId": 580,
+    "name": "凌云县"
+  },
+  {
+    "id": 581,
+    "parentId": 580,
+    "name": "右江区"
+  },
+  {
+    "id": 584,
+    "parentId": 580,
+    "name": "平果县"
+  },
+  {
+    "id": 585,
+    "parentId": 580,
+    "name": "德保县"
+  },
+  {
+    "id": 583,
+    "parentId": 580,
+    "name": "田东县"
+  },
+  {
+    "id": 590,
+    "parentId": 580,
+    "name": "田林县"
+  },
+  {
+    "id": 582,
+    "parentId": 580,
+    "name": "田阳县"
+  },
+  {
+    "id": 591,
+    "parentId": 580,
+    "name": "西林县"
+  },
+  {
+    "id": 587,
+    "parentId": 580,
+    "name": "那坡县"
+  },
+  {
+    "id": 592,
+    "parentId": 580,
+    "name": "隆林各族自治县"
+  },
+  {
+    "id": 586,
+    "parentId": 580,
+    "name": "靖西县"
+  },
+  {
+    "id": 593,
+    "parentId": 566,
+    "name": "北海市"
+  },
+  {
+    "id": 597,
+    "parentId": 593,
+    "name": "合浦县"
+  },
+  {
+    "id": 594,
+    "parentId": 593,
+    "name": "海城区"
+  },
+  {
+    "id": 596,
+    "parentId": 593,
+    "name": "铁山港区"
+  },
+  {
+    "id": 595,
+    "parentId": 593,
+    "name": "银海区"
+  },
+  {
+    "id": 598,
+    "parentId": 566,
+    "name": "崇左市"
+  },
+  {
+    "id": 605,
+    "parentId": 598,
+    "name": "凭祥市"
+  },
+  {
+    "id": 603,
+    "parentId": 598,
+    "name": "大新县"
+  },
+  {
+    "id": 604,
+    "parentId": 598,
+    "name": "天等县"
+  },
+  {
+    "id": 601,
+    "parentId": 598,
+    "name": "宁明县"
+  },
+  {
+    "id": 600,
+    "parentId": 598,
+    "name": "扶绥县"
+  },
+  {
+    "id": 599,
+    "parentId": 598,
+    "name": "江洲区"
+  },
+  {
+    "id": 602,
+    "parentId": 598,
+    "name": "龙州县"
+  },
+  {
+    "id": 606,
+    "parentId": 566,
+    "name": "防城港市"
+  },
+  {
+    "id": 609,
+    "parentId": 606,
+    "name": "上思县"
+  },
+  {
+    "id": 610,
+    "parentId": 606,
+    "name": "东兴市"
+  },
+  {
+    "id": 607,
+    "parentId": 606,
+    "name": "港口区"
+  },
+  {
+    "id": 608,
+    "parentId": 606,
+    "name": "防城区"
+  },
+  {
+    "id": 611,
+    "parentId": 566,
+    "name": "贵港市"
+  },
+  {
+    "id": 615,
+    "parentId": 611,
+    "name": "平南县"
+  },
+  {
+    "id": 616,
+    "parentId": 611,
+    "name": "桂平市"
+  },
+  {
+    "id": 612,
+    "parentId": 611,
+    "name": "港北区"
+  },
+  {
+    "id": 613,
+    "parentId": 611,
+    "name": "港南区"
+  },
+  {
+    "id": 614,
+    "parentId": 611,
+    "name": "覃塘区"
+  },
+  {
+    "id": 617,
+    "parentId": 566,
+    "name": "桂林市"
+  },
+  {
+    "id": 621,
+    "parentId": 617,
+    "name": "七星区"
+  },
+  {
+    "id": 624,
+    "parentId": 617,
+    "name": "临桂县"
+  },
+  {
+    "id": 626,
+    "parentId": 617,
+    "name": "全州县"
+  },
+  {
+    "id": 627,
+    "parentId": 617,
+    "name": "兴安县"
+  },
+  {
+    "id": 619,
+    "parentId": 617,
+    "name": "叠彩区"
+  },
+  {
+    "id": 632,
+    "parentId": 617,
+    "name": "平乐县"
+  },
+  {
+    "id": 634,
+    "parentId": 617,
+    "name": "恭城瑶族自治县"
+  },
+  {
+    "id": 628,
+    "parentId": 617,
+    "name": "永福县"
+  },
+  {
+    "id": 629,
+    "parentId": 617,
+    "name": "灌阳县"
+  },
+  {
+    "id": 625,
+    "parentId": 617,
+    "name": "灵川县"
+  },
+  {
+    "id": 618,
+    "parentId": 617,
+    "name": "秀峰区"
+  },
+  {
+    "id": 633,
+    "parentId": 617,
+    "name": "荔蒲县"
+  },
+  {
+    "id": 620,
+    "parentId": 617,
+    "name": "象山区"
+  },
+  {
+    "id": 631,
+    "parentId": 617,
+    "name": "资源县"
+  },
+  {
+    "id": 623,
+    "parentId": 617,
+    "name": "阳朔县"
+  },
+  {
+    "id": 622,
+    "parentId": 617,
+    "name": "雁山区"
+  },
+  {
+    "id": 630,
+    "parentId": 617,
+    "name": "龙胜各族自治县"
+  },
+  {
+    "id": 635,
+    "parentId": 566,
+    "name": "河池市"
+  },
+  {
+    "id": 640,
+    "parentId": 635,
+    "name": "东兰县"
+  },
+  {
+    "id": 639,
+    "parentId": 635,
+    "name": "凤山县"
+  },
+  {
+    "id": 637,
+    "parentId": 635,
+    "name": "南丹县"
+  },
+  {
+    "id": 645,
+    "parentId": 635,
+    "name": "大化瑶族自治县"
+  },
+  {
+    "id": 638,
+    "parentId": 635,
+    "name": "天峨县"
+  },
+  {
+    "id": 646,
+    "parentId": 635,
+    "name": "宜州市"
+  },
+  {
+    "id": 643,
+    "parentId": 635,
+    "name": "巴马瑶族自治县"
+  },
+  {
+    "id": 642,
+    "parentId": 635,
+    "name": "环江毛南族自治县"
+  },
+  {
+    "id": 641,
+    "parentId": 635,
+    "name": "罗城仫佬族自治县"
+  },
+  {
+    "id": 644,
+    "parentId": 635,
+    "name": "都安瑶族自治县"
+  },
+  {
+    "id": 636,
+    "parentId": 635,
+    "name": "金城江区"
+  },
+  {
+    "id": 647,
+    "parentId": 566,
+    "name": "贺州市"
+  },
+  {
+    "id": 648,
+    "parentId": 647,
+    "name": "八步区"
+  },
+  {
+    "id": 651,
+    "parentId": 647,
+    "name": "富川瑶族自治县"
+  },
+  {
+    "id": 649,
+    "parentId": 647,
+    "name": "昭平县"
+  },
+  {
+    "id": 650,
+    "parentId": 647,
+    "name": "钟山县"
+  },
+  {
+    "id": 652,
+    "parentId": 566,
+    "name": "来宾市"
+  },
+  {
+    "id": 653,
+    "parentId": 652,
+    "name": "兴宾区"
+  },
+  {
+    "id": 658,
+    "parentId": 652,
+    "name": "合山市"
+  },
+  {
+    "id": 654,
+    "parentId": 652,
+    "name": "忻城县"
+  },
+  {
+    "id": 656,
+    "parentId": 652,
+    "name": "武宣县"
+  },
+  {
+    "id": 655,
+    "parentId": 652,
+    "name": "象州县"
+  },
+  {
+    "id": 657,
+    "parentId": 652,
+    "name": "金秀瑶族自治县"
+  },
+  {
+    "id": 659,
+    "parentId": 566,
+    "name": "柳州市"
+  },
+  {
+    "id": 669,
+    "parentId": 659,
+    "name": "三江侗族自治县"
+  },
+  {
+    "id": 660,
+    "parentId": 659,
+    "name": "城中区"
+  },
+  {
+    "id": 663,
+    "parentId": 659,
+    "name": "柳北区"
+  },
+  {
+    "id": 662,
+    "parentId": 659,
+    "name": "柳南区"
+  },
+  {
+    "id": 665,
+    "parentId": 659,
+    "name": "柳城县"
+  },
+  {
+    "id": 664,
+    "parentId": 659,
+    "name": "柳江县"
+  },
+  {
+    "id": 667,
+    "parentId": 659,
+    "name": "融安县"
+  },
+  {
+    "id": 668,
+    "parentId": 659,
+    "name": "融水苗族自治县"
+  },
+  {
+    "id": 661,
+    "parentId": 659,
+    "name": "鱼峰区"
+  },
+  {
+    "id": 666,
+    "parentId": 659,
+    "name": "鹿寨县"
+  },
+  {
+    "id": 670,
+    "parentId": 566,
+    "name": "钦州市"
+  },
+  {
+    "id": 674,
+    "parentId": 670,
+    "name": "浦北县"
+  },
+  {
+    "id": 673,
+    "parentId": 670,
+    "name": "灵山县"
+  },
+  {
+    "id": 672,
+    "parentId": 670,
+    "name": "钦北区"
+  },
+  {
+    "id": 671,
+    "parentId": 670,
+    "name": "钦南区"
+  },
+  {
+    "id": 675,
+    "parentId": 566,
+    "name": "梧州市"
+  },
+  {
+    "id": 676,
+    "parentId": 675,
+    "name": "万秀区"
+  },
+  {
+    "id": 682,
+    "parentId": 675,
+    "name": "岑溪市"
+  },
+  {
+    "id": 679,
+    "parentId": 675,
+    "name": "苍梧县"
+  },
+  {
+    "id": 681,
+    "parentId": 675,
+    "name": "蒙山县"
+  },
+  {
+    "id": 680,
+    "parentId": 675,
+    "name": "藤县"
+  },
+  {
+    "id": 677,
+    "parentId": 675,
+    "name": "蝶山区"
+  },
+  {
+    "id": 678,
+    "parentId": 675,
+    "name": "长洲区"
+  },
+  {
+    "id": 683,
+    "parentId": 566,
+    "name": "玉林市"
+  },
+  {
+    "id": 688,
+    "parentId": 683,
+    "name": "兴业县"
+  },
+  {
+    "id": 689,
+    "parentId": 683,
+    "name": "北流市"
+  },
+  {
+    "id": 687,
+    "parentId": 683,
+    "name": "博白县"
+  },
+  {
+    "id": 685,
+    "parentId": 683,
+    "name": "容县"
+  },
+  {
+    "id": 684,
+    "parentId": 683,
+    "name": "玉州区"
+  },
+  {
+    "id": 686,
+    "parentId": 683,
+    "name": "陆川县"
+  },
+  {
+    "id": 62,
+    "parentId": null,
+    "name": "重庆"
+  },
+  {
+    "id": 63,
+    "parentId": 62,
+    "name": "重庆市"
+  },
+  {
+    "id": 64,
+    "parentId": 63,
+    "name": "万州区"
+  },
+  {
+    "id": 73,
+    "parentId": 63,
+    "name": "万盛区"
+  },
+  {
+    "id": 87,
+    "parentId": 63,
+    "name": "丰都县"
+  },
+  {
+    "id": 70,
+    "parentId": 63,
+    "name": "九龙坡区"
+  },
+  {
+    "id": 92,
+    "parentId": 63,
+    "name": "云阳县"
+  },
+  {
+    "id": 72,
+    "parentId": 63,
+    "name": "北碚区"
+  },
+  {
+    "id": 71,
+    "parentId": 63,
+    "name": "南岸区"
+  },
+  {
+    "id": 103,
+    "parentId": 63,
+    "name": "南川市"
+  },
+  {
+    "id": 74,
+    "parentId": 63,
+    "name": "双桥区"
+  },
+  {
+    "id": 101,
+    "parentId": 63,
+    "name": "合川市"
+  },
+  {
+    "id": 88,
+    "parentId": 63,
+    "name": "垫江县"
+  },
+  {
+    "id": 86,
+    "parentId": 63,
+    "name": "城口县"
+  },
+  {
+    "id": 67,
+    "parentId": 63,
+    "name": "大渡口区"
+  },
+  {
+    "id": 82,
+    "parentId": 63,
+    "name": "大足县"
+  },
+  {
+    "id": 93,
+    "parentId": 63,
+    "name": "奉节县"
+  },
+  {
+    "id": 94,
+    "parentId": 63,
+    "name": "巫山县"
+  },
+  {
+    "id": 95,
+    "parentId": 63,
+    "name": "巫溪县"
+  },
+  {
+    "id": 76,
+    "parentId": 63,
+    "name": "巴南区"
+  },
+  {
+    "id": 91,
+    "parentId": 63,
+    "name": "开县"
+  },
+  {
+    "id": 99,
+    "parentId": 63,
+    "name": "彭水苗族土家族自治县"
+  },
+  {
+    "id": 90,
+    "parentId": 63,
+    "name": "忠县"
+  },
+  {
+    "id": 85,
+    "parentId": 63,
+    "name": "梁平县"
+  },
+  {
+    "id": 89,
+    "parentId": 63,
+    "name": "武隆县"
+  },
+  {
+    "id": 102,
+    "parentId": 63,
+    "name": "永川市"
+  },
+  {
+    "id": 68,
+    "parentId": 63,
+    "name": "江北区"
+  },
+  {
+    "id": 100,
+    "parentId": 63,
+    "name": "江津市"
+  },
+  {
+    "id": 69,
+    "parentId": 63,
+    "name": "沙坪坝区"
+  },
+  {
+    "id": 65,
+    "parentId": 63,
+    "name": "涪陵区"
+  },
+  {
+    "id": 66,
+    "parentId": 63,
+    "name": "渝中区"
+  },
+  {
+    "id": 75,
+    "parentId": 63,
+    "name": "渝北区"
+  },
+  {
+    "id": 80,
+    "parentId": 63,
+    "name": "潼南县"
+  },
+  {
+    "id": 84,
+    "parentId": 63,
+    "name": "璧山县"
+  },
+  {
+    "id": 96,
+    "parentId": 63,
+    "name": "石柱土家族自治县"
+  },
+  {
+    "id": 97,
+    "parentId": 63,
+    "name": "秀山土家族苗族自治县"
+  },
+  {
+    "id": 79,
+    "parentId": 63,
+    "name": "綦江县"
+  },
+  {
+    "id": 83,
+    "parentId": 63,
+    "name": "荣昌县"
+  },
+  {
+    "id": 98,
+    "parentId": 63,
+    "name": "酉阳土家族苗族自治县"
+  },
+  {
+    "id": 81,
+    "parentId": 63,
+    "name": "铜梁县"
+  },
+  {
+    "id": 78,
+    "parentId": 63,
+    "name": "长寿区"
+  },
+  {
+    "id": 77,
+    "parentId": 63,
+    "name": "黔江区"
+  },
+  {
+    "id": 690,
+    "parentId": null,
+    "name": "贵州"
+  },
+  {
+    "id": 691,
+    "parentId": 690,
+    "name": "贵阳市"
+  },
+  {
+    "id": 695,
+    "parentId": 691,
+    "name": "乌当区"
+  },
+  {
+    "id": 693,
+    "parentId": 691,
+    "name": "云岩区"
+  },
+  {
+    "id": 700,
+    "parentId": 691,
+    "name": "修文县"
+  },
+  {
+    "id": 692,
+    "parentId": 691,
+    "name": "南明区"
+  },
+  {
+    "id": 697,
+    "parentId": 691,
+    "name": "小河区"
+  },
+  {
+    "id": 698,
+    "parentId": 691,
+    "name": "开阳县"
+  },
+  {
+    "id": 699,
+    "parentId": 691,
+    "name": "息烽县"
+  },
+  {
+    "id": 701,
+    "parentId": 691,
+    "name": "清镇市"
+  },
+  {
+    "id": 696,
+    "parentId": 691,
+    "name": "白云区"
+  },
+  {
+    "id": 694,
+    "parentId": 691,
+    "name": "花溪区"
+  },
+  {
+    "id": 702,
+    "parentId": 690,
+    "name": "安顺市"
+  },
+  {
+    "id": 707,
+    "parentId": 702,
+    "name": "关岭布依族苗族自治县"
+  },
+  {
+    "id": 704,
+    "parentId": 702,
+    "name": "平坝县"
+  },
+  {
+    "id": 705,
+    "parentId": 702,
+    "name": "普定县"
+  },
+  {
+    "id": 708,
+    "parentId": 702,
+    "name": "紫云苗族布依族自治县"
+  },
+  {
+    "id": 703,
+    "parentId": 702,
+    "name": "西秀区"
+  },
+  {
+    "id": 706,
+    "parentId": 702,
+    "name": "镇宁布依族苗族自治县"
+  },
+  {
+    "id": 709,
+    "parentId": 690,
+    "name": "毕节地区"
+  },
+  {
+    "id": 711,
+    "parentId": 709,
+    "name": "大方县"
+  },
+  {
+    "id": 716,
+    "parentId": 709,
+    "name": "威宁彝族回族苗族自治县"
+  },
+  {
+    "id": 710,
+    "parentId": 709,
+    "name": "毕节市"
+  },
+  {
+    "id": 715,
+    "parentId": 709,
+    "name": "纳雍县"
+  },
+  {
+    "id": 714,
+    "parentId": 709,
+    "name": "织金县"
+  },
+  {
+    "id": 717,
+    "parentId": 709,
+    "name": "赫章县"
+  },
+  {
+    "id": 713,
+    "parentId": 709,
+    "name": "金沙县"
+  },
+  {
+    "id": 712,
+    "parentId": 709,
+    "name": "黔西县"
+  },
+  {
+    "id": 718,
+    "parentId": 690,
+    "name": "六盘水市"
+  },
+  {
+    "id": 720,
+    "parentId": 718,
+    "name": "六枝特区"
+  },
+  {
+    "id": 721,
+    "parentId": 718,
+    "name": "水城县"
+  },
+  {
+    "id": 722,
+    "parentId": 718,
+    "name": "盘县"
+  },
+  {
+    "id": 719,
+    "parentId": 718,
+    "name": "钟山区"
+  },
+  {
+    "id": 723,
+    "parentId": 690,
+    "name": "黔东南苗族侗族自治州"
+  },
+  {
+    "id": 727,
+    "parentId": 723,
+    "name": "三穗县"
+  },
+  {
+    "id": 739,
+    "parentId": 723,
+    "name": "丹寨县"
+  },
+  {
+    "id": 736,
+    "parentId": 723,
+    "name": "从江县"
+  },
+  {
+    "id": 724,
+    "parentId": 723,
+    "name": "凯里市"
+  },
+  {
+    "id": 732,
+    "parentId": 723,
+    "name": "剑河县"
+  },
+  {
+    "id": 733,
+    "parentId": 723,
+    "name": "台江县"
+  },
+  {
+    "id": 730,
+    "parentId": 723,
+    "name": "天柱县"
+  },
+  {
+    "id": 729,
+    "parentId": 723,
+    "name": "岑巩县"
+  },
+  {
+    "id": 726,
+    "parentId": 723,
+    "name": "施秉县"
+  },
+  {
+    "id": 735,
+    "parentId": 723,
+    "name": "榕江县"
+  },
+  {
+    "id": 731,
+    "parentId": 723,
+    "name": "锦屏县"
+  },
+  {
+    "id": 728,
+    "parentId": 723,
+    "name": "镇远县"
+  },
+  {
+    "id": 737,
+    "parentId": 723,
+    "name": "雷山县"
+  },
+  {
+    "id": 738,
+    "parentId": 723,
+    "name": "麻江县"
+  },
+  {
+    "id": 725,
+    "parentId": 723,
+    "name": "黄平县"
+  },
+  {
+    "id": 734,
+    "parentId": 723,
+    "name": "黎平县"
+  },
+  {
+    "id": 740,
+    "parentId": 690,
+    "name": "黔南布依族苗族自治州"
+  },
+  {
+    "id": 752,
+    "parentId": 740,
+    "name": "三都水族自治县"
+  },
+  {
+    "id": 747,
+    "parentId": 740,
+    "name": "平塘县"
+  },
+  {
+    "id": 751,
+    "parentId": 740,
+    "name": "惠水县"
+  },
+  {
+    "id": 746,
+    "parentId": 740,
+    "name": "独山县"
+  },
+  {
+    "id": 745,
+    "parentId": 740,
+    "name": "瓮安县"
+  },
+  {
+    "id": 742,
+    "parentId": 740,
+    "name": "福泉市"
+  },
+  {
+    "id": 748,
+    "parentId": 740,
+    "name": "罗甸县"
+  },
+  {
+    "id": 743,
+    "parentId": 740,
+    "name": "荔波县"
+  },
+  {
+    "id": 744,
+    "parentId": 740,
+    "name": "贵定县"
+  },
+  {
+    "id": 741,
+    "parentId": 740,
+    "name": "都匀市"
+  },
+  {
+    "id": 749,
+    "parentId": 740,
+    "name": "长顺县"
+  },
+  {
+    "id": 750,
+    "parentId": 740,
+    "name": "龙里县"
+  },
+  {
+    "id": 753,
+    "parentId": 690,
+    "name": "黔西南布依族苗族自治州"
+  },
+  {
+    "id": 754,
+    "parentId": 753,
+    "name": "兴义市"
+  },
+  {
+    "id": 755,
+    "parentId": 753,
+    "name": "兴仁县"
+  },
+  {
+    "id": 760,
+    "parentId": 753,
+    "name": "册亨县"
+  },
+  {
+    "id": 761,
+    "parentId": 753,
+    "name": "安龙县"
+  },
+  {
+    "id": 756,
+    "parentId": 753,
+    "name": "普安县"
+  },
+  {
+    "id": 757,
+    "parentId": 753,
+    "name": "晴隆县"
+  },
+  {
+    "id": 759,
+    "parentId": 753,
+    "name": "望谟县"
+  },
+  {
+    "id": 758,
+    "parentId": 753,
+    "name": "贞丰县"
+  },
+  {
+    "id": 762,
+    "parentId": 690,
+    "name": "铜仁地区"
+  },
+  {
+    "id": 772,
+    "parentId": 762,
+    "name": "万山特区"
+  },
+  {
+    "id": 768,
+    "parentId": 762,
+    "name": "印江土家族苗族自治县"
+  },
+  {
+    "id": 769,
+    "parentId": 762,
+    "name": "德江县"
+  },
+  {
+    "id": 767,
+    "parentId": 762,
+    "name": "思南县"
+  },
+  {
+    "id": 771,
+    "parentId": 762,
+    "name": "松桃苗族自治县"
+  },
+  {
+    "id": 764,
+    "parentId": 762,
+    "name": "江口县"
+  },
+  {
+    "id": 770,
+    "parentId": 762,
+    "name": "沿河土家族自治县"
+  },
+  {
+    "id": 765,
+    "parentId": 762,
+    "name": "玉屏侗族自治县"
+  },
+  {
+    "id": 766,
+    "parentId": 762,
+    "name": "石阡县"
+  },
+  {
+    "id": 763,
+    "parentId": 762,
+    "name": "铜仁市"
+  },
+  {
+    "id": 773,
+    "parentId": 690,
+    "name": "遵义市"
+  },
+  {
+    "id": 785,
+    "parentId": 773,
+    "name": "习水县"
+  },
+  {
+    "id": 787,
+    "parentId": 773,
+    "name": "仁怀市"
+  },
+  {
+    "id": 784,
+    "parentId": 773,
+    "name": "余庆县"
+  },
+  {
+    "id": 782,
+    "parentId": 773,
+    "name": "凤冈县"
+  },
+  {
+    "id": 781,
+    "parentId": 773,
+    "name": "务川仡佬族苗族自治县"
+  },
+  {
+    "id": 777,
+    "parentId": 773,
+    "name": "桐梓县"
+  },
+  {
+    "id": 779,
+    "parentId": 773,
+    "name": "正安县"
+  },
+  {
+    "id": 775,
+    "parentId": 773,
+    "name": "汇川区"
+  },
+  {
+    "id": 783,
+    "parentId": 773,
+    "name": "湄潭县"
+  },
+  {
+    "id": 774,
+    "parentId": 773,
+    "name": "红花岗区"
+  },
+  {
+    "id": 778,
+    "parentId": 773,
+    "name": "绥阳县"
+  },
+  {
+    "id": 786,
+    "parentId": 773,
+    "name": "赤水市"
+  },
+  {
+    "id": 780,
+    "parentId": 773,
+    "name": "道真仡佬族苗族自治县"
+  },
+  {
+    "id": 776,
+    "parentId": 773,
+    "name": "遵义县"
+  },
+  {
+    "id": 788,
+    "parentId": null,
+    "name": "海南"
+  },
+  {
+    "id": 789,
+    "parentId": 788,
+    "name": "海口市"
+  },
+  {
+    "id": 792,
+    "parentId": 789,
+    "name": "琼山区"
+  },
+  {
+    "id": 790,
+    "parentId": 789,
+    "name": "秀英区"
+  },
+  {
+    "id": 793,
+    "parentId": 789,
+    "name": "美兰区"
+  },
+  {
+    "id": 791,
+    "parentId": 789,
+    "name": "龙华区"
+  },
+  {
+    "id": 814,
+    "parentId": null,
+    "name": "河北"
+  },
+  {
+    "id": 815,
+    "parentId": 814,
+    "name": "石家庄市"
+  },
+  {
+    "id": 822,
+    "parentId": 815,
+    "name": "井陉县"
+  },
+  {
+    "id": 820,
+    "parentId": 815,
+    "name": "井陉矿区"
+  },
+  {
+    "id": 832,
+    "parentId": 815,
+    "name": "元氏县"
+  },
+  {
+    "id": 831,
+    "parentId": 815,
+    "name": "平山县"
+  },
+  {
+    "id": 837,
+    "parentId": 815,
+    "name": "新乐市"
+  },
+  {
+    "id": 819,
+    "parentId": 815,
+    "name": "新华区"
+  },
+  {
+    "id": 830,
+    "parentId": 815,
+    "name": "无极县"
+  },
+  {
+    "id": 836,
+    "parentId": 815,
+    "name": "晋州市"
+  },
+  {
+    "id": 824,
+    "parentId": 815,
+    "name": "栾城县"
+  },
+  {
+    "id": 817,
+    "parentId": 815,
+    "name": "桥东区"
+  },
+  {
+    "id": 818,
+    "parentId": 815,
+    "name": "桥西区"
+  },
+  {
+    "id": 823,
+    "parentId": 815,
+    "name": "正定县"
+  },
+  {
+    "id": 828,
+    "parentId": 815,
+    "name": "深泽县"
+  },
+  {
+    "id": 826,
+    "parentId": 815,
+    "name": "灵寿县"
+  },
+  {
+    "id": 835,
+    "parentId": 815,
+    "name": "藁城市"
+  },
+  {
+    "id": 825,
+    "parentId": 815,
+    "name": "行唐县"
+  },
+  {
+    "id": 821,
+    "parentId": 815,
+    "name": "裕华区"
+  },
+  {
+    "id": 829,
+    "parentId": 815,
+    "name": "赞皇县"
+  },
+  {
+    "id": 833,
+    "parentId": 815,
+    "name": "赵县"
+  },
+  {
+    "id": 834,
+    "parentId": 815,
+    "name": "辛集市"
+  },
+  {
+    "id": 816,
+    "parentId": 815,
+    "name": "长安区"
+  },
+  {
+    "id": 827,
+    "parentId": 815,
+    "name": "高邑县"
+  },
+  {
+    "id": 838,
+    "parentId": 815,
+    "name": "鹿泉市"
+  },
+  {
+    "id": 839,
+    "parentId": 814,
+    "name": "保定市"
+  },
+  {
+    "id": 841,
+    "parentId": 839,
+    "name": "北市区"
+  },
+  {
+    "id": 842,
+    "parentId": 839,
+    "name": "南市区"
+  },
+  {
+    "id": 859,
+    "parentId": 839,
+    "name": "博野县"
+  },
+  {
+    "id": 849,
+    "parentId": 839,
+    "name": "唐县"
+  },
+  {
+    "id": 863,
+    "parentId": 839,
+    "name": "安国市"
+  },
+  {
+    "id": 854,
+    "parentId": 839,
+    "name": "安新县"
+  },
+  {
+    "id": 848,
+    "parentId": 839,
+    "name": "定兴县"
+  },
+  {
+    "id": 862,
+    "parentId": 839,
+    "name": "定州市"
+  },
+  {
+    "id": 851,
+    "parentId": 839,
+    "name": "容城县"
+  },
+  {
+    "id": 847,
+    "parentId": 839,
+    "name": "徐水县"
+  },
+  {
+    "id": 840,
+    "parentId": 839,
+    "name": "新市区"
+  },
+  {
+    "id": 855,
+    "parentId": 839,
+    "name": "易县"
+  },
+  {
+    "id": 856,
+    "parentId": 839,
+    "name": "曲阳县"
+  },
+  {
+    "id": 853,
+    "parentId": 839,
+    "name": "望都县"
+  },
+  {
+    "id": 845,
+    "parentId": 839,
+    "name": "涞水县"
+  },
+  {
+    "id": 852,
+    "parentId": 839,
+    "name": "涞源县"
+  },
+  {
+    "id": 861,
+    "parentId": 839,
+    "name": "涿州市"
+  },
+  {
+    "id": 844,
+    "parentId": 839,
+    "name": "清苑县"
+  },
+  {
+    "id": 843,
+    "parentId": 839,
+    "name": "满城县"
+  },
+  {
+    "id": 857,
+    "parentId": 839,
+    "name": "蠡县"
+  },
+  {
+    "id": 846,
+    "parentId": 839,
+    "name": "阜平县"
+  },
+  {
+    "id": 860,
+    "parentId": 839,
+    "name": "雄县"
+  },
+  {
+    "id": 858,
+    "parentId": 839,
+    "name": "顺平县"
+  },
+  {
+    "id": 864,
+    "parentId": 839,
+    "name": "高碑店市"
+  },
+  {
+    "id": 850,
+    "parentId": 839,
+    "name": "高阳县"
+  },
+  {
+    "id": 865,
+    "parentId": 814,
+    "name": "沧州市"
+  },
+  {
+    "id": 870,
+    "parentId": 865,
+    "name": "东光县"
+  },
+  {
+    "id": 879,
+    "parentId": 865,
+    "name": "任丘市"
+  },
+  {
+    "id": 874,
+    "parentId": 865,
+    "name": "南皮县"
+  },
+  {
+    "id": 875,
+    "parentId": 865,
+    "name": "吴桥县"
+  },
+  {
+    "id": 877,
+    "parentId": 865,
+    "name": "孟村回族自治县"
+  },
+  {
+    "id": 866,
+    "parentId": 865,
+    "name": "新华区"
+  },
+  {
+    "id": 868,
+    "parentId": 865,
+    "name": "沧县"
+  },
+  {
+    "id": 881,
+    "parentId": 865,
+    "name": "河间市"
+  },
+  {
+    "id": 878,
+    "parentId": 865,
+    "name": "泊头市"
+  },
+  {
+    "id": 871,
+    "parentId": 865,
+    "name": "海兴县"
+  },
+  {
+    "id": 876,
+    "parentId": 865,
+    "name": "献县"
+  },
+  {
+    "id": 872,
+    "parentId": 865,
+    "name": "盐山县"
+  },
+  {
+    "id": 873,
+    "parentId": 865,
+    "name": "肃宁县"
+  },
+  {
+    "id": 867,
+    "parentId": 865,
+    "name": "运河区"
+  },
+  {
+    "id": 869,
+    "parentId": 865,
+    "name": "青县"
+  },
+  {
+    "id": 880,
+    "parentId": 865,
+    "name": "黄骅市"
+  },
+  {
+    "id": 882,
+    "parentId": 814,
+    "name": "承德市"
+  },
+  {
+    "id": 891,
+    "parentId": 882,
+    "name": "丰宁满族自治县"
+  },
+  {
+    "id": 887,
+    "parentId": 882,
+    "name": "兴隆县"
+  },
+  {
+    "id": 883,
+    "parentId": 882,
+    "name": "双桥区"
+  },
+  {
+    "id": 884,
+    "parentId": 882,
+    "name": "双滦区"
+  },
+  {
+    "id": 893,
+    "parentId": 882,
+    "name": "围场满族蒙古族自治县"
+  },
+  {
+    "id": 892,
+    "parentId": 882,
+    "name": "宽城满族自治县"
+  },
+  {
+    "id": 888,
+    "parentId": 882,
+    "name": "平泉县"
+  },
+  {
+    "id": 886,
+    "parentId": 882,
+    "name": "承德县"
+  },
+  {
+    "id": 889,
+    "parentId": 882,
+    "name": "滦平县"
+  },
+  {
+    "id": 890,
+    "parentId": 882,
+    "name": "隆化县"
+  },
+  {
+    "id": 885,
+    "parentId": 882,
+    "name": "鹰手营子矿区"
+  },
+  {
+    "id": 894,
+    "parentId": 814,
+    "name": "邯郸市"
+  },
+  {
+    "id": 896,
+    "parentId": 894,
+    "name": "丛台区"
+  },
+  {
+    "id": 900,
+    "parentId": 894,
+    "name": "临漳县"
+  },
+  {
+    "id": 897,
+    "parentId": 894,
+    "name": "复兴区"
+  },
+  {
+    "id": 902,
+    "parentId": 894,
+    "name": "大名县"
+  },
+  {
+    "id": 898,
+    "parentId": 894,
+    "name": "峰峰矿区"
+  },
+  {
+    "id": 909,
+    "parentId": 894,
+    "name": "广平县"
+  },
+  {
+    "id": 901,
+    "parentId": 894,
+    "name": "成安县"
+  },
+  {
+    "id": 912,
+    "parentId": 894,
+    "name": "曲周县"
+  },
+  {
+    "id": 913,
+    "parentId": 894,
+    "name": "武安市"
+  },
+  {
+    "id": 906,
+    "parentId": 894,
+    "name": "永年县"
+  },
+  {
+    "id": 903,
+    "parentId": 894,
+    "name": "涉县"
+  },
+  {
+    "id": 904,
+    "parentId": 894,
+    "name": "磁县"
+  },
+  {
+    "id": 905,
+    "parentId": 894,
+    "name": "肥乡县"
+  },
+  {
+    "id": 895,
+    "parentId": 894,
+    "name": "邯山区"
+  },
+  {
+    "id": 899,
+    "parentId": 894,
+    "name": "邯郸县"
+  },
+  {
+    "id": 907,
+    "parentId": 894,
+    "name": "邱县"
+  },
+  {
+    "id": 910,
+    "parentId": 894,
+    "name": "馆陶县"
+  },
+  {
+    "id": 911,
+    "parentId": 894,
+    "name": "魏县"
+  },
+  {
+    "id": 908,
+    "parentId": 894,
+    "name": "鸡泽县"
+  },
+  {
+    "id": 914,
+    "parentId": 814,
+    "name": "衡水市"
+  },
+  {
+    "id": 924,
+    "parentId": 914,
+    "name": "冀州市"
+  },
+  {
+    "id": 920,
+    "parentId": 914,
+    "name": "安平县"
+  },
+  {
+    "id": 921,
+    "parentId": 914,
+    "name": "故城县"
+  },
+  {
+    "id": 922,
+    "parentId": 914,
+    "name": "景县"
+  },
+  {
+    "id": 916,
+    "parentId": 914,
+    "name": "枣强县"
+  },
+  {
+    "id": 915,
+    "parentId": 914,
+    "name": "桃城区"
+  },
+  {
+    "id": 918,
+    "parentId": 914,
+    "name": "武强县"
+  },
+  {
+    "id": 917,
+    "parentId": 914,
+    "name": "武邑县"
+  },
+  {
+    "id": 925,
+    "parentId": 914,
+    "name": "深州市"
+  },
+  {
+    "id": 923,
+    "parentId": 914,
+    "name": "阜城县"
+  },
+  {
+    "id": 919,
+    "parentId": 914,
+    "name": "饶阳县"
+  },
+  {
+    "id": 926,
+    "parentId": 814,
+    "name": "廊坊市"
+  },
+  {
+    "id": 936,
+    "parentId": 926,
+    "name": "三河市"
+  },
+  {
+    "id": 929,
+    "parentId": 926,
+    "name": "固安县"
+  },
+  {
+    "id": 934,
+    "parentId": 926,
+    "name": "大厂回族自治县"
+  },
+  {
+    "id": 932,
+    "parentId": 926,
+    "name": "大城县"
+  },
+  {
+    "id": 927,
+    "parentId": 926,
+    "name": "安次区"
+  },
+  {
+    "id": 928,
+    "parentId": 926,
+    "name": "广阳区"
+  },
+  {
+    "id": 933,
+    "parentId": 926,
+    "name": "文安县"
+  },
+  {
+    "id": 930,
+    "parentId": 926,
+    "name": "永清县"
+  },
+  {
+    "id": 935,
+    "parentId": 926,
+    "name": "霸州市"
+  },
+  {
+    "id": 931,
+    "parentId": 926,
+    "name": "香河县"
+  },
+  {
+    "id": 937,
+    "parentId": 814,
+    "name": "秦皇岛市"
+  },
+  {
+    "id": 940,
+    "parentId": 937,
+    "name": "北戴河区"
+  },
+  {
+    "id": 944,
+    "parentId": 937,
+    "name": "卢龙县"
+  },
+  {
+    "id": 939,
+    "parentId": 937,
+    "name": "山海关区"
+  },
+  {
+    "id": 943,
+    "parentId": 937,
+    "name": "抚宁县"
+  },
+  {
+    "id": 942,
+    "parentId": 937,
+    "name": "昌黎县"
+  },
+  {
+    "id": 938,
+    "parentId": 937,
+    "name": "海港区"
+  },
+  {
+    "id": 941,
+    "parentId": 937,
+    "name": "青龙满族自治县"
+  },
+  {
+    "id": 945,
+    "parentId": 814,
+    "name": "唐山市"
+  },
+  {
+    "id": 950,
+    "parentId": 945,
+    "name": "丰南区"
+  },
+  {
+    "id": 951,
+    "parentId": 945,
+    "name": "丰润区"
+  },
+  {
+    "id": 954,
+    "parentId": 945,
+    "name": "乐亭县"
+  },
+  {
+    "id": 948,
+    "parentId": 945,
+    "name": "古冶区"
+  },
+  {
+    "id": 957,
+    "parentId": 945,
+    "name": "唐海县"
+  },
+  {
+    "id": 949,
+    "parentId": 945,
+    "name": "开平区"
+  },
+  {
+    "id": 953,
+    "parentId": 945,
+    "name": "滦南县"
+  },
+  {
+    "id": 952,
+    "parentId": 945,
+    "name": "滦县"
+  },
+  {
+    "id": 956,
+    "parentId": 945,
+    "name": "玉田县"
+  },
+  {
+    "id": 947,
+    "parentId": 945,
+    "name": "路北区"
+  },
+  {
+    "id": 946,
+    "parentId": 945,
+    "name": "路南区"
+  },
+  {
+    "id": 959,
+    "parentId": 945,
+    "name": "迁安市"
+  },
+  {
+    "id": 955,
+    "parentId": 945,
+    "name": "迁西县"
+  },
+  {
+    "id": 958,
+    "parentId": 945,
+    "name": "遵化市"
+  },
+  {
+    "id": 960,
+    "parentId": 814,
+    "name": "邢台市"
+  },
+  {
+    "id": 964,
+    "parentId": 960,
+    "name": "临城县"
+  },
+  {
+    "id": 977,
+    "parentId": 960,
+    "name": "临西县"
+  },
+  {
+    "id": 968,
+    "parentId": 960,
+    "name": "任县"
+  },
+  {
+    "id": 965,
+    "parentId": 960,
+    "name": "内丘县"
+  },
+  {
+    "id": 969,
+    "parentId": 960,
+    "name": "南和县"
+  },
+  {
+    "id": 978,
+    "parentId": 960,
+    "name": "南宫市"
+  },
+  {
+    "id": 975,
+    "parentId": 960,
+    "name": "威县"
+  },
+  {
+    "id": 970,
+    "parentId": 960,
+    "name": "宁晋县"
+  },
+  {
+    "id": 971,
+    "parentId": 960,
+    "name": "巨鹿县"
+  },
+  {
+    "id": 974,
+    "parentId": 960,
+    "name": "平乡县"
+  },
+  {
+    "id": 973,
+    "parentId": 960,
+    "name": "广宗县"
+  },
+  {
+    "id": 972,
+    "parentId": 960,
+    "name": "新河县"
+  },
+  {
+    "id": 966,
+    "parentId": 960,
+    "name": "柏乡县"
+  },
+  {
+    "id": 961,
+    "parentId": 960,
+    "name": "桥东区"
+  },
+  {
+    "id": 962,
+    "parentId": 960,
+    "name": "桥西区"
+  },
+  {
+    "id": 979,
+    "parentId": 960,
+    "name": "沙河市"
+  },
+  {
+    "id": 976,
+    "parentId": 960,
+    "name": "清河县"
+  },
+  {
+    "id": 963,
+    "parentId": 960,
+    "name": "邢台县"
+  },
+  {
+    "id": 967,
+    "parentId": 960,
+    "name": "隆尧县"
+  },
+  {
+    "id": 980,
+    "parentId": 814,
+    "name": "张家口市"
+  },
+  {
+    "id": 993,
+    "parentId": 980,
+    "name": "万全县"
+  },
+  {
+    "id": 984,
+    "parentId": 980,
+    "name": "下花园区"
+  },
+  {
+    "id": 983,
+    "parentId": 980,
+    "name": "宣化区"
+  },
+  {
+    "id": 985,
+    "parentId": 980,
+    "name": "宣化县"
+  },
+  {
+    "id": 989,
+    "parentId": 980,
+    "name": "尚义县"
+  },
+  {
+    "id": 997,
+    "parentId": 980,
+    "name": "崇礼县"
+  },
+  {
+    "id": 987,
+    "parentId": 980,
+    "name": "康保县"
+  },
+  {
+    "id": 986,
+    "parentId": 980,
+    "name": "张北县"
+  },
+  {
+    "id": 992,
+    "parentId": 980,
+    "name": "怀安县"
+  },
+  {
+    "id": 994,
+    "parentId": 980,
+    "name": "怀来县"
+  },
+  {
+    "id": 981,
+    "parentId": 980,
+    "name": "桥东区"
+  },
+  {
+    "id": 982,
+    "parentId": 980,
+    "name": "桥西区"
+  },
+  {
+    "id": 988,
+    "parentId": 980,
+    "name": "沽源县"
+  },
+  {
+    "id": 995,
+    "parentId": 980,
+    "name": "涿鹿县"
+  },
+  {
+    "id": 990,
+    "parentId": 980,
+    "name": "蔚县"
+  },
+  {
+    "id": 996,
+    "parentId": 980,
+    "name": "赤城县"
+  },
+  {
+    "id": 991,
+    "parentId": 980,
+    "name": "阳原县"
+  },
+  {
+    "id": 998,
+    "parentId": null,
+    "name": "河南"
+  },
+  {
+    "id": 1012,
+    "parentId": 998,
+    "name": "安阳市"
+  },
+  {
+    "id": 1020,
+    "parentId": 1012,
+    "name": "内黄县"
+  },
+  {
+    "id": 1014,
+    "parentId": 1012,
+    "name": "北关区"
+  },
+  {
+    "id": 1017,
+    "parentId": 1012,
+    "name": "安阳县"
+  },
+  {
+    "id": 1013,
+    "parentId": 1012,
+    "name": "文峰区"
+  },
+  {
+    "id": 1021,
+    "parentId": 1012,
+    "name": "林州市"
+  },
+  {
+    "id": 1015,
+    "parentId": 1012,
+    "name": "殷都区"
+  },
+  {
+    "id": 1018,
+    "parentId": 1012,
+    "name": "汤阴县"
+  },
+  {
+    "id": 1019,
+    "parentId": 1012,
+    "name": "滑县"
+  },
+  {
+    "id": 1016,
+    "parentId": 1012,
+    "name": "龙安区"
+  },
+  {
+    "id": 1022,
+    "parentId": 998,
+    "name": "鹤壁市"
+  },
+  {
+    "id": 1024,
+    "parentId": 1022,
+    "name": "山城区"
+  },
+  {
+    "id": 1026,
+    "parentId": 1022,
+    "name": "浚县"
+  },
+  {
+    "id": 1027,
+    "parentId": 1022,
+    "name": "淇县"
+  },
+  {
+    "id": 1025,
+    "parentId": 1022,
+    "name": "淇滨区"
+  },
+  {
+    "id": 1023,
+    "parentId": 1022,
+    "name": "鹤山区"
+  },
+  {
+    "id": 1029,
+    "parentId": 998,
+    "name": "焦作市"
+  },
+  {
+    "id": 1031,
+    "parentId": 1029,
+    "name": "中站区"
+  },
+  {
+    "id": 1034,
+    "parentId": 1029,
+    "name": "修武县"
+  },
+  {
+    "id": 1035,
+    "parentId": 1029,
+    "name": "博爱县"
+  },
+  {
+    "id": 1040,
+    "parentId": 1029,
+    "name": "孟州市"
+  },
+  {
+    "id": 1033,
+    "parentId": 1029,
+    "name": "山阳区"
+  },
+  {
+    "id": 1036,
+    "parentId": 1029,
+    "name": "武陟县"
+  },
+  {
+    "id": 1039,
+    "parentId": 1029,
+    "name": "沁阳市"
+  },
+  {
+    "id": 1038,
+    "parentId": 1029,
+    "name": "济源市"
+  },
+  {
+    "id": 1037,
+    "parentId": 1029,
+    "name": "温县"
+  },
+  {
+    "id": 1030,
+    "parentId": 1029,
+    "name": "解放区"
+  },
+  {
+    "id": 1032,
+    "parentId": 1029,
+    "name": "马村区"
+  },
+  {
+    "id": 1041,
+    "parentId": 998,
+    "name": "开封市"
+  },
+  {
+    "id": 1051,
+    "parentId": 1041,
+    "name": "兰考县"
+  },
+  {
+    "id": 1045,
+    "parentId": 1041,
+    "name": "南关区"
+  },
+  {
+    "id": 1049,
+    "parentId": 1041,
+    "name": "尉氏县"
+  },
+  {
+    "id": 1050,
+    "parentId": 1041,
+    "name": "开封县"
+  },
+  {
+    "id": 1047,
+    "parentId": 1041,
+    "name": "杞县"
+  },
+  {
+    "id": 1048,
+    "parentId": 1041,
+    "name": "通许县"
+  },
+  {
+    "id": 1046,
+    "parentId": 1041,
+    "name": "郊区"
+  },
+  {
+    "id": 1043,
+    "parentId": 1041,
+    "name": "顺河回族区"
+  },
+  {
+    "id": 1044,
+    "parentId": 1041,
+    "name": "鼓楼区"
+  },
+  {
+    "id": 1042,
+    "parentId": 1041,
+    "name": "龙亭区"
+  },
+  {
+    "id": 1052,
+    "parentId": 998,
+    "name": "洛阳市"
+  },
+  {
+    "id": 1066,
+    "parentId": 1052,
+    "name": "伊川县"
+  },
+  {
+    "id": 1067,
+    "parentId": 1052,
+    "name": "偃师市"
+  },
+  {
+    "id": 1057,
+    "parentId": 1052,
+    "name": "吉利区"
+  },
+  {
+    "id": 1059,
+    "parentId": 1052,
+    "name": "孟津县"
+  },
+  {
+    "id": 1064,
+    "parentId": 1052,
+    "name": "宜阳县"
+  },
+  {
+    "id": 1062,
+    "parentId": 1052,
+    "name": "嵩县"
+  },
+  {
+    "id": 1055,
+    "parentId": 1052,
+    "name": "廛河回族区"
+  },
+  {
+    "id": 1060,
+    "parentId": 1052,
+    "name": "新安县"
+  },
+  {
+    "id": 1061,
+    "parentId": 1052,
+    "name": "栾川县"
+  },
+  {
+    "id": 1063,
+    "parentId": 1052,
+    "name": "汝阳县"
+  },
+  {
+    "id": 1065,
+    "parentId": 1052,
+    "name": "洛宁县"
+  },
+  {
+    "id": 1058,
+    "parentId": 1052,
+    "name": "洛龙区"
+  },
+  {
+    "id": 1056,
+    "parentId": 1052,
+    "name": "涧西区"
+  },
+  {
+    "id": 1053,
+    "parentId": 1052,
+    "name": "老城区"
+  },
+  {
+    "id": 1054,
+    "parentId": 1052,
+    "name": "西工区"
+  },
+  {
+    "id": 1068,
+    "parentId": 998,
+    "name": "漯河市"
+  },
+  {
+    "id": 1073,
+    "parentId": 1068,
+    "name": "临颍县"
+  },
+  {
+    "id": 1071,
+    "parentId": 1068,
+    "name": "召陵区"
+  },
+  {
+    "id": 1069,
+    "parentId": 1068,
+    "name": "源汇区"
+  },
+  {
+    "id": 1072,
+    "parentId": 1068,
+    "name": "舞阳县"
+  },
+  {
+    "id": 1070,
+    "parentId": 1068,
+    "name": "郾城区"
+  },
+  {
+    "id": 1074,
+    "parentId": 998,
+    "name": "南阳市"
+  },
+  {
+    "id": 1081,
+    "parentId": 1074,
+    "name": "内乡县"
+  },
+  {
+    "id": 1077,
+    "parentId": 1074,
+    "name": "南召县"
+  },
+  {
+    "id": 1076,
+    "parentId": 1074,
+    "name": "卧龙区"
+  },
+  {
+    "id": 1084,
+    "parentId": 1074,
+    "name": "唐河县"
+  },
+  {
+    "id": 1075,
+    "parentId": 1074,
+    "name": "宛城区"
+  },
+  {
+    "id": 1085,
+    "parentId": 1074,
+    "name": "新野县"
+  },
+  {
+    "id": 1078,
+    "parentId": 1074,
+    "name": "方城县"
+  },
+  {
+    "id": 1086,
+    "parentId": 1074,
+    "name": "桐柏县"
+  },
+  {
+    "id": 1082,
+    "parentId": 1074,
+    "name": "淅川县"
+  },
+  {
+    "id": 1083,
+    "parentId": 1074,
+    "name": "社旗县"
+  },
+  {
+    "id": 1079,
+    "parentId": 1074,
+    "name": "西峡县"
+  },
+  {
+    "id": 1087,
+    "parentId": 1074,
+    "name": "邓州市"
+  },
+  {
+    "id": 1080,
+    "parentId": 1074,
+    "name": "镇平县"
+  },
+  {
+    "id": 1088,
+    "parentId": 998,
+    "name": "平顶山市"
+  },
+  {
+    "id": 1090,
+    "parentId": 1088,
+    "name": "卫东区"
+  },
+  {
+    "id": 1094,
+    "parentId": 1088,
+    "name": "叶县"
+  },
+  {
+    "id": 1093,
+    "parentId": 1088,
+    "name": "宝丰县"
+  },
+  {
+    "id": 1089,
+    "parentId": 1088,
+    "name": "新华区"
+  },
+  {
+    "id": 1098,
+    "parentId": 1088,
+    "name": "汝州市"
+  },
+  {
+    "id": 1092,
+    "parentId": 1088,
+    "name": "湛河区"
+  },
+  {
+    "id": 1091,
+    "parentId": 1088,
+    "name": "石龙区"
+  },
+  {
+    "id": 1097,
+    "parentId": 1088,
+    "name": "舞钢市"
+  },
+  {
+    "id": 1096,
+    "parentId": 1088,
+    "name": "郏县"
+  },
+  {
+    "id": 1095,
+    "parentId": 1088,
+    "name": "鲁山县"
+  },
+  {
+    "id": 1099,
+    "parentId": 998,
+    "name": "濮阳市"
+  },
+  {
+    "id": 1100,
+    "parentId": 1099,
+    "name": "华龙区"
+  },
+  {
+    "id": 1102,
+    "parentId": 1099,
+    "name": "南乐县"
+  },
+  {
+    "id": 1104,
+    "parentId": 1099,
+    "name": "台前县"
+  },
+  {
+    "id": 1101,
+    "parentId": 1099,
+    "name": "清丰县"
+  },
+  {
+    "id": 1105,
+    "parentId": 1099,
+    "name": "濮阳县"
+  },
+  {
+    "id": 1103,
+    "parentId": 1099,
+    "name": "范县"
+  },
+  {
+    "id": 1106,
+    "parentId": 998,
+    "name": "三门峡市"
+  },
+  {
+    "id": 1111,
+    "parentId": 1106,
+    "name": "义马市"
+  },
+  {
+    "id": 1110,
+    "parentId": 1106,
+    "name": "卢氏县"
+  },
+  {
+    "id": 1108,
+    "parentId": 1106,
+    "name": "渑池县"
+  },
+  {
+    "id": 1107,
+    "parentId": 1106,
+    "name": "湖滨区"
+  },
+  {
+    "id": 1112,
+    "parentId": 1106,
+    "name": "灵宝市"
+  },
+  {
+    "id": 1109,
+    "parentId": 1106,
+    "name": "陕县"
+  },
+  {
+    "id": 1113,
+    "parentId": 998,
+    "name": "商丘市"
+  },
+  {
+    "id": 1121,
+    "parentId": 1113,
+    "name": "夏邑县"
+  },
+  {
+    "id": 1118,
+    "parentId": 1113,
+    "name": "宁陵县"
+  },
+  {
+    "id": 1119,
+    "parentId": 1113,
+    "name": "柘城县"
+  },
+  {
+    "id": 1114,
+    "parentId": 1113,
+    "name": "梁园区"
+  },
+  {
+    "id": 1116,
+    "parentId": 1113,
+    "name": "民权县"
+  },
+  {
+    "id": 1122,
+    "parentId": 1113,
+    "name": "永城市"
+  },
+  {
+    "id": 1117,
+    "parentId": 1113,
+    "name": "睢县"
+  },
+  {
+    "id": 1115,
+    "parentId": 1113,
+    "name": "睢阳区"
+  },
+  {
+    "id": 1120,
+    "parentId": 1113,
+    "name": "虞城县"
+  },
+  {
+    "id": 1123,
+    "parentId": 998,
+    "name": "新乡市"
+  },
+  {
+    "id": 1126,
+    "parentId": 1123,
+    "name": "凤泉区"
+  },
+  {
+    "id": 1125,
+    "parentId": 1123,
+    "name": "卫滨区"
+  },
+  {
+    "id": 1134,
+    "parentId": 1123,
+    "name": "卫辉市"
+  },
+  {
+    "id": 1130,
+    "parentId": 1123,
+    "name": "原阳县"
+  },
+  {
+    "id": 1132,
+    "parentId": 1123,
+    "name": "封丘县"
+  },
+  {
+    "id": 1131,
+    "parentId": 1123,
+    "name": "延津县"
+  },
+  {
+    "id": 1128,
+    "parentId": 1123,
+    "name": "新乡县"
+  },
+  {
+    "id": 1127,
+    "parentId": 1123,
+    "name": "牧野区"
+  },
+  {
+    "id": 1124,
+    "parentId": 1123,
+    "name": "红旗区"
+  },
+  {
+    "id": 1129,
+    "parentId": 1123,
+    "name": "获嘉县"
+  },
+  {
+    "id": 1135,
+    "parentId": 1123,
+    "name": "辉县市"
+  },
+  {
+    "id": 1133,
+    "parentId": 1123,
+    "name": "长垣县"
+  },
+  {
+    "id": 1136,
+    "parentId": 998,
+    "name": "信阳市"
+  },
+  {
+    "id": 1140,
+    "parentId": 1136,
+    "name": "光山县"
+  },
+  {
+    "id": 1142,
+    "parentId": 1136,
+    "name": "商城县"
+  },
+  {
+    "id": 1143,
+    "parentId": 1136,
+    "name": "固始县"
+  },
+  {
+    "id": 1137,
+    "parentId": 1136,
+    "name": "师河区"
+  },
+  {
+    "id": 1138,
+    "parentId": 1136,
+    "name": "平桥区"
+  },
+  {
+    "id": 1146,
+    "parentId": 1136,
+    "name": "息县"
+  },
+  {
+    "id": 1141,
+    "parentId": 1136,
+    "name": "新县"
+  },
+  {
+    "id": 1145,
+    "parentId": 1136,
+    "name": "淮滨县"
+  },
+  {
+    "id": 1144,
+    "parentId": 1136,
+    "name": "潢川县"
+  },
+  {
+    "id": 1139,
+    "parentId": 1136,
+    "name": "罗山县"
+  },
+  {
+    "id": 1147,
+    "parentId": 998,
+    "name": "许昌市"
+  },
+  {
+    "id": 1152,
+    "parentId": 1147,
+    "name": "禹州市"
+  },
+  {
+    "id": 1151,
+    "parentId": 1147,
+    "name": "襄城县"
+  },
+  {
+    "id": 1149,
+    "parentId": 1147,
+    "name": "许昌县"
+  },
+  {
+    "id": 1150,
+    "parentId": 1147,
+    "name": "鄢陵县"
+  },
+  {
+    "id": 1153,
+    "parentId": 1147,
+    "name": "长葛市"
+  },
+  {
+    "id": 1148,
+    "parentId": 1147,
+    "name": "魏都区"
+  },
+  {
+    "id": 1154,
+    "parentId": 998,
+    "name": "周口市"
+  },
+  {
+    "id": 1158,
+    "parentId": 1154,
+    "name": "商水县"
+  },
+  {
+    "id": 1162,
+    "parentId": 1154,
+    "name": "太康县"
+  },
+  {
+    "id": 1155,
+    "parentId": 1154,
+    "name": "川汇区"
+  },
+  {
+    "id": 1156,
+    "parentId": 1154,
+    "name": "扶沟县"
+  },
+  {
+    "id": 1159,
+    "parentId": 1154,
+    "name": "沈丘县"
+  },
+  {
+    "id": 1161,
+    "parentId": 1154,
+    "name": "淮阳县"
+  },
+  {
+    "id": 1157,
+    "parentId": 1154,
+    "name": "西华县"
+  },
+  {
+    "id": 1160,
+    "parentId": 1154,
+    "name": "郸城县"
+  },
+  {
+    "id": 1164,
+    "parentId": 1154,
+    "name": "项城市"
+  },
+  {
+    "id": 1163,
+    "parentId": 1154,
+    "name": "鹿邑县"
+  },
+  {
+    "id": 1165,
+    "parentId": 998,
+    "name": "驻马店市"
+  },
+  {
+    "id": 1168,
+    "parentId": 1165,
+    "name": "上蔡县"
+  },
+  {
+    "id": 1169,
+    "parentId": 1165,
+    "name": "平舆县"
+  },
+  {
+    "id": 1175,
+    "parentId": 1165,
+    "name": "新蔡县"
+  },
+  {
+    "id": 1170,
+    "parentId": 1165,
+    "name": "正阳县"
+  },
+  {
+    "id": 1173,
+    "parentId": 1165,
+    "name": "汝南县"
+  },
+  {
+    "id": 1172,
+    "parentId": 1165,
+    "name": "泌阳县"
+  },
+  {
+    "id": 1171,
+    "parentId": 1165,
+    "name": "确山县"
+  },
+  {
+    "id": 1167,
+    "parentId": 1165,
+    "name": "西平县"
+  },
+  {
+    "id": 1174,
+    "parentId": 1165,
+    "name": "遂平县"
+  },
+  {
+    "id": 1166,
+    "parentId": 1165,
+    "name": "驿城区"
+  },
+  {
+    "id": 999,
+    "parentId": 998,
+    "name": "郑州市"
+  },
+  {
+    "id": 1004,
+    "parentId": 999,
+    "name": "上街区"
+  },
+  {
+    "id": 1000,
+    "parentId": 999,
+    "name": "中原区"
+  },
+  {
+    "id": 1006,
+    "parentId": 999,
+    "name": "中牟县"
+  },
+  {
+    "id": 1001,
+    "parentId": 999,
+    "name": "二七区"
+  },
+  {
+    "id": 1007,
+    "parentId": 999,
+    "name": "巩义市"
+  },
+  {
+    "id": 1009,
+    "parentId": 999,
+    "name": "新密市"
+  },
+  {
+    "id": 1010,
+    "parentId": 999,
+    "name": "新郑市"
+  },
+  {
+    "id": 1011,
+    "parentId": 999,
+    "name": "登封市"
+  },
+  {
+    "id": 1002,
+    "parentId": 999,
+    "name": "管城回族区"
+  },
+  {
+    "id": 1008,
+    "parentId": 999,
+    "name": "荥阳市"
+  },
+  {
+    "id": 1005,
+    "parentId": 999,
+    "name": "邙山区"
+  },
+  {
+    "id": 1003,
+    "parentId": 999,
+    "name": "金水区"
+  }
+]
diff --git a/Yi.Pure.Vue3/src/views/table/virtual/treeList.vue b/Yi.Pure.Vue3/src/views/table/virtual/treeList.vue
new file mode 100644
index 00000000..696f1e0e
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/table/virtual/treeList.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import treeList from "./tree.json";
+import { VxeTableBar } from "@/components/ReVxeTableBar";
+
+const vxeTableRef = ref();
+
+const loading = ref(true);
+const tableData = ref([]);
+
+const columns = [
+  { type: "seq", field: "seq", title: "序号", width: 200, treeNode: true },
+  { field: "id", title: "Id" },
+  { field: "name", title: "地点" }
+];
+
+async function onSearch() {
+  loading.value = true;
+  tableData.value = treeList;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+onSearch();
+</script>
+
+<template>
+  <VxeTableBar
+    tree
+    title="虚拟树形表格"
+    :isExpandAll="false"
+    :vxeTableRef="vxeTableRef"
+    :columns="columns"
+    @refresh="onSearch"
+  >
+    <template v-slot="{ size, dynamicColumns }">
+      <vxe-grid
+        ref="vxeTableRef"
+        v-loading="loading"
+        show-overflow
+        height="500"
+        :size="size"
+        :tree-config="{ transform: true }"
+        :scroll-y="{ enabled: true, gt: 20 }"
+        :columns="dynamicColumns"
+        :data="tableData"
+      />
+    </template>
+  </VxeTableBar>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/tabs/hooks.ts b/Yi.Pure.Vue3/src/views/tabs/hooks.ts
new file mode 100644
index 00000000..08f26c36
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/tabs/hooks.ts
@@ -0,0 +1,69 @@
+import { isString, isEmpty } from "@pureadmin/utils";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import {
+  useRouter,
+  useRoute,
+  type LocationQueryRaw,
+  type RouteParamsRaw
+} from "vue-router";
+
+export function useDetail() {
+  const route = useRoute();
+  const router = useRouter();
+  const getParameter = isEmpty(route.params) ? route.query : route.params;
+
+  function toDetail(
+    parameter: LocationQueryRaw | RouteParamsRaw,
+    model: "query" | "params"
+  ) {
+    // ⚠️ 这里要特别注意下，因为vue-router在解析路由参数的时候会自动转化成字符串类型，比如在使用useRoute().route.query或useRoute().route.params时，得到的参数都是字符串类型
+    // 所以在传参的时候，如果参数是数字类型，就需要在此处 toString() 一下，保证传参跟路由参数类型一致都是字符串，这是必不可少的环节！！！
+    Object.keys(parameter).forEach(param => {
+      if (!isString(parameter[param])) {
+        parameter[param] = parameter[param].toString();
+      }
+    });
+    if (model === "query") {
+      // 保存信息到标签页
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/tabs/query-detail`,
+        name: "TabQueryDetail",
+        query: parameter,
+        meta: {
+          title: {
+            zh: `No.${parameter.id} - 详情信息`,
+            en: `No.${parameter.id} - DetailInfo`
+          },
+          // 如果使用的是非国际化精简版title可以像下面这么写
+          // title: `No.${index} - 详情信息`,
+          // 最大打开标签数
+          dynamicLevel: 3
+        }
+      });
+      // 路由跳转
+      router.push({ name: "TabQueryDetail", query: parameter });
+    } else if (model === "params") {
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/tabs/params-detail/:id`,
+        name: "TabParamsDetail",
+        params: parameter,
+        meta: {
+          title: {
+            zh: `No.${parameter.id} - 详情信息`,
+            en: `No.${parameter.id} - DetailInfo`
+          }
+          // 如果使用的是非国际化精简版title可以像下面这么写
+          // title: `No.${index} - 详情信息`,
+        }
+      });
+      router.push({ name: "TabParamsDetail", params: parameter });
+    }
+  }
+
+  // 用于页面刷新，重新获取浏览器地址栏参数并保存到标签页
+  const initToDetail = (model: "query" | "params") => {
+    if (getParameter) toDetail(getParameter, model);
+  };
+
+  return { toDetail, initToDetail, getParameter, router };
+}
diff --git a/Yi.Pure.Vue3/src/views/tabs/index.vue b/Yi.Pure.Vue3/src/views/tabs/index.vue
new file mode 100644
index 00000000..cc32ddf2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/tabs/index.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import {
+  deleteChildren,
+  getNodeByUniqueId,
+  appendFieldByUniqueId
+} from "@/utils/tree";
+import { useDetail } from "./hooks";
+import { ref, computed } from "vue";
+import { clone } from "@pureadmin/utils";
+import { transformI18n } from "@/plugins/i18n";
+import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+defineOptions({
+  name: "Tabs"
+});
+
+const { toDetail, router } = useDetail();
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
+
+const treeData = computed(() => {
+  return appendFieldByUniqueId(deleteChildren(menusTree), 0, {
+    disabled: true
+  });
+});
+
+const currentValues = ref<string[]>([]);
+
+const multiTags = computed(() => {
+  return useMultiTagsStoreHook()?.multiTags;
+});
+
+function onCloseTags() {
+  if (currentValues.value.length === 0) return;
+  currentValues.value.forEach(uniqueId => {
+    const currentPath =
+      getNodeByUniqueId(treeData.value, uniqueId).redirect ??
+      getNodeByUniqueId(treeData.value, uniqueId).path;
+    useMultiTagsStoreHook().handleTags("splice", currentPath);
+    if (currentPath === "/tabs/index")
+      router.push({
+        path: multiTags.value[(multiTags as any).value.length - 1].path
+      });
+  });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">标签页复用，超出限制自动关闭</div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/tabs"
+        target="_blank"
+      >
+        代码位置 src/views/tabs
+      </el-link>
+    </template>
+    <div class="flex flex-wrap items-center">
+      <p>query传参模式：</p>
+      <el-button
+        v-for="index in 6"
+        :key="index"
+        class="m-2"
+        @click="toDetail({ id: index }, 'query')"
+      >
+        打开{{ index }}详情页
+      </el-button>
+      <el-button
+        @click="
+          toDetail({ id: 666, name: '小明', age: 18, job: '工程师' }, 'query')
+        "
+      >
+        多个参数
+      </el-button>
+    </div>
+
+    <el-divider />
+
+    <div class="flex flex-wrap items-center">
+      <p>params传参模式：</p>
+      <el-button
+        v-for="index in 6"
+        :key="index"
+        class="m-2"
+        @click="toDetail({ id: index }, 'params')"
+      >
+        打开{{ index }}详情页
+      </el-button>
+    </div>
+
+    <el-divider />
+    <el-tree-select
+      v-model="currentValues"
+      class="!w-[300px]"
+      node-key="uniqueId"
+      placeholder="请选择要关闭的标签"
+      clearable
+      multiple
+      filterable
+      default-expand-all
+      :props="{
+        label: data => transformI18n(data.meta.title),
+        value: 'uniqueId',
+        children: 'children',
+        disabled: 'disabled'
+      }"
+      :data="treeData"
+    >
+      <template #default="{ data }">
+        <span>{{ transformI18n(data.meta.title) }}</span>
+      </template>
+    </el-tree-select>
+    <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
+
+    <el-divider />
+    <el-button @click="router.push({ name: 'Menu1-2-2' })">
+      跳转页内菜单（传name对象，优先推荐）
+    </el-button>
+    <el-button @click="router.push('/nested/menu1/menu1-2/menu1-2-2')">
+      跳转页内菜单（直接传要跳转的路径）
+    </el-button>
+    <el-button
+      @click="router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
+    >
+      跳转页内菜单（传path对象）
+    </el-button>
+
+    <el-divider />
+    <el-button
+      @click="
+        router.push({
+          name: 'Menu1-2-2',
+          query: { text: '传name对象，优先推荐' }
+        })
+      "
+    >
+      携参跳转页内菜单（传name对象，优先推荐）
+    </el-button>
+    <el-button
+      @click="
+        router.push({
+          path: '/nested/menu1/menu1-2/menu1-2-2',
+          query: { text: '传path对象' }
+        })
+      "
+    >
+      携参跳转页内菜单（传path对象）
+    </el-button>
+    <el-link
+      class="ml-4"
+      href="https://router.vuejs.org/zh/guide/essentials/navigation.html#%E5%AF%BC%E8%88%AA%E5%88%B0%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BD%8D%E7%BD%AE"
+      target="_blank"
+    >
+      点击查看更多跳转方式
+    </el-link>
+
+    <el-divider />
+    <el-button @click="router.push({ name: 'Empty' })">
+      跳转无Layout的空白页面
+    </el-button>
+  </el-card>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/tabs/params-detail.vue b/Yi.Pure.Vue3/src/views/tabs/params-detail.vue
new file mode 100644
index 00000000..63d65a5f
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/tabs/params-detail.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useDetail } from "./hooks";
+
+defineOptions({
+  name: "TabParamsDetail"
+});
+
+const { initToDetail, getParameter } = useDetail();
+initToDetail("params");
+</script>
+
+<template>
+  <div>
+    {{ getParameter.id }} - 详情页内容在此（params传参）
+    <p>当前页面参数为：{{ getParameter }}</p>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/tabs/query-detail.vue b/Yi.Pure.Vue3/src/views/tabs/query-detail.vue
new file mode 100644
index 00000000..0e965b7b
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/tabs/query-detail.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useDetail } from "./hooks";
+
+defineOptions({
+  name: "TabQueryDetail"
+});
+
+const { initToDetail, getParameter } = useDetail();
+initToDetail("query");
+</script>
+
+<template>
+  <div>
+    {{ getParameter.id }} - 详情页内容在此（query传参）
+    <p>当前页面参数为：{{ getParameter }}</p>
+  </div>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/animationEdge.vue b/Yi.Pure.Vue3/src/views/vue-flow/layouting/animationEdge.vue
new file mode 100644
index 00000000..38c06520
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/animationEdge.vue
@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref, toRef, watch } from "vue";
+import { TransitionPresets, executeTransition } from "@vueuse/core";
+import {
+  Position,
+  BaseEdge,
+  useVueFlow,
+  useNodesData,
+  getSmoothStepPath,
+  EdgeLabelRenderer
+} from "@vue-flow/core";
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  source: {
+    type: String,
+    required: true
+  },
+  target: {
+    type: String,
+    required: true
+  },
+  sourceX: {
+    type: Number,
+    required: true
+  },
+  sourceY: {
+    type: Number,
+    required: true
+  },
+  targetX: {
+    type: Number,
+    required: true
+  },
+  targetY: {
+    type: Number,
+    required: true
+  },
+  sourcePosition: {
+    type: String,
+    default: Position.Right
+  },
+  targetPosition: {
+    type: String,
+    default: Position.Left
+  }
+});
+
+const { findEdge } = useVueFlow();
+
+const nodesData = useNodesData([props.target, props.source]);
+
+const edgePoint = ref(0);
+
+const edgeRef = ref();
+
+const labelPosition = ref({ x: 0, y: 0 });
+
+const currentLength = ref(0);
+
+const targetNodeData = toRef(() => nodesData.value[0].data);
+
+const sourceNodeData = toRef(() => nodesData.value[1].data);
+
+const isFinished = toRef(() => sourceNodeData.value.isFinished);
+
+const isCancelled = toRef(() => targetNodeData.value.isCancelled);
+
+const isAnimating = ref(false);
+
+const edgeColor = toRef(() => {
+  if (targetNodeData.value.hasError) {
+    return "#f87171";
+  }
+
+  if (targetNodeData.value.isFinished) {
+    return "#42B983";
+  }
+
+  if (targetNodeData.value.isCancelled || targetNodeData.value.isSkipped) {
+    return "#fbbf24";
+  }
+
+  if (targetNodeData.value.isRunning || isAnimating.value) {
+    return "#2563eb";
+  }
+
+  return "#6b7280";
+});
+
+// @ts-expect-error
+const path = computed(() => getSmoothStepPath(props));
+
+watch(isCancelled, isCancelled => {
+  if (isCancelled) {
+    reset();
+  }
+});
+
+watch(isAnimating, isAnimating => {
+  const edge = findEdge(props.id);
+
+  if (edge) {
+    edge.data = {
+      ...edge.data,
+      isAnimating
+    };
+  }
+});
+
+watch(edgePoint, point => {
+  const pathEl = edgeRef.value?.pathEl;
+
+  if (!pathEl || point === 0 || !isAnimating.value) {
+    return;
+  }
+
+  const nextLength = pathEl.getTotalLength();
+
+  if (currentLength.value !== nextLength) {
+    runAnimation();
+    return;
+  }
+
+  labelPosition.value = pathEl.getPointAtLength(point);
+});
+
+watch(isFinished, isFinished => {
+  if (isFinished) {
+    runAnimation();
+  }
+});
+
+async function runAnimation() {
+  const pathEl = edgeRef.value?.pathEl;
+
+  if (!pathEl) {
+    return;
+  }
+
+  const totalLength = pathEl.getTotalLength();
+
+  const from = edgePoint.value || 0;
+
+  labelPosition.value = pathEl.getPointAtLength(from);
+
+  isAnimating.value = true;
+
+  if (currentLength.value !== totalLength) {
+    currentLength.value = totalLength;
+  }
+
+  await executeTransition(edgePoint, from, totalLength, {
+    transition: TransitionPresets.easeInOutCubic,
+    duration: Math.max(1500, totalLength / 2),
+    abort: () => !isAnimating.value
+  });
+
+  reset();
+}
+
+function reset() {
+  nextTick(() => {
+    edgePoint.value = 0;
+    currentLength.value = 0;
+    labelPosition.value = { x: 0, y: 0 };
+    isAnimating.value = false;
+  });
+}
+</script>
+
+<template>
+  <BaseEdge
+    :id="id"
+    ref="edgeRef"
+    :path="path[0]"
+    :style="{ stroke: edgeColor }"
+  />
+
+  <EdgeLabelRenderer v-if="isAnimating">
+    <div
+      :style="{
+        transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)`
+      }"
+      class="nodrag nopan animated-edge-label"
+    >
+      <span class="truck">
+        <span class="box">📦</span>
+        🚚
+      </span>
+    </div>
+  </EdgeLabelRenderer>
+</template>
+
+<style scoped>
+.animated-edge-label {
+  position: absolute;
+  z-index: 100;
+}
+
+.truck {
+  position: relative;
+  display: inline-block;
+  transform: scaleX(-1);
+}
+
+.box {
+  position: absolute;
+  top: -10px;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/icon.vue b/Yi.Pure.Vue3/src/views/vue-flow/layouting/icon.vue
new file mode 100644
index 00000000..5e8c0595
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/icon.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <svg
+    v-if="name === 'play'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8 5v14l11-7z" fill="currentColor" />
+  </svg>
+
+  <svg
+    v-else-if="name === 'stop'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M8 16h8V8H8zm4 6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'horizontal'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2,12 L22,12" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M7,7 L2,12 L7,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+    <path
+      d="M17,7 L22,12 L17,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'vertical'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12,2 L12,22" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M7,7 L12,2 L17,7"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+    <path
+      d="M7,17 L12,22 L17,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'shuffle'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M14 20v-2h2.6l-3.175-3.175L14.85 13.4L18 16.55V14h2v6zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4zm3.775-9.425L4 5.4L5.4 4l5.175 5.175z"
+    />
+  </svg>
+</template>
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/index.vue b/Yi.Pure.Vue3/src/views/vue-flow/layouting/index.vue
new file mode 100644
index 00000000..a88f213a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/index.vue
@@ -0,0 +1,212 @@
+<script lang="ts" setup>
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import Icon from "./icon.vue";
+import { nextTick, ref } from "vue";
+import { useLayout } from "./useLayout";
+import { useShuffle } from "./useShuffle";
+import ProcessNode from "./processNode.vue";
+import { useRunProcess } from "./useRunProcess";
+import AnimationEdge from "./animationEdge.vue";
+import { Background } from "@vue-flow/background";
+import { Panel, VueFlow, useVueFlow } from "@vue-flow/core";
+import { initialEdges, initialNodes } from "./initialElements";
+
+const nodes = ref(initialNodes);
+
+const edges = ref(initialEdges);
+
+const cancelOnError = ref(true);
+
+const shuffle = useShuffle();
+
+const { graph, layout, previousDirection } = useLayout();
+
+// @ts-expect-error
+const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError });
+
+const { fitView } = useVueFlow();
+
+async function shuffleGraph() {
+  await stop();
+
+  reset(nodes.value);
+
+  edges.value = shuffle(nodes.value);
+
+  nextTick(() => {
+    layoutGraph(previousDirection.value);
+  });
+}
+
+async function layoutGraph(direction) {
+  await stop();
+
+  reset(nodes.value);
+
+  nodes.value = layout(nodes.value, edges.value, direction);
+
+  nextTick(() => {
+    fitView();
+    run(nodes.value);
+  });
+}
+</script>
+
+<template>
+  <div class="layout-flow">
+    <VueFlow
+      :nodes="nodes"
+      :edges="edges"
+      @nodes-initialized="layoutGraph('LR')"
+    >
+      <template #node-process="props">
+        <ProcessNode
+          :data="props.data"
+          :source-position="props.sourcePosition"
+          :target-position="props.targetPosition"
+        />
+      </template>
+
+      <template #edge-animation="edgeProps">
+        <AnimationEdge
+          :id="edgeProps.id"
+          :source="edgeProps.source"
+          :target="edgeProps.target"
+          :source-x="edgeProps.sourceX"
+          :source-y="edgeProps.sourceY"
+          :targetX="edgeProps.targetX"
+          :targetY="edgeProps.targetY"
+          :source-position="edgeProps.sourcePosition"
+          :target-position="edgeProps.targetPosition"
+        />
+      </template>
+
+      <Background />
+
+      <Panel class="process-panel" position="top-left">
+        <div class="layout-panel">
+          <button v-if="isRunning" class="stop-btn" title="stop" @click="stop">
+            <Icon name="stop" />
+            <span class="spinner" />
+          </button>
+          <button v-else title="start" @click="run(nodes)">
+            <Icon name="play" />
+          </button>
+
+          <button title="set horizontal layout" @click="layoutGraph('LR')">
+            <Icon name="horizontal" />
+          </button>
+
+          <button title="set vertical layout" @click="layoutGraph('TB')">
+            <Icon name="vertical" />
+          </button>
+
+          <button title="shuffle graph" @click="shuffleGraph">
+            <Icon name="shuffle" />
+          </button>
+        </div>
+
+        <!-- <div class="checkbox-panel">
+          <label>Cancel on error</label>
+          <input v-model="cancelOnError" type="checkbox" />
+        </div> -->
+      </Panel>
+    </VueFlow>
+  </div>
+</template>
+
+<style scoped>
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+*,
+::before,
+::after {
+  box-sizing: content-box;
+}
+
+.main-content {
+  margin: 0 !important;
+}
+
+.layout-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.process-panel,
+.layout-panel {
+  display: flex;
+  gap: 10px;
+}
+
+.process-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  background-color: #2d3748;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+}
+
+.process-panel button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: 16px;
+  color: white;
+  cursor: pointer;
+  background-color: #4a5568;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+}
+
+/* .checkbox-panel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+} */
+
+.process-panel button:hover,
+.layout-panel button:hover {
+  background-color: #2563eb;
+  transition: background-color 0.2s;
+}
+
+.process-panel label {
+  font-size: 12px;
+  color: white;
+}
+
+.stop-btn svg {
+  display: none;
+}
+
+.stop-btn:hover svg {
+  display: block;
+}
+
+.stop-btn:hover .spinner {
+  display: none;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/initialElements.ts b/Yi.Pure.Vue3/src/views/vue-flow/layouting/initialElements.ts
new file mode 100644
index 00000000..caf92710
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/initialElements.ts
@@ -0,0 +1,76 @@
+import type { Edge, Node } from "@vue-flow/core";
+
+const position = { x: 0, y: 0 };
+const nodeType = "process";
+const edgeType = "animation";
+
+export const initialNodes: Node[] = [
+  {
+    id: "1",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2a",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2b",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2c",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2d",
+    position,
+    type: nodeType
+  },
+  {
+    id: "3",
+    position,
+    type: nodeType
+  },
+  {
+    id: "4",
+    position,
+    type: nodeType
+  },
+  {
+    id: "5",
+    position,
+    type: nodeType
+  },
+  {
+    id: "6",
+    position,
+    type: nodeType
+  },
+  {
+    id: "7",
+    position,
+    type: nodeType
+  }
+];
+
+export const initialEdges: Edge[] = [
+  { id: "e1-2", source: "1", target: "2", type: edgeType, animated: true },
+  { id: "e1-3", source: "1", target: "3", type: edgeType, animated: true },
+  { id: "e2-2a", source: "2", target: "2a", type: edgeType, animated: true },
+  { id: "e2-2b", source: "2", target: "2b", type: edgeType, animated: true },
+  { id: "e2-2c", source: "2", target: "2c", type: edgeType, animated: true },
+  { id: "e2c-2d", source: "2c", target: "2d", type: edgeType, animated: true },
+  { id: "e3-7", source: "3", target: "4", type: edgeType, animated: true },
+  { id: "e4-5", source: "4", target: "5", type: edgeType, animated: true },
+  { id: "e5-6", source: "5", target: "6", type: edgeType, animated: true },
+  { id: "e5-7", source: "5", target: "7", type: edgeType, animated: true }
+];
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/processNode.vue b/Yi.Pure.Vue3/src/views/vue-flow/layouting/processNode.vue
new file mode 100644
index 00000000..425952a8
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/processNode.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { toRef } from "vue";
+import { Handle, useHandleConnections } from "@vue-flow/core";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  sourcePosition: {
+    type: String
+  },
+  targetPosition: {
+    type: String
+  }
+});
+
+const sourceConnections = useHandleConnections({
+  type: "target"
+});
+
+const targetConnections = useHandleConnections({
+  type: "source"
+});
+
+const isSender = toRef(() => sourceConnections.value.length <= 0);
+
+const isReceiver = toRef(() => targetConnections.value.length <= 0);
+
+const bgColor = toRef(() => {
+  if (isSender.value) {
+    return "#2563eb";
+  }
+
+  if (props.data.hasError) {
+    return "#f87171";
+  }
+
+  if (props.data.isFinished) {
+    return "#42B983";
+  }
+
+  if (props.data.isCancelled) {
+    return "#fbbf24";
+  }
+
+  return "#4b5563";
+});
+
+const processLabel = toRef(() => {
+  if (props.data.hasError) {
+    return "❌";
+  }
+
+  if (props.data.isSkipped) {
+    return "🚧";
+  }
+
+  if (props.data.isCancelled) {
+    return "🚫";
+  }
+
+  if (isSender.value) {
+    return "📦";
+  }
+
+  if (props.data.isFinished) {
+    return "😎";
+  }
+
+  return "🏠";
+});
+</script>
+
+<template>
+  <div
+    class="process-node"
+    :style="{
+      backgroundColor: bgColor,
+      boxShadow: data.isRunning ? '0 0 10px rgba(0, 0, 0, 0.5)' : ''
+    }"
+  >
+    <Handle v-if="!isSender" type="target" :position="targetPosition as any">
+      <span
+        v-if="
+          !data.isRunning &&
+          !data.isFinished &&
+          !data.isCancelled &&
+          !data.isSkipped &&
+          !data.hasError
+        "
+        >📥
+      </span>
+    </Handle>
+    <Handle
+      v-if="!isReceiver"
+      type="source"
+      :position="sourcePosition as any"
+    />
+
+    <div v-if="!isSender && data.isRunning" class="spinner" />
+    <span v-else>
+      {{ processLabel }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.process-node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 10px;
+  border-radius: 99px;
+}
+
+.process-node .vue-flow__handle {
+  width: unset;
+  height: unset;
+  font-size: 12px;
+  background: transparent;
+  border: none;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #f3f3f3;
+  border-top: 1px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/useLayout.ts b/Yi.Pure.Vue3/src/views/vue-flow/layouting/useLayout.ts
new file mode 100644
index 00000000..93483a5a
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/useLayout.ts
@@ -0,0 +1,52 @@
+import dagre from "dagre";
+import { ref } from "vue";
+import { Position, useVueFlow } from "@vue-flow/core";
+
+export function useLayout() {
+  const { findNode } = useVueFlow();
+
+  const graph = ref(new dagre.graphlib.Graph());
+
+  const previousDirection = ref("LR");
+
+  function layout(nodes, edges, direction) {
+    const dagreGraph = new dagre.graphlib.Graph();
+
+    graph.value = dagreGraph;
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    const isHorizontal = direction === "LR";
+    dagreGraph.setGraph({ rankdir: direction });
+
+    previousDirection.value = direction;
+
+    for (const node of nodes) {
+      const graphNode = findNode(node.id);
+
+      dagreGraph.setNode(node.id, {
+        width: graphNode.dimensions.width || 150,
+        height: graphNode.dimensions.height || 50
+      });
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+
+    dagre.layout(dagreGraph);
+
+    return nodes.map(node => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y }
+      };
+    });
+  }
+
+  return { graph, layout, previousDirection };
+}
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/useRunProcess.ts b/Yi.Pure.Vue3/src/views/vue-flow/layouting/useRunProcess.ts
new file mode 100644
index 00000000..9b074e7c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/useRunProcess.ts
@@ -0,0 +1,181 @@
+import { ref, toRef, toValue } from "vue";
+import { useVueFlow } from "@vue-flow/core";
+
+export function useRunProcess({ graph: dagreGraph, cancelOnError = true }) {
+  const { updateNodeData, getConnectedEdges } = useVueFlow();
+
+  const graph = toRef(() => toValue(dagreGraph));
+
+  const isRunning = ref(false);
+
+  const executedNodes = new Set();
+
+  const runningTasks = new Map();
+
+  const upcomingTasks = new Set();
+
+  async function runNode(node, isStart = false) {
+    if (executedNodes.has(node.id)) {
+      return;
+    }
+
+    upcomingTasks.add(node.id);
+
+    const incomers = getConnectedEdges(node.id).filter(
+      connection => connection.target === node.id
+    );
+
+    await Promise.all(
+      incomers.map(incomer => until(() => !incomer.data.isAnimating))
+    );
+
+    upcomingTasks.clear();
+
+    if (!isRunning.value) {
+      return;
+    }
+
+    executedNodes.add(node.id);
+
+    updateNodeData(node.id, {
+      isRunning: true,
+      isFinished: false,
+      hasError: false,
+      isCancelled: false
+    });
+
+    const delay = Math.floor(Math.random() * 2000) + 1000;
+
+    return new Promise(resolve => {
+      const timeout = setTimeout(
+        async () => {
+          const children = graph.value.successors(node.id);
+
+          const willThrowError = Math.random() < 0.15;
+
+          if (!isStart && willThrowError) {
+            updateNodeData(node.id, { isRunning: false, hasError: true });
+
+            if (toValue(cancelOnError)) {
+              await skipDescendants(node.id);
+              runningTasks.delete(node.id);
+
+              // @ts-expect-error
+              resolve();
+              return;
+            }
+          }
+
+          updateNodeData(node.id, { isRunning: false, isFinished: true });
+
+          runningTasks.delete(node.id);
+
+          if (children.length > 0) {
+            await Promise.all(children.map(id => runNode({ id })));
+          }
+
+          // @ts-expect-error
+          resolve();
+        },
+        isStart ? 0 : delay
+      );
+
+      runningTasks.set(node.id, timeout);
+    });
+  }
+
+  async function run(nodes) {
+    if (isRunning.value) {
+      return;
+    }
+
+    reset(nodes);
+
+    isRunning.value = true;
+
+    const startingNodes = nodes.filter(
+      node => graph.value.predecessors(node.id)?.length === 0
+    );
+
+    await Promise.all(startingNodes.map(node => runNode(node, true)));
+
+    clear();
+  }
+
+  function reset(nodes) {
+    clear();
+
+    for (const node of nodes) {
+      updateNodeData(node.id, {
+        isRunning: false,
+        isFinished: false,
+        hasError: false,
+        isSkipped: false,
+        isCancelled: false
+      });
+    }
+  }
+
+  async function skipDescendants(nodeId) {
+    const children = graph.value.successors(nodeId);
+
+    for (const child of children) {
+      updateNodeData(child, { isRunning: false, isSkipped: true });
+      await skipDescendants(child);
+    }
+  }
+
+  async function stop() {
+    isRunning.value = false;
+
+    for (const nodeId of upcomingTasks) {
+      clearTimeout(runningTasks.get(nodeId));
+      runningTasks.delete(nodeId);
+      // @ts-expect-error
+      updateNodeData(nodeId, {
+        isRunning: false,
+        isFinished: false,
+        hasError: false,
+        isSkipped: false,
+        isCancelled: true
+      });
+      await skipDescendants(nodeId);
+    }
+
+    for (const [nodeId, task] of runningTasks) {
+      clearTimeout(task);
+      runningTasks.delete(nodeId);
+      updateNodeData(nodeId, {
+        isRunning: false,
+        isFinished: false,
+        hasError: false,
+        isSkipped: false,
+        isCancelled: true
+      });
+      await skipDescendants(nodeId);
+    }
+
+    executedNodes.clear();
+    upcomingTasks.clear();
+  }
+
+  function clear() {
+    isRunning.value = false;
+    executedNodes.clear();
+    runningTasks.clear();
+  }
+
+  return { run, stop, reset, isRunning };
+}
+
+async function until(condition) {
+  return new Promise(resolve => {
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval);
+        // @ts-expect-error
+        resolve();
+      }
+    }, 100);
+  });
+}
diff --git a/Yi.Pure.Vue3/src/views/vue-flow/layouting/useShuffle.ts b/Yi.Pure.Vue3/src/views/vue-flow/layouting/useShuffle.ts
new file mode 100644
index 00000000..d2505080
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/vue-flow/layouting/useShuffle.ts
@@ -0,0 +1,50 @@
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+function generatePossibleEdges(nodes) {
+  const possibleEdges = [];
+
+  for (const sourceNode of nodes) {
+    for (const targetNode of nodes) {
+      if (sourceNode.id !== targetNode.id) {
+        const edgeId = `e${sourceNode.id}-${targetNode.id}`;
+        possibleEdges.push({
+          id: edgeId,
+          source: sourceNode.id,
+          target: targetNode.id,
+          type: "animation",
+          animated: true
+        });
+      }
+    }
+  }
+
+  return possibleEdges;
+}
+
+export function useShuffle() {
+  return nodes => {
+    const possibleEdges = generatePossibleEdges(nodes);
+    shuffleArray(possibleEdges);
+
+    const usedNodes = new Set();
+    const newEdges = [];
+
+    for (const edge of possibleEdges) {
+      if (
+        !usedNodes.has(edge.target) &&
+        (usedNodes.size === 0 || usedNodes.has(edge.source))
+      ) {
+        newEdges.push(edge);
+        usedNodes.add(edge.source);
+        usedNodes.add(edge.target);
+      }
+    }
+
+    return newEdges;
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartBar.vue b/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartBar.vue
new file mode 100644
index 00000000..6d9af159
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartBar.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useDark, useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
+
+const props = defineProps({
+  requireData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  questionData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+});
+
+const { isDark } = useDark();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+const chartRef = ref();
+const { setOptions } = useECharts(chartRef, {
+  theme
+});
+
+watch(
+  () => props,
+  async () => {
+    await nextTick(); // 确保DOM更新完成后再执行
+    setOptions({
+      container: ".bar-card",
+      color: ["#41b6ff", "#e85f33"],
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "none"
+        }
+      },
+      grid: {
+        top: "20px",
+        left: "50px",
+        right: 0
+      },
+      legend: {
+        data: ["需求人数", "提问数量"],
+        textStyle: {
+          color: "#606266",
+          fontSize: "0.875rem"
+        },
+        bottom: 0
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          axisLabel: {
+            fontSize: "0.875rem"
+          },
+          axisPointer: {
+            type: "shadow"
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisLabel: {
+            fontSize: "0.875rem"
+          },
+          splitLine: {
+            show: false // 去网格线
+          }
+          // name: "单位: 个"
+        }
+      ],
+      series: [
+        {
+          name: "需求人数",
+          type: "bar",
+          barWidth: 10,
+          itemStyle: {
+            color: "#41b6ff",
+            borderRadius: [10, 10, 0, 0]
+          },
+          data: props.requireData
+        },
+        {
+          name: "提问数量",
+          type: "bar",
+          barWidth: 10,
+          itemStyle: {
+            color: "#e86033ce",
+            borderRadius: [10, 10, 0, 0]
+          },
+          data: props.questionData
+        }
+      ]
+    });
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div ref="chartRef" style="width: 100%; height: 365px" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartLine.vue b/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartLine.vue
new file mode 100644
index 00000000..fa72ec19
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartLine.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { type PropType, ref, computed } from "vue";
+import { useDark, useECharts } from "@pureadmin/utils";
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  color: {
+    type: String,
+    default: "#41b6ff"
+  }
+});
+
+const { isDark } = useDark();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+const chartRef = ref();
+const { setOptions } = useECharts(chartRef, {
+  theme,
+  renderer: "svg"
+});
+
+setOptions({
+  container: ".line-card",
+  xAxis: {
+    type: "category",
+    show: false,
+    data: props.data
+  },
+  grid: {
+    top: "15px",
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  yAxis: {
+    show: false,
+    type: "value"
+  },
+  series: [
+    {
+      data: props.data,
+      type: "line",
+      symbol: "none",
+      smooth: true,
+      color: props.color,
+      lineStyle: {
+        shadowOffsetY: 3,
+        shadowBlur: 7,
+        shadowColor: props.color
+      }
+    }
+  ]
+});
+</script>
+
+<template>
+  <div ref="chartRef" style="width: 100%; height: 60px" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartRound.vue b/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartRound.vue
new file mode 100644
index 00000000..769f2b23
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/components/charts/ChartRound.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useDark, useECharts } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+const chartRef = ref();
+const { setOptions } = useECharts(chartRef, {
+  theme,
+  renderer: "svg"
+});
+
+setOptions({
+  container: ".line-card",
+  title: {
+    text: "100%",
+    left: "47%",
+    top: "30%",
+    textAlign: "center",
+    textStyle: {
+      fontSize: "16",
+      fontWeight: 600
+    }
+  },
+  polar: {
+    radius: ["100%", "90%"],
+    center: ["50%", "50%"]
+  },
+  angleAxis: {
+    max: 100,
+    show: false
+  },
+  radiusAxis: {
+    type: "category",
+    show: true,
+    axisLabel: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  series: [
+    {
+      type: "bar",
+      roundCap: true,
+      barWidth: 2,
+      showBackground: true,
+      backgroundStyle: {
+        color: "#dfe7ef"
+      },
+      data: [100],
+      coordinateSystem: "polar",
+      color: "#7846e5",
+      itemStyle: {
+        shadowBlur: 2,
+        shadowColor: "#7846e5",
+        shadowOffsetX: 0,
+        shadowOffsetY: 0
+      }
+    }
+  ]
+});
+</script>
+
+<template>
+  <div ref="chartRef" style="width: 100%; height: 60px" />
+</template>
diff --git a/Yi.Pure.Vue3/src/views/welcome/components/charts/index.ts b/Yi.Pure.Vue3/src/views/welcome/components/charts/index.ts
new file mode 100644
index 00000000..fa554485
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/components/charts/index.ts
@@ -0,0 +1,3 @@
+export { default as ChartBar } from "./ChartBar.vue";
+export { default as ChartLine } from "./ChartLine.vue";
+export { default as ChartRound } from "./ChartRound.vue";
diff --git a/Yi.Pure.Vue3/src/views/welcome/components/table/columns.tsx b/Yi.Pure.Vue3/src/views/welcome/components/table/columns.tsx
new file mode 100644
index 00000000..c6d0b8e0
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/components/table/columns.tsx
@@ -0,0 +1,104 @@
+import { tableData } from "../../data";
+import { delay } from "@pureadmin/utils";
+import { ref, onMounted, reactive } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+import ThumbUp from "@iconify-icons/ri/thumb-up-line";
+import Hearts from "@iconify-icons/ri/hearts-line";
+import Empty from "./empty.svg?component";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const columns: TableColumnList = [
+    {
+      sortable: true,
+      label: "序号",
+      prop: "id"
+    },
+    {
+      sortable: true,
+      label: "需求人数",
+      prop: "requiredNumber",
+      filterMultiple: false,
+      filterClassName: "pure-table-filter",
+      filters: [
+        { text: "≥16000", value: "more" },
+        { text: "<16000", value: "less" }
+      ],
+      filterMethod: (value, { requiredNumber }) => {
+        return value === "more"
+          ? requiredNumber >= 16000
+          : requiredNumber < 16000;
+      }
+    },
+    {
+      sortable: true,
+      label: "提问数量",
+      prop: "questionNumber"
+    },
+    {
+      sortable: true,
+      label: "解决数量",
+      prop: "resolveNumber"
+    },
+    {
+      sortable: true,
+      label: "用户满意度",
+      minWidth: 100,
+      prop: "satisfaction",
+      cellRenderer: ({ row }) => (
+        <div class="flex justify-center w-full">
+          <span class="flex items-center w-[60px]">
+            <span class="ml-auto mr-2">{row.satisfaction}%</span>
+            <iconifyIconOffline
+              icon={row.satisfaction > 98 ? Hearts : ThumbUp}
+              color="#e85f33"
+            />
+          </span>
+        </div>
+      )
+    },
+    {
+      sortable: true,
+      label: "统计日期",
+      prop: "date"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 10,
+    currentPage: 1,
+    layout: "prev, pager, next",
+    total: 0,
+    align: "center"
+  });
+
+  function onCurrentChange(page: number) {
+    console.log("onCurrentChange", page);
+    loading.value = true;
+    delay(300).then(() => {
+      loading.value = false;
+    });
+  }
+
+  onMounted(() => {
+    dataList.value = tableData;
+    pagination.total = dataList.value.length;
+    loading.value = false;
+  });
+
+  return {
+    Empty,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onCurrentChange
+  };
+}
diff --git a/Yi.Pure.Vue3/src/views/welcome/components/table/empty.svg b/Yi.Pure.Vue3/src/views/welcome/components/table/empty.svg
new file mode 100644
index 00000000..5c8b211c
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/components/table/empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="empty-icon" viewBox="0 0 1024 1024"><path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18M673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4zm146.5-486.1c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8m-444.5 51.6L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4M512 239.3h2.5c19.5.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1z"/></svg>
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/src/views/welcome/components/table/index.vue b/Yi.Pure.Vue3/src/views/welcome/components/table/index.vue
new file mode 100644
index 00000000..ab8c1799
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/components/table/index.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+const { loading, columns, dataList, pagination, Empty, onCurrentChange } =
+  useColumns();
+</script>
+
+<template>
+  <pure-table
+    row-key="id"
+    alignWhole="center"
+    showOverflowTooltip
+    :loading="loading"
+    :loading-config="{ background: 'transparent' }"
+    :data="
+      dataList.slice(
+        (pagination.currentPage - 1) * pagination.pageSize,
+        pagination.currentPage * pagination.pageSize
+      )
+    "
+    :columns="columns"
+    :pagination="pagination"
+    @page-current-change="onCurrentChange"
+  >
+    <template #empty>
+      <el-empty description="暂无数据" :image-size="60">
+        <template #image>
+          <Empty />
+        </template>
+      </el-empty>
+    </template>
+    <template #operation="{ row }">
+      <el-button
+        plain
+        circle
+        size="small"
+        :title="`查看序号为${row.id}的详情`"
+        :icon="useRenderIcon('ri:search-line')"
+      />
+    </template>
+  </pure-table>
+</template>
+
+<style lang="scss">
+.pure-table-filter {
+  .el-table-filter__list {
+    min-width: 80px;
+    padding: 0;
+
+    li {
+      line-height: 28px;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.el-table) {
+  --el-table-border: none;
+  --el-table-border-color: transparent;
+
+  .el-empty__description {
+    margin: 0;
+  }
+
+  .el-scrollbar__bar {
+    display: none;
+  }
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/welcome/data.ts b/Yi.Pure.Vue3/src/views/welcome/data.ts
new file mode 100644
index 00000000..3bb50211
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/data.ts
@@ -0,0 +1,134 @@
+import { dayjs, cloneDeep, getRandomIntBetween } from "./utils";
+import GroupLine from "@iconify-icons/ri/group-line";
+import Question from "@iconify-icons/ri/question-answer-line";
+import CheckLine from "@iconify-icons/ri/chat-check-line";
+import Smile from "@iconify-icons/ri/star-smile-line";
+
+const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+
+/** 需求人数、提问数量、解决数量、用户满意度 */
+const chartData = [
+  {
+    icon: GroupLine,
+    bgColor: "#effaff",
+    color: "#41b6ff",
+    duration: 2200,
+    name: "需求人数",
+    value: 36000,
+    percent: "+88%",
+    data: [2101, 5288, 4239, 4962, 6752, 5208, 7450] // 平滑折线图数据
+  },
+  {
+    icon: Question,
+    bgColor: "#fff5f4",
+    color: "#e85f33",
+    duration: 1600,
+    name: "提问数量",
+    value: 16580,
+    percent: "+70%",
+    data: [2216, 1148, 1255, 788, 4821, 1973, 4379]
+  },
+  {
+    icon: CheckLine,
+    bgColor: "#eff8f4",
+    color: "#26ce83",
+    duration: 1500,
+    name: "解决数量",
+    value: 16499,
+    percent: "+99%",
+    data: [861, 1002, 3195, 1715, 3666, 2415, 3645]
+  },
+  {
+    icon: Smile,
+    bgColor: "#f6f4fe",
+    color: "#7846e5",
+    duration: 100,
+    name: "用户满意度",
+    value: 100,
+    percent: "+100%",
+    data: [100]
+  }
+];
+
+/** 分析概览 */
+const barChartData = [
+  {
+    requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
+    questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
+  },
+  {
+    requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600],
+    questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
+  }
+];
+
+/** 解决概率 */
+const progressData = [
+  {
+    week: "周一",
+    percentage: 85,
+    duration: 110,
+    color: "#41b6ff"
+  },
+  {
+    week: "周二",
+    percentage: 86,
+    duration: 105,
+    color: "#41b6ff"
+  },
+  {
+    week: "周三",
+    percentage: 88,
+    duration: 100,
+    color: "#41b6ff"
+  },
+  {
+    week: "周四",
+    percentage: 89,
+    duration: 95,
+    color: "#41b6ff"
+  },
+  {
+    week: "周五",
+    percentage: 94,
+    duration: 90,
+    color: "#26ce83"
+  },
+  {
+    week: "周六",
+    percentage: 96,
+    duration: 85,
+    color: "#26ce83"
+  },
+  {
+    week: "周日",
+    percentage: 100,
+    duration: 80,
+    color: "#26ce83"
+  }
+].reverse();
+
+/** 数据统计 */
+const tableData = Array.from({ length: 30 }).map((_, index) => {
+  return {
+    id: index + 1,
+    requiredNumber: getRandomIntBetween(13500, 19999),
+    questionNumber: getRandomIntBetween(12600, 16999),
+    resolveNumber: getRandomIntBetween(13500, 17999),
+    satisfaction: getRandomIntBetween(95, 100),
+    date: dayjs().subtract(index, "day").format("YYYY-MM-DD")
+  };
+});
+
+/** 最新动态 */
+const latestNewsData = cloneDeep(tableData)
+  .slice(0, 14)
+  .map((item, index) => {
+    return Object.assign(item, {
+      date: `${dayjs().subtract(index, "day").format("YYYY-MM-DD")} ${
+        days[dayjs().subtract(index, "day").day()]
+      }`
+    });
+  });
+
+export { chartData, barChartData, progressData, tableData, latestNewsData };
diff --git a/Yi.Pure.Vue3/src/views/welcome/index.vue b/Yi.Pure.Vue3/src/views/welcome/index.vue
new file mode 100644
index 00000000..260ec73d
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/index.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { ref, markRaw } from "vue";
+import ReCol from "@/components/ReCol";
+import { useDark, randomGradient } from "./utils";
+import WelcomeTable from "./components/table/index.vue";
+import { ReNormalCountTo } from "@/components/ReCountTo";
+import { useRenderFlicker } from "@/components/ReFlicker";
+import { ChartBar, ChartLine, ChartRound } from "./components/charts";
+import Segmented, { type OptionsType } from "@/components/ReSegmented";
+import { chartData, barChartData, progressData, latestNewsData } from "./data";
+
+defineOptions({
+  name: "Welcome"
+});
+
+const { isDark } = useDark();
+
+let curWeek = ref(1); // 0上周、1本周
+const optionsBasis: Array<OptionsType> = [
+  {
+    label: "上周"
+  },
+  {
+    label: "本周"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-row :gutter="24" justify="space-around">
+      <re-col
+        v-for="(item, index) in chartData"
+        :key="index"
+        v-motion
+        class="mb-[18px]"
+        :value="6"
+        :md="12"
+        :sm="12"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 80 * (index + 1)
+          }
+        }"
+      >
+        <el-card class="line-card" shadow="never">
+          <div class="flex justify-between">
+            <span class="text-md font-medium">
+              {{ item.name }}
+            </span>
+            <div
+              class="w-8 h-8 flex justify-center items-center rounded-md"
+              :style="{
+                backgroundColor: isDark ? 'transparent' : item.bgColor
+              }"
+            >
+              <IconifyIconOffline
+                :icon="item.icon"
+                :color="item.color"
+                width="18"
+              />
+            </div>
+          </div>
+          <div class="flex justify-between items-start mt-3">
+            <div class="w-1/2">
+              <ReNormalCountTo
+                :duration="item.duration"
+                :fontSize="'1.6em'"
+                :startVal="100"
+                :endVal="item.value"
+              />
+              <p class="font-medium text-green-500">{{ item.percent }}</p>
+            </div>
+            <ChartLine
+              v-if="item.data.length > 1"
+              class="!w-1/2"
+              :color="item.color"
+              :data="item.data"
+            />
+            <ChartRound v-else class="!w-1/2" />
+          </div>
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[18px]"
+        :value="18"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 400
+          }
+        }"
+      >
+        <el-card class="bar-card" shadow="never">
+          <div class="flex justify-between">
+            <span class="text-md font-medium">分析概览</span>
+            <Segmented v-model="curWeek" :options="optionsBasis" />
+          </div>
+          <div class="flex justify-between items-start mt-3">
+            <ChartBar
+              :requireData="barChartData[curWeek].requireData"
+              :questionData="barChartData[curWeek].questionData"
+            />
+          </div>
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[18px]"
+        :value="6"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 480
+          }
+        }"
+      >
+        <el-card shadow="never">
+          <div class="flex justify-between">
+            <span class="text-md font-medium">解决概率</span>
+          </div>
+          <div
+            v-for="(item, index) in progressData"
+            :key="index"
+            :class="[
+              'flex',
+              'justify-between',
+              'items-start',
+              index === 0 ? 'mt-8' : 'mt-[2.15rem]'
+            ]"
+          >
+            <el-progress
+              :text-inside="true"
+              :percentage="item.percentage"
+              :stroke-width="21"
+              :color="item.color"
+              striped
+              striped-flow
+              :duration="item.duration"
+            />
+            <span class="text-nowrap ml-2 text-text_color_regular text-sm">
+              {{ item.week }}
+            </span>
+          </div>
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[18px]"
+        :value="18"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 560
+          }
+        }"
+      >
+        <el-card shadow="never" class="h-[580px]">
+          <div class="flex justify-between">
+            <span class="text-md font-medium">数据统计</span>
+          </div>
+          <WelcomeTable class="mt-3" />
+        </el-card>
+      </re-col>
+
+      <re-col
+        v-motion
+        class="mb-[18px]"
+        :value="6"
+        :xs="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 640
+          }
+        }"
+      >
+        <el-card shadow="never">
+          <div class="flex justify-between">
+            <span class="text-md font-medium">最新动态</span>
+          </div>
+          <el-scrollbar max-height="504" class="mt-3">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(item, index) in latestNewsData"
+                :key="index"
+                center
+                placement="top"
+                :icon="
+                  markRaw(
+                    useRenderFlicker({
+                      background: randomGradient({
+                        randomizeHue: true
+                      })
+                    })
+                  )
+                "
+                :timestamp="item.date"
+              >
+                <p class="text-text_color_regular text-sm">
+                  {{
+                    `新增 ${item.requiredNumber} 条问题，${item.resolveNumber} 条已解决`
+                  }}
+                </p>
+              </el-timeline-item>
+            </el-timeline>
+          </el-scrollbar>
+        </el-card>
+      </re-col>
+    </el-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-card) {
+  --el-card-border-color: none;
+
+  /* 解决概率进度条宽度 */
+  .el-progress--line {
+    width: 85%;
+  }
+
+  /* 解决概率进度条字体大小 */
+  .el-progress-bar__innerText {
+    font-size: 15px;
+  }
+
+  /* 隐藏 el-scrollbar 滚动条 */
+  .el-scrollbar__bar {
+    display: none;
+  }
+
+  /* el-timeline 每一项上下、左右边距 */
+  .el-timeline-item {
+    margin: 0 6px;
+  }
+}
+
+.main-content {
+  margin: 20px 20px 0 !important;
+}
+</style>
diff --git a/Yi.Pure.Vue3/src/views/welcome/utils.ts b/Yi.Pure.Vue3/src/views/welcome/utils.ts
new file mode 100644
index 00000000..7708a7e2
--- /dev/null
+++ b/Yi.Pure.Vue3/src/views/welcome/utils.ts
@@ -0,0 +1,6 @@
+export { default as dayjs } from "dayjs";
+export { useDark, cloneDeep, randomGradient } from "@pureadmin/utils";
+
+export function getRandomIntBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
diff --git a/Yi.Pure.Vue3/stylelint.config.js b/Yi.Pure.Vue3/stylelint.config.js
new file mode 100644
index 00000000..2417ddfc
--- /dev/null
+++ b/Yi.Pure.Vue3/stylelint.config.js
@@ -0,0 +1,87 @@
+// @ts-check
+
+/** @type {import("stylelint").Config} */
+export default {
+  extends: [
+    "stylelint-config-standard",
+    "stylelint-config-html/vue",
+    "stylelint-config-recess-order"
+  ],
+  plugins: ["stylelint-scss", "stylelint-order", "stylelint-prettier"],
+  overrides: [
+    {
+      files: ["**/*.(css|html|vue)"],
+      customSyntax: "postcss-html"
+    },
+    {
+      files: ["*.scss", "**/*.scss"],
+      customSyntax: "postcss-scss",
+      extends: [
+        "stylelint-config-standard-scss",
+        "stylelint-config-recommended-vue/scss"
+      ]
+    }
+  ],
+  rules: {
+    "prettier/prettier": true,
+    "selector-class-pattern": null,
+    "no-descending-specificity": null,
+    "scss/dollar-variable-pattern": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["deep", "global"]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
+      }
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+          "function",
+          "if",
+          "each",
+          "include",
+          "mixin",
+          "use"
+        ]
+      }
+    ],
+    "rule-empty-line-before": [
+      "always",
+      {
+        ignore: ["after-comment", "first-nested"]
+      }
+    ],
+    "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
+    "order/order": [
+      [
+        "dollar-variables",
+        "custom-properties",
+        "at-rules",
+        "declarations",
+        {
+          type: "at-rule",
+          name: "supports"
+        },
+        {
+          type: "at-rule",
+          name: "media"
+        },
+        "rules"
+      ],
+      { severity: "warning" }
+    ]
+  },
+  ignoreFiles: ["**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx", "report.html"]
+};
diff --git a/Yi.Pure.Vue3/tailwind.config.ts b/Yi.Pure.Vue3/tailwind.config.ts
new file mode 100644
index 00000000..8f58f445
--- /dev/null
+++ b/Yi.Pure.Vue3/tailwind.config.ts
@@ -0,0 +1,19 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: "class",
+  corePlugins: {
+    preflight: false
+  },
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        bg_color: "var(--el-bg-color)",
+        primary: "var(--el-color-primary)",
+        text_color_primary: "var(--el-text-color-primary)",
+        text_color_regular: "var(--el-text-color-regular)"
+      }
+    }
+  }
+} satisfies Config;
diff --git a/Yi.Pure.Vue3/tsconfig.json b/Yi.Pure.Vue3/tsconfig.json
new file mode 100644
index 00000000..5dd960a4
--- /dev/null
+++ b/Yi.Pure.Vue3/tsconfig.json
@@ -0,0 +1,53 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": false,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "experimentalDecorators": true,
+    "strictFunctionTypes": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "allowJs": false,
+    "resolveJsonModule": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@build/*": [
+        "build/*"
+      ]
+    },
+    "types": [
+      "node",
+      "vite/client",
+      "element-plus/global",
+      "@pureadmin/table/volar",
+      "@pureadmin/descriptions/volar"
+    ]
+  },
+  "include": [
+    "mock/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/*.d.ts",
+    "vite.config.ts"
+  ],
+  "exclude": [
+    "dist",
+    "**/*.js",
+    "node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/Yi.Pure.Vue3/types/directives.d.ts b/Yi.Pure.Vue3/types/directives.d.ts
new file mode 100644
index 00000000..458fd097
--- /dev/null
+++ b/Yi.Pure.Vue3/types/directives.d.ts
@@ -0,0 +1,28 @@
+import type { Directive } from "vue";
+import type { CopyEl, OptimizeOptions, RippleOptions } from "@/directives";
+
+declare module "vue" {
+  export interface ComponentCustomProperties {
+    /** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */
+    vLoading: Directive<Element, boolean>;
+    /** 按钮权限指令（根据路由`meta`中的`auths`字段进行判断）*/
+    vAuth: Directive<HTMLElement, string | Array<string>>;
+    /** 文本复制指令（默认双击复制） */
+    vCopy: Directive<CopyEl, string>;
+    /** 长按指令 */
+    vLongpress: Directive<HTMLElement, Function>;
+    /** 防抖、节流指令 */
+    vOptimize: Directive<HTMLElement, OptimizeOptions>;
+    /** 按钮权限指令（根据登录接口返回的`permissions`字段进行判断）*/
+    vPerms: Directive<HTMLElement, string | Array<string>>;
+    /**
+     * `v-ripple`指令，用法如下：
+     * 1. `v-ripple`代表启用基本的`ripple`功能
+     * 2. `v-ripple="{ class: 'text-red' }"`代表自定义`ripple`颜色，支持`tailwindcss`，生效样式是`color`
+     * 3. `v-ripple.center`代表从中心扩散
+     */
+    vRipple: Directive<HTMLElement, RippleOptions>;
+  }
+}
+
+export {};
diff --git a/Yi.Pure.Vue3/types/global-components.d.ts b/Yi.Pure.Vue3/types/global-components.d.ts
new file mode 100644
index 00000000..f07958a6
--- /dev/null
+++ b/Yi.Pure.Vue3/types/global-components.d.ts
@@ -0,0 +1,134 @@
+declare module "vue" {
+  /**
+   * 自定义全局组件获得 Volar 提示（自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦）
+   */
+  export interface GlobalComponents {
+    IconifyIconOffline: (typeof import("../src/components/ReIcon"))["IconifyIconOffline"];
+    IconifyIconOnline: (typeof import("../src/components/ReIcon"))["IconifyIconOnline"];
+    FontIcon: (typeof import("../src/components/ReIcon"))["FontIcon"];
+    Auth: (typeof import("../src/components/ReAuth"))["Auth"];
+    Perms: (typeof import("../src/components/RePerms"))["Perms"];
+  }
+}
+
+/**
+ * TODO https://github.com/element-plus/element-plus/blob/dev/global.d.ts#L2
+ * No need to install @vue/runtime-core
+ */
+declare module "vue" {
+  export interface GlobalComponents {
+    ElAffix: (typeof import("element-plus"))["ElAffix"];
+    ElAlert: (typeof import("element-plus"))["ElAlert"];
+    ElAside: (typeof import("element-plus"))["ElAside"];
+    ElAutocomplete: (typeof import("element-plus"))["ElAutocomplete"];
+    ElAvatar: (typeof import("element-plus"))["ElAvatar"];
+    ElAnchor: (typeof import("element-plus"))["ElAnchor"];
+    ElAnchorLink: (typeof import("element-plus"))["ElAnchorLink"];
+    ElBacktop: (typeof import("element-plus"))["ElBacktop"];
+    ElBadge: (typeof import("element-plus"))["ElBadge"];
+    ElBreadcrumb: (typeof import("element-plus"))["ElBreadcrumb"];
+    ElBreadcrumbItem: (typeof import("element-plus"))["ElBreadcrumbItem"];
+    ElButton: (typeof import("element-plus"))["ElButton"];
+    ElButtonGroup: (typeof import("element-plus"))["ElButtonGroup"];
+    ElCalendar: (typeof import("element-plus"))["ElCalendar"];
+    ElCard: (typeof import("element-plus"))["ElCard"];
+    ElCarousel: (typeof import("element-plus"))["ElCarousel"];
+    ElCarouselItem: (typeof import("element-plus"))["ElCarouselItem"];
+    ElCascader: (typeof import("element-plus"))["ElCascader"];
+    ElCascaderPanel: (typeof import("element-plus"))["ElCascaderPanel"];
+    ElCheckbox: (typeof import("element-plus"))["ElCheckbox"];
+    ElCheckboxButton: (typeof import("element-plus"))["ElCheckboxButton"];
+    ElCheckboxGroup: (typeof import("element-plus"))["ElCheckboxGroup"];
+    ElCol: (typeof import("element-plus"))["ElCol"];
+    ElCollapse: (typeof import("element-plus"))["ElCollapse"];
+    ElCollapseItem: (typeof import("element-plus"))["ElCollapseItem"];
+    ElCollapseTransition: (typeof import("element-plus"))["ElCollapseTransition"];
+    ElColorPicker: (typeof import("element-plus"))["ElColorPicker"];
+    ElContainer: (typeof import("element-plus"))["ElContainer"];
+    ElConfigProvider: (typeof import("element-plus"))["ElConfigProvider"];
+    ElDatePicker: (typeof import("element-plus"))["ElDatePicker"];
+    ElDialog: (typeof import("element-plus"))["ElDialog"];
+    ElDivider: (typeof import("element-plus"))["ElDivider"];
+    ElDrawer: (typeof import("element-plus"))["ElDrawer"];
+    ElDropdown: (typeof import("element-plus"))["ElDropdown"];
+    ElDropdownItem: (typeof import("element-plus"))["ElDropdownItem"];
+    ElDropdownMenu: (typeof import("element-plus"))["ElDropdownMenu"];
+    ElEmpty: (typeof import("element-plus"))["ElEmpty"];
+    ElFooter: (typeof import("element-plus"))["ElFooter"];
+    ElForm: (typeof import("element-plus"))["ElForm"];
+    ElFormItem: (typeof import("element-plus"))["ElFormItem"];
+    ElHeader: (typeof import("element-plus"))["ElHeader"];
+    ElIcon: (typeof import("element-plus"))["ElIcon"];
+    ElImage: (typeof import("element-plus"))["ElImage"];
+    ElImageViewer: (typeof import("element-plus"))["ElImageViewer"];
+    ElInput: (typeof import("element-plus"))["ElInput"];
+    ElInputNumber: (typeof import("element-plus"))["ElInputNumber"];
+    ElLink: (typeof import("element-plus"))["ElLink"];
+    ElMain: (typeof import("element-plus"))["ElMain"];
+    ElMenu: (typeof import("element-plus"))["ElMenu"];
+    ElMenuItem: (typeof import("element-plus"))["ElMenuItem"];
+    ElMenuItemGroup: (typeof import("element-plus"))["ElMenuItemGroup"];
+    ElOption: (typeof import("element-plus"))["ElOption"];
+    ElOptionGroup: (typeof import("element-plus"))["ElOptionGroup"];
+    ElPageHeader: (typeof import("element-plus"))["ElPageHeader"];
+    ElPagination: (typeof import("element-plus"))["ElPagination"];
+    ElPopconfirm: (typeof import("element-plus"))["ElPopconfirm"];
+    ElPopper: (typeof import("element-plus"))["ElPopper"];
+    ElPopover: (typeof import("element-plus"))["ElPopover"];
+    ElProgress: (typeof import("element-plus"))["ElProgress"];
+    ElRadio: (typeof import("element-plus"))["ElRadio"];
+    ElRadioButton: (typeof import("element-plus"))["ElRadioButton"];
+    ElRadioGroup: (typeof import("element-plus"))["ElRadioGroup"];
+    ElRate: (typeof import("element-plus"))["ElRate"];
+    ElRow: (typeof import("element-plus"))["ElRow"];
+    ElScrollbar: (typeof import("element-plus"))["ElScrollbar"];
+    ElSelect: (typeof import("element-plus"))["ElSelect"];
+    ElSlider: (typeof import("element-plus"))["ElSlider"];
+    ElStep: (typeof import("element-plus"))["ElStep"];
+    ElSteps: (typeof import("element-plus"))["ElSteps"];
+    ElSubMenu: (typeof import("element-plus"))["ElSubMenu"];
+    ElSwitch: (typeof import("element-plus"))["ElSwitch"];
+    ElTabPane: (typeof import("element-plus"))["ElTabPane"];
+    ElTable: (typeof import("element-plus"))["ElTable"];
+    ElTableColumn: (typeof import("element-plus"))["ElTableColumn"];
+    ElTabs: (typeof import("element-plus"))["ElTabs"];
+    ElTag: (typeof import("element-plus"))["ElTag"];
+    ElText: (typeof import("element-plus"))["ElText"];
+    ElTimePicker: (typeof import("element-plus"))["ElTimePicker"];
+    ElTimeSelect: (typeof import("element-plus"))["ElTimeSelect"];
+    ElTimeline: (typeof import("element-plus"))["ElTimeline"];
+    ElTimelineItem: (typeof import("element-plus"))["ElTimelineItem"];
+    ElTooltip: (typeof import("element-plus"))["ElTooltip"];
+    ElTransfer: (typeof import("element-plus"))["ElTransfer"];
+    ElTree: (typeof import("element-plus"))["ElTree"];
+    ElTreeV2: (typeof import("element-plus"))["ElTreeV2"];
+    ElTreeSelect: (typeof import("element-plus"))["ElTreeSelect"];
+    ElUpload: (typeof import("element-plus"))["ElUpload"];
+    ElSpace: (typeof import("element-plus"))["ElSpace"];
+    ElSkeleton: (typeof import("element-plus"))["ElSkeleton"];
+    ElSkeletonItem: (typeof import("element-plus"))["ElSkeletonItem"];
+    ElStatistic: (typeof import("element-plus"))["ElStatistic"];
+    ElCheckTag: (typeof import("element-plus"))["ElCheckTag"];
+    ElDescriptions: (typeof import("element-plus"))["ElDescriptions"];
+    ElDescriptionsItem: (typeof import("element-plus"))["ElDescriptionsItem"];
+    ElResult: (typeof import("element-plus"))["ElResult"];
+    ElSelectV2: (typeof import("element-plus"))["ElSelectV2"];
+    ElWatermark: (typeof import("element-plus"))["ElWatermark"];
+    ElTour: (typeof import("element-plus"))["ElTour"];
+    ElTourStep: (typeof import("element-plus"))["ElTourStep"];
+    ElSegmented: (typeof import("element-plus"))["ElSegmented"];
+  }
+
+  interface ComponentCustomProperties {
+    $message: (typeof import("element-plus"))["ElMessage"];
+    $notify: (typeof import("element-plus"))["ElNotification"];
+    $msgbox: (typeof import("element-plus"))["ElMessageBox"];
+    $messageBox: (typeof import("element-plus"))["ElMessageBox"];
+    $alert: (typeof import("element-plus"))["ElMessageBox"]["alert"];
+    $confirm: (typeof import("element-plus"))["ElMessageBox"]["confirm"];
+    $prompt: (typeof import("element-plus"))["ElMessageBox"]["prompt"];
+    $loading: (typeof import("element-plus"))["ElLoadingService"];
+  }
+}
+
+export {};
diff --git a/Yi.Pure.Vue3/types/global.d.ts b/Yi.Pure.Vue3/types/global.d.ts
new file mode 100644
index 00000000..d0210486
--- /dev/null
+++ b/Yi.Pure.Vue3/types/global.d.ts
@@ -0,0 +1,209 @@
+import type { ECharts } from "echarts";
+import type { TableColumns } from "@pureadmin/table";
+
+/**
+ * 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
+ */
+declare global {
+  /**
+   * 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示
+   */
+  const __APP_INFO__: {
+    pkg: {
+      name: string;
+      version: string;
+      engines: {
+        node: string;
+        pnpm: string;
+      };
+      dependencies: Recordable<string>;
+      devDependencies: Recordable<string>;
+    };
+    lastBuildTime: string;
+  };
+
+  /**
+   * Window 的类型提示
+   */
+  interface Window {
+    // Global vue app instance
+    __APP__: App<Element>;
+    webkitCancelAnimationFrame: (handle: number) => void;
+    mozCancelAnimationFrame: (handle: number) => void;
+    oCancelAnimationFrame: (handle: number) => void;
+    msCancelAnimationFrame: (handle: number) => void;
+    webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+    mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+    oRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+    msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
+  }
+
+  /**
+   * Document 的类型提示
+   */
+  interface Document {
+    webkitFullscreenElement?: Element;
+    mozFullScreenElement?: Element;
+    msFullscreenElement?: Element;
+  }
+
+  /**
+   * 打包压缩格式的类型声明
+   */
+  type ViteCompression =
+    | "none"
+    | "gzip"
+    | "brotli"
+    | "both"
+    | "gzip-clear"
+    | "brotli-clear"
+    | "both-clear";
+
+  /**
+   * 全局自定义环境变量的类型声明
+   * @see {@link https://pure-admin.github.io/pure-admin-doc/pages/config/#%E5%85%B7%E4%BD%93%E9%85%8D%E7%BD%AE}
+   */
+  interface ViteEnv {
+    VITE_PORT: number;
+    VITE_PUBLIC_PATH: string;
+    VITE_ROUTER_HISTORY: string;
+    VITE_CDN: boolean;
+    VITE_HIDE_HOME: string;
+    VITE_COMPRESSION: ViteCompression;
+  }
+
+  /**
+   *  继承 `@pureadmin/table` 的 `TableColumns` ，方便全局直接调用
+   */
+  interface TableColumnList extends Array<TableColumns> {}
+
+  /**
+   * 对应 `public/platform-config.json` 文件的类型声明
+   * @see {@link https://pure-admin.github.io/pure-admin-doc/pages/config/#platform-config-json}
+   */
+  interface PlatformConfigs {
+    Version?: string;
+    Title?: string;
+    FixedHeader?: boolean;
+    HiddenSideBar?: boolean;
+    MultiTagsCache?: boolean;
+    MaxTagsLevel?: number;
+    KeepAlive?: boolean;
+    Locale?: string;
+    Layout?: string;
+    Theme?: string;
+    DarkMode?: boolean;
+    OverallStyle?: string;
+    Grey?: boolean;
+    Weak?: boolean;
+    HideTabs?: boolean;
+    HideFooter?: boolean;
+    Stretch?: boolean | number;
+    SidebarStatus?: boolean;
+    EpThemeColor?: string;
+    ShowLogo?: boolean;
+    ShowModel?: string;
+    MenuArrowIconNoTransition?: boolean;
+    CachingAsyncRoutes?: boolean;
+    TooltipEffect?: Effect;
+    ResponsiveStorageNameSpace?: string;
+    MenuSearchHistory?: number;
+    MapConfigure?: {
+      amapKey?: string;
+      options: {
+        resizeEnable?: boolean;
+        center?: number[];
+        zoom?: number;
+      };
+    };
+  }
+
+  /**
+   * 与 `PlatformConfigs` 类型不同，这里是缓存到浏览器本地存储的类型声明
+   * @see {@link https://pure-admin.github.io/pure-admin-doc/pages/config/#platform-config-json}
+   */
+  interface StorageConfigs {
+    version?: string;
+    title?: string;
+    fixedHeader?: boolean;
+    hiddenSideBar?: boolean;
+    multiTagsCache?: boolean;
+    keepAlive?: boolean;
+    locale?: string;
+    layout?: string;
+    theme?: string;
+    darkMode?: boolean;
+    grey?: boolean;
+    weak?: boolean;
+    hideTabs?: boolean;
+    hideFooter?: boolean;
+    sidebarStatus?: boolean;
+    epThemeColor?: string;
+    themeColor?: string;
+    overallStyle?: string;
+    showLogo?: boolean;
+    showModel?: string;
+    menuSearchHistory?: number;
+    mapConfigure?: {
+      amapKey?: string;
+      options: {
+        resizeEnable?: boolean;
+        center?: number[];
+        zoom?: number;
+      };
+    };
+    username?: string;
+  }
+
+  /**
+   * `responsive-storage` 本地响应式 `storage` 的类型声明
+   */
+  interface ResponsiveStorage {
+    locale: {
+      locale?: string;
+    };
+    layout: {
+      layout?: string;
+      theme?: string;
+      darkMode?: boolean;
+      sidebarStatus?: boolean;
+      epThemeColor?: string;
+      themeColor?: string;
+      overallStyle?: string;
+    };
+    configure: {
+      grey?: boolean;
+      weak?: boolean;
+      hideTabs?: boolean;
+      hideFooter?: boolean;
+      showLogo?: boolean;
+      showModel?: string;
+      multiTagsCache?: boolean;
+      stretch?: boolean | number;
+    };
+    tags?: Array<any>;
+  }
+
+  /**
+   * 平台里所有组件实例都能访问到的全局属性对象的类型声明
+   */
+  interface GlobalPropertiesApi {
+    $echarts: ECharts;
+    $storage: ResponsiveStorage;
+    $config: PlatformConfigs;
+  }
+
+  /**
+   * 扩展 `Element`
+   */
+  interface Element {
+    // v-ripple 作用于 src/directives/ripple/index.ts 文件
+    _ripple?: {
+      enabled?: boolean;
+      centered?: boolean;
+      class?: string;
+      circle?: boolean;
+      touched?: boolean;
+    };
+  }
+}
diff --git a/Yi.Pure.Vue3/types/index.d.ts b/Yi.Pure.Vue3/types/index.d.ts
new file mode 100644
index 00000000..67d7459e
--- /dev/null
+++ b/Yi.Pure.Vue3/types/index.d.ts
@@ -0,0 +1,82 @@
+// 此文件跟同级目录的 global.d.ts 文件一样也是全局类型声明，只不过这里存放一些零散的全局类型，无需引入直接在 .vue 、.ts 、.tsx 文件使用即可获得类型提示
+
+type RefType<T> = T | null;
+
+type EmitType = (event: string, ...args: any[]) => void;
+
+type TargetContext = "_self" | "_blank";
+
+type ComponentRef<T extends HTMLElement = HTMLDivElement> =
+  ComponentElRef<T> | null;
+
+type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
+
+type ForDataType<T> = {
+  [P in T]?: ForDataType<T[P]>;
+};
+
+type AnyFunction<T> = (...args: any[]) => T;
+
+type PropType<T> = VuePropType<T>;
+
+type Writable<T> = {
+  -readonly [P in keyof T]: T[P];
+};
+
+type Nullable<T> = T | null;
+
+type NonNullable<T> = T extends null | undefined ? never : T;
+
+type Recordable<T = any> = Record<string, T>;
+
+type ReadonlyRecordable<T = any> = {
+  readonly [key: string]: T;
+};
+
+type Indexable<T = any> = {
+  [key: string]: T;
+};
+
+type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>;
+};
+
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+
+type Exclusive<T, U> = (Without<T, U> & U) | (Without<U, T> & T);
+
+type TimeoutHandle = ReturnType<typeof setTimeout>;
+
+type IntervalHandle = ReturnType<typeof setInterval>;
+
+type Effect = "light" | "dark";
+
+interface ChangeEvent extends Event {
+  target: HTMLInputElement;
+}
+
+interface WheelEvent {
+  path?: EventTarget[];
+}
+
+interface ImportMetaEnv extends ViteEnv {
+  __: unknown;
+}
+
+interface Fn<T = any, R = T> {
+  (...arg: T[]): R;
+}
+
+interface PromiseFn<T = any, R = T> {
+  (...arg: T[]): Promise<R>;
+}
+
+interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
+  $el: T;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function parseInt(s: string | number, radix?: number): number;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function parseFloat(string: string | number): number;
diff --git a/Yi.Pure.Vue3/types/router.d.ts b/Yi.Pure.Vue3/types/router.d.ts
new file mode 100644
index 00000000..a03ba0e3
--- /dev/null
+++ b/Yi.Pure.Vue3/types/router.d.ts
@@ -0,0 +1,108 @@
+// 全局路由类型声明
+
+import type { RouteComponent, RouteLocationNormalized } from "vue-router";
+import type { FunctionalComponent } from "vue";
+
+declare global {
+  interface ToRouteType extends RouteLocationNormalized {
+    meta: CustomizeRouteMeta;
+  }
+
+  /**
+   * @description 完整子路由的`meta`配置表
+   */
+  interface CustomizeRouteMeta {
+    /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
+    title: string;
+    /** 菜单图标 `可选` */
+    icon?: string | FunctionalComponent | IconifyIcon;
+    /** 菜单名称右侧的额外图标 */
+    extraIcon?: string | FunctionalComponent | IconifyIcon;
+    /** 是否在菜单中显示（默认`true`）`可选` */
+    showLink?: boolean;
+    /** 是否显示父级菜单 `可选` */
+    showParent?: boolean;
+    /** 页面级别权限设置 `可选` */
+    roles?: Array<string>;
+    /** 按钮级别权限设置 `可选` */
+    auths?: Array<string>;
+    /** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */
+    keepAlive?: boolean;
+    /** 内嵌的`iframe`链接 `可选` */
+    frameSrc?: string;
+    /** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
+    frameLoading?: boolean;
+    /** 页面加载动画（两种模式，第二种权重更高，第一种直接采用`vue`内置的`transitions`动画，第二种是使用`animate.css`编写进、离场动画，平台更推荐使用第二种模式，已经内置了`animate.css`，直接写对应的动画名即可）`可选` */
+    transition?: {
+      /**
+       * @description 当前路由动画效果
+       * @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
+       * @see animate.css {@link https://animate.style}
+       */
+      name?: string;
+      /** 进场动画 */
+      enterTransition?: string;
+      /** 离场动画 */
+      leaveTransition?: string;
+    };
+    /** 当前菜单名称或自定义信息禁止添加到标签页（默认`false`） */
+    hiddenTag?: boolean;
+    /** 当前菜单名称是否固定显示在标签页且不可关闭（默认`false`） */
+    fixedTag?: boolean;
+    /** 动态路由可打开的最大数量 `可选` */
+    dynamicLevel?: number;
+    /** 将某个菜单激活
+     * （主要用于通过`query`或`params`传参的路由，当它们通过配置`showLink: false`后不在菜单中显示，就不会有任何菜单高亮，
+     * 而通过设置`activePath`指定激活菜单即可获得高亮，`activePath`为指定激活菜单的`path`）
+     */
+    activePath?: string;
+  }
+
+  /**
+   * @description 完整子路由配置表
+   */
+  interface RouteChildrenConfigsTable {
+    /** 子路由地址 `必填` */
+    path: string;
+    /** 路由名字（对应不要重复，和当前组件的`name`保持一致）`必填` */
+    name?: string;
+    /** 路由重定向 `可选` */
+    redirect?: string;
+    /** 按需加载组件 `可选` */
+    component?: RouteComponent;
+    meta?: CustomizeRouteMeta;
+    /** 子路由配置项 */
+    children?: Array<RouteChildrenConfigsTable>;
+  }
+
+  /**
+   * @description 整体路由配置表（包括完整子路由）
+   */
+  interface RouteConfigsTable {
+    /** 路由地址 `必填` */
+    path: string;
+    /** 路由名字（保持唯一）`可选` */
+    name?: string;
+    /** `Layout`组件 `可选` */
+    component?: RouteComponent;
+    /** 路由重定向 `可选` */
+    redirect?: string;
+    meta?: {
+      /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
+      title: string;
+      /** 菜单图标 `可选` */
+      icon?: string | FunctionalComponent | IconifyIcon;
+      /** 是否在菜单中显示（默认`true`）`可选` */
+      showLink?: boolean;
+      /** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
+      rank?: number;
+    };
+    /** 子路由配置项 */
+    children?: Array<RouteChildrenConfigsTable>;
+  }
+}
+
+// https://router.vuejs.org/zh/guide/advanced/meta.html#typescript
+declare module "vue-router" {
+  interface RouteMeta extends CustomizeRouteMeta {}
+}
diff --git a/Yi.Pure.Vue3/types/shims-tsx.d.ts b/Yi.Pure.Vue3/types/shims-tsx.d.ts
new file mode 100644
index 00000000..199f9793
--- /dev/null
+++ b/Yi.Pure.Vue3/types/shims-tsx.d.ts
@@ -0,0 +1,22 @@
+import Vue, { VNode } from "vue";
+
+declare module "*.tsx" {
+  import Vue from "compatible-vue";
+  export default Vue;
+}
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}
diff --git a/Yi.Pure.Vue3/types/shims-vue.d.ts b/Yi.Pure.Vue3/types/shims-vue.d.ts
new file mode 100644
index 00000000..ccdc4dd9
--- /dev/null
+++ b/Yi.Pure.Vue3/types/shims-vue.d.ts
@@ -0,0 +1,14 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "*.scss" {
+  const scss: Record<string, string>;
+  export default scss;
+}
+
+declare module "vue3-puzzle-vcode";
+declare module "vue-virtual-scroller";
+declare module "vuedraggable/src/vuedraggable";
diff --git a/Yi.Pure.Vue3/vite.config.ts b/Yi.Pure.Vue3/vite.config.ts
new file mode 100644
index 00000000..1d1b01a2
--- /dev/null
+++ b/Yi.Pure.Vue3/vite.config.ts
@@ -0,0 +1,62 @@
+import { getPluginsList } from "./build/plugins";
+import { include, exclude } from "./build/optimize";
+import { type UserConfigExport, type ConfigEnv, loadEnv } from "vite";
+import {
+  root,
+  alias,
+  wrapperEnv,
+  pathResolve,
+  __APP_INFO__
+} from "./build/utils";
+
+export default ({ mode }: ConfigEnv): UserConfigExport => {
+  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =
+    wrapperEnv(loadEnv(mode, root));
+  return {
+    base: VITE_PUBLIC_PATH,
+    root,
+    resolve: {
+      alias
+    },
+    // 服务端渲染
+    server: {
+      // 端口号
+      port: VITE_PORT,
+      host: "0.0.0.0",
+      // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
+      proxy: {},
+      // 预热文件以提前转换和缓存结果，降低启动期间的初始页面加载时长并防止转换瀑布
+      warmup: {
+        clientFiles: ["./index.html", "./src/{views,components}/*"]
+      }
+    },
+    plugins: getPluginsList(VITE_CDN, VITE_COMPRESSION),
+    // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options
+    optimizeDeps: {
+      include,
+      exclude
+    },
+    build: {
+      // https://cn.vitejs.dev/guide/build.html#browser-compatibility
+      target: "es2015",
+      sourcemap: false,
+      // 消除打包大小超过500kb警告
+      chunkSizeWarningLimit: 4000,
+      rollupOptions: {
+        input: {
+          index: pathResolve("./index.html", import.meta.url)
+        },
+        // 静态资源分类打包
+        output: {
+          chunkFileNames: "static/js/[name]-[hash].js",
+          entryFileNames: "static/js/[name]-[hash].js",
+          assetFileNames: "static/[ext]/[name]-[hash].[ext]"
+        }
+      }
+    },
+    define: {
+      __INTLIFY_PROD_DEVTOOLS__: false,
+      __APP_INFO__: JSON.stringify(__APP_INFO__)
+    }
+  };
+};