130 lines
4.8 KiB
Markdown
130 lines
4.8 KiB
Markdown
|
# 前端代码简化与优化提示词
|
|||
|
|
|
|||
|
|
## 目标
|
|||
|
|
深入分析并简化前端代码结构，提升执行效率、可维护性和类型安全性。
|
|||
|
|
|
|||
|
|
## 优化原则
|
|||
|
|
|
|||
|
|
### 1. 代码简化
|
|||
|
|
- **消除冗余**：识别并移除重复的逻辑、条件判断和错误处理模式
|
|||
|
|
- **函数拆分**：将大型函数拆分为职责单一的小函数（每个函数只做一件事）
|
|||
|
|
- **提取常量**：将魔法数字、字符串字面量提取为命名常量
|
|||
|
|
- **减少嵌套**：使用早期返回（early return）替代深层 if/else 嵌套
|
|||
|
|
|
|||
|
|
### 2. 类型安全
|
|||
|
|
- **明确类型**：为所有函数参数和返回值添加 TypeScript 类型注解
|
|||
|
|
- **接口定义**：为复杂对象结构定义 interface，避免 `any` 类型
|
|||
|
|
- **联合类型**：使用 discriminated unions 替代运行时 typeof 检查
|
|||
|
|
|
|||
|
|
### 3. 性能优化
|
|||
|
|
- **懒加载**：对非核心模块使用动态 import()
|
|||
|
|
- **防抖节流**：对频繁触发的事件（输入、滚动）添加 debounce/throttle
|
|||
|
|
- **计算缓存**：对纯函数的重复计算结果进行 memoization
|
|||
|
|
- **条件渲染**：使用 v-if/v-show 控制不必要的 DOM 操作
|
|||
|
|
|
|||
|
|
### 4. 错误处理
|
|||
|
|
- **统一错误边界**：集中处理 fetch/API 调用异常
|
|||
|
|
- **有意义错误信息**：避免空 catch，提供具体的失败原因
|
|||
|
|
- **降级策略**：关键功能失败时有优雅的 fallback
|
|||
|
|
|
|||
|
|
### 5. 状态管理
|
|||
|
|
- **最小化状态**：只存储必要的响应式数据
|
|||
|
|
- **派生状态**：使用 computed 替代手动监听 + 条件赋值
|
|||
|
|
- **作用域限制**：将状态定义在尽可能小的组件范围内
|
|||
|
|
|
|||
|
|
## 检查清单
|
|||
|
|
|
|||
|
|
### api.js 优化点
|
|||
|
|
```typescript
|
|||
|
|
// ❌ 问题：过多的条件分支和嵌套
|
|||
|
|
function getCancelUrl(apiUrl) {
|
|||
|
|
const normalized = String(apiUrl || '').replace(/\/+$/, '')
|
|||
|
|
if (/\/v1\/pro\/completions$/i.test(normalized)) { /*...*/ }
|
|||
|
|
if (/\/v1\/web-search$/i.test(normalized)) { /*...*/ }
|
|||
|
|
// ...
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ✅ 优化：使用映射表替代条件链
|
|||
|
|
const CANCEL_PATH_MAP = {
|
|||
|
|
'/v1/pro/completions': '/v1/pro/completions/cancel',
|
|||
|
|
'/v1/web-search': '/v1/web-search/cancel',
|
|||
|
|
'/v1/completions': '/v1/completions/cancel',
|
|||
|
|
}
|
|||
|
|
function getCancelUrl(apiUrl) {
|
|||
|
|
const base = new URL(apiUrl).pathname.replace(/\/+$/, '')
|
|||
|
|
return CANCEL_PATH_MAP[base] || `${base}/cancel`
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 通用模式识别
|
|||
|
|
1. **重复的 fetch 包装**：提取统一的 `safeFetch()` 函数处理认证头、错误和超时
|
|||
|
|
2. **SSE 解析器重复**：将 `parseSseEvent` 抽象为可复用的 stream 处理器
|
|||
|
|
3. **设置状态访问**：避免在每次 API 调用时重新创建 settings store 实例
|
|||
|
|
4. **条件类型检查**：用 TypeScript discriminated union 替代运行时 `typeof x === 'string'`
|
|||
|
|
|
|||
|
|
## 执行步骤
|
|||
|
|
|
|||
|
|
### 第一步：分析
|
|||
|
|
1. 使用 `grep_search` 查找重复模式（相同的 if/else 块、try/catch）
|
|||
|
|
2. 使用 `semantic_search` 查找相似功能的不同实现
|
|||
|
|
3. 识别高频调用的函数（API 请求、事件处理器）
|
|||
|
|
|
|||
|
|
### 第二步：重构
|
|||
|
|
1. **提取纯函数**：将副作用（fetch、DOM操作）与数据处理分离
|
|||
|
|
2. **创建工具库**：将通用逻辑移至 `src/utils/` 下的独立模块
|
|||
|
|
3. **添加类型定义**：在 `src/plugins/types.ts` 中集中管理接口
|
|||
|
|
4. **简化条件逻辑**：用策略模式或映射表替代 switch/if 链
|
|||
|
|
|
|||
|
|
### 第三步：验证
|
|||
|
|
1. 运行 `npm run build` 确认无类型错误
|
|||
|
|
2. 检查 `get_errors` 确保没有引入新问题
|
|||
|
|
3. 手动测试关键路径（补全、OCR、上传）
|
|||
|
|
|
|||
|
|
## 输出格式
|
|||
|
|
|
|||
|
|
每次优化后提供：
|
|||
|
|
```markdown
|
|||
|
|
### 优化项: [函数名/文件名]
|
|||
|
|
|
|||
|
|
**问题**: [简要描述当前代码的问题]
|
|||
|
|
|
|||
|
|
**改动**:
|
|||
|
|
```diff
|
|||
|
|
- // 旧代码
|
|||
|
|
+ // 新代码
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**收益**:
|
|||
|
|
- 行数减少: X%
|
|||
|
|
- 时间复杂度: O(n) → O(1)
|
|||
|
|
- 可读性提升: [具体说明]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 示例调用
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 简化 api.js 中的 URL 处理逻辑
|
|||
|
|
"简化 src/utils/api.js 中 getCancelUrl() 函数的条件分支，使用映射表替代正则匹配"
|
|||
|
|
|
|||
|
|
# 优化 copilotPlugin.ts 的类型定义
|
|||
|
|
"为 src/plugins/copilotPlugin.ts 添加完整的 TypeScript 类型注解，消除所有 any 类型"
|
|||
|
|
|
|||
|
|
# 提取重复的错误处理
|
|||
|
|
"将 src/utils/api.js 中分散的 try/catch 错误处理提取为统一的 errorBoundary() 高阶函数"
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
- ✅ 保持向后兼容：不破坏现有 API 接口和事件流
|
|||
|
|
- ✅ 小步快跑：每次只优化一个函数或模块，验证后再继续
|
|||
|
|
- ❌ 避免过度优化：不要为了炫技引入复杂的函数式编程模式
|
|||
|
|
- ⚠️ 测试覆盖：修改核心路径（补全、取消请求）前确保有对应测试
|
|||
|
|
- 📝 文档同步：更新 CLAUDE.md 和 AGENTS.md 中的架构描述
|
|||
|
|
|
|||
|
|
## 参考文件
|
|||
|
|
|
|||
|
|
- `src/utils/api.js` - API 请求层，存在多处可简化的条件逻辑
|
|||
|
|
- `src/plugins/copilotPlugin.ts` - 补全插件，类型定义不完整
|
|||
|
|
- `src/stores/settings.js` - 状态管理，可优化响应式依赖
|
|||
|
|
- `backend/prompt.py` - Prompt 组装逻辑（后端参考）
|