chore: 优化演示示例

2025-11-03 13:44:47 +08:00 · 2024-01-11 22:42:19 +08:00
parent 7b228f4784
commit 44c541126a
30 changed files with 409 additions and 422 deletions
--- a/src/views/able/cascader.vue
+++ b/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">
--- a/src/views/able/debounce.vue
+++ b/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
--- a/src/views/able/infinite-scroll.vue
+++ b/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>
--- a/src/views/able/line-tree.vue
+++ b/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
--- a/src/views/able/sensitive.vue
+++ b/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
--- a/src/views/able/swiper.vue
+++ b/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>
--- a/src/views/able/virtual-list/horizontal.vue
+++ b/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 {
--- a/src/views/able/virtual-list/index.vue
+++ b/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"
--- a/src/views/able/virtual-list/vertical.vue
+++ b/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 {
--- a/src/views/able/watermark.vue
+++ b/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>
--- a/src/views/components/contextmenu/basic.vue
+++ b/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>
--- a/src/views/components/contextmenu/menuDynamic.vue
+++ b/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>
--- a/src/views/components/contextmenu/menuGroup.vue
+++ b/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>
--- 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>无缝滚动示例</span>
+          <span class="font-medium">无缝滚动示例</span>
          <el-button
            class="button"
            link
--- a/src/views/components/selector/index.vue
+++ b/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>{{ item.title }}</span>
-        </div>
+        <span class="font-medium">{{ item.title }}</span>
      </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>
--- a/src/views/permission/button/index.vue
+++ b/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">
-    <el-tag :style="elStyle" size="large" effect="dark">
-      当前拥有的code列表：{{ getAuths() }}
-    </el-tag>
+  <div>
+    <p class="mb-2">当前拥有的code列表：{{ getAuths() }}</p>

-    <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-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
-      </Auth>
-      <Auth :value="['btn_edit']">
-        <el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
-      </Auth>
-      <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
-        <el-button type="danger">
-          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
-        </el-button>
-      </Auth>
+      <el-space wrap>
+        <Auth value="btn_add">
+          <el-button text bg type="warning">
+            拥有code：'btn_add' 权限可见
+          </el-button>
+        </Auth>
+        <Auth :value="['btn_edit']">
+          <el-button text bg type="primary">
+            拥有code：['btn_edit'] 权限可见
+          </el-button>
+        </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">
-        拥有code：'btn_add' 权限可见
-      </el-button>
-      <el-button v-if="hasAuth(['btn_edit'])" type="primary">
-        拥有code：['btn_edit'] 权限可见
-      </el-button>
-      <el-button
-        v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
-        type="danger"
-      >
-        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
-      </el-button>
+      <el-space wrap>
+        <el-button v-if="hasAuth('btn_add')" text bg type="warning">
+          拥有code：'btn_add' 权限可见
+        </el-button>
+        <el-button v-if="hasAuth(['btn_edit'])" text bg type="primary">
+          拥有code：['btn_edit'] 权限可见
+        </el-button>
+        <el-button
+          v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
+          text
+          bg
+          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">
-        拥有code：'btn_add' 权限可见
-      </el-button>
-      <el-button v-auth="['btn_edit']" type="primary">
-        拥有code：['btn_edit'] 权限可见
-      </el-button>
-      <el-button v-auth="['btn_add', 'btn_edit', 'btn_delete']" type="danger">
-        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
-      </el-button>
+      <el-space wrap>
+        <el-button v-auth="'btn_add'" text bg type="warning">
+          拥有code：'btn_add' 权限可见
+        </el-button>
+        <el-button v-auth="['btn_edit']" text bg type="primary">
+          拥有code：['btn_edit'] 权限可见
+        </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>
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -43,10 +43,10 @@ function onChange() {
 </script>

 <template>
-  <el-space direction="vertical" size="large">
-    <el-tag :style="elStyle" size="large" effect="dark">
+  <div>
+    <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>
--- a/src/views/pure-table/high.vue
+++ b/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"
--- a/src/views/pure-table/index.vue
+++ b/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
-          并提供灵活的配置项以及完善的类型提醒，再也不用将代码都写在 template
-          里了
+          二次封装 element-plus 的
+          <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"
--- a/src/views/tabs/index.vue
+++ b/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>