83 lines
3.9 KiB
Markdown
83 lines
3.9 KiB
Markdown
# 2026-10-17 K5 客户端视觉:克莱因蓝主题 + 印尼市场适配
|
||
|
||
## 一、目标与边界
|
||
|
||
本轮只完成 Flutter 客户端的主题色、蓝色收敛、印尼语 locale 和回归测试:
|
||
|
||
- K5-A:建立克莱因蓝 token 与浅色/深色显式 `ColorScheme`,主色统一 `#002FA7`。
|
||
- K5-B:清理页面层的旧蓝字面量,统一使用 `AppColors` / `ColorScheme`;不改语义色。
|
||
- K5-C:`LocaleController` 支持 `id`;未显式选择时跟随系统,非 `en/zh/id` 回退 `id`;
|
||
两个现有语言入口增加 Bahasa Indonesia。
|
||
- K5-D:补主题 token、对比度、硬编码扫描、locale 回退与语言切换测试,
|
||
回归深色/浅色、三态和小屏布局。
|
||
|
||
不做 K4、支付、Google 登录、新接口、下载落盘、App 图标/启动图或信息架构调整;
|
||
不改后端、`ReelShortWeb`、specs。
|
||
|
||
## 二、用户裁定色值
|
||
|
||
| Token | 值 | 用途 |
|
||
| --- | --- | --- |
|
||
| `blue` | `#002FA7` | Klein Blue / IKB 主色 |
|
||
| `bluePressed` | `#00227A` | 按下/激活态与大面积蓝色背景 |
|
||
| `blueSoft` | `#5B7BE0` | 深色背景上的高亮/次级文字与图标 |
|
||
| `onPrimary` | `#FFFFFF` | 主色上的文字/图标 |
|
||
| `ink` | `#0B0C10` | 保持现值 |
|
||
| `bar` | `#101114` | 保持现值 |
|
||
| `card` | `#17191F` | 保持现值 |
|
||
| `muted` | `#B7BDC9` | 保持现值 |
|
||
|
||
对比度口径:正文 ≥ 4.5:1,大字/图标 ≥ 3:1;错误红、成功绿、点赞红等语义色不改。
|
||
|
||
## 三、预计影响文件
|
||
|
||
- `lib/core/theme/app_colors.dart`
|
||
- `lib/app.dart`
|
||
- `lib/core/config/locale_controller.dart`
|
||
- `lib/pages/mine/mine_logic.dart`
|
||
- `lib/pages/home/widgets/home_quick_drawer.dart`
|
||
- `lib/pages/home/home_view.dart`
|
||
- `lib/pages/discover/discover_view.dart`
|
||
- `lib/pages/drama_detail/drama_detail_view.dart`
|
||
- `lib/pages/player/player_view.dart`
|
||
- `lib/pages/player/player_logic.dart`
|
||
- `lib/pages/player/widgets/seek_progress_bar.dart`
|
||
- `lib/pages/player/widgets/comment_tile.dart`
|
||
- `lib/pages/player/widgets/drama_comments_sheet.dart`
|
||
- `lib/pages/mine/mine_view.dart`
|
||
- `lib/pages/watch_records/watch_records_page.dart`
|
||
- `lib/pages/downloads/downloads_page.dart`
|
||
- `lib/pages/auth/auth_view.dart`
|
||
- `lib/core/widgets/auth_gate.dart`
|
||
- `lib/l10n/app_{en,zh,id}.arb` 与生成文件
|
||
- `test/theme/*`、`test/config/*`、相关页面 widget 测试
|
||
|
||
实际改动以静态扫描结果为准;不改业务逻辑和页面布局。
|
||
|
||
## 四、TDD 顺序
|
||
|
||
1. 写主题 token/对比度、硬编码蓝色扫描、locale `id` 持久化与未知语言回退测试,确认红灯。
|
||
2. K5-A:新增色值 token 和浅色/深色 `ColorScheme`,补主题测试转绿。
|
||
3. K5-B:按扫描结果替换页面蓝色字面量,补语言入口和 widget 回归。
|
||
4. K5-C:实现 `id` locale、系统语言跟随、未知系统语言回退 `id`,两个入口增加
|
||
Bahasa Indonesia。
|
||
5. K5-D:全量扫描、深色/浅色与小屏 widget 回归。
|
||
6. 门禁:`dart analyze lib test`、`flutter test`、`flutter build apk --debug`。
|
||
7. `--no-ff` 合并回 `develop` 并 push;FruitServer 仅提交 `docs/plans`。
|
||
|
||
## 五、风险与处理
|
||
|
||
- 克莱因蓝在浅色背景上作为文字可能对比不足:正文继续使用现有着色,
|
||
主色主要用于按钮/图标/选中态;主色背景统一配 `onPrimary`。
|
||
- `blueSoft` 仅用于深色背景高亮,避免在浅色背景当正文色造成低对比度。
|
||
- 现有 `_orange` 等历史命名可能实际承载蓝色,替换时按语义改名,避免误导。
|
||
- 直接替换主题色可能影响 FilledButton、Slider、Switch 等 Material 控件:
|
||
通过显式 `ColorScheme` 和 widget 测试统一验证。
|
||
- 语言入口两处需同步,避免“我的”和快捷抽屉行为不一致。
|
||
- 真机、设备截图与系统语言切换证据由用户执行,Codex 不跑真机。
|
||
|
||
## 六、待确认
|
||
|
||
- 当前无产品歧义;按用户裁定的方案 A 色值执行。
|
||
- specs 无成文色板,若后续提供 Stitch 视觉稿,再按新稿更新 token 与页面映射。
|