From 368cd0474247f8f7b31a3fb83848328a75e99300 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Wed, 21 Oct 2026 10:34:59 +0800 Subject: [PATCH] =?UTF-8?q?docs(plans):=20=E7=95=99=E7=97=95=20K80=20?= =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E9=9D=A2=E6=9D=BF=E9=87=8D=E5=81=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/INBOX.md | 98 ++++++++++++++++++++++++------------------ docs/plans/PROGRESS.md | 30 +++++++++++++ 2 files changed, 87 insertions(+), 41 deletions(-) diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index 1302fa9..197c133 100644 --- a/docs/plans/INBOX.md +++ b/docs/plans/INBOX.md @@ -1,65 +1,81 @@ # INBOX -## [已处理] K79-A 拖动进度条闪一下(加载态闪烁)修复 +## [已处理] K80-A 播放页「更多」面板按参考图重做 -### 现象 +### 需求 -拖动 / 点按进度条 seek 之后,进度条会闪一下:整条正常进度条被加载轨道替换一瞬,再切回来。 +当前更多面板:图标与文字大小不一致(选项行图标 18 / 文字 12,操作行图标 20 / 文字 14), +行高 44 偏矮,整体显得局促。按产品给的参考图重做:统一尺寸、加大行高、分组卡片、胶囊选中态。 -### 根因 +### 参考图要点 -K77-A 引入的加载态判定是「`isBuffering` 为 true 就切成 `LoadingProgressTrack`」: +- 顶部小把手,无标题、无关闭按钮 +- 浅暖底 + 白色分组卡片(圆角) +- 每行:左侧线性图标 + 标签,右侧选项胶囊或右箭头 +- 选项胶囊:外层浅色条(内边距 4),选中项为白色胶囊、深色加粗文字;未选中透明底、灰色文字 +- 行高明显偏大,留白充足 -- `lib/pages/player/widgets/seek_progress_bar.dart`:`loading = !isInitialized || isBuffering` -- `lib/pages/player/widgets/home_feed_overlay_parts.dart`:`if (!value.isInitialized || value.isBuffering) return _loadingTrack();` +### 现状 -seek 本身会触发播放器短暂的 buffering(几百毫秒),于是拖动过程中/松手瞬间 -进度条被替换成加载轨道,表现为「闪一下」;拖动时也没有排除加载态。 +`lib/pages/player/widgets/player_more_sheet.dart`: -### 修复方案 +- `_rowHeight = 44`、`_segmentHeight = 28`、`_segmentRadius = 8`、`_segmentPadding = 10` +- 有 `_header()`("更多" + 关闭按钮) +- 选项行:图标 18 / 文案 12;操作行:图标 20 / 文案 14 +- 选中胶囊为主题色底 + 白字 -1. **拖动期间永不显示加载态**:只要处于拖动预览(`_previewFraction != null` / `_preview != null`), - 一律渲染正常进度条与滑块。 -2. **缓冲态加去抖**:buffering 需要持续 **350ms** 以上才切到加载轨道; - 恢复播放 / 缓冲结束立即取消定时器并切回正常进度条。 - `!isInitialized`(首帧没出来)仍然立即显示加载轨道,不去抖。 +### 重做规格 -### 实现 - -1. `lib/pages/player/widgets/seek_progress_bar.dart` - - `_SeekProgressBarState` 增加: - - `Timer? _bufferTimer; bool _buffering = false;` - - 监听 `widget.valueListenable`(`initState` / `didUpdateWidget` 处理控制器切换 / `dispose` 移除) - - 监听回调里:未初始化 → 直接置 buffering;buffering 持续 350ms 才 `setState(_buffering = true)`; - 否则取消定时器并复位 - - `_buildTrack`:`final scrubbing = _previewFraction.value != null;` - `final loading = !scrubbing && (!video.isInitialized || _buffering);` -2. `lib/pages/player/widgets/home_feed_overlay_parts.dart` `_FeedProgressBarState` - - 同样的 `Timer + _buffering` 去抖;监听 `widget.controller` - - `build` 里:`final scrubbing = _preview != null;` - `if (source == null || (!scrubbing && _buffering)) return _loadingTrack();` - `source == null`(控制器都没有)仍立即显示加载轨道 - - 加载态期间不响应拖动(`GestureDetector` 的 onHorizontalDrag* 传 null) +1. **整体结构** + - `Material` 底色用 `AppColors.ink`(暖白),顶部圆角 20 + - 内容 `padding: EdgeInsets.fromLTRB(12, 8, 12, 16)` + - 顶部把手:36×4、`AppColors.border`、圆角 999,居中;与内容间距 12 + - **删除 `_header()`(标题 + 关闭按钮)**,保留 key `player-more-drag-handle`; + 关闭方式沿用底部弹层的点外部 / 下拉手势 +2. **分组卡片** + - 新增私有 `_group(List rows)`:`Container` 白底 `AppColors.card`、圆角 16、 + 上下 padding 6 + - 分成两组: + - 组一:倍速、清晰度 + - 组二:清屏播放、画中画(有则显示)、离线缓存 + - 两组之间间距 12 +3. **行样式(选项行与操作行统一)** + - 行高 56,左右内边距 14 + - 图标 22,颜色 `AppColors.onSurface` + - 图标与文字间距 14 + - 标签字号 16、`FontWeight.w600`、`AppColors.onSurface` + - 操作行右侧 `chevron_right_rounded` 22,颜色 `AppColors.subtle` +4. **选项胶囊** + - 外层条:高 34、圆角 10、底色 `AppColors.raised`、水平内边距 4 + - 胶囊:高 26、水平内边距 10、圆角 8、字号 14 + - 选中:底 `AppColors.card`、文字 `AppColors.onSurface`、`w700`、 + 轻阴影 `BoxShadow(color: 0x14000000, blurRadius: 4, offset: Offset(0, 1))` + - 未选中:透明底、`AppColors.muted`、`w500` + - 禁用:文字 `AppColors.subtle` + - 倍速 6 个选项放不下时保持横向滚动(沿用 `SingleChildScrollView`) +5. 保留所有现有 Key(`player-more-sheet`、`player-more-speed-row`、`player-more-speed-<值>`、 + `player-more-quality-<档位>`、`player-more-clear`、`player-more-pip`、`player-more-offline`、 + `player-more-speed`、`player-more-quality`、`player-more-drag-handle`); + `player-more-close` 随关闭按钮一起移除 ### 测试 -- `test/playback/seek_progress_bar_test.dart`: - - 原「buffering 立即出现 `progress-loading`」用例改为 `pump(400ms)` 后出现 - - 新增:`pump(200ms)` 时仍是 `Slider`(去抖生效) - - 新增:拖动中(`onChangeStart` 后)即使 buffering 也不出现 `progress-loading` -- 首页 feed 进度条如有相关用例,同样按去抖(>350ms)与拖动中不切加载态调整 +- `test/player/player_more_sheet_test.dart`、`test/player/player_fullscreen_test.dart`: + - 删除对 `player-more-close` 的点击与断言,改用 `Navigator.pop` / 点外部关闭的场景 + - 行高断言更新为 56,胶囊高度断言更新为 26(外层条 34) + - 其余功能断言(选项点击、PiP 回调、离线缓存回调、顺序)保持 ### 验收 - 门禁:`dart analyze lib test` 零告警、`flutter test` 全过、`flutter build apk --debug` 成功。 -- 真机自查:连续拖动进度条,进度条与滑块不再闪成加载态;真正卡顿(>350ms)仍会显示加载轨道。 +- 真机自查:更多面板行高舒适、图标与文字尺寸统一、选中胶囊为白底深字、分组留白接近参考图。 ### Git -- 从 `develop` 拉 `fix/progress-scrub-flicker`。 -- 提交:`fix(player): 修复拖动进度条时加载态闪烁`,作者 `Zhou Weidong <502333560@qq.com>`。 -- `--no-ff` 合回 `develop` 并 push;`FruitServer/docs/plans/PROGRESS.md` 追加 K79-A 留痕。 +- 从 `develop` 拉 `feat/player-more-sheet-redesign`。 +- 提交:`feat(player): 更多面板按参考图重做`,作者 `Zhou Weidong <502333560@qq.com>`。 +- `--no-ff` 合回 `develop` 并 push;`FruitServer/docs/plans/PROGRESS.md` 追加 K80-A 留痕。 ### 约束 -- 全程中文;禁止 `git add -A`;不改其它播放逻辑;完成后停住等待验收。 +- 全程中文;禁止 `git add -A`;不改面板功能项与播放逻辑;完成后停住等待验收。 diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md index 117b884..8ebf0de 100644 --- a/docs/plans/PROGRESS.md +++ b/docs/plans/PROGRESS.md @@ -22766,3 +22766,33 @@ Running Gradle task 'assembleDebug'... ``` 解读:静态检查零告警,486 条测试全部通过,debug APK 构建成功。真机验收由用户执行。 + +## 2026-10-21 ReelShort:K80-A 播放页「更多」面板重做 + +- 前置状态:K79-A 已完成并合并,develop 合并提交 `c06a67c`。 +- 分支:`feat/player-more-sheet-redesign` +- 功能提交:`7fccd16 feat(player): 更多面板按参考图重做` +- develop 合并提交:`62f8704 merge: 合并 K80-A 更多面板重做`,已推送 `c06a67c..62f8704`。 +- 面板改为 `AppColors.ink` 暖白底,内容边距 `12/8/12/16`,保留 36×4 把手与顶部圆角 20,删除标题和关闭按钮。 +- 倍速/清晰度、清屏/PiP/离线缓存拆为两张白底圆角 16 分组卡片;选项行与操作行统一为 56 高、22 图标、14 图标间距、16 w600 标签。 +- 选项外层改为 34 高浅色胶囊条,内部胶囊 26 高;选中态为白色胶囊、深色 w700 文字和轻阴影,未选中及禁用态分别使用 muted/subtle。 +- 保留全部既有功能 Key,移除 `player-more-close`;选项点击、横滑、PiP、离线缓存、清屏和点外部关闭行为保持。 +- 测试新增面板底色、分组胶囊尺寸、图标/标签规格、选中/未选中/禁用颜色及阴影断言,并更新全屏播放器行高、胶囊尺寸和关闭路径。 + +门禁原始输出: + +```text +$ dart analyze lib test +Analyzing lib, test... +No issues found! + +$ flutter test +00:47 +489: All tests passed! + +$ flutter build apk --debug +Running Gradle task 'assembleDebug'... + 7.5s +✓ Built build/app/outputs/flutter-apk/app-debug.apk +``` + +解读:静态检查零告警,489 条测试全部通过,debug APK 构建成功。真机验收由用户执行。