用TRAE搭配DEEPSEEK R1：从零搭建一个可用的番茄计时器

1. 为什么我重新捡起 TRAE DEEPSEEK R1 做番茄钟番茄计时器这东西说简单也简单一个倒计时加状态切换说麻烦也麻烦状态机、长休息判定、响应式布局、暂停恢复的边界条件手写一遍少说两小时。我之前的做法是让 AI 一次性吐完整代码结果要么按钮点了没反应要么休息和工作状态串了改起来比自己写还累。这次换个思路用 TRAE 作为编辑器侧的 AI 编程环境把 DEEPSEEK R1 接进去让它先做需求拆解再分模块生成代码最后本地跑起来自测。TRAE 是字节出的 AI IDE支持自定义模型接入DEEPSEEK R1 是推理型模型在需求拆解和逻辑推演上比普通对话模型稳一些尤其适合“先想清楚再写代码”这种流程。这篇适合两类人一是想用 AI 辅助写前端小工具但总被“一次性生成”坑过的二是已经在用 TRAE想换成 DEEPSEEK R1 但不知道怎么配模型参数的。我试过直接让模型输出整个 HTML 文件效果确实一般。这次改成三步走需求拆解 → 核心逻辑代码 → 本地运行验证每一步都能单独检查出错也好定位。下面把 TRAE 项目配置骨架、DEEPSEEK R1 调用参数、计时器核心逻辑代码和启动自测步骤都写清楚你可以直接跟着复现。2. 前置准备TRAE 里接入 DEEPSEEK R1 的配置骨架TRAE 本身支持在设置里添加自定义模型服务。如果你不想在本地折腾环境变量也可以直接用 TaoToken 的 API 作为模型入口它兼容 OpenAI 风格的接口格式TRAE 里填 Base URL 和 Key 就能用。先拿到 API Key打开 https://taotoken.net/api-keys 登录后创建一个新 Key复制保存。注意 Key 只在创建时显示一次丢了就重新建。然后在 TRAE 里配置模型。不同版本的 TRAE 设置入口略有差异一般在 Settings → Model → Custom Model 里。关键参数如下配置项填写值说明ProviderOpenAI Compatible兼容模式Base URLhttps://taotoken.net/api不要加 UTM 参数API Key你创建的 Key粘贴进去Model Namedeepseek-r1按实际模型名填Max Tokens4096番茄钟代码量够用Temperature0.3代码生成建议低温度注意Base URL 末尾不要带/v1或斜杠TRAE 会自动拼接路径。如果填错会报 404后面排障章节会讲。配置完点“Test Connection”返回 200 就说明通了。如果 TRAE 版本不支持自定义模型也可以退一步在 TRAE 里正常写代码把 DEEPSEEK R1 的对话窗口开在 https://taotoken.net/api 的模型对话页复制粘贴代码过去让它改。两种方式我都用过前者更顺后者适合临时救急。3. 第一步让 DEEPSEEK R1 做需求拆解别直接要代码很多人一上来就说“帮我写个番茄钟”模型只能猜你要什么。正确做法是先让它拆需求。在 TRAE 的 AI 对话里输入下面这段提示词我要用原生 HTML CSS JavaScript 做一个番茄计时器支持响应式布局。 请先不要写代码只做需求拆解输出 1. 状态机有哪些状态状态之间怎么切换 2. 每个状态对应的默认时长和可配置项 3. 需要哪些 DOM 元素和按钮 4. 计时器用 setInterval 还是 requestAnimationFrame为什么 5. 暂停和恢复时如何保证剩余时间不丢失DEEPSEEK R1 会先输出一段推理过程再给结论。实测下来它会指出几个关键点状态分 work、shortBreak、longBreak 三种每完成 4 个 work 进入 longBreak计时用 setInterval 每 1000ms 减一但暂停时要 clearInterval 并保存剩余秒数恢复时重新 setInterval。这些正是手写时容易漏的地方。拿到拆解结果后你可以直接说“按上面的设计生成代码分三个文件index.html、style.css、script.js”。这样生成的代码结构清晰不会把所有逻辑塞在一个函数里。4. 第二步计时器核心逻辑代码与参数说明DEEPSEEK R1 生成的代码我做了微调把状态管理和计时逻辑抽出来方便你对照理解。先看 HTML 骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title番茄计时器/title link relstylesheet hrefstyle.css /head body div classtimer-card div classstatus idstatus专注中/div div classtime idtime25:00/div div classcontrols button idstartPause开始/button button idreset重置/button /div div classcount idcount已完成0 个番茄/div /div script srcscript.js/script /body /html核心逻辑在 script.js。关键参数我单独列出来方便你改const CONFIG { workTime: 25 * 60, // 专注时长秒 shortBreak: 5 * 60, // 短休息秒 longBreak: 15 * 60, // 长休息秒 longBreakInterval: 4 // 每几个番茄进入长休息 }; let state work; // work | shortBreak | longBreak let remaining CONFIG.workTime; let timerId null; let completedCount 0; let isRunning false;计时函数用 setInterval每秒减一到 0 时切换状态function tick() { remaining--; render(); if (remaining 0) { clearInterval(timerId); timerId null; isRunning false; switchState(); } } function switchState() { if (state work) { completedCount; if (completedCount % CONFIG.longBreakInterval 0) { state longBreak; remaining CONFIG.longBreak; } else { state shortBreak; remaining CONFIG.shortBreak; } } else { state work; remaining CONFIG.workTime; } render(); }开始/暂停按钮共用一个函数靠 isRunning 判断function toggleTimer() { if (isRunning) { clearInterval(timerId); timerId null; isRunning false; document.getElementById(startPause).textContent 继续; } else { isRunning true; timerId setInterval(tick, 1000); document.getElementById(startPause).textContent 暂停; } }渲染函数把剩余秒数格式化成 MM:SS并更新状态文字和计数function render() { const m String(Math.floor(remaining / 60)).padStart(2, 0); const s String(remaining % 60).padStart(2, 0); document.getElementById(time).textContent ${m}:${s}; const statusMap { work: 专注中, shortBreak: 短休息, longBreak: 长休息 }; document.getElementById(status).textContent statusMap[state]; document.getElementById(count).textContent 已完成${completedCount} 个番茄; }CSS 部分用 Flexbox 居中加一个媒体查询适配手机.timer-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px; border-radius: 16px; background: #1e1e2e; color: #cdd6f4; } .time { font-size: 64px; font-weight: 700; } media (max-width: 480px) { .time { font-size: 48px; } .timer-card { padding: 24px; } }这套代码的逻辑边界我检查过暂停时 remaining 不变恢复后从剩余秒数继续重置时把 state、remaining、completedCount 全部归位长休息判定用 completedCount % 4第 4、8、12 个番茄后触发。5. 第三步本地启动与功能自测代码写完后在 TRAE 里直接右键 index.html 选择“在浏览器中打开”或者用本地服务器# 如果你装了 Python python -m http.server 8080 # 或者用 Node npx serve .浏览器访问 http://localhost:8080按下面清单自测测试项操作预期结果初始状态打开页面显示 25:00状态“专注中”按钮“开始”开始计时点“开始”数字每秒递减按钮变“暂停”暂停恢复点“暂停”再点“继续”数字停在暂停时的值继续后接着减重置点“重置”回到 25:00计数归零状态切换把 workTime 改成 5 秒测试归零后自动切到短休息长休息把 longBreakInterval 改成 2 测试第 2 个番茄后进入长休息响应式缩小浏览器窗口布局不溢出字号自适应测试时把 CONFIG 里的时长改小比如 workTime 改成 10 秒能快速验证状态切换逻辑不用真等 25 分钟。验证完再改回 25 * 60。6. 本篇常见报错与排查报错一TRAE 里 Test Connection 返回 404大概率是 Base URL 填错了。正确值是https://taotoken.net/api不要加/v1不要加末尾斜杠。如果 TRAE 要求必须带版本号试试https://taotoken.net/api/v1但优先用前者。报错二模型返回内容被截断Max Tokens 设太小。番茄钟完整代码大概 2000 到 3000 token建议设 4096。如果还是断让模型分文件输出一次只生成一个文件。报错三计时器数字跳变不规律setInterval 在浏览器后台标签页会被节流切回前台时可能一次减好几秒。这是浏览器行为不是代码 bug。如果要精确计时改用Date.now()记录开始时间每次 tick 算差值。DEEPSEEK R1 在需求拆解时提到过这点你可以让它重新生成基于时间戳的版本。报错四按钮点了没反应检查 script.js 是否在 HTML 底部引入以及document.getElementById的 id 是否和 HTML 一致。常见错误是 HTML 里写startPauseJS 里写start-pause。报错五状态切换后不自动开始下一轮当前代码切换状态后是暂停的需要手动点开始。如果你想要自动开始在 switchState 末尾加一行toggleTimer()但注意别在 clearInterval 后重复调用导致多个定时器。7. 继续用这套流程做更多小工具这套“先拆解、再生成、后自测”的流程不只适用于番茄钟。你把它套到待办清单、倒计时器、习惯打卡这些小工具上效果一样。关键是把 DEEPSEEK R1 当推理助手用而不是代码打印机。如果你在 TRAE 里配置模型时遇到连接问题直接看接入文档https://taotoken.net/doc 里面有各编辑器的配置截图。想先试试 DEEPSEEK R1 的推理效果可以打开模型对话页https://taotoken.net/api 不用配环境就能聊。长期用 AI 写代码的话Coding Plan 更划算https://taotoken.net/coding-plan 按量计费适合这种小工具反复迭代的场景。代码跑起来后你可以试着让 DEEPSEEK R1 加个功能把完成的番茄数存到 localStorage刷新页面不丢。提示词就写“在现有代码基础上用 localStorage 持久化 completedCount刷新后恢复”。它会给出一段增量修改你贴进 script.js 就能用。这种小步迭代的方式比一次性要完整项目稳得多。