用码道 AI 编程助手开发番茄钟与任务统计工具一行需求码道帮我写出了带进度环、任务管理和今日/累计统计的番茄钟——25/5/15 计时、localStorage 持久化、浏览器通知全在一个 HTML 里分类: ai-development标签: CodeArts, AI编程, 番茄钟, 任务统计, 生产力工具难度: 初级读者: 前端开发者、效率工具爱好者、技术写作者1. 开篇钩子不用手写计时器状态机不用设计统计面板不用纠结 localStorage 结构——我在码道 TUI 里输入了一段中文需求大约 4 分钟后一个完整的「番茄钟与任务统计」单页应用就自动生成了。SVG 进度环、任务关联专注、今日番茄与累计分钟统计、浏览器 Notification一次到位。2. 码道 TUI 安装复制下面的命令到终端3 步完成安装# 1. 一键安装sh-c$(curl-Lhttps://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)# 2. 配置环境变量exportPATH~/.codeartsdoer/installers:$PATHexportCODEARTS_CLI_AK你的AKexportCODEARTS_CLI_SK你的SK# 3. 启动 TUIcodeartsAK/SK 获取https://codearts.huaweicloud.com/portal/settings/cli-auth还没有码道立即开通体验https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz安装完成后在命令行或 PowerShell 中输入codearts回车即可打开码道 TUI。把开发需求贴进输入框码道会自动分析并生成完整代码。3. 码道能力一览这次开发中码道展示了以下能力自然语言编程我说「番茄钟与任务统计工具」码道直接理解成计时器 任务 统计三面板方案自主产品设计自动选择深色主题、番茄红主色、SVG 环形进度以及 计时器 / 任务 / 统计 三个 Tab完整业务闭环实现专注→短休息→长休息切换、任务绑定当前番茄、localStorage 持久化与 7 日历史细节补全浏览器 Notification、页面 Toast、提示音以及文件结构自检DOCTYPE / style / script / localStorage4. 任务描述我想要一个番茄钟与任务统计工具具体要求经典番茄钟默认 25 分钟专注、5 分钟短休息、15 分钟长休息每 4 个番茄后进入长休息时长可自定义开始 / 暂停 / 重置当前阶段与剩余时间大号显示进度环任务管理添加、完成、删除可将任务设为当前专注统计面板今日番茄数、今日专注分钟、累计数据、各任务番茄条形图localStorage 持久化番茄结束后自动切换休息并给出浏览器通知或页面提示现代深色主题、响应式、纯前端单 HTML内联 CSS/JS开发命令# 打开码道 TUI在输入框中输入需求codearts5. 开发过程步骤 1打开码道 TUI 输入需求在项目目录启动codearts将需求粘贴到输入框模型为 Build · GLM-5.1步骤 2码道开始生成回车提交后窗口标题变为「番茄钟与任务统计工具」码道进入构建流程码道选择了纯前端单文件方案创建pomodoro-timer.html把计时、任务、统计全部内联到一个页面。步骤 3码道完成并自检约 3 分 59 秒后码道完成开发并自行验证文件26555 字节、695 行包含 DOCTYPE、style、script、localStorage、Notification6. 代码解析生成的pomodoro-timer.html核心逻辑可以分为三块计时状态机、阶段完成结算、任务与统计持久化。计时启动与滴答functionstartTimer(){if(state.running)return;state.runningtrue;timerIntervalsetInterval(tick,1000);updateDisplay();}functiontick(){timeLeft--;if(timeLeft0){timeLeft0;onPhaseComplete();}updateDisplay();}码道用setInterval驱动秒级倒计时时间归零时进入onPhaseComplete而不是把业务逻辑塞进 UI 事件里。阶段完成统计 自动切换休息functiononPhaseComplete(){clearInterval(timerInterval);timerIntervalnull;state.runningfalse;if(state.phasefocus){state.pomodorosCompleted;state.cyclePosition;checkDayReset();state.todayPomodoros;state.todayMinutesstate.settings.focus;state.totalPomodoros;state.totalMinutesstate.settings.focus;if(state.currentTaskId){consttstate.tasks.find(tt.idstate.currentTaskId);if(t)t.pomodoros;}constdaystate.today;if(!state.history[day])state.history[day]{pomodoros:0,minutes:0};state.history[day].pomodoros;state.history[day].minutesstate.settings.focus;saveState();if(state.cyclePosition4){state.phaselong;state.cyclePosition0;}else{state.phaseshort;}showToast(番茄完成,休息一下再继续吧 );sendNotification(番茄完成休息一下再继续吧);}else{state.phasefocus;showToast(休息结束,开始新的专注吧 );sendNotification(休息结束开始新的专注吧);}// ...重置本阶段时长并刷新 UI}这里体现了完整业务闭环累计今日/历史数据、给当前任务加番茄、第 4 个番茄切长休息并同时触发 Toast 与 Notification。任务管理与持久化constLS_KEYpomodoro_data;functionsaveState(){localStorage.setItem(LS_KEY,JSON.stringify(state));}functionaddTask(name){namename.trim();if(!name)return;state.tasks.push({id:genId(),name,completed:false,pomodoros:0});saveState();renderTasks();}functionsetFocusTask(id){state.currentTaskIdstate.currentTaskIdid?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?sourcedmzntgwsfsourceaddmzntgwwbwz
