From 5cc6ce9d328fabcaf0524f3fd65e311e7516bf94 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Mon, 19 Oct 2026 15:35:28 +0800 Subject: [PATCH] =?UTF-8?q?docs(plans):=20=E4=B8=8B=E5=8F=91=20K26=20?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=AE=BE=E8=AE=A1=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E6=A0=A1=E6=AD=A3=E4=BB=BB=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/INBOX.md | 93 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 92 insertions(+), 1 deletion(-) diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index a54626f..d739341 100644 --- a/docs/plans/INBOX.md +++ b/docs/plans/INBOX.md @@ -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/`)。