4 Commits
3 changed files with 409 additions and 0 deletions

No files matched your search

+102
View File
@@ -0,0 +1,102 @@
# 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 设计稿,按“视觉统一 + 可用性”执行;不引入图片资源。
- 当前无产品歧义;若真机出现键盘安全区差异,由用户提供设备侧截图后再做最小修正。
+221
View File
@@ -20,6 +20,227 @@
---
## [已处理·待用户验收] 2026-10-17 | K6 客户端 UI:登录页 + 底部导航优化
**用户指令(2026-10-17)**:「接下来优化登录页面 UI 及底部导航 UI」。
> **依赖 K5 完成**:必须基于 K5 的克莱因蓝主题(`blue #002FA7` / `bluePressed #00227A` / `blueSoft #5B7BE0` / `onPrimary #FFFFFF`)与统一 `ColorScheme` 再做,不得沿用旧 `#2F7BFF`。
> specs 无 UI 设计稿(已确认),本批以「视觉统一 + 可用性」为目标,不自行改变信息架构。
### 〇、开工前必读
1. `AGENTS.md`、`CODING_STANDARDS.md`、`GIT_WORKFLOW.md`
2. K5 条目与 K5 计划文档(色值 token)
3. specs `docs/02-技术架构.md`(印尼首发)、`docs/19-术语表.md`
4. 本 INBOX 条目
### 一、PM 已勘察的现状(实测)
- 登录页 `lib/pages/auth/auth_view.dart`(246 行):AppBar + ListView,两个 `TextField`、`FilledButton`、错误行、登录/注册切换链接。
- 密码**无显隐切换**;无 `autofillHints`;无键盘 `next/done` 流转;错误提示写死 `#FF6B6B`。
- 主色仍直接引用 `AppColors.blue`,无品牌区;小屏键盘遮挡只靠 ListView 自然滚动。
- 底部导航在 `lib/pages/home/home_view.dart` 的 `_HomeTabs`(约 182–260 行):自定义 `Container` + `Row` + 4 个 `_TabButton`。
- 高度 63,背景 `#0D0D11`、上边框 `#242329` 均为硬编码;只有选中/未选中图标,无指示条;无统一主题 token。
- 现有 Key:`home-tabs-bar`、`tab-discover`、`tab-home`、`tab-my-list`、`tab-my`,**测试依赖,不得改名**。
- 播放沉浸模式(`videoImmersive`)下隐藏导航,需保留。
### 二、本批范围(3 块 + 测试验收,按顺序做)
#### K6-A 登录页 UI 优化
- 品牌区:登录页顶部增加 App 名与一句印尼市场定位副标题(文案走 l10n 三语),使用 K5 主题色;不引入图片资源。
- 表单体验:
- 邮箱 `autofillHints: [AutofillHints.email]`、密码 `[AutofillHints.password]`;
- 密码框增加显隐切换(图标按钮,语义标签走 l10n);
- 键盘动作:邮箱 `next` → 密码 `done` → 提交;提交中禁用输入与按钮;
- 错误提示统一样式,颜色取主题语义错误色,不再硬编码 `#FF6B6B`。
- 布局与可用性:小屏 + 键盘弹出不遮挡输入与提交按钮(`resizeToAvoidBottomInset` + 滚动/SafeArea);所有点击区域 ≥44pt;主按钮用 `blue`,按下态用 `bluePressed`。
- **不改**登录/注册业务逻辑、接口调用、字段校验规则与切换逻辑;**不做**忘记密码(契约无接口)、Google/Apple 登录(属 K4)、隐私协议勾选(无契约要求)。
#### K6-B 底部导航 UI 优化
- 统一使用 K5 主题 token:背景、边框、选中/未选中色全部来自 `AppColors` / `ColorScheme`,移除 `#0D0D11`、`#242329` 等硬编码。
- 视觉:选中项为主色图标 + 主色标签 + 明确的指示条/背景胶囊(二选一,保持克制);未选中为 `muted`;图标 22–24、标签 10–11,间距一致。
- 可用性:整体高度与底部安全区适配(含 iPhone home indicator),每个 tab 点击区域 ≥48pt;切换动效 ≤200ms,不引入第三方动画库。
- **保持**:4 个 tab 的数量、顺序、导航逻辑与全部 Key 不变;播放沉浸模式仍隐藏导航。
- **不做**:新增 tab、改信息架构、改页面内容。
#### K6-C 点击震动反馈
> specs 无触觉反馈规范;此为用户 2026-10-17 明确指令,按下方口径执行。客户端当前 `HapticFeedback` 调用数为 0。
- 使用 Flutter 内置 `HapticFeedback`(`package:flutter/services.dart`),**不引入第三方插件**。
- 统一封装 `lib/core/platform/haptics.dart`(如 `Haptics` 抽象 + 默认实现),页面通过依赖注入调用,便于 widget 测试替换为 fake;禁止在页面里散落直接调用静态 `HapticFeedback.*`。
- 触发范围(克制,只做关键操作):
- 底部导航 tab 切换:`selectionClick()`;
- 主操作按钮成功触发时:登录/注册提交、收藏/取消收藏、点赞/取消点赞、评论发送、举报提交、下载授权申请:`lightImpact()`;
- 危险操作确认(清空观看记录、清空下载、删除记录/授权):`mediumImpact()`。
- 不在普通列表项点击、滚动、页面切换上震动;不新增「震动开关」设置项(避免超出本批)。
- 调用不阻塞 UI:`unawaited(...)`;异常不得影响业务(触觉不可用时静默忽略,禁止空 catch 之外的吞错写法)。
- 真机验收:iPhone 上逐项可感知;iOS 低电量模式会自动禁用触觉,验收时确认未处于低电量模式。
#### K6-D 测试与验收
- widget 测试至少覆盖:
- 底部导航 4 个 Key 存在、选中态随 tab 切换、沉浸模式下隐藏;
- 登录页密码显隐切换、提交中按钮禁用、错误提示展示、键盘 next/done 焦点流转(可用 `tester.testTextInput`);
- 震动反馈:用 fake `Haptics` 断言 tab 切换触发 `selectionClick`、主操作触发 `lightImpact`、危险操作确认触发 `mediumImpact`,且普通列表点击不触发;
- 无新增硬编码色值(沿用 K5 的扫描测试口径)。
- 深色主题、小屏(iPhone SE 级别)、键盘弹出三种场景不溢出。
- 真机验收由用户执行:登录页视觉与交互、底部导航选中态与安全区。
### 三、规范约束
- 颜色只允许来自 K5 的 `AppColors` / `ColorScheme`;页面禁止硬编码色值。
- 新增文案必须 en/zh/id 三份 arb 齐全并重新生成;禁止硬编码文案。
- 保持现有 Key 与业务逻辑;函数 ≤50 行、参数 ≤5、类 ≤300 行、单文件 ≤500 行、嵌套 ≤4 层。
- 新文件首行 `// Author: fruit.com.cn`;public 类/方法文档注释;无 AI 痕迹。
### 四、门禁
1. `dart analyze lib test` 零告警;`flutter test` 全过。
2. `flutter build apk --debug` 通过。
3. 新增测试必须真红后绿;不得删改既有测试来「变绿」。
4. 真机/设备侧验证由用户执行(红线 7、10),回执给「用户可照做步骤 + 每步预期」。
### 五、Git 与留痕
- 从 K5 合并后的干净 `develop` 拉 `feature/flutter-k6-auth-nav-ui`;完成后 `git merge --no-ff` 回 `develop` 并 push;不动 `main`。
- 先写 `FruitServer/docs/plans/2026-10-17-K6.md`(范围、影响文件、风险、待确认)。
- 每步「叙述 + 命令 + 原始输出 + 解读」追加到 `docs/plans/PROGRESS.md`;完成后停住写回执。
- 提交作者与提交者统一 `Zhou Weidong <502333560@qq.com>`。
### 六、K6 完成回执(2026-10-17)
**结论**:K6-A 登录页、K6-B 底部导航、K6-C 点击震动反馈与 K6-D 测试验收均已完成
并停止。未做 K4,未接新接口,未改后端/Web/specs,未跑真机。
#### 6.1 登录页
- 新增 App 品牌区、印尼市场副标题与管理入口一致的三语文案。
- 邮箱/密码 autofill;密码显隐按钮与三语语义标签。
- 键盘 next → done → 提交,提交中禁用输入、显隐、提交和模式切换。
- 错误提示使用 `ColorScheme.error`,不再硬编码错误红。
- submit、显隐按钮、模式切换点击区均 ≥44pt;小屏键盘场景可滚动到 submit。
- 登录/注册接口、校验规则和模式切换逻辑未改。
#### 6.2 底部导航
- 背景 `AppColors.bar`、边框 `ColorScheme.outlineVariant`,移除旧深色边框/背景硬编码。
- 选中项使用 `bluePressed` 胶囊、`onPrimary` 图标、`blueSoft` 标签;
未选中使用 `muted`。
- 160ms 内置动画;64pt 容器 + SafeArea 底部适配;每个 tab 点击区 ≥48pt。
- 4 个 tab 数量、顺序、回调和 Key 不变:
`home-tabs-bar`、`tab-discover`、`tab-home`、`tab-my-list`、`tab-my`。
- `videoImmersive` 为 true 时导航继续隐藏。
#### 6.3 点击震动反馈
- 新增 `lib/core/platform/haptics.dart`:`Haptics` 抽象 +
`FlutterHaptics` 默认实现;通过 `LumaDramaApp` Provider 注入,测试使用 fake。
- 页面没有直接调用静态 `HapticFeedback.*`;静态扫描限定封装文件内部调用。
- 触发范围:
- tab 真正切换:`selectionClick()`;重复点击当前 tab 不触发。
- 登录/注册提交、收藏/取消收藏、剧集/评论点赞、评论发送、举报提交、
下载授权申请:`lightImpact()`。
- 清空观看记录、清空下载、删除记录、删除下载授权:`mediumImpact()`。
- 所有页面调用均为 `unawaited`;平台异常由默认实现静默忽略,不影响业务。
- 普通列表点击、滚动、页面跳转不触发。
#### 6.4 门禁原始结果
```
$ cd /Users/jianghaifeng/Desktop/ReelShort/ReelShort
$ dart analyze lib test
Analyzing lib, test...
No issues found!
$ flutter test
00:14 +263 ~1: All tests passed!
$ flutter build apk --debug
Running Gradle task 'assembleDebug'... 6.6s
✓ Built build/app/outputs/flutter-apk/app-debug.apk
```
`~1` 是既有 live watch 用例在 8081 未启动时按机制跳过,不是失败。
新增测试覆盖:
- 登录品牌、autofill、密码显隐、next/done、busy 禁用、语义错误色、
44pt 点击区和小屏键盘滚动。
- 底栏 4 Key、选中态切换、主题背景/边框、48pt 点击区、160ms 动效和沉浸隐藏。
- Fake Haptics 的 selection/light/medium 触发、重复 tab 不重复触发、
普通列表点击不触发。
- 静态调用扫描与平台触觉异常静默测试。
- Klein Blue 旧色值扫描继续为零。
#### 6.5 Git
- 登录页/底部导航提交:`e609e3a`
`feat(flutter): 优化登录页与底部导航`
- 震动反馈提交:`8a481d5`
`feat(flutter): 增加关键操作震动反馈`
- `--no-ff` 合并提交:`0cedaab`
`merge: 合并 K6 登录导航与震动反馈`
- 已推送:`e52d818..0cedaab develop -> develop`
- author/committer 均为 `Zhou Weidong <502333560@qq.com>`;未操作 `main`。
#### 6.6 用户真机验证步骤与预期
前置:iPhone 关闭低电量模式并确认系统触觉正常;安装最新 debug APK。
以下证据必须由用户在设备侧取得,Codex 未执行真机验证。
1. 打开登录页,检查品牌名、印尼市场副标题、输入框和主按钮。
预期:三语显示正确;按钮为克莱因蓝白字;密码眼睛按钮可切换显隐;
错误提示为系统语义红色;所有点击区易按。
2. 小屏手机打开键盘,使用邮箱键盘 next,密码键盘 done。
预期:焦点从邮箱进入密码;done 触发登录提交;键盘弹出时 submit 可滚动到可见区域。
3. 使用延迟网络或错误账号观察提交过程。
预期:提交时两个输入框、眼睛、submit 和模式切换全部禁用;加载指示可见;
完成后恢复或展示后端错误,不崩溃。
4. 在浅色/深色系统主题与小屏下检查底部 4 个 tab。
预期:4 个 Key 对应入口均存在且顺序不变;选中胶囊和指示清晰;
底部有安全区留白;无文字/图标重叠。
5. 逐一点击非当前 tab。
预期:每次真正切换触发轻微 selection 触觉;重复点击当前 tab 不再触发。
6. 登录提交、收藏/取消、剧集或评论点赞、发送评论、提交举报、申请下载授权。
预期:关键操作触发 lightImpact;触觉不影响请求速度或业务结果。
7. 清空观看记录、清空下载、删除记录或下载授权并确认。
预期:确认后触发更明显的 mediumImpact;取消确认不触发。
8. 点击普通列表项(如“我的”中的语言入口)并滚动列表。
预期:不产生震动;页面切换和滚动保持无触觉。
9. 临时开启 iOS 低电量模式后重复上述操作。
预期:系统可能禁用触觉,但业务、页面和无异常行为保持正常;
正式验收请关闭低电量模式。
设备侧截图、触觉感知结果与系统低电量测试由用户执行。
#### 6.7 已知边界
- 未增加震动开关;触觉遵循系统设置。
- 不做忘记密码、Google/Apple 登录、隐私勾选或新 tab。
- K4 未开始。
---
## [已处理·待用户验收] 2026-10-17 | K5 客户端视觉:克莱因蓝主题 + 印尼市场适配
**用户指令(2026-10-17)**:「改 UI 及 App 整体颜色,克莱因蓝,针对印尼市场,认真阅读文档严格执行」。
+86
View File
@@ -1784,3 +1784,89 @@ To http://git.reelshort2.com/jianghaifeng/ReelShort.git
```
解读:K5 已以 `--no-ff` 合并到 ReelShort develop 并推送,未操作 main。
---
## 2026-10-17 K6 登录页、底部导航与震动反馈(【Codex】)
### 20.1 K6 计划与 UI 红灯
叙述:先写 `docs/plans/2026-10-17-K6.md`,再基于 K5 `develop e52d818`
创建 `feature/flutter-k6-auth-nav-ui`。首轮登录/底栏测试在实现前运行:
```
$ flutter test test/auth/auth_page_test.dart test/widget_test.dart
Found 0 widgets with text "FruitShorts"
Found 0 widgets with key [<'auth-email'>]
Expected: Color(... #101114)
00:07 +22 -5: Some tests failed.
```
解读:品牌区、表单 Key/显隐/焦点、底栏主题样式尚未实现,红灯符合任务范围。
### 20.2 K6 UI 绿灯
实现登录品牌区、autofill、密码显隐、next/done、busy 禁用、主题错误色、
Small screen 滚动和底部导航主题胶囊后:
```
$ flutter test test/auth test/home/home_nav_ui_test.dart test/widget_test.dart test/config/l10n_id_test.dart test/theme
00:06 +42: All tests passed!
```
提交:`e609e3a feat(flutter): 优化登录页与底部导航`。
### 20.3 Haptics 补充需求红灯
FruitServer `93af19e` 新增 K6-C 点击震动反馈。补 fake Haptics 和触发测试后:
```
Error when reading 'lib/core/platform/haptics.dart': No such file or directory
No named parameter with the name 'haptics'
00:02 +1 -4: Some tests failed.
```
解读:Haptics 抽象、Provider 注入与页面触发尚未实现。
### 20.4 Haptics 实现与定向绿灯
新增 `Haptics` + `FlutterHaptics`,通过 Provider 注入;tab selection、
关键操作 light、危险确认 medium;默认实现吞掉平台异常,页面调用全部
`unawaited`。新增 fake/静态扫描/异常静默测试。
```
$ flutter test test/core/haptics_test.dart test/core/haptics_scan_test.dart test/auth test/home/home_nav_ui_test.dart test/comment test/watch test/download test/library test/drama_detail test/player
00:05 +98: All tests passed!
```
提交:`8a481d5 feat(flutter): 增加关键操作震动反馈`。
### 20.5 K6 最终门禁
```
$ dart analyze lib test
Analyzing lib, test...
No issues found!
$ flutter test
00:14 +263 ~1: All tests passed!
$ flutter build apk --debug
Running Gradle task 'assembleDebug'... 6.6s
✓ Built build/app/outputs/flutter-apk/app-debug.apk
```
解读:震动反馈、登录页、底栏和存量测试全部通过;`~1` 为既有 live watch 跳过。
### 20.6 Git
```
e609e3a feat(flutter): 优化登录页与底部导航
8a481d5 feat(flutter): 增加关键操作震动反馈
0cedaab merge: 合并 K6 登录导航与震动反馈
To http://git.reelshort2.com/jianghaifeng/ReelShort.git
e52d818..0cedaab develop -> develop
```
解读:K6 已合并并推送,author/committer 均为 Zhou Weidong,未操作 main。