From 517acada1aa1a1ce45d0b6eb2e76d1fd1082084a Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Sun, 11 Aug 2024 20:05:52 +0800
Subject: [PATCH] refactor: adjust all sample pages and use page components
 (#4118)

---
 .github/release-drafter.yml                   |  4 +-
 .vscode/settings.json                         |  3 +-
 apps/web-antd/src/views/demos/antd/index.vue  | 66 +++++++------------
 .../web-ele/src/views/demos/element/index.vue | 66 +++++++------------
 .../web-naive/src/views/demos/naive/index.vue | 60 ++++++-----------
 .../web-naive/src/views/demos/table/index.vue |  8 +--
 .../src/components/avatar/avatar.vue          |  5 +-
 .../src/components/button/button.vue          |  3 +-
 .../src/components/button/icon-button.vue     |  4 +-
 .../components/context-menu/context-menu.vue  |  7 +-
 .../src/components/hover-card/hover-card.vue  | 15 ++---
 .../src/components/input/interface.ts         |  4 +-
 .../shadcn-ui/src/components/link/link.vue    |  4 +-
 .../src/components/pin-input/interface.ts     |  4 +-
 .../src/components/popover/popover.vue        | 18 ++---
 .../src/components/scrollbar/scrollbar.vue    |  5 +-
 .../components/segmented/tabs-indicator.vue   |  6 +-
 .../src/components/tooltip/tooltip.vue        |  6 +-
 packages/effects/README.md                    |  2 +-
 .../ellipsis-text/ellipsis-text.vue           | 15 +++--
 .../{ => components}/ellipsis-text/index.ts   |  0
 .../effects/common-ui/src/components/index.ts |  2 +
 .../src/{ => components}/page/index.ts        |  0
 .../src/{ => components}/page/page-footer.vue |  0
 .../src/{ => components}/page/page-header.vue |  6 +-
 .../src/{ => components}/page/page.ts         |  4 +-
 .../src/{ => components}/page/page.vue        | 14 ++--
 packages/effects/common-ui/src/index.ts       |  8 +--
 .../common-ui/src/{ => ui}/about/about.ts     |  0
 .../common-ui/src/{ => ui}/about/about.vue    | 24 +++----
 .../common-ui/src/{ => ui}/about/index.ts     |  0
 .../{ => ui}/authentication/auth-title.vue    |  0
 .../{ => ui}/authentication/code-login.vue    |  0
 .../authentication/forget-password.vue        |  0
 .../src/{ => ui}/authentication/index.ts      |  0
 .../authentication/login-expired-modal.vue    |  0
 .../src/{ => ui}/authentication/login.vue     |  0
 .../{ => ui}/authentication/qrcode-login.vue  |  0
 .../src/{ => ui}/authentication/register.vue  |  0
 .../authentication/third-party-login.vue      |  0
 .../src/{ => ui}/authentication/typings.ts    |  0
 .../analysis/analysis-chart-card.vue          |  0
 .../analysis/analysis-charts-tabs.vue         |  0
 .../dashboard/analysis/analysis-overview.vue  |  0
 .../src/{ => ui}/dashboard/analysis/index.ts  |  0
 .../common-ui/src/{ => ui}/dashboard/index.ts |  0
 .../src/{ => ui}/dashboard/typing.ts          |  0
 .../src/{ => ui}/dashboard/workbench/index.ts |  0
 .../dashboard/workbench/workbench-header.vue  |  0
 .../dashboard/workbench/workbench-project.vue |  0
 .../workbench/workbench-quick-nav.vue         |  0
 .../dashboard/workbench/workbench-todo.vue    |  0
 .../dashboard/workbench/workbench-trends.vue  |  0
 .../src/{ => ui}/fallback/fallback.ts         |  0
 .../src/{ => ui}/fallback/fallback.vue        |  0
 .../src/{ => ui}/fallback/icons/icon-403.vue  |  0
 .../src/{ => ui}/fallback/icons/icon-404.vue  |  0
 .../src/{ => ui}/fallback/icons/icon-500.vue  |  0
 .../fallback/icons/icon-coming-soon.vue       |  0
 .../{ => ui}/fallback/icons/icon-offline.vue  |  0
 .../src/{ => ui}/fallback/icons/warning.svg   |  0
 .../common-ui/src/{ => ui}/fallback/index.ts  |  0
 packages/effects/common-ui/src/ui/index.ts    |  4 ++
 .../src/views/demos/access/admin-visible.vue  |  8 +--
 .../src/views/demos/access/button-control.vue | 56 ++++++++--------
 playground/src/views/demos/access/index.vue   | 36 ++++------
 .../src/views/demos/access/super-visible.vue  |  8 +--
 .../src/views/demos/access/user-visible.vue   |  8 +--
 .../src/views/demos/features/icons/index.vue  | 22 +++----
 .../demos/features/login-expired/index.vue    | 29 ++++----
 .../src/views/demos/features/tabs/index.vue   | 32 ++++-----
 .../views/demos/features/tabs/tab-detail.vue  | 12 ++--
 .../views/demos/features/watermark/index.vue  | 24 +++----
 .../src/views/examples/ellipsis/data.ts       |  2 -
 .../src/views/examples/ellipsis/index.vue     | 61 +++++++++--------
 75 files changed, 282 insertions(+), 383 deletions(-)
 rename packages/effects/common-ui/src/{ => components}/ellipsis-text/ellipsis-text.vue (93%)
 rename packages/effects/common-ui/src/{ => components}/ellipsis-text/index.ts (100%)
 create mode 100644 packages/effects/common-ui/src/components/index.ts
 rename packages/effects/common-ui/src/{ => components}/page/index.ts (100%)
 rename packages/effects/common-ui/src/{ => components}/page/page-footer.vue (100%)
 rename packages/effects/common-ui/src/{ => components}/page/page-header.vue (71%)
 rename packages/effects/common-ui/src/{ => components}/page/page.ts (75%)
 rename packages/effects/common-ui/src/{ => components}/page/page.vue (63%)
 rename packages/effects/common-ui/src/{ => ui}/about/about.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/about/about.vue (93%)
 rename packages/effects/common-ui/src/{ => ui}/about/index.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/auth-title.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/code-login.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/forget-password.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/index.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/login-expired-modal.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/login.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/qrcode-login.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/register.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/third-party-login.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/authentication/typings.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/analysis/analysis-chart-card.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/analysis/analysis-charts-tabs.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/analysis/analysis-overview.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/analysis/index.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/index.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/typing.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/workbench/index.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/workbench/workbench-header.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/workbench/workbench-project.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/workbench/workbench-quick-nav.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/workbench/workbench-todo.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/dashboard/workbench/workbench-trends.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/fallback.ts (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/fallback.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/icons/icon-403.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/icons/icon-404.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/icons/icon-500.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/icons/icon-coming-soon.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/icons/icon-offline.vue (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/icons/warning.svg (100%)
 rename packages/effects/common-ui/src/{ => ui}/fallback/index.ts (100%)
 create mode 100644 packages/effects/common-ui/src/ui/index.ts
 delete mode 100644 playground/src/views/examples/ellipsis/data.ts

diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
index f700c636..fd88affe 100644
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -17,12 +17,14 @@ categories:
   - title: "🐞 Bug Fixes"
     labels:
       - "bug"
+  - title: "📈 Performance"
+    labels:
+      - "perf"
   - title: 📝 Documentation
     labels:
       - "documentation"
   - title: 👻 Maintenance
     labels:
-      - "perf"
       - "chore"
       - "dependencies"
     # collapse-after: 12
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6a97d0aa..80950410 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -192,5 +192,6 @@
   "i18n-ally.keystyle": "nested",
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vitest.disableWorkspaceWarning": true
 }
diff --git a/apps/web-antd/src/views/demos/antd/index.vue b/apps/web-antd/src/views/demos/antd/index.vue
index a9710f12..8286bebb 100644
--- a/apps/web-antd/src/views/demos/antd/index.vue
+++ b/apps/web-antd/src/views/demos/antd/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
 import { Button, Card, message, notification, Space } from 'ant-design-vue';
 
 type NotificationType = 'error' | 'info' | 'success' | 'warning';
@@ -31,56 +33,34 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">Ant Design Vue组件使用演示</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>
-      </div>
-      <div>
-        <Space>
-          <Button>Default</Button>
-          <Button type="primary"> Primary </Button>
-          <Button> Info </Button>
-          <Button danger> Error </Button>
-        </Space>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">卡片</span>
-      </div>
-      <div>
-        <Card title="卡片"> 卡片内容 </Card>
-      </div>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">信息 Message </span>
-      </div>
-      <div class="flex gap-3">
+  <Page
+    description="支持多语言，主题功能集成切换等"
+    title="Ant Design Vue组件使用演示"
+  >
+    <Card title="按钮">
+      <Space>
+        <Button>Default</Button>
+        <Button type="primary"> Primary </Button>
+        <Button> Info </Button>
+        <Button danger> Error </Button>
+      </Space>
+    </Card>
+    <Card class="mb-5" title="Message">
+      <Space>
         <Button @click="info"> 信息 </Button>
         <Button danger @click="error"> 错误 </Button>
         <Button @click="warning"> 警告 </Button>
         <Button @click="success"> 成功 </Button>
-      </div>
-    </div>
+      </Space>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
+    <Card class="mb-5" title="Notification">
+      <Space>
         <Button @click="notify('info')"> 信息 </Button>
         <Button danger @click="notify('error')"> 错误 </Button>
         <Button @click="notify('warning')"> 警告 </Button>
         <Button @click="notify('success')"> 成功 </Button>
-      </div>
-    </div>
-  </div>
+      </Space>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-ele/src/views/demos/element/index.vue b/apps/web-ele/src/views/demos/element/index.vue
index 5ca94b73..dc02759f 100644
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/web-ele/src/views/demos/element/index.vue
@@ -41,54 +41,38 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <Page title="Element Plus组件使用演示">
-    <template #header> 支持多语言，主题功能集成切换等 </template>
-    <div class="card-box p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">按钮</span>
-      </div>
-      <div>
-        <ElSpace>
-          <ElButton>Default</ElButton>
-          <ElButton type="primary"> Primary </ElButton>
-          <ElButton type="info"> Info </ElButton>
-          <ElButton type="success"> Success </ElButton>
-          <ElButton type="warning"> Warning </ElButton>
-          <ElButton type="danger"> Error </ElButton>
-        </ElSpace>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">卡片</span>
-      </div>
-      <div>
-        <ElCard title="卡片"> 卡片内容 </ElCard>
-      </div>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">信息 Message </span>
-      </div>
-      <div class="flex gap-3">
+  <Page
+    description="支持多语言，主题功能集成切换等"
+    title="Element Plus组件使用演示"
+  >
+    <ElCard class="mb-5">
+      <template #header> 按钮 </template>
+      <ElSpace>
+        <ElButton>Default</ElButton>
+        <ElButton type="primary"> Primary </ElButton>
+        <ElButton type="info"> Info </ElButton>
+        <ElButton type="success"> Success </ElButton>
+        <ElButton type="warning"> Warning </ElButton>
+        <ElButton type="danger"> Error </ElButton>
+      </ElSpace>
+    </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Message </template>
+      <ElSpace>
         <ElButton type="info" @click="info"> 信息 </ElButton>
         <ElButton type="danger" @click="error"> 错误 </ElButton>
         <ElButton type="warning" @click="warning"> 警告 </ElButton>
         <ElButton type="success" @click="success"> 成功 </ElButton>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
+      </ElSpace>
+    </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Notification </template>
+      <ElSpace>
         <ElButton type="info" @click="notify('info')"> 信息 </ElButton>
         <ElButton type="danger" @click="notify('error')"> 错误 </ElButton>
         <ElButton type="warning" @click="notify('warning')"> 警告 </ElButton>
         <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
-      </div>
-    </div>
+      </ElSpace>
+    </ElCard>
   </Page>
 </template>
diff --git a/apps/web-naive/src/views/demos/naive/index.vue b/apps/web-naive/src/views/demos/naive/index.vue
index d115ff24..41d55109 100644
--- a/apps/web-naive/src/views/demos/naive/index.vue
+++ b/apps/web-naive/src/views/demos/naive/index.vue
@@ -34,55 +34,35 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <Page title="naive组件使用演示">
-    <template #header> 支持多语言，主题功能集成切换等 </template>
-    <div class="card-box p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">按钮</span>
-      </div>
-      <div>
-        <NSpace>
-          <NButton>Default</NButton>
-          <NButton type="tertiary"> Tertiary </NButton>
-          <NButton type="primary"> Primary </NButton>
-          <NButton type="info"> Info </NButton>
-          <NButton type="success"> Success </NButton>
-          <NButton type="warning"> Warning </NButton>
-          <NButton type="error"> Error </NButton>
-        </NSpace>
-      </div>
-    </div>
+  <Page description="支持多语言，主题功能集成切换等" title="naive组件使用演示">
+    <NCard class="mb-5" title="按钮">
+      <NSpace>
+        <NButton>Default</NButton>
+        <NButton type="tertiary"> Tertiary </NButton>
+        <NButton type="primary"> Primary </NButton>
+        <NButton type="info"> Info </NButton>
+        <NButton type="success"> Success </NButton>
+        <NButton type="warning"> Warning </NButton>
+        <NButton type="error"> Error </NButton>
+      </NSpace>
+    </NCard>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">卡片</span>
-      </div>
-      <div>
-        <NCard title="卡片"> 卡片内容 </NCard>
-      </div>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">信息 Message </span>
-      </div>
-      <div class="flex gap-3">
+    <NCard class="mb-5" title="Message">
+      <NSpace>
         <NButton type="error" @click="error"> 错误 </NButton>
         <NButton type="warning" @click="warning"> 警告 </NButton>
         <NButton type="success" @click="success"> 成功 </NButton>
         <NButton type="primary" @click="loading"> 加载中 </NButton>
-      </div>
-    </div>
+      </NSpace>
+    </NCard>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
+    <NCard class="mb-5" title="Notification">
+      <NSpace>
         <NButton type="error" @click="notify('error')"> 错误 </NButton>
         <NButton type="warning" @click="notify('warning')"> 警告 </NButton>
         <NButton type="success" @click="notify('success')"> 成功 </NButton>
         <NButton type="primary" @click="notify('info')"> 加载中 </NButton>
-      </div>
-    </div>
+      </NSpace>
+    </NCard>
   </Page>
 </template>
diff --git a/apps/web-naive/src/views/demos/table/index.vue b/apps/web-naive/src/views/demos/table/index.vue
index ae669052..ddc958bc 100644
--- a/apps/web-naive/src/views/demos/table/index.vue
+++ b/apps/web-naive/src/views/demos/table/index.vue
@@ -27,10 +27,10 @@ const data = [
 </script>
 
 <template>
-  <Page title="NDataTable">
-    <template #header>
-      表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
-    </template>
+  <Page
+    description="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
+    title="NDataTable"
+  >
     <NDataTable :columns="columns" :data="data" />
   </Page>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index 1e535f6f..b16f549b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -5,7 +5,6 @@ import type {
   AvatarRootProps,
 } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
 import {
@@ -16,9 +15,9 @@ import {
 
 interface Props extends AvatarRootProps, AvatarFallbackProps, AvatarImageProps {
   alt?: string;
-  class?: HTMLAttributes['class'];
+  class?: any;
   dot?: boolean;
-  dotClass?: HTMLAttributes['class'];
+  dotClass?: any;
 }
 
 defineOptions({
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
index f0fddefe..cfe25ac6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
 import { LoaderCircle } from '@vben-core/icons';
@@ -12,7 +11,7 @@ import { cn } from '@vben-core/shared';
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
 interface Props extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   disabled?: boolean;
   loading?: boolean;
   size?: ButtonVariants['size'];
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
index 57bd4295..e90599e1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ButtonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 
-import { computed, type HTMLAttributes, useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
 import { cn } from '@vben-core/shared';
@@ -11,7 +11,7 @@ import { type PrimitiveProps } from 'radix-vue';
 import VbenButton from './button.vue';
 
 interface Props extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   disabled?: boolean;
   onClick?: () => void;
   tooltip?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
index 8665f116..d2ae68cd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -7,7 +7,6 @@ import type {
 
 import type { IContextMenuItem } from './interface';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
 import {
@@ -23,11 +22,11 @@ import { useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<
   {
-    class?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
+    class?: any;
+    contentClass?: any;
     contentProps?: ContextMenuContentProps;
     handlerData?: Record<string, any>;
-    itemClass?: HTMLAttributes['class'];
+    itemClass?: any;
     menus: (data: any) => IContextMenuItem[];
   } & ContextMenuRootProps
 >();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
index 70a2df48..8c905143 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -5,7 +5,6 @@ import type {
   HoverCardRootProps,
 } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
 import {
@@ -16,13 +15,13 @@ import {
 
 import { useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<
-  {
-    class?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
-    contentProps?: HoverCardContentProps;
-  } & HoverCardRootProps
->();
+interface Props extends HoverCardRootProps {
+  class?: any;
+  contentClass?: any;
+  contentProps?: HoverCardContentProps;
+}
+
+const props = defineProps<Props>();
 
 const emits = defineEmits<HoverCardRootEmits>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts
index 2ac0669d..0b2e1846 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts
@@ -1,7 +1,5 @@
-import type { HTMLAttributes } from 'vue';
-
 interface InputProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   /**
    * 错误提示信息
    */
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue b/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
index 0ea8c634..0d92fbcf 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
 import { cn } from '@vben-core/shared';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
 interface Props extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   href: string;
 }
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts
index 684f88ef..d5f603f0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts
@@ -1,5 +1,3 @@
-import type { HTMLAttributes } from 'vue';
-
 interface PinInputProps {
   /**
    * 发送验证码按钮loading
@@ -9,7 +7,7 @@ interface PinInputProps {
    * 发送验证码按钮文本
    */
   btnText?: string;
-  class?: HTMLAttributes['class'];
+  class?: any;
   /**
    * 验证码长度
    */
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
index 1a5111e4..7e9c382e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -5,7 +5,6 @@ import type {
   PopoverRootProps,
 } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
 import {
@@ -16,16 +15,13 @@ import {
 
 import { useForwardPropsEmits } from 'radix-vue';
 
-const props = withDefaults(
-  defineProps<
-    {
-      class?: HTMLAttributes['class'];
-      contentClass?: HTMLAttributes['class'];
-      contentProps?: PopoverContentProps;
-    } & PopoverRootProps
-  >(),
-  {},
-);
+interface Props extends PopoverRootProps {
+  class?: any;
+  contentClass?: any;
+  contentProps?: PopoverContentProps;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
 
 const emits = defineEmits<PopoverRootEmits>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
index 9190b6ea..ab2448b5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { ref } from 'vue';
 
 import {
@@ -9,9 +8,9 @@ import {
 import { cn } from '@vben-core/shared';
 
 interface Props {
-  class?: HTMLAttributes['class'];
+  class?: any;
   horizontal?: boolean;
-  scrollBarClass?: HTMLAttributes['class'];
+  scrollBarClass?: any;
   shadow?: boolean;
   shadowBorder?: boolean;
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
index 61ebf244..e89ce413 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared';
 
@@ -9,9 +9,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & TabsIndicatorProps
->();
+const props = defineProps<{ class?: any } & TabsIndicatorProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
index f96984d9..83e58358 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TooltipContentProps } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
+import type { StyleValue } from 'vue';
 
 import {
   Tooltip,
@@ -11,8 +11,8 @@ import {
 } from '@vben-core/shadcn-ui/components/ui/tooltip';
 
 interface Props {
-  contentClass?: HTMLAttributes['class'];
-  contentStyle?: HTMLAttributes['style'];
+  contentClass?: any;
+  contentStyle?: StyleValue;
   delayDuration?: number;
   side: TooltipContentProps['side'];
 }
diff --git a/packages/effects/README.md b/packages/effects/README.md
index 612db8e6..4965b512 100644
--- a/packages/effects/README.md
+++ b/packages/effects/README.md
@@ -1,6 +1,6 @@
 ## Effects 目录
 
-`effects` 目录专门用于存放与副作用相关的代码和逻辑。如果你的包具有以下特点，建议将其放置在 `effects` 目录下：
+`effects` 目录专门用于存放与轻微耦合相关的代码和逻辑。如果你的包具有以下特点，建议将其放置在 `effects` 目录下：
 
 - **状态管理**：使用状态管理框架 `pinia`，并包含处理副作用（如异步操作、API 调用）的部分。
 - **用户偏好设置**：使用 `@vben-core/preferences` 处理用户偏好设置，涉及本地存储或浏览器缓存逻辑（如使用 `localStorage`）。
diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
similarity index 93%
rename from packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
rename to packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
index 3e10cb6c..beb92740 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -23,7 +23,7 @@ interface Props {
    * 提示框位置
    * @default 'top'
    */
-  placement: 'bottom' | 'left' | 'right' | 'top';
+  placement?: 'bottom' | 'left' | 'right' | 'top';
   /**
    * 是否启用文本提示框
    * @default true
@@ -49,7 +49,7 @@ interface Props {
    * 提示框内容区域样式
    * @default { textAlign: 'justify' }
    */
-  tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
+  tooltipOverlayStyle?: CSSProperties;
 }
 const props = withDefaults(defineProps<Props>(), {
   expand: false,
@@ -99,6 +99,14 @@ function onExpand() {
 
   emit('expandChange', !isExpanded);
 }
+
+function handleExpand() {
+  if (props.expand) {
+    onExpand();
+  } else {
+    return false;
+  }
+}
 </script>
 <template>
   <VbenTooltip
@@ -110,7 +118,6 @@ function onExpand() {
       backgroundColor: tooltipBackgroundColor,
     }"
     :disabled="!showTooltip"
-    :overlay-style="tooltipOverlayStyle"
     :side="placement"
   >
     <slot name="tooltip">
@@ -127,7 +134,7 @@ function onExpand() {
         }"
         :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
         class="cursor-text overflow-hidden"
-        @click="expand ? onExpand() : () => false"
+        @click="handleExpand"
         v-bind="$attrs"
       >
         <slot></slot>
diff --git a/packages/effects/common-ui/src/ellipsis-text/index.ts b/packages/effects/common-ui/src/components/ellipsis-text/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/ellipsis-text/index.ts
rename to packages/effects/common-ui/src/components/ellipsis-text/index.ts
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
new file mode 100644
index 00000000..5df91077
--- /dev/null
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './ellipsis-text';
+export * from './page';
diff --git a/packages/effects/common-ui/src/page/index.ts b/packages/effects/common-ui/src/components/page/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/page/index.ts
rename to packages/effects/common-ui/src/components/page/index.ts
diff --git a/packages/effects/common-ui/src/page/page-footer.vue b/packages/effects/common-ui/src/components/page/page-footer.vue
similarity index 100%
rename from packages/effects/common-ui/src/page/page-footer.vue
rename to packages/effects/common-ui/src/components/page/page-footer.vue
diff --git a/packages/effects/common-ui/src/page/page-header.vue b/packages/effects/common-ui/src/components/page/page-header.vue
similarity index 71%
rename from packages/effects/common-ui/src/page/page-header.vue
rename to packages/effects/common-ui/src/components/page/page-header.vue
index 4249017f..7ee8d180 100644
--- a/packages/effects/common-ui/src/page/page-header.vue
+++ b/packages/effects/common-ui/src/components/page/page-header.vue
@@ -10,11 +10,9 @@ const props = defineProps<PageHeaderProps>();
 
 <template>
   <div class="bg-card px-6 py-4">
-    <div class="flex justify-between text-lg font-bold">
+    <div class="mb-2 flex justify-between text-xl font-bold leading-10">
       {{ props.title }}
     </div>
-    <div class="pt-3">
-      <slot></slot>
-    </div>
+    <slot></slot>
   </div>
 </template>
diff --git a/packages/effects/common-ui/src/page/page.ts b/packages/effects/common-ui/src/components/page/page.ts
similarity index 75%
rename from packages/effects/common-ui/src/page/page.ts
rename to packages/effects/common-ui/src/components/page/page.ts
index 3d504b42..e0bd76b9 100644
--- a/packages/effects/common-ui/src/page/page.ts
+++ b/packages/effects/common-ui/src/components/page/page.ts
@@ -1,11 +1,11 @@
 interface PageHeaderProps {
   title?: string;
+  description?: string;
 }
 
 interface Props extends PageHeaderProps {
-  headerSticky?: boolean;
+  contentClass?: string;
   showFooter?: boolean;
-  showHeader?: boolean;
 }
 
 export type { PageHeaderProps, Props };
diff --git a/packages/effects/common-ui/src/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
similarity index 63%
rename from packages/effects/common-ui/src/page/page.vue
rename to packages/effects/common-ui/src/components/page/page.vue
index 41fbdd74..b1bf8ae8 100644
--- a/packages/effects/common-ui/src/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Props } from './page.ts';
+import type { Props } from './page';
 
 import PageFooter from './page-footer.vue';
 import PageHeader from './page-header.vue';
@@ -9,20 +9,24 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  description: '',
   showFooter: false,
-  showHeader: true,
   title: '',
 });
 </script>
 
 <template>
   <div class="relative h-full">
-    <PageHeader v-if="props.showHeader" :title="props.title">
+    <PageHeader
+      v-if="description || $slots.description || title"
+      :title="props.title"
+    >
       <template #default>
-        <slot name="header"></slot>
+        <template v-if="description">{{ description }}</template>
+        <slot v-else name="description"></slot>
       </template>
     </PageHeader>
-    <div class="m-4 overflow-hidden">
+    <div :class="contentClass" class="m-4">
       <slot></slot>
     </div>
     <PageFooter v-if="props.showFooter">
diff --git a/packages/effects/common-ui/src/index.ts b/packages/effects/common-ui/src/index.ts
index 1c352371..050c0829 100644
--- a/packages/effects/common-ui/src/index.ts
+++ b/packages/effects/common-ui/src/index.ts
@@ -1,7 +1,3 @@
-export * from './about';
-export * from './authentication';
-export * from './dashboard';
-export * from './ellipsis-text';
-export * from './fallback';
-export * from './page';
+export * from './components';
+export * from './ui';
 export { useToast } from '@vben-core/shadcn-ui';
diff --git a/packages/effects/common-ui/src/about/about.ts b/packages/effects/common-ui/src/ui/about/about.ts
similarity index 100%
rename from packages/effects/common-ui/src/about/about.ts
rename to packages/effects/common-ui/src/ui/about/about.ts
diff --git a/packages/effects/common-ui/src/about/about.vue b/packages/effects/common-ui/src/ui/about/about.vue
similarity index 93%
rename from packages/effects/common-ui/src/about/about.vue
rename to packages/effects/common-ui/src/ui/about/about.vue
index 2a1709b5..b2ad0667 100644
--- a/packages/effects/common-ui/src/about/about.vue
+++ b/packages/effects/common-ui/src/ui/about/about.vue
@@ -10,6 +10,8 @@ import {
 } from '@vben/constants';
 import { VbenLink, VbenRenderContent } from '@vben-core/shadcn-ui';
 
+import { Page } from '../../components';
+
 interface Props extends AboutProps {}
 
 defineOptions({
@@ -119,18 +121,18 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
 </script>
 
 <template>
-  <div class="m-5">
+  <Page :title="title">
+    <template #description>
+      <p class="text-foreground mt-3 text-sm leading-6">
+        <VbenLink :href="VBEN_GITHUB_URL">
+          {{ name }}
+        </VbenLink>
+        {{ description }}
+      </p>
+    </template>
     <div class="card-box p-5">
       <div>
-        <h3 class="text-foreground text-2xl font-semibold leading-7">
-          {{ title }}
-        </h3>
-        <p class="text-foreground mt-3 text-sm leading-6">
-          <VbenLink :href="VBEN_GITHUB_URL">
-            {{ name }}
-          </VbenLink>
-          {{ description }}
-        </p>
+        <h5 class="text-foreground text-lg">基本信息</h5>
       </div>
       <div class="mt-4">
         <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
@@ -186,5 +188,5 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
         </dl>
       </div>
     </div>
-  </div>
+  </Page>
 </template>
diff --git a/packages/effects/common-ui/src/about/index.ts b/packages/effects/common-ui/src/ui/about/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/about/index.ts
rename to packages/effects/common-ui/src/ui/about/index.ts
diff --git a/packages/effects/common-ui/src/authentication/auth-title.vue b/packages/effects/common-ui/src/ui/authentication/auth-title.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/auth-title.vue
rename to packages/effects/common-ui/src/ui/authentication/auth-title.vue
diff --git a/packages/effects/common-ui/src/authentication/code-login.vue b/packages/effects/common-ui/src/ui/authentication/code-login.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/code-login.vue
rename to packages/effects/common-ui/src/ui/authentication/code-login.vue
diff --git a/packages/effects/common-ui/src/authentication/forget-password.vue b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/forget-password.vue
rename to packages/effects/common-ui/src/ui/authentication/forget-password.vue
diff --git a/packages/effects/common-ui/src/authentication/index.ts b/packages/effects/common-ui/src/ui/authentication/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/authentication/index.ts
rename to packages/effects/common-ui/src/ui/authentication/index.ts
diff --git a/packages/effects/common-ui/src/authentication/login-expired-modal.vue b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/login-expired-modal.vue
rename to packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
diff --git a/packages/effects/common-ui/src/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/login.vue
rename to packages/effects/common-ui/src/ui/authentication/login.vue
diff --git a/packages/effects/common-ui/src/authentication/qrcode-login.vue b/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/qrcode-login.vue
rename to packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
diff --git a/packages/effects/common-ui/src/authentication/register.vue b/packages/effects/common-ui/src/ui/authentication/register.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/register.vue
rename to packages/effects/common-ui/src/ui/authentication/register.vue
diff --git a/packages/effects/common-ui/src/authentication/third-party-login.vue b/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/third-party-login.vue
rename to packages/effects/common-ui/src/ui/authentication/third-party-login.vue
diff --git a/packages/effects/common-ui/src/authentication/typings.ts b/packages/effects/common-ui/src/ui/authentication/typings.ts
similarity index 100%
rename from packages/effects/common-ui/src/authentication/typings.ts
rename to packages/effects/common-ui/src/ui/authentication/typings.ts
diff --git a/packages/effects/common-ui/src/dashboard/analysis/analysis-chart-card.vue b/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/analysis-chart-card.vue
rename to packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
diff --git a/packages/effects/common-ui/src/dashboard/analysis/analysis-charts-tabs.vue b/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/analysis-charts-tabs.vue
rename to packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
diff --git a/packages/effects/common-ui/src/dashboard/analysis/analysis-overview.vue b/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/analysis-overview.vue
rename to packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
diff --git a/packages/effects/common-ui/src/dashboard/analysis/index.ts b/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/index.ts
rename to packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
diff --git a/packages/effects/common-ui/src/dashboard/index.ts b/packages/effects/common-ui/src/ui/dashboard/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/index.ts
rename to packages/effects/common-ui/src/ui/dashboard/index.ts
diff --git a/packages/effects/common-ui/src/dashboard/typing.ts b/packages/effects/common-ui/src/ui/dashboard/typing.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/typing.ts
rename to packages/effects/common-ui/src/ui/dashboard/typing.ts
diff --git a/packages/effects/common-ui/src/dashboard/workbench/index.ts b/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/index.ts
rename to packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-header.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-header.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-project.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-project.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-quick-nav.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-quick-nav.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-todo.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-todo.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-trends.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-trends.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
diff --git a/packages/effects/common-ui/src/fallback/fallback.ts b/packages/effects/common-ui/src/ui/fallback/fallback.ts
similarity index 100%
rename from packages/effects/common-ui/src/fallback/fallback.ts
rename to packages/effects/common-ui/src/ui/fallback/fallback.ts
diff --git a/packages/effects/common-ui/src/fallback/fallback.vue b/packages/effects/common-ui/src/ui/fallback/fallback.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/fallback.vue
rename to packages/effects/common-ui/src/ui/fallback/fallback.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-403.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-403.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-403.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-403.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-404.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-404.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-404.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-404.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-500.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-500.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-500.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-500.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-coming-soon.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-coming-soon.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-coming-soon.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-coming-soon.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-offline.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-offline.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-offline.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-offline.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/warning.svg b/packages/effects/common-ui/src/ui/fallback/icons/warning.svg
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/warning.svg
rename to packages/effects/common-ui/src/ui/fallback/icons/warning.svg
diff --git a/packages/effects/common-ui/src/fallback/index.ts b/packages/effects/common-ui/src/ui/fallback/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/fallback/index.ts
rename to packages/effects/common-ui/src/ui/fallback/index.ts
diff --git a/packages/effects/common-ui/src/ui/index.ts b/packages/effects/common-ui/src/ui/index.ts
new file mode 100644
index 00000000..fb99fdec
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/index.ts
@@ -0,0 +1,4 @@
+export * from './about';
+export * from './authentication';
+export * from './dashboard';
+export * from './fallback';
diff --git a/playground/src/views/demos/access/admin-visible.vue b/playground/src/views/demos/access/admin-visible.vue
index 079b9309..f63b2d9d 100644
--- a/playground/src/views/demos/access/admin-visible.vue
+++ b/playground/src/views/demos/access/admin-visible.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 </script>
 
 <template>
-  <Fallback
-    description="当前页面仅 Admin 账号可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
+  <Page description="当前页面仅 Admin 账号可见" title="页面访问测试" />
 </template>
diff --git a/playground/src/views/demos/access/button-control.vue b/playground/src/views/demos/access/button-control.vue
index 51a1b78c..2c5cc524 100644
--- a/playground/src/views/demos/access/button-control.vue
+++ b/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>
diff --git a/playground/src/views/demos/access/index.vue b/playground/src/views/demos/access/index.vue
index 7955d335..cb87fe97 100644
--- a/playground/src/views/demos/access/index.vue
+++ b/playground/src/views/demos/access/index.vue
@@ -4,9 +4,10 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
 import { useRouter } from 'vue-router';
 
 import { 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';
 
@@ -64,33 +65,20 @@ async function handleToggleAccessMode() {
 </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">
-      <span class="text-lg font-semibold">当前权限模式:</span>
+  <Page
+    :title="`${accessMode === 'frontend' ? '前端' : '后端'}页面访问权限演示`"
+    description="切换不同的账号，观察左侧菜单变化。"
+  >
+    <Card class="mb-5" title="权限模式">
+      <span class="font-semibold">当前权限模式:</span>
       <span class="text-primary mx-4">{{
         accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
       }}</span>
       <Button type="primary" @click="handleToggleAccessMode">
         切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
       </Button>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">当前账号:</span>
-        <span class="text-primary mx-4 text-lg">
-          {{ userStore.userRoles?.[0] }}
-        </span>
-      </div>
-
+    </Card>
+    <Card title="账号切换">
       <Button :type="roleButtonType('super')" @click="changeAccount('super')">
         切换为 Super 账号
       </Button>
@@ -105,6 +93,6 @@ async function handleToggleAccessMode() {
       <Button :type="roleButtonType('user')" @click="changeAccount('user')">
         切换为 User 账号
       </Button>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>
diff --git a/playground/src/views/demos/access/super-visible.vue b/playground/src/views/demos/access/super-visible.vue
index 877fcd11..ce89116b 100644
--- a/playground/src/views/demos/access/super-visible.vue
+++ b/playground/src/views/demos/access/super-visible.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 </script>
 
 <template>
-  <Fallback
-    description="当前页面仅 Super 账号可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
+  <Page description="当前页面仅 Super 账号可见" title="页面访问测试" />
 </template>
diff --git a/playground/src/views/demos/access/user-visible.vue b/playground/src/views/demos/access/user-visible.vue
index f69255ca..7523cc5c 100644
--- a/playground/src/views/demos/access/user-visible.vue
+++ b/playground/src/views/demos/access/user-visible.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 </script>
 
 <template>
-  <Fallback
-    description="当前页面仅 User 可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
+  <Page description="当前页面仅 User 账号可见" title="页面访问测试" />
 </template>
diff --git a/playground/src/views/demos/features/icons/index.vue b/playground/src/views/demos/features/icons/index.vue
index 065409ba..0e5c28b2 100644
--- a/playground/src/views/demos/features/icons/index.vue
+++ b/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>
diff --git a/playground/src/views/demos/features/login-expired/index.vue b/playground/src/views/demos/features/login-expired/index.vue
index f6c72303..28191693 100644
--- a/playground/src/views/demos/features/login-expired/index.vue
+++ b/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>
diff --git a/playground/src/views/demos/features/tabs/index.vue b/playground/src/views/demos/features/tabs/index.vue
index 9415b668..e1315653 100644
--- a/playground/src/views/demos/features/tabs/index.vue
+++ b/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>
diff --git a/playground/src/views/demos/features/tabs/tab-detail.vue b/playground/src/views/demos/features/tabs/tab-detail.vue
index c21080c0..c03b61c8 100644
--- a/playground/src/views/demos/features/tabs/tab-detail.vue
+++ b/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>
diff --git a/playground/src/views/demos/features/watermark/index.vue b/playground/src/views/demos/features/watermark/index.vue
index 493ab86a..9f819e51 100644
--- a/playground/src/views/demos/features/watermark/index.vue
+++ b/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>
diff --git a/playground/src/views/examples/ellipsis/data.ts b/playground/src/views/examples/ellipsis/data.ts
deleted file mode 100644
index 796d95a7..00000000
--- a/playground/src/views/examples/ellipsis/data.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const longText: string =
-  'Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。';
diff --git a/playground/src/views/examples/ellipsis/index.vue b/playground/src/views/examples/ellipsis/index.vue
index 6c501bad..4f3b67ed 100644
--- a/playground/src/views/examples/ellipsis/index.vue
+++ b/playground/src/views/examples/ellipsis/index.vue
@@ -1,42 +1,41 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import { EllipsisText } from '@vben/common-ui';
+import { EllipsisText, Page } from '@vben/common-ui';
 
-import { Collapse, CollapsePanel } from 'ant-design-vue';
+import { Card } from 'ant-design-vue';
 
-import { longText } from './data';
+const longText = `Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
 
 const text = ref(longText);
-const activeKey = ref(['1', '2', '3', '4']);
 </script>
 
 <template>
-  <div class="card-box p-5">
-    <h1 class="mb-5 text-xl font-semibold">文本省略示例</h1>
-    <div>
-      <Collapse v-model:activeKey="activeKey">
-        <CollapsePanel key="1" header="Ellipsis 基本使用">
-          <EllipsisText :max-width="240">{{ text }}</EllipsisText>
-        </CollapsePanel>
-        <CollapsePanel key="2" header="Ellipsis 多行省略">
-          <EllipsisText :line="2">{{ text }}</EllipsisText>
-        </CollapsePanel>
-        <CollapsePanel key="3" header="Ellipsis 点击展开">
-          <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
-        </CollapsePanel>
-        <CollapsePanel key="4" header="Ellipsis 定制 Tooltip 内容">
-          <EllipsisText :max-width="240">
-            住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
-            <template #tooltip>
-              <div style="text-align: center">
-                《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
-                深海的光 停滞的海浪
-              </div>
-            </template>
-          </EllipsisText>
-        </CollapsePanel>
-      </Collapse>
-    </div>
-  </div>
+  <Page
+    description="用于多行文本省略，支持点击展开和自定义内容。"
+    title="文本省略示例"
+  >
+    <Card class="mb-4" title="基本使用">
+      <EllipsisText :max-width="240">{{ text }}</EllipsisText>
+    </Card>
+
+    <Card class="mb-4" title="多行省略">
+      <EllipsisText :line="2">{{ text }}</EllipsisText>
+    </Card>
+
+    <Card class="mb-4" title="点击展开">
+      <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
+    </Card>
+    <Card class="mb-4" title="自定义内容">
+      <EllipsisText :max-width="240">
+        住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+        <template #tooltip>
+          <div style="text-align: center">
+            《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
+            深海的光 停滞的海浪
+          </div>
+        </template>
+      </EllipsisText>
+    </Card>
+  </Page>
 </template>