fix: 修复点击退出图标确认后不能退出 && 图标排序等数组字段需顺序敏感比较 (#8179)

* chore: 调整 sortablejs 的位置，只在用到的模块引入

* fix: non-null assertion lint error

* fix: 修复点击退出图标确认后不能退出

* fix: 图标排序等数组字段需顺序敏感比较

* feat: 配置中增加 refresh 并统一位置

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { diff } from '../diff';
+import { diff, diffStrict } from '../diff';
 
 describe('diff function', () => {
   it('should return an empty object when comparing identical objects', () => {
@@ -27,6 +27,12 @@ describe('diff function', () => {
     expect(diff(obj1, obj2)).toEqual({ a: [1, 2, 4] });
   });
 
+  it('should ignore array order changes', () => {
+    const obj1 = { a: [1, 2, 3] };
+    const obj2 = { a: [3, 2, 1] };
+    expect(diff(obj1, obj2)).toEqual(undefined);
+  });
+
   it('should handle added keys', () => {
     const obj1 = { a: 1 };
     const obj2 = { a: 1, b: 2 };
@@ -51,3 +57,31 @@ describe('diff function', () => {
     expect(diff(obj1, obj2)).toEqual({ a: 1 });
   });
 });
+
+describe('diffStrict function', () => {
+  it('should return undefined when comparing identical objects', () => {
+    const obj1 = { a: 1, b: { c: 2 }, d: [1, 2, 3] };
+    const obj2 = { a: 1, b: { c: 2 }, d: [1, 2, 3] };
+    expect(diffStrict(obj1, obj2)).toEqual(undefined);
+  });
+
+  it('should detect array order changes', () => {
+    const obj1 = { a: ['search', 'theme', 'logout'] };
+    const obj2 = { a: ['logout', 'theme', 'search'] };
+    expect(diffStrict(obj1, obj2)).toEqual({
+      a: ['logout', 'theme', 'search'],
+    });
+  });
+
+  it('should detect array element changes', () => {
+    const obj1 = { a: [1, 2, 3] };
+    const obj2 = { a: [1, 2, 4] };
+    expect(diffStrict(obj1, obj2)).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(diffStrict(obj1, obj2)).toEqual({ b: { c: 3 } });
+  });
+});

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

@@ -1,6 +1,6 @@
 // type Diff<T = any> = T;
 
-// 比较两个数组是否相等
+// 比较两个数组是否相等（忽略顺序）
 
 function arraysEqual<T>(a: T[], b: T[]): boolean {
   if (a.length !== b.length) return false;
@@ -18,6 +18,11 @@ function arraysEqual<T>(a: T[], b: T[]): boolean {
   return true;
 }
 
+// 比较两个数组是否相等（顺序敏感）
+function arraysStrictEqual<T>(a: T[], b: T[]): boolean {
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+
 // 深度对比两个值
 // function deepEqual<T>(oldVal: T, newVal: T): boolean {
 //   if (
@@ -59,38 +64,51 @@ 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;
-    }
+type ArrayComparator = (a: any[], b: any[]) => boolean;
 
-    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;
+function createDiff(arrayEquals: ArrayComparator) {
+  return function <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 (!arrayEquals(o1, o2)) {
+          return o2;
         }
-      });
+        return undefined;
+      }
 
-      return Object.keys(diffResult).length > 0 ? diffResult : 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 o1 === o2 ? undefined : o2;
-  }
-
-  return findDifferences(obj1, obj2);
+    return findDifferences(obj1, obj2);
+  };
 }
 
-export { arraysEqual, diff };
+// 数组比较（不含顺序）
+const diff = createDiff(arraysEqual);
+
+// 数组比较（含顺序）
+const diffStrict = createDiff(arraysStrictEqual);
+
+export { arraysEqual, arraysStrictEqual, diff, diffStrict };

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -146,6 +146,18 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "logoutButtonPosition": "header",
     "notification": true,
     "notificationButtonPosition": "header",
+    "order": [
+      "globalSearch",
+      "preferences",
+      "themeToggle",
+      "languageToggle",
+      "timezone",
+      "fullscreen",
+      "refresh",
+      "notification",
+      "lockScreenBtn",
+      "logoutBtn",
+    ],
     "refresh": true,
     "refreshButtonPosition": "header",
     "sidebarToggle": true,

packages/@core/preferences/src/config.ts

@@ -161,6 +161,7 @@ const defaultPreferences: Preferences = {
       'languageToggle',
       'timezone',
       'fullscreen',
+      'refresh',
       'notification',
       'lockScreenBtn',
       'logoutBtn',

packages/@core/preferences/src/use-preferences.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 
-import { diff } from '@vben-core/shared/utils';
+import { diff, diffStrict } from '@vben-core/shared/utils';
 
 import { preferencesManager } from './preferences';
 import { isDarkTheme } from './update-css-variables';
@@ -16,9 +16,10 @@ function usePreferences() {
   );
   /**
    * @zh_CN 计算偏好设置的变化
+   * @zh_CN 使用 diffStrict：图标排序等数组字段需顺序敏感比较
    */
   const diffPreference = computed(() => {
-    return diff(initialPreferences, preferences);
+    return diffStrict(initialPreferences, preferences);
   });
 
   const diffCustomPreference = computed(() => {