接上篇博客，项目实训第一周我完成了环境搭建、架构梳理、需求对齐。本周正式进入核心页面开发、接口对接、交互实现阶段。
一、本周核心工作：从静态页面到前后端联调
1. 核心页面静态布局与基础交互实现
按照计划优先完成登录页、游戏大厅、房间创建/加入页三大核心页面，这也是本周最耗费时间和精力的部分。全程遵循组件化拆分思路，把头部、侧边栏、卡片、按钮等可复用的部分抽为公共组件，刚开始拆分时，因为对组件的边界划分不清晰，出现了组件复用性差、冗余代码过多的问题，后来反复调整组件粒度，逐一测试复用效果，才慢慢找到合适的拆分方式，既提升了开发效率，也为后续的维护减少了麻烦。
2. 前端接口对接与数据渲染
本周的核心重点的是前后端接口联调，这也是我第一次完整参与从请求封装到数据渲染的全链路开发，过程中踩了不少坑。一开始，我直接按照后端提供的接口文档编写请求，没有封装统一的请求工具类，导致每个接口都要重复编写请求头、超时处理的代码，不仅繁琐，还容易出现遗漏。写完代码用AI帮助审查时，在AI的建议下，封装了统一的请求工具类，统一处理请求头、异常捕获和超时提示，大大提升了开发效率。
对接接口时，遇到了跨域、参数格式不匹配、返回值解析错误等问题，印象最深的是对接剧本列表接口时，后端返回的剧本封面图片路径有误，导致页面加载不出图片，我反复检查接口文档、核对请求参数，甚至和后端同学一起排查接口返回数据，最后发现是后端返回的路径缺少了基础前缀，修改后图片成功加载。
3. 游戏内核心交互开发
推进游戏内高频交互模块开发，重点实现了公聊/私聊切换、消息发送与滚动定位、道具栏使用、推理笔记编辑等功能。其中，公聊与私聊的切换的交互，一开始出现了切换后消息列表不刷新、消息发送后定位不准确的问题，我反复调试代码，监听切换事件，优化消息渲染逻辑，多次测试不同场景下的交互效果，最终实现了切换流畅、消息定位精准的效果。
推理笔记功能的开发，需要实现编辑、保存、清空三个核心操作，还要保证笔记内容实时保存，防止用户误操作导致内容丢失，我通过本地存储结合接口提交的方式，既实现了实时保存，又保证了数据同步，虽然过程中多次出现存储失败、数据同步延迟的问题，但通过反复调试和优化，最终达到了预期效果。
4. AI功能前端适配优化
针对项目特色AI NPC+AI剧本生成做了专门的前端适配，这也是本周的难点之一。AI剧本生成功能，需要展示加载动画、进度提示以及成功/失败状态，一开始我只做了简单的加载动画，没有考虑到剧本生成耗时较长的情况，导致用户不知道生成进度，容易误以为页面卡顿。后来优化了加载逻辑，添加了进度条和提示文案，实时展示生成进度，让用户清晰了解当前状态。
5. Bug修复与体验优化
本周后半段，主要集中处理开发过程中出现的Bug和体验问题。比如表单重复提交的问题，一开始没有做防重复提交处理，导致用户多次点击提交按钮后，出现重复请求的情况，甚至导致数据异常，我通过添加加载状态、禁用按钮等方式，彻底解决了这个问题。
二、本周收获与不足
收获
1. 页面开发与交互实现能力得到了实实在在的提升，从一开始编写静态页面时的生疏，到后来能够独立完成从布局、交互到样式优化的完整流程，甚至能主动考虑用户体验，比如优化按钮点击反馈、调整文字排版，这都是本周在实际开发中一点点积累的。尤其是组件化开发，从一开始的边界划分不清，到后来能合理拆分组件、复用组件，不仅提升了开发效率，也让我对前端开发的规范性有了更深刻的理解。
2. 接口联调能力实现了从0到1的突破，以前只是简单了解接口请求的基本方法，本周通过完整参与前后端联调，掌握了请求封装、异常处理、数据渲染的全链路，学会了排查跨域、参数不匹配、返回值解析错误等常见问题，也明白了前后端协同开发的重要性——遇到问题时，及时和后端同学沟通，高效配合，才能更快地解决问题，推进项目进度。
3. 问题定位和解决能力显著提升，本周遇到了各种各样的Bug，从样式错乱、交互异常，到接口报错、数据异常，一开始排查Bug时，常常无从下手，只能盲目调试，浪费了很多时间。后来慢慢总结经验，学会了通过控制台查看报错信息、通过抓包工具分析接口请求，逐步缩小排查范围，精准定位问题根源，解决问题的效率也大大提高。
4. 对AI功能的前端适配有了实际的落地经验，不再是停留在理论层面，而是真正动手实现了AI剧本生成、AI NPC交互的前端适配，明白了AI功能的前端开发，不仅要实现功能，更要兼顾用户体验，让AI交互更自然、更贴合用户习惯。
5. 团队协同能力进一步提升，本周在开发过程中，遇到自己解决不了的问题，会主动向组长和其他同学请教，倾听他们的建议；在小组讨论中，也会主动分享自己的开发进度和遇到的问题，提出自己的优化建议，和大家一起探讨解决方案。
不足
1. 状态管理使用不够熟练，这是本周最明显的不足。在开发游戏界面和剧本详情页时，因为页面数据较多，涉及到多组件数据共享和状态更新，一开始没有合理规划状态管理，导致部分页面数据流转混乱，出现数据更新不及时、组件之间数据同步异常的问题。比如在处理推理笔记的内容同步时，因为状态管理不当，导致笔记内容在不同组件中显示不一致，花费了大量时间排查和修改。
2. 对AI流式输出的前端处理经验不足，项目中AI剧本生成和AI NPC消息发送需要支持流式输出，让内容逐字显示，提升用户体验，但我目前对这种流式输出的前端实现方法掌握不够熟练，尝试编写代码时，出现了内容显示不连贯、卡顿的问题，最终没有实现该功能，只能先采用普通的加载方式，这也是本周的一个遗憾，需要在后续的学习和开发中重点突破。
三、下周工作计划
1. 完善用户中心、个人主页、剧本详情页的开发，重点关注页面布局的合理性和交互的便捷性，结合本周的开发经验，合理拆分组件，优化页面样式，确保页面适配不同屏幕尺寸。
2. 深入学习状态管理相关知识，结合项目实际场景，重构部分页面的数据逻辑，解决数据流转混乱、更新不及时的问题，提升代码的可维护性和可读性。
3. 攻克AI流式输出的前端实现难题，查阅相关资料、借鉴优秀案例，实现AI剧本生成和AI NPC消息的流式加载效果，让内容逐字显示，提升用户体验。
4. 准备项目中期检查材料与演示流程，梳理本周和上周的开发成果，优化演示效果，确保中期检查顺利通过。
四、总结
作为小组的前端开发人员，我深刻体会到，前端开发从来不是“写个页面就好”，而是要兼顾功能实现、用户体验、性能优化，还要配合后端完成联调，解决各种突发问题。
