添加评论 UI 设计稿

对齐创建页定稿语言：灰底 + 软白卡 + 无 per-field Outline。 评论页字段：正文 / 表情 / 语音 / 时间 / 图片；顶部展示被评论记录摘要。 已与代码落地（AddCommentPage 软卡片化）同步。

与 create-form 视觉一致 软卡片分组 媒体同轨 + 砖
设计原则

空态

刚进入添加评论：正文空、无图、语音待录制。

9:41●●●
‹
添加评论
发布
正在评论
花田公路
薰衣草还没全开，但已经很香。
评论内容
写下你的想法…
表情（可选）
😊
😢
🔥
👍
❤️
🎉
输入新表情，如 😊
添加
语音（可选）
状态 · 待录制
时长 00:00 / 01:00
开始录音
创建时间
创建时间可选 · 点按选择 📅
图片
＋添加

已填

有正文、选中表情、语音就绪、一张图；发布可点。

9:41●●●
‹
添加评论
发布
正在评论
花田公路
薰衣草还没全开，但已经很香。
评论内容
那家店排队值了，下次还走这条。
表情（可选）
😊
👍
🔥
❤️
🎉
✨
语音（可选）
状态 · 已就绪
时长 00:12 / 01:00
重新录音 删除语音
创建时间
创建时间2026-07-13 16:42 ›
图片 · 1 / 9
＋添加

字段与实现映射

区块内容代码
上下文卡记录标题 + 摘要AddCommentPage 顶卡
正文多行软输入_commentController
表情网格 + 自定义EmojiViewModel
语音录制 / 暂停 / 完成CommentVoiceRecorderService
时间可选日期时间DateTimePickerWidget（软行）
图片≤9，+ 砖同轨ImagePickerSection
发布AppBar 右侧正文或语音非空可点

文件：docs/add-comment-ui-design.html · 实现：lib/views/record/add_comment_page.dart