feat: support vue file unit testing, add some components unit testing (#4119)

packages/effects/common-ui/src/components/page/page.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import type { Props } from './page';
-
-import PageFooter from './page-footer.vue';
-import PageHeader from './page-header.vue';
+interface Props {
+  title?: string;
+  description?: string;
+  contentClass?: string;
+  showFooter?: boolean;
+}
 
 defineOptions({
   name: 'Page',
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  contentClass: '',
   description: '',
   showFooter: false,
   title: '',
@@ -17,22 +20,26 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="relative h-full">
-    <PageHeader
+    <div
       v-if="description || $slots.description || title"
-      :title="props.title"
+      class="bg-card px-6 py-4"
     >
-      <template #default>
-        <template v-if="description">{{ description }}</template>
-        <slot v-else name="description"></slot>
-      </template>
-    </PageHeader>
+      <div class="mb-2 flex justify-between text-xl font-bold leading-10">
+        {{ title }}
+      </div>
+      <template v-if="description">{{ description }}</template>
+      <slot v-else name="description"></slot>
+    </div>
+
     <div :class="contentClass" class="m-4">
       <slot></slot>
     </div>
-    <PageFooter v-if="props.showFooter">
-      <template #default>
-        <slot name="footer"></slot>
-      </template>
-    </PageFooter>
+
+    <div
+      v-if="props.showFooter"
+      class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+    >
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>