Merge remote-tracking branch 'origin/main' into gitee

2025-11-03 13:44:47 +08:00 · 2024-01-18 17:50:07 +08:00 · 2024-01-18 17:50:07 +08:00 · 90b4107496
commit 90b4107496
parent 666dc9bcb0 70c865b748
57 changed files with 828 additions and 408 deletions
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@ -292,7 +292,7 @@
 - 添加 `@pureadmin/table` 行、列拖拽示例
 - 添加 `@pureadmin/table` 右键菜单示例
 - 添加 `@pureadmin/table` 导出 `Excel` 示例
- 添加 `@pureadmin/table` 编辑单元格示例
+- 添加 `@pureadmin/table` 修改单元格示例
 - 添加 `@pureadmin/table` 水印示例
 - 添加 `@pureadmin/table` 打印示例
 - 添加 `@pureadmin/table` 内嵌 `echarts` 图表示例
--- a/README.en-US.md
+++ b/README.en-US.md
@ -141,7 +141,7 @@ After operating the above two commands, open `http://localhost:8080` in the brow
 Of course, you can also operate the `docker` project through the [Docker Desktop](https://www.docker.com/products/docker-desktop/) visual interface, as shown below

 <p align="center">
-  <img alt="docker" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
+  <img alt="docker-desktop" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
 </p>

 ## Change Log
--- a/README.md
+++ b/README.md
@ -141,7 +141,7 @@ docker run -dp 8080:80  --name pure-admin vue-pure-admin
 当然也可以通过 [Docker Desktop](https://www.docker.com/products/docker-desktop/) 可视化界面去操作 `docker` 项目，如下图

 <p align="center">
-  <img alt="docker" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
+  <img alt="docker-desktop" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
 </p>

 ## 更新日志
--- a/build/info.ts
+++ b/build/info.ts
@ -1,16 +1,26 @@
 import type { Plugin } from "vite";
-import picocolors from "picocolors";
 import { getPackageSize } from "./utils";
 import dayjs, { type Dayjs } from "dayjs";
 import duration from "dayjs/plugin/duration";
+import gradientString from "gradient-string";
+import boxen, { type Options as boxenOptions } from "boxen";
 dayjs.extend(duration);

+const welcomeMessage = gradientString("cyan", "magenta").multiline(
+  `Hello! 欢迎使用 vue-pure-admin\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
+);
+
+const boxenOprions: boxenOptions = {
+  padding: 0.5,
+  borderColor: "cyan",
+  borderStyle: "round"
+};
+
 export function viteBuildInfo(): Plugin {
  let config: { command: string };
  let startTime: Dayjs;
  let endTime: Dayjs;
  let outDir: string;
-  const { green, blue, bold } = picocolors;
  return {
    name: "vite:buildInfo",
    configResolved(resolvedConfig) {
@ -18,15 +28,7 @@ export function viteBuildInfo(): Plugin {
      outDir = resolvedConfig.build?.outDir ?? "dist";
    },
    buildStart() {
-      console.log(
-        bold(
-          green(
-            `👏欢迎使用${blue(
-              "[vue-pure-admin]"
-            )}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/pure-admin/vue-pure-admin`
-          )
-        )
-      );
+      console.log(boxen(welcomeMessage, boxenOprions));
      if (config.command === "build") {
        startTime = dayjs(new Date());
      }
@ -38,12 +40,13 @@ export function viteBuildInfo(): Plugin {
          folder: outDir,
          callback: (size: string) => {
            console.log(
-              bold(
-                green(
-                  `🎉恭喜打包完成（总用时${dayjs
+              boxen(
+                gradientString("cyan", "magenta").multiline(
+                  `🎉 恭喜打包完成（总用时${dayjs
                    .duration(endTime.diff(startTime))
                    .format("mm分ss秒")}，打包后的大小为${size}）`
-                )
+                ),
+                boxenOprions
              )
            );
          }
--- a/locales/en.yaml
+++ b/locales/en.yaml
@ -36,23 +36,23 @@ menus:
  hsfourZeroOne: "403"
  hsFive: "500"
  hscomponents: Components
-  hsdialog: Dialog Components
-  hsmessage: Message Tips Components
-  hsvideo: Video Components
-  hssegmented: Segmented Components
-  hswaterfall: Waterfall Components
-  hsmap: Map Components
-  hsdraggable: Draggable Components
+  hsdialog: Dialog
+  hsmessage: Message Tips
+  hsvideo: Video
+  hssegmented: Segmented
+  hswaterfall: Waterfall
+  hsmap: Map
+  hsdraggable: Draggable
  hssplitPane: Split Pane
-  hsbutton: Button Components
+  hsbutton: Button
  hscropping: Picture Cropping
  hsanimatecss: AnimateCss Selector
  hscountTo: Digital Animation
-  hsselector: Selector Components
+  hsselector: Scope Selector
  hsflowChart: Flow Chart
  hsseamless: Seamless Scroll
  hscontextmenu: Context Menu
-  hstypeit: Typeit Components
+  hstypeit: Typeit
  hsjsoneditor: JSON Editor
  hsmenus: MultiLevel Menu
  hsmenu1: Menu1
@ -102,15 +102,15 @@ menus:
  hsCascader: Area Cascader
  hsSwiper: Swiper Plugin
  hsVirtualList: Virtual List
+  hsCheckButton: Check Button
  hsPdf: PDF Preview
  hsExcel: Export Excel
  hsInfiniteScroll: Table Infinite Scroll
  hsSensitive: Sensitive Filter
  hsPinyin: PinYin
-  hsdanmaku: Danmaku Components
+  hsdanmaku: Danmaku
  hsPureTableBase: Base Usage
  hsPureTableHigh: High Usage
-  hsTree: Big Data Tree
  hsboard: Paint Board
  hsMenuoverflow: Menu Overflow Show Tooltip Text
  hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@ -36,23 +36,23 @@ menus:
  hsfourZeroOne: "403"
  hsFive: "500"
  hscomponents: 组件
-  hsdialog: 函数式弹框组件
-  hsmessage: 消息提示组件
-  hsvideo: 视频组件
-  hssegmented: 分段控制器组件
-  hswaterfall: 瀑布流无限滚动组件
-  hsmap: 地图组件
-  hsdraggable: 拖拽组件
+  hsdialog: 函数式弹框
+  hsmessage: 消息提示
+  hsvideo: 视频
+  hssegmented: 分段控制器
+  hswaterfall: 瀑布流无限滚动
+  hsmap: 地图
+  hsdraggable: 拖拽
  hssplitPane: 切割面板
-  hsbutton: 按钮组件
+  hsbutton: 按钮
  hscropping: 图片裁剪
-  hsanimatecss: AnimateCss选择器组件
+  hsanimatecss: animate.css选择器
  hscountTo: 数字动画
-  hsselector: 选择器组件
+  hsselector: 范围选择器
  hsflowChart: 流程图
  hsseamless: 无缝滚动
  hscontextmenu: 右键菜单
-  hstypeit: 打字机组件
+  hstypeit: 打字机
  hsjsoneditor: JSON编辑器
  hsmenus: 多级菜单
  hsmenu1: 菜单1
@ -102,15 +102,15 @@ menus:
  hsCascader: 区域级联选择器
  hsSwiper: Swiper插件
  hsVirtualList: 虚拟列表
+  hsCheckButton: 可选按钮
  hsPdf: PDF预览
  hsExcel: 导出Excel
  hsInfiniteScroll: 表格无限滚动
  hsSensitive: 敏感词过滤
  hsPinyin: 汉语拼音
-  hsdanmaku: 弹幕组件
+  hsdanmaku: 弹幕
  hsPureTableBase: 基础用法（23个示例）
  hsPureTableHigh: 高级用法（11个示例）
-  hsTree: 大数据树业务组件
  hsboard: 艺术画板
  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@ -18,7 +18,7 @@ const systemRouter = {
  children: [
    {
      path: "/system/user/index",
-      name: "User",
+      name: "SystemUser",
      meta: {
        icon: "flUser",
        title: "menus.hsUser",
@ -27,7 +27,7 @@ const systemRouter = {
    },
    {
      path: "/system/role/index",
-      name: "Role",
+      name: "SystemRole",
      meta: {
        icon: "role",
        title: "menus.hsRole",
@ -36,7 +36,7 @@ const systemRouter = {
    },
    {
      path: "/system/dept/index",
-      name: "Dept",
+      name: "SystemDept",
      meta: {
        icon: "dept",
        title: "menus.hsDept",
--- a/package.json
+++ b/package.json
@ -113,6 +113,7 @@
    "@iconify/vue": "^4.1.1",
    "@intlify/unplugin-vue-i18n": "^2.0.0",
    "@pureadmin/theme": "^3.2.0",
+    "@types/gradient-string": "^1.1.5",
    "@types/intro.js": "^5.1.5",
    "@types/js-cookie": "^3.0.6",
    "@types/node": "^20.11.0",
@ -125,6 +126,7 @@
    "@vitejs/plugin-vue": "^5.0.3",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "autoprefixer": "^10.4.16",
+    "boxen": "^7.1.1",
    "cloc": "^2.11.0",
    "cssnano": "^6.0.3",
    "eslint": "^8.56.0",
@ -132,9 +134,9 @@
    "eslint-define-config": "^2.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vue": "^9.20.0",
+    "gradient-string": "^2.0.2",
    "husky": "^8.0.3",
    "lint-staged": "^15.2.0",
-    "picocolors": "^1.0.0",
    "postcss": "^8.4.33",
    "postcss-html": "^1.6.0",
    "postcss-import": "^15.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -196,6 +196,9 @@ devDependencies:
  '@pureadmin/theme':
    specifier: ^3.2.0
    version: 3.2.0
+  '@types/gradient-string':
+    specifier: ^1.1.5
+    version: 1.1.5
  '@types/intro.js':
    specifier: ^5.1.5
    version: 5.1.5
@ -232,6 +235,9 @@ devDependencies:
  autoprefixer:
    specifier: ^10.4.16
    version: 10.4.16(postcss@8.4.33)
+  boxen:
+    specifier: ^7.1.1
+    version: 7.1.1
  cloc:
    specifier: ^2.11.0
    version: 2.11.0
@ -253,15 +259,15 @@ devDependencies:
  eslint-plugin-vue:
    specifier: ^9.20.0
    version: 9.20.0(eslint@8.56.0)
+  gradient-string:
+    specifier: ^2.0.2
+    version: 2.0.2
  husky:
    specifier: ^8.0.3
    version: 8.0.3
  lint-staged:
    specifier: ^15.2.0
    version: 15.2.0
-  picocolors:
-    specifier: ^1.0.0
-    version: 1.0.0
  postcss:
    specifier: ^8.4.33
    version: 8.4.33
@ -1982,6 +1988,12 @@ packages:
      '@types/node': 20.11.0
    dev: false

+  /@types/gradient-string@1.1.5:
+    resolution: {integrity: sha512-Z2VPQ0q+IhrAO7XjJSjpDsoPc+CsCshRNah1IE9LCo/NzHMHylssvx73i0BAKzuaGj9cdhmgq9rLaietpYAbKQ==}
+    dependencies:
+      '@types/tinycolor2': 1.4.6
+    dev: true
+
  /@types/intro.js@5.1.5:
    resolution: {integrity: sha512-TT1d8ayz07svlBcoqh26sNpQaU6bBpdFcCC+IMZHp46NNX2mYAHAVefM3wCmQSd4UWhhObeMjFByw2IaPKOXlw==}
    dev: true
@ -2067,6 +2079,10 @@ packages:
    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
    dev: false

+  /@types/tinycolor2@1.4.6:
+    resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
+    dev: true
+
  /@types/web-bluetooth@0.0.14:
    resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
    dev: false
@ -2816,6 +2832,12 @@ packages:
    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
    dev: false

+  /ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+    dependencies:
+      string-width: 4.2.3
+    dev: true
+
  /ansi-escapes@4.3.2:
    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
    engines: {node: '>=8'}
@ -3036,6 +3058,20 @@ packages:
    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
    dev: true

+  /boxen@7.1.1:
+    resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 7.0.1
+      chalk: 5.3.0
+      cli-boxes: 3.0.0
+      string-width: 5.1.2
+      type-fest: 2.19.0
+      widest-line: 4.0.1
+      wrap-ansi: 8.1.0
+    dev: true
+
  /brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
    dependencies:
@ -3142,6 +3178,11 @@ packages:
    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
    engines: {node: '>=10'}

+  /camelcase@7.0.1:
+    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
+    engines: {node: '>=14.16'}
+    dev: true
+
  /caniuse-api@3.0.0:
    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
    dependencies:
@ -3229,6 +3270,11 @@ packages:
    resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==}
    dev: false

+  /cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+    dev: true
+
  /cli-cursor@4.0.0:
    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@ -4747,6 +4793,14 @@ packages:
  /graceful-fs@4.2.11:
    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}

+  /gradient-string@2.0.2:
+    resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
+    engines: {node: '>=10'}
+    dependencies:
+      chalk: 4.1.2
+      tinygradient: 1.1.5
+    dev: true
+
  /graphemer@1.4.0:
    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
    dev: true
@ -8338,6 +8392,17 @@ packages:
    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
    dev: false

+  /tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: true
+
+  /tinygradient@1.1.5:
+    resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
+    dependencies:
+      '@types/tinycolor2': 1.4.6
+      tinycolor2: 1.6.0
+    dev: true
+
  /tippy.js@6.3.7:
    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
    dependencies:
@ -8446,6 +8511,11 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+    dev: true
+
  /type-fest@3.13.1:
    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
    engines: {node: '>=14.16'}
@ -8979,6 +9049,13 @@ packages:
    dependencies:
      isexe: 2.0.0

+  /widest-line@4.0.1:
+    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+    dev: true
+
  /wildcard@1.1.2:
    resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
    dev: false
--- a/src/components/ReAnimateSelector/src/index.vue
+++ b/src/components/ReAnimateSelector/src/index.vue
@ -72,11 +72,11 @@ function onMouseleave() {

 <template>
  <el-select
-    class="!w-[200px]"
-    :model-value="inputValue"
-    placeholder="请选择动画"
    clearable
    filterable
+    placeholder="请选择动画"
+    popper-class="pure-animate-popper"
+    :model-value="inputValue"
    :filter-method="filterMethod"
    @clear="onClear"
  >
@ -121,3 +121,9 @@ function onMouseleave() {
    </template>
  </el-select>
 </template>
+
+<style>
+.pure-animate-popper {
+  min-width: 0 !important;
+}
+</style>
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@ -129,6 +129,11 @@ export default defineComponent({

    onUnmounted(() => {
      cropper.value?.destroy();
+      isReady.value = false;
+      cropper.value = null;
+      imgBase64.value = "";
+      scaleX = 1;
+      scaleY = 1;
    });

    useResizeObserver(tippyElRef, () => handCropper("reset"));
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@ -121,7 +121,7 @@ watch(
 </script>

 <template>
-  <div class="selector w-[220px]">
+  <div class="selector">
    <el-input v-model="inputValue" disabled>
      <template #append>
        <el-popover
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@ -423,7 +423,7 @@ function openMenu(tag, e) {
  }

  currentSelect.value = tag;
-  const menuMinWidth = 105;
+  const menuMinWidth = 140;
  const offsetLeft = unref(containerDom).getBoundingClientRect().left;
  const offsetWidth = unref(containerDom).offsetWidth;
  const maxLeft = offsetWidth - menuMinWidth;
--- a/src/router/enums.ts
+++ b/src/router/enums.ts
@ -4,11 +4,11 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
  able = 1,
  components = 2,
  table = 3,
-  frame = 4,
-  nested = 5,
-  result = 6,
-  error = 7,
-  list = 8,
+  list = 4,
+  result = 5,
+  error = 6,
+  frame = 7,
+  nested = 8,
  permission = 9,
  system = 10,
  tabs = 11,
@ -26,11 +26,11 @@ export {
  able,
  components,
  table,
-  frame,
-  nested,
+  list,
  result,
  error,
-  list,
+  frame,
+  nested,
  permission,
  system,
  tabs,
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@ -10,30 +10,6 @@ export default {
    rank: able
  },
  children: [
-    {
-      path: "/able/videoFrame",
-      name: "VideoFrame",
-      component: () => import("@/views/able/video-frame/index.vue"),
-      meta: {
-        title: $t("menus.hsVideoFrame")
-      }
-    },
-    {
-      path: "/able/wavesurfer",
-      name: "Wavesurfer",
-      component: () => import("@/views/able/wavesurfer/index.vue"),
-      meta: {
-        title: $t("menus.hsWavesurfer")
-      }
-    },
-    {
-      path: "/able/directives",
-      name: "Directives",
-      component: () => import("@/views/able/directives.vue"),
-      meta: {
-        title: $t("menus.hsOptimize")
-      }
-    },
    {
      path: "/able/watermark",
      name: "WaterMark",
@ -59,35 +35,11 @@ export default {
      }
    },
    {
-      path: "/able/iconSelect",
-      name: "IconSelect",
-      component: () => import("@/views/able/icon-select.vue"),
+      path: "/able/excel",
+      name: "Excel",
+      component: () => import("@/views/able/excel.vue"),
      meta: {
-        title: $t("menus.hsIconSelect")
-      }
-    },
-    {
-      path: "/able/timeline",
-      name: "TimeLine",
-      component: () => import("@/views/able/timeline.vue"),
-      meta: {
-        title: $t("menus.hsTimeline")
-      }
-    },
-    {
-      path: "/able/menuTree",
-      name: "MenuTree",
-      component: () => import("@/views/able/menu-tree.vue"),
-      meta: {
-        title: $t("menus.hsMenuTree")
-      }
-    },
-    {
-      path: "/able/lineTree",
-      name: "LineTree",
-      component: () => import("@/views/able/line-tree.vue"),
-      meta: {
-        title: $t("menus.hsLineTree")
+        title: $t("menus.hsExcel")
      }
    },
    {
@ -98,6 +50,34 @@ export default {
        title: $t("menus.hsDebounce")
      }
    },
+    {
+      path: "/able/directives",
+      name: "Directives",
+      component: () => import("@/views/able/directives.vue"),
+      meta: {
+        title: $t("menus.hsOptimize")
+      }
+    },
+    {
+      path: "/able/draggable",
+      name: "Draggable",
+      component: () => import("@/views/able/draggable.vue"),
+      meta: {
+        title: $t("menus.hsdraggable"),
+        transition: {
+          enterTransition: "animate__zoomIn",
+          leaveTransition: "animate__zoomOut"
+        }
+      }
+    },
+    {
+      path: "/able/pdf",
+      name: "Pdf",
+      component: () => import("@/views/able/pdf.vue"),
+      meta: {
+        title: $t("menus.hsPdf")
+      }
+    },
    {
      path: "/able/barcode",
      name: "BarCode",
@ -115,43 +95,47 @@ export default {
      }
    },
    {
-      path: "/able/cascader",
-      name: "Cascader",
-      component: () => import("@/views/able/cascader.vue"),
+      path: "/able/map",
+      name: "MapPage",
+      component: () => import("@/views/able/map.vue"),
      meta: {
-        title: $t("menus.hsCascader")
+        title: $t("menus.hsmap"),
+        keepAlive: true,
+        transition: {
+          name: "fade"
+        }
      }
    },
    {
-      path: "/able/swiper",
-      name: "Swiper",
-      component: () => import("@/views/able/swiper.vue"),
+      path: "/able/wavesurfer",
+      name: "Wavesurfer",
+      component: () => import("@/views/able/wavesurfer/index.vue"),
      meta: {
-        title: $t("menus.hsSwiper")
+        title: $t("menus.hsWavesurfer")
      }
    },
    {
-      path: "/able/virtualList",
-      name: "VirtualList",
-      component: () => import("@/views/able/virtual-list/index.vue"),
+      path: "/able/video",
+      name: "VideoPage",
+      component: () => import("@/views/able/video.vue"),
      meta: {
-        title: $t("menus.hsVirtualList")
+        title: $t("menus.hsvideo")
      }
    },
    {
-      path: "/able/pdf",
-      name: "Pdf",
-      component: () => import("@/views/able/pdf.vue"),
+      path: "/able/videoFrame",
+      name: "VideoFrame",
+      component: () => import("@/views/able/video-frame/index.vue"),
      meta: {
-        title: $t("menus.hsPdf")
+        title: $t("menus.hsVideoFrame")
      }
    },
    {
-      path: "/able/excel",
-      name: "Excel",
-      component: () => import("@/views/able/excel.vue"),
+      path: "/able/danmaku",
+      name: "Danmaku",
+      component: () => import("@/views/able/danmaku/index.vue"),
      meta: {
-        title: $t("menus.hsExcel")
+        title: $t("menus.hsdanmaku")
      }
    },
    {
@ -162,6 +146,30 @@ export default {
        title: $t("menus.hsInfiniteScroll")
      }
    },
+    {
+      path: "/able/menuTree",
+      name: "MenuTree",
+      component: () => import("@/views/able/menu-tree.vue"),
+      meta: {
+        title: $t("menus.hsMenuTree")
+      }
+    },
+    {
+      path: "/able/lineTree",
+      name: "LineTree",
+      component: () => import("@/views/able/line-tree.vue"),
+      meta: {
+        title: $t("menus.hsLineTree")
+      }
+    },
+    {
+      path: "/able/typeit",
+      name: "Typeit",
+      component: () => import("@/views/able/typeit.vue"),
+      meta: {
+        title: $t("menus.hstypeit")
+      }
+    },
    {
      path: "/able/sensitive",
      name: "Sensitive",
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@ -15,85 +15,31 @@ export default {
      name: "DialogPage",
      component: () => import("@/views/components/dialog/index.vue"),
      meta: {
-        title: $t("menus.hsdialog"),
-        extraIcon: "IF-pure-iconfont-new svg",
-        transition: {
-          enterTransition: "animate__fadeInLeft",
-          leaveTransition: "animate__fadeOutRight"
-        }
+        title: $t("menus.hsdialog")
      }
    },
    {
      path: "/components/message",
      name: "Message",
-      component: () => import("@/views/components/message/index.vue"),
+      component: () => import("@/views/components/message.vue"),
      meta: {
        title: $t("menus.hsmessage")
      }
    },
    {
-      path: "/components/segmented",
-      name: "Segmented",
-      component: () => import("@/views/components/segmented/index.vue"),
+      path: "/components/iconSelect",
+      name: "IconSelect",
+      component: () => import("@/views/components/icon-select.vue"),
      meta: {
-        title: $t("menus.hssegmented"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.hsIconSelect")
      }
    },
    {
-      path: "/components/waterfall",
-      name: "Waterfall",
-      component: () => import("@/views/components/waterfall/index.vue"),
+      path: "/components/animatecss",
+      name: "AnimateCss",
+      component: () => import("@/views/components/animatecss.vue"),
      meta: {
-        title: $t("menus.hswaterfall")
-      }
-    },
-    {
-      path: "/components/video",
-      name: "VideoPage",
-      component: () => import("@/views/components/video/index.vue"),
-      meta: {
-        title: $t("menus.hsvideo")
-      }
-    },
-    {
-      path: "/components/map",
-      name: "MapPage",
-      component: () => import("@/views/components/map/index.vue"),
-      meta: {
-        title: $t("menus.hsmap"),
-        keepAlive: true,
-        transition: {
-          name: "fade"
-        }
-      }
-    },
-    {
-      path: "/components/draggable",
-      name: "Draggable",
-      component: () => import("@/views/components/draggable/index.vue"),
-      meta: {
-        title: $t("menus.hsdraggable"),
-        transition: {
-          enterTransition: "animate__zoomIn",
-          leaveTransition: "animate__zoomOut"
-        }
-      }
-    },
-    {
-      path: "/components/splitPane",
-      name: "SplitPane",
-      component: () => import("@/views/components/split-pane/index.vue"),
-      meta: {
-        title: $t("menus.hssplitPane")
-      }
-    },
-    {
-      path: "/components/button",
-      name: "ButtonPage",
-      component: () => import("@/views/components/button/index.vue"),
-      meta: {
-        title: $t("menus.hsbutton")
+        title: $t("menus.hsanimatecss")
      }
    },
    {
@ -105,35 +51,76 @@ export default {
      }
    },
    {
-      path: "/components/animatecss",
-      name: "AnimateCss",
-      component: () => import("@/views/components/animatecss/index.vue"),
+      path: "/components/checkButton",
+      name: "CheckButton",
+      component: () => import("@/views/components/check-button.vue"),
      meta: {
-        title: $t("menus.hsanimatecss")
+        title: $t("menus.hsCheckButton"),
+        extraIcon: "IF-pure-iconfont-new svg"
      }
    },
    {
-      path: "/components/countTo",
-      name: "CountTo",
-      component: () => import("@/views/components/count-to/index.vue"),
+      path: "/components/segmented",
+      name: "Segmented",
+      component: () => import("@/views/components/segmented.vue"),
      meta: {
-        title: $t("menus.hscountTo")
+        title: $t("menus.hssegmented")
+      }
+    },
+    {
+      path: "/components/cascader",
+      name: "Cascader",
+      component: () => import("@/views/components/cascader.vue"),
+      meta: {
+        title: $t("menus.hsCascader")
      }
    },
    {
      path: "/components/selector",
      name: "Selector",
-      component: () => import("@/views/components/selector/index.vue"),
+      component: () => import("@/views/components/selector.vue"),
      meta: {
        title: $t("menus.hsselector")
      }
    },
    {
-      path: "/components/seamlessScroll",
-      name: "SeamlessScroll",
-      component: () => import("@/views/components/seamless-scroll/index.vue"),
+      path: "/components/waterfall",
+      name: "Waterfall",
+      component: () => import("@/views/components/waterfall/index.vue"),
      meta: {
-        title: $t("menus.hsseamless")
+        title: $t("menus.hswaterfall")
+      }
+    },
+    {
+      path: "/components/splitPane",
+      name: "SplitPane",
+      component: () => import("@/views/components/split-pane.vue"),
+      meta: {
+        title: $t("menus.hssplitPane")
+      }
+    },
+    {
+      path: "/components/swiper",
+      name: "Swiper",
+      component: () => import("@/views/components/swiper.vue"),
+      meta: {
+        title: $t("menus.hsSwiper")
+      }
+    },
+    {
+      path: "/components/timeline",
+      name: "TimeLine",
+      component: () => import("@/views/components/timeline.vue"),
+      meta: {
+        title: $t("menus.hsTimeline")
+      }
+    },
+    {
+      path: "/components/countTo",
+      name: "CountTo",
+      component: () => import("@/views/components/count-to.vue"),
+      meta: {
+        title: $t("menus.hscountTo")
      }
    },
    {
@ -144,28 +131,36 @@ export default {
        title: $t("menus.hscontextmenu")
      }
    },
-    {
-      path: "/components/typeit",
-      name: "Typeit",
-      component: () => import("@/views/components/typeit/index.vue"),
-      meta: {
-        title: $t("menus.hstypeit")
-      }
-    },
    {
      path: "/components/json-editor",
      name: "JsonEditor",
-      component: () => import("@/views/components/json-editor/index.vue"),
+      component: () => import("@/views/components/json-editor.vue"),
      meta: {
        title: $t("menus.hsjsoneditor")
      }
    },
    {
-      path: "/components/danmaku",
-      name: "Danmaku",
-      component: () => import("@/views/components/danmaku/index.vue"),
+      path: "/components/seamlessScroll",
+      name: "SeamlessScroll",
+      component: () => import("@/views/components/seamless-scroll.vue"),
      meta: {
-        title: $t("menus.hsdanmaku")
+        title: $t("menus.hsseamless")
+      }
+    },
+    {
+      path: "/components/virtualList",
+      name: "VirtualList",
+      component: () => import("@/views/components/virtual-list/index.vue"),
+      meta: {
+        title: $t("menus.hsVirtualList")
+      }
+    },
+    {
+      path: "/components/button",
+      name: "ButtonPage",
+      component: () => import("@/views/components/button.vue"),
+      meta: {
+        title: $t("menus.hsbutton")
      }
    }
  ]
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@ -52,8 +52,7 @@ export default {
              name: "Menu1-2-2",
              meta: {
                title: $t("menus.hsmenu1-2-2"),
-                keepAlive: true,
-                extraIcon: "IF-pure-iconfont-new svg"
+                keepAlive: true
              }
            }
          ]
--- a/src/views/components/danmaku/danmu.ts
+++ b/src/views/components/danmaku/danmu.ts
--- a/src/views/components/danmaku/index.vue
+++ b/src/views/components/danmaku/index.vue
--- a/src/views/components/draggable/index.vue
+++ b/src/views/components/draggable/index.vue
--- a/src/views/components/map/index.vue
+++ b/src/views/components/map/index.vue
--- a/src/views/components/typeit/index.vue
+++ b/src/views/components/typeit/index.vue
--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
--- a/src/views/components/animatecss/index.vue
+++ b/src/views/components/animatecss/index.vue
@ -25,10 +25,10 @@ watch(icon, () => {
          >
            animate.css
          </el-link>
-          选择器组件
+          选择器
        </span>
      </div>
    </template>
-    <ReAnimateSelector v-model="icon" />
+    <ReAnimateSelector v-model="icon" class="!w-[200px]" />
  </el-card>
 </template>
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@ -14,7 +14,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">通过iframe引入按钮页面</span>
+        <span class="font-medium">通过 iframe 引入按钮页面</span>
      </div>
    </template>
    <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
--- a/src/views/components/cascader.vue
+++ b/src/views/components/cascader.vue
@ -26,10 +26,10 @@ const handleChange = value => {
 <template>
  <el-card shadow="never">
    <template #header> <p class="font-medium">区域级联选择器</p> </template>
-    <el-row :gutter="20">
+    <el-row :gutter="24">
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center">
-          <span class="imp">
+          <span class="text-[var(--el-color-primary)]">
            1. 二级联动（不带“全部”选项）
            <el-cascader
              v-model="selectedOptions1"
@ -58,7 +58,7 @@ const handleChange = value => {
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="imp">
+          <span class="text-[var(--el-color-primary)]">
            2. 二级联动（带有“全部”选项）
            <el-cascader
              v-model="selectedOptions3"
@ -87,7 +87,7 @@ const handleChange = value => {
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="imp">
+          <span class="text-[var(--el-color-primary)]">
            3. 三级联动（不带“全部”选项）
            <el-cascader
              v-model="selectedOptions2"
@ -118,7 +118,7 @@ const handleChange = value => {
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center mt-3">
-          <span class="imp">
+          <span class="text-[var(--el-color-primary)]">
            4. 三级联动（带"全部选项"）
            <el-cascader
              v-model="selectedOptions4"
@ -150,9 +150,3 @@ const handleChange = value => {
    </el-row>
  </el-card>
 </template>
-
-<style scoped lang="scss">
-.imp {
-  color: var(--el-color-primary);
-}
-</style>
--- a/src/views/components/check-button.vue
+++ b/src/views/components/check-button.vue
@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+import { getKeyList } from "@pureadmin/utils";
+
+defineOptions({
+  name: "CheckButton"
+});
+
+const spaceSize = ref(20);
+const size = ref("default");
+
+const radio = ref("wait");
+const radioBox = ref("complete");
+const radioCustom = ref("progress");
+
+const checkboxGroup = ref(["apple", "tomato"]);
+const checkboxGroupBox = ref(["cucumber", "onion", "blueberry"]);
+const checkboxGroupCustom = ref(["tomato", "watermelon", "strawberry"]);
+
+/** 单选（可控制间距的按钮样式） */
+const checkTag = ref([
+  {
+    title: "等待中",
+    checked: false
+  },
+  {
+    title: "进行中",
+    checked: true
+  },
+  {
+    title: "已完成",
+    checked: false
+  }
+]);
+const curTagMap = ref({});
+function onChecked(tag, index) {
+  curTagMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkTag.value.map(item => (item.checked = false));
+  checkTag.value[index].checked = curTagMap.value[index].checked;
+  const { title, checked } = curTagMap.value[index];
+  message(checked ? `已选中${title}` : `取消选中${title}`, {
+    type: "success"
+  });
+}
+
+/** 多选（可控制间距的按钮样式） */
+const checkGroupTag = ref([
+  {
+    title: "苹果",
+    checked: true
+  },
+  {
+    title: "西红柿",
+    checked: true
+  },
+  {
+    title: "香蕉",
+    checked: false
+  }
+]);
+const curTagGroupMap = ref({});
+function onGroupChecked(tag, index) {
+  curTagGroupMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          可选按钮
+          <br />
+          <el-radio-group v-model="size" size="small">
+            <el-radio-button label="large">大尺寸</el-radio-button>
+            <el-radio-button label="default">默认尺寸</el-radio-button>
+            <el-radio-button label="small">小尺寸</el-radio-button>
+            <el-radio-button label="disabled">禁用</el-radio-button>
+          </el-radio-group>
+        </span>
+      </div>
+    </template>
+    <p class="mb-2">单选（紧凑风格的按钮样式）</p>
+    <el-radio-group
+      v-model="radio"
+      :size="size as any"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio-button label="wait">等待中</el-radio-button>
+      <el-radio-button label="progress">进行中</el-radio-button>
+      <el-radio-button label="complete">已完成</el-radio-button>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">单选（带有边框）</p>
+    <el-radio-group
+      v-model="radioBox"
+      :size="size as any"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio label="wait" border>等待中</el-radio>
+      <el-radio label="progress" border>进行中</el-radio>
+      <el-radio label="complete" border>已完成</el-radio>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">单选（自定义内容）</p>
+    <el-radio-group
+      v-model="radioCustom"
+      :size="size as any"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio-button label="wait">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-8-fill" class="mr-1" />
+          等待中
+        </span>
+      </el-radio-button>
+      <el-radio-button label="progress">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-6-line" class="mr-1" />
+          进行中
+        </span>
+      </el-radio-button>
+      <el-radio-button label="complete">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-8-line" class="mr-1" />
+          已完成
+        </span>
+      </el-radio-button>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">多选（紧凑风格的按钮样式）</p>
+    <el-checkbox-group
+      v-model="checkboxGroup"
+      :size="size as any"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox-button label="apple">苹果</el-checkbox-button>
+      <el-checkbox-button label="tomato">西红柿</el-checkbox-button>
+      <el-checkbox-button label="banana">香蕉</el-checkbox-button>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p class="mb-2">多选（带有边框）</p>
+    <el-checkbox-group
+      v-model="checkboxGroupBox"
+      :size="size as any"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox label="cucumber" border>黄瓜</el-checkbox>
+      <el-checkbox label="onion" border>洋葱</el-checkbox>
+      <el-checkbox label="blueberry" border>蓝莓</el-checkbox>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p class="mb-2">多选（来点不一样的体验）</p>
+    <el-checkbox-group
+      v-model="checkboxGroupCustom"
+      class="pure-checkbox"
+      :size="size as any"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox-button label="tomato">
+        <span class="flex">
+          <IconifyIconOnline icon="streamline-emojis:tomato" class="mr-1" />
+          番茄
+        </span>
+      </el-checkbox-button>
+      <el-checkbox-button label="watermelon">
+        <span class="flex">
+          <IconifyIconOnline
+            icon="streamline-emojis:watermelon-1"
+            class="mr-1"
+          />
+          西瓜
+        </span>
+      </el-checkbox-button>
+      <el-checkbox-button label="strawberry">
+        <span class="flex">
+          <IconifyIconOnline
+            icon="streamline-emojis:strawberry-1"
+            class="mr-1"
+          />
+          草莓
+        </span>
+      </el-checkbox-button>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p>可控制间距的按钮样式</p>
+    <el-slider
+      v-model="spaceSize"
+      class="mb-2 !w-[300px]"
+      :show-tooltip="false"
+      :disabled="size === 'disabled'"
+    />
+    <p class="mb-2">单选</p>
+    <el-space wrap :size="spaceSize">
+      <el-check-tag
+        v-for="(tag, index) in checkTag"
+        :key="index"
+        class="select-none"
+        :checked="tag.checked"
+        @change="onChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <p class="mb-2 mt-4">
+      多选
+      {{
+        getKeyList(
+          checkGroupTag.filter(tag => tag.checked),
+          "title"
+        )
+      }}
+    </p>
+    <el-space wrap :size="spaceSize">
+      <el-check-tag
+        v-for="(tag, index) in checkGroupTag"
+        :key="index"
+        class="select-none"
+        :checked="tag.checked"
+        @change="onGroupChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+
+:deep(.pure-checkbox) {
+  .el-checkbox-button {
+    /* 选中时的自定义样式 */
+    &.is-checked {
+      .el-checkbox-button__inner {
+        color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-8);
+        border-color: transparent;
+        border-left-color: #fff;
+      }
+    }
+
+    /* 禁用时的自定义样式 */
+    &.is-disabled {
+      .el-checkbox-button__inner {
+        color: var(--el-disabled-text-color);
+        background-color: var(
+          --el-button-disabled-bg-color,
+          var(--el-fill-color-blank)
+        );
+        border-color: var(
+          --el-button-disabled-border-color,
+          var(--el-border-color-light)
+        );
+      }
+    }
+  }
+}
+</style>
--- a/src/views/components/contextmenu/basic.vue
+++ b/src/views/components/contextmenu/basic.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <p class="mb-2">基本使用</p>
+    <p class="mb-2">基础用法</p>
    <div v-contextmenu:contextmenu class="wrapper">
      <code>右键点击此区域</code>
    </div>
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@ -13,12 +13,12 @@ defineOptions({
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">右键菜单组件</span>
+        <span class="font-medium">右键菜单</span>
      </div>
    </template>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
-        <!-- 基本使用 -->
+        <!-- 基础用法 -->
        <basic />
      </el-col>
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
--- a/src/views/components/count-to.vue
+++ b/src/views/components/count-to.vue
@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
+
+defineOptions({
+  name: "CountTo"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">数字动画</span>
+      </div>
+    </template>
+    <ReNormalCountTo
+      prefix="$"
+      :duration="1000"
+      :color="'#409EFF'"
+      :fontSize="'2em'"
+      :startVal="1"
+      :endVal="1000"
+    />
+    <br />
+    <ul class="flex">
+      <ReboundCountTo
+        v-for="(num, inx) of [1, 6, 6, 6]"
+        :key="inx"
+        :i="num"
+        :blur="inx"
+        :delay="inx + 1"
+      />
+    </ul>
+  </el-card>
+</template>
--- a/src/views/components/count-to/index.vue
+++ b/src/views/components/count-to/index.vue
@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
-
-defineOptions({
-  name: "CountTo"
-});
-</script>
-
-<template>
-  <el-card shadow="never">
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">数字动画组件</span>
-      </div>
-    </template>
-    <div class="flex items-center">
-      <ReNormalCountTo
-        prefix="$"
-        :duration="1000"
-        :color="'#409EFF'"
-        :fontSize="'2em'"
-        :startVal="1"
-        :endVal="1000"
-      />
-      <ul class="flex ml-8">
-        <ReboundCountTo
-          v-for="(num, inx) of [1, 6, 6, 6]"
-          :key="inx"
-          :i="num"
-          :blur="inx"
-          :delay="inx + 1"
-        />
-      </ul>
-    </div>
-  </el-card>
-</template>
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@ -1,6 +1,6 @@
 <script setup lang="tsx">
-import { ref } from "vue";
 import avatar from "./avatar.png";
+import { ref, onBeforeUnmount } from "vue";
 import ReCropper from "@/components/ReCropper";
 import { formatBytes } from "@pureadmin/utils";

@ -9,6 +9,7 @@ defineOptions({
 });

 const infos = ref();
+const popoverRef = ref();
 const refCropper = ref();
 const showPopover = ref(false);
 const cropperImg = ref<string>("");
@ -18,6 +19,10 @@ function onCropper({ base64, blob, info }) {
  infos.value = info;
  cropperImg.value = base64;
 }
+
+onBeforeUnmount(() => {
+  popoverRef.value.hide();
+});
 </script>

 <template>
@ -25,7 +30,7 @@ function onCropper({ base64, blob, info }) {
    <template #header>
      <div class="card-header">
        <span class="font-medium">
-          图片裁剪组件，基于开源的
+          图片裁剪，基于开源的
          <el-link
            href="https://fengyuanchen.github.io/cropperjs/"
            target="_blank"
@ -37,39 +42,41 @@ function onCropper({ base64, blob, info }) {
        </span>
      </div>
    </template>
-    <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 v-loading="!showPopover" element-loading-background="transparent">
+      <el-popover
+        ref="popoverRef"
+        :visible="showPopover"
+        placement="right"
+        width="300px"
+      >
+        <template #reference>
+          <ReCropper
+            ref="refCropper"
+            class="w-[30vw]"
+            :src="avatar"
+            circled
+            @cropper="onCropper"
+            @readied="showPopover = true"
+          />
+        </template>
+        <div class="flex flex-wrap justify-center items-center text-center">
+          <el-image
+            v-if="cropperImg"
+            :src="cropperImg"
+            :preview-src-list="Array.of(cropperImg)"
+            fit="cover"
+          />
+          <div v-if="infos" class="mt-1">
+            <p>
+              图像大小：{{ parseInt(infos.width) }} ×
+              {{ parseInt(infos.height) }}像素
+            </p>
+            <p>
+              文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
+            </p>
+          </div>
        </div>
-      </div>
-    </el-popover>
+      </el-popover>
+    </div>
  </el-card>
 </template>
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@ -20,8 +20,8 @@ const router = useRouter();

 function onBaseClick() {
  addDialog({
-    title: "基本使用",
-    contentRenderer: () => <p>弹框内容-基本使用</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
+    title: "基础用法",
+    contentRenderer: () => <p>弹框内容-基础用法</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
  });
 }

@ -422,7 +422,7 @@ function onBeforeSureClick() {
    title: "点击底部确定按钮的回调",
    contentRenderer: () => (
      <p>
-        弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+        弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
      </p>
    ),
    beforeSure: (done, { options, index }) => {
@ -454,15 +454,16 @@ function onBeforeSureClick() {
          ，采用函数式调用弹框组件（更多操作实例请参考
          <span
            class="cursor-pointer text-primary"
-            @click="router.push({ name: 'Dept' })"
-            >系统管理页面</span
+            @click="router.push({ name: 'SystemDept' })"
          >
+            系统管理页面
+          </span>
          ）
        </span>
      </div>
    </template>
    <el-space wrap>
-      <el-button @click="onBaseClick"> 基本使用 </el-button>
+      <el-button @click="onBaseClick"> 基础用法 </el-button>
      <el-button @click="onDraggableClick"> 可拖拽 </el-button>
      <el-button @click="onFullscreenClick"> 全屏 </el-button>
      <el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
@ -510,7 +511,7 @@ function onBeforeSureClick() {
        点击底部取消按钮的回调（会暂停弹框的关闭）
      </el-button>
      <el-button @click="onBeforeSureClick">
-        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
      </el-button>
    </el-space>
  </el-card>
--- a/src/views/components/icon-select.vue
+++ b/src/views/components/icon-select.vue
@ -16,6 +16,6 @@ const icon = ref("ep:add-location");
        <span class="font-medium">图标选择器</span>
      </div>
    </template>
-    <IconSelect v-model="icon" />
+    <IconSelect v-model="icon" class="w-[200px]" />
  </el-card>
 </template>
--- a/src/views/components/json-editor/index.vue
+++ b/src/views/components/json-editor/index.vue
@ -76,7 +76,7 @@ watch(
    <template #header>
      <div class="card-header">
        <span class="font-medium">
-          JSON编辑器组件，采用开源的
+          JSON编辑器，采用开源的
          <el-link
            href="https://github.com/leezng/vue-json-pretty"
            target="_blank"
@ -87,7 +87,7 @@ watch(
          （支持大数据量）。
        </span>
        <span class="font-medium">
-          当然我们还有一款代码编辑器组件推荐（这里就不做演示了），采用开源的
+          当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
          <el-link
            href="https://github.com/surmon-china/vue-codemirror"
            target="_blank"
--- a/src/views/components/message/index.vue
+++ b/src/views/components/message/index.vue
@ -14,7 +14,7 @@ defineOptions({
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium"> Message提示 </span>
+        <span class="font-medium"> 消息提示 </span>
      </div>
    </template>

--- a/src/views/components/seamless-scroll/index.vue
+++ b/src/views/components/seamless-scroll/index.vue
@ -53,7 +53,7 @@ function changeDirection(val) {
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
-          <span class="font-medium">无缝滚动示例</span>
+          <span class="font-medium">无缝滚动</span>
          <el-button
            class="button"
            link
--- a/src/views/components/segmented/index.vue
+++ b/src/views/components/segmented/index.vue
@ -30,6 +30,30 @@ const optionsBasis: Array<OptionsType> = [
  }
 ];

+/** tooltip 提示 */
+const optionsTooltip: Array<OptionsType> = [
+  {
+    label: "周一",
+    tip: "周一启航，新的篇章"
+  },
+  {
+    label: "周二",
+    tip: "周二律动，携手共进"
+  },
+  {
+    label: "周三",
+    tip: "周三昂扬，激情不减"
+  },
+  {
+    label: "周四",
+    tip: "周四精进，事半功倍"
+  },
+  {
+    label: "周五",
+    tip: "周五喜悦，收尾归档"
+  }
+];
+
 /** 禁用 */
 const optionsDisabled: Array<OptionsType> = [
  {
@ -51,7 +75,7 @@ const optionsDisabled: Array<OptionsType> = [
  }
 ];

-/** 设置图标 */
+/** 可设置图标 */
 const optionsIcon: Array<OptionsType> = [
  {
    label: "周一",
@ -65,8 +89,7 @@ const optionsIcon: Array<OptionsType> = [
    icon: "terminalWindowLine"
  },
  {
-    label: "周四",
-    icon: "streamline-emojis:airplane"
+    label: "周四"
  },
  {
    label: "周五",
@ -99,7 +122,7 @@ const optionsLabel: Array<OptionsType> = [
    label: () => (
      <div>
        {h(useRenderIcon(HomeFilled), {
-          class: "m-auto w-[20px] h-[20px]"
+          class: "m-auto mt-1 w-[18px] h-[18px]"
        })}
        <p>周一</p>
      </div>
@ -109,7 +132,7 @@ const optionsLabel: Array<OptionsType> = [
    label: () => (
      <div>
        {h(useRenderIcon("terminalWindowLine"), {
-          class: "m-auto w-[20px] h-[20px]"
+          class: "m-auto mt-1 w-[18px] h-[18px]"
        })}
        <p>周二</p>
      </div>
@ -119,7 +142,7 @@ const optionsLabel: Array<OptionsType> = [
    label: () => (
      <div>
        {h(useRenderIcon("streamline-emojis:cow-face"), {
-          class: "m-auto w-[20px] h-[20px]"
+          class: "m-auto mt-1 w-[18px] h-[18px]"
        })}
        <p>周三</p>
      </div>
@ -142,7 +165,7 @@ const optionsChange: Array<OptionsType> = [
  }
 ];

-/** change事件 */
+/** change 事件 */
 function onChange({ index, option }) {
  const { label, value } = option;
  message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
@ -158,26 +181,37 @@ function onChange({ index, option }) {
        <span class="font-medium">分段控制器</span>
      </div>
    </template>
-    <p class="mb-2">
-      基础用法（v-model）<span class="text-primary">
-        {{ optionsBasis[value].label }}
-      </span>
-    </p>
-    <Segmented v-model="value" :options="optionsBasis" />
-    <el-divider />
-    <p class="mb-2">禁用</p>
-    <Segmented :options="optionsDisabled" />
-    <el-divider />
-    <p class="mb-2">设置图标</p>
-    <Segmented :options="optionsIcon" />
-    <el-divider />
-    <p class="mb-2">只设置图标</p>
-    <Segmented :options="optionsOnlyIcon" />
-    <el-divider />
-    <p class="mb-2">自定义渲染</p>
-    <Segmented :options="optionsLabel" />
-    <el-divider />
-    <p class="mb-2">change事件</p>
-    <Segmented :options="optionsChange" @change="onChange" />
+    <el-scrollbar>
+      <p class="mb-2">
+        基础用法（v-model）<span class="text-primary">
+          {{ optionsBasis[value].label }}
+        </span>
+      </p>
+      <Segmented v-model="value" :options="optionsBasis" />
+      <el-divider />
+      <p class="mb-2">tooltip 提示</p>
+      <Segmented :options="optionsTooltip" />
+      <el-divider />
+      <p class="mb-2">change 事件</p>
+      <Segmented :options="optionsChange" @change="onChange" />
+      <el-divider />
+      <p class="mb-2">禁用</p>
+      <Segmented :options="optionsDisabled" />
+      <el-divider />
+      <p class="mb-2">可设置图标</p>
+      <Segmented :options="optionsIcon" />
+      <el-divider />
+      <p class="mb-2">只设置图标</p>
+      <Segmented :options="optionsOnlyIcon" />
+      <el-divider />
+      <p class="mb-2">自定义渲染</p>
+      <Segmented :options="optionsLabel" />
+    </el-scrollbar>
  </el-card>
 </template>
+
+<style scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+</style>
--- a/src/views/components/selector/index.vue
+++ b/src/views/components/selector/index.vue
@ -9,7 +9,7 @@ defineOptions({
 const selectRange = ref<string>("");
 const dataLists = ref([
  {
-    title: "基本使用",
+    title: "基础用法",
    echo: [],
    disabled: false
  },
--- a/src/views/components/split-pane/index.vue
+++ b/src/views/components/split-pane/index.vue
@ -23,7 +23,7 @@ const settingTB: ContextProps = reactive({
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">切割面板组件</span>
+        <span class="font-medium">切割面板</span>
      </div>
    </template>
    <div class="split-pane">
@ -31,17 +31,21 @@ const settingTB: ContextProps = reactive({
        <!-- #paneL 表示指定该组件为左侧面板 -->
        <template #paneL>
          <!-- 自定义左侧面板的内容 -->
-          <div class="dv-a">A</div>
+          <el-scrollbar>
+            <div class="dv-a">A</div>
+          </el-scrollbar>
        </template>
        <!-- #paneR 表示指定该组件为右侧面板 -->
        <template #paneR>
          <!-- 再次将右侧面板进行拆分 -->
          <splitpane :splitSet="settingTB">
            <template #paneL>
-              <div class="dv-b">B</div>
+              <el-scrollbar><div class="dv-b">B</div></el-scrollbar>
            </template>
            <template #paneR>
-              <div class="dv-c">C</div>
+              <el-scrollbar>
+                <div class="dv-c">C</div>
+              </el-scrollbar>
            </template>
          </splitpane>
        </template>
@ -51,36 +55,25 @@ const settingTB: ContextProps = reactive({
 </template>

 <style lang="scss" scoped>
-$W: 100%;
-$H: 70vh;
-
 .split-pane {
-  width: 70vw;
-  height: $H;
+  width: 100%;
+  height: calc(100vh - 260px);
  font-size: 50px;
-  color: #fff;
  text-align: center;
  border: 1px solid #e5e6eb;

-  .dv-a,
-  .dv-b,
-  .dv-c {
-    width: $W;
-    height: $W;
-    line-height: $H;
+  .dv-a {
+    padding-top: 30vh;
    color: rgba($color: dodgerblue, $alpha: 80%);
  }

-  .dv-b,
-  .dv-c {
-    line-height: 250px;
-  }
-
  .dv-b {
+    padding-top: 10vh;
    color: rgba($color: #000, $alpha: 80%);
  }

  .dv-c {
+    padding-top: 18vh;
    color: rgba($color: #ce272d, $alpha: 80%);
  }
 }
--- a/src/views/components/swiper.vue
+++ b/src/views/components/swiper.vue
--- a/src/views/components/timeline.vue
+++ b/src/views/components/timeline.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { markRaw } from "vue";
+import { randomGradient } from "@pureadmin/utils";
 import { useRenderFlicker } from "@/components/ReFlicker";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Iphone from "@iconify-icons/ep/iphone";
@ -11,15 +12,26 @@ defineOptions({
 const { lastBuildTime } = __APP_INFO__;
 const activities = [
  {
-    content: "支持圆点闪动",
+    content: "支持圆点发光",
    timestamp: lastBuildTime,
    icon: markRaw(useRenderFlicker())
  },
  {
-    content: "支持方形闪动",
+    content: "支持方形发光",
    timestamp: lastBuildTime,
    icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
  },
+  {
+    content: "支持渐变发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(
+      useRenderFlicker({
+        background: randomGradient({
+          randomizeHue: true
+        })
+      })
+    )
+  },
  {
    content: "支持默认颜色",
    timestamp: lastBuildTime
@ -70,7 +82,7 @@ const activities = [
          placement="bottom"
        >
          <div class="message">
-            vue-pure-admin是基于Vue3.0+TypeScript+Vite+Element-Plus编写的一套后台管理系统
+            vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版
          </div>
        </el-timeline-item>
      </el-timeline>
--- a/src/views/components/virtual-list/horizontal.vue
+++ b/src/views/components/virtual-list/horizontal.vue
--- a/src/views/components/virtual-list/index.vue
+++ b/src/views/components/virtual-list/index.vue
--- a/src/views/components/virtual-list/vertical.vue
+++ b/src/views/components/virtual-list/vertical.vue
--- a/src/views/pure-table/base/column-template/columns.tsx
+++ b/src/views/pure-table/base/column-template/columns.tsx
@ -56,7 +56,7 @@ export function useColumns() {
  ];

  const handleEdit = (index: number, row) => {
-    message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+    message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
      type: "success"
    });
  };
--- a/src/views/pure-table/base/header-renderer/columns.tsx
+++ b/src/views/pure-table/base/header-renderer/columns.tsx
@ -15,7 +15,7 @@ export function useColumns() {
  );

  const handleEdit = (index: number, row) => {
-    message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
+    message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
      type: "success"
    });
  };
--- a/src/views/pure-table/high/contextmenu/columns.tsx
+++ b/src/views/pure-table/high/contextmenu/columns.tsx
@ -30,11 +30,11 @@ export function useColumns() {
        disabled: true
      },
      {
-        label: "编辑",
+        label: "修改",
        tips: "Edit",
        fn: row =>
          message(
-            `您编辑了第 ${
+            `您修改了第 ${
              dataList.value.findIndex(v => v.id === row.id) + 1
            } 行，数据为：${JSON.stringify(row)}`,
            {
--- a/src/views/pure-table/high/edit/columns.tsx
+++ b/src/views/pure-table/high/edit/columns.tsx
@ -5,11 +5,11 @@ import { clone, delay } from "@pureadmin/utils";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Check from "@iconify-icons/ep/check";

-// 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
+// 温馨提示：修改整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
 export function useColumns() {
-  // 编辑值（可多个）
+  // 修改值（可多个）
  const inputValMap = ref({});
-  // 是否正处于编辑状态（可多个）
+  // 是否正处于修改状态（可多个）
  const editStatus = ref({});
  // 当前激活的单元格（唯一）
  const activeIndex = ref(-1);
@ -43,7 +43,7 @@ export function useColumns() {

  const columns: TableColumnList = [
    {
-      label: "ID（可编辑）",
+      label: "ID（可修改）",
      prop: "id",
      // class="flex-bc" flex-bc 代表 flex justify-between items-center 具体看 src/style/tailwind.css 文件
      cellRenderer: ({ row, index }) => (
@ -93,7 +93,7 @@ export function useColumns() {
    inputValMap.value[index] = Object.assign({}, inputValMap.value[index], {
      value: id
    });
-    // 处于编辑状态
+    // 处于修改状态
    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
      editing: true
    });
@ -112,14 +112,14 @@ export function useColumns() {
  function onSure(index) {
    dataList.value[index].id = inputValMap.value[index].value;
    message(
-      `您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
+      `您修改了第 ${index + 1} 行，修改后数据为：${JSON.stringify(
        dataList.value[index]
      )}`,
      {
        type: "success"
      }
    );
-    // 编辑状态关闭
+    // 修改状态关闭
    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
      editing: false
    });
--- a/src/views/pure-table/high/list.tsx
+++ b/src/views/pure-table/high/list.tsx
@ -53,7 +53,7 @@ export const list = [
  {
    key: "edit",
    content: rendContent("edit"),
-    title: "单元格编辑",
+    title: "单元格修改",
    component: Edit
  },
  {
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@ -10,7 +10,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import AddFill from "@iconify-icons/ri/add-circle-line";

 defineOptions({
-  name: "Dept"
+  name: "SystemDept"
 });

 const formRef = ref();
@ -71,7 +71,7 @@ const {
    </el-form>

    <PureTableBar
-      title="部门列表（仅演示，操作后不生效）"
+      title="部门管理（仅演示，操作后不生效）"
      :columns="columns"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
@ -111,10 +111,20 @@ const {
              link
              type="primary"
              :size="size"
-              :icon="useRenderIcon(EditPen)"
-              @click="openDialog('编辑', row)"
+              :icon="useRenderIcon(AddFill)"
+              @click="openDialog('新增', { parentId: row.id } as any)"
            >
-              编辑
+              新增
+            </el-button>
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(EditPen)"
+              @click="openDialog('修改', row)"
+            >
+              修改
            </el-button>
            <el-popconfirm
              :title="`是否确认删除部门名称为${row.name}的这条数据`"
--- a/src/views/system/dept/utils/hook.tsx
+++ b/src/views/system/dept/utils/hook.tsx
@ -57,7 +57,7 @@ export function useDept() {
    {
      label: "操作",
      fixed: "right",
-      width: 160,
+      width: 210,
      slot: "operation"
    }
  ];
@ -141,7 +141,7 @@ export function useDept() {
              // 实际开发先调用新增接口，再进行下面操作
              chores();
            } else {
-              // 实际开发先调用编辑接口，再进行下面操作
+              // 实际开发先调用修改接口，再进行下面操作
              chores();
            }
          }
@ -168,7 +168,7 @@ export function useDept() {
    onSearch,
    /** 重置 */
    resetForm,
-    /** 新增、编辑部门 */
+    /** 新增、修改部门 */
    openDialog,
    /** 删除部门 */
    handleDelete,
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -13,7 +13,7 @@ import Menu from "@iconify-icons/ep/menu";
 import AddFill from "@iconify-icons/ri/add-circle-line";

 defineOptions({
-  name: "Role"
+  name: "SystemRole"
 });

 const formRef = ref();
@ -87,7 +87,7 @@ const {
    </el-form>

    <PureTableBar
-      title="角色列表（仅演示，操作后不生效）"
+      title="角色管理（仅演示，操作后不生效）"
      :columns="columns"
      @refresh="onSearch"
    >
@ -127,7 +127,7 @@ const {
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
-              @click="openDialog('编辑', row)"
+              @click="openDialog('修改', row)"
            >
              修改
            </el-button>
--- a/src/views/system/role/utils/hook.tsx
+++ b/src/views/system/role/utils/hook.tsx
@ -200,7 +200,7 @@ export function useRole() {
              // 实际开发先调用新增接口，再进行下面操作
              chores();
            } else {
-              // 实际开发先调用编辑接口，再进行下面操作
+              // 实际开发先调用修改接口，再进行下面操作
              chores();
            }
          }
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -15,7 +15,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import AddFill from "@iconify-icons/ri/add-circle-line";

 defineOptions({
-  name: "User"
+  name: "SystemUser"
 });

 const treeRef = ref();
@ -173,7 +173,7 @@ const {
                type="primary"
                :size="size"
                :icon="useRenderIcon(EditPen)"
-                @click="openDialog('编辑', row)"
+                @click="openDialog('修改', row)"
              >
                修改
              </el-button>
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@ -342,7 +342,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
              // 实际开发先调用新增接口，再进行下面操作
              chores();
            } else {
-              // 实际开发先调用编辑接口，再进行下面操作
+              // 实际开发先调用修改接口，再进行下面操作
              chores();
            }
          }
--- a/types/router.d.ts
+++ b/types/router.d.ts
@ -32,7 +32,7 @@ declare global {
    frameSrc?: string;
    /** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
    frameLoading?: boolean;
-    /** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */
+    /** 页面加载动画（两种模式，第二种权重更高，第一种直接采用`vue`内置的`transitions`动画，第二种是使用`animate.css`编写进、离场动画，平台更推荐使用第二种模式，已经内置了`animate.css`，直接写对应的动画名即可）`可选` */
    transition?: {
      /**
       * @description 当前路由动画效果