docs/archives/106-template-management/event-propagation-fix.md
内置模板语言切换后,主界面的优化提示词下拉框正确更新,但迭代页面的模板选择显示旧语言的模板名称。
主界面的优化提示词下拉框(正常):
App.vue
└── TemplateSelectUI (ref="templateSelectRef")
迭代页面的模板下拉框(异常):
App.vue
└── PromptPanelUI (ref="promptPanelRef")
└── TemplateSelect (ref="iterateTemplateSelectRef")
主界面的刷新机制:
templateSelectRef?.refresh?.()迭代页面的问题:
BuiltinTemplateLanguageSwitch 发出 languageChanged 事件TemplateManager 处理事件并更新自身状态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'])
监听语言变化事件:
<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)
添加迭代模板选择组件引用:
<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
})
这个修复模式适用于:
112-desktop-ipc-fixes/language-switch-fix.md - 语言切换按钮修复106-template-management/troubleshooting.md - 模板管理故障排除清单