chore: 优化演示示例

locales/en.yaml

@@ -76,14 +76,16 @@ menus:
   hsPrint: Print
   hsDownload: Download
   hsExternalPage: External Page
-  hsPureDocument: Pure Doc(Embedded)
+  hsExternalDoc: Docs External
-  externalLink: Pure Doc(External)
+  hsEmbeddedDoc: Docs Embedded
-  hsEpDocument: Element Plus Doc(Embedded)
+  externalLink: Vue-Pure-Admin
-  hsVueDocument: Vue3 Doc(Embedded)
+  pureutilsLink: Pure-Admin-Utils
-  hsViteDocument: Vite Doc(Embedded)
+  hsEpDocument: Element-Plus
-  hsPiniaDocument: Pinia Doc(Embedded)
+  hsTailwindcssDocument: Tailwindcss
-  hsRouterDocument: Vue Router Doc(Embedded)
+  hsVueDocument: Vue3
-  hsTailwindcssDocument: Tailwindcss Doc(Embedded)
+  hsViteDocument: Vite
+  hsPiniaDocument: Pinia
+  hsRouterDocument: Vue-Router
   hsAbout: About
   hsResult: Result Page
   hsSuccess: Success Page

locales/zh-CN.yaml

@@ -76,14 +76,16 @@ menus:
   hsPrint: 打印
   hsDownload: 下载
   hsExternalPage: 外部页面
-  hsPureDocument: 平台文档（内嵌）
+  hsExternalDoc: 文档外链
-  externalLink: 平台文档（外链）
+  hsEmbeddedDoc: 文档内嵌
-  hsEpDocument: Element Plus 文档（内嵌）
+  externalLink: vue-pure-admin
-  hsVueDocument: Vue3 文档（内嵌）
+  pureutilsLink: pure-admin-utils
-  hsViteDocument: Vite 文档（内嵌）
+  hsEpDocument: element-plus
-  hsPiniaDocument: Pinia 文档（内嵌）
+  hsTailwindcssDocument: tailwindcss
-  hsRouterDocument: Vue Router 文档（内嵌）
+  hsVueDocument: vue3
-  hsTailwindcssDocument: Tailwindcss 文档（内嵌）
+  hsViteDocument: vite
+  hsPiniaDocument: pinia
+  hsRouterDocument: vue-router
   hsAbout: 关于
   hsResult: 结果页面
   hsSuccess: 成功页面

mock/asyncRoutes.ts

