qwen-code/TODO_QUICK_WIN_FEATURES.md

Quick Win 功能迁移 - 任务清单

项目: 从 Claude Code VSCode Extension 迁移 UI 功能到 vscode-ide-companion

开始日期: 2025-11-18

预计完成: 2025-11-19

---

📋 任务概览

阶段	状态	完成度
需求分析	✅ 完成	100%
代码实现	✅ 完成	100%
手动测试	⏳ 进行中	0%
代码审查	⏳ 待开始	0%
文档更新	✅ 完成	100%

---

✅ 已完成的任务

阶段 1: 需求分析与技术调研 (已完成)

• 分析 Claude Code v2.0.43 压缩代码
• 提取 HTML 结构和 CSS 样式
• 通过字符串锚点定位混淆的 JS 代码
• 创建技术分析文档
  • docs-tmp/CLAUDE_CODE_DEEP_ANALYSIS.md
  • docs-tmp/EXTRACTABLE_CODE_FROM_CLAUDE.md
  • docs-tmp/HTML_TO_JS_MAPPING.md
  • MIGRATION_FEASIBILITY.md

阶段 2: Quick Win 功能实现 (已完成)

2.1 WebView 位置调整

• 修改 WebViewProvider.ts 中的 ViewColumn
  • 位置: src/WebViewProvider.ts:89
  • 改动: vscode.ViewColumn.One → vscode.ViewColumn.Beside
  • 测试: 需要验证 WebView 是否在编辑器右侧打开

2.2 ChatHeader 组件开发

• 创建 ChatHeader 组件文件
  • src/webview/components/ChatHeader.tsx (217 行)
  • src/webview/components/ChatHeader.css (193 行)
• 实现核心功能
  • Session 下拉选择器（左侧）
  • 当前 Session 标题显示
  • 下拉菜单动画效果
  • 时间格式化（相对时间）
  • 新建 Session 按钮（右侧）
  • Spacer 布局
• 交互功能
  • 点击外部关闭下拉菜单
  • Escape 键关闭下拉菜单
  • 悬停高亮效果
  • Session 切换功能

2.3 后端集成

• 更新 WebViewProvider.ts
  • 获取 session 详情逻辑 (line 659-669)
  • 发送 session 数据到 WebView (line 697-700)
• 更新 App.tsx
  • 添加 currentSessionTitle 状态 (line 58-60)
  • 移除旧的模态框代码 (删除 279-338 行)
  • 集成 ChatHeader 组件 (line 289-303)
  • 更新 session 切换处理逻辑 (line 218-226)
• 清理 App.css
  • 删除旧的 session selector 样式 (删除 158 行)

2.4 文档编写

• 创建实现总结文档
  • IMPLEMENTATION_SUMMARY.md (306 行)
• 创建任务清单文档
  • TODO_QUICK_WIN_FEATURES.md (本文件)

---

⏳ 待完成的任务

阶段 3: 测试验证 (优先级: P0 - 必须)

3.1 本地构建测试

# 在项目根目录执行
cd /Users/jinjing/projects/projj/github.com/QwenLM/qwen-code
npm run build

验收标准:

• 构建成功，没有 TypeScript 错误
• 生成的 dist 文件完整
• 没有 ESLint 警告（可忽略已存在的错误）

预计时间: 5 分钟

---

3.2 VSCode 调试测试

# 在 VSCode 中按 F5 启动调试
# 或者通过命令面板: Debug: Start Debugging

测试检查清单:

A. WebView 位置测试

• 打开一个代码文件
• 触发 WebView 打开命令
• ✅ 验证: WebView 应该在编辑器右侧打开
• ✅ 验证: 代码编辑器和 WebView 可以同时看到
• 测试边界情况:
  • 没有打开文件时打开 WebView
  • 已有分屏编辑器时打开 WebView

B. ChatHeader 显示测试

• WebView 打开后，检查 Header 区域
• ✅ 验证: Header 显示在顶部
• ✅ 验证: 左侧显示 "Past Conversations" 或当前 Session 标题
• ✅ 验证: 右侧显示加号按钮
• ✅ 验证: 布局正确（左中右三栏）

C. Session 下拉菜单测试

• 点击左侧的 Session 按钮
• ✅ 验证: 下拉菜单应该显示
• ✅ 验证: 下拉菜单有淡入动画
• ✅ 验证: 菜单内容:
  • 顶部显示 "Recent Sessions"
  • 右上角有 "New" 按钮
  • 显示 Session 列表（如果有）
• 测试交互:
  • 悬停在 Session 项上，应该高亮
  • 点击 Session 项，应该切换并关闭菜单
  • 点击菜单外部，应该关闭菜单
  • 按 Escape 键，应该关闭菜单

D. 新建 Session 测试

• 点击右侧的加号按钮
• ✅ 验证: 创建新 Session
• ✅ 验证: 消息列表清空
• ✅ 验证: Header 标题更新为 "Past Conversations" 或清空

