用码道 AI 编程助手开发番茄钟与任务统计工具

一行需求，码道帮我写出了带进度环、任务管理和今日/累计统计的番茄钟——25/5/15 计时、localStorage 持久化、浏览器通知，全在一个 HTML 里

分类: ai-development
标签: CodeArts, AI编程, 番茄钟, 任务统计, 生产力工具
难度: 初级
读者: 前端开发者、效率工具爱好者、技术写作者

---

1. 开篇钩子

不用手写计时器状态机，不用设计统计面板，不用纠结 localStorage 结构——我在码道 TUI 里输入了一段中文需求，大约 4 分钟后，一个完整的「番茄钟与任务统计」单页应用就自动生成了。SVG 进度环、任务关联专注、今日番茄与累计分钟统计、浏览器 Notification，一次到位。

---

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

---

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说「番茄钟与任务统计工具」，码道直接理解成计时器 + 任务 + 统计三面板方案
• 自主产品设计：自动选择深色主题、番茄红主色、SVG 环形进度，以及 计时器 / 任务 / 统计 三个 Tab
• 完整业务闭环：实现专注→短休息→长休息切换、任务绑定当前番茄、localStorage 持久化与 7 日历史
• 细节补全：浏览器 Notification、页面 Toast、提示音，以及文件结构自检（DOCTYPE / style / script / localStorage）

---

4. 任务描述

我想要一个番茄钟与任务统计工具，具体要求：

• 经典番茄钟：默认 25 分钟专注、5 分钟短休息、15 分钟长休息；每 4 个番茄后进入长休息；时长可自定义
• 开始 / 暂停 / 重置；当前阶段与剩余时间大号显示；进度环
• 任务管理：添加、完成、删除；可将任务设为当前专注
• 统计面板：今日番茄数、今日专注分钟、累计数据、各任务番茄条形图；localStorage 持久化
• 番茄结束后自动切换休息，并给出浏览器通知或页面提示
• 现代深色主题、响应式、纯前端单 HTML（内联 CSS/JS）

开发命令：

# 打开码道 TUI，在输入框中输入需求
codearts

---

5. 开发过程

步骤 1：打开码道 TUI 输入需求

在项目目录启动 codearts，将需求粘贴到输入框（模型为 Build · GLM-5.1）：

步骤 2：码道开始生成

回车提交后，窗口标题变为「番茄钟与任务统计工具」，码道进入构建流程：

码道选择了纯前端单文件方案，创建 pomodoro-timer.html，把计时、任务、统计全部内联到一个页面。

步骤 3：码道完成并自检

约 3 分 59 秒后，码道完成开发，并自行验证文件：26555 字节、695 行，包含 DOCTYPE、style、script、localStorage、Notification：

---

6. 代码解析

生成的 pomodoro-timer.html 核心逻辑可以分为三块：计时状态机、阶段完成结算、任务与统计持久化。

计时启动与滴答

function startTimer(){
  if(state.running) return;
  state.running = true;
  timerInterval = setInterval(tick, 1000);
  updateDisplay();
}

function tick(){
  timeLeft--;
  if(timeLeft <= 0){
    timeLeft = 0;
    onPhaseComplete();
  }
  updateDisplay();
}

码道用 setInterval 驱动秒级倒计时，时间归零时进入 onPhaseComplete，而不是把业务逻辑塞进 UI 事件里。

阶段完成：统计 + 自动切换休息

function onPhaseComplete(){
  clearInterval(timerInterval);
  timerInterval = null;
  state.running = false;

  if(state.phase === 'focus'){
    state.pomodorosCompleted++;
    state.cyclePosition++;
    checkDayReset();
    state.todayPomodoros++;
    state.todayMinutes += state.settings.focus;
    state.totalPomodoros++;
    state.totalMinutes += state.settings.focus;

    if(state.currentTaskId){
      const t = state.tasks.find(t=>t.id===state.currentTaskId);
      if(t) t.pomodoros++;
    }

    const day = state.today;
    if(!state.history[day]) state.history[day] = { pomodoros:0, minutes:0 };
    state.history[day].pomodoros++;
    state.history[day].minutes += state.settings.focus;

    saveState();

    if(state.cyclePosition >= 4){
      state.phase = 'long';
      state.cyclePosition = 0;
    }else{
      state.phase = 'short';
    }
    showToast('番茄完成！', '休息一下再继续吧 🎉');
    sendNotification('番茄完成！休息一下再继续吧');
  }else{
    state.phase = 'focus';
    showToast('休息结束', '开始新的专注吧 💪');
    sendNotification('休息结束，开始新的专注吧');
  }
  // ...重置本阶段时长并刷新 UI
}

这里体现了完整业务闭环：累计今日/历史数据、给当前任务加番茄、第 4 个番茄切长休息，并同时触发 Toast 与 Notification。

任务管理与持久化

const LS_KEY = 'pomodoro_data';

function saveState(){
  localStorage.setItem(LS_KEY, JSON.stringify(state));
}

function addTask(name){
  name = name.trim();
  if(!name) return;
  state.tasks.push({ id: genId(), name, completed: false, pomodoros: 0 });
  saveState();
  renderTasks();
}

function setFocusTask(id){
  state.currentTaskId = state.currentTaskId === id ? null : id;
  saveState();
  renderTasks();
  updateDisplay();
}

任务、设置、今日统计和 7 日历史都落在同一个 localStorage 键上，刷新页面后状态仍在。

---

7. 运行效果

用浏览器打开 pomodoro-timer.html：

可以看到：

• SVG 环形进度 + 大号剩余时间（专注阶段）
• 当前绑定任务「写技术方案文档」
• 可自定义专注 / 短休息 / 长休息分钟数
• 开始后按钮切换为「暂停」

切换到「统计」页：

• 今日番茄、今日专注分钟、累计番茄、累计专注分钟
• 各任务番茄完成数条形图
• 最近 7 天历史记录

---

8. 能力总结

能力	说明
自然语言理解	「番茄钟与任务统计」→ 计时器 / 任务 / 统计三面板单页应用
状态机设计	专注 / 短休息 / 长休息自动切换，每 4 番茄长休息
数据持久化	localStorage 保存任务、今日数据与历史
产品细节	SVG 进度环、Toast、Notification、提示音、结构自检

---

9. 总结

通过这次实践可以看到：用码道描述一个完整的效率工具需求后，它不仅写出了倒计时，还补齐了任务绑定、统计图表和持久化，并在结束时做了文件级自验证。如果你也想快速做出可用的小工具，不妨直接开通体验码道：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz