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

.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

.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
 }

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">
+  <Page
-    <div class="card-box p-5">
+    description="支持多语言，主题功能集成切换等"
-      <h1 class="text-xl font-semibold">Ant Design Vue组件使用演示</h1>
+    title="Ant Design Vue组件使用演示"
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
+  >
-    </div>
+    <Card title="按钮">
-
+      <Space>
-    <div class="card-box mt-5 p-5">
+        <Button>Default</Button>
-      <div class="mb-3">
+        <Button type="primary"> Primary </Button>
-        <span class="text-lg font-semibold">按钮</span>
+        <Button> Info </Button>
-      </div>
+        <Button danger> Error </Button>
-      <div>
+      </Space>
-        <Space>
+    </Card>
-          <Button>Default</Button>
+    <Card class="mb-5" title="Message">
-          <Button type="primary"> Primary </Button>
+      <Space>
-          <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">
         <Button @click="info"> 信息 </Button>
         <Button danger @click="error"> 错误 </Button>
         <Button @click="warning"> 警告 </Button>
         <Button @click="success"> 成功 </Button>
-      </div>
+      </Space>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
+    <Card class="mb-5" title="Notification">
-      <div class="mb-3">
+      <Space>
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
         <Button @click="notify('info')"> 信息 </Button>
         <Button danger @click="notify('error')"> 错误 </Button>
         <Button @click="notify('warning')"> 警告 </Button>
         <Button @click="notify('success')"> 成功 </Button>
-      </div>
+      </Space>
-    </div>
+    </Card>
-  </div>
+  </Page>
 </template>

apps/web-ele/src/views/demos/element/index.vue

@@ -41,54 +41,38 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <Page title="Element Plus组件使用演示">
+  <Page
-    <template #header> 支持多语言，主题功能集成切换等 </template>
+    description="支持多语言，主题功能集成切换等"
-    <div class="card-box p-5">
+    title="Element Plus组件使用演示"
-      <div class="mb-3">
+  >
-        <span class="text-lg font-semibold">按钮</span>
+    <ElCard class="mb-5">
-      </div>
+      <template #header> 按钮 </template>
-      <div>
+      <ElSpace>
-        <ElSpace>
+        <ElButton>Default</ElButton>
-          <ElButton>Default</ElButton>
+        <ElButton type="primary"> Primary </ElButton>
-          <ElButton type="primary"> Primary </ElButton>
+        <ElButton type="info"> Info </ElButton>
-          <ElButton type="info"> Info </ElButton>
+        <ElButton type="success"> Success </ElButton>
-          <ElButton type="success"> Success </ElButton>
+        <ElButton type="warning"> Warning </ElButton>
-          <ElButton type="warning"> Warning </ElButton>
+        <ElButton type="danger"> Error </ElButton>
-          <ElButton type="danger"> Error </ElButton>
+      </ElSpace>
-        </ElSpace>
+    </ElCard>
-      </div>
+    <ElCard class="mb-5">
-    </div>
+      <template #header> Message </template>
-
+      <ElSpace>
-    <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">
         <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>
+      </ElSpace>
-    </div>
+    </ElCard>
-
+    <ElCard class="mb-5">
-    <div class="card-box mt-5 p-5">
+      <template #header> Notification </template>
-      <div class="mb-3">
+      <ElSpace>
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
         <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>
+      </ElSpace>
-    </div>
+    </ElCard>
   </Page>
 </template>

apps/web-naive/src/views/demos/naive/index.vue

@@ -34,55 +34,35 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <Page title="naive组件使用演示">
+  <Page description="支持多语言，主题功能集成切换等" title="naive组件使用演示">
-    <template #header> 支持多语言，主题功能集成切换等 </template>
+    <NCard class="mb-5" title="按钮">
-    <div class="card-box p-5">
+      <NSpace>
-      <div class="mb-3">
+        <NButton>Default</NButton>
-        <span class="text-lg font-semibold">按钮</span>
+        <NButton type="tertiary"> Tertiary </NButton>
-      </div>
+        <NButton type="primary"> Primary </NButton>
-      <div>
+        <NButton type="info"> Info </NButton>
-        <NSpace>
+        <NButton type="success"> Success </NButton>
-          <NButton>Default</NButton>
+        <NButton type="warning"> Warning </NButton>
-          <NButton type="tertiary"> Tertiary </NButton>
+        <NButton type="error"> Error </NButton>
-          <NButton type="primary"> Primary </NButton>
+      </NSpace>
-          <NButton type="info"> Info </NButton>
+    </NCard>
-          <NButton type="success"> Success </NButton>
-          <NButton type="warning"> Warning </NButton>
-          <NButton type="error"> Error </NButton>
-        </NSpace>
-      </div>
-    </div>
 
