docs(plans): 新增 K28 UI 简图任务书

2026-10-20 09:31:31 +08:00
1 parent 3d560b8caf
commit b30123b727
@@ -0,0 +1,105 @@
+# 2026-10-20 K28 客户端 UI 重构（按简图）
+
+> 来源：用户 2026-10-19 提供的 5 屏 + 4 面板手绘简图。
+> 原则：先出 UI，再划分功能任务；本批不改后端契约、不伪造接口、不放假按钮的“可用”承诺。
+> 设计语言沿用现有深色主题（Obsidian Flare），简图只定结构与层级。
+
+## 一、信息架构
+
+底部 4 Tab：
+
+| Tab | 页面 | 说明 |
+|---|---|---|
+| 首页 | `home` | 浏览型首页（Banner + 继续观看 + 热门漫剧） |
+| 剧场 | `theater` | 分类 + 语言筛选 + 两列剧库 + 搜索 |
+| 创作 | `create` | AI 制作 / 上传发布 两个入口 |
+| 我的 | `mine` | 账户、金币、会员、菜单 |
+
+播放页改为**推入式全屏页**（保留现有 `PlayerPage` 双模式能力），从首页 Banner/卡片、“继续观看”、剧场卡片、选集进入。
+
+## 二、分屏口径
+
+### 01 首页
+
+- 顶栏：搜索框（占满剩余宽度）+ 头像入口 + 星期文案（周一…周日）。
+- 频道 Tab：`热门 / 免费 / 新剧 / 榜单`，选中项主色下划线/胶囊；`榜单` 跳剧场榜单区。
+- Hero Banner：封面图、剧名（大字号 Outfit）、一句文案、底部页码点；自动轮播 + 手势切换。
+- 继续观看：标题行 + 「查看全部」；卡片含封面、剧名、`第 n 集 · 还剩 m 分钟`、播放按钮。
+- 热门漫剧：标题行 + 「查看更多」；两列卡片，封面 + 标题 + 题材 + `免费/集数` + 热度。
+- 无数据时用现有 `EmptyState`；下拉刷新可选（本批可不加）。
+
+### 02 剧场
+
+- 顶栏：搜索框 + 头像（与首页一致）。
+- 分类 chips：全部 + 服务端分类；语言 chips：全部语言 / 中文 / 印尼语 / 马来语 / 英语。
+- 两列剧卡：封面（原图比例铺满）、标题、题材、`免费` 角标、集数、热度。
+- 搜索：保留现有搜索输入与结果页；点击页面失焦。
+- 下拉刷新保留。
+- 语言筛选：当前接口未下发 `language`，本批只做 UI 选中态，不做数据过滤；在任务清单标注为后端缺口。
+
+### 03 创作
+
+- 标题「创作」+ 副标题「让故事成为漫剧」。
+- 卡 1「AI 制作」：从故事或想法开始，右侧箭头。
+- 卡 2「上传发布」：发布已完成的漫剧，右侧箭头。
+- 入口行为：本批统一进入「敬请期待 / 入驻申请」的诚实占位页，不做假上传、假 AI 生成。
+- 后续功能任务单列（见第五节）。
+
+### 04 我的
+
+- 头像 + 昵称 + 签名/身份文案 + 右侧箭头。
+- 三快捷入口：收藏/追剧、观看历史、本地下载。
+- 金币卡：`金币余额` + 数值 + `充值` 按钮（跳现有钱包/充值页）。
+- 会员卡：`开通会员，解锁更多精彩内容`（跳现有 VIP 页；无 C 端商品时展示“暂未开放”）。
+- 菜单：我的作品、创作者中心、消息通知（支持红点）、设置、帮助与反馈。
+- 未登录：头像区显示登录入口，金币/会员/菜单保持可点但需登录。
+
+### 05 竖屏播放
+
+- 顶栏：返回、更多（右上）。
+- 右侧互动 rail：点赞（含数量）、评论（含数量）、收藏、分享。
+- 底部：剧名、`第 n 集`、题材标签 + `关注`、简介、进度条 + `当前/总时长`、`选集`、`更多`。
+- 中心播放按钮：仅暂停时显示（已定口径）。
+- 清屏：保留现有清屏/退出清屏与“清屏状态跨集保持”。
+
+### 面板
+
+1. **选集**：标题「选集」+ 剧名 + `共 n 集` + 关闭；6 列等宽网格，当前集主色，锁定集显示锁图标，点击切集。
+2. **评论**：标题 `评论 (n)` + 关闭；列表项（头像、昵称、时间、内容、点赞数、回复）；底部输入框 + 发送。
+3. **更多操作**：倍速（当前值）、清晰度（自动）、下载到本地、文字大小、投诉；行尾箭头/当前值。
+4. **内容解锁**：金币解锁、看广告解锁、查看会员内容三条；底部说明「具体方式以作品而定」；仅展示可行入口，不可用项明确禁用/说明。
+
+## 三、复用与约束
+
+- 底部导航复用 `AppBottomNav`（需支持 4 项）。
+- 主题色/字号沿用 `AppColors/AppDimens`；标题 Outfit、正文 Plus Jakarta Sans。
+- 所有新增文案走 l10n（en/zh/id），禁止硬编码。
+- 所有手写 Dart 首行 `// Author: fruit.com.cn`；public 类/方法有文档注释。
+- Key 约定：`tab-home` / `tab-theater` / `tab-create` / `tab-mine`；`home-channel-*`；`theater-language-*`；`create-ai` / `create-upload`；`mine-wallet` / `mine-vip`；播放面板沿用 `player-episodes` / `player-comments` / `player-more-*` / `player-unlock-*`。
+- 单文件 ≤500 行：现有 `player_view.dart` 已超限，本批允许拆文件，不新增超大文件。
+
+## 四、实施批次（先 UI）
+
+| 批次 | 范围 | 验收 |
+|---|---|---|
+| K28-A | 4 Tab IA + 首页 + 剧场 | 4 Tab 可切换；首页/剧场结构与简图一致；既有播放/详情链路可达；`dart analyze` 零告警 + `flutter test` 全过 |
+| K28-B | 创作 + 我的 | 两个新页面结构与简图一致；金币/会员/菜单入口可达；未登录态正确 |
+| K28-C | 竖屏播放 UI + 四面板 | 播放页结构与简图一致；四面板可开合；选集切集/评论/倍速/清屏回归通过 |
+| K28-D | 回归与门禁 | l10n 三语齐全；全部测试通过；APK 构建成功；PROGRESS 留痕 |
+
+## 五、UI 之后的功能任务（待排期）
+
+1. 首页频道真实数据（热门/免费/新剧/榜单）与 Banner 数据补齐。
+2. 剧场语言筛选：后端 VO 下发 `language` 后再接真实过滤。
+3. 创作：AI 制作与上传发布需 C 端创作接口/资质（当前契约缺口，见 INBOX 顶部）。
+4. 金币充值：支付通道接入前保持入口隐藏或明确“暂未开放”。
+5. 会员：C 端会员商品/订阅接口缺失。
+6. 看广告解锁：需要广告平台账号、广告位 ID 与发奖校验接口。
+7. 播放清晰度：接口仅下发 `AUTO`，多清晰度需后端补齐。
+8. 文字大小：需全局字号偏好与持久化。
+
+## 六、风险 / 待确认
+
+- 简图为浅色线稿，实际落地为现有深色主题；如需要浅色版需另出视觉稿。
+- 「创作」两个入口在后端能力缺失时只做诚实占位，不做假流程。
+- 首页频道与周几文案涉及新增 l10n key，需三语翻译。
@@ -1,3 +1,25 @@
+## [待处理] 2026-10-20 | K28 客户端 UI 重构（按 5 屏 + 4 面板简图）
+
+**用户指令**：「先读懂这个ui 简图 然后根据这个简图先出ui 在划分任务」
+
+**计划文件**：`docs/plans/2026-10-20-K28-ui-wireframe.md`（先读，按其中分屏口径执行）。
+
+**范围**：只做 UI 与信息架构，不改后端契约、不新增依赖、不做假接口；功能缺口在计划文件第五节登记。
+
+**分批**
+- K28-A：底部 4 Tab（首页/剧场/创作/我的）+ 首页 + 剧场 UI。
+- K28-B：创作页 + 我的页 UI。
+- K28-C：竖屏播放页 UI + 选集/评论/更多操作/内容解锁四面板。
+- K28-D：l10n 三语补齐、回归测试、门禁、PROGRESS 留痕。
+
+**约束**
+- 每批从 `develop` 拉 `feature/flutter-k28-*`，完成后 `--no-ff` 合回 `develop` 并 push。
+- 门禁：`dart analyze lib test` 零告警 + `flutter test` 全过 + `flutter build apk --debug`。
+- 提交作者 `Zhou Weidong <502333560@qq.com>`；禁 `git add -A`；真机验收由用户执行。
+- 播放页现有「清屏/退出清屏、暂停才显示播放按钮、清屏跨集保持、倍速弹窗」口径不得回退。
+
+---
+
 ## 【待 Trae 协助】2026-10-19 | 客户端 P0→P2 契约缺口（不阻塞其余项）

 > 以下能力当前后端契约/配置不具备，客户端不做假按钮、不造接口；已落地的同类入口保持真实可用。请确认后端排期或补充凭据。