@@ -83,75 +83,90 @@ const frameRouter = {
   },
   children: [
     {
-      path: "/iframe/pure",
+      path: "/iframe/external",
-      name: "FramePure",
       meta: {
-        title: "menus.hsPureDocument",
+        title: "menus.hsExternalDoc"
-        frameSrc: "https://yiming_chang.gitee.io/pure-admin-doc",
+      },
-        roles: ["admin", "common"]
+      children: [
-      }
+        {
+          path: "/external",
+          name: "https://yiming_chang.gitee.io/pure-admin-doc",
+          meta: {
+            title: "menus.externalLink",
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/pureutilsLink",
+          name: "https://pure-admin-utils.netlify.app/",
+          meta: {
+            title: "menus.pureutilsLink",
+            roles: ["admin", "common"]
+          }
+        }
+      ]
     },
     {
-      path: "/external",
+      path: "/iframe/embedded",
-      name: "https://yiming_chang.gitee.io/pure-admin-doc",
       meta: {
-        title: "menus.externalLink",
+        title: "menus.hsEmbeddedDoc"
-        roles: ["admin", "common"]
+      },
-      }
+      children: [
-    },
+        {
-    {
+          path: "/iframe/ep",
-      path: "/iframe/ep",
+          name: "FrameEp",
-      name: "FrameEp",
+          meta: {
-      meta: {
+            title: "menus.hsEpDocument",
-        title: "menus.hsEpDocument",
+            frameSrc: "https://element-plus.org/zh-CN/",
-        frameSrc: "https://element-plus.org/zh-CN/",
+            roles: ["admin", "common"]
-        roles: ["admin", "common"]
+          }
-      }
+        },
-    },
+        {
-    {
+          path: "/iframe/tailwindcss",
-      path: "/iframe/vue3",
+          name: "FrameTailwindcss",
-      name: "FrameVue",
+          meta: {
-      meta: {
+            title: "menus.hsTailwindcssDocument",
-        title: "menus.hsVueDocument",
+            frameSrc: "https://tailwindcss.com/docs/installation",
-        frameSrc: "https://cn.vuejs.org/",
+            roles: ["admin", "common"]
-        roles: ["admin", "common"]
+          }
-      }
+        },
-    },
+        {
-    {
+          path: "/iframe/vue3",
-      path: "/iframe/vite",
+          name: "FrameVue",
-      name: "FrameVite",
+          meta: {
-      meta: {
+            title: "menus.hsVueDocument",
-        title: "menus.hsViteDocument",
+            frameSrc: "https://cn.vuejs.org/",
-        frameSrc: "https://cn.vitejs.dev/",
+            roles: ["admin", "common"]
-        roles: ["admin", "common"]
+          }
-      }
+        },
-    },
+        {
-    {
+          path: "/iframe/vite",
-      path: "/iframe/pinia",
+          name: "FrameVite",
-      name: "FramePinia",
+          meta: {
-      meta: {
+            title: "menus.hsViteDocument",
-        title: "menus.hsPiniaDocument",
+            frameSrc: "https://cn.vitejs.dev/",
-        frameSrc: "https://pinia.vuejs.org/zh/index.html",
+            roles: ["admin", "common"]
-        roles: ["admin", "common"]
+          }
-      }
+        },
-    },
+        {
-    {
+          path: "/iframe/pinia",
-      path: "/iframe/vue-router",
+          name: "FramePinia",
-      name: "FrameRouter",
+          meta: {
-      meta: {
+            title: "menus.hsPiniaDocument",
-        title: "menus.hsRouterDocument",
+            frameSrc: "https://pinia.vuejs.org/zh/index.html",
-        frameSrc: "https://router.vuejs.org/zh/",
+            roles: ["admin", "common"]
-        roles: ["admin", "common"]
+          }
-      }
+        },
-    },
+        {
-    {
+          path: "/iframe/vue-router",
-      path: "/iframe/tailwindcss",
+          name: "FrameRouter",
-      name: "FrameTailwindcss",
+          meta: {
-      meta: {
+            title: "menus.hsRouterDocument",
-        title: "menus.hsTailwindcssDocument",
+            frameSrc: "https://router.vuejs.org/zh/",
-        frameSrc: "https://tailwindcss.com/docs/installation",
+            roles: ["admin", "common"]
-        roles: ["admin", "common"]
+          }
-      }
+        }
+      ]
     }
   ]
 };
