CS3331 第一次作业：校园消费记账 GUI

1. 选题与实现

这次作业我选择了个人校园消费记账 GUI，目标是记录生活费收支、查看分类统计，并通过月度预算了解支出情况。开发使用 Codex 协作完成，程序采用 Python、NiceGUI 和 SQLite，运行后通过本机浏览器访问。

目前实现了收支记录的新增、编辑、删除，月度收支汇总、分类与每日支出统计，以及月度预算和站内记账提醒。界面分为总览、账目、统计、提醒四个页面，并适配移动端窗口。每日提醒需要程序保持运行。

2. 迭代记录

第一轮：明确预算提醒的含义

我给 AI 的修改要求： 显示预算预计消耗速度和当前消耗速度，据此区分普通提示与警示；计算方法的说明放在月度预算中，预算警示也移入月度预算组件。

AI 实际改动： 预算卡片增加了两项日均金额。预算预计速度按月预算除以当月天数计算；当前速度按累计支出除以已过天数计算，历史月份按整月计算。当前速度超过预计速度时显示警示；没有超过预计速度、预算使用达到 80% 时显示普通提示。相关说明放进标题旁的 tooltip，预算提示集中显示在卡片内。

第二轮：调整移动端界面

我给 AI 的修改要求： 把移动端底栏改成浮动样式，并增大组件圆角。

AI 实际改动： 移动端导航改成底部居中的悬浮样式，四个按钮等宽；卡片、按钮、输入框和菜单的圆角统一增大，并给页面底部预留空间。开发记录中检查了 577×770 和 390×844 两种窗口尺寸下的布局。

第三轮：补充端到端测试

我给 AI 的修改要求： 给完整记账流程、非法金额和预算提醒增加浏览器端到端测试，并保存实际运行结果。

AI 实际改动： 添加了 pytest 与 Playwright 测试，通过 Chromium 操作真实应用，并核对界面、SQLite 数据和服务日志。测试中发现删除记录后成功提示触发服务器异常，随后修复了提示与页面刷新的执行顺序，并补充相应检查。

3. 我如何确认结果正确

我要求验证具体操作产生的结果。AI 先实际操作浏览器检查表单，再把验证流程保存成可以重复运行的测试。金额和提示的预期值提前确定，运行后同时检查界面与数据库；测试使用独立数据库，应用日期固定为 2026-10-10。

测试	操作与预期结果	实际结果
记账完整流程	新增 12.50、7.50 元两笔支出，合计 20.00 元；第一笔改成 15.00 元，合计 22.50 元；删除第二笔，合计 15.00 元；刷新后仍保留。	通过；界面金额与数据库记录一致，删除成功提示可见。
非法金额	输入 -1 或 1.234，显示金额错误，已有记录不变。	通过；弹窗保持打开，数据库没有新增或改变记录。
预算提醒	历史月份预算 1000 元、支出 800 元，显示普通提示；当前月预算 1000 元、支出 990 元，显示超速警示。	通过；日均金额、提示颜色和预算卡片内的位置符合预期。

预算警示样例的预期值可以直接核对：10 月有 31 天，1000÷31≈32.26 元/天；固定日期为 10 月 10 日，990÷10=99.00 元/天；按此速度估算全月支出为 99×31=3069.00 元。界面显示与这些计算一致。

修复后的测试日志：

test_record_lifecycle[chromium] PASSED
test_invalid_amounts[chromium] PASSED
test_budget_messages[chromium] PASSED
3 passed in 13.25s

重跑命令：

sh test-e2e.sh

4. 协作心得

这次最大的意外是，删除记录后数据和页面金额都正确，服务日志仍然出现异常：页面刷新先移除了确认弹窗所属的父元素，后续发送成功提示时无法访问原来的上下文。AI 把提示移到刷新之前，并增加了日志检查，修复后测试全部通过。

这让我认识到，验证除了检查显示结果，还要检查操作之后的错误日志。AI 能快速完成修改和测试，但修改要求需要明确到具体组件，预期结果也需要具体到金额、提示和数据变化。对这次作业而言，保留修改要求、实际改动和测试证据，更容易说明每轮协作完成了什么。