底部导航栏功能开发 - 使用 Qwiz 模式开发
大家好，前面呢我们已经完成了需求文档，接下来呢，我们要根据这个需求文档去做功能开发。
我们先来看一下这个需求文档，按照文档的顺序去开发，我们需要先完成底部导航栏。
启动项目
启动调试
首先点击左侧的”运行和调试”，我们来启动一下项目。
选择”一键启动服务端和客户端”，然后点击”开始调试”。
打开客户端
启动成功之后呢，点击右侧的”启动客户端”，打开客户端的控制台。
按住键盘上的 Ctrl 单击，在浏览器中打开客户端界面。
登录测试
然后按一下 F12，先登录一下。
随便输入一个手机号码，然后打开服务端的控制台，点击”获取验证码”。
输入验证码 194280，登录。
使用 Quest 创建开发任务
新建任务
然后我们打开左侧的 Qwiz，点击”新建任务”。
添加上下文
添加上下文，选择需求文档，然后再把我们的 project-root 也添加进去。
输入提示词
我已经写好了提示词，直接粘贴过来给大家看一下：
现在需要根据这个需求文档来完成功能，
暂时先完成需求文档中业务功能部分的第一项：底部导航栏。
参照当前项目的说明 project-rules.md 来设计这个功能。
如果有不清晰的地方请告诉我，我来补充。然后回车。
AI 的设计确认
我们来看一下 AI 给我们列出来几个点，需要我们逐个去确认一下。
第一点：Tab 页面的路径和命名规范
这个呢我们选 a 就行了，他给了我们一个建议的路径，我们使用他建议的就行了。
第二点：图标方案的选择
我们选择使用这个 UnoCSS 图标，也选 a。
第三点：登录拦截的范围
这个呢也选 a，每个页面我们都需要登录才能访问。
第四点：切换效果
第四点我们选择 c，我们在切换图标的时候，图标和文字的颜色都要对应修改。
然后回车。
查看设计方案
底部导航栏的功能设计呢，现在已经完成了，我们来简单的看一下啊。
1. 功能概述
首先第一点是一个功能概述。
2. Tab 页面配置
然后第二点是 Tab 页面的配置，比如说每个界面它的页面路径、它的状态以及说明。
3. 图标方案设计
第三点是图标方案的设计，这个我们就不仔细看了。
4. 登录拦截机制
第四点是登录拦截机制，哪些页面需要登录才能访问。
我们看一下，统计页面是不需要登录的，这里应该是有问题的，统计页面也需要登录。
发现问题
统计页面也需要登录才能访问，这里需要让 AI 去修改一下。
然后其他的页面呢，都没有问题，我们后面让 AI 去修改一下。
5. Tab 高亮状态设计
然后继续往下看，第五点是 Tab 高亮状态的设计，也就是说我们当前这个图标点击之后，它是高亮的。
6. 配置相关
第六点是配置相关的。
7. 交互行为规范
然后第七点是交互行为的规范，比如说我们当前已经在首页了，再点首页它会有什么操作啊，这里呢是不执行任何操作，通常都是这样设计的。
8. 视觉设计
第八点是视觉设计。
9. 开发实施步骤
第九点呢是开发实施的步骤。
10. 平台兼容性
第十点是平台兼容性，考虑到了多个平台，比如说 H5 网页，然后是微信小程序、支付宝小程序还有 APP。
11. 边界情况处理
第十一点是边界情况的处理，比如说未登录的时候访问如何处理啊，访问不存在的页面如何处理。
12. 性能相关
第 12 点是性能相关的。
13. 后续扩展能力
第 13 点呢，考虑了后续的一个扩展能力。
14. 测试和风险
最后是测试以及风险和解决方案。
最后还列出了文档变更的记录。
设计方案完成
看起来没有什么问题，我们点击”采纳”。
开始开发
采纳之后呢，就可以直接开始任务了。
那么文档中的第一项——底部导航栏的功能呢，就已经完成了。
关于 Qwiz 模式
Qwiz 的模式非常适合我们去开发这种完整的功能，它会帮我们做详细的设计，然后根据设计去做精确的开发。
我们最后验收的时候呢，只需要确认功能没有问题就行了。
后续其他的功能呢，我们也是使用这种方式，不用手写一行代码。
提交代码和分支管理
最后功能完成之后呢，我们需要提交一下代码。
打开源代码管理器
首先点击左侧的”源代码管理器”。
创建版本分支
在提交之前呢，我们可以新建一个分支，因为我们现在就正式进入了业务开发的阶段啊，最好呢还是用分支去开发会好一点。
怎么去新建呢？
点击左侧的这个分支名称，默认是 master，点击之后选择”创建新分支”。
我们就从 1.0.0 开始：
v1.0.0然后回车。
发布到远程仓库
然后再点击这个图标，将分支发布到远程仓库。
创建功能分支
然后再次点击 v1.0.0，在这个基础上呢，再去创建一个分支。
分支名称我们就叫：
v1.0.0-1-底部导航栏功能回车。
创建好之后呢，再把它发布到远程仓库。
提交代码
现在我们再提交代码呢，功能就提交到了这个分支上面。
然后点击目录右侧的加号，提交。
提交信息（commit message）我们就写：
底部导航栏功能开发同步更改，推送到远程仓库。
分支管理的好处
通过不同的分支来管理代码，有很多好处：
- 尝试新方案：比如我们尝试某一种方式去解决一个问题的时候呢，我们就可以新建一个分支尝试，失败了切回原分支就行了，也不会污染原来的代码
- Bug 修复追溯：或者我们在修改 bug 的时候，在分支上修改以后也方便我们去追溯
遇到问题？
如果在开发过程中遇到问题，可以扫描下方的微信二维码帮您看下（免费咨询）
下一步
底部导航栏功能开发完成后，接下来我们需要：
