Files
FruitServer/docs/plans/INBOX.md
T

3.8 KiB
Raw Blame History

INBOX

[已处理] K80-A 播放页「更多」面板按参考图重做

需求

当前更多面板:图标与文字大小不一致(选项行图标 18 / 文字 12,操作行图标 20 / 文字 14), 行高 44 偏矮,整体显得局促。按产品给的参考图重做:统一尺寸、加大行高、分组卡片、胶囊选中态。

参考图要点

  • 顶部小把手,无标题、无关闭按钮
  • 浅暖底 + 白色分组卡片(圆角)
  • 每行:左侧线性图标 + 标签,右侧选项胶囊或右箭头
  • 选项胶囊:外层浅色条(内边距 4),选中项为白色胶囊、深色加粗文字;未选中透明底、灰色文字
  • 行高明显偏大,留白充足

现状

lib/pages/player/widgets/player_more_sheet.dart:

  • _rowHeight = 44、_segmentHeight = 28、_segmentRadius = 8、_segmentPadding = 10
  • 有 _header()("更多" + 关闭按钮)
  • 选项行:图标 18 / 文案 12;操作行:图标 20 / 文案 14
  • 选中胶囊为主题色底 + 白字

重做规格

  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<Widget> 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/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 成功。
  • 真机自查:更多面板行高舒适、图标与文字尺寸统一、选中胶囊为白底深字、分组留白接近参考图。

Git

  • 从 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;不改面板功能项与播放逻辑;完成后停住等待验收。