From ab0d69914f433c3a70ee1d58b0995acf6077c2e4 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Sat, 17 Oct 2026 16:17:16 +0800 Subject: [PATCH] =?UTF-8?q?docs(plans):=20=E8=AE=B0=E5=BD=95=20K6=20?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=AF=BC=E8=88=AA=E4=B8=8E=E9=9C=87=E5=8A=A8?= =?UTF-8?q?=E5=9B=9E=E6=89=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/2026-10-17-K6.md | 102 +++++++++++++++++++++++++++ docs/plans/INBOX.md | 133 +++++++++++++++++++++++++++++++++++- docs/plans/PROGRESS.md | 86 +++++++++++++++++++++++ 3 files changed, 319 insertions(+), 2 deletions(-) create mode 100644 docs/plans/2026-10-17-K6.md diff --git a/docs/plans/2026-10-17-K6.md b/docs/plans/2026-10-17-K6.md new file mode 100644 index 0000000..834490d --- /dev/null +++ b/docs/plans/2026-10-17-K6.md @@ -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 设计稿,按“视觉统一 + 可用性”执行;不引入图片资源。 +- 当前无产品歧义;若真机出现键盘安全区差异,由用户提供设备侧截图后再做最小修正。 diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index 23e0d36..7706a3f 100644 --- a/docs/plans/INBOX.md +++ b/docs/plans/INBOX.md @@ -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 整体颜色,克莱因蓝,针对印尼市场,认真阅读文档严格执行」。 diff --git a/docs/plans/PROGRESS.md b/docs/plans/PROGRESS.md index c62ed82..44c2995 100644 --- a/docs/plans/PROGRESS.md +++ b/docs/plans/PROGRESS.md @@ -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。