perf: optimize the diffPreferences logic and adjust the unit test (#4130)

packages/effects/common-ui/src/components/page/__tests__/page.test.ts

@@ -58,6 +58,20 @@ describe('page.vue', () => {
     expect(contentDiv.classes()).toContain('custom-class');
   });
 
+  it('does not render title slot if title prop is provided', () => {
+    const wrapper = mount(Page, {
+      props: {
+        title: 'Test Title',
+      },
+      slots: {
+        title: '<p>Title Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Title Slot Content');
+    expect(wrapper.html()).not.toContain('Test Title');
+  });
+
   it('does not render description slot if description prop is provided', () => {
     const wrapper = mount(Page, {
       props: {
@@ -68,7 +82,7 @@ describe('page.vue', () => {
       },
     });
 
-    expect(wrapper.text()).toContain('Test Description');
-    expect(wrapper.html()).not.toContain('Description Slot Content');
+    expect(wrapper.text()).toContain('Description Slot Content');
+    expect(wrapper.html()).not.toContain('Test Description');
   });
 });

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

@@ -24,11 +24,20 @@ const props = withDefaults(defineProps<Props>(), {
       v-if="description || $slots.description || title"
       class="bg-card px-6 py-4"
     >
-      <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>
+      <slot name="title">
+        <div
+          v-if="title"
+          class="mb-2 flex justify-between text-lg font-semibold"
+        >
+          {{ title }}
+        </div>
+      </slot>
+
+      <slot name="description">
+        <p v-if="description" class="text-muted-foreground">
+          {{ description }}
+        </p>
+      </slot>
     </div>
 
     <div :class="contentClass" class="m-4">