E. Session 切换测试

• 创建多个 Session（发送不同的消息）
• 打开 Session 下拉菜单
• ✅ 验证: 显示多个 Session 项
• ✅ 验证: 每个 Session 显示:
  • Session 标题
  • 时间（例如 "5m ago"）
  • 消息数量（例如 "3 messages"）
• 点击切换到另一个 Session
• ✅ 验证: Header 标题更新为当前 Session
• ✅ 验证: 消息列表加载正确的历史消息

F. 长标题处理测试

• 创建一个有很长标题的 Session
• ✅ 验证: 标题应该被截断，显示省略号（...）
• ✅ 验证: 悬停时应该显示完整标题（通过 title 属性）

G. 主题兼容性测试

• 切换到浅色主题 (Light Theme)
• ✅ 验证: 所有颜色和对比度正确
• 切换到深色主题 (Dark Theme)
• ✅ 验证: 所有颜色和对比度正确
• 测试其他主题（可选）

H. 响应式测试

• 调整 WebView 宽度
• ✅ 验证: Header 布局不应该错乱
• ✅ 验证: 下拉菜单宽度自适应
• ✅ 验证: Session 标题在窄屏下正确截断

预计时间: 30-45 分钟

---

3.3 问题记录与修复

发现的问题 (在测试过程中填写):

序号	问题描述	严重程度	状态	修复说明
1
2
3

严重程度定义:

• 🔴 P0: 阻断问题，必须修复
• 🟡 P1: 重要问题，建议修复
• 🟢 P2: 次要问题，可延后修复

---

阶段 4: 代码审查与优化 (优先级: P1 - 建议)

4.1 代码审查检查清单

• 代码风格符合项目规范
• TypeScript 类型定义完整
• 没有 console.log 调试语句
• 没有注释掉的代码
• 变量命名清晰有意义
• 函数复杂度合理（单个函数 < 50 行）
• CSS 类名符合 BEM 规范
• 没有重复代码

4.2 性能优化检查

• 事件监听器正确清理
• useEffect 依赖数组正确
• 没有不必要的重渲染
• CSS 动画使用 GPU 加速属性

4.3 可访问性检查

• 按钮有合适的 title 属性
• 图标有 aria-hidden 属性
• 键盘导航功能正常
• 焦点状态可见

预计时间: 1-2 小时

---

阶段 5: 文档完善 (优先级: P1 - 建议)

5.1 代码注释

• ChatHeader.tsx 添加关键逻辑注释
• App.tsx 更新相关注释
• WebViewProvider.ts 更新注释

5.2 用户文档

• 更新 README.md（如果需要）
• 添加使用说明（如果需要）
• 添加截图或 GIF 演示（可选）

预计时间: 30 分钟

---

阶段 6: 代码提交与合并 (优先级: P0 - 必须)

6.1 Git 提交

# 1. 查看修改
git status
git diff

# 2. 添加文件
git add packages/vscode-ide-companion/src/webview/components/ChatHeader.tsx
git add packages/vscode-ide-companion/src/webview/components/ChatHeader.css
git add packages/vscode-ide-companion/src/webview/App.tsx
git add packages/vscode-ide-companion/src/webview/App.css
git add packages/vscode-ide-companion/src/WebViewProvider.ts
git add IMPLEMENTATION_SUMMARY.md
git add TODO_QUICK_WIN_FEATURES.md

# 3. 提交
git commit -m "feat(vscode-ide-companion): implement Quick Win features

- Move WebView to right side (ViewColumn.Beside)
- Add ChatHeader component with session dropdown
- Replace modal with compact dropdown menu
- Update session switching to show current title
- Clean up old session selector styles

Based on Claude Code v2.0.43 UI analysis.

🤖 Generated with Claude (Sonnet 4.5)
Co-Authored-By: Claude <noreply@anthropic.com>"

检查清单:

• 所有修改的文件已添加到暂存区
• 提交信息清晰描述改动
• 提交信息包含 Co-Authored-By
• 没有包含不相关的修改

6.2 推送到远程

# 推送到当前分支
git push origin feat/jinjing/implement-ui-from-cc-vscode-extension

6.3 创建 Pull Request（如果需要）

• 在 GitHub 创建 Pull Request
• 填写 PR 描述（参考 IMPLEMENTATION_SUMMARY.md）
• 添加测试截图或视频
• 请求代码审查

预计时间: 15 分钟

---

🎯 未来增强功能 (可选)

P1 - 高优先级（建议在 1-2 周内完成）

功能增强

• Session 搜索/过滤

  • 添加搜索框到下拉菜单
  • 实时过滤 Session 列表
  • 支持搜索 Session 标题和 ID
  • 预计时间: 2-3 小时

• 键盘导航增强

  • ArrowUp/ArrowDown 在 Session 列表中导航
  • Enter 键选择当前高亮的 Session
  • Tab 键在 UI 元素间切换
  • 预计时间: 1-2 小时

