docs/archives/102-web-architecture-refactor/plan.md
最新状态 (2024-12-29): 底层与上层应用重构均已完成。
@prompt-optimizer/core 和 @prompt-optimizer/ui 包已成功移除所有单例服务。@prompt-optimizer/web) 和浏览器插件 (@prompt-optimizer/extension) 的入口文件 (App.vue) 已完成适配，应用能够正常启动和运行。本计划旨在记录并总结 App.vue 的适配过程。
useAppInitializer 进行服务初始化。App.vue，使其只负责布局和初始化，将业务逻辑完全委托给 Composables。reactive 对象而不是多个 ref 的 Composable。packages/ui/src/index.ts
@prompt-optimizer/core 重新导出的服务实例。packages/ui/src/composables/useAppInitializer.ts (新建)
此阶段是本次重构的核心，现已圆满完成。
packages/web/src/App.vue 和 packages/extension/src/App.vue
<script setup> 中，删除了所有对单例服务 (modelManager, templateManager 等) 的直接导入。useAppInitializer:
const { services, isInitializing } = useAppInitializer() 作为获取所有服务的唯一来源。usePromptOptimizer, useModelManager) 都在 <script setup> 的顶层被调用。services ref 作为参数，并返回一个单一的 reactive 对象。// App.vue
const { services, isInitializing, error } = useAppInitializer();
// 在顶层直接调用，传入 services ref
const modelManagerState = useModelManager(services);
const templateManagerState = useTemplateManager(services);
const optimizerState = usePromptOptimizer(services);
// ... 其他 Composable
<template>):
reactive 对象的属性上 (e.g., optimizerState.isIterating)。ref 对象而导致的 prop 类型验证失败问题。computed 和类型错误:
App.vue 中的 computed 属性，使其不再错误地访问 .value。promptOptimizer.originalPromptPlaceholder。provide 正确传递了 templateLanguageService 等深层依赖。provide/inject:
provide('services', services)，并鼓励子组件（如 ModelSelect.vue, DataManager.vue）通过 inject 获取服务，减少了 props 传递。App.vue 代码变得极为简洁，只负责"初始化"和"布局"。背景: 在 App.vue 完成对 useAppInitializer 的适配后，发现其下属的多个 UI 组件 (@prompt-optimizer/ui/components/*) 仍然直接从 @prompt-optimizer/core 导入单例服务，这违反了新的依赖注入架构，并可能导致潜在的 bug 和测试难题。
任务: 彻底移除 UI 组件层对服务单例的直接依赖，改为通过 props 接收服务实例。
实施清单:
TemplateSelect.vue: 移除对 templateManager 的直接导入，改为 props 传入。ModelSelect.vue: 移除对 modelManager 的直接导入，改为 props 传入。OutputDisplayCore.vue: 移除对 compareService 的直接导入，改为 props 传入。HistoryDrawer.vue: 移除对 historyManager 的直接导入（该组件已通过 props 接收数据，只需清理无用导入）。BuiltinTemplateLanguageSwitch.vue: 移除对 templateManager 和 templateLanguageService 的直接导入，改为 props 传入。DataManager.vue: 移除对 dataManager 的直接导入，改为 props 传入或从 services inject。TemplateManager.vue: 确保从 services 注入中获取 templateManager 和 templateLanguageService，并正确传递给子组件。成果: