docs(plans): 下发 K26 移动端设计预览校正任务
This commit is contained in:
1 parent
7613726b1a
commit
5cc6ce9d32
1 file changed
+92
-1
+92
-1
@@ -20,7 +20,98 @@
|
||||
|
||||
---
|
||||
|
||||
## [已完成·待用户验收] 2026-10-19 | K25 客户端详情页 + 播放器对齐设计稿
|
||||
## [待处理] 2026-10-19 | K26 客户端按「移动端设计预览.html」校正六屏
|
||||
|
||||
**用户指令(2026-10-19)**:「现在看 移动端设计预览.html 按这个来」。
|
||||
> 新增权威设计文件(本地已同步):
|
||||
> `/Users/jianghaifeng/Desktop/ReelShort/docs/移动端设计预览.html`
|
||||
> 该文件优先于之前的 Stitch screens;颜色/布局/组件尺寸以它为准。
|
||||
> 保留 K24 已接入的 Outfit/Plus Jakarta Sans 字体,其余按预览校正。
|
||||
|
||||
### 一、全局 Token(按预览)
|
||||
|
||||
- 主色 `#FF5B3D`、强调 `#9278EA`、背景 `#0B0C10`、底栏 `#0D0D11`、
|
||||
卡片 `#1B1C21` / `#1C1D21`、输入 `#25252A`、正文 `#E6E1E3`、次要 `#D2CDD0`、浅橙 `#FFA490`。
|
||||
- 圆角:卡片 10–14、按钮 9、chips 20、封面 10;不再统一全圆。
|
||||
- 字体沿用 Outfit(标题)/ Plus Jakarta Sans(正文);字号按预览 9/10/11/12/13/14/15/18/20。
|
||||
- 更新 `AppColors`/`AppDimens`/`GlassPanel` 默认值;保留现有语义名。
|
||||
|
||||
### 二、首页(预览 01)
|
||||
|
||||
1. 顶部:剧名 + 右侧搜索/菜单 28px 圆钮;不再显示 HOT/Season/剧集头像 Follow。
|
||||
2. 右侧互动:Like / Comment / Share / Favorite 四项,22px 图标 + 9px 文案/计数;
|
||||
下载/PiP 继续收进“更多”。
|
||||
3. 底部玻璃卡(`rgba(15,15,20,.72)`、blur 6、radius 14、padding 11/12):
|
||||
- 题材 tags(都市/甜宠,8px)
|
||||
- `第 x 集 / 共 y 集`(9px)
|
||||
- 剧集标题(13px 800)
|
||||
- 两个等宽 34px 按钮:`▶ 追剧`(橙色)/ `选集`(#2a2a30)
|
||||
4. 底部 3 Tab 文案与图标按预览(首页/发现/我的)。
|
||||
|
||||
### 三、发现页(预览 02)
|
||||
|
||||
1. 顶部:Logo + `发现` + 搜索圆钮 + 头像。
|
||||
2. 搜索框 36px、`#25252A`、全圆、左侧搜索图标。
|
||||
3. 分类 chips:推荐/悬疑/恋爱/动作,选中橙底白字。
|
||||
4. Continue Watching 卡:`#1C1D21`、radius 12、52×66 封面、标题/集数/3px 进度、右侧 56×28 橙色“继续”。
|
||||
5. 4 个快捷入口(筛选/排行榜/新剧/收藏):`#202126`、radius 12、高 62、16px 图标 + 9px 文案。
|
||||
6. `热门短剧` 标题带 3×18 橙色竖条 + 右侧 `全部 ›`;2 列网格,封面高 120、radius 10、
|
||||
左上“免费”角标、底部渐变标题、下方 11px 标题 + 9px 题材。
|
||||
7. 移除预览中没有的额外区块(轮播/多余 banner)。
|
||||
|
||||
### 四、详情页(预览 03)
|
||||
|
||||
1. Hero 高 190、圆角 0、左上 28px 圆形返回;不再放分享/收藏浮层。
|
||||
2. 内容:`N 集 · 已完结`(紫色 9px,完结无数据时只显示 N 集)、标题 18px、简介 11px / 1.6。
|
||||
3. `▶ 开始观看` 40px 橙色按钮。
|
||||
4. `选集` 标题 + 横向/换行集数 chips(1 起,选中橙底白字,锁定紫色)。
|
||||
5. 简化 K25 的统计/CTA 行/剧集预览卡;保留播放、收藏、下载逻辑(收藏/下载可放“更多”)。
|
||||
6. 不加底部 Tab。
|
||||
|
||||
### 五、播放器(预览 04 + 用户要求全屏)
|
||||
|
||||
1. 全屏播放(用户已明确);顶部 46px:28px 返回 + 居中 `剧名 · 第 x 集` + 28px 更多。
|
||||
2. 视频区:中心 52px 播放圆钮;右下 `1.0x` 倍速文字;无右侧互动栏。
|
||||
3. 进度条 3px、`#FF5B3D` 播放段、`#474248` 轨道。
|
||||
4. 三按钮行:`选集` / `评论` / `下一集`,高 32、radius 9,下一集橙色,末集置灰。
|
||||
5. 一条精选评论卡:`#1B1C21`、radius 10、头像/昵称/时间/正文;无评论隐藏。
|
||||
6. 下载/PiP 收进更多;保留票据、自动连播、进度、互动逻辑。
|
||||
|
||||
### 六、我的页(预览 05)
|
||||
|
||||
1. 顶部:Logo + `我的` + 搜索圆钮 + 头像。
|
||||
2. 用户行:48px 头像、昵称、欢迎语、右侧“登录/注册”chip(已登录显示账号信息)。
|
||||
3. 金币卡:`#201B1E`、radius 13、金币图标、我的金币、`0 金币 · 去充值`、右侧 `›`。
|
||||
4. Continue Watching 卡:`#1B1C21`、radius 12、50×64 封面、标题、第 x 集 · 时间、橙色“继续”。
|
||||
5. Tabs:历史(橙色)/ 收藏 / 喜欢;一条历史卡(48×60 封面、标题、集数/时间、播放圆钮)。
|
||||
6. 语言行:`#1B1C21`、radius 12、语言 + 当前值(橙色)。
|
||||
7. 底部 3 Tab;原 My List 区块保留在 Me 页内部。
|
||||
|
||||
### 七、登录页(预览 06)
|
||||
|
||||
1. 居中 64px 渐变 Logo(`#FF5B3D → #9278EA`,radius 18)+ `水果短剧` 20px + 副标题 11px。
|
||||
2. 三个 44px 入口:Google(白底)、手机号(`#25252A`)、邮箱(`#25252A`);
|
||||
Google/手机号后端未就绪时置灰并提示“即将开放”;邮箱进入现有邮箱表单。
|
||||
3. 底部 9px 法律文案:继续即代表同意《用户协议》与《隐私政策》。
|
||||
4. 保留 K21 邮箱表单作为二级页,不改认证逻辑。
|
||||
|
||||
### 八、数据与测试
|
||||
|
||||
- 预览中的 12.4k、3.2k、已完结、VIP 等:有真实数据才显示,否则隐藏,不伪造。
|
||||
- 更新首页/发现/详情/播放器/我的/登录相关测试;保留播放、进度、收藏、下载、PiP 行为断言。
|
||||
- 新增:预览布局关键 Key、3 Tab、搜索、Continue Watching、选集 chips、全屏播放器三按钮、登录入口。
|
||||
- `dart analyze lib test` 零告警;`flutter test` 全过;`flutter build apk --debug` 通过。
|
||||
|
||||
### 九、Git
|
||||
|
||||
- 从干净 `develop`(基线 `eefabb6`)拉 `feature/flutter-k26-mobile-preview`,小步提交;
|
||||
`--no-ff` 合并回 develop 并 push;作者 `Zhou Weidong <502333560@qq.com>`;不动 main。
|
||||
- 计划文档 `FruitServer/docs/plans/2026-10-19-K26.md`;留痕写 `PROGRESS.md`。
|
||||
- 回执:六屏改动、token、测试条数与门禁原始输出、数据缺口、真机验收步骤。
|
||||
|
||||
---
|
||||
|
||||
## [待处理] 2026-10-19 | K25 客户端详情页 + 播放器对齐设计稿
|
||||
|
||||
**用户指令(2026-10-19)**:「开始实现详情页和播放器」。
|
||||
> 设计权威:`docs/design/screens/03-detail.html`、`04-player.html`(origin/main 或 `/tmp/specs-design/docs/design/screens/`)。
|
||||
|
||||
Reference in new issue
Block a user