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

playground/src/views/demos/features/icons/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
 import {
   MdiGithub,
   MdiGoogle,
@@ -14,12 +15,13 @@ import {
   SvgCardIcon,
   SvgDownloadIcon,
 } from '@vben/icons';
+
+import { Card } from 'ant-design-vue';
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">图标</h1>
+  <Page title="图标">
+    <template #description>
       <div class="text-foreground/80 mt-2">
         图标可在
         <a
@@ -31,10 +33,9 @@ import {
         </a>
         中查找，支持多种图标库，如 Material Design, Font Awesome, Jam Icons 等。
       </div>
-    </div>
+    </template>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">Iconify</div>
+    <Card class="mb-5" title="Iconify">
       <div class="flex items-center gap-5">
         <MdiGithub class="size-8" />
         <MdiGoogle class="size-8 text-red-500" />
@@ -42,10 +43,9 @@ import {
         <MdiWechat class="size-8" />
         <MdiKeyboardEsc class="size-8" />
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">Svg Icons</div>
+    <Card title="Svg Icons">
       <div class="flex items-center gap-5">
         <SvgAvatar1Icon class="size-8" />
         <SvgAvatar2Icon class="size-8 text-red-500" />
@@ -56,6 +56,6 @@ import {
         <SvgCardIcon class="size-8" />
         <SvgDownloadIcon class="size-8" />
       </div>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>

playground/src/views/demos/features/login-expired/index.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { LoginExpiredModeType } from '@vben/types';
 
+import { Page } from '@vben/common-ui';
 import { preferences, updatePreferences } from '@vben/preferences';
 
-import { Button } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 
 import { getMockStatusApi } from '#/api';
 
@@ -17,26 +18,22 @@ async function handleClick(type: LoginExpiredModeType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">登录过期演示</h1>
+  <Page title="登录过期演示">
+    <template #description>
       <div class="text-foreground/80 mt-2">
         接口请求遇到401状态码时，需要重新登录。有两种方式：
-        <div>1.转到登录页，登录成功后跳转回原页面</div>
-        <div>
+        <p>1.转到登录页，登录成功后跳转回原页面</p>
+        <p>
           2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
-        </div>
+        </p>
       </div>
-    </div>
+    </template>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">跳转登录页面方式</div>
+    <Card class="mb-5" title="跳转登录页面方式">
       <Button type="primary" @click="handleClick('page')"> 点击触发 </Button>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">登录弹窗方式</div>
+    </Card>
+    <Card class="mb-5" title="登录弹窗方式">
       <Button type="primary" @click="handleClick('modal')"> 点击触发 </Button>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>

playground/src/views/demos/features/tabs/index.vue

@@ -2,9 +2,10 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
-import { Input as AInput, Button } from 'ant-design-vue';
+import { Button, Card, Input } from 'ant-design-vue';
 
 const router = useRouter();
 const newTabTitle = ref('');
@@ -38,14 +39,8 @@ function reset() {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">标签页</h1>
-      <div class="text-foreground/80 mt-2">用于需要操作标签页的场景</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="text-lg font-semibold">打开/关闭标签页</div>
+  <Page description="用于需要操作标签页的场景" title="标签页">
+    <Card class="mb-5" title="打开/关闭标签页">
       <div class="text-foreground/80 my-3">
         如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
       </div>
@@ -55,10 +50,9 @@ function reset() {
           关闭 "关于" 标签页
         </Button>
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="text-lg font-semibold">标签页操作</div>
+    <Card class="mb-5" title="标签页操作">
       <div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
       <div class="flex flex-wrap gap-3">
         <Button type="primary" @click="closeCurrentTab()">
@@ -76,15 +70,15 @@ function reset() {
         </Button>
         <Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
+    <Card class="mb-5" title="动态标题">
       <div class="text-lg font-semibold">动态标题</div>
       <div class="text-foreground/80 my-3">
         该操作不会影响页面标题，仅修改Tab标题
       </div>
       <div class="flex flex-wrap items-center gap-3">
-        <AInput
+        <Input
           v-model:value="newTabTitle"
           class="w-40"
           placeholder="请输入新标题"
@@ -94,9 +88,9 @@ function reset() {
         </Button>
         <Button @click="reset"> 重置 </Button>
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
+    <Card class="mb-5" title="最大打开数量">
       <div class="text-lg font-semibold">最大打开数量</div>
       <div class="text-foreground/80 my-3">
         限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
@@ -108,6 +102,6 @@ function reset() {
           </Button>
         </template>
       </div>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>

playground/src/views/demos/features/tabs/tab-detail.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
 const route = useRoute();
@@ -16,12 +17,7 @@ setTabTitle(`No.${index.value} - 详情信息`);
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">标签详情页</h1>
-      <div class="text-foreground/80 mt-2">
-        <div>{{ index }} - 详情页内容在此</div>
-      </div>
-    </div>
-  </div>
+  <Page :title="`标签页${index}详情页`">
+    <template #description> {{ index }} - 详情页内容在此 </template>
+  </Page>
 </template>

playground/src/views/demos/features/watermark/index.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
 import { useWatermark } from '@vben/hooks';
 
-import { Button } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 
 const { destroyWatermark, updateWatermark } = useWatermark();
 
@@ -40,9 +41,8 @@ async function createWaterMark() {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">水印</h1>
+  <Page title="水印">
+    <template #description>
       <div class="text-foreground/80 mt-2">
         水印使用了
         <a
@@ -54,13 +54,13 @@ async function createWaterMark() {
         </a>
         开源插件，详细配置可见插件配置。
       </div>
-    </div>
+    </template>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 flex gap-3 text-lg font-semibold">
-        <Button type="primary" @click="createWaterMark()">创建水印</Button>
-        <Button danger @click="destroyWatermark">移除水印</Button>
-      </div>
-    </div>
-  </div>
+    <Card title="使用">
+      <Button class="mr-2" type="primary" @click="createWaterMark()">
+        创建水印
+      </Button>
+      <Button danger @click="destroyWatermark">移除水印</Button>
+    </Card>
+  </Page>
 </template>