3.4 KiB
3.4 KiB
[已处理] 2026-10-20 | K38-A 短剧详情页重做(暖橙风格,剧集选择下置)(仅 App 端)
用户指令(2026-10-20,原文):
「接下来做短剧详情页 我们的没有那么多介绍 下面先显示剧集选择的 页面风格要一致」
参考图:20261020-153348.jpg(返回/分享/更多、封面 + 标题 + 全 N 集 + 收藏按钮、数据行、基本信息 + 展开、标签、剧集/评论区);我们无评分/演员/剧评等数据,去掉这些模块,剧集选择紧接简介往下展示。
口径(重写 lib/pages/drama_detail/drama_detail_view.dart 视觉,逻辑与既有 Key 尽量保留)
- 顶部(
AppColors.surfaceTop渐变到底部 ink)- 操作行:返回(Key
detail-back,白色圆形)、右侧分享(Keydetail-share)、更多(Keydetail-more,保留现有 PopupMenu:收藏/下载/分享/举报)。 - 主信息行:左侧封面 96×128 圆角 12 + 轻阴影(Key
detail-poster);右侧:标题 20 w800 最多 2 行(detail-title)、全 N 集12 muted(detail-episode-count)、收藏按钮(Keydetail-favorite,高 34、圆角 17,未收藏=白底橙字橙描边 + star_border,已收藏=主色实底白字 + star)。 - 数据行(Key
detail-stats,白卡圆角 14、上下 12、三列等分 + 两条 1px 分隔线):- 热度:火焰图标 +
formatInteractionCount(viewCount)(heatLabel只取数字部分,或直接数字 + 小字「热度」); - 收藏:star 图标 +
favoriteCount(为空显示共 N 集); - 点赞:heart 图标 +
likeCount(为空显示—)。
- 热度:火焰图标 +
- 操作行:返回(Key
- 简介区(Key
detail-synopsis-section):小标题「简介」(新增 l10nsynopsisTitle)14 w800 + 正文 13 muted 行高 1.5,最多 3 行,超出显示「展开/收起」(复用expandSynopsis/showLess,Keydetail-synopsis-toggle);正文 Key 仍为detail-synopsis。 - 标签行(Key
detail-tags):分类 + 题材 + 语言去重,最多 4 个浅橙底胶囊(12 号橙字)。 - 剧集选择(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)。
- 底部固定 CTA(SafeArea + 14 内边距):主色 46 高圆角 23,文案沿用
startWatching/continueEpisode(n)(Keydetail-cta),点击播放续播集;上方保留现有续播进度条。 - 加载/失败/空剧集三态保持现有结构,只统一为新配色;页面背景
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 留痕;真机验收由用户执行。