很多同学跟着教程搭完一套架构（ECS + RDS + OBS + ELB），月底看到账单才发现成本超出预期——计费项分散在各产品文档里，架构图好画、成本难估。于是我做了 CloudCost：一个零依赖纯前端的华为云架构成本模拟器，像搭积木一样选资源，实时看到月度成本与占比。一、技术选型：为什么坚持零依赖React/Vue + Vite 生态成熟，但作品提交要带构建产物；Chart.js 画图漂亮，但 CDN 断网即白屏。我选了原生 HTML/CSS/JS：能被任何浏览器直接打开的东西，永远不会过时。图表用 SVG 手写，反而获得了完全的样式控制权。全项目 3 个文件约 13KB。二、核心实现拆解1. 数据模型：目录 + 行。CATALOG 是菜单（6 大服务线 13 个规格含单价），rows 是购物车。月成本 = Σ 单价 × 数量，一个 reduce 就完事，天然没有状态同步难题。2. SVG 环形图：利用圆周长公式 C = 2πr，每段弧用 stroke-dasharray 的实线段 + 空段表示，stroke-dashoffset 逐段累加实现首尾相接，配合 rotate(-90°) 让起点指向 12 点方向。十几行代码，效果不输图表库。3. 数据持久化与迁移：localStorage 每次变更即存档；导出用 Blob + a.download 三行落盘；导入用 FileReader 读回后做字段白名单校验（service/spec 必须在目录里，数量 clamp 到 1~99999），脏数据不会搞崩界面。4. 体验细节：sticky 汇总面板、空态文案、删除按钮用 ✕ 字符（不依赖字体图标）、响应式三栏布局移动端自动折叠。三、部署作品部署在华为云开发者沙箱：nginx 静态服务 8080 + DevBridge 隧道映射公网 HTTPS。进阶路线是托管到 OBS 静态网站（桶公共读 + 网站托管），沙箱适合演示期，OBS 适合长期展示。已发布到开发者作品展览馆。四、写在最后这个项目给我的最大启发是：约束是创意的朋友。不用任何依赖这条约束，逼着我读完了 SVG dash 相关文档、想清楚了最小状态模型，最后换来一个 13KB、拷到 U 盘也能跑的作品。源码开放在 GitCode（gamespark/cloudcost），欢迎提 issue。单价为演示用示例刊例价，仅供架构规划参考。