perf: Review所有演示页，修复开发环境下可避免的警告以及保持所有演示页风格大致统一

src/views/able/watermark.vue

@@ -36,7 +36,7 @@ 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"
@@ -55,12 +55,11 @@ onBeforeUnmount(() => {
     </el-space>
 
     <el-space wrap>
-      <el-button bg text @click="setWatermark(value, { color })">
+      <el-button plain @click="setWatermark(value, { color })">
         创建整页水印
       </el-button>
       <el-button
-        bg
-        text
+        plain
         @click="
           setWatermark(value, {
             gradient: [
@@ -74,8 +73,7 @@ onBeforeUnmount(() => {
         创建整页渐变水印
       </el-button>
       <el-button
-        bg
-        text
+        plain
         @click="
           setWatermark(value, {
             rotate: 0,
@@ -90,8 +88,7 @@ onBeforeUnmount(() => {
         创建整页渐变且水平90度的水印
       </el-button>
       <el-button
-        bg
-        text
+        plain
         @click="
           setWatermark(value, {
             gradient: [
@@ -106,8 +103,7 @@ onBeforeUnmount(() => {
         创建整页渐变且有阴影的水印
       </el-button>
       <el-button
-        bg
-        text
+        plain
         @click="
           setWatermark(value, {
             globalAlpha: 0.15, // 值越低越透明
@@ -121,7 +117,7 @@ onBeforeUnmount(() => {
       >
         创建整页高透明渐变水印
       </el-button>
-      <el-button bg text @click="clear">清除整页水印</el-button>
+      <el-button plain @click="clear">清除整页水印</el-button>
     </el-space>
 
     <el-divider />
@@ -130,8 +126,7 @@ onBeforeUnmount(() => {
 
     <el-space wrap class="mt-6">
       <el-button
-        bg
-        text
+        plain
         @click="
           setLocalWatermark('局部水印', {
             color,
@@ -143,8 +138,7 @@ onBeforeUnmount(() => {
         创建局部水印
       </el-button>
       <el-button
-        bg
-        text
+        plain
         @click="
           setLocalWatermark('局部水印', {
             width: 140,
@@ -160,8 +154,7 @@ onBeforeUnmount(() => {
         创建局部渐变水印
       </el-button>
       <el-button
-        bg
-        text
+        plain
         @click="
           setLocalWatermark('局部水印', {
             width: 140,
@@ -178,8 +171,7 @@ onBeforeUnmount(() => {
         创建局部渐变且水平90度的水印
       </el-button>
       <el-button
-        bg
-        text
+        plain
         @click="
           setLocalWatermark('局部水印', {
             width: 140,
@@ -195,7 +187,7 @@ onBeforeUnmount(() => {
       >
         创建局部渐变且有阴影的水印
       </el-button>
-      <el-button bg text @click="clearLocal">清除局部水印</el-button>
+      <el-button plain @click="clearLocal">清除局部水印</el-button>
     </el-space>
 
     <el-divider />

src/views/about/index.vue

@@ -100,8 +100,9 @@ Object.keys(devDependencies).forEach(key => {
             <span
               :class="getMainLabel(item.label)"
               style="color: var(--el-color-primary)"
-              >{{ item.field }}</span
             >
+              {{ item.field }}
+            </span>
           </a>
         </el-descriptions-item>
       </el-descriptions>
@@ -129,8 +130,9 @@ Object.keys(devDependencies).forEach(key => {
             <span
               :class="getMainLabel(item.label)"
               style="color: var(--el-color-primary)"
-              >{{ item.field }}</span
             >
+              {{ item.field }}
+            </span>
           </a>
         </el-descriptions-item>
       </el-descriptions>

src/views/components/draggable/index.vue

@@ -3,8 +3,6 @@ import { ref, onMounted } from "vue";
 import Sortable, { Swap } from "sortablejs";
 import draggable from "vuedraggable/src/vuedraggable";
 import { useAppStoreHook } from "@/store/modules/app";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Rank from "@iconify-icons/ep/rank";
 
 defineOptions({
   name: "Draggable"
@@ -64,7 +62,6 @@ onMounted(() => {
           <el-link
             href="https://sortablejs.github.io/vue.draggable.next/#/simple"
             target="_blank"
-            :icon="useRenderIcon(Rank)"
             style="margin: 0 4px 5px; font-size: 16px"
           >
             vuedraggable

src/views/components/segmented/index.vue

@@ -179,6 +179,5 @@ function onChange({ index, option }) {
     <el-divider />
     <p class="mb-2">change事件</p>
     <Segmented :options="optionsChange" @change="onChange" />
-    <el-divider />
   </el-card>
 </template>

src/views/components/waterfall/index.vue

@@ -92,7 +92,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-scrollbar height="87vh" class="content">
+  <el-scrollbar max-height="calc(100vh - 90px)" class="content">
     <Waterfall :list="list" v-bind="options">
       <template #item="{ item, url, index }">
         <div
@@ -149,3 +149,13 @@ onMounted(() => {
     <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
   </el-scrollbar>
 </template>
+
+<style lang="scss" scoped>
+.main-content {
+  margin: 0 !important;
+}
+
+:deep(.el-loading-spinner .el-loading-text) {
+  font-size: 24px;
+}
+</style>

src/views/editor/index.vue

@@ -6,7 +6,7 @@ defineOptions({
   name: "Editor"
 });
 
-const activeNames = ref(["1"]);
+const activeNames = ref("1");
 </script>
 
 <template>
@@ -27,13 +27,13 @@ const activeNames = ref(["1"]);
     </template>
     <el-collapse v-model="activeNames" accordion>
       <el-collapse-item title="基础用法" name="1">
-        <Base />
+        <Base v-if="activeNames === '1'" />
       </el-collapse-item>
       <el-collapse-item title="多个富文本" name="2">
-        <Multi />
+        <Multi v-if="activeNames === '2'" />
       </el-collapse-item>
       <el-collapse-item title="自定义图片上传" name="3">
-        <PicUpload />
+        <PicUpload v-if="activeNames === '3'" />
       </el-collapse-item>
     </el-collapse>
   </el-card>

src/views/flow-chart/index.vue

@@ -87,7 +87,7 @@ onMounted(() => {
         @catData="catData"
       />
       <!-- 节点面板 -->
-      <NodePanel :lf="lf" :nodeList="nodeList" />
+      <NodePanel v-if="lf" :lf="lf" :nodeList="nodeList" />
       <!-- 画布 -->
       <div id="turbo" />
       <!-- 数据查看面板 -->

src/views/guide/index.vue

@@ -6,10 +6,26 @@ defineOptions({
   name: "Guide"
 });
 
-const guide = () => {
+const onGuide = () => {
   intro()
     .setOptions({
       steps: [
+        {
+          element: document.querySelector(".sidebar-logo-container") as
+            | string
+            | HTMLElement,
+          title: "项目名称和Logo",
+          intro: "您可以在这里设置项目名称和Logo",
+          position: "left"
+        },
+        {
+          element: document.querySelector("#header-search") as
+            | string
+            | HTMLElement,
+          title: "搜索菜单",
+          intro: "您可以在这里搜索想要查看的菜单",
+          position: "left"
+        },
         {
           element: document.querySelector("#header-notice") as
             | string
@@ -49,12 +65,10 @@ const guide = () => {
     <template #header>
       <div class="card-header">
         <span class="font-medium">
-          引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能
+          引导页常用于引导式介绍项目的基本功能或亮点
         </span>
       </div>
     </template>
-    <el-button type="primary" class="mt-[10px]" @click="guide">
-      打开引导页
-    </el-button>
+    <el-button @click="onGuide"> 打开引导页 </el-button>
   </el-card>
 </template>

src/views/permission/button/index.vue

@@ -16,17 +16,17 @@ defineOptions({
       </template>
       <el-space wrap>
         <Auth value="btn_add">
-          <el-button text bg type="warning">
+          <el-button plain type="warning">
             拥有code：'btn_add' 权限可见
           </el-button>
         </Auth>
         <Auth :value="['btn_edit']">
-          <el-button text bg type="primary">
+          <el-button plain type="primary">
             拥有code：['btn_edit'] 权限可见
           </el-button>
         </Auth>
         <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
-          <el-button text bg type="danger">
+          <el-button plain type="danger">
             拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
           </el-button>
         </Auth>
@@ -38,16 +38,15 @@ defineOptions({
         <div class="card-header">函数方式判断权限</div>
       </template>
       <el-space wrap>
-        <el-button v-if="hasAuth('btn_add')" text bg type="warning">
+        <el-button v-if="hasAuth('btn_add')" plain type="warning">
           拥有code：'btn_add' 权限可见
         </el-button>
-        <el-button v-if="hasAuth(['btn_edit'])" text bg type="primary">
+        <el-button v-if="hasAuth(['btn_edit'])" plain type="primary">
           拥有code：['btn_edit'] 权限可见
         </el-button>
         <el-button
           v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
-          text
-          bg
+          plain
           type="danger"
         >
           拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
@@ -62,16 +61,15 @@ defineOptions({
         </div>
       </template>
       <el-space wrap>
-        <el-button v-auth="'btn_add'" text bg type="warning">
+        <el-button v-auth="'btn_add'" plain type="warning">
           拥有code：'btn_add' 权限可见
         </el-button>
-        <el-button v-auth="['btn_edit']" text bg type="primary">
+        <el-button v-auth="['btn_edit']" plain type="primary">
           拥有code：['btn_edit'] 权限可见
         </el-button>
         <el-button
           v-auth="['btn_add', 'btn_edit', 'btn_delete']"
-          text
-          bg
+          plain
           type="danger"
         >
           拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见