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

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

* fix: non-null assertion lint error

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

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

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

package.json

@@ -70,7 +70,6 @@
     "@changesets/cli": "catalog:",
     "@tsdown/css": "catalog:",
     "@types/node": "catalog:",
-    "@types/sortablejs": "catalog:",
     "@vben/commitlint-config": "workspace:*",
     "@vben/eslint-config": "workspace:*",
     "@vben/oxfmt-config": "workspace:*",
@@ -107,8 +106,5 @@
     "node": "^22.18.0 || ^24.12.0",
     "pnpm": ">=11.0.0"
   },
-  "packageManager": "pnpm@11.15.1",
-  "dependencies": {
-    "sortablejs": "catalog:"
-  }
+  "packageManager": "pnpm@11.15.1"
 }

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(() => {

packages/effects/layouts/package.json

@@ -20,6 +20,7 @@
     }
   },
   "dependencies": {
+    "@types/sortablejs": "catalog:",
     "@vben-core/composables": "workspace:*",
     "@vben-core/design": "workspace:*",
     "@vben-core/form-ui": "workspace:*",
@@ -38,6 +39,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "catalog:",
+    "sortablejs": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
   }

packages/effects/layouts/src/basic/header/header.vue

@@ -163,6 +163,12 @@ const rightSlots = computed(() => {
         preferences.widget.fullscreenButtonPosition === 'header',
       slotName: 'fullscreen',
     },
+    refresh: {
+      visible:
+        preferences.widget.refresh &&
+        preferences.widget.refreshButtonPosition === 'header',
+      slotName: 'refresh',
+    },
     notification: {
       visible:
         preferences.widget.notification &&
@@ -179,12 +185,6 @@ const rightSlots = computed(() => {
       visible: preferences.widget.logoutButtonPosition === 'header',
       slotName: 'logout-btn',
     },
-    refresh: {
-      visible:
-        preferences.widget.refresh &&
-        preferences.widget.refreshButtonPosition === 'header',
-      slotName: 'refresh',
-    },
   };
 
   for (const key of preferences.widget.order) {

packages/effects/layouts/src/widgets/preferences/blocks/draggable-list.vue

@@ -44,15 +44,16 @@ const hiddenList = computed(() =>
   props.items.filter((item) => item.position === 'none'),
 );
 function initSortable() {
-  if (!listRef.value) return;
+  const container = listRef.value;
+  if (!container) return;
   sortableInstance?.destroy();
-  sortableInstance = Sortable.create(listRef.value, {
+  sortableInstance = Sortable.create(container, {
     animation: 200,
     handle: '.drag-handle',
     onEnd() {
       // Sortable 已经改了 DOM，但 sortableList computed 还是旧顺序。
       // 直接从 DOM 读 children 的 data-key 拿新顺序，再追加 hidden 部分。
-      const newOrder = [...listRef.value!.children]
+      const newOrder = [...container.children]
         .map((el) => (el as HTMLElement).dataset.key)
         .filter(Boolean) as string[];
       emit('updateOrder', [...newOrder, ...hiddenList.value.map((i) => i.key)]);

packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue

@@ -107,10 +107,10 @@ const labelMap: Record<string, string> = {
   languageToggle: 'preferences.widget.languageToggle',
   timezone: 'preferences.widget.timezone',
   fullscreen: 'preferences.widget.fullscreen',
+  refresh: 'preferences.widget.refresh',
   notification: 'preferences.widget.notification',
   lockScreenBtn: 'ui.widgets.lockScreen.title',
   logoutBtn: 'common.logout',
-  refresh: 'preferences.widget.refresh',
 };
 
 const draggableItems = computed(() =>

playground/src/layouts/basic.vue

@@ -239,8 +239,11 @@ onBeforeMount(() => {
 
 <template>
   <BasicLayout
+    :avatar
+    :text="userStore.userInfo?.realName"
     @clear-preferences-and-logout="handleLogout"
     @click-logo="handleClickLogo"
+    @logout="handleLogout"
   >
     <template #user-dropdown>
       <UserDropdown