chore: 优化演示示例

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>

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>