From 8480ed7f5ed32ac1e40e6ef6fff793f40295c7c7 Mon Sep 17 00:00:00 2001
From: KiriAky 107 <KiriAky107@qq.com>
Date: Fri, 4 Sep 2026 08:30:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(chat):=20=E9=98=BB=E6=AD=A2=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8D=B8=E8=BD=BD=E5=90=8E=E7=9A=84=E5=BC=82=E6=AD=A5?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E4=BF=AE=E6=94=B9=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/development/前端壳子与接口层开发说明.md |  2 ++
 frontend/src/features/chat/ChatView.spec.ts  | 23 ++++++++++++++++++++
 frontend/src/features/chat/ChatView.vue      |  9 +++++---
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/docs/development/前端壳子与接口层开发说明.md b/docs/development/前端壳子与接口层开发说明.md
index 7709c43..13437e4 100644
--- a/docs/development/前端壳子与接口层开发说明.md
+++ b/docs/development/前端壳子与接口层开发说明.md
@@ -231,3 +231,5 @@ Agent 工具列表按 `mcp.<server_id>.<remote_name>` 的远程工具名匹配
 ### 聊天模型选择审阅修复
 
 返回聊天页时保留仍启用的提供商与手动模型 ID，仅刷新其模型列表；未选择、已删除或已禁用的提供商才回退到默认值。提供商加载失败时保留当前选择并展示错误。新增页面重新挂载与异常分支回归，前端共 89 项测试通过。
+
+补充卸载时序修复：提供商或技能加载期间离开聊天页后，旧页面的初始化回调不再修改聊天选择，迟到错误也不再更新旧页面。两种加载延迟均通过先失败、修复后通过的回归测试，并验证返回页面后的默认模型和发送按钮状态；前端共 91 项测试通过。
diff --git a/frontend/src/features/chat/ChatView.spec.ts b/frontend/src/features/chat/ChatView.spec.ts
index 46c73d2..fe1d731 100644
--- a/frontend/src/features/chat/ChatView.spec.ts
+++ b/frontend/src/features/chat/ChatView.spec.ts
@@ -64,3 +64,26 @@ it('preserves the selection when provider discovery fails', async () => {
   expect(wrapper.get('.error-banner').text()).toBe('offline')
   wrapper.unmount()
 })
+
+it.each(['providers', 'skills'])('ignores initialization after unmount while %s are loading', async source => {
+  const chat = useChatStore()
+  let finish!: () => void
+  const pending = new Promise<void>(resolve => { finish = resolve })
+  if (source === 'providers') vi.mocked(useProviderStore().loadProviders).mockReturnValueOnce(pending)
+  else vi.mocked(useSkillStore().loadSkills).mockReturnValueOnce(pending)
+  const first = mount(ChatView)
+  first.unmount()
+  finish()
+  await flushPromises()
+  expect(chat.selectedProviderId).toBe('')
+  expect(chat.selectedModel).toBe('')
+  expect(useProviderStore().loadModels).not.toHaveBeenCalled()
+
+  const returned = mount(ChatView)
+  await flushPromises()
+  expect(chat.selectedProviderId).toBe('a')
+  expect(chat.selectedModel).toBe('a-default')
+  await returned.get('textarea').setValue('hello')
+  expect(returned.get('button.button-primary').attributes('disabled')).toBeUndefined()
+  returned.unmount()
+})
diff --git a/frontend/src/features/chat/ChatView.vue b/frontend/src/features/chat/ChatView.vue
index 51ad5d0..7cd0525 100644
--- a/frontend/src/features/chat/ChatView.vue
+++ b/frontend/src/features/chat/ChatView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { Citation } from '@/contracts'
 import { useChatStore } from '@/stores/chat'
@@ -16,13 +16,15 @@ const workspaceStore = useWorkspaceStore()
 const editorStore = useEditorStore()
 const router = useRouter()
 const loadError = ref('')
+let disposed = false
+onBeforeUnmount(() => { disposed = true })
 
 const availableModels = computed(() => providerStore.modelsByProvider[chatStore.selectedProviderId] ?? [])
 
 onMounted(async () => {
   try {
     await Promise.all([providerStore.loadProviders(), skillStore.loadSkills()])
-    if (providerStore.error) return
+    if (disposed || providerStore.error) return
     const selected = providerStore.enabledProviders.find(p => p.provider_id === chatStore.selectedProviderId)
     if (!selected) {
       chatStore.selectedProviderId = providerStore.defaultProviderId
@@ -30,6 +32,7 @@ onMounted(async () => {
       await refreshModels(selected.provider_id)
     }
   } catch (error) {
+    if (disposed) return
     loadError.value = error instanceof Error ? error.message : '无法加载 AI 配置，请检查后端连接。'
   }
 })
@@ -38,7 +41,7 @@ async function refreshModels(providerId: string) {
   loadError.value = ''
   if (!providerId) return
   try { await providerStore.loadModels(providerId) }
-  catch (error) { if (chatStore.selectedProviderId === providerId) loadError.value = error instanceof Error ? error.message : '模型列表加载失败，请手动填写模型 ID。' }
+  catch (error) { if (!disposed && chatStore.selectedProviderId === providerId) loadError.value = error instanceof Error ? error.message : '模型列表加载失败，请手动填写模型 ID。' }
 }
 
 watch(() => chatStore.selectedProviderId, async (providerId) => {