评论与讨论系统 是做什么的？
目的
评论与讨论系统提供了一套设计交互式对话层的方法论。它确保复杂的多用户对话保持可读、可导航且组织有序。通过定义线程化、嵌套限制、操作优先级和贡献者标识规则，该系统防止“信息混乱”，并帮助用户在高流量环境中找到最有价值的贡献。
使用场景
- 社区论坛： 为小众社区设计线程化讨论。
- 文章/博客评论： 在长内容中启用读者反馈。
- SaaS 协作： 在项目任务、文档或拉取请求中构建内部讨论。
- 支持问答： 组织客户问题和员工回答。
- 社交动态： 管理共享帖子或媒体上的互动。
何时不使用
- 即时通讯（聊天）： 对于实时的一对一或小群组消息，应使用针对“对话气泡”和即时投递优化的布局。
- 仅公告动态： 用户不能回复或互动；一个简单的通知列表即可。
- 低互动页面： 如果页面预计总评论数少于 3 条，那么不使用线程化的平铺列表更高效。
- 事务日志： 对于自动化系统审计日志，请使用
timeline-activity-system。
输入
- 层级模型： 线程可以达到多深？（平铺、嵌套或混合）。
- 用户身份数据： 头像、显示名称和角色（例如，版主、作者、工作人员）。
- 参与度指标： 投票数（顶/踩）、回复数和时间戳。
- 上下文元数据： “已验证购买”、“顶级贡献者”或“作者”徽章。
输出
- 评论结构规约： 单个评论“节点”（头像、元信息、正文、操作）的视觉定义。
- 线程蓝图： 嵌套的空间规则，包括缩进增量和垂直“线程线”。
- 操作层级映射： “回复”、“投票”、“编辑”和“举报”的优先级排序。
- 响应式适配策略： 在移动设备上折叠线程或扁平化布局的规则。
工作流程
1. 定义评论结构
建立一致的“节点”结构：
- 头部： 用户头像（根据嵌套级别调整大小）、显示名称、角色徽章和相对时间戳（例如，“2小时前”）。
- 正文： 文本内容，酌情支持 Markdown 或富文本。
- 操作栏： 主要操作（回复、投票）和次要操作（分享、举报、编辑）。
2. 建立线程化和嵌套规则
管理回复之间的空间关系：
- 缩进： 使用一致的增量（例如，
24px或1.5rem）进行嵌套回复。 - 线程线： 使用微妙的垂直线（1px 宽）在视觉上将回复与其父评论联系起来。
- 嵌套限制： 设置最大深度（通常 3-5 层），超出后扁平化线程或需要“继续此线程”链接到新视图。
3. 为操作排序
并非所有操作都同等重要；使用视觉权重引导用户：
- 主要： “回复”和“投票”应立即可见。
- 次要： “分享”或“链接”可以只显示文本或图标。
- 溢出： 将“编辑”、“删除”和“举报”放入“更多”（省略号）菜单，以减少杂乱。
4. 实施信号和信任
使用视觉线索提供上下文：
- 作者/工作人员高亮： 为原作者或官方工作人员使用不同的背景色或醒目的徽章。
- 新/高亮评论： 使用微妙的背景淡色或左边框强调，来指示未读或新发布的评论。
- 投票可视化： 仅在激活时使用颜色（例如，橙色代表顶，蓝色代表踩）。
5. 规划响应式适配
线程会快速消耗水平空间；针对窄视口进行适配：
- 移动端扁平化： 在移动设备上减少缩进增量（例如，从
24px减少到8px），或者在扁平化之前将嵌套限制在 2 层。 - “全屏”切换： 对于深层线程，允许点击回复以在专用的全宽度“聚焦模式”中打开它及其子回复。
决策规则
- 缩进 vs. 平铺： 对于“探索型”（父评论上下文至关重要）环境使用缩进。对于“任务型”（最新信息优先）环境，使用带有“@提及”引用的平铺列表。
- 投票显示： 仅当社区要求“自我监督”时才显示踩数。对于大多数积极成长的环境，只显示顶数。
- 默认排序： 对于社区，默认使用“最佳”（加权分数）；对于时间敏感的协作工具，默认使用“最新”。
- 截断规则： 将极长的评论（>500 字）截断，并显示“阅读更多”按钮，以保持线程的垂直节奏。
约束
- 可访问性： 评论必须可以通过键盘导航（
Tab键切换操作）。使用语义化 HTML（评论使用<article>，嵌套使用<ul>/<li>）。每个操作必须有清晰的标签。“线程线”应纯粹是装饰性的（对 ARIA 隐藏）或使用aria-hidden="true"。 - 响应式： 缩进不能将内容推出屏幕边缘。对容器使用
padding-left或margin-left，绝不要对嵌套块使用固定宽度。 - 性能： 对于高流量线程（>100 条评论），使用“延迟加载”或“加载更多”分页，以防止初始渲染时间过长。
常见失败模式
- 缩进死亡： 允许无限嵌套，直到文本在屏幕右侧只有 1 个字符宽。
- 操作过载： 在每条评论下显示 10 多个按钮，形成“图标海洋”。
- 层级不可见： 未能区分“作者”和普通评论者，使寻找官方答案变得困难。
- “丢失父评论”： 深层线程没有线程线，难以追踪哪个回复属于哪个父评论。
- 状态缺失： 用户提交评论时，不显示“待处理”或“发送中”状态。
验证标准
- 嵌套深度已封顶，并过渡到扁平或“聚焦”视图。
- 视觉层级区分了作者、工作人员和普通用户。
- 线程线清晰地连接回复与其父评论。
- 主要操作（回复/投票）在视觉上比次要操作更突出。
- 缩进针对移动视口进行适配，以防止水平溢出。
- 评论在语义上被标记为嵌套列表或文章。
- 操作按钮的最小触摸目标为 44x44 像素。