# 前端代码简化与优化提示词

## 目标
深入分析并简化前端代码结构，提升执行效率、可维护性和类型安全性。

## 优化原则

### 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 组装逻辑（后端参考）