第5讲作业提交通道（Frontend）

[FranGuam]

作业内容

对于已完成数据库或后端作业的同学，可以选择其中之一完成相应的前端界面，如下：

• 【数据库】聊天室的消息可以选择回复之前的某条消息，但没有多层回复或多重回复
  • 提示：可以使用右键菜单实现回复功能（JSX 元素的onContextMenu属性），可以使用如 react-contextify 的 npm 包来简化代码（fkhadra/react-contexify: 👌 Add a context menu to your react app with ease (github.com)）
• 【数据库】会议进行时可以添加（多个）实时会议记录，记录没有创建者、但要有创建时间和修改时间
  • 提示：UI 方面可以直接使用<input/>或 antd 的<Input/>，建议实现自动保存功能
• 【数据库】便签纸功能，用户可以为每个会议创建一个便签纸，便签纸仅自己可见
  • 提示：UI 方面可以直接使用<input/>或 antd 的<Input/>，如果对实现 markdown 记事本感兴趣，也可以使用如 react-markdown 的 npm 包（remarkjs/react-markdown: Markdown component for React (github.com)）
• 【后端】”忘记密码？”：对于用户名为邮箱的用户，允许其通过密码重置邮件来修改密码
  • 提示：需要实现两个独立页面及其路由，分别是输入用户名（即邮箱）请求重置密码的页面（对应/user/change-password/request）、和邮件跳转链接到的输入密码而后重置的页面（对应/user/change-password/action）
• 【后端】“痕迹抹除”：允许删除用户和删除文件
  • 提示：需要注意删除后的 UI 表现（如删除用户后应当退出登录）

对于尚未完成以上前置作业的同学，也可以从以下几组功能需求中选择一组实现：

提示：你有可能需要修改 graphql 文件并重新生成 graphql.tsx 来完成一些数据库操作

• 更专业的会议功能
  • 修改会议简介：使用 antd 的Typography.Text中editable属性实现原地编辑并修改会议简介，需要参考Typography - Ant Design
  • 邀请码二维码：将邀请码以二维码的形式呈现出来，二维码的内容可以是邀请码本身、也可以是加入该会议的网页链接（具体实现方式不限），组件用法可参考QRCode - Ant Design
  • 退出会议：目前点击“退出会议”按钮，会提示“暂未实现”，那么请实现这个功能吧
• 更人性化的聊天室
  • 消息撤回：对于已发送时间未满 2 分钟的消息，允许用户通过右键菜单撤回（JSX 元素的onContextMenu属性），可以使用如 react-contextify 的 npm 包来简化代码（fkhadra/react-contexify: 👌 Add a context menu to your react app with ease (github.com)）
  • @我：在消息中输入@即可选择提及会议中的任何一个人（或@ALL），被提及的人看该条消息的显示效果与其他人不同（具体 UI 不限），推荐使用 antd 的 Mentions 组件，参考Mentions - Ant Design
• 更智能的文件共享
  • 文件搜索：如果文件共享空间中的文件过多，很难一下子找到自己想要的文件，这时候就需要搜索功能了。你可以使用 JS 的Array.filter()方法
  • 文件预览：对于图片、pdf、word 文档等类型的文件，我们可以提供在线预览，方法参照React 组件，用于预览文件（PDF、Excel、Word、图片） - 掘金 (juejin.cn)，要求至少实现 pdf 文件的预览（可以在原页面预览，也可以专门新建一个页面及其路由供预览）
• 更有趣的游戏互动
  • 对于将这个软件作为桌游辅助工具的用户，除了投骰子、计时这种“单机”的需求，还希望我们能基于“用户——会议——消息”的关系，提供一些简单的聚会游戏（如谁是卧底、真心话大冒险、狼人杀等），请选择一款你熟悉的聚会游戏，仿照已有功能自拟界面，实现完整的游戏体验。
  • 注意：唯一支持联机共享的信息就是聊天室的消息，你所选择的游戏内所有互动必须基于消息（如在本地对是否能发送消息做限制、或对消息内容做判断从而决定胜负）。除此之外，游戏内还可以使用“伪联机”的功能，即在某一个用户（上帝）的浏览器中完成的操作通过消息同步到其他客户端（如某个人操作随机抽签后将结果加密发消息到聊天室）。当然，这套机制成立的前提是所有客户端都按同样地规则友善地解读和发送消息，因此我们必须对聊天室/消息的类型做人为划分（如将“狼人杀”作为特殊词、并将以“【狼人杀】”开头的聊天室适用狼人杀规则，或者聊天室功能不变、将特定开头的消息过滤到一个额外的“聊天室”）

提交方式

见 README 作业提交 部分

负责人

2025年

讲师：许霖，github账号 @xvlincaigou
微信/邮箱：l-xu22@mails.tsinghua.edu.cn