FruitServer/docs/plans/2026-10-21-K86-comments-sheet.md

K86 评论面板按参考图重做实施计划

目标

仅调整 ReelShort 客户端评论面板和评论行视觉，使顶部标题、评论元信息、回复入口和底部输入区接近参考图；不修改后端接口、控制器数据逻辑或评论业务能力。

范围

• lib/pages/player/widgets/drama_comments_sheet.dart
• lib/pages/player/widgets/comment_tile.dart
• test/comment/drama_comments_sheet_test.dart
• 必要的 PROGRESS 留痕

实现计划

1. 顶部栏

   • 删除拖拽把手和剧名行。
   • 左侧放置 44x44 向下箭头，保留 player-comments-close，点击关闭面板。
   • 中间使用现有 commentsWithCount / comments，16px、w600、AppColors.onSurface，保留 comment-count-label。
   • 右侧留空，保持标题视觉居中。

2. 评论行

   • 头像改为 40px，回复行 28px；文字区左间距 12。
   • 昵称 12px muted、正文 16px cream、行高 1.4。
   • 时间与回复入口组合为灰色元信息行，时间继续使用 formatLocalizedDateTime。
   • 删除点赞按钮、心形图标与数字展示，控制器点赞逻辑保留但不绑定 UI。
   • 举报/删除入口改为右上角 18px 的更多图标，保留 comment-menu-{id} 和现有菜单行为。
   • 去除行间分隔线，调整上下留白为 12/14。

3. 回复

   • 展开/收起回复使用 12px muted 文本，前面增加 16x1 的 border 色短横线。
   • 展开后的回复沿用相同评论行样式，并通过 40px 头像宽度加 12px 间距与正文对齐。

4. 输入区

   • 输入框改为 44px 高、22px 圆角、AppColors.commentInput 底色。
   • 保留登录提示、回复态 banner、橙色 38px 发送按钮及 comment-post Key。
   • 保持现有键盘避让和面板高度 clamp。

5. 状态与交互

   • 保留加载、错误、空态、待审核、展开回复、翻页、回复、删除、举报和发送逻辑。
   • 保留登录闸、自动聚焦和登录后输入框聚焦行为。

测试

• 删除依赖 comment-like-10 的点赞展示用例。
• 断言不存在任何 comment-like-* 按钮或心形计数。
• 断言 player-comments-close 可关闭面板。
• 断言标题居中、字号和字重符合规格。
• 断言头像、正文、元信息、回复入口、输入框与发送按钮尺寸。
• 保持既有评论分页、登录、发布、展开回复、删除和举报用例通过。

门禁与 Git

• ReelShort 从 develop 创建 fix/comments-sheet-style。
• 提交：fix(player): 评论面板按参考图重做。
• 作者：Zhou Weidong <502333560@qq.com>。
• --no-ff 合回 ReelShort develop 并 push，不使用 force push，不执行 git add -A。
• 门禁：dart analyze lib test 零告警、flutter test 全过。
• 不安装真机；完成后等待用户验收。