Files
FruitServer/docs/plans/INBOX.md
T

3.4 KiB
Raw Blame History

[已处理] 2026-10-20 | K38-A 短剧详情页重做(暖橙风格,剧集选择下置)(仅 App 端)

用户指令(2026-10-20,原文):

「接下来做短剧详情页 我们的没有那么多介绍 下面先显示剧集选择的 页面风格要一致」

参考图:20261020-153348.jpg(返回/分享/更多、封面 + 标题 + 全 N 集 + 收藏按钮、数据行、基本信息 + 展开、标签、剧集/评论区);我们无评分/演员/剧评等数据,去掉这些模块,剧集选择紧接简介往下展示。

口径(重写 lib/pages/drama_detail/drama_detail_view.dart 视觉,逻辑与既有 Key 尽量保留)

  1. 顶部(AppColors.surfaceTop 渐变到底部 ink)
    • 操作行:返回(Key detail-back,白色圆形)、右侧分享(Key detail-share)、更多(Key detail-more,保留现有 PopupMenu:收藏/下载/分享/举报)。
    • 主信息行:左侧封面 96×128 圆角 12 + 轻阴影(Key detail-poster);右侧:标题 20 w800 最多 2 行(detail-title)、全 N 集 12 muted(detail-episode-count)、收藏按钮(Key detail-favorite,高 34、圆角 17,未收藏=白底橙字橙描边 + star_border,已收藏=主色实底白字 + star)。
    • 数据行(Key detail-stats,白卡圆角 14、上下 12、三列等分 + 两条 1px 分隔线):
      • 热度:火焰图标 + formatInteractionCount(viewCount)(heatLabel 只取数字部分,或直接数字 + 小字「热度」);
      • 收藏:star 图标 + favoriteCount(为空显示 共 N 集);
      • 点赞:heart 图标 + likeCount(为空显示 —)。
  2. 简介区(Key detail-synopsis-section):小标题「简介」(新增 l10n synopsisTitle)14 w800 + 正文 13 muted 行高 1.5,最多 3 行,超出显示「展开/收起」(复用 expandSynopsis/showLess,Key detail-synopsis-toggle);正文 Key 仍为 detail-synopsis。
  3. 标签行(Key detail-tags):分类 + 题材 + 语言去重,最多 4 个浅橙底胶囊(12 号橙字)。
  4. 剧集选择(Key detail-episodes-section):标题「选集」14 w800 + 右侧「共 N 集」11 muted;6 列网格(间距 8、格子高 44、圆角 10):
    • 未播免费:白底 + 1px border + 深色数字;
    • 锁定:AppColors.raised 底 + 数字 muted + 右上角 10 号小锁;
    • 当前进度集:主色实底白字;
    • Key 保持 detail-episode-chip-<number>;点击 logic.openPlayer(context, index)。
  5. 底部固定 CTA(SafeArea + 14 内边距):主色 46 高圆角 23,文案沿用 startWatching / continueEpisode(n)(Key detail-cta),点击播放续播集;上方保留现有续播进度条。
  6. 加载/失败/空剧集三态保持现有结构,只统一为新配色;页面背景 AppColors.ink。

l10n:新增 synopsisTitle(简介 / Synopsis / Sinopsis)。

测试/门禁

  • 更新既有详情测试的布局断言(封面、收藏按钮、数据行、简介展开、选集网格、CTA);
  • 新增:收藏按钮切换样式;简介超过 3 行出现展开且展开后完整显示;选集锁定集显示锁;点击选集进入对应集;
  • dart analyze lib test 零告警 + flutter test 全过 + flutter build apk --debug。

流程:从 develop 拉 feature/flutter-k38-detail-redesign;作者 Zhou Weidong <502333560@qq.com>;--no-ff 合回 develop 并 push;PROGRESS 留痕;真机验收由用户执行。