linshen
0e6dc465ee
本次提交增加了提示词迭代优化功能，并对相关模块进行了调整和优化，具体包括： - **新增:** - 新增 `iterate.yaml` 迭代优化提示词模板。 - `PromptPanel` 组件新增迭代优化功能，允许用户在已优化的提示词基础上进行进一步优化。 - `llmService` 服务新增 `iteratePrompt` 方法，支持提示词迭代优化。 - `promptManager` 服务新增 `getIterationChain` 方法，支持迭代链查询，并修改 `addToHistory` 方法以支持记录迭代优化历史。 - **修改:** - `experience.md` 文档更新，记录了提示词迭代功能开发经验。 - `src/prompts/templates/_index.json` 文件更新，添加 `iterate.yaml`。 - `src/App.vue` 组件添加 `handleIteratePrompt` 方法，处理迭代优化逻辑。 - `src/components/PromptPanel.vue` 组件添加迭代优化按钮和输入框。 - `src/services/llm.js` 添加 `iteratePrompt` 方法。 - `src/services/promptManager.js` 修改了 `addToHistory` 和 添加了 `getIterationChain` 方法 - `tests/unit/App.test.js` 添加了对迭代优化功能的测试 - **优化:** - 优化了 UI/UX 设计，确保用户体验。 - 优化了数据存储结构，支持记录迭代优化历史。 - 优化了代码组织和可维护性。 此次更新旨在提高用户优化提示词的效率和灵活性，并提供更完善的迭代优化功能。
6.6 KiB
6.6 KiB
项目经验总结
架构与开发规范
API集成
- 配置与业务逻辑分离，便于扩展
- API配置统一接口格式
- 提示词模板独立管理
- 统一错误处理机制
- Header认证(Bearer Token)
- 统一认证处理机制
模块化设计
- 明确模块职责边界
- 避免功能重复实现
- 保持接口一致性
- 目录结构（src）：
- api/: 外部API封装
- services/: 业务逻辑
- config/: 配置文件
- components/: UI组件
- prompts/: 提示词模板
LLM服务最佳实践
API标准化
- 使用OpenAI格式作为标准接口
- 不同模型只需配置baseURL
- 统一使用ChatOpenAI类
- 减少特殊适配代码
- gemini兼容：baseURL为https://generativelanguage.googleapis.com/v1beta/openai
配置管理
- 统一配置结构
- 模型选择和参数配置
- 提示词模板管理
- 错误处理和日志记录
Provider设计
-
唯一标识
- provider作为模型服务唯一标识符
- 用于区分不同AI模型服务提供商
-
配置完整性
- 包含完整配置信息
- 必要字段：name、baseURL、models、defaultModel、enabled、apiKey
-
安全性
- 保护默认模型防止误删除
- API密钥与provider绑定
- 使用环境变量管理敏感信息
-
扩展性
- 支持自定义模型提供商
- 允许动态更新配置
- 提供模型切换机制
-
实例管理
- 使用缓存管理模型实例
- 配置变更时清理缓存
- 统一实例创建和获取接口
错误处理最佳实践
2024-03-21更新
- 开发环境保留原始错误信息
- 避免过度包装错误信息
- 直接展示具体错误信息
- 包含足够的上下文信息
模板ID与模型key区分
-
问题描述
- 避免将模型key作为模板ID
- 防止加载不存在的模板文件
-
解决方案
- 明确区分模板ID和模型key
- 使用固定功能ID(如'optimize')
- 模型key仅用于API配置
测试规范
测试组织
- 按功能模块组织测试
- 测试正常和错误情况
- 验证状态变化
- 检查边界条件
环境变量处理
- 不强制要求所有环境变量
- 优雅跳过缺失环境变量
- 提供清晰的跳过原因
测试文件组织
- 按功能模块拆分测试文件
- 使用目录结构组织不同类型测试
- 测试运行器自动发现执行
- 每个文件关注特定功能
- 相关文件放同一目录
开发工具使用
NPM包版本管理
-
版本查看命令
npm list --depth=0 # 查看直接依赖 npm outdated # 查看可更新包 npm view [包名] versions # 查看可用版本 -
版本号规则
- ^: 兼容小版本更新(1.2.3 → 1.3.0)
- ~: 仅兼容补丁更新(1.2.3 → 1.2.4)
- *: 接受所有更新
-
更新最佳实践
- 更新前提交代码备份
- 更新后运行测试验证
- 问题时可回滚package.json
- 建议逐个包更新(ncu -u [包名])
Vue组件开发
Props和v-model
- Props是只读的，禁止直接修改
- 使用emit发送更新事件
- 计算属性处理双向绑定
UI设计规范
-
布局设计
- 使用grid实现响应式布局
- flex处理组件内部结构
- 统一使用tailwind间距
-
视觉系统
- CSS变量管理主题色
- 合理使用透明度创建层次
- 确保颜色对比度
- 统一的命名规范
-
深色主题
- 避免纯黑色背景
- 使用半透明提升层次
- 确保文本可读性
- 优化强调色使用
-
交互反馈
- 清晰的加载状态
- 及时的操作反馈
- 合理的禁用状态
- 适度的过渡动画
提示词迭代功能开发经验
1. 模板设计
- 迭代优化模板需要保持原有提示词的核心意图
- 模板结构要清晰，包含输入说明和输出格式
- 优化说明要包含保留部分和改进部分
- 避免过度修改导致偏离原意
2. UI交互设计
- 将迭代功能集成到现有界面，保持一致性
- 使用弹出式输入框收集优化需求
- 提供清晰的操作反馈和状态提示
- 优化按钮布局和交互流程
3. 数据结构设计
- 历史记录需要支持迭代关系
- 使用parentId追踪优化链
- 区分optimize和iterate两种类型
- 记录完整的优化过程
4. 最佳实践
-
模板管理
- 使用YAML格式存储模板
- 统一的模板索引管理
- 模板版本控制
- 清晰的模板命名规范
-
状态管理
- 区分不同的加载状态
- 合理的错误处理
- 用户友好的提示信息
- 状态重置的时机控制
-
历史记录
- 限制历史记录数量
- 提供迭代链查询
- 优化存储结构
- 异常处理机制
-
性能优化
- 合理使用缓存
- 避免重复API调用
- 优化组件更新逻辑
- 控制迭代深度
Vue 3 开发经验总结
Toast 组件和 Composable 使用
1. Composable 的正确使用
- 当使用 composable 返回的功能时，不需要用 ref 包装
- composable 应该在组件顶层直接调用，而不是在生命周期钩子中
- 如果 composable 返回的是函数，直接使用即可，不需要 .value
2. 模板引用的最佳实践
- 只在真正需要访问 DOM 元素时使用 ref 属性
- 使用 composable 时，优先使用其提供的方法而不是模板引用
- 如果组件提供了响应式 API，优先使用响应式 API 而不是模板引用
单元测试最佳实践
1. Composable 的模拟
// 正确的模拟方式
const mockSuccess = vi.fn()
const mockError = vi.fn()
vi.mock('./composables/useToast', () => ({
useToast: () => ({
success: mockSuccess,
error: mockError
})
}))
// 在 beforeEach 中重置
beforeEach(() => {
mockSuccess.mockClear()
mockError.mockClear()
})
2. 测试用例编写技巧
- 每个测试用例只测试一个功能点
- 使用具名的 mock 函数便于跟踪和验证
- 在 beforeEach 中重置所有状态
- 正确处理异步操作和错误情况
- 验证组件的所有可能状态
3. 错误处理和调试
- 使用 console.error 记录详细错误信息
- 在测试中验证错误处理逻辑
- 使用 try-catch 包装可能失败的操作
- 提供有意义的错误消息
代码组织和优化
1. 组件状态管理
- 将相关的状态和方法组织在一起
- 使用计算属性而不是方法来派生状态
- 避免在模板中使用复杂的表达式
2. 性能优化
- 避免不必要的响应式包装
- 及时清理不再需要的监听器和定时器
- 使用 computed 缓存计算结果
3. 代码可维护性
- 使用清晰的命名约定
- 将复杂逻辑抽取到 composable 中
- 保持组件的单一职责