docs: 更新开发计划文档并添加工具选择说明

添加 Claude Code 简称说明到代码生成情况对比文档
在新功能开发计划文档中添加详细的工具选择说明，明确不同任务类型推荐使用的 AI 工具
更新各阶段开发任务说明，标注哪些组件应使用 Trae 生成

 # AI 辅助开发工作流优化方案
 
+> **说明**：本文档中 **Claude Code** 简称为 **CC**，两者指代同一个工具
+
 ## 背景分析
 
 ### 观察结果

 # 26.1.26 新功能开发计划
 
+## 🤖 工具选择说明（重要）
+
+根据 [代码生成情况对比](../done/代码生成情况对比.md) 的决策树，本次开发采用 **Claude Code (规划) + Trae (页面/组件) + Claude Code (测试)** 的混合工作流：
+
+### 工具分工
+
+| 任务类型         | 使用工具        | 原因                         |
+| ---------------- | --------------- | ---------------------------- |
+| **新组件生成**   | **Trae**        | 视觉还原效果好，样式处理精细 |
+| **API 接口**     | **Claude Code** | 遵循项目架构，代码规范统一   |
+| **Composables**  | **Claude Code** | 业务逻辑封装，易于测试       |
+| **修改现有组件** | **Claude Code** | 小改动（< 50 行）直接修改    |
+| **代码审查**     | **Claude Code** | 检查代码风格和架构模式       |
+| **测试编写**     | **Claude Code** | TDD 流程，测试覆盖           |
+
+### 本次开发涉及的新组件（使用 Trae 生成）
+
+1. **第 2 阶段**：
+   - `CheckinCommentDialog.vue` - 评论输入弹窗
+   - `EmojiPicker.vue` - 表情选择器
+
+2. **第 3 阶段**：
+   - `CheckinCommentList.vue` - 评论列表组件
+
+3. **第 4 阶段**：
+   - `CheckinPoster.vue` - 海报生成组件
+
+### 推荐流程
+
+```bash
+# 1. 使用 Trae 生成新组件
+# 上传设计稿 → 描述需求 → Trae 生成代码
+
+# 2. 使用 Claude Code 生成 API 和 Composables
+# /speckit.implement 或直接编写
+
+# 3. 使用 Claude Code 进行代码审查和测试
+# /code-review + /tdd
+```
+
+---
+
 ## 背景
 
 为了增强用户在打卡列表的互动性和管理能力,需要在打卡卡片(CheckinCard)上增加更多操作选项,包括置顶、评论、海报分享以及展示评论列表。这些功能将通过环境变量开关进行控制,以便按需开启。
@@ -325,12 +367,13 @@
    - 在 `src/api/checkin.js` 中定义 `addCheckinCommentAPI`
 
 2. **创建评论输入弹窗**:
-   - 创建 `CheckinCommentDialog.vue` 组件
+   - 🎨 **使用 Trae 生成**: `CheckinCommentDialog.vue` 组件
+   - 参考 Vant Popup 组件，底部弹出样式
    - 实现 `van-field` 文本输入框(多行模式)
    - 实现字符计数提示(最多 200 字)
 
 3. **实现表情选择器**:
-   - 创建 `EmojiPicker.vue` 组件
+   - 🎨 **使用 Trae 生成**: `EmojiPicker.vue` 组件
    - 使用 `van-popup` + `van-grid` 展示表情符号
    - 实现点击表情插入到输入框光标位置
    - 定义常用表情列表(原生 Unicode Emoji)
@@ -375,7 +418,7 @@
      - `deleteCheckinCommentAPI` - 删除评论
 
 2. **创建评论列表组件**:
-   - 创建 `CheckinCommentList.vue` 组件
+   - 🎨 **使用 Trae 生成**: `CheckinCommentList.vue` 组件
    - 参考 `StudyCommentsSection.vue` 的实现模式
    - 实现首屏展示最多 5 条评论
    - 超过 5 条显示"查看全部"按钮
@@ -438,7 +481,7 @@
    - 安装依赖: `pnpm add html2canvas`
 
 2. **创建海报组件**:
-   - 创建 `CheckinPoster.vue` 组件
+   - 🎨 **使用 Trae 生成**: `CheckinPoster.vue` 组件
    - 参考 `SharePoster.vue` 的实现模式
    - 实现布局: 用户信息、打卡内容、二维码