@@ -159,7 +174,7 @@ const frameRouter = {
 const tabsRouter = {
   path: "/tabs",
   meta: {
-    icon: "IF-pure-iconfont-tabs",
+    icon: "tag",
     title: "menus.hstabs",
     rank: tabs
   },

src/components/ReIcon/src/offlineIcon.ts

@@ -25,6 +25,8 @@ import Dept from "@iconify-icons/ri/git-branch-line";
 import Search from "@iconify-icons/ri/search-line";
 import Lollipop from "@iconify-icons/ep/lollipop";
 import Monitor from "@iconify-icons/ep/monitor";
+import Tag from "@iconify-icons/ri/bookmark-2-line";
+import Table from "@iconify-icons/ri/table-line";
 addIcon("ubuntuFill", UbuntuFill);
 addIcon("menu", Menu);
 addIcon("edit", Edit);
@@ -45,3 +47,5 @@ addIcon("dept", Dept);
 addIcon("search", Search);
 addIcon("lollipop", Lollipop);
 addIcon("monitor", Monitor);
+addIcon("tag", Tag);
+addIcon("table", Table);

src/router/enums.ts

@@ -1,34 +1,30 @@
 // 完整版菜单比较多，将 rank 抽离出来，在此方便维护
 
 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从 1 开始哦
-  doc = 1,
+  able = 1,
-  utils = 2,
+  components = 2,
   table = 3,
-  components = 4,
+  frame = 4,
-  able = 5,
+  nested = 5,
-  frame = 6,
+  result = 6,
-  nested = 7,
+  error = 7,
-  result = 8,
+  list = 8,
-  error = 9,
+  permission = 9,
-  list = 10,
+  system = 10,
-  permission = 11,
+  tabs = 11,
-  system = 12,
+  formdesign = 12,
-  tabs = 13,
+  flowchart = 13,
-  formdesign = 14,
+  ppt = 14,
-  flowchart = 15,
+  editor = 15,
-  ppt = 16,
+  guide = 16,
-  editor = 17,
+  about = 17,
-  guide = 18,
+  menuoverflow = 18;
-  menuoverflow = 19,
-  about = 20;
 
 export {
   home,
-  doc,
-  utils,
-  table,
-  components,
   able,
+  components,
+  table,
   frame,
   nested,
   result,
@@ -42,6 +38,6 @@ export {
   ppt,
   editor,
   guide,
-  menuoverflow,
+  about,
-  about
+  menuoverflow
 };

src/router/modules/able.ts

@@ -15,8 +15,7 @@ export default {
       name: "VideoFrame",
       component: () => import("@/views/able/video-frame/index.vue"),
       meta: {
-        title: $t("menus.hsVideoFrame"),
+        title: $t("menus.hsVideoFrame")
-        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
@@ -24,8 +23,7 @@ export default {
       name: "Wavesurfer",
       component: () => import("@/views/able/wavesurfer/index.vue"),
       meta: {
-        title: $t("menus.hsWavesurfer"),
+        title: $t("menus.hsWavesurfer")
-        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
@@ -169,8 +167,7 @@ export default {
       name: "Sensitive",
       component: () => import("@/views/able/sensitive.vue"),
       meta: {
-        title: $t("menus.hsSensitive"),
+        title: $t("menus.hsSensitive")
-        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
@@ -178,8 +175,7 @@ export default {
       name: "Pinyin",
       component: () => import("@/views/able/pinyin.vue"),
       meta: {
-        title: $t("menus.hsPinyin"),
+        title: $t("menus.hsPinyin")
-        extraIcon: "IF-pure-iconfont-new svg"
       }
     }
   ]

src/router/modules/components.ts

@@ -45,8 +45,7 @@ export default {
       name: "Waterfall",
       component: () => import("@/views/components/waterfall/index.vue"),
       meta: {
-        title: $t("menus.hswaterfall"),
+        title: $t("menus.hswaterfall")
-        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {
@@ -110,8 +109,7 @@ export default {
       name: "AnimateCss",
       component: () => import("@/views/components/animatecss/index.vue"),
       meta: {
-        title: $t("menus.hsanimatecss"),
+        title: $t("menus.hsanimatecss")
-        extraIcon: "IF-pure-iconfont-new svg"
       }
     },
     {

src/router/modules/puredoc.ts

@@ -1,24 +0,0 @@
-import { doc } from "@/router/enums";
-import hot from "@/assets/svg/hot.svg?component";
-const IFrame = () => import("@/layout/frameView.vue");
-
-export default {
-  path: "/pure-admin-doc",
-  redirect: "/pure-admin-doc/index",
-  meta: {
-    icon: hot,
-    title: "pure-admin-doc",
-    rank: doc
-  },
-  children: [
-    {
-      path: "/pure-admin-doc/index",
-      name: "FrameDoc",
-      component: IFrame,
-      meta: {
-        title: "pure-admin-doc",
-        frameSrc: "https://yiming_chang.gitee.io/pure-admin-doc/"
-      }
-    }
-  ]
-} satisfies RouteConfigsTable;

src/router/modules/pureutils.ts

@@ -1,24 +0,0 @@
-import { utils } from "@/router/enums";
-import hot from "@/assets/svg/hot.svg?component";
-const IFrame = () => import("@/layout/frameView.vue");
-
-export default {
-  path: "/pure-admin-utils",
-  redirect: "/pure-admin-utils/index",
-  meta: {
-    icon: hot,
-    title: "pure-admin-utils",
-    rank: utils
-  },
-  children: [
-    {
-      path: "/pure-admin-utils/index",
-      name: "FrameUtils",
-      component: IFrame,
-      meta: {
-        title: "pure-admin-utils",
-        frameSrc: "https://pure-admin-utils.netlify.app/"
-      }
-    }
-  ]
-} satisfies RouteConfigsTable;

src/router/modules/table.ts

@@ -1,12 +1,11 @@
 import { $t } from "@/plugins/i18n";
 import { table } from "@/router/enums";
-import hot from "@/assets/svg/hot.svg?component";
 
 export default {
   path: "/pure-table",
   redirect: "/pure-table/index",
   meta: {
-    icon: hot,
+    icon: "table",
     title: "pure-admin-table",
     rank: table
   },

src/views/able/cascader.vue

@@ -25,7 +25,7 @@ const handleChange = value => {
 
 <template>
   <el-card shadow="never">
-    <template #header> 区域级联选择器 </template>
+    <template #header> <p class="font-medium">区域级联选择器</p> </template>
     <el-row :gutter="20">
       <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
         <div class="flex flex-col items-center justify-center">

src/views/able/debounce.vue

@@ -19,7 +19,7 @@ const throttleClick = throttle(handle);
   <div>
     <el-card class="mb-5" shadow="never">
       <template #header>
-        <div>防抖：debounce</div>
+        <div class="font-medium">防抖：debounce</div>
       </template>
       <div class="mb-5">
         所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
@@ -34,7 +34,7 @@ const throttleClick = throttle(handle);
     </el-card>
     <el-card shadow="never">
       <template #header>
-        <div>节流：throttle</div>
+        <div class="font-medium">节流：throttle</div>
       </template>
       <div class="mb-5">
         所谓节流，就是指连续触发事件但是在 n

src/views/able/infinite-scroll.vue

@@ -13,12 +13,12 @@ const dataTemplate = new Array(10).fill({
 });
 
 const data = ref([]);
-const disabled = ref(false);
 const page = ref(0);
 const total = ref(10);
+const isBottom = ref(false);
 
 const load = () => {
-  if (disabled.value) return;
+  if (isBottom.value) return;
 
   page.value++;
   if (page.value <= total.value) {
@@ -26,7 +26,7 @@ const load = () => {
   }
 
   if (page.value === total.value) {
-    disabled.value = true;
+    isBottom.value = true;
   }
 };
 </script>
@@ -46,23 +46,18 @@ const load = () => {
         ）
       </div>
     </template>
-    <div>
+    <p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
-      <p class="mb-2">
+    <el-table
-        <span>loaded page(total: {{ total }}): {{ page }}, </span>
+      v-el-table-infinite-scroll="load"
-        disabled:
+      border
-        <el-switch v-model="disabled" :disabled="page >= total" />
+      height="435px"
-      </p>
+      :data="data"
-      <el-table
+      :infinite-scroll-disabled="isBottom"
-        v-el-table-infinite-scroll="load"
+    >
-        :data="data"
+      <el-table-column width="80" type="index" label="序号" />
-        :infinite-scroll-disabled="disabled"
+      <el-table-column prop="date" label="日期" />
-        height="435px"
+      <el-table-column prop="name" label="名称" />
-      >
+      <el-table-column prop="age" label="年龄" />
-        <el-table-column type="index" />
+    </el-table>
-        <el-table-column prop="date" label="date" />
-        <el-table-column prop="name" label="name" />
-        <el-table-column prop="age" label="age" />
-      </el-table>
-    </div>
   </el-card>
 </template>

src/views/able/line-tree.vue

@@ -35,9 +35,7 @@ const dataProps = {
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
         <el-card shadow="never">
           <template #header>
-            <div class="card-header">
+            <div class="card-header">普通树结构</div>
-              <span class="font-medium"> 普通树结构 </span>
-            </div>
           </template>
           <div class="max-h-[550px] overflow-y-auto">
             <el-tree
@@ -64,9 +62,7 @@ const dataProps = {
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-card shadow="never">
           <template #header>
-            <div class="card-header">
+            <div class="card-header">虚拟树结构</div>
-              <span class="font-medium"> 虚拟树结构 </span>
-            </div>
           </template>
           <div class="max-h-[550px] overflow-y-auto">
             <el-tree-v2

src/views/able/sensitive.vue

@@ -29,7 +29,7 @@ function onInput() {
       <el-tag
         v-for="(word, index) in words"
         :key="index"
-        type="danger"
+        type="warning"
         class="mx-1"
         effect="dark"
         round

src/views/able/swiper.vue

@@ -13,31 +13,31 @@ defineOptions({
 SwiperCore.use([Autoplay, Navigation, Pagination]);
 
 const swiperExample: any[] = [
-  { id: 0, label: "Default", options: {} },
+  { id: 0, label: "基础滑动", options: {} },
   {
     id: 1,
-    label: "Navigation",
+    label: "按钮切换",
     options: {
       navigation: true
     }
   },
   {
     id: 2,
-    label: "Pagination",
+    label: "分页器",
     options: {
       pagination: true
     }
   },
   {
     id: 3,
-    label: "Pagination dynamic",
+    label: "分页器 / 动态指示点",
     options: {
       pagination: { dynamicBullets: true }
     }
   },
   {
     id: 4,
-    label: "Pagination progress",
+    label: "分页器 / 进度条",
     options: {
       navigation: true,
       pagination: {
@@ -47,7 +47,7 @@ const swiperExample: any[] = [
   },
   {
     id: 5,
-    label: "Pagination fraction",
+    label: "分页器 / 分式",
     options: {
       navigation: true,
       pagination: {
@@ -57,7 +57,7 @@ const swiperExample: any[] = [
   },
   {
     id: 6,
-    label: "Slides per view",
+    label: "一次显示多个Slides",
     options: {
       pagination: {
         clickable: true
@@ -68,7 +68,7 @@ const swiperExample: any[] = [
   },
   {
     id: 7,
-    label: "Infinite loop",
+    label: "无限循环",
     options: {
       autoplay: {
         delay: 2000,
@@ -101,11 +101,11 @@ const swiperExample: any[] = [
     </template>
     <el-row :gutter="10">
       <el-col v-for="item in swiperExample" :key="item.id" :span="12">
-        <h6 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h6>
+        <h6 class="py-[16px] text-base">{{ item.label }}</h6>
         <swiper v-bind="item.options">
           <swiper-slide v-for="i in 5" :key="i">
             <div
-              class="flex justify-center items-center h-[240px] border-[1px] border-[#999] text-[18px] font-bold"
+              class="flex justify-center items-center h-[240px] border border-[#999]"
             >
               Slide{{ i }}
             </div>

src/views/able/virtual-list/horizontal.vue

@@ -67,11 +67,13 @@ const filteredItems = computed(() => {
 .dynamic-scroller-demo {
   display: flex;
   flex-direction: column;
+  height: 140px;
   overflow: hidden;
 }
 
 .scroller {
   flex: auto 1 1;
+  border: 1px solid var(--el-border-color);
 }
 
 .notice {

src/views/able/virtual-list/index.vue

@@ -12,7 +12,7 @@ defineOptions({
   <el-card shadow="never">
     <template #header>
       <div class="font-medium">
-        虚拟列表组件（
+        虚拟列表（
         <el-link
           href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
           target="_blank"

src/views/able/virtual-list/vertical.vue

@@ -67,6 +67,7 @@ const filteredItems = computed(() => {
 
 .scroller {
   flex: auto 1 1;
+  border: 1px solid var(--el-border-color);
 }
 
 .message {

src/views/able/watermark.vue

@@ -19,8 +19,8 @@ onMounted(() => {
   nextTick(() => {
     setPreventLocalWatermark("无法删除的水印", {
       forever: true,
-      width: 187,
+      width: 180,
-      height: 80
+      height: 70
     });
   });
 });
@@ -36,147 +36,170 @@ onBeforeUnmount(() => {
     <template #header>
       <div class="card-header">
         <span class="font-medium">
-          页面水印功能（将平台主题改为亮白色观察水印效果更明显哦）
+          页面水印菜单树结构
+          <el-link
+            href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            （查看更详细的使用文档）
+          </el-link>
         </span>
       </div>
     </template>
-    <span> 请输入要创建水印的值：</span>
+    <el-space wrap class="!mb-2">
-    <el-input
+      <span> 请输入要创建水印的值：</span>
-      v-model="value"
+      <el-input v-model="value" class="mr-4" style="width: 200px" clearable />
-      class="mb-4 mr-4"
+      <span>请选择要创建水印的颜色：</span>
-      style="width: 200px"
+      <el-color-picker v-model="color" show-alpha />
-      clearable
+    </el-space>
-    />
-    <span>请选择要创建水印的颜色：</span>
-    <el-color-picker v-model="color" show-alpha />
-    <br />
-    <el-button @click="setWatermark(value, { color })">
-      创建整页水印
-    </el-button>
-    <el-button
-      @click="
-        setWatermark(value, {
-          gradient: [
-            { value: 0, color: 'magenta' },
-            { value: 0.5, color: 'blue' },
-            { value: 1.0, color: 'red' }
-          ]
-        })
-      "
-    >
-      创建整页渐变水印
-    </el-button>
-    <el-button
-      @click="
-        setWatermark(value, {
-          rotate: 0,
-          gradient: [
-            { value: 0, color: 'magenta' },
-            { value: 0.5, color: 'blue' },
-            { value: 1.0, color: 'red' }
-          ]
-        })
-      "
-    >
-      创建整页渐变且水平90度的水印
-    </el-button>
-    <el-button
-      @click="
-        setWatermark(value, {
-          gradient: [
-            { value: 0, color: 'magenta' },
-            { value: 0.5, color: 'blue' },
-            { value: 1.0, color: 'red' }
-          ],
-          shadowConfig: [20]
-        })
-      "
-    >
-      创建整页渐变且有阴影的水印
-    </el-button>
-    <el-button
-      @click="
-        setWatermark(value, {
-          globalAlpha: 0.15, // 值越低越透明
-          gradient: [
-            { value: 0, color: 'magenta' },
-            { value: 0.5, color: 'blue' },
-            { value: 1.0, color: 'red' }
-          ]
-        })
-      "
-    >
-      创建整页高透明渐变水印
-    </el-button>
-    <el-button @click="clear">清除整页水印</el-button>
 
-    <div
+    <el-space wrap>
-      ref="local"
+      <el-button bg text @click="setWatermark(value, { color })">
-      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-sky-500"
+        创建整页水印
-    />
+      </el-button>
-    <el-button
+      <el-button
-      @click="
+        bg
-        setLocalWatermark('局部水印', {
+        text
-          color,
+        @click="
-          width: 140,
+          setWatermark(value, {
-          height: 60
+            gradient: [
-        })
+              { value: 0, color: 'magenta' },
-      "
+              { value: 0.5, color: 'blue' },
-    >
+              { value: 1.0, color: 'red' }
-      创建局部水印
+            ]
-    </el-button>
+          })
-    <el-button
+        "
-      @click="
+      >
-        setLocalWatermark('局部水印', {
+        创建整页渐变水印
-          width: 140,
+      </el-button>
-          height: 60,
+      <el-button
-          gradient: [
+        bg
-            { value: 0, color: 'magenta' },
+        text
-            { value: 0.5, color: 'blue' },
+        @click="
-            { value: 1.0, color: 'red' }
+          setWatermark(value, {
-          ]
+            rotate: 0,
-        })
+            gradient: [
-      "
+              { value: 0, color: 'magenta' },
-    >
+              { value: 0.5, color: 'blue' },
-      创建局部渐变水印
+              { value: 1.0, color: 'red' }
-    </el-button>
+            ]
-    <el-button
+          })
-      @click="
+        "
-        setLocalWatermark('局部水印', {
+      >
-          width: 140,
+        创建整页渐变且水平90度的水印
-          height: 56.5,
+      </el-button>
-          rotate: 0,
+      <el-button
-          gradient: [
+        bg
-            { value: 0, color: 'magenta' },
+        text
-            { value: 0.5, color: 'blue' },
+        @click="
-            { value: 1.0, color: 'red' }
+          setWatermark(value, {
-          ]
+            gradient: [
-        })
+              { value: 0, color: 'magenta' },
-      "
+              { value: 0.5, color: 'blue' },
-    >
+              { value: 1.0, color: 'red' }
-      创建局部渐变且水平90度的水印
+            ],
-    </el-button>
+            shadowConfig: [20]
-    <el-button
+          })
-      @click="
+        "
-        setLocalWatermark('局部水印', {
+      >
-          width: 140,
+        创建整页渐变且有阴影的水印
-          height: 56.5,
+      </el-button>
-          gradient: [
+      <el-button
-            { value: 0, color: 'magenta' },
+        bg
-            { value: 0.5, color: 'blue' },
+        text
-            { value: 1.0, color: 'red' }
+        @click="
-          ],
+          setWatermark(value, {
-          shadowConfig: [20]
+            globalAlpha: 0.15, // 值越低越透明
-        })
+            gradient: [
-      "
+              { value: 0, color: 'magenta' },
-    >
+              { value: 0.5, color: 'blue' },
-      创建局部渐变且有阴影的水印
+              { value: 1.0, color: 'red' }
-    </el-button>
+            ]
-    <el-button @click="clearLocal">清除局部水印</el-button>
+          })
+        "
+      >
+        创建整页高透明渐变水印
+      </el-button>
+      <el-button bg text @click="clear">清除整页水印</el-button>
+    </el-space>
 
-    <div
+    <el-divider />
-      ref="preventLocal"
+
-      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-indigo-500"
+    <div ref="local" class="w-1/2 h-[200px] border border-sky-500" />
-    />
+
+    <el-space wrap class="mt-6">
+      <el-button
+        bg
+        text
+        @click="
+          setLocalWatermark('局部水印', {
+            color,
+            width: 140,
+            height: 65
+          })
+        "
+      >
+        创建局部水印
+      </el-button>
+      <el-button
+        bg
+        text
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建局部渐变水印
+      </el-button>
+      <el-button
+        bg
+        text
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            rotate: 0,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建局部渐变且水平90度的水印
+      </el-button>
+      <el-button
+        bg
+        text
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ],
+            shadowConfig: [20]
+          })
+        "
+      >
+        创建局部渐变且有阴影的水印
+      </el-button>
+      <el-button bg text @click="clearLocal">清除局部水印</el-button>
+    </el-space>
+
+    <el-divider />
+
+    <div ref="preventLocal" class="w-1/2 h-[200px] border border-indigo-500" />
   </el-card>
 </template>

src/views/components/contextmenu/basic.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>基本使用</h1>
+    <p class="mb-2">基本使用</p>
     <div v-contextmenu:contextmenu class="wrapper">
       <code>右键点击此区域</code>
     </div>

src/views/components/contextmenu/menuDynamic.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>动态菜单</h1>
+    <p class="mb-2">动态菜单</p>
     <div v-contextmenu:contextmenu class="wrapper">
       <code>右键点击此区域</code>
     </div>

src/views/components/contextmenu/menuGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>按钮组</h1>
+    <p class="mb-2">按钮组</p>
     <div v-contextmenu:contextmenu class="wrapper">
       <code>右键点击此区域</code>
     </div>

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>无缝滚动示例</span>
+          <span class="font-medium">无缝滚动示例</span>
           <el-button
             class="button"
             link

src/views/components/selector/index.vue

@@ -30,13 +30,11 @@ const selectedVal = ({ left, right }): void => {
     <el-card
       v-for="(item, key) in dataLists"
       :key="key"
-      class="box-card"
+      class="mb-2"
       shadow="never"
     >
       <template #header>
-        <div class="card-header">
+        <span class="font-medium">{{ item.title }}</span>
-          <span>{{ item.title }}</span>
-        </div>
       </template>
       <Selector
         :HsKey="key"
@@ -48,9 +46,3 @@ const selectedVal = ({ left, right }): void => {
     </el-card>
   </div>
 </template>
-
-<style scoped>
-.el-card {
-  margin-bottom: 10px;
-}
-</style>

src/views/permission/button/index.vue

@@ -1,75 +1,82 @@
 <script setup lang="ts">
-import { type CSSProperties, computed } from "vue";
 import { hasAuth, getAuths } from "@/router/utils";
 
 defineOptions({
   name: "PermissionButton"
 });
-
-const elStyle = computed((): CSSProperties => {
-  return {
-    width: "85vw",
-    justifyContent: "start"
-  };
-});
 </script>
 
 <template>
-  <el-space direction="vertical" size="large">
+  <div>
-    <el-tag :style="elStyle" size="large" effect="dark">
+    <p class="mb-2">当前拥有的code列表：{{ getAuths() }}</p>
-      当前拥有的code列表：{{ getAuths() }}
-    </el-tag>
 
-    <el-card shadow="never" :style="elStyle">
+    <el-card shadow="never" class="mb-2">
       <template #header>
         <div class="card-header">组件方式判断权限</div>
       </template>
-      <Auth value="btn_add">
+      <el-space wrap>
-        <el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
+        <Auth value="btn_add">
-      </Auth>
+          <el-button text bg type="warning">
-      <Auth :value="['btn_edit']">
+            拥有code：'btn_add' 权限可见
-        <el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
+          </el-button>
-      </Auth>
+        </Auth>
-      <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
+        <Auth :value="['btn_edit']">
-        <el-button type="danger">
+          <el-button text bg type="primary">
-          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+            拥有code：['btn_edit'] 权限可见
-        </el-button>
+          </el-button>
-      </Auth>
+        </Auth>
+        <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
+          <el-button text bg type="danger">
+            拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+          </el-button>
+        </Auth>
+      </el-space>
     </el-card>
 
-    <el-card shadow="never" :style="elStyle">
+    <el-card shadow="never" class="mb-2">
       <template #header>
         <div class="card-header">函数方式判断权限</div>
       </template>
-      <el-button v-if="hasAuth('btn_add')" type="success">
+      <el-space wrap>
-        拥有code：'btn_add' 权限可见
+        <el-button v-if="hasAuth('btn_add')" text bg type="warning">
-      </el-button>
+          拥有code：'btn_add' 权限可见
-      <el-button v-if="hasAuth(['btn_edit'])" type="primary">
+        </el-button>
-        拥有code：['btn_edit'] 权限可见
+        <el-button v-if="hasAuth(['btn_edit'])" text bg type="primary">
-      </el-button>
+          拥有code：['btn_edit'] 权限可见
-      <el-button
+        </el-button>
-        v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
+        <el-button
-        type="danger"
+          v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
-      >
+          text
-        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+          bg
-      </el-button>
+          type="danger"
+        >
+          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+        </el-button>
+      </el-space>
     </el-card>
 
-    <el-card shadow="never" :style="elStyle">
+    <el-card shadow="never">
       <template #header>
         <div class="card-header">
           指令方式判断权限（该方式不能动态修改权限）
         </div>
       </template>
-      <el-button v-auth="'btn_add'" type="success">
+      <el-space wrap>
-        拥有code：'btn_add' 权限可见
+        <el-button v-auth="'btn_add'" text bg type="warning">
-      </el-button>
+          拥有code：'btn_add' 权限可见
-      <el-button v-auth="['btn_edit']" type="primary">
+        </el-button>
-        拥有code：['btn_edit'] 权限可见
+        <el-button v-auth="['btn_edit']" text bg type="primary">
-      </el-button>
+          拥有code：['btn_edit'] 权限可见
-      <el-button v-auth="['btn_add', 'btn_edit', 'btn_delete']" type="danger">
+        </el-button>
-        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+        <el-button
-      </el-button>
+          v-auth="['btn_add', 'btn_edit', 'btn_delete']"
+          text
+          bg
+          type="danger"
+        >
+          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+        </el-button>
+      </el-space>
     </el-card>
-  </el-space>
+  </div>
 </template>

src/views/permission/page/index.vue

@@ -43,10 +43,10 @@ function onChange() {
 </script>
 
 <template>
-  <el-space direction="vertical" size="large">
+  <div>
-    <el-tag :style="elStyle" size="large" effect="dark">
+    <p class="mb-2">
       模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
-    </el-tag>
+    </p>
     <el-card shadow="never" :style="elStyle">
       <template #header>
         <div class="card-header">
@@ -62,5 +62,5 @@ function onChange() {
         />
       </el-select>
     </el-card>
-  </el-space>
+  </div>
 </template>

src/views/pure-table/high.vue

@@ -32,7 +32,7 @@ function tabClick({ index }) {
     </template>
 
     <el-alert
-      title="高级用法中所有表格都设置了 row-key ，后端需返回唯一值的字段，比如id 作用：1. 用来优化 Table
+      title="高级用法中所有表格都设置了 row-key ，后端需返回唯一值的字段，比如id。作用：1. 用来优化 Table
       的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
       type="info"
       :closable="false"

src/views/pure-table/index.vue

@@ -18,9 +18,16 @@ function tabClick({ index }) {
     <template #header>
       <div class="card-header">
         <span class="font-medium">
-          平台二次封装 element-plus 的 Table ，完全兼容 Api
+          二次封装 element-plus 的
-          并提供灵活的配置项以及完善的类型提醒，再也不用将代码都写在 template
+          <el-link
-          里了
+            href="https://element-plus.org/zh-CN/component/table.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            el-table
+          </el-link>
+          完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
+          template 里了
           <el-link
             href="https://github.com/pure-admin/pure-admin-table"
             target="_blank"
@@ -33,7 +40,7 @@ function tabClick({ index }) {
     </template>
 
     <el-alert
-      title="基础用法中大部分表格都没设置 row-key ，不过最好都设置一下，后端需返回唯一值的字段，比如id 作用：1. 用来优化 Table
+      title="基础用法中大部分表格都没设置 row-key ，不过最好都设置一下，后端需返回唯一值的字段，比如id。作用：1. 用来优化 Table
       的渲染，尤其当字段在深层结构中；2. 防止某些操作导致表格组件内部混乱"
       type="info"
       :closable="false"

src/views/tabs/index.vue

@@ -48,7 +48,7 @@ function onCloseTags() {
 <template>
   <el-card shadow="never">
     <template #header>
-      <div>标签页复用，超出限制自动关闭</div>
+      <div class="font-medium">标签页复用，超出限制自动关闭</div>
     </template>
     <div class="flex flex-wrap items-center">
       <p>query传参模式：</p>