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