• Session 图标

  • 在下拉按钮中添加 Session 图标
  • 在列表项中添加图标
  • 预计时间: 30 分钟

Bug 修复

• 修复已存在的 TypeScript 错误
  • QwenAgentManager.onToolCall 类型定义
  • update 参数类型定义
  • currentSessionId 属性定义
  • 位置: src/WebViewProvider.ts:44, 233
  • 预计时间: 1 小时

---

P2 - 中等优先级（可在 1 个月内完成）

Session 管理增强

• 删除 Session

  • 在列表项添加删除按钮
  • 确认对话框
  • 删除后更新列表
  • 预计时间: 2 小时

• 重命名 Session

  • 内联编辑功能
  • 双击标题进入编辑模式
  • Enter 保存，Escape 取消
  • 预计时间: 3 小时

• Session 分组

  • 按日期分组（今天、昨天、上周）
  • 添加分组标题
  • 折叠/展开分组
  • 预计时间: 4 小时

UI 优化

• Session 预览

  • 在列表项显示第一条消息预览
  • 限制预览长度
  • 悬停显示完整预览
  • 预计时间: 2 小时

• 动画优化

  • 优化下拉菜单动画曲线
  • 添加列表项滑入动画
  • 添加加载指示器
  • 预计时间: 1-2 小时

---

P3 - 低优先级（可选功能）

高级功能

• Session 标签/标记

  • 为 Session 添加标签
  • 按标签过滤
  • 标签管理界面
  • 预计时间: 6-8 小时

• 导出 Session

  • 导出为 Markdown
  • 导出为 JSON
  • 导出为 PDF
  • 预计时间: 4-6 小时

• Session 收藏/置顶

  • 收藏重要 Session
  • 置顶功能
  • 收藏列表单独显示
  • 预计时间: 3-4 小时

测试

• 单元测试

  • ChatHeader 组件测试
  • Session 切换逻辑测试
  • 下拉菜单交互测试
  • 预计时间: 4-6 小时

• E2E 测试

  • 完整用户流程测试
  • 截图对比测试
  • 预计时间: 6-8 小时

---

📊 时间估算

核心任务（必须完成）

任务	状态	预计时间	实际时间
需求分析	✅	2h	~2h
代码实现	✅	4h	~4h
测试验证	⏳	0.5-1h	-
代码审查	⏳	1-2h	-
提交合并	⏳	0.25h	-
总计		7.75-9.25h	~6h

可选增强（未来计划）

优先级	功能数量	预计时间
P1	4 项	5-7h
P2	5 项	12-15h
P3	6 项	23-32h

---

🐛 已知问题

阻断问题 (P0)

无

重要问题 (P1)

1. TypeScript 类型错误（已存在，非本次改动引入）
   • 位置: src/WebViewProvider.ts:44, 233
   • 影响: 编译时有警告
   • 优先级: P1
   • 计划: 单独修复

次要问题 (P2)

待测试后填写

---

📝 测试报告模板

测试完成后，请在此记录测试结果:

测试环境

• 操作系统: macOS / Windows / Linux
• VSCode 版本:
• Node.js 版本:
• 测试日期:

测试结果摘要

• 通过测试项: _ / _
• 失败测试项: ___
• 跳过测试项: ___

详细测试记录

测试完成后，将上面 "待完成的任务 > 阶段 3.2" 中的检查清单复制到这里，并标记测试结果

发现的问题

参考 "阶段 3.3 问题记录与修复" 中的表格

---

✅ 完成标准

核心功能验收

• WebView 在编辑器右侧正确打开
• ChatHeader 正确显示和布局
• Session 下拉菜单功能完整
• Session 切换正常工作
• 新建 Session 功能正常
• 没有明显的 UI 错误或闪烁

代码质量验收

• 构建无错误
• 代码通过 Lint 检查
• 类型定义完整
• 没有内存泄漏（事件监听器正确清理）

文档验收

• IMPLEMENTATION_SUMMARY.md 完整
• TODO_QUICK_WIN_FEATURES.md 更新
• 代码注释充分

用户体验验收

• 操作流畅，无卡顿
• 界面美观，与 VSCode 风格一致
• 交互符合用户预期
• 键盘导航正常

---

📞 联系人

实现者: Claude (Sonnet 4.5) 项目负责人: @jinjing 代码审查: 待指定

---

📌 备注

设计参考

• 基于 Claude Code v2.0.43 完整分析
• 参考文档:
  • docs-tmp/HTML_TO_JS_MAPPING.md
  • docs-tmp/EXTRACTABLE_CODE_FROM_CLAUDE.md
  • IMPLEMENTATION_SUMMARY.md

Git 分支

• 当前分支: feat/jinjing/implement-ui-from-cc-vscode-extension
• 目标分支: main

相关 Issue

• 如果有 GitHub Issue，在此链接

---

文档版本: v1.0 创建日期: 2025-11-18 最后更新: 2025-11-18 文档状态: 📝 进行中