5.0 KiB
5.0 KiB
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.dartlib/pages/home/home_view.dartlib/core/platform/haptics.dartlib/app.dart（Haptics Provider）- 收藏、点赞、评论、举报、下载、记录相关页面回调
lib/l10n/app_{en,zh,id}.arb与生成文件test/auth/auth_page_test.darttest/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 顺序
- 新增登录页密码显隐、autofill、next/done 焦点、busy 禁用、错误语义色测试。
- 新增底栏 4 Key、tab 切换选中态、沉浸隐藏、最小点击区域和硬编码色扫描测试。
- 新增 fake Haptics 测试，覆盖 tab selection、主操作 light、危险操作 medium、 普通列表不触发与默认实现异常静默。
- 先运行定向测试确认红灯，再实现登录页、底栏与 Haptics 转绿。
- 补 320×568 小屏与键盘弹出回归。
- 全量门禁：
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 设计稿，按“视觉统一 + 可用性”执行；不引入图片资源。
- 当前无产品歧义；若真机出现键盘安全区差异，由用户提供设备侧截图后再做最小修正。