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

packages/@core/base/design/src/design-tokens/dark/index.css

@@ -19,8 +19,13 @@
   --popover-foreground: 210 40% 98%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 220deg 6.82% 17.25%;
-  --muted-foreground: 215 20.2% 65.1%;
+
+  /* --muted: 220deg 6.82% 17.25%; */
+
+  /* --muted-foreground: 215 20.2% 65.1%; */
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
 
   /* 主题颜色 */
 

packages/@core/base/design/src/design-tokens/default/index.css

@@ -19,8 +19,12 @@
   --popover-foreground: 222.2 84% 4.9%;
 
   /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
+
+  /* --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%; */
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
 
   /* 主题颜色 */
 

packages/@core/base/shared/src/utils/diff.test.ts

@@ -3,58 +3,51 @@ import { describe, expect, it } from 'vitest';
 import { diff } from './diff';
 
 describe('diff function', () => {
-  it('should correctly find differences in flat objects', () => {
-    const oldObj = { a: 1, b: 2, c: 3 };
-    const newObj = { a: 1, b: 3, c: 3 };
-    expect(diff(oldObj, newObj)).toEqual({ b: 3 });
+  it('should return an empty object when comparing identical objects', () => {
+    const obj1 = { a: 1, b: { c: 2 } };
+    const obj2 = { a: 1, b: { c: 2 } };
+    expect(diff(obj1, obj2)).toEqual(undefined);
   });
 
-  it('should correctly handle nested objects', () => {
-    const oldObj = { a: { b: 1, c: 2 }, d: 3 };
-    const newObj = { a: { b: 1, c: 3 }, d: 3 };
-    expect(diff(oldObj, newObj)).toEqual({ a: { b: 1, c: 3 } });
+  it('should detect simple changes in primitive values', () => {
+    const obj1 = { a: 1, b: 2 };
+    const obj2 = { a: 1, b: 3 };
+    expect(diff(obj1, obj2)).toEqual({ b: 3 });
   });
 
-  it('should correctly handle arrays`', () => {
-    const oldObj = { a: [1, 2, 3] };
-    const newObj = { a: [1, 2, 4] };
-    expect(diff(oldObj, newObj)).toEqual({ a: [1, 2, 4] });
+  it('should detect nested object changes', () => {
+    const obj1 = { a: 1, b: { c: 2, d: 4 } };
+    const obj2 = { a: 1, b: { c: 3, d: 4 } };
+    expect(diff(obj1, obj2)).toEqual({ b: { c: 3 } });
   });
 
-  it('should correctly handle nested arrays', () => {
-    const oldObj = {
-      a: [
-        [1, 2],
-        [3, 4],
-      ],
-    };
-    const newObj = {
-      a: [
-        [1, 2],
-        [3, 5],
-      ],
-    };
-    expect(diff(oldObj, newObj)).toEqual({
-      a: [
-        [1, 2],
-        [3, 5],
-      ],
-    });
+  it('should handle array changes', () => {
+    const obj1 = { a: [1, 2, 3], b: 2 };
+    const obj2 = { a: [1, 2, 4], b: 2 };
+    expect(diff(obj1, obj2)).toEqual({ a: [1, 2, 4] });
   });
 
-  it('should return null if objects are identical', () => {
-    const oldObj = { a: 1, b: 2, c: 3 };
-    const newObj = { a: 1, b: 2, c: 3 };
-    expect(diff(oldObj, newObj)).toBeNull();
+  it('should handle added keys', () => {
+    const obj1 = { a: 1 };
+    const obj2 = { a: 1, b: 2 };
+    expect(diff(obj1, obj2)).toEqual({ b: 2 });
   });
 
-  it('should return differences between two objects excluding ignored fields', () => {
-    const oldObj = { a: 1, b: 2, c: 3, d: 6 };
-    const newObj = { a: 2, b: 2, c: 4, d: 5 };
-    const ignoreFields: (keyof typeof newObj)[] = ['a', 'd'];
+  it('should handle removed keys', () => {
+    const obj1 = { a: 1, b: 2 };
+    const obj2 = { a: 1 };
+    expect(diff(obj1, obj2)).toEqual(undefined);
+  });
 
-    const result = diff(oldObj, newObj, ignoreFields);
+  it('should handle boolean value changes', () => {
+    const obj1 = { a: true, b: false };
+    const obj2 = { a: true, b: true };
+    expect(diff(obj1, obj2)).toEqual({ b: true });
+  });
 
-    expect(result).toEqual({ c: 4 });
+  it('should handle null and undefined values', () => {
+    const obj1 = { a: null, b: undefined };
+    const obj2: any = { a: 1, b: undefined };
+    expect(diff(obj1, obj2)).toEqual({ a: 1 });
   });
 });

packages/@core/base/shared/src/utils/diff.ts

@@ -1,4 +1,4 @@
-type Diff<T = any> = T;
+// type Diff<T = any> = T;
 
 // 比较两个数组是否相等
 
@@ -19,40 +19,78 @@ function arraysEqual<T>(a: T[], b: T[]): boolean {
 }
 
 // 深度对比两个值
-function deepEqual<T>(oldVal: T, newVal: T): boolean {
-  if (
-    typeof oldVal === 'object' &&
-    oldVal !== null &&
-    typeof newVal === 'object' &&
-    newVal !== null
-  ) {
-    return Array.isArray(oldVal) && Array.isArray(newVal)
-      ? arraysEqual(oldVal, newVal)
-      : diff(oldVal as any, newVal as any) === null;
-  } else {
-    return oldVal === newVal;
-  }
-}
+// function deepEqual<T>(oldVal: T, newVal: T): boolean {
+//   if (
+//     typeof oldVal === 'object' &&
+//     oldVal !== null &&
+//     typeof newVal === 'object' &&
+//     newVal !== null
+//   ) {
+//     return Array.isArray(oldVal) && Array.isArray(newVal)
+//       ? arraysEqual(oldVal, newVal)
+//       : diff(oldVal as any, newVal as any) === null;
+//   } else {
+//     return oldVal === newVal;
+//   }
+// }
 
-// 主要的 diff 函数
-function diff<T extends object>(
-  oldObj: T,
-  newObj: T,
-  ignoreFields: (keyof T)[] = [],
-): { [K in keyof T]?: Diff<T[K]> } | null {
-  const difference: { [K in keyof T]?: Diff<T[K]> } = {};
+// // diff 函数
+// function diff<T extends object>(
+//   oldObj: T,
+//   newObj: T,
+//   ignoreFields: (keyof T)[] = [],
+// ): { [K in keyof T]?: Diff<T[K]> } | null {
+//   const difference: { [K in keyof T]?: Diff<T[K]> } = {};
 
-  for (const key in oldObj) {
-    if (ignoreFields.includes(key)) continue;
-    const oldValue = oldObj[key];
-    const newValue = newObj[key];
+//   for (const key in oldObj) {
+//     if (ignoreFields.includes(key)) continue;
+//     const oldValue = oldObj[key];
+//     const newValue = newObj[key];
 
-    if (!deepEqual(oldValue, newValue)) {
-      difference[key] = newValue;
+//     if (!deepEqual(oldValue, newValue)) {
+//       difference[key] = newValue;
+//     }
+//   }
+
+//   return Object.keys(difference).length === 0 ? null : difference;
+// }
+
+type DiffResult<T> = Partial<{
+  [K in keyof T]: T[K] extends object ? DiffResult<T[K]> : T[K];
+}>;
+
+function diff<T extends Record<string, any>>(obj1: T, obj2: T): DiffResult<T> {
+  function findDifferences(o1: any, o2: any): any {
+    if (Array.isArray(o1) && Array.isArray(o2)) {
+      if (!arraysEqual(o1, o2)) {
+        return o2;
+      }
+      return undefined;
     }
+
+    if (
+      typeof o1 === 'object' &&
+      typeof o2 === 'object' &&
+      o1 !== null &&
+      o2 !== null
+    ) {
+      const diffResult: any = {};
+
+      const keys = new Set([...Object.keys(o1), ...Object.keys(o2)]);
+      keys.forEach((key) => {
+        const valueDiff = findDifferences(o1[key], o2[key]);
+        if (valueDiff !== undefined) {
+          diffResult[key] = valueDiff;
+        }
+      });
+
+      return Object.keys(diffResult).length > 0 ? diffResult : undefined;
+    }
+
+    return o1 === o2 ? undefined : o2;
   }
 
-  return Object.keys(difference).length === 0 ? null : difference;
+  return findDifferences(obj1, obj2);
 }
 
 export { arraysEqual, diff };

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