学习笔记：用Roo Code开发番茄时钟项目（基础篇第2章）

一抹淡影

已于 2025-03-12 15:40:02 修改

阅读量1.8k

点赞数 32

文章标签：学习笔记

于 2025-03-12 15:37:45 首次发布

本文链接：https://blog.csdn.net/2302_77819605/article/details/146206605

版权

一、Roo Code基础设置

界面布局
- 菜单栏功能：
  - 新建任务：开启新对话/返回当前对话
  - 提示词库：切换AI角色模式（代码生成/优化/解释等）
  - MCP服务：连接本地服务器扩展功能（需配置社区或自定义工具）
  - 历史记录：查看完整开发轨迹
  - 编辑器集成：快速跳转至VSCode编辑
  - 设置中心：配置API Key、模型参数、权限等
自动审批功能（核心安全机制）
- 权限配置建议：
  - 开发初期建议全开（需信任环境）
  - 生产环境谨慎开启（如关闭"执行命令"和"编辑文件"）
- 关键权限说明：
  - 浏览器调用：用于实时预览HTML效果
  - MCP服务器：需提前配置好本地服务（如npm文档工具）

二、工作模式深度解析

模式	适用场景	典型输出示例
Code（默认）	直接生成/修改代码	生成HTML+CSS+JS完整文件
Architect	需求拆解、技术方案设计	输出PRD文档+技术选型建议
Ask	代码原理解释、技术答疑	解析Web Worker工作原理
Debug	错误定位、性能优化	发现setInterval内存泄漏问题

模式切换技巧：

使用@mode:Architect在对话中强制切换
通过/task指令创建关联子任务

三、@符号的进阶用法

多源引用实战：

python

@problem:Timer_not_working  # 引用控制台报错
@terminal:npm_install_error # 分析依赖安装失败
@url:https://pomodoro-spec.com # 爬取行业标准文档
@file:styles.css # 让AI参考现有样式表

混合引用案例：
"请参考@problem:build_error和@commit:feat-responsive重构响应式布局"

四、提示词工程优化

增强策略：

BAD: "做个番茄钟"

GOOD:

markdown

## 技术需求
- 使用Web Workers实现后台计时
- 遵循PWA标准支持离线使用
- 集成IndexedDB存储历史记录

图片辅助设计：
- 上传UI设计稿→自动生成对应HTML结构
- 截图报错信息→精准定位问题根源

五、番茄时钟开发全流程实录

1. 需求分析阶段（Architect模式）

输出文档包含：

markdown

## 技术选型
- 前端框架: Vue 3（轻量级）
- 动画库: GSAP（流畅的时间过渡）
- 通知系统: Web Notifications API

2. 核心代码生成（Code模式）

关键实现：

javascript

// 使用requestAnimationFrame优化计时精度
function animate(timestamp) {
  if (!start) start = timestamp;
  const elapsed = timestamp - start;
  if (elapsed > interval) {
    // 更新显示逻辑
  }
  requestAnimationFrame(animate);
}

3. 迭代优化案例：

原始需求："增加进度环动画"

增强提示：

markdown

## 动画要求
- 使用SVG实现环形进度条
- 颜色渐变：番茄红(#FF6B6B)→森林绿(#4CAF50)
- 缓动函数：easeInOutQuad

4.结果展示：

六、开发心得与避坑指南

实践洞察：
- AI生成的代码需重点审查异步逻辑（如定时器嵌套问题）
- 多步骤开发时使用/context指令保持上下文连贯
- 遇到生成偏差时，用@file强制参考已有文件结构
效率提升技巧：
- 将常用配置保存为模板：/save-template pomodoro
- 建立私有MCP服务存储公司UI规范
- 用@history:task32快速回溯到特定开发节点
认知突破：
- 发现AI在CSS布局选择上的创新方案（如采用CSS Grid替代传统定位）
- 学习到Notification API的现代浏览器兼容性处理技巧