docs(plans): 留痕 K83 互动栏图标资源
This commit is contained in:
1 parent
4c20c82f96
commit
f90336963b
2 files changed
+71
-30
No files matched your search
+42
-30
@@ -1,47 +1,59 @@
|
||||
# INBOX
|
||||
|
||||
## [已处理] K82-A 右侧互动栏图标按参考图替换并放大
|
||||
## [已处理] K83-A 右侧互动栏改用参考图同款图标资源
|
||||
|
||||
### 需求
|
||||
### 背景
|
||||
|
||||
首页 feed / 全屏播放页右侧的「收藏 / 评论 / 喜欢 / 分享」与参考图不一致:
|
||||
当前是深色圆形底 + 24px 线性图标;参考图为**无底色的大号白色图标**(星形实心、气泡描边、心形实心、弯向右的分享箭头),
|
||||
下方的计数/文字也略大。
|
||||
K82-A 用 Material 图标替换后,形状与参考图仍不一致(星形/气泡/心形/分享箭头细节不同),
|
||||
且 Material 字形自带内边距,视觉上比参考图小。
|
||||
|
||||
已从产品提供的参考图中提取出四个图标(白色 + 透明通道,保留原始形状与相对大小),
|
||||
放在仓库 `assets/icon/rail/`:
|
||||
|
||||
- `rail_save.png`(收藏,实心星)
|
||||
- `rail_comment.png`(评论,带三个点的气泡)
|
||||
- `rail_like.png`(喜欢,实心心形)
|
||||
- `rail_share.png`(分享,弯向右的箭头)
|
||||
|
||||
### 改动
|
||||
|
||||
1. `lib/pages/player/widgets/interaction_rail.dart`
|
||||
- 删除深色圆底:`_buttonBackground` 与 `IconButton.styleFrom(backgroundColor: …)` 一并移除,按钮背景透明
|
||||
- 图标尺寸 `_iconSize`:`24` → `30`
|
||||
- 点击区域 `_buttonSize`:`34` → `44`(保证可点,视觉上不出现底色)
|
||||
- 项间距 `_itemGap`:`18` → `22`
|
||||
- 计数/标签字号:`11` → `12`,仍为白色 + 黑色阴影
|
||||
- `InteractionRailItem` 新增 `mirrorIcon`(默认 `false`):
|
||||
为 `true` 时用 `Transform.flip(flipX: true, …)` 包裹图标,用于把左弯分享箭头镜像成右弯
|
||||
2. 图标替换(两处:`home_feed_overlay.dart` 与 `player_overlay.dart`)
|
||||
- 收藏:`Icons.star_border_rounded` / `Icons.star_rounded` → 统一实心 `Icons.star_rounded`(选中态靠主题色区分)
|
||||
- 评论:保持 `Icons.chat_bubble_outline_rounded` / `Icons.chat_bubble_rounded`
|
||||
- 喜欢:`Icons.favorite_border_rounded` / `Icons.favorite_rounded` → 统一实心 `Icons.favorite_rounded`
|
||||
- 分享:`Icons.ios_share_rounded` → `Icons.reply_rounded` 且 `mirrorIcon: true`(右弯箭头,接近参考图)
|
||||
3. 选中态颜色维持现状:未选中白色、选中 `AppColors.blue`
|
||||
|
||||
### 测试
|
||||
|
||||
- 现有按 Key 的点击/计数用例必须继续通过(Key 不变)
|
||||
- 若有用例断言 `Icons.ios_share_rounded`、`star_border_rounded`、`favorite_border_rounded`,
|
||||
同步改为新图标;新增一条断言:分享项图标为 `Icons.reply_rounded`
|
||||
1. `pubspec.yaml`
|
||||
- `flutter.assets` 增加 `assets/icon/rail/`(目录)
|
||||
2. `lib/pages/player/widgets/interaction_rail.dart`
|
||||
- `InteractionRailItem` 的 `IconData icon / activeIcon` 改为 `String asset`
|
||||
(`selected` 只决定颜色,不再切换图标)
|
||||
- 渲染改为:
|
||||
```dart
|
||||
Image.asset(
|
||||
item.asset,
|
||||
width: _iconSize,
|
||||
height: _iconSize,
|
||||
fit: BoxFit.contain,
|
||||
color: item.selected ? AppColors.blue : Colors.white,
|
||||
colorBlendMode: BlendMode.srcIn,
|
||||
)
|
||||
```
|
||||
- `_iconSize`:`30` → `32`;`_buttonSize` 保持 `44`;`_itemGap`:`22` → `24`
|
||||
- 删除 K82-A 引入的 `mirrorIcon`(新资源本身已朝右)
|
||||
3. `lib/pages/player/widgets/home_feed_overlay.dart` 与 `player_overlay.dart`
|
||||
- 四项分别传:`assets/icon/rail/rail_save.png`、`rail_comment.png`、`rail_like.png`、`rail_share.png`
|
||||
4. 测试
|
||||
- 把 `find.byIcon(Icons.star_rounded / favorite_rounded / reply_rounded / ios_share_rounded …)` 类断言
|
||||
改为查找对应 `Image.asset`(或用 Key 定位后断言 `Image.image` 的 asset 名)
|
||||
- Key(`rail-save`、`rail-comments`、`rail-like`、`rail-share`、`player-rail-*`、计数 Key)保持不变
|
||||
|
||||
### 验收
|
||||
|
||||
- 门禁:`dart analyze lib test` 零告警、`flutter test` 全过、`flutter build apk --debug` 成功。
|
||||
- 真机自查:右侧无深色圆底,四个白色图标明显变大,分享为弯向右的箭头;计数在图标下方居中。
|
||||
- 真机自查:首页 feed 与全屏播放页右侧四个图标与参考图形状一致,大小一致,无深色圆底。
|
||||
|
||||
### Git
|
||||
|
||||
- 从 `develop` 拉 `feat/rail-icons-refresh`。
|
||||
- 提交:`feat(player): 右侧互动栏图标按参考图替换并放大`,作者 `Zhou Weidong <502333560@qq.com>`。
|
||||
- `--no-ff` 合回 `develop` 并 push;`FruitServer/docs/plans/PROGRESS.md` 追加 K82-A 留痕。
|
||||
- 从 `develop` 拉 `feat/rail-icon-assets`。
|
||||
- 提交:`feat(player): 互动栏改用参考图同款图标资源`,作者 `Zhou Weidong <502333560@qq.com>`。
|
||||
- `--no-ff` 合回 `develop` 并 push;`FruitServer/docs/plans/PROGRESS.md` 追加 K83-A 留痕。
|
||||
|
||||
### 约束
|
||||
|
||||
- 全程中文;禁止 `git add -A`;不改互动逻辑与 Key;完成后停住等待验收。
|
||||
- 全程中文;禁止 `git add -A`;图标资源已放到 `assets/icon/rail/`,不要重新绘制或改动形状;
|
||||
不改互动逻辑与 Key;完成后停住等待验收。
|
||||
@@ -22855,3 +22855,32 @@ Running Gradle task 'assembleDebug'...
|
||||
```
|
||||
|
||||
解读:静态检查零告警,490 条测试全部通过,debug APK 构建成功。真机验收由用户执行。
|
||||
|
||||
## 2026-10-21 ReelShort:K83-A 互动栏改用参考图图标资源
|
||||
|
||||
- 前置状态:K82-A 已完成并合并,develop 合并提交 `35de409`。
|
||||
- 分支:`feat/rail-icon-assets`
|
||||
- 功能提交:`cbb9f60 feat(player): 互动栏改用参考图同款图标资源`
|
||||
- develop 合并提交:`97bbced merge: 合并 K83-A 互动栏图标资源`,已推送 `35de409..97bbced`。
|
||||
- 按产品资源原样提交 `rail_save.png`、`rail_comment.png`、`rail_like.png`、`rail_share.png`,未重绘或改形。
|
||||
- `pubspec.yaml` 注册 `assets/icon/rail/`;互动项改为 `String asset`,使用 `Image.asset`、32px、`BlendMode.srcIn` 着色,点击区保持 44、间距调整为 24。
|
||||
- 删除 `mirrorIcon` 与 Material 图标切换逻辑,选中态仅改变图片颜色;首页 feed 与全屏播放页统一使用四张 PNG,所有 Key 与互动行为不变。
|
||||
- 测试改为校验四个 `AssetImage.assetName`、32px 尺寸与 `srcIn` 着色;APK 内已确认包含全部四张 PNG。
|
||||
|
||||
门禁原始输出:
|
||||
|
||||
```text
|
||||
$ dart analyze lib test
|
||||
Analyzing lib, test...
|
||||
No issues found!
|
||||
|
||||
$ flutter test
|
||||
00:50 +490: All tests passed!
|
||||
|
||||
$ flutter build apk --debug
|
||||
Running Gradle task 'assembleDebug'...
|
||||
16.4s
|
||||
✓ Built build/app/outputs/flutter-apk/app-debug.apk
|
||||
```
|
||||
|
||||
解读:静态检查零告警,490 条测试全部通过,debug APK 构建成功。真机验收由用户执行。
|
||||
Reference in new issue
Block a user