refactor: adjust all sample pages and use page components (#4118)

playground/src/views/demos/access/button-control.vue

@@ -4,9 +4,10 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
 import { useRouter } from 'vue-router';
 
 import { AccessControl, useAccess } from '@vben/access';
+import { Page } from '@vben/common-ui';
 import { resetAllStores, useUserStore } from '@vben/stores';
 
-import { Button } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 
 import { useAuthStore } from '#/store';
 
@@ -50,21 +51,17 @@ async function changeAccount(role: string) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">
-        {{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
-      </h1>
-      <div class="text-foreground/80 mt-2">切换不同的账号，观察按钮变化。</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">当前角色:</span>
+  <Page
+    :title="`${accessMode === 'frontend' ? '前端' : '后端'}按钮访问权限演示`"
+    description="切换不同的账号，观察按钮变化。"
+  >
+    <Card class="mb-5">
+      <template #title>
+        <span class="font-semibold">当前角色:</span>
         <span class="text-primary mx-4 text-lg">
           {{ userStore.userRoles?.[0] }}
         </span>
-      </div>
+      </template>
 
       <Button :type="roleButtonType('super')" @click="changeAccount('super')">
         切换为 Super 账号
@@ -80,10 +77,9 @@ async function changeAccount(role: string) {
       <Button :type="roleButtonType('user')" @click="changeAccount('user')">
         切换为 User 账号
       </Button>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 权限码方式</div>
+    <Card class="mb-5" title="组件形式控制 - 权限码">
       <AccessControl :codes="['AC_100100']" type="code">
         <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
       </AccessControl>
@@ -98,10 +94,13 @@ async function changeAccount(role: string) {
           Super & Admin 账号可见 ["AC_100100","AC_1000001"]
         </Button>
       </AccessControl>
-    </div>
+    </Card>
 
-    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
+    <Card
+      v-if="accessMode === 'frontend'"
+      class="mb-5"
+      title="组件形式控制 - 角色"
+    >
       <AccessControl :codes="['super']" type="role">
         <Button class="mr-4"> Super 角色可见 </Button>
       </AccessControl>
@@ -114,10 +113,9 @@ async function changeAccount(role: string) {
       <AccessControl :codes="['super', 'admin']" type="role">
         <Button class="mr-4"> Super & Admin 角色可见 </Button>
       </AccessControl>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">函数形式控制</div>
+    <Card class="mb-5" title="函数形式控制">
       <Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
         Super 账号可见 ["AC_1000001"]
       </Button>
@@ -130,10 +128,9 @@ async function changeAccount(role: string) {
       <Button v-if="hasAccessByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
         Super & Admin 账号可见 ["AC_100100","AC_1000001"]
       </Button>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 权限码</div>
+    <Card class="mb-5" title="指令方式 - 权限码">
       <Button class="mr-4" v-access:code="['AC_100100']">
         Super 账号可见 ["AC_1000001"]
       </Button>
@@ -146,16 +143,15 @@ async function changeAccount(role: string) {
       <Button class="mr-4" v-access:code="['AC_100100', 'AC_1000001']">
         Super & Admin 账号可见 ["AC_100100","AC_1000001"]
       </Button>
-    </div>
+    </Card>
 
-    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 角色</div>
+    <Card class="mb-5" title="指令方式 - 角色">
       <Button class="mr-4" v-access:role="['super']"> Super 角色可见 </Button>
       <Button class="mr-4" v-access:role="['admin']"> Admin 角色可见 </Button>
       <Button class="mr-4" v-access:role="['user']"> User 角色可见 </Button>
       <Button class="mr-4" v-access:role="['super', 'admin']">
         Super & Admin 角色可见
       </Button>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>