腾讯云开发者社区（cloud.tencent.com/developer/a… 🔥 本文代码与截图全程由腾讯混元 Hy3 模型驱动完成；Hy3 正限时两周免费体验（7 月 6 日 – 7 月 22 日），文末附上手方式。
一、为什么想做这个
每年夏秋，台风路径图都是热搜常客。但市面上的台风产品要么要装 App，要么数据滞后、界面花哨。作为一个前端开发者，我一直想做一个属于自己、打开网页就能看、数据真实、还能离线运行的台风监测面板。
传统做法：搭一套 Vue 工程、装 ECharts、找地图 GeoJSON、调 CORS、对接气象 API……半天起步。而这次，我全程只做了一件事：把需求用自然语言告诉 WorkBuddy（底层正是刚发布的腾讯混元 Hy3 模型），让它替我写代码、调样式、修 bug、跑验证。
下面是这台「台风实时监测仪」从一行需求到可运行产品的真实过程。
📸 截图于 2026-07-15，面板显示第9号台风「巴威」(2609) 已停编路径，右上角四台风芯片(巴威/海神/美莎克/米克拉)同屏。状态标签「◼ 已停编」+ 数据年龄「19小时前」
二、第一步：一句话搭出骨架
我的原始需求（直接丢给 WorkBuddy）：
用 Vue3 + ECharts 做一个台风路径实时追踪网页，能显示活跃台风位置、过去 24h 路径、未来预测路径和概率锥，5 分钟自动刷新，深色海洋背景 + 渐变路径 + 动画台风点 + 时间轴滑块。
WorkBuddy 直接产出了一套可运行的 Vue3 单页应用。但这里踩到了第一个坑——
坑 1：CDN 不可达。 默认用公共 CDN 引 Vue/ECharts，离线或网络受限时整页白屏。 解决： 把 vue.prod.js、echarts.min.js 下载到本地，并写了一个 node 脚本把世界地图 GeoJSON（world.geo.js）一起内联进单个 HTML。最终交付物是一个 2.2MB 的 typhoon-tracker.html——双击即用，零网络依赖。
这一步让我意识到：WorkBuddy 不只是「生成代码」，它还能根据运行环境主动选择工程化方案（本地内联而非依赖 CDN），这是有经验的工程师才会做的判断。
三、第二步：接入真实数据
骨架有了，但一开始显示的是演示数据。我要的是真实的台风。
WorkBuddy 帮我调研并锁定了数据源：中央气象台 nmc.cn 的免费接口（免密钥、开启 CORS、支持 HTTPS）：
-
list_default—— 获取当前台风列表（含 id、名称、编号、状态） -
view_{id}—— 获取单个台风的完整路径点（历史 + CMA 预报）
坑 2：JSONP 双括号解析失败。 nmc.cn 返回的是 callback(({...})) 这种双层括号包裹的格式，常规 JSON.parse 会失败，导致永远回退到演示数据。 解决： 写了一个鲁棒的解析器，抓「第一个 {/[」到「最后一个 }/]」之间的内容再 JSON.parse，并兼容单/双括号。同时修复了「选台风逻辑」——优先选 start（活跃）状态，全部停编时选观测时间最新的那一个，避免拿到过旧的数据。
顺带一提，我还设计了三级数据回退：中央气象台 nmc.cn → 美国 NHC（经 CORS 代理）→ 内置演示数据。任何一层挂了，面板都不会白屏。
四、第三步：反复打磨交互（最见功力的部分）
骨架 + 真实数据跑通后，真正的「产品感」来自一轮轮打磨。这部分 WorkBuddy 的迭代能力体现得最充分——我每次只说一句「哪里不对」，它就定位 + 修复 + 重建 + 截图验证。
1. 地图空白 Bug
一度所有数据正常、信息面板有内容，但地图画布全白。WorkBuddy 用无头浏览器做 DOM 级诊断，发现根因：#chart 的两条 CSS 规则互相覆盖，导致 ECharts 的 canvas 高度塌陷为 0。
诊断输出：
canvasW: 1366 ✅ / canvasH: 0 ❌→ 修复后canvasH: 791 ✅
这种「数据对了但画不出来」的玄学 bug，靠人眼很难定位，但让 WorkBuddy 跑一个诊断脚本，两分钟就锁死了。
2. 城市标注：从「太稀」到「太密」再到「刚好」
-
第一版只标了 24 个城市，太空；
-
我让它「像中国天气网那样把主要城市都标出来」，它一度扩充到 214 个，又太密；
-
最终方案是按行政级别分级：默认只显示约 20 个核心节点（北京、上海、广州、东京、马尼拉等），放大到 5× 才渐进显示全部 214 个，并用
hideOverlap自动避让重叠。
3. 陆地美化：从「死黑一片」到「地形层次」
原来陆地是纯色 #0b2236，和海洋区分度低。WorkBuddy 基于每个国家的 centroid 纬度做了分层设色（landColor(lat)），低纬偏青绿、高纬偏冷蓝，像真实的地形/气候带图；再加台风活跃区的径向高光和更淡的经纬网，整体立刻「专业地图」了起来。
4. 状态透明度：为什么不是「实时」？
有次我发现「坐标时刻」停在昨天。WorkBuddy 诊断 nmc.cn 后发现：当时根本没有活跃台风，12 个全是已停编（status:stop）。它没简单甩锅，而是加了三处透明化设计：
-
台风状态标签：
● 实时追踪（绿）/◼ 已停编（橙）/◎ 演示模式（紫） -
数据年龄：
观测时刻：2026-07-14 19:00（14小时前） -
选台逻辑自动挑「观测时间最新」的停编台风，而非 id 最大但更旧的
这一改，用户看到旧数据也不会困惑——界面自己说清楚了自己为什么不是实时的。
5. 多台风同屏
我后来问：「海神和巴威要同时显示吗？」WorkBuddy 直接把单台风模型重构为 typhoons[] 数组：并行拉取前 8 个候选，按末次观测排序取最新 4 个，每个台风独立配色（8 色调色板循环），面板顶部加可点击的切换 chips。
6. 时间轴真正回放
原来时间轴滑块只是「摆设」——拖动时地图上的大点不动，面板数字也不变。WorkBuddy 重构了整个数据流：
-
新增
replay计算属性，取track[playhead]实时算出当前点的位置/风速/气压/移动方向速度/最近城市 -
新增
updateReplayMarker()轻量更新 ECharts 大点坐标（不重绘整张图，性能友好） -
面板全部指标改为跟随
replay：拖一下滑块，大点沿轨迹走、风速跟着变、「预测」标签在预报段才亮 -
默认停在最后一个真实观测点（不是预报末点），避免一打开就看到未来数据
效果就像视频进度条——拖到哪，台风就走到哪。
五、第四步：视觉降噪
多台风全画概率锥 + 动画时，画面又「乱」了。WorkBuddy 做了一次「视觉降噪」：
| 元素 | 降噪前 | 降噪后 |
| 台风数 | 6 个全画全套 | 4 个，聚焦 1 个完整、其余弱化成「幽灵路径」 |
| 非聚焦台风 | 概率锥 + 粗线 + 动画 | 仅细淡路径 + 小点 + 名称字 |
| 城市 | 默认 50 个挤一起 | ~20 个核心节点，5× 才显全部 |
| 经纬网 / chips | 偏重 | 更淡、更紧凑 |
六、核心能力一览
最终产品具备：
-
✅ 时间轴回放：拖动即走，大点沿轨迹移动，面板指标实时跟随（风速/气压/位置/移动方向）
-
✅ 多台风同屏：最多 4 个，独立配色、一键切换聚焦
-
✅ 真实数据：中央气象台 nmc.cn，含历史路径 + CMA 未来预报 + 概率锥
-
✅ 三级回退：nmc.cn → NHC → 演示，永不白屏
-
✅ 演示模式醒目横幅：琥珀色呼吸横幅，一眼区分真实与演示数据
-
✅ 陆地分层 + 城市分级：专业地图观感，疏密有致
-
✅ 状态透明：活跃/停编/演示 + 数据年龄一目了然
-
✅ 5 分钟自动刷新 + 倒计时(m:ss)：加载态 spinner，交互完整
-
✅ 图例配色一致：色块 = 线条身份色，不再用强度色阶误导
-
✅ 单文件零依赖：双击即用，可离线、可部署
七、立即体验
👉 在线 Demo：点击这里，打开可交互的台风追踪器
打开后即可：
-
🎮 拖动时间轴看台风沿轨迹回放，面板指标实时跟随
-
🔀 点击右上角芯片切换多台风聚焦
-
📊 查看实时路径 + CMA 预报 + 概率锥
-
⏱️ 观察每 5 分钟自动刷新（倒计时显示）
无需安装任何东西，浏览器直接打开。
(注：Demo 连接中央气象台 nmc.cn 接口；若当前无活跃台风会自动进入带醒目标识的演示模式)
八、用 WorkBuddy 的真实体验
作为全程只动嘴（和偶尔读代码确认）的「产品经理 + 验证官」，我的真实感受：
-
它真的会跑验证。 每次改动不是「我觉得改好了」，而是用无头浏览器截图、读 DOM、查 console 错误，零 JS 错误才交付。这比很多人类实习生都稳。
-
它能在合适层级做工程决策。 该内联就内联、该加回退就加回退、该做诊断就做诊断——不是机械执行指令，而是在「交付一个能跑的东西」这个目标下自己补位。
-
迭代极顺。 「地图空白」「太密了」「太乱了」这种模糊反馈，它能精准定位 CSS 覆盖、数据阈值、视觉噪音等根因，且全程零环境配置——我不需要自己装 node、配构建。
而这次最让我惊喜的是——驱动这一切的，是 WorkBuddy 刚接入的腾讯混元 Hy3 模型。它在任务规划、长文本处理和多工具调用上明显加力，尤其前端 Coding 表现突出：从「说清需求」到「跑出能用的结果」，中间少了很多来回解释和手动修补。这篇征文的代码、截图、甚至文字润色，也都是 Hy3 在本地一气呵成的。
对一个想快速把想法落成可用产品、又不想被脚手架和环境折磨的开发者来说，WorkBuddy + Hy3 是那种「你说需求，它给结果，你只管验收」的搭档。
九、结语
从一行「帮我做个台风追踪网页」，到一个能接真实数据、多台风同屏、时间轴回放、视觉清爽、可离线运行的监测仪，整个过程我没有打开过一次 IDE 配环境。这就是我理解的「从 0 到 1」——不是从空文件写起，而是从一个想法到一件能用的东西，中间最费劲的活都交给了会干活的 AI 搭档。
👉 现在就能玩：在线 Demo 已部署，拖时间轴、切台风、看预报——全都可以交互。
如果你也想试试，直接把需求丢给 WorkBuddy（切到混元 Hy3 模型），然后像我一样，做个「只验收不写码」的甩手掌柜就行。
🔥 顺手薅个羊毛：混元 Hy3 正在 限时两周免费体验（7 月 6 日 – 7 月 22 日 23:59），打开 WorkBuddy 在模型列表切到 Hy3 即可白嫖，免费期内消耗倍率 0×、不扣额度。同期还有「腾讯混元 Hy3 超能力挑战赛」（Coding / Agent 双赛道，投稿至 7 月 22 日）——用 Hy3 做个能跑的作品去投稿，说不定顺手把奖品也拿了。
本文配套代码与截图均由 WorkBuddy 在本地环境生成；台风数据来自中央气象台 nmc.cn 公开接口。
