消费天气记账：把每笔花销变成天气预报，月底超支一眼预警

记账最无聊的地方是记完还是没概念。这个单文件网页把“花多少钱”翻译成“今天是什么天气”：花得少是晴天，花多了下小雨，严重超支就暴雨预警。它还能按已过天数的日均为你预测月底总花销。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。

这个工具做什么

它把记账做成了“看天气”的直觉体验：

消费天气：按“当日支出 ÷ 本月日均预算”映射为晴夜、晴天、多云、小雨、中雨、大雨、暴雨，一眼看懂今天花得狠不狠。
预算健康度：顶部进度条 + 天气等级显示，背景天空会随健康度从晴朗蓝渐变到暴风雨，超支时还有雨滴动画。
月视图日历：每天一格显示天气图标和金额，点击某天就能查看或补记当天的记录。
分类占比：Canvas 手绘环形图覆盖 8 大分类（餐饮/交通/购物/娱乐/居住/医疗/教育/其他）。
未来预测：基于已过天数的日均支出，预测本月总花销、剩余天数和是否会超支。
本地保存：数据写进 localStorage，刷新不丢；响应式布局，手机单列、电脑双列。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 的底部输入框提示「尽管吩咐，我来帮你搞定」：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个「消费天气」记账小应用：用天气来比喻每月花销，输入每天支出后自动生成晴、多云、小雨、暴雨等天气状态，给出本月预算健康度、分类支出占比和未来花销预测，支持本地保存和月视图，界面可爱有创意，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，生成一个公网可访问的分享链接，并告诉我访问地址。

这轮码道具体做了什么

不是把通用 AI 能力复述一遍，而是它在这篇项目里的实际动作：

检测到当前环境是直接工作目录（非独立自定义沙箱），在 /workspace/weather-expense-app 下新建项目。
发现 PYTHONHOME 指向了码道自带的 python3.12 导致命令异常，清掉环境变量后改用 /usr/bin/python3.9 正确执行。
检测到 3004 端口空闲，写入约 30KB 的单文件 index.html（纯原生 HTML/CSS/JS，零依赖）。
用 python3.9 -m http.server 3004 起静态服务，再通过 DevBridge 创建隧道并把 3004 端口发布成 8 小时有效的公网 HTTPS 链接，最后 curl 自检确认内容包含应用标题。

这次实际生成的临时公网地址（8 小时有效）：
https://na7g7pea-3004.cn-north-4-bridge.myhuaweicloud.com/

这个地址是 DevBridge 生成的临时部署入口，适合演示和验收，不适合作为长期访问地址；到期后读者可以按后面的「直接下载试玩」把 index.html 下载到本地打开。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 用比例把“钱”翻译成“天气”

weather(ratio) 接收“当天支出 ÷ 日均预算”，按比例落到七档天气。同一个函数既用于今日消费天气，也用于月视图和预测趋势：

function weather(ratio){
  if(ratio<=0) return {icon:"🌙",name:"晴夜",desc:"今天没花钱，月光宝盒！",level:0};
  if(ratio<=0.5) return {icon:"☀️",name:"晴天",desc:"花得很少，阳光明媚~",level:1};
  if(ratio<=1.0) return {icon:"⛅",name:"多云",desc:"正常开销，云淡风轻",level:2};
  if(ratio<=1.5) return {icon:"🌦️",name:"小雨",desc:"略高于平均，飘点小雨",level:3};
  if(ratio<=2.0) return {icon:"🌧️",name:"中雨",desc:"花得有点多，记得带伞",level:4};
  if(ratio<=3.0) return {icon:"🌧️",name:"大雨",desc:"开销偏大，注意控制哦",level:5};
  return {icon:"⛈️",name:"暴雨",desc:"严重超支，暴风雨预警！",level:6};
}

2. 预算健康度带动背景和提示语

healthStatus() 根据“已花 ÷ 预算”的百分比，返回不同健康等级、颜色和天空渐变。超支时背景会变暗并触发雨滴动画：

function healthStatus(used,budget){
  var p = budget>0 ? used/budget*100 : (used>0?999:0);
  if(p<50) return {p:p,icon:"☀️",lvl:"晴朗健康",color:"#34c759",desc:"预算充裕，继续保持这股清流~",bg:"linear-gradient(160deg,#aee4ff 0%,#7cc8ff 45%,#cfeaff 100%)"};
  if(p<75) return {p:p,icon:"⛅",lvl:"多云良好",color:"#9be15d",desc:"节奏不错，云朵悠闲飘过~",bg:"linear-gradient(160deg,#bfe0ff 0%,#9fc8e8 50%,#dfeaf5 100%)"};
  if(p<90) return {p:p,icon:"🌦️",lvl:"小雨注意",color:"#ffcc00",desc:"接近预算线，开始留意啦",bg:"linear-gradient(160deg,#cfd8e8 0%,#aeb8c8 55%,#e0e6f0 100%)"};
  if(p<=100) return {p:p,icon:"🌧️",lvl:"阴雨警告",color:"#ff9500",desc:"预算即将用完，收紧口袋",bg:"linear-gradient(160deg,#b8c0d0 0%,#8893a8 60%,#d0d8e6 100%)"};
  return {p:p,icon:"⛈️",lvl:"暴雨超支",color:"#ff3b30",desc:"已经超出预算，赶紧止损！",bg:"linear-gradient(160deg,#7a8499 0%,#5a6478 60%,#9aa4b8 100%)"};
}

3. 用已过天数的日均预测整月花销

renderForecast() 只统计“本月已过天数”的记录：日均支出 = 已花 ÷ 已过天数，再乘剩余天数得到预计剩余花销，从而预测月底总花销和是否超支：

var avgDaily = used/passedDays;
var remainDays = Math.max(0, dim-passedDays);
var predictedRemain = avgDaily*remainDays;
var predictedTotal = used+predictedRemain;
var over = predictedTotal>state.budget;
var w = weather(avgDaily/(state.budget>0?state.budget/dim:1));

4. Canvas 手绘分类环形图

分类占比没有引入图表库，直接用 Canvas 画环：每类按金额占比例画出圆弧，再用 destination-out 挖出中心孔：

var start=-Math.PI/2;
for(var i=0;i<arr.length;i++){
  var ang=arr[i].total/total*Math.PI*2;
  ctx.beginPath(); ctx.moveTo(cx,cy);
  ctx.arc(cx,cy,R,start,start+ang); ctx.closePath();
  ctx.fillStyle=arr[i].color; ctx.fill();
  start+=ang;
}
ctx.globalCompositeOperation="destination-out";
ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.fill();
ctx.globalCompositeOperation="source-over";

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。后续进入发布流程时，会把源码同步到公开 Demo Park 仓库，方便直接复制：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-budget-weather

总结

消费天气把这轮“记账后仍不知道月底会不会超支”的问题，用一个天气比喻讲清楚：比例决定天气、天气带动背景和提示、已过天数的日均决定预测。技术上主要练习了数据处理与渲染分离、Canvas 绘图、localStorage 持久化和响应式月历几处，后续还可以加上图表导出、多个预算账户或年度统计。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-09-03 11:59 新科技观察员阅读(13) 评论(0) 收藏举报

刷新页面返回顶部