本金、年利率、期限、复利频率填进去，到期能拿多少、里面有多少是利息、几年能翻倍，一眼看全；再打开「每月定投」，还能看「本金 + 定投」滚雪球滚到多少。折线图把资产增长画出来，比干看数字直观。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。
这个工具做什么
它把一个理财里最常手算的「复利」问题做成了交互页面：
- 复利频率可选：按年 / 按半年 / 按季 / 按月 / 按天，期限支持按年或按月填。
- 三大结果：到期本息总额、利息收益、本金翻倍所需时间。
- 每月定投：打开开关补一个每月追加金额，按「月末投入」逐月模拟。
- 构成拆解：结果下面标清楚「含本金多少」，利息占总回报的百分比。
- SVG 折线图：把资产增长和总投入成本两条线画出来，利息就是两条线的间距。
- 输入校验：本金/利率/期限非法时给出明确提示，不静默算错。
码道开通（免费体验版）
开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：
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 输入框粘贴以下需求，回车发送：
开发一个「复利计算器」网页应用：输入本金、年利率、投资期限（支持年/月）和复利频率（按年/按半年/按季/按月/按天），即可计算到期本息总额、利息收益和本金翻倍所需时间；支持每月定期追加投入；结果用大数字卡片展示，并拆解本金/利息构成；界面简洁美观，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。这轮码道具体做了什么
不是复述通用 AI 能力，而是它在这篇项目里的实际动作：
- 先探测环境，发现
PYTHONHOME污染的 python3 用不了，改用绝对路径/usr/bin/python3并env -u PYTHONHOME -u PYTHONPATH清理后找到空闲端口3003。 - 创建
/workspace/compound-calculator，写出单文件index.html（约 390 行），把样式、逻辑、SVG 图表全部内联。 - 用
python3 -m http.server 3003 --bind 0.0.0.0后台起服务，curl自检 HTTP 200，拼出内部访问地址。
代码亮点
以下是index.html里值得关注的设计思路和实现细节。
1. 复利增长 + 按月定投模拟
单笔金额按amount × (1 + r/n)^(n×y)增长；定投场景用一个循环逐月「先增长、再月末追加」，每年打一个快照用于画图：
constgrow=(amount,y)=>{if(r===0)returnamount;returnamount*Math.pow(1+r/n,n*y);};letbalance=P;constyearly=[{year:0,value:P,cost:P}];for(letm=1;m<=totalMonths;m++){balance=grow(balance,1/12);// 当月增长balance+=PMT;// 月末追加投入if(m%12===0||m===totalMonths){yearly.push({year:m/12,value:balance,cost:P+PMT*m});}}2. 本金翻倍时间：对数公式直接算
纯复利下翻倍年数用ln(2) / (n × ln(1 + r/n))；含定投时没有闭式解，就逐月模拟直到资产达到 2 倍初始本金：
letdoubleYears;if(r>0){doubleYears=Math.log(2)/(n*Math.log(1+r/n));}else{doubleYears=Infinity;}letdoubleWithAdd=null;if(PMT>0){letb=P;for(letm=1;m<=totalMonths*4;m++){b=grow(b,1/12);b+=PMT;if(b>=2*P){doubleWithAdd=m/12;break;}}}3. 输入校验：算之前先拦住脏数据
本金、利率、期限三个值分别检查非法或负数，命中就亮错误提示并直接返回，避免静默输出 NaN：
if(isNaN(P)||P<0){err.textContent='请输入有效的本金';err.classList.add('show');return;}if(isNaN(r)||r<0){err.textContent='请输入有效的年利率';err.classList.add('show');return;}if(isNaN(termVal)||termVal<=0){err.textContent='请输入有效的投资期限';err.classList.add('show');return;}4. SVG 折线图：手写坐标系不用图表库
图表用原生 SVG 元素动态生成，先算maxV定 Y 轴上限，再画网格线和 Y 轴标签，最后把资产、成本两条折线连起来：
constmaxV=Math.max(...data.map(d=>d.value),costEnd)*1.05;constX=y=>padL+(xMax>0?y/xMax:0)*cw;constY=v=>padT+ch-(v-minV)/(maxV-minV)*ch;直接下载试玩
本次生成的项目就是单文件index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：
- Demo Park 仓库：https://atomgit.com/deli007/demo_park
- 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-interest-calculator
总结
复利计算器把「本金、利率、期限、频率、定投」这五个变量收敛到一个页面：单笔复利用幂函数算，定投场景逐月模拟打快照，翻倍时间能公式就公式、不能就模拟，再用手写 SVG 折线图把增长画出来。后续还可以加复利频率的更多档位、通胀折现或「通胀调整后的真实收益率」。
如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
