From 6d95780bb2daf0c0a681fc91c3410e66c1da7b8a Mon Sep 17 00:00:00 2001
From: digua <i@digua.me>
Date: Sun, 9 Aug 2026 13:37:00 +0800
Subject: [PATCH] fix(layout): restore header tools outside debug mode

Treat the persisted side position as debug-only at runtime so upgraded users retain a visible header entry while their original preference remains available when debug mode is enabled again.
---
 src/components/layout/ActionToolsPanel.vue    |  6 ++---
 .../layout/session/SessionAnalysisHeader.vue  |  2 +-
 src/stores/layout.ts                          |  8 ++++++-
 src/stores/settings.test.ts                   | 24 +++++++++++++++++++
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/ActionToolsPanel.vue b/src/components/layout/ActionToolsPanel.vue
index 6145d688..acbefbb7 100644
--- a/src/components/layout/ActionToolsPanel.vue
+++ b/src/components/layout/ActionToolsPanel.vue
@@ -6,9 +6,9 @@ import { useLayoutStore } from '@/stores/layout'
 
 const { t } = useI18n()
 const layoutStore = useLayoutStore()
-const { isToolsPanelMini, toolsPanelPosition, isToolsPanelOpen } = storeToRefs(layoutStore)
+const { isToolsPanelMini, effectiveToolsPanelPosition, isToolsPanelOpen } = storeToRefs(layoutStore)
 
-const isHeaderMode = computed(() => toolsPanelPosition.value === 'header')
+const isHeaderMode = computed(() => effectiveToolsPanelPosition.value === 'header')
 const isPanelVisible = computed(() => !isHeaderMode.value || isToolsPanelOpen.value)
 const panelRef = ref<HTMLElement | null>(null)
 
@@ -99,7 +99,7 @@ const headerTools = [
 
 const visibleTools = computed(() => (isHeaderMode.value ? headerTools : tools))
 
-watch(toolsPanelPosition, () => {
+watch(effectiveToolsPanelPosition, () => {
   isToolsPanelOpen.value = false
 })
 
diff --git a/src/components/layout/session/SessionAnalysisHeader.vue b/src/components/layout/session/SessionAnalysisHeader.vue
index 3421db11..ca132f4c 100644
--- a/src/components/layout/session/SessionAnalysisHeader.vue
+++ b/src/components/layout/session/SessionAnalysisHeader.vue
@@ -58,7 +58,7 @@ const navigationItems = computed(() =>
 <template>
   <PageHeader :title="title" :avatar="avatar" size="compact" :icon="icon" :icon-class="iconClass">
     <template #actions>
-      <template v-if="showSessionActions && layoutStore.toolsPanelPosition === 'header'">
+      <template v-if="showSessionActions && layoutStore.effectiveToolsPanelPosition === 'header'">
         <UTooltip :text="t('analysis.tooltip.viewChatRecord')">
           <UButton
             icon="i-heroicons-chat-bubble-bottom-center-text"
diff --git a/src/stores/layout.ts b/src/stores/layout.ts
index 0f8eff97..3872306e 100644
--- a/src/stores/layout.ts
+++ b/src/stores/layout.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { ChatRecordQuery } from '@/types/format'
+import { useSettingsStore } from './settings'
 
 /**
  * 全局界面状态（侧边栏、弹窗、聊天记录抽屉等）
@@ -8,6 +9,7 @@ import type { ChatRecordQuery } from '@/types/format'
 export const useLayoutStore = defineStore(
   'layout',
   () => {
+    const settingsStore = useSettingsStore()
     const isSidebarCollapsed = ref(false)
     const showScreenCaptureModal = ref(false)
     const screenCaptureImage = ref<string | null>(null)
@@ -17,6 +19,9 @@ export const useLayoutStore = defineStore(
     const isToolsPanelLocked = ref(false)
     const isToolsPanelMini = ref(false)
     const toolsPanelPosition = ref<'side' | 'header'>('header')
+    const effectiveToolsPanelPosition = computed<'side' | 'header'>(() =>
+      settingsStore.debugMode ? toolsPanelPosition.value : 'header'
+    )
     const isToolsPanelOpen = ref(false)
 
     // 设置弹窗
@@ -100,6 +105,7 @@ export const useLayoutStore = defineStore(
       isToolsPanelLocked,
       isToolsPanelMini,
       toolsPanelPosition,
+      effectiveToolsPanelPosition,
       isToolsPanelOpen,
       showScreenCaptureModal,
       screenCaptureImage,
diff --git a/src/stores/settings.test.ts b/src/stores/settings.test.ts
index da41528e..be10bb7b 100644
--- a/src/stores/settings.test.ts
+++ b/src/stores/settings.test.ts
@@ -62,3 +62,27 @@ test('locale-dependent desensitize rules do not wait for telemetry delivery', as
     releaseTelemetry?.()
   }
 })
+
+test('uses the header tools layout outside debug mode without discarding the persisted side preference', async () => {
+  Object.defineProperties(globalThis, {
+    localStorage: { configurable: true, value: createMemoryStorage() },
+    sessionStorage: { configurable: true, value: createMemoryStorage() },
+    window: { configurable: true, value: {} },
+  })
+
+  setActivePinia(createPinia())
+  const { useSettingsStore } = await import('./settings')
+  const { useLayoutStore } = await import('./layout')
+  const settingsStore = useSettingsStore()
+  const layoutStore = useLayoutStore()
+
+  layoutStore.toolsPanelPosition = 'side'
+  settingsStore.debugMode = false
+  assert.equal(layoutStore.effectiveToolsPanelPosition, 'header')
+
+  settingsStore.debugMode = true
+  assert.equal(layoutStore.effectiveToolsPanelPosition, 'side')
+
+  settingsStore.debugMode = false
+  assert.equal(layoutStore.toolsPanelPosition, 'side')
+})