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

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

* fix: non-null assertion lint error

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

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

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

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