140 lines
8.2 KiB
Markdown
140 lines
8.2 KiB
Markdown
# 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，需三语翻译。
|