docs(plans): 记录 K6 登录导航与震动回执
This commit is contained in:
Zhou Weidong committed
1 parent
93af19e548
commit
ab0d69914f
3 files changed
+319
-2
No files matched your search
@@ -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 设计稿，按“视觉统一 + 可用性”执行；不引入图片资源。
|
||||
- 当前无产品歧义；若真机出现键盘安全区差异，由用户提供设备侧截图后再做最小修正。
|
||||
+131
-2
@@ -20,7 +20,7 @@
|
||||
|
||||
---
|
||||
|
||||
## [待处理] 2026-10-17 | K6 客户端 UI：登录页 + 底部导航优化
|
||||
## [已处理·待用户验收] 2026-10-17 | K6 客户端 UI：登录页 + 底部导航优化
|
||||
|
||||
**用户指令（2026-10-17）**：「接下来优化登录页面 UI 及底部导航 UI」。
|
||||
|
||||
@@ -110,9 +110,138 @@
|
||||
- 每步「叙述 + 命令 + 原始输出 + 解读」追加到 `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 | K5 客户端视觉：克莱因蓝主题 + 印尼市场适配
|
||||
|
||||
**用户指令（2026-10-17）**：「改 UI 及 App 整体颜色，克莱因蓝，针对印尼市场，认真阅读文档严格执行」。
|
||||
|
||||
|
||||
@@ -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。
|
||||
Reference in new issue
Block a user