谨以本文记录2022年7月入职科大讯飞后，作为培训的一部分参加的编程大赛。

因为项目要求队员中至少一位有TCP编程经验，原本小组中的两位前端之一（自然不是我）被分配到其他小组了，而新分配进来的这位是一个Android开发工程师，并没有Vue开发经验（比赛要求使用Vue框架进行开发）。因此，所有的前端开发工作便由我一个人完成。因为前端部分代码完全由我独立开发，因此作为个人成果发布于GitHub供公开交流学习。

功能介绍

登录/注册界面

登录/注册的过程又被分为两个步骤：第一个步骤是输入用户名并点击“下一步”，这时系统会检测用户名是否已注册，从而将用户转入登录或注册页面。而第二个步骤则是输入密码，其中需要注册的用户将被要求重复输入密码，而登录的用户只需输入一次。在这个过程中，前端包含用户名与密码的格式检测。

点击确认后，系统请求后端是否注册/登录成功，如果失败弹出错误提示，反之则弹出成功提示，并将页面转入主页。

主页

主页提供查看邮件以及写新邮件的功能。其中查看邮件的内容分为收件箱和发件箱，邮件列表提供分页功能，点击列表中的邮件标题进入邮件详情。

写邮件的功能采用按钮+模态弹窗的形式实现。因为开发时采用的富文本编辑器出现bug难以修复，只提供了输入纯文本的功能。未支持上传附件。

头部提供退出登录按钮。

主要技术

系统使用Vite+Vue 3进行前端开发。

部分细节

交付时的版本，只使用点击来切换sider中的选项卡，而复杂的操作下会出现bug. 之后进行了一定的优化，使用vuex state来管理当前处于的页面，从而保证sider的选项正确。