从一张静态页到 30 分钟自动刷新的新加坡旅行仪表盘

一句话说清作品

「新加坡旅行仪表盘」是一个全栈应用：滨海湾夜景头图叠加实时天气，24 小时逐小时预报、未来 7 天预报、按实时降雨概率生成的行程建议、新元兑人民币汇率换算器、可增删勾选的打包清单，天气与汇率每 30 分钟自动刷新。源代码在 GitCode 公开仓库，2026-10-26 当天建成、当天进仓库、当天发小红书并通过审核。

起点：先给了一张静态页

2026-10-26 上午，用户说本周末（10 月 31 日周六至 11 月 1 日周日）去新加坡。我先给了一张静态网页仪表盘，10:44 送达：到周末的实时倒计时是活的，但天气和行程是当天从天气预报网站查到的预报快照——周六 31°/27°、上午阵雨概率 40%，周日 32°/27°、放晴，两天紫外线均为 11 级极强；按天气排了行程（周六上午花穹／云雾林躲雨、晚上超级树灯光秀，周日放晴去圣淘沙），还附了落地速览（无时差、免签 30 天、SG Arrival Card、汇率粗算、MRT 刷卡）、必吃清单和按天气准备的行前打包清单。送达时就写明了：天气是快照，临出发前再看最新预报。

转折：用户一句话，把“实时”变成了硬需求

用户接着问：仪表盘数据是否实时更新？我如实澄清：静态页不会自己刷新，只有倒计是活的，活动与天气都是构建时的快照。用户随即提了四个要求：改成应用、标题不要搞成“周末”、每 30 分钟能实时刷新、代码提交到仓库、还要发小红书。这四个要求直接定了重做的方向——不是在静态页上打补丁，而是重做成一个会自己刷新的全栈应用。

重做：全栈应用，11:11 验证通过

重做的全栈应用当天 11:11 建成并验证通过，标题不带“周末”。结构是前端 React 19 + Tailwind CSS 4 + Recharts，服务端 Bun + Drizzle ORM，Bun 做包管理，代码 23 个文件。内容按重做要求逐项落地：

• 滨海湾夜景头图，叠加实时气温、体感、湿度、新加坡当地时钟和距 10 月 31 日出发的倒计时；
• 24 小时逐小时预报、未来 7 天预报（10/31、11/1 两个行程日已标出）；
• 按实时降雨概率自动生成的两天行程建议；
• 新元兑人民币实时汇率换算器；
• 滨海湾花园、圣淘沙、麦士威熟食中心三张图卡，覆盖行程日期的 6 个活动（带来源链接）；
• 落地速览、可增删勾选的打包清单。

数据为真·实时：天气来自 Open-Meteo，汇率来自 ExchangeRate-API。页面显示“数据更新于”时间并有“立即刷新”按钮；每 30 分钟自动刷新的定时任务已启用（下一次 11:38），打开页面时缓存超过 30 分钟也会自动更新。实测刷新返回真实数据：当前 26°C、体感 32.5°C，10/31 阵雨 22.4–31°C、降雨概率 85%，1 新元 = 5.2233 人民币。

审查里真出过的一个 bug

审查中出现过一次 /actions 500：打包清单首次写入时的并发竞态。改法是改为原子占位加等待逻辑，改完复审通过。最终审查 pass：无 console 错误、图片 4/4 通过、手机端无页面级横向溢出。这个 bug 的位置很典型——多写入口的首次写入最容易出竞态，事后修补不如一开始就用原子操作。

代码进仓库：23 个文件，26 次提交

代码整理到本地暂存目录，只取应用源码（client/src、server/src、drizzle 迁移、package.json 等）并补写 README.md；不含 hosted 版的用户数据（如打包清单的勾选状态）、构建产物与内部文件。GitCode 新建公开仓库 singapore-travel-dashboard（账号 newhacker），23 个文件全部按原目录结构上传并逐目录核对无误，最终提交 26 次。中间有个小波折：保存的登录在创建仓库时被拒，重存登录后继续完成创建。

发小红书：文案先定稿，配图不是截图

仓库完成后起草文案请用户定稿：标题「新加坡旅行仪表盘，天气行程实时刷」（16 字）；正文只写功能介绍加每 30 分钟自动刷新，不放外链、仓库名仅以文字提及——这是沿用连连看删外链过审的经验；正文不写具体日期，行程有变也不受影响；标签 #新加坡旅行 #旅行仪表盘 #自由行。用户回“好”确认定稿。配图 3 张均为生成的宣传图、非实机截图，顺序为滨海湾夜景封面、雨后娘惹老屋街道、旅行行李平铺图。10 月 26 日 15:51 提交发布，当日确认已通过审核、公开可见。

复盘：三点经验

第一，先给快照再谈实时。静态页先行验证了信息结构（天气＋行程＋落地＋打包），用户一个问题就把“实时”变成了硬需求——需求是被用出来的，不是开头就定死的。

第二，实时要让人看得见。光后台刷新不够，页显“数据更新于”时间、“立即刷新”按钮、打开时缓存过期自动更新，三处一起才算“实时可信”。

第三，清单写入的并发问题提醒：多写入口的首次写入最容易出竞态，原子占位加等待比事后修补便宜；终审要覆盖手机端溢出和图片加载，不能只看桌面端。