mirror of
https://github.com/linshenkx/prompt-optimizer.git
synced 2026-06-06 14:39:56 +08:00
acf592ab2c
- 添加模板管理故障排除清单，以帮助用户解决模板管理中遇到的常见问题。 - 统一服务注入逻辑，移除不必要的props定义，增强错误处理机制。 - 优化模板管理，统一服务注入与存储键管理。 - 更新 `TemplateSelect.vue`，移除 `services` prop，改用 `inject` 注入服务。 - 整合 `useTemplateManager`，统一模板选择保存逻辑及存储键管理。 - 新增 `storage-keys.ts`，集中管理存储键常量，避免重复定义，便于维护与遍历。 - 更新相关组件以适配新的模板管理方式，确保模板选择状态正确保存和恢复。 - 修正了模板类型错误的问题，确保在管理界面切换分类后添加的模板类型与当前显示的分类一致。 - 修复了模板管理器打开位置错误的问题，确保从不同入口打开模板管理器时，定位到正确的分类。 - 优化了模板保存和导入逻辑，增加了错误处理和提示。 - 确保所有异步模板操作都使用了 `await` 关键字，避免潜在的时序问题。 - 移除了 `usePromptOptimizer` 中 `selectedOptimizationMode` 的默认值，强制传入该参数。 - 优化了 `TemplateSelect` 组件中 `optimizationMode` prop 的处理，设为 `required`。
4.2 KiB
4.2 KiB
Web架构重构经验总结
📋 概述
Web架构重构过程中积累的核心经验，包括Vue Composable架构设计、响应式系统优化和依赖注入最佳实践。
🎯 Vue Composable 架构重构：解决异步初始化问题
问题背景
在异步回调中调用Vue Composable函数会导致错误：Uncaught (in promise) SyntaxError: Must be called at the top of a 'setup' function。这违反了Vue Composition API的核心规则，需要重构架构。
核心解决方案：顶层声明，响应式连接，内部自治
// ❌ 错误：在异步回调中调用Composable
onMounted(async () => {
const services = await initServices();
const modelManager = useModelManager(); // 错误：不在setup顶层调用
});
// ✅ 正确：顶层声明，响应式连接
const { services } = useAppInitializer(); // 在顶层调用
const modelManager = useModelManager(services); // 在顶层调用，传入services引用
// 内部实现：响应式连接
export function useModelManager(services: Ref<AppServices | null>) {
// 状态定义...
// 响应式连接：监听服务就绪
watch(services, (newServices) => {
if (!newServices) return;
// 使用已就绪的服务...
}, { immediate: true });
return { /* 返回状态和方法 */ };
}
架构设计要点
- 统一服务接口：创建
AppServices接口，统一管理所有核心服务 - 服务初始化器：
useAppInitializer负责创建和初始化所有服务 - Composable参数模式：所有Composable接收
services引用作为参数
关键经验
- Vue响应式上下文: Vue Composable必须在
<script setup>顶层同步调用 - 响应式连接模式: 使用
watch监听服务就绪，而不是在回调中调用Composable - 快速失败原则: 在开发环境中，快速暴露问题比隐藏问题更有价值
- 统一架构: 保持所有Composable的一致架构模式
- 类型系统挑战: 复杂的类型系统可能导致接口不匹配问题
🔄 Composable 重构：reactive vs ref 的深度实践
背景
为解决 Vue 深层嵌套 ref 无法自动解包的问题，我们将多个核心 Composables 的返回值从包含多个 ref 的对象，重构为了单一的 reactive 对象。
核心挑战与解决方案
1. 依赖注入失败
- 现象: 组件无法通过
inject获取服务实例 - 根因: 服务创建了但没有正确注册到依赖注入系统
- 解决: 确保服务完整的创建、注册、提供链条
2. 响应式接口不匹配
- 现象:
Cannot read properties of null (reading 'value')错误 - 根因:
reactive对象属性与期望ref的接口不匹配 - 解决: 使用
toRef作为适配器// 为 reactive 对象的属性创建一个双向绑定的 ref const selectedTemplateRef = toRef(optimizer, 'selectedTemplate');
3. 外部API健壮性
- 现象: API检测失败导致解析错误
- 根因: 未检查响应内容类型就尝试解析JSON
- 解决: 在解析前检查
Content-Type响应头
总结
reactive适用于管理一组相关状态，简化顶层 APIref依然是跨组件传递单个响应式变量的可靠方式toRef和toRefs是在reactive和ref之间适配的必备工具- 依赖注入和服务初始化流程的正确性是复杂应用稳定运行的基石
💡 核心经验总结
- Vue响应式上下文: Vue Composable必须在
<script setup>顶层同步调用 - 响应式连接模式: 使用
watch监听服务就绪，保持代码清晰和可维护 - 快速失败原则: 在开发环境中，快速暴露问题比隐藏问题更有价值
- 统一架构: 保持所有Composable的一致架构模式
- 类型系统: 复杂的类型系统需要仔细处理接口匹配问题
- 响应式系统:
reactive和ref各有适用场景，toRef是重要的适配工具
🔗 相关文档
文档类型: 经验总结
适用范围: Vue Composable架构开发
最后更新: 2025-07-01