release: update 4.5.0

refactor: 重构图片裁剪ReCropper组件，添加更多实用功能
fix: 修复RePureTableBar组件初始化时列设置勾选项未根据hide属性正确初始化
2025-11-03 13:44:47 +08:00 · 2023-06-26 11:14:25 +08:00 · 2023-06-25 18:33:46 +08:00 · 2023-06-24 00:52:54 +08:00 · 2023-06-23 11:17:39 +08:00 · 2023-06-22 00:31:25 +08:00
83 changed files with 2932 additions and 2086 deletions
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@
 VITE_PORT = 8848

 # 开发环境读取配置文件路径
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./

 # 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 线上环境平台打包路径
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./

 # 线上环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
--- a/.env.staging
+++ b/.env.staging
@@ -2,7 +2,7 @@
 # https://cn.vitejs.dev/guide/env-and-mode.html#modes
 # NODE_ENV = development

-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./

 # 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,38 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
---
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,38 @@
+name: "\U0001F41E Bug report"
+description: Report an issue with vue-pure-admin
+body:
+  - type: markdown
+    attributes:
+      value: |
+        感谢您花时间填写此错误报告 (Thanks for taking the time to fill out this bug report)
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: 描述问题 (Describe the problem)
+      placeholder: 请描述您的问题 (Please describe your problem)
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction-steps
+    attributes:
+      label: 如何复现该问题 (How to reproduce the problem)
+      placeholder: 请提供复现问题的具体操作步骤，以便平台快速定位、高效地解决问题。当然如果问题的操作步骤较复杂，您可以fork平台，然后去改动代码复现问题，这样更高效 (Please provide specific steps to reproduce the problem, so that the platform can quickly locate and solve the problem efficiently. Of course, if the operation steps of the problem are more complicated, you can fork the platform, and then modify the code to reproduce the problem, which is more efficient)
+    validations:
+      required: true
+  - type: textarea
+    id: system-info
+    attributes:
+      label: 操作系统和浏览器信息 (Operating system and browser information)
+      placeholder: 如果您遇到操作系统或浏览器兼容性问题，可选填此项 (Optional if you encounter operating system or browser compatibility issues)
+    validations:
+      required: false
+  - type: checkboxes
+    id: checkboxes
+    attributes:
+      label: 验证 (Verify)
+      description: 在提交问题之前，请确保您执行以下操作 (Before submitting an issue, please ensure you do the following)
+      options:
+        - label: 是否仔细阅读过 [文档](https://yiming_chang.gitee.io/pure-admin-doc/) (Have you read [documentation](https://yiming_chang.gitee.io/pure-admin-doc/) carefully)
+          required: true
+        - label: 检查是否存在相同或类似的问题 [issues](https://github.com/pure-admin/vue-pure-admin/issues) (Check for the same or similar [issues](https://github.com/pure-admin/vue-pure-admin/issues))
+          required: true
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1 @@
+blank_issues_enabled: false
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,20 +0,0 @@
---
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
---
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -1,19 +1,4 @@
---
-#################################
-#################################
-## Super Linter GitHub Actions ##
-#################################
-#################################
-name: Lint Code Base
-
-#
-# Documentation:
-# https://help.github.com/en/articles/workflow-syntax-for-github-actions
-#
-
-#############################
-# Start the job on all push #
-#############################
+name: Lint Code
 on:
  push:
    branches:
@@ -22,41 +7,41 @@ on:
    branches:
      - main

-###############
-# Set the Job #
-###############
 jobs:
  build:
-    # Name the Job
-    name: Lint Code Base
-    # Set the agent to run on
+    name: Lint Code
    runs-on: ubuntu-latest
-
-    ##################
-    # Load all steps #
-    ##################
    steps:
-      ##########################
-      # Checkout the code base #
-      ##########################
-      - name: Checkout Code
-        uses: actions/checkout@v2
-        with:
-          # Full git history is needed to get a proper list of changed files within `super-linter`
-          fetch-depth: 0
+      - name: Checkout repository
+        uses: actions/checkout@v3

-      - name: Setup node
-        uses: actions/setup-node@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v3
        with:
-          node-version: "16"
-          registry-url: https://registry.npmjs.com/
+          node-version: 16

-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
        with:
-          version: latest
+          version: 7
+          run_install: false

-      - name: Build
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Start Lint Code
        run: |
          pnpm install --no-frozen-lockfile
          pnpm lint
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,6 +3,7 @@
    "christian-kohler.path-intellisense",
    "vscode-icons-team.vscode-icons",
    "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker",
    "stylelint.vscode-stylelint",
    "bradlc.vscode-tailwindcss",
    "dbaeumer.vscode-eslint",
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,50 @@
+# 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
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,50 @@
+# 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
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,50 @@
+# 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
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -15,10 +15,13 @@ const include = [
  "intro.js",
  "vue-i18n",
  "js-cookie",
+  "vue-tippy",
  "cropperjs",
  "jsbarcode",
+  "pinyin-pro",
  "sortablejs",
  "swiper/vue",
+  "mint-filter",
  "md-editor-v3",
  "@vueuse/core",
  "vue3-danmaku",
@@ -33,7 +36,6 @@ const include = [
  "@howdyjs/mouse-menu",
  "@logicflow/extension",
  "vue-virtual-scroller",
-  "element-resize-detector",
  "@amap/amap-jsapi-loader",
  "el-table-infinite-scroll",
  "vue-waterfall-plugin-next",
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -68,6 +68,7 @@ menus:
  hsguide: Guide
  hsAble: Able
  hsMenuTree: Menu Tree
+  hsOptimize: Debounce、Throttle、Copy、Longpress Directives
  hsWatermark: Water Mark
  hsPrint: Print
  hsDownload: Download
@@ -99,6 +100,8 @@ menus:
  hsPdf: PDF Preview
  hsExecl: Export Excel
  hsInfiniteScroll: Table Infinite Scroll
+  hsSensitive: Sensitive Filter
+  hsPinyin: PinYin
  hsdanmaku: Danmaku Components
  hsPureTableBase: Base Usage
  hsPureTableHigh: High Usage
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -68,6 +68,7 @@ menus:
  hsguide: 引导页
  hsAble: 功能
  hsMenuTree: 菜单树结构
+  hsOptimize: 防抖、截流、复制、长按指令
  hsWatermark: 水印
  hsPrint: 打印
  hsDownload: 下载
@@ -99,9 +100,11 @@ menus:
  hsPdf: PDF预览
  hsExecl: 导出Excel
  hsInfiniteScroll: 表格无限滚动
+  hsSensitive: 敏感词过滤
+  hsPinyin: 汉语拼音
  hsdanmaku: 弹幕组件
  hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（10个示例）
+  hsPureTableHigh: 高级用法（11个示例）
  hsTree: 大数据树业务组件
  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -179,6 +179,7 @@ const tabsRouter = {
      meta: {
        // 不在menu菜单中显示
        showLink: false,
+        activePath: "/tabs/index",
        roles: ["admin", "common"]
      }
    },
@@ -190,6 +191,7 @@ const tabsRouter = {
      meta: {
        // 不在menu菜单中显示
        showLink: false,
+        activePath: "/tabs/index",
        roles: ["admin", "common"]
      }
    }
--- a/mock/list.ts
+++ b/mock/list.ts
@@ -453,6 +453,7 @@ export default [
    }
  },
  {
+    // https://api.github.com/repos/pure-admin/vue-pure-admin/releases?per_page=100
    url: "/releases",
    method: "get",
    response: () => {
@@ -460,6 +461,16 @@ export default [
        success: true,
        data: {
          list: [
+            {
+              created_at: "2023-06-14T02:52:19Z",
+              published_at: "2023-06-14T02:54:41Z",
+              body: "# 4.4.0 (2023-06-14)\r\n\r\n### 🎫 Feat\r\n\r\n- 路由 `meta` 添加 `activePath` 属性，可将某个菜单激活（主要用于通过 `query` 或 `params` 传参的路由，当它们通过配置 `showLink: false` 后不在菜单中显示，就不会有任何菜单高亮，而通过设置 `activePath` 指定激活菜单即可获得高亮，`activePath` 为指定激活菜单的 `path` [查看详情](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411)）\r\n- `pure-admin-table` 高级用法添加自适应内容区高度示例\r\n- 添加防抖、节流和文本复制指令并规范自定义指令用法错误时的提示以及添加使用示例\r\n- `notice` 消息提示组件空数据时添加 `el-empty` 组件\r\n- 函数式弹窗示例代码添加子组件 `prop` 为 `primitive` 类型的示例\r\n- 添加 `vscode-docker` 插件\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复国际化切换到英文模式刷新会回到中文模式\r\n- 修复搜索菜单功能的弹框遮罩未覆盖左侧菜单的问题\r\n\r\n### 🍏 Perf\r\n\r\n- 页面切换性能优化，不考虑网络的情况下，页面切换逻辑的速度差不多比之前快 `3-4` 倍 [查看优化详情](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)\r\n- 优化标签页操作-路由传参模式用法\r\n- 系统管理中表格均改为自适应内容区高度，需将 `@pureadmin/table` 升级到最新版\r\n- 使用 `vueuse` 的 `useResizeObserver` 函数替换 `v-resize` 自定义指令，从测试后的表现来看性能会更好\r\n- 对未解绑的公共事件，在页面销毁时解绑"
+            },
+            {
+              created_at: "2023-06-04T04:11:51Z",
+              published_at: "2023-06-04T04:13:24Z",
+              body: "# 4.3.0 (2023-06-04)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `docker` 支持\r\n- 添加项目版本实时更新检测功能\r\n- 完善系统管理-角色管理页面\r\n- 瀑布流组件添加无限滚动\r\n- 函数式弹框添加 `updateDialog` 更改弹框自身属性值方法\r\n- `wangeditor` 富文本添加多个富文本和自定义图片上传示例\r\n- `pure-table` 表格高级用法添加保留已选中的 `CheckBox` 选项示例\r\n- `RePureTableBar` 组件添加 `title` 插槽\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复获取验证码倒计时会有 `1s` 延时禁用的问题\r\n- 修复图标选择器未正确初始化预览问题\r\n- 修复动态路由重定向造成标签页出现重复内容\r\n- 修复强制刷新页面 `getTopMenu()` 函数获取不到 `path` 报错的问题\r\n- 修复左侧菜单折叠后突然拉升造成左侧菜单整体不显示的问题\r\n- 修复 `RePureTableBar` 关闭列设置后在 `windows` 出现滚动条的问题\r\n\r\n### 🍏 Perf\r\n\r\n- 优化标签页操作-路由传参模式用法\r\n- 优化菜单搜索功能和样式\r\n- 更新 `vscode` 代码片段\r\n- 优化 `dataThemeChange` 主题设置的初始化调用时机"
+            },
            {
              created_at: "2023-05-15T07:03:57Z",
              published_at: "2023-05-15T07:04:54Z",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "4.3.0",
+  "version": "4.5.0",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -31,12 +31,12 @@
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@howdyjs/mouse-menu": "^2.0.7",
-    "@logicflow/core": "^1.2.7",
-    "@logicflow/extension": "^1.2.7",
+    "@logicflow/core": "^1.2.9",
+    "@logicflow/extension": "^1.2.9",
    "@pureadmin/descriptions": "^1.1.1",
-    "@pureadmin/table": "^2.2.0",
-    "@pureadmin/utils": "^1.9.2",
-    "@vueuse/core": "^10.1.2",
+    "@pureadmin/table": "^2.3.2",
+    "@pureadmin/utils": "^1.9.6",
+    "@vueuse/core": "^10.2.0",
    "@vueuse/motion": "^2.0.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
@@ -44,61 +44,62 @@
    "axios": "^1.4.0",
    "china-area-data": "^5.0.1",
    "cropperjs": "^1.5.13",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.8",
    "echarts": "^5.4.2",
    "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.3.5",
-    "element-resize-detector": "^1.2.4",
+    "element-plus": "^2.3.7",
    "intro.js": "^7.0.1",
    "js-cookie": "^3.0.5",
    "jsbarcode": "^3.11.5",
    "md-editor-v3": "2.7.2",
+    "mint-filter": "^4.0.3",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.1.3",
+    "pinia": "^2.1.4",
+    "pinyin-pro": "^3.15.2",
    "qrcode": "^1.5.3",
-    "qs": "^6.11.1",
+    "qs": "^6.11.2",
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.0",
-    "swiper": "^9.3.2",
+    "swiper": "^9.4.1",
    "typeit": "^8.7.1",
    "v-contextmenu": "3.0.0",
    "v3-infinite-loading": "^1.2.2",
-    "version-rocket": "^1.6.2",
+    "version-rocket": "^1.6.7",
    "vue": "^3.3.4",
    "vue-i18n": "^9.2.2",
    "vue-json-pretty": "^2.2.4",
    "vue-pdf-embed": "^1.1.6",
-    "vue-router": "^4.2.1",
-    "vue-types": "^5.0.3",
+    "vue-router": "^4.2.2",
+    "vue-tippy": "^6.2.0",
+    "vue-types": "^5.1.0",
    "vue-virtual-scroller": "2.0.0-beta.7",
    "vue-waterfall-plugin-next": "^2.2.1",
    "vue3-danmaku": "^1.4.0",
    "vuedraggable": "^4.1.0",
-    "xgplayer": "^3.0.2",
+    "xgplayer": "^3.0.4",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@commitlint/cli": "^17.6.3",
-    "@commitlint/config-conventional": "^17.6.3",
-    "@iconify-icons/ep": "^1.2.11",
-    "@iconify-icons/ri": "^1.2.7",
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
+    "@iconify-icons/ep": "^1.2.12",
+    "@iconify-icons/ri": "^1.2.9",
    "@iconify/vue": "^4.1.1",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
-    "@pureadmin/theme": "^3.0.0",
-    "@types/element-resize-detector": "1.1.3",
+    "@intlify/unplugin-vue-i18n": "^0.11.0",
+    "@pureadmin/theme": "^3.1.0",
    "@types/intro.js": "^5.1.1",
    "@types/js-cookie": "^3.0.3",
    "@types/mockjs": "^1.0.7",
-    "@types/node": "^18.15.12",
+    "@types/node": "^18.16.18",
    "@types/nprogress": "0.2.0",
    "@types/qrcode": "^1.5.0",
    "@types/qs": "^6.9.7",
    "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.1.0",
@@ -106,45 +107,45 @@
    "autoprefixer": "^10.4.14",
    "cloc": "^2.11.0",
    "cssnano": "^6.0.1",
-    "eslint": "^8.41.0",
+    "eslint": "^8.43.0",
    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.14.0",
+    "eslint-plugin-vue": "^9.15.1",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.2",
    "picocolors": "^1.0.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
    "postcss-html": "^1.5.0",
    "postcss-import": "^15.1.0",
    "postcss-scss": "^4.0.6",
    "prettier": "^2.8.8",
    "pretty-quick": "^3.1.3",
    "rimraf": "^5.0.1",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.3.0",
-    "stylelint": "^15.6.2",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "stylelint": "^15.9.0",
    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-recess-order": "^4.2.0",
    "stylelint-config-recommended": "^12.0.0",
-    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-config-recommended-scss": "^12.0.0",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard": "^33.0.0",
    "stylelint-config-standard-scss": "^9.0.0",
    "stylelint-order": "^6.0.3",
    "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^5.0.0",
+    "stylelint-scss": "^5.0.1",
    "svgo": "^3.0.2",
    "tailwindcss": "^3.3.2",
-    "terser": "^5.17.6",
-    "typescript": "^5.0.4",
+    "terser": "^5.18.1",
+    "typescript": "5.0.4",
    "vite": "^4.3.9",
    "vite-plugin-cdn-import": "^0.3.5",
    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-mock": "2.9.6",
    "vite-plugin-remove-console": "^2.1.1",
    "vite-svg-loader": "^4.0.0",
-    "vue-eslint-parser": "^9.3.0",
-    "vue-tsc": "^1.6.5"
+    "vue-eslint-parser": "^9.3.1",
+    "vue-tsc": "^1.8.1"
  },
  "pnpm": {
    "peerDependencyRules": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "4.3.0",
+  "Version": "4.5.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/components/ReCropper/src/circled.css
+++ b/src/components/ReCropper/src/circled.css
@@ -0,0 +1,11 @@
+@import "cropperjs/dist/cropper.css";
+@import "tippy.js/dist/tippy.css";
+@import "tippy.js/themes/light.css";
+@import "tippy.js/animations/perspective.css";
+
+.re-circled {
+  .cropper-view-box,
+  .cropper-face {
+    border-radius: 50%;
+  }
+}
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@@ -1,22 +1,41 @@
+import "./circled.css";
+import Cropper from "cropperjs";
+import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { longpress } from "@/directives/longpress";
+import { useTippy, directive as tippy } from "vue-tippy";
+import { delay, debounce, isArray, downloadByBase64 } from "@pureadmin/utils";
 import {
-  defineComponent,
-  onMounted,
-  nextTick,
  ref,
  unref,
  computed,
-  PropType
+  PropType,
+  onMounted,
+  onUnmounted,
+  defineComponent
 } from "vue";
-import { useAttrs } from "@pureadmin/utils";
-
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
+import {
+  Reload,
+  Upload,
+  ArrowH,
+  ArrowV,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ChangeIcon,
+  ArrowRight,
+  RotateLeft,
+  SearchPlus,
+  RotateRight,
+  SearchMinus,
+  DownloadIcon
+} from "./svg";

 type Options = Cropper.Options;

-const defaultOptions: Cropper.Options = {
-  aspectRatio: 16 / 9,
+const defaultOptions: Options = {
+  aspectRatio: 1,
  zoomable: true,
  zoomOnTouch: true,
  zoomOnWheel: true,
@@ -39,110 +58,382 @@ const defaultOptions: Cropper.Options = {
 };

 const props = {
-  src: {
-    type: String,
-    required: true
-  },
-  alt: {
-    type: String
-  },
-  width: {
-    type: [String, Number],
-    default: ""
-  },
-  height: {
-    type: [String, Number],
-    default: "360px"
-  },
+  src: { type: String, required: true },
+  alt: { type: String },
+  circled: { type: Boolean, default: false },
+  realTimePreview: { type: Boolean, default: true },
+  height: { type: [String, Number], default: "360px" },
  crossorigin: {
-    type: String || Object,
+    type: String as PropType<"" | "anonymous" | "use-credentials" | undefined>,
    default: undefined
  },
-  imageStyle: {
-    type: Object as PropType<CSSProperties>,
-    default() {
-      return {};
-    }
-  },
-  options: {
-    type: Object as PropType<Options>,
-    default() {
-      return {};
-    }
-  }
+  imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+  options: { type: Object as PropType<Options>, default: () => ({}) }
 };

 export default defineComponent({
  name: "ReCropper",
  props,
-  setup(props) {
-    const cropper: any = ref<Nullable<Cropper>>(null);
-    const imgElRef = ref();
+  setup(props, { attrs, emit }) {
+    const tippyElRef = ref<ElRef<HTMLImageElement>>();
+    const imgElRef = ref<ElRef<HTMLImageElement>>();
+    const cropper = ref<Nullable<Cropper>>();
+    const isReady = ref(false);
+    const imgBase64 = ref();
+    const inCircled = ref(props.circled);
+    const inSrc = ref(props.src);
+    let scaleX = 1;
+    let scaleY = 1;

-    const isReady = ref<boolean>(false);
+    const debounceRealTimeCroppered = debounce(realTimeCroppered, 80);

    const getImageStyle = computed((): CSSProperties => {
      return {
        height: props.height,
-        width: props.width,
        maxWidth: "100%",
        ...props.imageStyle
      };
    });

-    const getWrapperStyle = computed((): CSSProperties => {
-      const { height, width } = props;
-      return {
-        width: `${width}`.replace(/px/, "") + "px",
-        height: `${height}`.replace(/px/, "") + "px"
-      };
+    const getClass = computed(() => {
+      return [
+        attrs.class,
+        {
+          ["re-circled"]: inCircled.value
+        }
+      ];
    });

-    function init() {
+    const iconClass = computed(() => {
+      return [
+        "p-[6px]",
+        "h-[30px]",
+        "w-[30px]",
+        "outline-none",
+        "rounded-[4px]",
+        "cursor-pointer",
+        "hover:bg-[rgba(0,0,0,0.06)]"
+      ];
+    });
+
+    const getWrapperStyle = computed((): CSSProperties => {
+      return { height: `${props.height}`.replace(/px/, "") + "px" };
+    });
+
+    onMounted(init);
+
+    onUnmounted(() => {
+      cropper.value?.destroy();
+    });
+
+    useResizeObserver(tippyElRef, () => {
+      handCropper("reset");
+    });
+
+    async function init() {
      const imgEl = unref(imgElRef);
-      if (!imgEl) {
-        return;
-      }
+      if (!imgEl) return;
      cropper.value = new Cropper(imgEl, {
        ...defaultOptions,
        ready: () => {
          isReady.value = true;
+          realTimeCroppered();
+          delay(400).then(() => emit("readied", cropper.value));
+        },
+        crop() {
+          debounceRealTimeCroppered();
+        },
+        zoom() {
+          debounceRealTimeCroppered();
+        },
+        cropmove() {
+          debounceRealTimeCroppered();
        },
        ...props.options
      });
    }

-    onMounted(() => {
-      nextTick(() => {
-        init();
+    function realTimeCroppered() {
+      props.realTimePreview && croppered();
+    }
+
+    function croppered() {
+      if (!cropper.value) return;
+      const canvas = inCircled.value
+        ? getRoundedCanvas()
+        : cropper.value.getCroppedCanvas();
+      // https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
+      canvas.toBlob(blob => {
+        if (!blob) return;
+        const fileReader: FileReader = new FileReader();
+        fileReader.readAsDataURL(blob);
+        fileReader.onloadend = e => {
+          if (!e.target?.result || !blob) return;
+          imgBase64.value = e.target.result;
+          emit("cropper", {
+            base64: e.target.result,
+            blob,
+            info: { size: blob.size, ...cropper.value.getData() }
+          });
+        };
+        fileReader.onerror = () => {
+          emit("error");
+        };
      });
+    }
+
+    function getRoundedCanvas() {
+      const sourceCanvas = cropper.value!.getCroppedCanvas();
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d")!;
+      const width = sourceCanvas.width;
+      const height = sourceCanvas.height;
+      canvas.width = width;
+      canvas.height = height;
+      context.imageSmoothingEnabled = true;
+      context.drawImage(sourceCanvas, 0, 0, width, height);
+      context.globalCompositeOperation = "destination-in";
+      context.beginPath();
+      context.arc(
+        width / 2,
+        height / 2,
+        Math.min(width, height) / 2,
+        0,
+        2 * Math.PI,
+        true
+      );
+      context.fill();
+      return canvas;
+    }
+
+    function handCropper(event: string, arg?: number | Array<number>) {
+      if (event === "scaleX") {
+        scaleX = arg = scaleX === -1 ? 1 : -1;
+      }
+      if (event === "scaleY") {
+        scaleY = arg = scaleY === -1 ? 1 : -1;
+      }
+      arg && isArray(arg)
+        ? cropper.value?.[event]?.(...arg)
+        : cropper.value?.[event]?.(arg);
+    }
+
+    function beforeUpload(file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      inSrc.value = "";
+      reader.onload = e => {
+        inSrc.value = e.target?.result as string;
+      };
+      reader.onloadend = () => {
+        init();
+      };
+      return false;
+    }
+
+    const menuContent = defineComponent({
+      directives: {
+        tippy,
+        longpress
+      },
+      setup() {
+        return () => (
+          <div class="flex flex-wrap w-[60px] justify-between">
+            <ElUpload
+              accept="image/*"
+              show-file-list={false}
+              before-upload={beforeUpload}
+            >
+              <Upload
+                class={iconClass.value}
+                v-tippy={{
+                  content: "上传",
+                  placement: "left-start"
+                }}
+              />
+            </ElUpload>
+            <DownloadIcon
+              class={iconClass.value}
+              v-tippy={{
+                content: "下载",
+                placement: "right-start"
+              }}
+              onClick={() => downloadByBase64(imgBase64.value, "cropping.png")}
+            />
+            <ChangeIcon
+              class={iconClass.value}
+              v-tippy={{
+                content: "圆形、矩形裁剪",
+                placement: "left-start"
+              }}
+              onClick={() => {
+                inCircled.value = !inCircled.value;
+                realTimeCroppered();
+              }}
+            />
+            <Reload
+              class={iconClass.value}
+              v-tippy={{
+                content: "重置",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("reset")}
+            />
+            <ArrowUp
+              class={iconClass.value}
+              v-tippy={{
+                content: "上移（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("move", [0, -10]), "0:100"]}
+            />
+            <ArrowDown
+              class={iconClass.value}
+              v-tippy={{
+                content: "下移（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("move", [0, 10]), "0:100"]}
+            />
+            <ArrowLeft
+              class={iconClass.value}
+              v-tippy={{
+                content: "左移（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("move", [-10, 0]), "0:100"]}
+            />
+            <ArrowRight
+              class={iconClass.value}
+              v-tippy={{
+                content: "右移（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("move", [10, 0]), "0:100"]}
+            />
+            <ArrowH
+              class={iconClass.value}
+              v-tippy={{
+                content: "水平翻转",
+                placement: "left-start"
+              }}
+              onClick={() => handCropper("scaleX", -1)}
+            />
+            <ArrowV
+              class={iconClass.value}
+              v-tippy={{
+                content: "垂直翻转",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("scaleY", -1)}
+            />
+            <RotateLeft
+              class={iconClass.value}
+              v-tippy={{
+                content: "逆时针旋转",
+                placement: "left-start"
+              }}
+              onClick={() => handCropper("rotate", -45)}
+            />
+            <RotateRight
+              class={iconClass.value}
+              v-tippy={{
+                content: "顺时针旋转",
+                placement: "right-start"
+              }}
+              onClick={() => handCropper("rotate", 45)}
+            />
+            <SearchPlus
+              class={iconClass.value}
+              v-tippy={{
+                content: "放大（可长按）",
+                placement: "left-start"
+              }}
+              v-longpress={[() => handCropper("zoom", 0.1), "0:100"]}
+            />
+            <SearchMinus
+              class={iconClass.value}
+              v-tippy={{
+                content: "缩小（可长按）",
+                placement: "right-start"
+              }}
+              v-longpress={[() => handCropper("zoom", -0.1), "0:100"]}
+            />
+          </div>
+        );
+      }
    });

+    function onContextmenu(event) {
+      event.preventDefault();
+
+      const { show, setProps } = useTippy(tippyElRef, {
+        content: menuContent,
+        arrow: false,
+        theme: "light",
+        trigger: "manual",
+        interactive: true,
+        appendTo: "parent",
+        // hideOnClick: false,
+        animation: "perspective",
+        placement: "bottom-start"
+      });
+
+      setProps({
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
+        })
+      });
+
+      show();
+    }
+
    return {
+      inSrc,
      props,
      imgElRef,
-      cropper,
+      tippyElRef,
+      getClass,
      getWrapperStyle,
-      getImageStyle
+      getImageStyle,
+      isReady,
+      croppered,
+      onContextmenu
    };
  },

  render() {
-    return (
-      <>
-        <div
-          class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
-          style={this.getWrapperStyle}
-        >
-          <img
-            ref="imgElRef"
-            src={this.props.src}
-            alt={this.props.alt}
-            crossorigin={this.props.crossorigin}
-            style={this.getImageStyle}
-          />
-        </div>
-      </>
-    );
+    const {
+      inSrc,
+      isReady,
+      getClass,
+      getImageStyle,
+      onContextmenu,
+      getWrapperStyle
+    } = this;
+    const { alt, crossorigin } = this.props;
+
+    return inSrc ? (
+      <div
+        ref="tippyElRef"
+        class={getClass}
+        style={getWrapperStyle}
+        onContextmenu={event => onContextmenu(event)}
+      >
+        <img
+          v-show={isReady}
+          ref="imgElRef"
+          style={getImageStyle}
+          src={inSrc}
+          alt={alt}
+          crossorigin={crossorigin}
+        />
+      </div>
+    ) : null;
  }
 });
--- a/src/components/ReCropper/src/svg/arrow-down.svg
+++ b/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.2z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-h.svg
+++ b/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>
--- a/src/components/ReCropper/src/svg/arrow-left.svg
+++ b/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-8z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-right.svg
+++ b/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.4z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-up.svg
+++ b/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.2z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-v.svg
+++ b/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>
--- a/src/components/ReCropper/src/svg/change.svg
+++ b/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.8zM608 937.6h326.4V598.4H608v339.2zm-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 32z"/><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.4z"/><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.4zm790.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.2z"/><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.4z"/><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.4zM288 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.8zm-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.8z"/></svg>
--- a/src/components/ReCropper/src/svg/download.svg
+++ b/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.9l112 141.8zM878 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-8z"/></svg>
--- a/src/components/ReCropper/src/svg/index.ts
+++ b/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
+};
--- a/src/components/ReCropper/src/svg/reload.svg
+++ b/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.8zm756 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.2z"/></svg>
--- a/src/components/ReCropper/src/svg/rotate-left.svg
+++ b/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-32zm-44 402H188V494h440v326z"/><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.3z"/></svg>
--- a/src/components/ReCropper/src/svg/rotate-right.svg
+++ b/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.8z"/><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-32zm-44 402H396V494h440v326z"/></svg>
--- a/src/components/ReCropper/src/svg/search-minus.svg
+++ b/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-8zm284 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-11zM696 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 430z"/></svg>
--- a/src/components/ReCropper/src/svg/search-plus.svg
+++ b/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-8zm284 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-11zM696 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 430z"/></svg>
--- a/src/components/ReCropper/src/svg/upload.svg
+++ b/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 13zM878 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-8z"/></svg>
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,6 +1,12 @@
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
-import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
 import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
+import {
+  delay,
+  cloneDeep,
+  isBoolean,
+  isFunction,
+  getKeyList
+} from "@pureadmin/utils";

 import Sortable from "sortablejs";
 import DragIcon from "./svg/drag.svg?component";
@@ -37,8 +43,13 @@ export default defineComponent({
    const loading = ref(false);
    const checkAll = ref(true);
    const isIndeterminate = ref(false);
+    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(checkColumnList);
+    const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
    const dynamicColumns = ref(cloneDeep(props?.columns));

    const getDropdownItemStyle = computed(() => {
@@ -120,7 +131,7 @@ export default defineComponent({
      dynamicColumns.value = cloneDeep(props?.columns);
      checkColumnList = [];
      checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
-      checkedColumns.value = checkColumnList;
+      checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
    }

    const dropdown = {
--- a/src/directives/auth/index.ts
+++ b/src/directives/auth/index.ts
@@ -1,5 +1,5 @@
 import { hasAuth } from "@/router/utils";
-import { Directive, type DirectiveBinding } from "vue";
+import type { Directive, DirectiveBinding } from "vue";

 export const auth: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
@@ -7,7 +7,9 @@ export const auth: Directive = {
    if (value) {
      !hasAuth(value) && el.parentNode?.removeChild(el);
    } else {
-      throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"");
+      throw new Error(
+        "[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
+      );
    }
  }
 };
--- a/src/directives/copy/index.ts
+++ b/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";
+
+interface CopyEl extends HTMLElement {
+  copyValue: string;
+}
+
+/** 文本复制指令（默认双击复制） */
+export const copy: Directive = {
+  mounted(el: CopyEl, binding: DirectiveBinding) {
+    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;
+  }
+};
--- a/src/directives/elResizeDetector/index.ts
+++ b/src/directives/elResizeDetector/index.ts
@@ -1,27 +0,0 @@
-import { Directive, type DirectiveBinding, type VNode } from "vue";
-import elementResizeDetectorMaker from "element-resize-detector";
-import type { Erd } from "element-resize-detector";
-import { emitter } from "@/utils/mitt";
-
-const erd: Erd = elementResizeDetectorMaker({
-  strategy: "scroll"
-});
-
-export const resize: Directive = {
-  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
-    erd.listenTo(el, elem => {
-      const width = elem.offsetWidth;
-      const height = elem.offsetHeight;
-      if (binding?.instance) {
-        emitter.emit("resize", { detail: { width, height } });
-      } else {
-        vnode.el.dispatchEvent(
-          new CustomEvent("resize", { detail: { width, height } })
-        );
-      }
-    });
-  },
-  unmounted(el: HTMLElement) {
-    erd.uninstall(el);
-  }
-};
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,2 +1,4 @@
 export * from "./auth";
-export * from "./elResizeDetector";
+export * from "./copy";
+export * from "./longpress";
+export * from "./optimize";
--- a/src/directives/longpress/index.ts
+++ b/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) {
+    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"'
+      );
+    }
+  }
+};
--- a/src/directives/optimize/index.ts
+++ b/src/directives/optimize/index.ts
@@ -0,0 +1,55 @@
+import {
+  isFunction,
+  isObject,
+  isArray,
+  debounce,
+  throttle
+} from "@pureadmin/utils";
+import { useEventListener } from "@vueuse/core";
+import type { Directive, DirectiveBinding } from "vue";
+
+/** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
+export const optimize: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    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"
+      );
+    }
+  }
+};
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -22,19 +22,31 @@ notices.value.map(v => (noticesNum.value += v.list.length));
    </span>
    <template #dropdown>
      <el-dropdown-menu>
-        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
-          <template v-for="item in notices" :key="item.key">
-            <el-tab-pane
-              :label="`${item.name}(${item.list.length})`"
-              :name="`${item.key}`"
-            >
-              <el-scrollbar max-height="330px">
-                <div class="noticeList-container">
-                  <NoticeList :list="item.list" />
-                </div>
-              </el-scrollbar>
-            </el-tab-pane>
-          </template>
+        <el-tabs
+          :stretch="true"
+          v-model="activeKey"
+          class="dropdown-tabs"
+          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
+        >
+          <el-empty
+            v-if="notices.length === 0"
+            description="暂无消息"
+            :image-size="60"
+          />
+          <span v-else>
+            <template v-for="item in notices" :key="item.key">
+              <el-tab-pane
+                :label="`${item.name}(${item.list.length})`"
+                :name="`${item.key}`"
+              >
+                <el-scrollbar max-height="330px">
+                  <div class="noticeList-container">
+                    <NoticeList :list="item.list" />
+                  </div>
+                </el-scrollbar>
+              </el-tab-pane>
+            </template>
+          </span>
        </el-tabs>
      </el-dropdown-menu>
    </template>
@@ -57,8 +69,6 @@ notices.value.map(v => (noticesNum.value += v.list.length));
 }

 .dropdown-tabs {
-  width: 330px;
-
  .noticeList-container {
    padding: 15px 24px 0;
  }
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
 import { emitter } from "@/utils/mitt";
 import { onClickOutside } from "@vueuse/core";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import Close from "@iconify-icons/ep/close";

 const target = ref(null);
@@ -27,8 +27,15 @@ onClickOutside(target, (event: any) => {
  show.value = false;
 });

-emitter.on("openPanel", () => {
-  show.value = true;
+onMounted(() => {
+  emitter.on("openPanel", () => {
+    show.value = true;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`openPanel`公共事件，防止多次触发
+  emitter.off("openPanel");
 });
 </script>

--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { match } from "pinyin-pro";
+import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { cloneDeep } from "@pureadmin/utils";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
 import { ref, computed, shallowRef } from "vue";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import Search from "@iconify-icons/ri/search-line";
@@ -23,6 +25,7 @@ const { device } = useNav();
 const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {});
 const router = useRouter();
+const { locale } = useI18n();

 const keyword = ref("");
 const scrollbarRef = ref();
@@ -62,12 +65,19 @@ function flatTree(arr) {
 /** 查询 */
 function search() {
  const flatMenusData = flatTree(menusData.value);
-  resultOptions.value = flatMenusData.filter(
-    menu =>
-      keyword.value &&
-      transformI18n(menu.meta?.title)
-        .toLocaleLowerCase()
-        .includes(keyword.value.toLocaleLowerCase().trim())
+  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
  );
  if (resultOptions.value?.length > 0) {
    activePath.value = resultOptions.value[0].path;
@@ -145,6 +155,7 @@ onKeyStroke("ArrowDown", handleDown);
    :style="{
      borderRadius: '6px'
    }"
+    append-to-body
    @opened="inputRef.focus()"
    @closed="inputRef.blur()"
  >
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+import { transformI18n } from "@/plugins/i18n";
 import { useResizeObserver } from "@vueuse/core";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -7,8 +7,6 @@ import { ref, computed, getCurrentInstance, onMounted } from "vue";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";

-const { t } = useI18n();
-
 interface optionsItem {
  path: string;
  meta?: {
@@ -98,7 +96,9 @@ defineExpose({ handleScroll });
      @mouseenter="handleMouse(item)"
    >
      <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
-      <span class="result-item-title">{{ t(item.meta?.title) }}</span>
+      <span class="result-item-title">
+        {{ transformI18n(item.meta?.title) }}
+      </span>
      <enterOutlined />
    </div>
  </div>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
-import { ref, watch, nextTick } from "vue";
 import SidebarItem from "./sidebarItem.vue";
+import { isAllEmpty } from "@pureadmin/utils";
+import { ref, nextTick, computed } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -17,11 +18,9 @@ const { t, route, locale, translationCh, translationEn } =
  useTranslationLang(menuRef);
 const {
  title,
-  routers,
  logout,
  backTopMenu,
  onPanel,
-  menuSelect,
  username,
  userAvatar,
  avatarsStyle,
@@ -29,16 +28,13 @@ const {
  getDropdownItemClass
 } = useNav();

+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+
 nextTick(() => {
  menuRef.value?.handleResize();
 });
-
-watch(
-  () => route.path,
-  () => {
-    menuSelect(route.path, routers);
-  }
-);
 </script>

 <template>
@@ -55,8 +51,7 @@ watch(
      ref="menuRef"
      mode="horizontal"
      class="horizontal-header-menu"
-      :default-active="route.path"
-      @select="indexPath => menuSelect(indexPath, routers)"
+      :default-active="defaultActive"
    >
      <sidebar-item
        v-for="route in usePermissionStoreHook().wholeMenus"
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -2,6 +2,7 @@
 import extraIcon from "./extraIcon.vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
+import { isAllEmpty } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
 import { ref, toRaw, watch, onMounted, nextTick } from "vue";
@@ -21,10 +22,8 @@ const { t, route, locale, translationCh, translationEn } =
  useTranslationLang(menuRef);
 const {
  device,
-  routers,
  logout,
  onPanel,
-  menuSelect,
  resolvePath,
  username,
  userAvatar,
@@ -38,10 +37,9 @@ function getDefaultActive(routePath) {
  const wholeMenus = usePermissionStoreHook().wholeMenus;
  /** 当前路由的父级路径 */
  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
-  defaultActive.value = findRouteByPath(
-    parentRoutes,
-    wholeMenus
-  )?.children[0]?.path;
+  defaultActive.value = !isAllEmpty(route.meta?.activePath)
+    ? route.meta.activePath
+    : findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
 }

 onMounted(() => {
@@ -72,7 +70,6 @@ watch(
      mode="horizontal"
      class="horizontal-header-menu"
      :default-active="defaultActive"
-      @select="indexPath => menuSelect(indexPath, routers)"
    >
      <el-menu-item
        v-for="route in usePermissionStoreHook().wholeMenus"
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -5,11 +5,11 @@ import { emitter } from "@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
 import leftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
-import { storageLocal } from "@pureadmin/utils";
 import { responsiveStorageNameSpace } from "@/config";
-import { ref, computed, watch, onBeforeMount } from "vue";
+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";

 const route = useRoute();
 const showLogo = ref(
@@ -18,8 +18,7 @@ const showLogo = ref(
  )?.showLogo ?? true
 );

-const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
-  useNav();
+const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();

 const subMenuData = ref([]);

@@ -33,7 +32,13 @@ const loading = computed(() =>
  pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
 );

-function getSubMenuData(path: string) {
+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(
@@ -49,22 +54,27 @@ function getSubMenuData(path: string) {
  subMenuData.value = parenetRoute?.children;
 }

-getSubMenuData(route.path);
+watch(
+  () => [route.path, usePermissionStoreHook().wholeMenus],
+  () => {
+    if (route.path.includes("/redirect")) return;
+    getSubMenuData();
+    menuSelect(route.path);
+  }
+);
+
+onMounted(() => {
+  getSubMenuData();

-onBeforeMount(() => {
  emitter.on("logoChange", key => {
    showLogo.value = key;
  });
 });

-watch(
-  () => [route.path, usePermissionStoreHook().wholeMenus],
-  () => {
-    if (route.path.includes("/redirect")) return;
-    getSubMenuData(route.path);
-    menuSelect(route.path, routers);
-  }
-);
+onBeforeUnmount(() => {
+  // 解绑`logoChange`公共事件，防止多次触发
+  emitter.off("logoChange");
+});
 </script>

 <template>
@@ -83,9 +93,8 @@ watch(
        mode="vertical"
        class="outer-most select-none"
        :collapse="isCollapse"
-        :default-active="route.path"
+        :default-active="defaultActive"
        :collapse-transition="false"
-        @select="indexPath => menuSelect(indexPath, routers)"
      >
        <sidebar-item
          v-for="routes in menuData"
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -4,12 +4,12 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
-import { isEqual, isAllEmpty } from "@pureadmin/utils";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
+import { useResizeObserver, useFullscreen } from "@vueuse/core";
+import { isEqual, isAllEmpty, debounce } from "@pureadmin/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
-import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
+import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";

 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
@@ -54,20 +54,22 @@ const topPath = getTopMenu()?.path;
 const { VITE_HIDE_HOME } = import.meta.env;
 const { isFullscreen, toggle } = useFullscreen();

-const dynamicTagView = () => {
+const dynamicTagView = async () => {
+  await nextTick();
  const index = multiTags.value.findIndex(item => {
-    if (item.query) {
+    if (!isAllEmpty(route.query)) {
      return isEqual(route.query, item.query);
-    } else if (item.params) {
+    } else if (!isAllEmpty(route.params)) {
      return isEqual(route.params, item.params);
    } else {
-      return item.path === route.path;
+      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];
@@ -78,9 +80,6 @@ const moveToView = async (index: number): Promise<void> => {
    ? scrollbarDom.value?.offsetWidth
    : 0;

-  // 获取视图更新后dom
-  await nextTick();
-
  // 已有标签页总长度（包含溢出部分）
  const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;

@@ -135,31 +134,29 @@ const handleScroll = (offset: number): void => {
  }
 };

-function dynamicRouteTag(value: string, parentPath: string): void {
+function dynamicRouteTag(value: string): void {
  const hasValue = multiTags.value.some(item => {
    return item.path === value;
  });

-  function concatPath(arr: object[], value: string, parentPath: string) {
+  function concatPath(arr: object[], value: string) {
    if (!hasValue) {
      arr.forEach((arrItem: any) => {
-        const pathConcat = parentPath + arrItem.path;
-        if (arrItem.path === value || pathConcat === value) {
+        if (arrItem.path === value || arrItem.path === value) {
          useMultiTagsStoreHook().handleTags("push", {
            path: value,
-            parentPath: `/${parentPath.split("/")[1]}`,
            meta: arrItem.meta,
            name: arrItem.name
          });
        } else {
          if (arrItem.children && arrItem.children.length > 0) {
-            concatPath(arrItem.children, value, parentPath);
+            concatPath(arrItem.children, value);
          }
        }
      });
    }
  }
-  concatPath(router.options.routes as any, value, parentPath);
+  concatPath(router.options.routes as any, value);
 }

 /** 刷新路由 */
@@ -169,7 +166,7 @@ function onFresh() {
    path: "/redirect" + fullPath,
    query
  });
-  handleAliveRoute(route as toRouteType, "refresh");
+  handleAliveRoute(route as ToRouteType, "refresh");
 }

 function deleteDynamicTag(obj: any, current: any, tag?: string) {
@@ -242,7 +239,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {

 function deleteMenu(item, tag?: string) {
  deleteDynamicTag(item, item.path, tag);
-  handleAliveRoute(route as toRouteType);
+  handleAliveRoute(route as ToRouteType);
 }

 function onClickDrop(key, item, selectRoute?: RouteConfigs) {
@@ -290,7 +287,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
        length: multiTags.value.length
      });
      router.push(topPath);
-      handleAliveRoute(route as toRouteType);
+      handleAliveRoute(route as ToRouteType);
      break;
    case 6:
      // 整体页面全屏
@@ -465,7 +462,17 @@ function tagOnClick(item) {
  // showMenuModel(item?.path, item?.query);
 }

-onBeforeMount(() => {
+watch(route, () => {
+  activeIndex.value = -1;
+  dynamicTagView();
+});
+
+watch(isFullscreen, () => {
+  tagsViews[6].icon = Fullscreen;
+  tagsViews[6].text = $t("buttons.hswholeFullScreen");
+});
+
+onMounted(() => {
  if (!instance) return;

  // 根据当前路由初始化操作标签页的禁用状态
@@ -483,32 +490,25 @@ onBeforeMount(() => {
  });

  //  接收侧边栏切换传递过来的参数
-  emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
-    dynamicRouteTag(indexPath, parentPath);
+  emitter.on("changLayoutRoute", indexPath => {
+    dynamicRouteTag(indexPath);
    setTimeout(() => {
      showMenuModel(indexPath);
    });
  });
-});

-watch([route], () => {
-  activeIndex.value = -1;
-  dynamicTagView();
-});
-
-watch(isFullscreen, () => {
-  tagsViews[6].icon = Fullscreen;
-  tagsViews[6].text = $t("buttons.hswholeFullScreen");
-});
-
-onMounted(() => {
  useResizeObserver(
    scrollbarDom,
-    useDebounceFn(() => {
-      dynamicTagView();
-    }, 200)
+    debounce(() => dynamicTagView())
  );
 });
+
+onBeforeUnmount(() => {
+  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
+  emitter.off("tagViewsChange");
+  emitter.off("tagViewsShowModel");
+  emitter.off("changLayoutRoute");
+});
 </script>

 <template>
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -114,38 +114,13 @@ export function useNav() {
    }
  }

-  function menuSelect(indexPath: string, routers): void {
-    if (wholeMenus.value.length === 0) return;
-    if (isRemaining(indexPath)) return;
-    let parentPath = "";
-    const parentPathIndex = indexPath.lastIndexOf("/");
-    if (parentPathIndex > 0) {
-      parentPath = indexPath.slice(0, parentPathIndex);
-    }
-    /** 找到当前路由的信息 */
-    function findCurrentRoute(indexPath: string, routes) {
-      if (!routes) return console.error(errorInfo);
-      return routes.map(item => {
-        if (item.path === indexPath) {
-          if (item.redirect) {
-            findCurrentRoute(item.redirect, item.children);
-          } else {
-            /** 切换左侧菜单 通知标签页 */
-            emitter.emit("changLayoutRoute", {
-              indexPath,
-              parentPath
-            });
-          }
-        } else {
-          if (item.children) findCurrentRoute(indexPath, item.children);
-        }
-      });
-    }
-    findCurrentRoute(indexPath, routers);
+  function menuSelect(indexPath: string) {
+    if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
+    emitter.emit("changLayoutRoute", indexPath);
  }

  /** 判断路径是否参与菜单 */
-  function isRemaining(path: string): boolean {
+  function isRemaining(path: string) {
    return remainingPaths.includes(path);
  }

--- a/src/layout/hooks/useTranslationLang.ts
+++ b/src/layout/hooks/useTranslationLang.ts
@@ -1,7 +1,7 @@
 import { useNav } from "./useNav";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
-import { watch, type Ref } from "vue";
+import { watch, onBeforeMount, type Ref } from "vue";

 export function useTranslationLang(ref?: Ref) {
  const { $storage, changeTitle, handleResize } = useNav();
@@ -27,6 +27,10 @@ export function useTranslationLang(ref?: Ref) {
    }
  );

+  onBeforeMount(() => {
+    locale.value = $storage.locale?.locale ?? "zh";
+  });
+
  return {
    t,
    route,
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -3,14 +3,15 @@ import "animate.css";
 // 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
 import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
-import { emitter } from "@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";
+import { useResizeObserver } from "@vueuse/core";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import {
  h,
+  ref,
  reactive,
  computed,
  onMounted,
@@ -26,6 +27,7 @@ import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 import backTop from "@/assets/svg/back_top.svg?component";

+const appWrapperRef = ref();
 const { isDark } = useDark();
 const { layout } = useLayout();
 const isMobile = deviceDetection();
@@ -78,10 +80,10 @@ function toggle(device: string, bool: boolean) {
 // 判断是否可自动关闭菜单栏
 let isAutoCloseSidebar = true;

-// 监听容器
-emitter.on("resize", ({ detail }) => {
+useResizeObserver(appWrapperRef, entries => {
  if (isMobile) return;
-  const { width } = detail;
+  const entry = entries[0];
+  const { width } = entry.contentRect;
  width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
  /** width app-wrapper类容器宽度
   * 0 < width <= 760 隐藏侧边栏
@@ -147,7 +149,7 @@ const layoutHeader = defineComponent({
 </script>

 <template>
-  <div :class="['app-wrapper', set.classes]" v-resize>
+  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
    <div
      v-show="
        set.device === 'mobile' &&
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -6,7 +6,6 @@ export const routerArrays: Array<RouteConfigs> =
    ? [
        {
          path: "/welcome",
-          parentPath: "/",
          meta: {
            title: "menus.hshome",
            icon: "homeFilled"
@@ -25,7 +24,6 @@ export type routeMetaType = {

 export type RouteConfigs = {
  path?: string;
-  parentPath?: string;
  query?: object;
  params?: object;
  meta?: routeMetaType;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -101,7 +101,7 @@ const whiteList = ["/login"];

 const { VITE_HIDE_HOME } = import.meta.env;

-router.beforeEach((to: toRouteType, _from, next) => {
+router.beforeEach((to: ToRouteType, _from, next) => {
  if (to.meta?.keepAlive) {
    handleAliveRoute(to, "add");
    // 页面整体刷新和点击标签页刷新
@@ -176,7 +176,8 @@ router.beforeEach((to: toRouteType, _from, next) => {
              }
            }
          }
-          router.push(to.fullPath);
+          // 确保动态路由完全加入路由列表并且不影响静态路由（注意：动态路由刷新时router.beforeEach可能会触发两次，第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
+          if (isAllEmpty(to.name)) router.push(to.fullPath);
        });
      }
      toCorrectRoute();
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -10,6 +10,15 @@ export default {
    rank: able
  },
  children: [
+    {
+      path: "/able/directives",
+      name: "Directives",
+      component: () => import("@/views/able/directives.vue"),
+      meta: {
+        title: $t("menus.hsOptimize"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
    {
      path: "/able/watermark",
      name: "WaterMark",
@@ -137,6 +146,24 @@ export default {
      meta: {
        title: $t("menus.hsInfiniteScroll")
      }
+    },
+    {
+      path: "/able/sensitive",
+      name: "Sensitive",
+      component: () => import("@/views/able/sensitive.vue"),
+      meta: {
+        title: $t("menus.hsSensitive"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/able/pinyin",
+      name: "Pinyin",
+      component: () => import("@/views/able/pinyin.vue"),
+      meta: {
+        title: $t("menus.hsPinyin"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
    }
  ]
 } as RouteConfigsTable;
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -256,7 +256,7 @@ function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
 }

 /** 处理缓存路由（添加、删除、刷新） */
-function handleAliveRoute({ name }: toRouteType, mode?: string) {
+function handleAliveRoute({ name }: ToRouteType, mode?: string) {
  switch (mode) {
    case "add":
      usePermissionStoreHook().cacheOperate({
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
 import { store } from "@/store";
 import { cacheType } from "./types";
 import { constantMenus } from "@/router";
-import { getKeyList } from "@pureadmin/utils";
 import { useMultiTagsStoreHook } from "./multiTags";
+import { debounce, getKeyList } from "@pureadmin/utils";
 import { ascending, filterTree, filterNoPermissionTree } from "@/router/utils";

 export const usePermissionStore = defineStore({
@@ -37,7 +37,7 @@ export const usePermissionStore = defineStore({
          break;
      }
      /** 监听缓存页面是否存在于标签页，不存在则删除 */
-      (() => {
+      debounce(() => {
        let cacheLength = this.cachePageList.length;
        const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
        while (cacheLength > 0) {
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -24,7 +24,6 @@ export type appType = {

 export type multiType = {
  path: string;
-  parentPath: string;
  name: string;
  meta: any;
  query?: object;
--- a/src/utils/mitt.ts
+++ b/src/utils/mitt.ts
@@ -1,21 +1,13 @@
 import type { Emitter } from "mitt";
 import mitt from "mitt";

+/** 全局公共事件需要在此处添加类型 */
 type Events = {
-  resize: {
-    detail: {
-      width: number;
-      height: number;
-    };
-  };
  openPanel: string;
  tagViewsChange: string;
  tagViewsShowModel: string;
  logoChange: boolean;
-  changLayoutRoute: {
-    indexPath: string;
-    parentPath: string;
-  };
+  changLayoutRoute: string;
 };

 export const emitter: Emitter<Events> = mitt<Events>();
--- a/src/views/able/directives.vue
+++ b/src/views/able/directives.vue
@@ -0,0 +1,156 @@
+<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">
+        <span class="font-medium">自定义防抖、截流、文本复制、长按指令</span>
+      </div>
+    </template>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行第一次点击事件，立即执行）
+      <el-input
+        v-optimize="{
+          event: 'input',
+          fn: onInput,
+          immediate: true,
+          timeout: 1000
+        }"
+        v-model="search"
+        class="!w-[200px]"
+        clearable
+        @clear="onInput"
+      />
+    </div>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行最后一次事件，延后执行）
+      <el-input
+        v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
+        v-model="searchTwo"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      防抖指令（连续输入，只会执行最后一次事件，延后执行，传参用法）
+      <el-input
+        v-optimize="{
+          event: 'input',
+          fn: onInputThree,
+          timeout: 400,
+          params: { name: '小明', sex: '男' }
+        }"
+        v-model="searchThree"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      节流指令（连续输入，每一秒只会执行一次事件）
+      <el-input
+        v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
+        v-model="searchFour"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      节流指令（连续输入，每一秒只会执行一次事件，传参用法）
+      <el-input
+        v-optimize:throttle="{
+          event: 'input',
+          fn: onInputFive,
+          params: { name: '小明', sex: '男' }
+        }"
+        v-model="searchFive"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      文本复制指令（双击输入框内容即可复制）
+      <el-input v-copy="searchSix" v-model="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>
--- a/src/views/able/pinyin.vue
+++ b/src/views/able/pinyin.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { html } from "pinyin-pro";
+
+defineOptions({
+  name: "Pinyin"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">汉语拼音</span>
+      </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>
--- a/src/views/able/sensitive.vue
+++ b/src/views/able/sensitive.vue
@@ -0,0 +1,43 @@
+<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">
+        <span class="font-medium">敏感词过滤</span>
+      </div>
+    </template>
+    <div class="flex flex-wrap gap-2 my-2">
+      <span>自定义敏感词</span>
+      <el-tag
+        v-for="(word, index) in words"
+        :key="index"
+        type="danger"
+        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>
--- a/src/views/components/cropping/avatar.png
+++ b/src/views/components/cropping/avatar.png
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -1,60 +1,75 @@
-<script setup lang="ts">
-import { ref, nextTick } from "vue";
-import Cropper from "@/components/ReCropper";
-import img from "./picture.jpeg";
+<script setup lang="tsx">
+import { ref } from "vue";
+import avatar from "./avatar.png";
+import ReCropper from "@/components/ReCropper";
+import { formatBytes } from "@pureadmin/utils";

 defineOptions({
  name: "Cropping"
 });

+const infos = ref();
 const refCropper = ref();
-const info = ref<object>(null);
+const showPopover = ref(false);
 const cropperImg = ref<string>("");

-const onCropper = (): void => {
-  nextTick(() => {
-    refCropper.value.cropper.getCroppedCanvas().toBlob(blob => {
-      const fileReader: FileReader = new FileReader();
-      fileReader.onloadend = (e: ProgressEvent) => {
-        cropperImg.value = (e.target as any).result;
-        info.value = refCropper.value.cropper.getData();
-      };
-      fileReader.readAsDataURL(blob);
-    }, "image/jpeg");
-  });
-};
+function onCropper({ base64, blob, info }) {
+  console.log(blob);
+  infos.value = info;
+  cropperImg.value = base64;
+}
 </script>

 <template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">图片裁剪组件</span>
+        <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>
    </template>
-    <div class="cropper-container">
-      <Cropper ref="refCropper" :width="'40vw'" :src="img" />
-      <img :src="cropperImg" class="croppered" v-if="cropperImg" />
-    </div>
-    <el-button type="primary" @click="onCropper">裁剪</el-button>
-    <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
+    <el-popover
+      :visible="showPopover"
+      placement="right"
+      width="300px"
+      :teleported="false"
+    >
+      <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>
  </el-card>
 </template>
-
-<style scoped>
-.cropper-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.el-button {
-  margin-top: 10px;
-}
-
-.croppered {
-  display: block;
-  width: 45%;
-  height: 360px;
-}
-</style>
--- a/src/views/components/cropping/picture.jpeg
+++ b/src/views/components/cropping/picture.jpeg
--- a/src/views/components/dialog/form.vue
+++ b/src/views/components/dialog/form.vue
@@ -15,8 +15,10 @@ const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({ user: "", region: "" })
 });

-// vue 规定所有的 prop 都遵循着单向绑定原则，不能在子组件中更改 prop 值，该 form.vue 文件为子组件
-// 如果需要拿到初始化的 prop 值并使得组件变量可修改，则需要在子组件定义一个新的变量接受这个子组件的 prop
+// 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>
--- a/src/views/components/dialog/formPrimitive.vue
+++ b/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 class="!w-[220px]" v-model="data" placeholder="请输入内容" />
+</template>
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -3,6 +3,7 @@ import { useRouter } from "vue-router";
 import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
 import forms, { type FormProps } from "./form.vue";
+import formPrimitive from "./formPrimitive.vue";
 import { cloneDeep, debounce } from "@pureadmin/utils";
 import {
  addDialog,
@@ -316,7 +317,10 @@ function onFormTwoClick() {
  addDialog({
    width: "30%",
    title: "结合Form表单（第二种方式）",
-    contentRenderer: () => h(forms, { formInline: formInline.value }),
+    contentRenderer: () =>
+      h(forms, {
+        formInline: formInline.value
+      }),
    closeCallBack: () => {
      message(
        `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
@@ -338,7 +342,9 @@ function onFormThreeClick() {
    width: "30%",
    title: "结合Form表单（第三种方式）",
    contentRenderer: () =>
-      createVNode(forms, { formInline: formThreeInline.value }),
+      createVNode(forms, {
+        formInline: formThreeInline.value
+      }),
    closeCallBack: () => {
      message(
        `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
@@ -373,6 +379,26 @@ function onFormFourClick() {
  });
 }

+// 子组件 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: "点击底部取消按钮的回调",
@@ -474,6 +500,9 @@ function onBeforeSureClick() {
      <el-button @click="onFormFourClick">
        结合Form表单（第四种方式）
      </el-button>
+      <el-button @click="onFormPrimitiveFormClick">
+        子组件 prop 为 primitive 类型
+      </el-button>
    </el-space>
    <el-divider />
    <el-space wrap>
--- a/src/views/login/utils/rule.ts
+++ b/src/views/login/utils/rule.ts
@@ -12,7 +12,7 @@ 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>{
+const loginRules = reactive<FormRules>({
  password: [
    {
      validator: (rule, value, callback) => {
@@ -44,7 +44,7 @@ const loginRules = reactive(<FormRules>{
 });

 /** 手机登录校验 */
-const phoneRules = reactive(<FormRules>{
+const phoneRules = reactive<FormRules>({
  phone: [
    {
      validator: (rule, value, callback) => {
@@ -76,7 +76,7 @@ const phoneRules = reactive(<FormRules>{
 });

 /** 忘记密码校验 */
-const updateRules = reactive(<FormRules>{
+const updateRules = reactive<FormRules>({
  phone: [
    {
      validator: (rule, value, callback) => {
--- a/src/views/pure-table/high/adaptive/columns.tsx
+++ b/src/views/pure-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,
+    small: false
+  });
+
+  /** 加载动画配置 */
+  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
+  };
+}
--- a/src/views/pure-table/high/adaptive/index.vue
+++ b/src/views/pure-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>
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@@ -1,3 +1,4 @@
+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";
@@ -13,6 +14,12 @@ const rendContent = (val: string) =>
  `代码位置：src/views/pure-table/high/${val}/index.vue`;

 export const list = [
+  {
+    key: "adaptive",
+    content: rendContent("adaptive"),
+    title: "自适应内容区高度",
+    component: Adaptive
+  },
  {
    key: "page",
    content: rendContent("page"),
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -90,6 +90,8 @@ const {
        <pure-table
          ref="tableRef"
          border
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 32 }"
          align-whole="center"
          row-key="id"
          showOverflowTooltip
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -109,6 +109,7 @@ const {
          table-layout="auto"
          :loading="loading"
          :size="size"
+          adaptive
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -39,7 +39,7 @@ const {
 <template>
  <div class="main">
    <tree class="w-[17%] float-left" />
-    <div class="float-right w-[81%]">
+    <div class="float-right w-[82%]">
      <el-form
        ref="formRef"
        :inline="true"
@@ -97,6 +97,7 @@ const {
        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            border
+            adaptive
            align-whole="center"
            table-layout="auto"
            :loading="loading"
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@@ -87,7 +87,10 @@ onMounted(async () => {
 </script>

 <template>
-  <div class="h-full min-h-[780px] bg-bg_color overflow-auto">
+  <div
+    class="h-full bg-bg_color overflow-auto"
+    :style="{ minHeight: `calc(100vh - 133px)` }"
+  >
    <div class="flex items-center h-[34px]">
      <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
        部门列表
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -145,7 +145,9 @@ getReleases().then(({ data }) => {
          </template>
          <el-skeleton animated :rows="7" :loading="loading">
            <template #default>
-              <Github />
+              <el-scrollbar :height="`calc(${height}px - 35vh - 340px)`">
+                <Github />
+              </el-scrollbar>
            </template>
          </el-skeleton>
        </el-card>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,8 +28,7 @@
      "element-plus/global",
      "@pureadmin/table/volar",
      "@pureadmin/descriptions/volar"
-    ],
-    "typeRoots": ["./types", "./node_modules/@types/"]
+    ]
  },
  "include": [
    "mock/*.ts",
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -7,7 +7,6 @@ import type {
 import type { ECharts } from "echarts";
 import type { IconifyIcon } from "@iconify/vue";
 import type { TableColumns } from "@pureadmin/table";
-import { type RouteComponent, type RouteLocationNormalized } from "vue-router";

 /**
 * 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
@@ -166,98 +165,6 @@ declare global {
    tags?: Array<any>;
  }

-  /**
-   * `src/router` 文件夹里的类型声明
-   */
-  interface toRouteType extends RouteLocationNormalized {
-    meta: {
-      roles: Array<string>;
-      keepAlive?: boolean;
-      dynamicLevel?: string;
-    };
-  }
-
-  /**
-   * @description 完整子路由配置表
-   */
-  interface RouteChildrenConfigsTable {
-    /** 子路由地址 `必填` */
-    path: string;
-    /** 路由名字（对应不要重复，和当前组件的`name`保持一致）`必填` */
-    name?: string;
-    /** 路由重定向 `可选` */
-    redirect?: string;
-    /** 按需加载组件 `可选` */
-    component?: RouteComponent;
-    meta?: {
-      /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`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`写进、离场动画）`可选` */
-      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;
-      /** 动态路由可打开的最大数量 `可选` */
-      dynamicLevel?: number;
-    };
-    /** 子路由配置项 */
-    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>;
-  }
-
  /**
   * 平台里所有组件实例都能访问到的全局属性对象的类型声明
   */
--- a/types/router.d.ts
+++ b/types/router.d.ts
@@ -0,0 +1,105 @@
+// 全局路由类型声明
+
+import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
+
+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`写进、离场动画）`可选` */
+    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;
+    /** 动态路由可打开的最大数量 `可选` */
+    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 {}
+}
Author	SHA1	Message	Date
xiaoxian521	c965e2cba2	release: update `4.5.0`	2023-06-26 11:14:25 +08:00
xiaoxian521	b5996ed80b	refactor: 重构图片裁剪`ReCropper`组件，添加更多实用功能	2023-06-25 18:33:46 +08:00
xiaoxian521	bf67e36731	fix: 修复`RePureTableBar`组件初始化时列设置勾选项未根据`hide`属性正确初始化	2023-06-24 00:52:54 +08:00
xiaoming	b8200125dc	feat: 添加长按指令及使用示例，该长按指令支持自定义时长的持续回调 (#620 )	2023-06-23 11:17:39 +08:00
xiaoxian521	5f71e0aad7	feat: 菜单搜索功能支持拼音搜索，比如搜图片裁剪，输入`tp`或`tupian`等对应拼音即可	2023-06-22 00:31:25 +08:00
xiaoxian521	5873caf596	chore(deps): update	2023-06-21 17:19:56 +08:00
xiaoxian521	5d87e9916f	feat: 添加汉语拼音功能示例	2023-06-21 17:09:48 +08:00
xiaoxian521	861a93684d	feat: 添加敏感词过滤功能示例	2023-06-21 14:58:34 +08:00
xiaoxian521	c354ba0bcd	workflow: update	2023-06-19 17:06:06 +08:00
xiaoxian521	2a2a3ee478	fix: 修复升级到`V4.4.0`版本后，页面开启`keepAlive`缓存后第一次加载并未缓存页面的问题	2023-06-19 11:51:38 +08:00
xiaoxian521	2a8cd7affe	chore(deps): update	2023-06-19 10:16:09 +08:00
xiaoxian521	0eade474eb	chore(deps): update	2023-06-17 13:12:34 +08:00
xiaoxian521	cb9a8a0a05	perf: 兼容`VITE_PUBLIC_PATH`为`url`的`OSS`场景，需将`@pureadmin/theme`升级至最新版	2023-06-15 13:03:58 +08:00
xiaoxian521	3e1bc7d677	perf: 将`VITE_PUBLIC_PATH`默认改为`./`兼容更多路径场景	2023-06-15 13:00:57 +08:00
xiaoxian521	d1db4b74f4	workflow: update	2023-06-15 00:50:50 +08:00
xiaoxian521	aad2100d96	chore: update	2023-06-14 11:08:47 +08:00
xiaoxian521	b7e799bfc7	release: update `4.4.0`	2023-06-14 10:52:19 +08:00
xiaoxian521	79e91b7b13	chore(deps): update	2023-06-13 22:59:34 +08:00
xiaoxian521	58cafbc73f	feat: 路由`meta`添加`activePath`可将某个菜单激活，主要用于通过`query`或`params`传参的路由	2023-06-13 22:18:23 +08:00
xiaoming	5d86b714a4	perf: 页面切换性能优化 (#600 ) * perf: 页面切换性能优化 * fix: 修复刷新页面时`router.beforeEach`调用两次的问题	2023-06-13 12:36:54 +08:00
xiaoxian521	aec2a35424	feat: 添加防抖、截流、复制自定义指令使用示例	2023-06-12 21:11:31 +08:00
xiaoxian521	3fd9b15698	feat: 添加文本复制自定义指令	2023-06-12 15:34:44 +08:00
xiaoxian521	d850496601	feat: 添加`防抖`和`节流`指令并规范自定义指令用法错误时的提示	2023-06-12 13:53:54 +08:00
xiaoxian521	c06ce94746	fix: 对未解绑的公共事件，在页面销毁时解绑	2023-06-09 18:03:37 +08:00
xiaoxian521	ba2ec8aca2	refactor: 使用`vueuse`的`useResizeObserver`函数替换`v-resize`自定义指令，从测试后的表现来看，性能会更好	2023-06-09 17:27:05 +08:00
xiaoxian521	f971cd5b30	feat: `pure-admin-table`高级用法添加自适应内容区高度`demo`	2023-06-09 16:51:09 +08:00
xiaoxian521	39833ce917	perf: 系统管理中表格均改为自适应内容区高度，需将`@pureadmin/table`升级到最新版	2023-06-09 14:01:46 +08:00
Snlan	56368c1163	perf: 优化首页的`GitHub`信息展示 Co-authored-by: Snlan <pridewui@foxmail.com>	2023-06-08 22:21:24 +08:00
ChasonZheng	3471e4a7e2	feat: 函数式弹窗示例代码添加子组件`prop`为`primitive`类型的`demo` (#587 )	2023-06-07 21:59:02 +08:00
xiaoxian521	f613a79def	fix: 修复搜索菜单功能的弹框遮罩未覆盖左侧菜单的问题	2023-06-07 11:00:47 +08:00
Snlan	04611d8b24	types: update	2023-06-06 19:09:20 +08:00
xiaoxian521	da6c2628d5	perf: `notice`消息提示组件空数据时添加`el-empty`组件	2023-06-06 15:00:55 +08:00
xiaoxian521	88a44f29d0	feat: 添加`vscode-docker`插件	2023-06-05 22:54:59 +08:00
xiaoxian521	315f78a825	fix: 修复国际化切换到英文模式刷新会回到中文模式	2023-06-05 19:29:11 +08:00
xiaoxian521	585adefbdd	chore: `eslint`相关库以及`typescript`更新至最新版	2023-06-04 21:54:05 +08:00
xiaoxian521	abf076c9c6	chore: update	2023-06-04 12:41:38 +08:00
				`@@ -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.2z"/></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.8zM608 937.6h326.4V598.4H608v339.2zm-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 32z"/><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.4z"/><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.4zm790.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.2z"/><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.4z"/><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.4zM288 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.8zm-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.8z"/></svg>