docs(plans): 记录 K24 客户端设计稿对齐
This commit is contained in:
Zhou Weidong committed
1 parent
93b2299630
commit
0f8652c083
3 files changed
+171
-1
No files matched your search
@@ -0,0 +1,102 @@
|
||||
# K24 计划：客户端 UI 对齐设计稿
|
||||
|
||||
日期：2026-10-19
|
||||
客户端基线：`ReelShort/develop` = `b1c69e2`
|
||||
文档基线：`FruitServer/develop` = `93b2299`
|
||||
分支：`feature/flutter-k24-design-system`
|
||||
|
||||
## 一、范围
|
||||
|
||||
本批只做设计系统、3 Tab 底部导航、首页沉浸层、发现页：
|
||||
|
||||
- 设计 token：Obsidian Flare 色板、字体、间距/圆角、玻璃面板。
|
||||
- 底部导航：Home / Discover / Me 三项；My List 不再独立成 Tab，内容并入 Me 页。
|
||||
- 首页：保留 `PlayerPage(homeMode: true)` 播放链路，只替换叠加层与信息卡。
|
||||
- 发现页：品牌行、搜索、分类 chips、Continue Watching、4 个快捷入口、2 列 Trending。
|
||||
|
||||
不做：详情页、播放器、我的页、登录页的视觉重做（K25/K26）；后端、Web、specs、main。
|
||||
|
||||
## 二、设计口径
|
||||
|
||||
权威来源：`docs/design/README.md` + `screens/01-home.html` + `screens/02-discover.html`。
|
||||
不采用 `DESIGN.md` 顶部 YAML 的 `#ffb4a5/#cdbdff`。
|
||||
|
||||
| 语义 | 值 |
|
||||
| --- | --- |
|
||||
| background / ink / bar | `#0B0C10` |
|
||||
| card | `#16181F` |
|
||||
| surface-elevated / raised | `#1D1E28` |
|
||||
| primary / blue | `#FF5B3D` |
|
||||
| pressed / bluePressed | `#FF4321` |
|
||||
| secondary / lavender / blueSoft | `#9278EA` |
|
||||
| gold | `#FBBF24` |
|
||||
| success | `#34D399` |
|
||||
| on-surface | `#FFFFFF` / `#E3E2E8` |
|
||||
| muted | `#A1A1AA` |
|
||||
| subtle | `#71717A` |
|
||||
| border | `rgba(255,255,255,0.08)` |
|
||||
|
||||
字体：Outfit（标题）、Plus Jakarta Sans（正文），OFL TTF 本地打包，不运行时联网。
|
||||
下载失败时保留系统字体，并在回执与 PROGRESS 标注未完成项。
|
||||
|
||||
## 三、TDD 顺序
|
||||
|
||||
1. 设计 token / 主题：先更新 `test/theme/app_theme_test.dart` 期望值与新增 token 断言，再改
|
||||
`app_colors.dart`、`app_theme.dart`、`app_dimens.dart`。
|
||||
2. GlassPanel：先写组件测试（blur、渐变、描边、圆角），再实现 `glass_panel.dart`。
|
||||
3. 3 Tab：先改导航测试为 `tab-home/tab-discover/tab-my`，覆盖选中态、映射、沉浸隐藏；
|
||||
再改 `app_bottom_nav.dart` 与 `home_view.dart`。
|
||||
4. 首页：先用现有 Player 测试保证播放/进度/收藏不回归，再新增首页结构断言
|
||||
（剧名、HOT、右侧互动栏、底部玻璃卡、Follow Series、Episodes）。
|
||||
5. 发现页：先写搜索过滤、2 列网格、Continue Watching 隐藏/显示测试，再改
|
||||
`discover_view.dart` / `discover_logic.dart` / `home_drama_grid.dart`。
|
||||
6. 回归：更新 4 Tab 与轮播挂载相关断言，保留播放、进度、收藏、举报等行为测试。
|
||||
|
||||
## 四、影响文件
|
||||
|
||||
- `lib/core/theme/app_colors.dart`
|
||||
- `lib/core/theme/app_theme.dart`
|
||||
- `lib/core/theme/app_dimens.dart`
|
||||
- `lib/core/widgets/glass_panel.dart`（新增）
|
||||
- `lib/core/widgets/app_bottom_nav.dart`
|
||||
- `lib/pages/home/home_view.dart`
|
||||
- `lib/pages/home/home_logic.dart`
|
||||
- `lib/pages/discover/discover_view.dart`
|
||||
- `lib/pages/discover/discover_logic.dart`
|
||||
- `lib/pages/discover/widgets/home_drama_grid.dart`
|
||||
- `lib/pages/player/player_view.dart`（仅 homeMode 叠加层）
|
||||
- `lib/pages/mine/mine_view.dart`（仅把 My List 区块并入 Me）
|
||||
- `pubspec.yaml`、`assets/fonts/*`
|
||||
- 相关 `test/**`
|
||||
|
||||
## 五、数据缺口与降级
|
||||
|
||||
| 设计字段 | 现有数据 | 处理 |
|
||||
| --- | --- | --- |
|
||||
| 评分 | `Drama` 无评分字段 | 隐藏，不伪造 |
|
||||
| 完结状态 | 无完结字段 | 隐藏 |
|
||||
| 榜单名次 | 无字段 | 用 `isHot` + `viewCount` 排序展示，不编名次 |
|
||||
| VIP 徽章 | 无 VIP 字段；`Episode.locked` 仅集级 | 列表不显示 VIP 徽章 |
|
||||
| Free 徽章 | `freeEpisodes` 仅详情接口 | 有值才显示 |
|
||||
| 点赞/评论数 | 互动接口无剧级计数 | 只显示图标或文案，不编数字 |
|
||||
| Continue Watching 集数/剩余时长 | `WatchProgress` 有位置/时长，无集号 | 有记录才显示，集号缺失时省略 |
|
||||
|
||||
## 六、风险
|
||||
|
||||
- 首页叠加层改动可能影响沉浸模式、PiP、下载入口与既有 tooltip；通过保留原有行为入口并跑
|
||||
`test/widget_test.dart`、`test/home/**`、`test/player/**` 控制风险。
|
||||
- 3 Tab 合并会触碰多个导航测试；只调整 Tab 数量/Key 断言，不改播放与收藏断言。
|
||||
- 新字体增加安装包体积；只打包 Regular/SemiBold/Bold 必要字重。
|
||||
- 发现页数据源仍用 `CategoryController.visibleDramas`，不新增接口。
|
||||
|
||||
## 七、门禁
|
||||
|
||||
```bash
|
||||
flutter pub get
|
||||
dart analyze lib test
|
||||
flutter test
|
||||
flutter build apk --debug
|
||||
```
|
||||
|
||||
提交作者/提交者：`Zhou Weidong <502333560@qq.com>`。
|
||||
|
||||
+1
-1
@@ -20,7 +20,7 @@
|
||||
|
||||
---
|
||||
|
||||
## [待处理] 2026-10-19 | K24 客户端 UI 对齐设计稿（设计系统 + 首页 + 发现）
|
||||
## [已完成·待用户验收] 2026-10-19 | K24 客户端 UI 对齐设计稿（设计系统 + 首页 + 发现）
|
||||
|
||||
**用户指令（2026-10-19）**：「修改客户端 UI，读 specs 下 docs 下的 screens」。
|
||||
> 设计权威文件（已全部读取）：
|
||||
|
||||
@@ -4877,3 +4877,71 @@ f5b399a fix(web): 统一危险操作按钮样式
|
||||
- 2026-10-19 K23.1 轮播图编辑弹窗：680px 三段布局，240×135 图片预览、跳转配置、排序/状态；移除原始 URL 输入，加入图片与条件跳转校验、上传校验与进度遮罩。1024 弹窗宽 680px、正文 scrollWidth=clientWidth、footer 可见；375 弹窗宽 345px、图片区纵向、卡片 240×135、信息区无重叠、页面无横向溢出。Web 提交 `f281dcf`，合并 `685d4fd`，lint/build 通过。
|
||||
|
||||
- 2026-10-19 K23.1 剧集编辑弹窗：680px 三段布局，基础信息、视频文件、付费与状态；视频区固定 240×135，移除原始 URL 输入，加入 MP4/MOV、500MB、上线视频必填校验和上传进度。1024 弹窗宽 680px、视频卡 240×135、数字框 180px、footer 可见；375 弹窗宽 345px、视频区纵向且不重叠、页面无横向溢出。格式校验实测显示“视频仅支持 MP4 或 MOV 格式”。Web 提交 `2b5dda7`，合并 `83e535d`，lint/build 通过。
|
||||
|
||||
### K24 客户端 UI 对齐设计稿（2026-10-19）
|
||||
|
||||
范围：设计系统、3 Tab 底部导航、首页沉浸层、发现页；详情/播放器/我的/登录留 K25/K26。
|
||||
|
||||
设计口径：采用 `README.md` + `screens/01-home.html` + `screens/02-discover.html`
|
||||
的 `#0B0C10 / #16181F / #1D1E28 / #FF5B3D / #FF4321 / #9278EA`，不使用
|
||||
`DESIGN.md` 顶部 YAML 的 `#ffb4a5/#cdbdff`。
|
||||
|
||||
落地：
|
||||
|
||||
- `AppColors` 改 Obsidian Flare，保留 `blue/blueSoft/ink/card` 等旧名并新增
|
||||
`secondary/lavender/onSurface/subtle/success/border`。
|
||||
- 字体 Outfit（标题）+ Plus Jakarta Sans（正文）共 7 个 OFL TTF，放在
|
||||
`assets/fonts/`，两份 OFL 许可证随包；`.gitignore` 放行 fonts 目录。
|
||||
- 新增 `GlassPanel`：`BackdropFilter` 16/24px、白 8-14% 描边、圆角 16/24/26。
|
||||
- 底部导航 3 Tab：`tab-home/tab-discover/tab-my`，删除 `tab-my-list`；选中橙色图标、
|
||||
文案与 3px 圆点，背景 `#0B0C10/95` + blur；My List 区块并入 Me 页。
|
||||
- 首页保留 `PlayerPage(homeMode: true)` 播放链路，新增 `HomeFeedOverlay`：剧名/HOT/
|
||||
Season/搜索/更多，头像 Follow +、Like/Comment/Bookmark/Share 玻璃钮，底部 26px
|
||||
玻璃信息卡、题材 chips、集数、双行简介、1.5px 进度、Follow Series/Episodes。
|
||||
下载与 PiP 收进“更多”底部菜单。
|
||||
- 发现页移除顶层 3D 轮播；新增品牌行+头像、44px 搜索框（现有过滤与 searchRequest 聚焦）、
|
||||
分类 chips、观看记录 Continue Watching（无记录隐藏）、4 个快捷入口、2 列 Trending
|
||||
（3/4.2、16px 圆角、HOT/Free 有数据才显示、viewCount 展示）。
|
||||
|
||||
数据缺口：`Drama` 无评分、完结、VIP、剧级点赞/评论数；对应 UI 隐藏，不补假数据。
|
||||
Continue Watching 只有 `episodeId`，能匹配到当前剧集列表时才显示集号。
|
||||
|
||||
门禁原始输出：
|
||||
|
||||
```text
|
||||
$ dart analyze lib test
|
||||
Analyzing lib, test...
|
||||
No issues found!
|
||||
|
||||
$ flutter test
|
||||
00:26 +347: All tests passed!
|
||||
|
||||
$ flutter build apk --debug
|
||||
Running Gradle task 'assembleDebug'... 38.8s
|
||||
✓ Built build/app/outputs/flutter-apk/app-debug.apk
|
||||
```
|
||||
|
||||
构建说明：用户当时有 `flutter run --device-id=00008101...` 占用主工作区 `build/`，
|
||||
因此在 `/tmp/reelshort-k24-build` 的独立 git worktree 执行 `flutter pub get` 与
|
||||
`flutter build apk --debug`，避免并发构建冲突。
|
||||
|
||||
Git：
|
||||
|
||||
```text
|
||||
eae1c53 feat(theme): 接入 Obsidian Flare 设计系统
|
||||
e8c1859 feat(ui): 重做三 Tab 首页与发现页
|
||||
4553606 merge: K24 客户端 UI 对齐设计稿
|
||||
```
|
||||
|
||||
提交与合并 author/committer 均为 `Zhou Weidong <502333560@qq.com>`。
|
||||
ReelShort `develop` 与 `feature/flutter-k24-design-system` 已推送。
|
||||
|
||||
真机验收步骤（设备侧取证由用户执行）：
|
||||
|
||||
1. `flutter run` 打开 App，确认默认进入 Home 沉浸 feed；底部仅 Home/Discover/Me 三个 Tab。
|
||||
2. Home 检查剧名/HOT/Season、右侧头像+Follow、Like/Comment/Bookmark/Share、底部玻璃卡、
|
||||
集数、简介、橙色进度、Follow Series/Episodes；“更多”内有下载与 PiP。
|
||||
3. 点 Discover，确认品牌行、搜索框、分类 chips、4 快捷入口、2 列 Trending；输入剧名过滤，
|
||||
清空恢复；有观看记录时显示 Continue Watching，无记录时不显示。
|
||||
4. 点 Me，确认账号内容与 History/Watchlist/Liked 在同一页；切回 Home 播放进度与收藏状态保留。
|
||||
5. 深色/浅色系统、320×568 与 390×844 小屏检查无溢出、文字不截断。
|
||||
Reference in new issue
Block a user