记账功能开发 - 账目记录与明细管理
大家好，这节课呢，我们继续往下开发账务记录模块。
这个模块呢，其实包含了我们界面上的”记账”和”明细”两个页面的功能。
核心功能模块
这个功能是我们记账软件的核心功能，它依赖分类和账本，我们在前面已经开发完成了。
功能模块说明
我们接下来看一下它下面有哪些具体的功能模块：
- 记一笔账 - 记账页面的记账功能，页面上有一个记账的按钮，点击之后会弹出来一个表单给我们去填写
- 账目列表 - 明细页面，包含账目的详情，以及可以编辑和删除账目
创建 Quest 任务
我们已经启动好了项目，并且已经登录了记账软件，那么接下来就直接开始开发。
新建任务
打开左侧的 Quest，然后点击”新建任务”。
我们需要先把需求文档给添加进来。
编写提示词
然后我们来写一下提示词：
这个需求文档是按照从上往下的顺序开发的。
现在开发到了第 4 项：账目记录模块，
并且这个模块前面的功能已经开发好了。
根据需求文档中已有的设计，做一个详细的设计，
然后完成这个模块的功能开发。关于提示词
我们在使用 Quest 模式的时候，提示词写的都比较简单，因为我们详细的需求已经在文档里面列出来了。
文档里面有比较详细的信息，所以我们不需要写太复杂的提示词，只需要把我们的需求告诉他就行了，然后由 Quest 模式来帮我们设计一个详细的开发文档。
写好提示词，然后回车。
查看设计文档
现在开发文档已经设计好了，我们简单的来过一下：
- 模块概述
- 数据模型设计 - 包含详细的字段信息
- 接口设计 - 包括接口的请求参数、校验信息、响应的数据结构
- 流程图 - 整个记账的流程、账目列表查询的流程、账目编辑的流程
- 前端界面设计 - 记账页面、明细页面、编辑页面的页面结构、交互要点、状态管理等
- 后端设计 - 字段设计、业务逻辑设计
- 检查项 - 数据安全、功能完整性、性能指标、兼容性、用户体验
我们点击”采纳”。
开始任务
采纳之后，直接”开始任务”。
我们可以先开始任务，等它完成之后，我们再去检查一下，如果功能有缺陷的话，然后我们再让 AI 调整就行了。
处理报错问题
我们来看一下，现在 AI 提示我们已经完成了开发，并且给了总结验证，然后以及有 14 个文件的变更。
但是我们看到右侧软件的界面上有报错。
第一次报错
重启项目
我们先重启一下项目，看一下报错还是否存在。
这里提示端口被占用，应该是我们没有完全关闭项目，然后再次重启。
我发现服务端已经启动成功了，但是客户端启动的时候有报错。
使用 AI 解决
我们先点击”接受”，然后把报错信息发给 AI，让 AI 来帮我们解决报错信息。
打开侧边的 AI 对话框，然后新建一个对话。
我们在资源管理器中找到刚才给我们生成的这个 Quest 的文档，就是这个 account-record-model-design-and-development，然后我们把它添加到上下文。
描述问题
然后描述一下当前的报错信息：
我用 Quest 模式生成了这个开发文档，
开发完成之后，启动客户端，界面上和控制台都有报错。
报错信息如下：
[复制的报错信息]
分析一下报错原因并且解决。控制台的这个报错其实和界面上的应该是一样的，并且这里有重复的报错，我们直接复制其中的一个就行。
然后直接回车。
第二次报错
AI 现在提示我们问题已经修复完成，并且把原因列了出来，然后告诉了我们解决方案。
然后说 Vite 应该会自动热更新，如果没有热更新的话，可以重启客户端开发服务器，错误应该已经消失了。
重启测试
那我们就来重启一下，按 Ctrl + C 关闭服务，我们把客户端、服务端都关掉。
然后找到”运行和调试”，然后”一键启动服务端和客户端”。
重启之后，好像又有了新的报错。
继续调试
然后我们仍然是把报错信息发给 AI：
我重启了一下，发现仍然有报错。
报错信息如下：
[报错信息]然后直接回车。
问题解决
我们来看一下，这里提示我们已经修复完成了，并且已经修复了所有存在重复代码问题的文件。
问题的根本原因是开发过程中，这些文件代码被意外的完整的复制了一遍，导致所有导出的符号被重复声明了。
现在重新启动客户端，应该不会再有报错了。
那我们再重新启动一下，我们先把客户端给停掉，服务端也一起停掉，重新启动吧。
问题解决
重启之后，我们看到明细的页面已经正常显示出来了。
功能测试
明细页面
然后最上方是一个账本切换的功能，默认是”测试账本2”。这个默认的账本是我们在账本管理中去设置的。
然后下方可以选择本周、本月和本年的维度来查看，默认是选择了本月。
然后目前是还没有账目，因为我们还没有去记账。
记账功能
然后我们看一下记账的功能。
记账功能打开之后，最上方也是一个切换账本的功能，点击可以切换成”测试账本1”或者是”测试账本2”。
然后再往下可以切换记账的类型，可以切换支出还是收入。
然后再往下是：
- 输入金额
- 分类
- 日期
- 输入备注
记录支出
我们现在来记一笔账试一下。
记录第一笔支出
我们首先记一笔支出吧，比如说记 25 元，选择”购物”。
然后日期我们就用默认的 1 月 4 号，备注我们随便写一个”买东西”，然后点击”保存”。
这时候提示记账成功，我们进入到明细界面看一下。
明细界面已经有了这条数据，然后点进去，点进去是账目的详情。
然后上方显示金额，然后分类、所属的账本、日期、备注以及创建时间。
记录收入
我们再回到记账界面，再记一条收入。
比如我们记一个 3000 块钱，然后选择”工资”。
然后日期就选择 1 月 4 号，假设是 1 月 4 号发工资，然后备注就显示”工资”，点击”保存”。
然后提示记账成功，我们再进入到明细界面看一下。
然后工资的这笔收入也已经记录下来了，再点进去，点进去还有个编辑功能和删除功能。
编辑功能
我们先试一下编辑。
点击”编辑”，把它改成 3500，然后选择”奖金”。
日期我们就不改了，然后”工资”改成”年终奖”，点击”保存修改”。
保存成功之后，然后自动回到了账目详情的界面，并且数据已经修改成功了。
切换账本测试
然后这个时候我们再切换一下账本，切换成”账本1”，然后再记一条试一下。
在账本1记录
我们还是记一条支出吧，然后记一个 25 元，然后”餐饮”。
备注我们就选择”早餐”，改一下日期吧，改成 1 月 3 号，点击”保存”。
然后再进入到明细界面看一下，“测试账本1”下面也有了一条数据，就是我们刚才记录的早餐，然后 1 月 3 号是昨天。
删除功能
我们再回到”账本2”当中，然后删掉一条数据，把这个 25 的删掉。
点击”删除”之后，这里还弹了一个提示，做一下二次确认。
我们看到数据也已经删除成功了。
功能测试完成
那么目前看起来，我们的记账和明细的功能就已经开发完成了，并且没有什么大的问题。
提交代码
那么我们就来提交一下代码。
创建新分支
首先我们在提交代码之前，最好还是新建一个分支。
因为目前的分支还是”账本管理模块”，所以我们在账本管理模块的基础上再去新建一个分支。
我们的分支名称就叫：
v1.0.0-4-记账功能和明细功能分支命名规范
这个分支后面的 1、2、3、4 呢，是我们自己去定义的，有一个顺序，方便我们后面去追溯。
然后回车。
回车之后，我们看一下左下角，现在的分支已经是我们新建的分支了。
提交代码
然后点击左侧的”源代码管理”，收起目录，然后直接点击加号，然后点击”提交”。
我们在提交信息里面写：
记账和明细功能开发然后点击右上角的”提交并同步”。
发布分支
然后点击左侧的”发布”。
现在代码也已经提交到了远程仓库。
遇到问题？
如果在开发记账功能时遇到问题，可以扫描下方的微信二维码帮您看下（免费咨询）
下一步
记账和明细功能开发完成后，接下来我们需要：
