docs(plans): 留痕 K43-A 冷启动灰屏修复
This commit is contained in:
Zhou Weidong committed
1 parent
7a6ecc295f
commit
e08c73efe8
2 files changed
+45
-35
No files matched your search
+15
-35
@@ -1,43 +1,23 @@
|
||||
## [已处理] 2026-10-20 | K42-A 收藏页/观看历史页 UI 重做 + 观看历史刷新卡 loading 修复（仅 App 端）
|
||||
## [已处理] 2026-10-20 | K43-A 修复首页冷启动灰屏闪一下（封面占位改深色）（仅 App 端）
|
||||
|
||||
**用户指令（2026-10-20，原文）**：
|
||||
> 「现在改收藏页和观看历史页面 ui 重新做 观看历史页面下拉刷新后一直loading修复下」
|
||||
> 「现在优化下首页的播放 每次启动安装 首页会灰屏一下 查下是什么原因」
|
||||
|
||||
### 一、观看历史「一直 loading」根因与修复（必须先修）
|
||||
`lib/core/data/services/watch_records_controller.dart`：
|
||||
1. `load()` 每次都用 `_uniqueRecords()` 重建列表，新记录**不带 drama 且 detailLoading 默认为 true**；
|
||||
2. `_hydrate()` 会跳过 `_detailCache` 已存在的 id，导致刷新后这些行既没有 drama、也不会再被 hydrate → 卡片一直转圈（首次进入正常，第二次下拉刷新必现）。
|
||||
3. 修复：
|
||||
- `_uniqueRecords()` 直接回填缓存：命中 `_detailCache` 的记录带 `drama` 且 `detailLoading: false`；未命中才为 true；
|
||||
- `_hydrate()` 中缓存命中的 id 也要回填到当前 records（不能只跳过）；
|
||||
- 刷新失败保留旧 `records`，只在列表为空时展示整页错误；
|
||||
- 刷新期间不清空列表、不整页 loading。
|
||||
4. 新增测试：连续两次 `load()`（第二次详情已缓存）后所有记录 `detailLoading == false` 且 `drama != null`。
|
||||
**已定位原因**
|
||||
1. 冷启动链路：原生开屏（深色）→ `SplashPage`（ink）→ `catalog.settled` 后进入 feed；此时视频未就绪，走 K40-A 的封面占位。
|
||||
2. `RemoteImage` 的加载中/失败占位底色是 `AppColors.bar`（#FFFDFB 近白），上面又叠了 `0x66000000` 黑遮罩（40% 黑），两者混合后呈**中灰**，在深色开屏与视频之间就出现「灰屏一下」。
|
||||
3. 视频 Texture 首帧前本身是黑，不构成灰屏。
|
||||
|
||||
### 二、观看历史页 UI 重做（`lib/pages/watch_records/watch_records_page.dart`）
|
||||
1. 改用统一二级页头：`AppSubpageHeader(title: l10n.watchHistory)`，返回 Key `watch-records-back`；页面 Key `watch-records-page`；去掉 `PlainPageScaffold`。
|
||||
2. 顶部统计行：左侧「共 N 条」（12 号 muted），右侧「清空」文字按钮（图标 delete_sweep + 主色字，Key `watch-records-clear`）。
|
||||
3. 列表卡片重做（Key `watch-record-<id>` 保留）：
|
||||
- 白卡、圆角 14、阴影 `AppTheme.cardShadow`、内边距 10；
|
||||
- 封面 72×96 圆角 10；标题 15 w700 `AppColors.onSurface`（修复原白色不可见）、最多 2 行；
|
||||
- 集数 12 muted；进度条 4px 圆角、主题色、底色 `AppColors.border`；
|
||||
- 进度文案 `x:xx / y:yy` 11 muted；更新时间 11 subtle（有值才显示）；
|
||||
- 右上角 28 圆形浅灰删除按钮（Key `watch-record-remove-<id>` 保留）。
|
||||
4. 下拉刷新改为紧凑样式：20px、`strokeWidth 2`、主题色，`RefreshIndicator(color: AppColors.blue, backgroundColor: AppColors.card, strokeWidth: 2)`；列表保持 `AlwaysScrollableScrollPhysics`，空列表也能下拉。
|
||||
5. 空态/错误态沿用 `EmptyState`，Key 不变。
|
||||
|
||||
### 三、收藏页 UI 重做（`lib/pages/favorites/favorites_page.dart`）
|
||||
1. 改用统一二级页头：`AppSubpageHeader(title: l10n.myFavorites)`，返回 Key `favorites-back`，页面 Key `favorites-page`。
|
||||
2. 顶部统计行：「共 N 部」（12 muted）+ 右侧弱化提示「长按卡片可取消收藏」11 subtle。
|
||||
3. 卡片替换为自定义 `_FavoriteCard`（Key `favorite-card-<id>` 保留）：
|
||||
- 白卡圆角 14、阴影、内边距 10；封面 80×106 圆角 10；右上角实心粉色爱心按钮 28（Key `favorite-remove-<id>` 保留，点击取消收藏 + 轻震动）；
|
||||
- 右侧：标题 15 w700 onSurface 最多 2 行、题材标签 1 行（最多 2 个灰底 11 号）、底部火焰 + `formatInteractionCount(viewCount)` + 共 N 集；
|
||||
- 点击进详情页。
|
||||
4. 下拉刷新同为紧凑样式；空态/错误态 Key 不变。
|
||||
**口径（只改 Flutter，不动后端、不改接口）**
|
||||
1. `RemoteImage` 增加可选 `fallbackColor`（默认仍为 `AppColors.bar`，其它页面行为不变）。
|
||||
2. 播放页未就绪占位：`RemoteImage(..., fallbackColor: Colors.black)`；遮罩从 `0x66000000` 降为 `0x4D000000`（30%），保证「黑底 → 封面 → 视频」全程无浅色/灰色闪屏。
|
||||
3. feed 首帧前最底层始终为纯黑：保留 `player-fallback-background` 并在其下垫 `ColoredBox(Colors.black)`，确保任何加载阶段都不会露出页面底色。
|
||||
4. 顺带确认：`_HomeTabs` 的 `ValueKey(catalog.dramas.first.id)` 会在目录首项变化时重建整棵 Tab 树；仅当首项 id 变化才重建，冷启动只发生一次，保持现状，不加额外动画。
|
||||
5. 其它页面（列表、详情、收藏等）的 `RemoteImage` 占位保持原样。
|
||||
|
||||
**测试/门禁**
|
||||
- 控制器：二次刷新后无残留 detailLoading；
|
||||
- 两页：页头 Key、统计文案、卡片标题为 `AppColors.onSurface`、删除按钮可点击；
|
||||
- 新增：播放页未就绪时 `player-fallback-background` 的 `RemoteImage.fallbackColor == Colors.black`；遮罩透明度为 0x4D；
|
||||
- 现有播放/首页用例保持通过；
|
||||
- `dart analyze lib test` 零告警 + `flutter test` 全过 + `flutter build apk --debug`。
|
||||
|
||||
**流程**：从 `develop` 拉 `feature/flutter-k42-library-pages`；作者 `Zhou Weidong <502333560@qq.com>`；`--no-ff` 合回 develop 并 push；PROGRESS 留痕；真机验收由用户执行。
|
||||
**流程**：从 `develop` 拉 `fix/flutter-k43-cold-start-flash`；作者 `Zhou Weidong <502333560@qq.com>`；`--no-ff` 合回 develop 并 push；PROGRESS 留痕；真机验收由用户执行（冷启动观察是否还有灰屏）。
|
||||
@@ -21464,6 +21464,36 @@ Running Gradle task 'assembleDebug'...
|
||||
- 测试同步断言星形存在、爱心不存在，点击后对应卡片消失。
|
||||
- 门禁：`dart analyze lib test` 零告警，449 条测试全部通过，debug APK 构建成功（8.0s）。
|
||||
|
||||
## 2026-10-20 ReelShort：K43-A 修复首页冷启动灰屏
|
||||
|
||||
- 前置状态：K42-A 主任务、观看历史删除按钮、收藏页星标两条追加均已合并，develop 合并提交 `37802b2`。
|
||||
- 分支：`fix/flutter-k43-cold-start-flash`
|
||||
- 功能提交：`0d2680e fix(flutter): 修复首页冷启动灰屏`
|
||||
- develop 合并提交：`dc73f4e merge: 合并 K43-A 首页冷启动灰屏修复`，已推送。
|
||||
- `RemoteImage` 新增可选 `fallbackColor`，默认仍为 `AppColors.bar`，列表、详情、收藏等其它页面占位不变。
|
||||
- 播放页未就绪封面占位使用 `fallbackColor: Colors.black`，黑色遮罩从 `0x66000000` 调整为 `0x4D000000`，避免近白底色与遮罩混合成中灰。
|
||||
- 首页 feed 每页最底层新增纯黑 `ColoredBox`（Key `home-feed-black-background`），`player-fallback-background`、封面与遮罩 Key 均保留；`_HomeTabs` ValueKey 策略未改。
|
||||
|
||||
测试：新增播放未就绪封面的 `fallbackColor == Colors.black`、遮罩颜色 `0x4D000000`、首页 feed 纯黑底层存在断言。
|
||||
|
||||
门禁原始输出：
|
||||
|
||||
```text
|
||||
$ dart analyze lib test
|
||||
Analyzing 2 items...
|
||||
No issues found! (ran in 3.1s)
|
||||
|
||||
$ flutter test
|
||||
00:46 +449: All tests passed!
|
||||
|
||||
$ flutter build apk --debug
|
||||
Running Gradle task 'assembleDebug'...
|
||||
7.8s
|
||||
✓ Built build/app/outputs/flutter-apk/app-debug.apk
|
||||
```
|
||||
|
||||
解读：静态检查零告警，449 条测试全部通过，debug APK 构建成功。真机冷启动是否仍有灰屏由用户验收。
|
||||
|
||||
## 2026-10-20 ReelShort：详情页顶部圆形按钮统一修正
|
||||
|
||||
- 前置状态：K40-B 评论入口登录闸已合并，合并提交 `230f16a`。
|
||||
|
||||
Reference in new issue
Block a user