-    <div class="card-box mt-5 p-5">
+    <NCard class="mb-5" title="Message">
-      <div class="mb-3">
+      <NSpace>
-        <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">
         <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>
+      </NSpace>
-    </div>
+    </NCard>
 
-    <div class="card-box mt-5 p-5">
+    <NCard class="mb-5" title="Notification">
-      <div class="mb-3">
+      <NSpace>
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
         <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>
+      </NSpace>
-    </div>
+    </NCard>
   </Page>
 </template>

apps/web-naive/src/views/demos/table/index.vue

@@ -27,10 +27,10 @@ const data = [
 </script>
 
 <template>
-  <Page title="NDataTable">
+  <Page
-    <template #header>
+    description="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
-      表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
+    title="NDataTable"
-    </template>
+  >
     <NDataTable :columns="columns" :data="data" />
   </Page>
 </template>

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({

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'];

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;

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'];
+    class?: any;
-    contentClass?: HTMLAttributes['class'];
+    contentClass?: any;
     contentProps?: ContextMenuContentProps;
     handlerData?: Record<string, any>;
-    itemClass?: HTMLAttributes['class'];
+    itemClass?: any;
     menus: (data: any) => IContextMenuItem[];
   } & ContextMenuRootProps
 >();

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<
+interface Props extends HoverCardRootProps {
-  {
+  class?: any;
-    class?: HTMLAttributes['class'];
+  contentClass?: any;
-    contentClass?: HTMLAttributes['class'];
+  contentProps?: HoverCardContentProps;
-    contentProps?: HoverCardContentProps;
+}
-  } & HoverCardRootProps
+
->();
+const props = defineProps<Props>();
 
 const emits = defineEmits<HoverCardRootEmits>();
 

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;
   /**
    * 错误提示信息
    */

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;
 }
 

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;
   /**
    * 验证码长度
    */

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(
+interface Props extends PopoverRootProps {
-  defineProps<
+  class?: any;
-    {
+  contentClass?: any;
-      class?: HTMLAttributes['class'];
+  contentProps?: PopoverContentProps;
-      contentClass?: HTMLAttributes['class'];
+}
-      contentProps?: PopoverContentProps;
+
-    } & PopoverRootProps
+const props = withDefaults(defineProps<Props>(), {});
-  >(),
-  {},
-);
 
 const emits = defineEmits<PopoverRootEmits>();
 

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;
 }

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<
+const props = defineProps<{ class?: any } & TabsIndicatorProps>();
-  { class?: HTMLAttributes['class'] } & TabsIndicatorProps
->();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

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'];
+  contentClass?: any;
-  contentStyle?: HTMLAttributes['style'];
+  contentStyle?: StyleValue;
   delayDuration?: number;
   side: TooltipContentProps['side'];
 }

packages/effects/README.md

@@ -1,6 +1,6 @@
 ## Effects 目录
 
-`effects` 目录专门用于存放与副作用相关的代码和逻辑。如果你的包具有以下特点，建议将其放置在 `effects` 目录下：
+`effects` 目录专门用于存放与轻微耦合相关的代码和逻辑。如果你的包具有以下特点，建议将其放置在 `effects` 目录下：
 
 - **状态管理**：使用状态管理框架 `pinia`，并包含处理副作用（如异步操作、API 调用）的部分。
 - **用户偏好设置**：使用 `@vben-core/preferences` 处理用户偏好设置，涉及本地存储或浏览器缓存逻辑（如使用 `localStorage`）。

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>

packages/effects/common-ui/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ellipsis-text';
+export * from './page';

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>
-      <slot></slot>
-    </div>
   </div>
 </template>

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 };

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">

packages/effects/common-ui/src/index.ts

