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

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>
-    </div>
+    <slot></slot>
   </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 './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';

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>

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

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