docs(plans): 留痕 K39-A 二级页头统一
This commit is contained in:
1 parent
f54c009acd
commit
70949b8f4b
2 files changed
+57
-26
No files matched your search
+25
-26
@@ -1,34 +1,33 @@
|
||||
## [已处理] 2026-10-20 | K38-A 短剧详情页重做(暖橙风格,剧集选择下置)(仅 App 端)
|
||||
## [已处理] 2026-10-20 | K39-A 二级页面统一返回按钮与标题规格 + 新剧页改回暖色风格(仅 App 端)
|
||||
|
||||
**用户指令(2026-10-20,原文)**:
|
||||
> 「接下来做短剧详情页 我们的没有那么多介绍 下面先显示剧集选择的 页面风格要一致」
|
||||
> 「1现在改所有的二级页面 返回按钮及标题大小都不一样2 新剧页面与其他页面的风格不一致」
|
||||
|
||||
**参考图**:`20261020-153348.jpg`(返回/分享/更多、封面 + 标题 + 全 N 集 + 收藏按钮、数据行、基本信息 + 展开、标签、剧集/评论区);我们无评分/演员/剧评等数据,**去掉这些模块**,剧集选择紧接简介往下展示。
|
||||
### 一、统一二级页头
|
||||
1. 新建公共组件 `lib/core/widgets/subpage_header.dart`:
|
||||
- `AppSubpageHeader`:高 52(有副标题时 64),左右内边距 14,背景透明;
|
||||
- 返回按钮统一 36×36 圆形:浅色页 `AppColors.card` 底 + `Icons.chevron_left_rounded` 20 `AppColors.onSurface`;深色/图片上使用 `dark: true`(透明底 + 白色图标);
|
||||
- 标题统一 **18 号 w800** `AppColors.onSurface`(深色场景白色),与返回按钮间距 12,左对齐,最多 1 行省略;
|
||||
- 可选 `subtitle`(12 号 `AppColors.muted`)、`actions`(右侧操作)、`onBack`(默认 `Navigator.maybePop`)。
|
||||
2. 应用到全部二级页面,替换各页自定义返回按钮与标题:
|
||||
- `filter_page.dart`、`ranking_page.dart`、`reserve_page.dart`、`new_releases_page.dart`、`notices_page.dart`、`settings_page.dart`、`watch_records_page.dart`、`favorites_page.dart`、`downloads_page.dart`、`wallet_page.dart`、`store_page.dart`、`discover/category_dramas_page.dart`、`account/account_profile_page.dart`、`account/account_export_page.dart`、`account/account_devices_page.dart`、`account/account_deactivate_page.dart`、`create_view.dart` 的占位页;
|
||||
- `drama_detail` 使用 `AppSubpageHeader` 的返回按钮尺寸/图标(`dark: true`,叠在封面/渐变上),标题由封面区自绘;
|
||||
- 原先使用 `AppBar` 的页面统一去掉默认 AppBar,改为该组件(保留原有 actions 逻辑)。
|
||||
3. 删除各页私有返回按钮实现,避免尺寸/图标再次分叉;页面 Key(`<page>-back`)保持不变。
|
||||
|
||||
**口径(重写 `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)。
|
||||
### 二、新剧页改回暖色风格(与其他页面一致)
|
||||
1. 背景改回 `AppColors.ink` + 顶部 `AppColors.surfaceTop` 渐变;状态栏深色图标;返回/标题使用统一二级页头(`new-releases-back`)。
|
||||
2. 保留创意结构但换配色:
|
||||
- 「今日首映」16:9 大卡不变,封面仍可使用暗色底部渐变遮罩保证文字可读;
|
||||
- `NEW` 角标改主色 `AppColors.blue` 底白字;
|
||||
- 胶片分隔条改浅色版:`AppColors.border` 线 + `AppColors.raised` 底 + 孔洞 `AppColors.border`;
|
||||
- 「更多新剧」横滑卡片:白卡圆角 12 + 轻阴影,剧名 13 w700 `AppColors.onSurface`,日期 12 `AppColors.subtle`;`NEW` 角标同上;
|
||||
- 「本周上新 N 部」胶囊改 `AppColors.badgeBeige` 底 + `AppColors.blue` 字。
|
||||
3. 预约页、筛选页、榜单页配色不动(已是暖色),仅替换页头。
|
||||
|
||||
**测试/门禁**
|
||||
- 更新既有详情测试的布局断言(封面、收藏按钮、数据行、简介展开、选集网格、CTA);
|
||||
- 新增:收藏按钮切换样式;简介超过 3 行出现展开且展开后完整显示;选集锁定集显示锁;点击选集进入对应集;
|
||||
- 抽查 filter / ranking / reserve / new_releases / settings / notices:返回按钮 36×36、标题 fontSize 18 w800、标题与返回间距一致;
|
||||
- 新剧页背景为 ink、`NEW` 角标为主色、页头与其它二级页一致;
|
||||
- `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 留痕;真机验收由用户执行。
|
||||
**流程**:从 `develop` 拉 `feature/flutter-k39-subpage-header`;作者 `Zhou Weidong <502333560@qq.com>`;`--no-ff` 合回 develop 并 push;PROGRESS 留痕;真机验收由用户执行。
|
||||
@@ -21292,3 +21292,35 @@ Running Gradle task 'assembleDebug'...
|
||||
```
|
||||
|
||||
解读:静态检查零告警,437 条测试全部通过,debug APK 构建成功。工作区原有 `pubspec.lock` 变更未纳入本批提交。真机验收由用户执行。
|
||||
|
||||
## 2026-10-20 ReelShort:K39-A 二级页头统一与新剧暖色恢复
|
||||
|
||||
- 前置状态:K38-A 已合并,功能提交 `69faa78`,合并提交 `7b2970d`。
|
||||
- 分支:`feature/flutter-k39-subpage-header`
|
||||
- 功能提交:`1c6c921 feat(flutter): 统一二级页头并恢复新剧暖色`
|
||||
- develop 合并提交:`9864c8e merge: 合并 K39-A 二级页头统一`,已推送。
|
||||
- 新增 `lib/core/widgets/subpage_header.dart`:`AppSubpageHeader` 高 52/带副标题 64、左右 14、透明背景;返回按钮 36×36,浅色页 card 圆底、深色页透明底白图标;标题 18 w800 左对齐,和返回按钮间距 12;支持副标题、actions 与 onBack。
|
||||
- `PlainPageScaffold` 改为复用公共页头,统一覆盖榜单、设置、观看记录、收藏、下载、钱包、商店、分类页、通知、账户四页和「我的」占位页;筛选、预约、新剧、创作占位页直接接入公共页头;详情页返回按钮复用同一 36×36 深色实现。
|
||||
- 删除二级页面默认 `AppBar` 和私有返回栏实现,保留原有 `<page>-back` Key,并为原先缺少 Key 的页面补齐稳定返回 Key。
|
||||
- 新剧页恢复暖色首映厅:`AppColors.ink` 背景 + `surfaceTop` 顶部渐变、深色状态栏;统一页头;NEW 角标主色;本周上新胶囊 `badgeBeige + blue`;胶片分隔条改 raised 底与 border 孔洞;横向更多新剧改白卡、深色剧名和弱化日期。
|
||||
- 预约、筛选、榜单配色保持不变,仅替换页头。
|
||||
|
||||
测试:新增公共页头尺寸、标题规格、按钮间距、副标题高度与深色模式测试;抽查筛选、榜单、预约、新剧、设置、通知页返回按钮 36×36 与标题 18 w800;新剧页额外断言 ink 背景和主色 NEW 角标。
|
||||
|
||||
门禁原始输出:
|
||||
|
||||
```text
|
||||
$ dart analyze lib test
|
||||
Analyzing lib, test...
|
||||
No issues found!
|
||||
|
||||
$ flutter test
|
||||
00:45 +440: All tests passed!
|
||||
|
||||
$ flutter build apk --debug
|
||||
Running Gradle task 'assembleDebug'...
|
||||
7.7s
|
||||
✓ Built build/app/outputs/flutter-apk/app-debug.apk
|
||||
```
|
||||
|
||||
解读:静态检查零告警,440 条测试全部通过,debug APK 构建成功。工作区原有 `pubspec.lock` 变更未纳入本批提交。真机验收由用户执行。
|
||||
Reference in new issue
Block a user