@@ -1,7 +1,3 @@
-export * from './about';
+export * from './components';
-export * from './authentication';
+export * from './ui';
-export * from './dashboard';
-export * from './ellipsis-text';
-export * from './fallback';
-export * from './page';
 export { useToast } from '@vben-core/shadcn-ui';

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">
+        <h5 class="text-foreground text-lg">基本信息</h5>
-          {{ title }}
-        </h3>
-        <p class="text-foreground mt-3 text-sm leading-6">
-          <VbenLink :href="VBEN_GITHUB_URL">
-            {{ name }}
-          </VbenLink>
-          {{ description }}
-        </p>
       </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>

packages/effects/common-ui/src/ui/index.ts

@@ -0,0 +1,4 @@
+export * from './about';
+export * from './authentication';
+export * from './dashboard';
+export * from './fallback';

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
+  <Page description="当前页面仅 Admin 账号可见" title="页面访问测试" />
-    description="当前页面仅 Admin 账号可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
 </template>

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">
+  <Page
-    <div class="card-box p-5">
+    :title="`${accessMode === 'frontend' ? '前端' : '后端'}按钮访问权限演示`"
-      <h1 class="text-xl font-semibold">
+    description="切换不同的账号，观察按钮变化。"
-        {{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
+  >
-      </h1>
+    <Card class="mb-5">
-      <div class="text-foreground/80 mt-2">切换不同的账号，观察按钮变化。</div>
+      <template #title>
-    </div>
+        <span class="font-semibold">当前角色:</span>
-
-    <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>
+      </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">
+    <Card class="mb-5" title="组件形式控制 - 权限码">
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 权限码方式</div>
       <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">
+    <Card
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
+      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">
+    <Card class="mb-5" title="函数形式控制">
-      <div class="mb-3 text-lg font-semibold">函数形式控制</div>
       <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">
+    <Card class="mb-5" title="指令方式 - 权限码">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 权限码</div>
       <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">
+    <Card class="mb-5" title="指令方式 - 角色">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 角色</div>
       <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>
+    </Card>
-  </div>
+  </Page>
 </template>

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">
+  <Page
-    <div class="card-box p-5">
+    :title="`${accessMode === 'frontend' ? '前端' : '后端'}页面访问权限演示`"
-      <h1 class="text-xl font-semibold">
+    description="切换不同的账号，观察左侧菜单变化。"
-        {{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
+  >
-      </h1>
+    <Card class="mb-5" title="权限模式">
-      <div class="text-foreground/80 mt-2">
+      <span class="font-semibold">当前权限模式:</span>
-        切换不同的账号，观察左侧菜单变化。
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <span class="text-lg font-semibold">当前权限模式:</span>
       <span class="text-primary mx-4">{{
         accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
       }}</span>
       <Button type="primary" @click="handleToggleAccessMode">
         切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
       </Button>
-    </div>
+    </Card>
-    <div class="card-box mt-5 p-5">
+    <Card title="账号切换">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">当前账号:</span>
-        <span class="text-primary mx-4 text-lg">
-          {{ userStore.userRoles?.[0] }}
-        </span>
-      </div>
-
       <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>
+    </Card>
-  </div>
+  </Page>
 </template>

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
+  <Page description="当前页面仅 Super 账号可见" title="页面访问测试" />
-    description="当前页面仅 Super 账号可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
 </template>

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
+  <Page description="当前页面仅 User 账号可见" title="页面访问测试" />
-    description="当前页面仅 User 可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
 </template>

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">
+  <Page title="图标">
-    <div class="card-box p-5">
+    <template #description>
-      <h1 class="text-xl font-semibold">图标</h1>
       <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">
+    <Card class="mb-5" title="Iconify">
-      <div class="mb-3 text-lg font-semibold">Iconify</div>
       <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">
+    <Card title="Svg Icons">
-      <div class="mb-3 text-lg font-semibold">Svg Icons</div>
       <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>
+    </Card>
-  </div>
+  </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">
+  <Page title="登录过期演示">
-    <div class="card-box p-5">
+    <template #description>
-      <h1 class="text-xl font-semibold">登录过期演示</h1>
       <div class="text-foreground/80 mt-2">
         接口请求遇到401状态码时，需要重新登录。有两种方式：
-        <div>1.转到登录页，登录成功后跳转回原页面</div>
+        <p>1.转到登录页，登录成功后跳转回原页面</p>
-        <div>
+        <p>
           2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
-        </div>
+        </p>
       </div>
-    </div>
+    </template>
 
-    <div class="card-box mt-5 p-5">
+    <Card class="mb-5" title="跳转登录页面方式">
-      <div class="mb-3 text-lg font-semibold">跳转登录页面方式</div>
       <Button type="primary" @click="handleClick('page')"> 点击触发 </Button>
-    </div>
+    </Card>
-
+    <Card class="mb-5" title="登录弹窗方式">
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">登录弹窗方式</div>
       <Button type="primary" @click="handleClick('modal')"> 点击触发 </Button>
-    </div>
+    </Card>
-  </div>
+  </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">
+  <Page description="用于需要操作标签页的场景" title="标签页">
-    <div class="card-box p-5">
+    <Card class="mb-5" title="打开/关闭标签页">
-      <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>
       <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">
+    <Card class="mb-5" title="标签页操作">
-      <div class="text-lg font-semibold">标签页操作</div>
       <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>
+    </Card>
-  </div>
+  </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">
+  <Page :title="`标签页${index}详情页`">
-    <div class="card-box p-5">
+    <template #description> {{ index }} - 详情页内容在此 </template>
-      <h1 class="text-xl font-semibold">标签详情页</h1>
+  </Page>
-      <div class="text-foreground/80 mt-2">
-        <div>{{ index }} - 详情页内容在此</div>
-      </div>
-    </div>
-  </div>
 </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">
+  <Page title="水印">
-    <div class="card-box p-5">
+    <template #description>
-      <h1 class="text-xl font-semibold">水印</h1>
       <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">
+    <Card title="使用">
-      <div class="mb-3 flex gap-3 text-lg font-semibold">
+      <Button class="mr-2" type="primary" @click="createWaterMark()">
-        <Button type="primary" @click="createWaterMark()">创建水印</Button>
+        创建水印
-        <Button danger @click="destroyWatermark">移除水印</Button>
+      </Button>
-      </div>
+      <Button danger @click="destroyWatermark">移除水印</Button>
-    </div>
+    </Card>
-  </div>
+  </Page>
 </template>

playground/src/views/examples/ellipsis/data.ts

@@ -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 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。';

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">
+  <Page
-    <h1 class="mb-5 text-xl font-semibold">文本省略示例</h1>
+    description="用于多行文本省略，支持点击展开和自定义内容。"
-    <div>
+    title="文本省略示例"
-      <Collapse v-model:activeKey="activeKey">
+  >
-        <CollapsePanel key="1" header="Ellipsis 基本使用">
+    <Card class="mb-4" title="基本使用">
-          <EllipsisText :max-width="240">{{ text }}</EllipsisText>
+      <EllipsisText :max-width="240">{{ text }}</EllipsisText>
-        </CollapsePanel>
+    </Card>
-        <CollapsePanel key="2" header="Ellipsis 多行省略">
+
-          <EllipsisText :line="2">{{ text }}</EllipsisText>
+    <Card class="mb-4" title="多行省略">
-        </CollapsePanel>
+      <EllipsisText :line="2">{{ text }}</EllipsisText>
-        <CollapsePanel key="3" header="Ellipsis 点击展开">
+    </Card>
-          <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
+
-        </CollapsePanel>
+    <Card class="mb-4" title="点击展开">
-        <CollapsePanel key="4" header="Ellipsis 定制 Tooltip 内容">
+      <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
-          <EllipsisText :max-width="240">
+    </Card>
-            住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+    <Card class="mb-4" title="自定义内容">
-            <template #tooltip>
+      <EllipsisText :max-width="240">
-              <div style="text-align: center">
+        住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
-                《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
+        <template #tooltip>
-                深海的光 停滞的海浪
+          <div style="text-align: center">
-              </div>
+            《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
-            </template>
+            深海的光 停滞的海浪
-          </EllipsisText>
+          </div>
-        </CollapsePanel>
+        </template>
-      </Collapse>
+      </EllipsisText>
-    </div>
+    </Card>
-  </div>
+  </Page>
 </template>