参考页面

1. 网易跟帖手机版 https://3g.163.com/touch/comment.html?docid=G4O7VC5K00258105
2. 网易跟帖PC版 https://comment.tie.163.com/G4O5RR7K0514R9KU.html
3. 阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html
4. 正则可视化 http://wangwl.net/static/projects/visualRegex

展现逻辑

1. 一次加载所有评论数据，不做分页。 (因为参考阮一峰老师的博客，也很少有评论数超过100的文章，所以没必要做分页逻辑)
2. 按时间升序展示
3. 每条评论中显示之前的回复引用，类似网易的盖楼。
4. 引用的评论最多显示2条，超过2条显示就近2条，并显示「查看全部{cnt}条引用」
5. 每条展示信息: 用户名/ip/时间/留言内容/回复按钮/引用列表,其中引用列表可能没有就不展示。
6. 引用列表中每条展示信息：序号/用户名/ip/时间/回复的用户名/留言内容/回复按钮
7. 由两部分组成，评论列表区 和 发表评论区，发表评论区在下方
8. 发表评论区构成元素: 评论输入框/用户名输入框/邮箱输入框/发布按钮/回复的评论
9. 评论输入框/用户名输入框必填, 邮箱输入框选填。 在输入框失焦和点击发布的时候校验。

前端的列表请求逻辑

1. page参数，从1计数。不做分页了。由于不分页了，后端就不做排序了，前端根据create_time升序排序。
2. topic_id参数, 当前评论对应的topic
3. 获得返回数据后，前端根据path数据构造回复引用列表，后端不额外返回信息。

后端的列表响应逻辑

1. 根据topic_id查询数据，根据create_time ASC(升序)排序。 由于不分页了，也就不添加order by了，查到数据后直接返回，前端排序。
2. 如果page为1,返回[0,offset2)区间数据，如果page>1,返回[offsetpage,offset(page+1))区间数据。 实现第一页offset2条，后续都是offset条。
3. offset为20，即每页20条数据。
4. 注意返回每条数据中，email不返回，ip去隐私后返回。

前端的发布请求逻辑

1. 传入content/username/email/pid/topic_id

后端的发布响应逻辑

1. 返回保存后的单条数据所有字段。这里返回的字段应当和列表响应里每条数据的字段保持一致。

UI交互逻辑

1. 输入框label和正则可视化的label交互保持一致
2. 所有输入框宽度都100%铺满容器。
3. 评论输入框高度自适应，根据输入内容自动变化。用户名/邮箱输入框高度写死不能变。
4. 发布按钮一旦点击，将输入框和发布按钮锁死，防止误触多次发布。
5. 发布按钮一旦点击，保存用户名和邮箱到localStorage中。下次留言板加载后，先在localStorage中找用户名和邮箱填充到输入框中。
6. 发布按钮延迟300ms仍未收到响应则再展示loading。
7. 收到发布失败响应/或超时，在发布按钮旁提示发送失败请稍后重试，输入框内容保持不变不清空。
8. 收到成功响应后，
   • 8.1 解除输入框和按钮锁死，清空评论输入框，其他输入框保持不变。
   • 8.2 如果是第一级的评论，则不定位，因为新评论是追加到最后一条的，在页面上位置紧挨着评论输入框，没必要再定位。
   • 8.3 如果是第二级的评论(回复他人的评论),则定位到对应的显示位置，因为新评论是显示在回复的评论下的。如果是第二级的评论，也不进行定位，因为预计也没几个人评论，没必要做这个。
   • 8.4 如果是第二级的评论，将二级评论追加到对应的二级评论列表中，且如果二级列表是收缩的则展开。这里如果不展开的话，
     • 其一还要处理「展开cnt条引用」的cnt状态。
     • 其二如果想要回复某个评论，正常用户操作一般应该会展开所有评论看一下，所以这里回复后就认为展开状态，不额外增加复杂度。
9. 点击回复按钮后，页面直接定位到发表评论界面。

前端校验规则

1. 用户名: 1)不允许为空 2）字符数限制
2. 昵称: 1)不允许为空 2）字符数限制
3. 邮箱: 2)字符数限制 3) 邮箱格式判断

补充UI交互逻辑中的校验交互

1. 校验出错后红框展示，并在输入框的间隔中展示提示。这个UI交互也和正则可视化保持一致。
2. 点击发布时，判断所有校验逻辑，如果出错则显示错误提示。
3. input事件只检查2)3)，点击发布会检查所有校验规则。为了防止强迫症看到红框很烦，用户看到过一次红框做了修改后就恢复状态。

接口安全校验

1. 数据htmlEncode
2. 请求参数加密
3. 前端请求频次校验，避免被黑产扫描
4. todo 报警机制
   • 当评论数激增时，触发报警
   • 报警后，可及时限流

邮件功能

1. 收到新用户的评论时，发送邮件，提示 后续收到回复会有邮件提醒
   • todo 如何验证邮箱有效性？
   • todo 如何验证对邮箱有所属权而不是随便写的邮箱？
   • todo 用户可随时回复TD，取消提醒
2. 收到回复的评论时，对直接回复对象发送邮件，提示有新回复。
   • 对于path链路上的其他用户，不进行邮件通知
3. 新用户邮件内容：
   • 包含当前评论的topic url，可以点击跳转
   • 提示后续有回复时，会有邮件提醒
   • todo 提示可回复TD，取消提醒
4. 回复通知邮件内容：
   • 提示收到回复，包含当前回复的topic链接，可点击跳转
   • todo 对应topic链接点击跳转后，能直接定位到回复的内容区域
   • todo 邮件中包含回复内容，和原评论内容
   • todo 提示可回复TD，取消提醒
5. todo 防止黑产和频繁打扰，进行聚合操作，5min内如果有多个回复，聚合为一个邮件。
6. todo 防止黑产和频繁打扰，如果1h内，发出超过2封邮件，则暂停发送，6h后再继续发送。
7. 防打扰临时方案：对于回复通知邮件，同一个邮箱，距离上次发邮件间隔时间小于1h，则取消发送。主要思考点：
   • 用户目前不能退订、无法进行任务聚合、无法暂停6h后再继续发送
   • 参照目前实际的用户评论数
   • 实现相对简单