# 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. **内容解锁**：金币解锁、看广告解锁、查看会员内容三条；底部说明「具体方式以作品而定」；仅展示可行入口，不可用项明确禁用/说明。

## 二·五 视觉风格 v2（浅色暖橙，2026-10-20 用户指定）

> 用户提供两张参考图（剧场页、竖屏剧集页），以此为准；K28 各屏不再沿用深色主题。

### 色板

| 用途 | 值 |
|---|---|
| 页面背景 | `#FFF8F0`（顶部带 `#FFE9D6` 暖色渐变） |
| 卡片/弹层 | `#FFFFFF` |
| 主色（按钮/选中/图标） | `#FF7A1A` |
| 主色渐变（中央按钮） | `#FF9A3D → #FF6A00` |
| 主文字 | `#1F1B16` |
| 次要文字 | `#8C837B` |
| 弱文字/占位 | `#B3AAA1` |
| 分割线/描边 | `#F0E4D6` |
| 粉色角标底 | `#FFE3EC`（文字 `#FF6A8A`） |
| 深色角标（锁定数） | `#33000000` + 白字 |

### 组件

- 圆角：卡片 16、封面 16、弹层 20、chips 999（胶囊）、按钮 999。
- 阴影：`0x14FF8A3D`，blur 18，y 6；卡片不使用重描边。
- 分类 chips：选中为橙色实心 + 白字；未选中为白底 + 深色字，间距 10。
- 剧卡：大封面（原图比例或 3:4）、左上「桃花源」粉色胶囊、右上锁图标 + 数量、封面右下「全 24 集 / 大结局」米色胶囊、标题 15–16 粗体、副行「更新至 18 集 · 09-04」12px 灰字、右下橙色圆形「+」。
- 底部导航：白/米色毛玻璃，**保持 4 槽（首页 / 剧场 / 创作 / 我的）**，选中图标与文字为橙色；参考图中间的橙色「+」不实现。
- 播放/剧集页：大标题 24 粗体 + 橙点、副标题 14 灰、右侧「…」与圆形按钮；Hero 大图 20 圆角 + 右上题材胶囊 + 分页点；下方横向剧集卡（第 01 集 初遇 / 更新中胶囊）。

### 落地方式

1. 先改 `AppColors/AppTheme/AppDimens` 全局 token，使现有组件整体切换为浅色暖橙。
2. `AppBottomNav` 保持 4 项（首页/剧场/创作/我的），只做视觉换肤；不新增中央按钮/`nav-center-action`。
3. K28-A1 先完成结构；样式统一由 K28-S 批次落地，后续 A2/B/C 直接使用新 token。

## 三、复用与约束

- 底部导航复用 `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，需三语翻译。