chore: 优化演示示例

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">
-        <span>loaded page(total: {{ total }}): {{ page }}, </span>
-        disabled:
-        <el-switch v-model="disabled" :disabled="page >= total" />
-      </p>
-      <el-table
-        v-el-table-infinite-scroll="load"
-        :data="data"
-        :infinite-scroll-disabled="disabled"
-        height="435px"
-      >
-        <el-table-column type="index" />
-        <el-table-column prop="date" label="date" />
-        <el-table-column prop="name" label="name" />
-        <el-table-column prop="age" label="age" />
-      </el-table>
-    </div>
+    <p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
+    <el-table
+      v-el-table-infinite-scroll="load"
+      border
+      height="435px"
+      :data="data"
+      :infinite-scroll-disabled="isBottom"
+    >
+      <el-table-column width="80" type="index" label="序号" />
+      <el-table-column prop="date" label="日期" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="age" label="年龄" />
+    </el-table>
   </el-card>
 </template>

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">
-              <span class="font-medium"> 普通树结构 </span>
-            </div>
+            <div class="card-header">普通树结构</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">
-              <span class="font-medium"> 虚拟树结构 </span>
-            </div>
+            <div class="card-header">虚拟树结构</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,
-      height: 80
+      width: 180,
+      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-input
-      v-model="value"
-      class="mb-4 mr-4"
-      style="width: 200px"
-      clearable
-    />
-    <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>
+    <el-space wrap class="!mb-2">
+      <span> 请输入要创建水印的值：</span>
+      <el-input v-model="value" class="mr-4" style="width: 200px" clearable />
+      <span>请选择要创建水印的颜色：</span>
+      <el-color-picker v-model="color" show-alpha />
+    </el-space>
 
-    <div
-      ref="local"
-      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-sky-500"
-    />
-    <el-button
-      @click="
-        setLocalWatermark('局部水印', {
-          color,
-          width: 140,
-          height: 60
-        })
-      "
-    >
-      创建局部水印
-    </el-button>
-    <el-button
-      @click="
-        setLocalWatermark('局部水印', {
-          width: 140,
-          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,
-          height: 56.5,
-          rotate: 0,
-          gradient: [
-            { value: 0, color: 'magenta' },
-            { value: 0.5, color: 'blue' },
-            { value: 1.0, color: 'red' }
-          ]
-        })
-      "
-    >
-      创建局部渐变且水平90度的水印
-    </el-button>
-    <el-button
-      @click="
-        setLocalWatermark('局部水印', {
-          width: 140,
-          height: 56.5,
-          gradient: [
-            { value: 0, color: 'magenta' },
-            { value: 0.5, color: 'blue' },
-            { value: 1.0, color: 'red' }
-          ],
-          shadowConfig: [20]
-        })
-      "
-    >
-      创建局部渐变且有阴影的水印
-    </el-button>
-    <el-button @click="clearLocal">清除局部水印</el-button>
+    <el-space wrap>
+      <el-button bg text @click="setWatermark(value, { color })">
+        创建整页水印
+      </el-button>
+      <el-button
+        bg
+        text
+        @click="
+          setWatermark(value, {
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建整页渐变水印
+      </el-button>
+      <el-button
+        bg
+        text
+        @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
+        bg
+        text
+        @click="
+          setWatermark(value, {
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ],
+            shadowConfig: [20]
+          })
+        "
+      >
+        创建整页渐变且有阴影的水印
+      </el-button>
+      <el-button
+        bg
+        text
+        @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 bg text @click="clear">清除整页水印</el-button>
+    </el-space>
 
-    <div
-      ref="preventLocal"
-      class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-indigo-500"
-    />
+    <el-divider />
+
+    <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>