事件传播机制修复 - 内置模板语言切换bug

🎯 问题描述

核心问题

内置模板语言切换后，主界面的优化提示词下拉框正确更新，但迭代页面的模板选择显示旧语言的模板名称。

问题表现

主界面正常：优化提示词下拉框从"通用优化"正确切换到"General Optimization"
迭代页面异常：
- 当前选中项显示"通用迭代"（中文）
- 下拉列表显示"General Iteration"（英文）
- 用户需要手动重新选择才能使用英文模板
实际请求正常：发送请求时生效的是新语言（因为通过templateId重新获取）

用户体验影响

造成用户困惑：UI显示不一致
需要额外操作：用户必须手动重新选择模板
功能不完整：语言切换功能没有完全生效

🔍 根本原因分析

组件层级差异

主界面的优化提示词下拉框（正常）：

App.vue
└── TemplateSelectUI (ref="templateSelectRef")

迭代页面的模板下拉框（异常）：

App.vue
└── PromptPanelUI (ref="promptPanelRef")
    └── TemplateSelect (ref="iterateTemplateSelectRef")

事件传播路径差异

主界面的刷新机制：

TemplateManager关闭时自动调用 templateSelectRef?.refresh?.()
直接引用，事件传播路径短
有完整的刷新机制

迭代页面的问题：

语言切换事件无法传播到深层的TemplateSelect组件
组件层级更深，需要额外的事件传播机制
之前没有建立完整的事件传播链

技术细节

事件源：BuiltinTemplateLanguageSwitch 发出 languageChanged 事件
处理层：TemplateManager 处理事件并更新自身状态
传播断点：事件没有继续传播到App.vue层级
影响范围：只有TemplateManager内部的组件得到更新

🔧 解决方案

1. 建立事件传播链

TemplateManager.vue - 发出语言变化事件：

const handleLanguageChanged = async (newLanguage: string) => {
  // 重新加载模板列表以反映新的语言
  await loadTemplates()

  // 如果当前选中的模板是内置模板，需要重新选择以获取新语言版本
  const currentSelected = selectedTemplate.value
  if (currentSelected && currentSelected.isBuiltin) {
    try {
      const updatedTemplate = await getTemplateManager.value.getTemplate(currentSelected.id)
      if (updatedTemplate) {
        emit('select', updatedTemplate, getCurrentTemplateType());
      }
    } catch (error) {
      // 错误处理逻辑...
    }
  }

  // 🔑 关键修复：发出语言变化事件，通知父组件
  emit('languageChanged', newLanguage)
}

事件定义：

const emit = defineEmits(['close', 'select', 'update:show', 'languageChanged'])

2. App.vue处理事件并传播

监听语言变化事件：

<TemplateManagerUI 
  v-if="isReady" 
  v-model:show="templateManagerState.showTemplates" 
  :templateType="templateManagerState.currentType" 
  @close="() => templateManagerState.handleTemplateManagerClose(() => templateSelectRef?.refresh?.())"
  @languageChanged="handleTemplateLanguageChanged"
/>

处理语言变化：

// 处理模板语言变化
const handleTemplateLanguageChanged = (newLanguage: string) => {
  console.log('[App] 模板语言已切换:', newLanguage)
  
  // 刷新主界面的模板选择组件
  if (templateSelectRef.value?.refresh) {
    templateSelectRef.value.refresh()
  }
  
  // 🔑 关键修复：刷新迭代页面的模板选择组件
  if (promptPanelRef.value?.refreshIterateTemplateSelect) {
    promptPanelRef.value.refreshIterateTemplateSelect()
  }
}

添加组件引用：

const templateSelectRef = ref<{ refresh?: () => void } | null>(null)
const promptPanelRef = ref<{ refreshIterateTemplateSelect?: () => void } | null>(null)

3. PromptPanel暴露刷新方法

添加迭代模板选择组件引用：

<TemplateSelect
  ref="iterateTemplateSelectRef"
  :modelValue="selectedIterateTemplate"
  @update:modelValue="$emit('update:selectedIterateTemplate', $event)"
  :type="templateType"
  :optimization-mode="optimizationMode"
  :services="services"
  @manage="$emit('openTemplateManager', templateType)"
/>

暴露刷新方法：

const iterateTemplateSelectRef = ref<{ refresh?: () => void } | null>(null);

// 暴露刷新迭代模板选择的方法
const refreshIterateTemplateSelect = () => {
  if (iterateTemplateSelectRef.value?.refresh) {
    iterateTemplateSelectRef.value.refresh()
  }
}

defineExpose({
  refreshIterateTemplateSelect
})

✅ 修复验证

测试步骤

打开应用，确认主界面显示中文模板
点击"功能提示词"打开模板管理界面
点击"中文"按钮切换到"English"
确认主界面优化提示词下拉框更新为英文
输入测试内容并执行优化
点击"继续优化"打开迭代页面
关键验证：确认迭代页面的模板选择正确显示英文模板

验证结果

语言切换事件正确传播到所有TemplateSelect组件
迭代页面的下拉列表正确更新为新语言
用户可以在迭代页面直接使用正确语言的模板
主界面和迭代页面行为一致
无需用户手动重新选择模板

💡 经验总结

架构设计原则

事件传播完整性：确保状态变化事件能传播到所有相关组件
组件层级意识：深层组件需要额外的事件传播机制
统一响应机制：相同功能的组件应该有相同的响应机制
接口一致性：所有相关组件都应该暴露统一的刷新接口

最佳实践

建立完整的事件链：从事件源到所有消费者的完整路径
使用ref和defineExpose：为深层组件提供外部访问接口
统一刷新机制：所有TemplateSelect组件都有refresh方法
日志记录：添加适当的日志帮助调试事件传播

避免的陷阱

假设事件会自动传播：Vue的事件系统不会自动向下传播
忽略组件层级差异：不同层级的组件需要不同的处理方式
不完整的修复：只修复部分组件而忽略其他相关组件
缺乏验证：没有完整测试所有相关功能

适用场景

这个修复模式适用于：

全局状态变化需要通知多个层级的组件
组件层级复杂的应用架构
需要统一响应机制的功能模块
事件传播路径不一致的问题

🔗 相关文档

112-desktop-ipc-fixes/language-switch-fix.md - 语言切换按钮修复
106-template-management/troubleshooting.md - 模板管理故障排除清单

📅 修复记录

发现时间：2025-01-07
修复时间：2025-01-07
影响范围：Web和Extension环境
修复类型：事件传播机制完善
重要程度：高（影响用户体验的核心功能）

Source: docs/archives/106-template-management/event-propagation-fix.md