# 2026-10-17 K6 客户端 UI：登录页 + 底部导航优化

## 一、目标与边界

本批只优化 Flutter 登录页和首页底部导航，基于 K5 克莱因蓝主题：

- K6-A：登录页品牌区、autofill、密码显隐、键盘 next/done 提交、
  提交中禁用、主题语义错误色、小屏键盘可用性。
- K6-B：底部导航背景/边框/选中态统一使用 K5 token，安全区适配，
  点击区域 ≥48pt，切换动效 ≤200ms。
- K6-C：新增可注入 `Haptics` 封装，只对关键操作提供 selection/light/medium 反馈。
- K6-D：新增 widget 测试并保持既有 Key、导航逻辑与沉浸隐藏行为。

不做忘记密码、Google/Apple 登录、隐私勾选、新 tab、页面信息架构调整；
不改接口、业务校验、注册/登录流程、后端、Web 或 specs。

## 二、设计口径

- 主色：`AppColors.blue = #002FA7`。
- 按下态/大面积激活背景：`AppColors.bluePressed = #00227A`。
- 深色底高亮：`AppColors.blueSoft = #5B7BE0`。
- 主色上的文字/图标：`AppColors.onPrimary = #FFFFFF`。
- 错误提示使用 `ColorScheme.error/onError` 对应语义色。
- 底栏背景使用现有 `AppColors.bar`，顶部边框使用主题 outline 或现有暗色 token；
  页面不新增色值字面量。

## 三、预计影响文件

- `lib/pages/auth/auth_view.dart`
- `lib/pages/home/home_view.dart`
- `lib/core/platform/haptics.dart`
- `lib/app.dart`（Haptics Provider）
- 收藏、点赞、评论、举报、下载、记录相关页面回调
- `lib/l10n/app_{en,zh,id}.arb` 与生成文件
- `test/auth/auth_page_test.dart`
- `test/widget_test.dart`
- 必要时补首页导航专用测试文件

不修改 `HomeLogic` 的 tab 顺序、选中规则和 Key；不动播放页沉浸状态来源。

## 四、交互与可用性

### 登录页

- 品牌区显示 App 名和印尼市场副标题，全部走 l10n 三语。
- 邮箱 `TextInputAction.next`，提交后焦点进入密码框。
- 密码 `TextInputAction.done`，提交后直接执行现有 `_submit()`。
- 邮箱 `AutofillHints.email`，密码 `AutofillHints.password`。
- 密码显隐按钮语义标签走 l10n，所有点击区域 ≥44pt。
- `busy` 时禁用两个输入框、显隐按钮、提交和模式切换。
- 使用 `resizeToAvoidBottomInset` + ListView/SafeArea，保证小屏键盘下
  submit 可滚动到可见区域。

### 底部导航

- 保持 4 个 tab 的数量、顺序、Key 和回调不变。
- 选中态采用克制的背景胶囊（现有方案收敛）或短指示条，二选一即可；
  使用 `bluePressed` 胶囊 + `blueSoft` 高亮文字/图标。
- 底栏高度 + SafeArea bottom 适配 home indicator。
- 每个 tab 的可点击区域至少 48pt；动效控制在 200ms 内。
- `logic.videoImmersive == true` 时保持 `bottomNavigationBar: null`。

### 点击震动反馈

- 使用 Flutter 内置 `HapticFeedback`，统一封装为 `Haptics` 抽象 +
  `FlutterHaptics` 默认实现，通过 Provider 注入，测试使用 fake。
- tab 真正切换：`selectionClick()`。
- 登录/注册提交、收藏/取消、点赞/取消、评论发送、举报提交、下载授权申请：
  `lightImpact()`。
- 清空记录、清空下载、删除记录/授权：`mediumImpact()`。
- 全部 `unawaited`；平台不可用时默认实现静默忽略；普通列表/滚动/页面切换不触发。

## 五、TDD 顺序

1. 新增登录页密码显隐、autofill、next/done 焦点、busy 禁用、错误语义色测试。
2. 新增底栏 4 Key、tab 切换选中态、沉浸隐藏、最小点击区域和硬编码色扫描测试。
3. 新增 fake Haptics 测试，覆盖 tab selection、主操作 light、危险操作 medium、
   普通列表不触发与默认实现异常静默。
4. 先运行定向测试确认红灯，再实现登录页、底栏与 Haptics 转绿。
5. 补 320×568 小屏与键盘弹出回归。
6. 全量门禁：`dart analyze lib test`、`flutter test`、
   `flutter build apk --debug`。

## 六、风险与处理

- 登录页已有业务逻辑较长：仅提取品牌区和表单展示组件，不改
  `AuthLogic`、接口调用与校验规则。
- 键盘焦点流转依赖 `FocusNode`：显式创建并释放，测试使用
  `tester.testTextInput.receiveAction(TextInputAction.next/done)`。
- busy 状态下测试请求不能立即返回：使用可控 Fake Auth 或延迟 Future，
  验证输入和按钮禁用，再释放请求避免测试悬挂。
- 底栏新增动画可能影响既有 `pumpAndSettle`：统一使用 ≤200ms，
  不引入第三方动画库。
- Haptics 注入遗漏会让页面测试缺少 Provider：所有直接 pump 页面的测试
  统一注入 fake；生产默认实现吞掉平台不可用异常，不影响业务。
- 安全区/小屏可能压缩按钮高度：使用最小点击区约束与
  `SafeArea(minimum: ...)`，保持现有 Key 可定位。

## 七、待确认

- specs 无 UI 设计稿，按“视觉统一 + 可用性”执行；不引入图片资源。
- 当前无产品歧义；若真机出现键盘安全区差异，由用户提供设备侧截图后再做最小修正。