perf: 优化演示页面

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` 图表示例

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

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>
 
 ## 更新日志

locales/en.yaml

@@ -36,23 +36,23 @@ menus:
   hsfourZeroOne: "403"
   hsFive: "500"
   hscomponents: Components
-  hsdialog: Dialog Components
+  hsdialog: Dialog
-  hsmessage: Message Tips Components
+  hsmessage: Message Tips
-  hsvideo: Video Components
+  hsvideo: Video
-  hssegmented: Segmented Components
+  hssegmented: Segmented
-  hswaterfall: Waterfall Components
+  hswaterfall: Waterfall
-  hsmap: Map Components
+  hsmap: Map
-  hsdraggable: Draggable Components
+  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
@@ -107,10 +107,9 @@ menus:
   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

locales/zh-CN.yaml

@@ -36,23 +36,23 @@ menus:
   hsfourZeroOne: "403"
   hsFive: "500"
   hscomponents: 组件
-  hsdialog: 函数式弹框组件
+  hsdialog: 函数式弹框
-  hsmessage: 消息提示组件
+  hsmessage: 消息提示
-  hsvideo: 视频组件
+  hsvideo: 视频
-  hssegmented: 分段控制器组件
+  hssegmented: 分段控制器
-  hswaterfall: 瀑布流无限滚动组件
+  hswaterfall: 瀑布流无限滚动
-  hsmap: 地图组件
+  hsmap: 地图
-  hsdraggable: 拖拽组件
+  hsdraggable: 拖拽
   hssplitPane: 切割面板
-  hsbutton: 按钮组件
+  hsbutton: 按钮
   hscropping: 图片裁剪
-  hsanimatecss: AnimateCss选择器组件
+  hsanimatecss: animate.css选择器
   hscountTo: 数字动画
-  hsselector: 选择器组件
+  hsselector: 范围选择器
   hsflowChart: 流程图
   hsseamless: 无缝滚动
   hscontextmenu: 右键菜单
-  hstypeit: 打字机组件
+  hstypeit: 打字机
   hsjsoneditor: JSON编辑器
   hsmenus: 多级菜单
   hsmenu1: 菜单1
@@ -107,10 +107,9 @@ menus:
   hsInfiniteScroll: 表格无限滚动
   hsSensitive: 敏感词过滤
   hsPinyin: 汉语拼音
-  hsdanmaku: 弹幕组件
+  hsdanmaku: 弹幕
   hsPureTableBase: 基础用法（23个示例）
   hsPureTableHigh: 高级用法（11个示例）
-  hsTree: 大数据树业务组件
   hsboard: 艺术画板
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示

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",

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>

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"));

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

src/layout/index.vue

@@ -196,13 +196,6 @@ const layoutHeader = defineComponent({
     </div>
     <!-- 系统设置 -->
     <setting />
-    <a
-      target="_blank"
-      href="https://www.bilibili.com/video/BV1He411m7Qs/"
-      class="absolute top-[53px] right-[50px] text-lg z-[999] cursor-pointer review"
-    >
-      回顾2023！
-    </a>
   </div>
 </template>
 
@@ -237,24 +230,4 @@ const layoutHeader = defineComponent({
 .re-screen {
   margin-top: 12px;
 }
-
-@keyframes pulse {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.3);
-  }
-}
-
-.review {
-  font-size: 18px;
-  animation: pulse 2s 3;
-
-  &:hover {
-    opacity: 0.75;
-  }
-}
 </style>

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",
+      path: "/able/excel",
-      name: "IconSelect",
+      name: "Excel",
-      component: () => import("@/views/able/icon-select.vue"),
+      component: () => import("@/views/able/excel.vue"),
       meta: {
-        title: $t("menus.hsIconSelect")
+        title: $t("menus.hsExcel")
-      }
-    },
-    {
-      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")
       }
     },
     {
@@ -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",
+      path: "/able/map",
-      name: "Cascader",
+      name: "MapPage",
-      component: () => import("@/views/able/cascader.vue"),
+      component: () => import("@/views/able/map.vue"),
       meta: {
-        title: $t("menus.hsCascader")
+        title: $t("menus.hsmap"),
+        keepAlive: true,
+        transition: {
+          name: "fade"
+        }
       }
     },
     {
-      path: "/able/swiper",
+      path: "/able/wavesurfer",
-      name: "Swiper",
+      name: "Wavesurfer",
-      component: () => import("@/views/able/swiper.vue"),
+      component: () => import("@/views/able/wavesurfer/index.vue"),
       meta: {
-        title: $t("menus.hsSwiper")
+        title: $t("menus.hsWavesurfer")
       }
     },
     {
-      path: "/able/virtualList",
+      path: "/able/video",
-      name: "VirtualList",
+      name: "VideoPage",
-      component: () => import("@/views/able/virtual-list/index.vue"),
+      component: () => import("@/views/able/video.vue"),
       meta: {
-        title: $t("menus.hsVirtualList")
+        title: $t("menus.hsvideo")
       }
     },
     {
-      path: "/able/pdf",
+      path: "/able/videoFrame",
-      name: "Pdf",
+      name: "VideoFrame",
-      component: () => import("@/views/able/pdf.vue"),
+      component: () => import("@/views/able/video-frame/index.vue"),
       meta: {
-        title: $t("menus.hsPdf")
+        title: $t("menus.hsVideoFrame")
       }
     },
     {
-      path: "/able/excel",
+      path: "/able/danmaku",
-      name: "Excel",
+      name: "Danmaku",
-      component: () => import("@/views/able/excel.vue"),
+      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",

src/router/modules/components.ts

@@ -16,84 +16,31 @@ export default {
       component: () => import("@/views/components/dialog/index.vue"),
       meta: {
         title: $t("menus.hsdialog"),
-        extraIcon: "IF-pure-iconfont-new svg",
+        extraIcon: "IF-pure-iconfont-new svg"
-        transition: {
-          enterTransition: "animate__fadeInLeft",
-          leaveTransition: "animate__fadeOutRight"
-        }
       }
     },
     {
       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",
+      path: "/components/iconSelect",
-      name: "Segmented",
+      name: "IconSelect",
-      component: () => import("@/views/components/segmented/index.vue"),
+      component: () => import("@/views/components/icon-select.vue"),
       meta: {
-        title: $t("menus.hssegmented"),
+        title: $t("menus.hsIconSelect")
-        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
-      path: "/components/waterfall",
+      path: "/components/animatecss",
-      name: "Waterfall",
+      name: "AnimateCss",
-      component: () => import("@/views/components/waterfall/index.vue"),
+      component: () => import("@/views/components/animatecss.vue"),
       meta: {
-        title: $t("menus.hswaterfall")
+        title: $t("menus.hsanimatecss")
-      }
-    },
-    {
-      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")
       }
     },
     {
@@ -105,35 +52,68 @@ export default {
       }
     },
     {
-      path: "/components/animatecss",
+      path: "/components/segmented",
-      name: "AnimateCss",
+      name: "Segmented",
-      component: () => import("@/views/components/animatecss/index.vue"),
+      component: () => import("@/views/components/segmented.vue"),
       meta: {
-        title: $t("menus.hsanimatecss")
+        title: $t("menus.hssegmented"),
+        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
-      path: "/components/countTo",
+      path: "/components/cascader",
-      name: "CountTo",
+      name: "Cascader",
-      component: () => import("@/views/components/count-to/index.vue"),
+      component: () => import("@/views/components/cascader.vue"),
       meta: {
-        title: $t("menus.hscountTo")
+        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",
+      path: "/components/waterfall",
-      name: "SeamlessScroll",
+      name: "Waterfall",
-      component: () => import("@/views/components/seamless-scroll/index.vue"),
+      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 +124,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",
+      path: "/components/seamlessScroll",
-      name: "Danmaku",
+      name: "SeamlessScroll",
-      component: () => import("@/views/components/danmaku/index.vue"),
+      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")
       }
     }
   ]

src/views/components/animatecss.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>

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>

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>

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">

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>

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>

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,11 +42,12 @@ function onCropper({ base64, blob, info }) {
         </span>
       </div>
     </template>
+    <div v-loading="!showPopover" element-loading-background="transparent">
       <el-popover
+        ref="popoverRef"
         :visible="showPopover"
         placement="right"
         width="300px"
-      :teleported="false"
       >
         <template #reference>
           <ReCropper
@@ -71,5 +77,6 @@ function onCropper({ base64, blob, info }) {
           </div>
         </div>
       </el-popover>
+    </div>
   </el-card>
 </template>

src/views/components/dialog/index.vue

@@ -20,8 +20,8 @@ const router = useRouter();
 
 function onBaseClick() {
   addDialog({
-    title: "基本使用",
+    title: "基础用法",
-    contentRenderer: () => <p>弹框内容-基本使用</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
+    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' })"
+            @click="router.push({ name: 'SystemDept' })"
-            >系统管理页面</span
           >
+            系统管理页面
+          </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>

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>

src/views/components/json-editor.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"

src/views/components/message.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>
 

src/views/components/seamless-scroll.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

src/views/components/segmented.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: "周四",
+    label: "周四"
-    icon: "streamline-emojis:airplane"
   },
   {
     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>
@@ -158,6 +181,7 @@ function onChange({ index, option }) {
         <span class="font-medium">分段控制器</span>
       </div>
     </template>
+    <el-scrollbar>
       <p class="mb-2">
         基础用法（v-model）<span class="text-primary">
           {{ optionsBasis[value].label }}
@@ -165,10 +189,16 @@ function onChange({ index, option }) {
       </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>
+      <p class="mb-2">可设置图标</p>
       <Segmented :options="optionsIcon" />
       <el-divider />
       <p class="mb-2">只设置图标</p>
@@ -176,8 +206,12 @@ function onChange({ index, option }) {
       <el-divider />
       <p class="mb-2">自定义渲染</p>
       <Segmented :options="optionsLabel" />
-    <el-divider />
+    </el-scrollbar>
-    <p class="mb-2">change事件</p>
-    <Segmented :options="optionsChange" @change="onChange" />
   </el-card>
 </template>
+
+<style scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+</style>

src/views/components/selector.vue

@@ -9,7 +9,7 @@ defineOptions({
 const selectRange = ref<string>("");
 const dataLists = ref([
   {
-    title: "基本使用",
+    title: "基础用法",
     echo: [],
     disabled: false
   },

src/views/components/split-pane.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>
           <!-- 自定义左侧面板的内容 -->
+          <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>
+              <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;
+  width: 100%;
-  height: $H;
+  height: calc(100vh - 260px);
   font-size: 50px;
-  color: #fff;
   text-align: center;
   border: 1px solid #e5e6eb;
 
-  .dv-a,
+  .dv-a {
-  .dv-b,
+    padding-top: 30vh;
-  .dv-c {
-    width: $W;
-    height: $W;
-    line-height: $H;
     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%);
   }
 }

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>

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"
     });
   };

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"
     });
   };

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)}`,
             {

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
     });

src/views/pure-table/high/list.tsx

@@ -53,7 +53,7 @@ export const list = [
   {
     key: "edit",
     content: rendContent("edit"),
-    title: "单元格编辑",
+    title: "单元格修改",
     component: Edit
   },
   {

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)"
+              :icon="useRenderIcon(AddFill)"
-              @click="openDialog('编辑', row)"
+              @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}的这条数据`"

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,

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>

src/views/system/role/utils/hook.tsx

@@ -200,7 +200,7 @@ export function useRole() {
               // 实际开发先调用新增接口，再进行下面操作
               chores();
             } else {
-              // 实际开发先调用编辑接口，再进行下面操作
+              // 实际开发先调用修改接口，再进行下面操作
               chores();
             }
           }

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>

src/views/system/user/utils/hook.tsx

@@ -342,7 +342,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
               // 实际开发先调用新增接口，再进行下面操作
               chores();
             } else {
-              // 实际开发先调用编辑接口，再进行下面操作
+              // 实际开发先调用修改接口，再进行下面操作
               chores();
             }
           }

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 当前路由动画效果