docs(plans): 下发 K24 客户端设计稿对齐任务
This commit is contained in:
1 parent
d88a7de2eb
commit
93b2299630
1 file changed
+87
@@ -20,6 +20,93 @@
|
||||
|
||||
---
|
||||
|
||||
## [待处理] 2026-10-19 | K24 客户端 UI 对齐设计稿(设计系统 + 首页 + 发现)
|
||||
|
||||
**用户指令(2026-10-19)**:「修改客户端 UI,读 specs 下 docs 下的 screens」。
|
||||
> 设计权威文件(已全部读取):
|
||||
> `docs/design/DESIGN.md`、`docs/design/README.md`、`docs/design/screens/01-home.html`、`02-discover.html`
|
||||
> (以及 03-detail / 04-player / 05-me / 06-login,后三屏留到 K25/K26)。
|
||||
> **口径冲突以 README + screens HTML 为准**:`#0B0C10 / #16181F / #FF5B3D / #9278EA`;
|
||||
> `DESIGN.md` 顶部 YAML 的 `#ffb4a5/#cdbdff` 是自动生成色板,不采用。
|
||||
|
||||
### 一、本批范围
|
||||
|
||||
只做「设计系统 + 底部导航 + 首页 + 发现页」。详情页、播放器、我的页、登录页留到 K25/K26。
|
||||
不改后端接口、Web、specs;不改业务数据模型字段;缺失的评分/完结/榜单名次不要伪造。
|
||||
|
||||
### 二、设计 Token(全局)
|
||||
|
||||
1. `lib/core/theme/app_colors.dart` 改为 Obsidian Flare:
|
||||
- background `#0B0C10`、card `#16181F`、surface-elevated `#1D1E28`、bar `#0B0C10`(95% + blur)
|
||||
- primary `#FF5B3D`、pressed `#FF4321`、secondary/lavender `#9278EA`
|
||||
- gold `#FBBF24`、danger/free `#FF5B3D`、success `#34D399`
|
||||
- on-surface `#FFFFFF` / `#E3E2E8`、muted `#A1A1AA`、subtle `#71717A`
|
||||
- border `rgba(255,255,255,0.08)`、glass 高亮 `rgba(255,255,255,0.12-0.14)`
|
||||
- 保留现有语义命名(`AppColors.blue` 等)以免大面积改名,但值统一到新色板;新增 `secondary`、`lavender`、`onSurface`。
|
||||
2. `app_theme.dart`:主色/次色/背景/卡片/描边/进度条统一;固定深色;按钮/chip 使用全圆角;
|
||||
进度条改为 1–2px;补充 `Outfit`(标题)与 `Plus Jakarta Sans`(正文)字体。
|
||||
3. 字体:下载 Outfit + Plus Jakarta Sans 的 OFL TTF 放入 `assets/fonts/`,`pubspec.yaml` 注册;
|
||||
禁止运行时依赖网络字体;若下载失败,使用系统字体并在回执标注未完成项。
|
||||
4. 新增 `lib/core/widgets/glass_panel.dart`(BackdropFilter 16/24px、半透明渐变、白 8–14% 描边、
|
||||
可选圆角 16/24/26),供首页底部卡、顶部按钮等复用。
|
||||
5. 间距/圆角:页面 gutter 16、卡片圆角 16–24、按钮/chip 全圆、卡片间距 12–16;补充到 `app_dimens.dart`。
|
||||
|
||||
### 三、底部导航(3 Tab)
|
||||
|
||||
- 改为 **Home / Discover / Me** 三项,Keys 保留 `tab-home`、`tab-discover`、`tab-my`;
|
||||
删除 `tab-my-list` 独立 Tab(原 My List 内容并入 Me 页)。
|
||||
- 选中态:橙色图标 + 橙色文案 + 下方 1px 橙色圆点;未选中 `white/45`。
|
||||
- 背景 `#0B0C10/95` + 顶部 `white/5` 分隔 + backdrop blur;高度与安全区按设计。
|
||||
- 修正现有 tab 映射:Home 进沉浸 feed,Discover 进发现,Me 进个人页;
|
||||
`My List` 入口保留在 Me 页内部(History/Watchlist/Liked)。
|
||||
- 更新受影响的 widget 测试,不再断言 4 Tab;保留 Home/Discover/Me 的行为断言。
|
||||
|
||||
### 四、首页(Home)
|
||||
|
||||
按 `01-home.html` 重做首页沉浸层(保留 `PlayerPage(homeMode: true)` 视频 feed):
|
||||
1. 顶部:状态栏安全区 + 剧名、`HOT` 徽章、`Season 1 • Vertical Cinema` 副标题;右侧搜索/更多 36px 玻璃圆钮。
|
||||
2. 右侧互动栏:剧集头像 48px + 橙色 Follow `+`;Like / Comment / Bookmark / Share,
|
||||
44–46px 玻璃圆形按钮 + 11px 计数/文案;保留下载/PiP 时收进“更多”菜单,避免超出设计动作集。
|
||||
3. 底部玻璃信息卡(26px 圆角、blur 24):
|
||||
- 题材 chips(`#9278EA/15` 与 `#FF5B3D/15` 半透明底)
|
||||
- `Ep. x / y` pill
|
||||
- 2 行简介
|
||||
- 1px 进度条(播放段 `#FF5B3D`)+ 当前/总时长
|
||||
- `Follow Series` 橙色胶囊主 CTA + `Episodes` 玻璃胶囊
|
||||
4. 顶部/右侧/底部渐变 scrim 按设计稿比例;文字加 `0 2px 8px rgba(0,0,0,.75)` 或置于玻璃 pill。
|
||||
5. 复用现有 Player 逻辑(进度、选集、点赞/收藏/评论),不要重写播放链路。
|
||||
|
||||
### 五、发现页(Discover)
|
||||
|
||||
按 `02-discover.html` 重做:
|
||||
1. 顶部品牌行(橙点 + DramaPulse/FruitShorts + 副标题)+ 右侧头像入口。
|
||||
2. 44px 搜索框(左侧搜索图标、右侧语音占位),接通现有 `DiscoverLogic.search` 过滤;
|
||||
`searchRequest` 时聚焦。
|
||||
3. 全圆分类 chips,选中橙色实心(未选中 `white/8`)。
|
||||
4. Continue Watching 卡:海报 64×88、`Ep. x / y • xx min left`、65% 橙色进度、橙色 Play 按钮;
|
||||
数据用现有观看记录;没有记录时隐藏该卡。
|
||||
5. 4 个快捷入口:Filter / Top Charts / New / Watchlist(玻璃卡 + 图标 + 文案)。
|
||||
6. Trending Dramas:标题 + See All;**2 列**网格,海报比例约 3/4.2、16px 圆角;
|
||||
封面叠加 Free/VIP/HOT 徽章(有数据才显示)、评分(模型无字段则隐藏)、播放量(用 `viewCount`)。
|
||||
7. 移除发现页顶层 3D 轮播(设计稿没有);轮播组件保留但不再挂在 Discover;若删除组件需确认无测试引用。
|
||||
8. 标题 12px、副标题 11px,卡片底色 `#15161E`;与设计一致。
|
||||
|
||||
### 六、测试与门禁
|
||||
|
||||
- 更新受影响的既有测试(4 Tab → 3 Tab;Discover 结构变化),保留播放/进度/收藏等行为断言。
|
||||
- 新增测试:3 Tab 映射、玻璃卡渲染、Discover 搜索过滤、2 列网格。
|
||||
- `dart analyze lib test` 零告警;`flutter test` 全过;`flutter build apk --debug` 通过。
|
||||
- 真机验收由用户执行;不伪造评分/完结/榜单数据。
|
||||
|
||||
### 七、Git 与回执
|
||||
|
||||
- 从干净 `develop` 拉 `feature/flutter-k24-design-system`,小步提交;完成后 `--no-ff` 合并回 develop 并 push;
|
||||
作者 `Zhou Weidong <502333560@qq.com>`;不动 main。
|
||||
- 计划文档 `FruitServer/docs/plans/2026-10-19-K24.md`;留痕写 `PROGRESS.md`。
|
||||
- 回执:token/字体落地、3 Tab、Home/Discover 结构、测试条数与门禁原始输出、已知数据缺口、真机验收步骤。
|
||||
|
||||
---
|
||||
|
||||
## [已处理·待用户验收] 2026-10-19 | K23.1 后台修正:品牌文字、删除按钮红色、布局回归
|
||||
|
||||
**用户反馈(2026-10-19,附截图)**:
|
||||
|
||||
Reference in new issue
Block a user