docs(plans): 合并 K8 登录页视觉回执
This commit is contained in:
Zhou Weidong committed
commit
ad13692b5d
3 files changed
+241
-1
No files matched your search
@@ -0,0 +1,63 @@
|
||||
# 2026-10-17 K8 登录页视觉重设计
|
||||
|
||||
## 一、目标与边界
|
||||
|
||||
将现有登录页从表单堆叠改为深色、克莱因蓝品牌的单页视觉，保留 K6 已完成的
|
||||
AuthLogic、校验、接口、登录/注册流程、autofill、键盘流转、busy 状态和 Haptics。
|
||||
|
||||
- 客户端分支：`feature/flutter-k8-auth-visual`，基线 `develop 6cc5bfc`。
|
||||
- 文档分支：`docs/k8-auth-visual`，FruitServer 只改 `docs/plans/`。
|
||||
- 不改后端、Web、specs、接口契约、其他页面或业务逻辑。
|
||||
- 不新增图片、字体、第三方依赖；品牌图形使用 Material Icons。
|
||||
- 不跑真机，设备侧视觉、键盘与小屏验收由用户执行。
|
||||
|
||||
## 二、视觉与交互实现
|
||||
|
||||
1. 页面背景使用 `AppColors.ink`，顶部叠加克莱因蓝渐变光晕，颜色透明度不超过
|
||||
0.18，并忽略指针事件。
|
||||
2. 品牌区使用 48px 克莱因蓝圆角方块、白色剧集图标、App 名和现有
|
||||
`authBrandTagline`。
|
||||
3. 表单放入 20px 圆角、1px `outlineVariant` 边框、20px 内边距的
|
||||
`AppColors.card` 卡片。
|
||||
4. 输入框使用 52px 高、14px 圆角、`AppColors.bar` 填充，带邮箱/锁前缀图标；
|
||||
聚焦时显示 1.5px 主色边框并高亮图标；密码显隐按钮保留。
|
||||
5. 主按钮全宽 52px、26px 圆角、`AppColors.blue` 背景、白色 16/w700 文字，
|
||||
pressed 态使用 `bluePressed`，loading 为 18px 白色环，busy 时输入、切换与
|
||||
提交均禁用。
|
||||
6. 登录/注册改为双段 pill，实际可见标签为 `signIn` / `signUp`；点击调用现有
|
||||
`toggleMode()`。保留既有 `auth-switch-mode` 兼容入口，避免破坏既有测试。
|
||||
7. 错误提示使用红色 10% 透明背景、12px 圆角、图标和主题 error 色文字的胶囊。
|
||||
8. 首帧使用 220ms 的 `TweenAnimationBuilder` 完成淡入和上滑。
|
||||
9. 保留 `auth-scroll`、`auth-email`、`auth-password`；新增
|
||||
`auth-brand`、`auth-card`、`auth-mode-sign-in`、`auth-mode-sign-up`、
|
||||
`auth-submit`、`auth-error-capsule` 等稳定 Key。
|
||||
|
||||
## 三、影响文件
|
||||
|
||||
- `ReelShort/lib/pages/auth/auth_view.dart`
|
||||
- `ReelShort/test/auth/auth_visual_test.dart`（新增）
|
||||
- `ReelShort/test/auth/auth_page_test.dart`（既有用例保持不变）
|
||||
- `FruitServer/docs/plans/2026-10-17-K8.md`
|
||||
- `FruitServer/docs/plans/PROGRESS.md`
|
||||
- `FruitServer/docs/plans/INBOX.md`（完成后标记 K8 已处理）
|
||||
|
||||
## 四、TDD 与门禁
|
||||
|
||||
1. 先新增视觉测试并运行，确认分段控件、品牌、错误胶囊和尺寸断言红灯。
|
||||
2. 实现登录页视觉后，定向 auth 测试绿灯。
|
||||
3. 运行 `dart analyze lib test` 零告警。
|
||||
4. 运行 `flutter test` 全过。
|
||||
5. 构建前确认没有并发 `flutter run/build`；运行
|
||||
`flutter build apk --debug`。
|
||||
6. 完成后 `merge --no-ff` 回客户端 `develop` 并 push；FruitServer 文档同样
|
||||
合并推送。提交作者与提交者统一为
|
||||
`Zhou Weidong <502333560@qq.com>`。
|
||||
|
||||
## 五、风险与待确认
|
||||
|
||||
- 旧测试按文字链接和 `auth-switch-mode` TextButton 检查交互；本次通过保留
|
||||
兼容入口满足旧用例，同时可见交互必须由新 pill 分段控件完成。
|
||||
- 320px 小屏和键盘弹出时，卡片、错误胶囊及按钮需保持可滚动且不溢出。
|
||||
- 当前检测到 Android `flutter run` 会话；构建门禁前必须复查，若仍占用
|
||||
`build/` 则等待其结束，不能并发构建。
|
||||
- specs 无登录页设计稿，颜色与尺寸以本 INBOX 条目为准，无需新增契约。
|
||||
+22
-1
@@ -20,7 +20,7 @@
|
||||
|
||||
---
|
||||
|
||||
## [待处理] 2026-10-17 | K8 登录页视觉重设计
|
||||
## [已处理·待用户验收] 2026-10-17 | K8 登录页视觉重设计
|
||||
|
||||
**用户指令（2026-10-17）**：「接下来做登录页面 ui 优化，现在这个 ui 不好看」。
|
||||
|
||||
@@ -79,6 +79,27 @@
|
||||
- 先写 `FruitServer/docs/plans/2026-10-17-K8.md`；每步「叙述 + 命令 + 原始输出 + 解读」追加到 `PROGRESS.md`；完成后停住写回执。
|
||||
- 提交作者与提交者统一 `Zhou Weidong <502333560@qq.com>`。
|
||||
|
||||
### 四、K8 完成回执（2026-10-17）
|
||||
|
||||
**结论**：登录页视觉重设计、交互回归、全量测试和 Android debug 构建均完成。
|
||||
未改 AuthLogic、校验、接口、登录/注册流程或其他页面；未跑真机。
|
||||
|
||||
- 客户端分支 `feature/flutter-k8-auth-visual` 已从 `6cc5bfc` 完成并
|
||||
`--no-ff` 合并；修复提交 `45c3c64`，合并提交 `99f64ab`，已推送
|
||||
`6cc5bfc..99f64ab develop`。
|
||||
- 深色背景、≤0.18 克莱因蓝光晕、48px 品牌方块、20px 圆角卡片、52px
|
||||
输入框与主按钮、pill 分段切换、错误胶囊、220ms 淡入上滑均按规格实现。
|
||||
- 既有 `auth-scroll/auth-email/auth-password/auth-switch-mode` Key、autofill、
|
||||
next→done→提交、busy 禁用、密码显隐与 Haptics 保留；新增视觉控件 Key。
|
||||
- 新增 `test/auth/auth_visual_test.dart` 6 个用例；既有
|
||||
`test/auth/auth_page_test.dart` 9 个用例未修改且全过。
|
||||
- `dart analyze lib test` 零告警；`flutter test` 为
|
||||
`00:19 +292 ~1: All tests passed!`；`flutter build apk --debug` 成功。
|
||||
|
||||
用户真机验证步骤与逐步预期、原始命令输出见
|
||||
`docs/plans/PROGRESS.md`「23. K8 登录页视觉重设计」。
|
||||
设备侧截图、键盘与小屏验收由用户执行。
|
||||
|
||||
---
|
||||
|
||||
## [待处理] 2026-10-17 | K7 首页轮播图 + 站内信通知
|
||||
|
||||
@@ -2199,3 +2199,159 @@ $ flutter test
|
||||
预期：轮播自动切到第 2 张；手动拖动后仍可从当前页继续自动轮播。
|
||||
|
||||
设备侧截图、日志与最终验收结论由用户执行。
|
||||
|
||||
---
|
||||
|
||||
## 2026-10-17 K8 登录页视觉重设计
|
||||
|
||||
### 23.1 范围、分支与计划
|
||||
|
||||
叙述：按 INBOX K8 条目重设计登录页视觉，不改 AuthLogic、校验、AuthController、
|
||||
接口、登录/注册流程或其他页面。客户端从 `develop 6cc5bfc` 创建
|
||||
`feature/flutter-k8-auth-visual`；FruitServer 从 K8 任务书提交 `c33e6cd`
|
||||
创建 `docs/k8-auth-visual`，只改 `docs/plans/`。
|
||||
|
||||
开工前先写并提交计划：
|
||||
|
||||
```text
|
||||
e7c11c3 docs(plans): 增加 K8 登录页视觉实施计划
|
||||
```
|
||||
|
||||
实施文件：
|
||||
|
||||
- `lib/pages/auth/auth_view.dart`
|
||||
- `lib/pages/auth/auth_widgets.dart`
|
||||
- `lib/pages/auth/auth_form_widgets.dart`
|
||||
- `test/auth/auth_visual_test.dart`
|
||||
|
||||
`auth_view.dart` 初次实现达到 654 行，触发项目单文件 500 行红线。随后按页面
|
||||
组合、卡片/分段控件、表单控件与品牌组件拆分，最终行数：
|
||||
|
||||
```text
|
||||
259 lib/pages/auth/auth_view.dart
|
||||
183 lib/pages/auth/auth_widgets.dart
|
||||
363 lib/pages/auth/auth_form_widgets.dart
|
||||
311 test/auth/auth_visual_test.dart
|
||||
```
|
||||
|
||||
解读：所有新增 Dart 文件均低于 500 行，页面状态类低于 300 行。
|
||||
|
||||
### 23.2 先红：视觉测试
|
||||
|
||||
叙述：先新增 `test/auth/auth_visual_test.dart`，未改既有
|
||||
`test/auth/auth_page_test.dart`。
|
||||
|
||||
```text
|
||||
$ flutter test test/auth/auth_visual_test.dart
|
||||
Expected: exactly one matching candidate
|
||||
Actual: Found 0 widgets with key [<'auth-brand'>]: []
|
||||
|
||||
Bad state: No element
|
||||
|
||||
The finder "Found 0 widgets with key [<'auth-mode-sign-up'>]: []"
|
||||
could not find any matching widgets.
|
||||
|
||||
Expected: exactly one matching candidate
|
||||
Actual: Found 0 widgets with key [<'auth-error-capsule'>]: []
|
||||
|
||||
00:01 +2 -4: Some tests failed.
|
||||
```
|
||||
|
||||
解读：品牌区、220ms 入场动画、pill 分段控件和错误胶囊尚不存在，红灯与 K8
|
||||
新增视觉范围一致；既有功能型交互仍可运行。
|
||||
|
||||
### 23.3 绿灯：视觉与交互实现
|
||||
|
||||
实现后的新增与既有 auth 用例：
|
||||
|
||||
```text
|
||||
$ flutter test test/auth/auth_visual_test.dart test/auth/auth_page_test.dart
|
||||
00:01 +15: All tests passed!
|
||||
```
|
||||
|
||||
覆盖内容：
|
||||
|
||||
- 深色品牌页、`AppColors.ink`、顶部克莱因蓝渐变透明度不超过 0.18。
|
||||
- 48px 蓝色圆角品牌方块、App 名和印尼市场 tagline。
|
||||
- `AppColors.card`、20px 圆角、1px `outlineVariant` 边框、20px 内边距。
|
||||
- 52px 输入框、14px 圆角、`AppColors.bar` 填充、邮箱/锁前缀图标和聚焦
|
||||
1.5px 主色边框。
|
||||
- 52px 主按钮、26px 圆角、`AppColors.blue`/`bluePressed`、16/w700
|
||||
文字与 18px loading。
|
||||
- pill 登录/注册分段控件、选中主色底、切换调用现有 `toggleMode()`。
|
||||
- 220ms 淡入上滑、错误浅红胶囊、44pt 以上点击区域。
|
||||
- 邮箱→密码焦点流转、密码显隐、busy 禁用、Haptics 和 autofill 均保留。
|
||||
|
||||
既有 `auth-switch-mode` Key 与旧测试所需文本兼容入口保留，但用户可见切换控件
|
||||
已改为 pill 分段；旧用例没有删改。
|
||||
|
||||
### 23.4 全量门禁与构建
|
||||
|
||||
构建前检查并发进程：
|
||||
|
||||
```text
|
||||
$ ps -axo pid=,etime=,args= | rg 'flutter_tools.snapshot (run|build)|xcodebuild|gradlew'
|
||||
```
|
||||
|
||||
输出仅有当前检查命令自身，没有 Flutter run/build 进程后开始门禁。
|
||||
|
||||
```text
|
||||
$ dart analyze lib test
|
||||
Analyzing lib, test...
|
||||
No issues found!
|
||||
```
|
||||
|
||||
```text
|
||||
$ flutter test
|
||||
00:19 +292 ~1: All tests passed!
|
||||
```
|
||||
|
||||
解读：292 项通过，1 项联调测试因客户端接口服务未启动按设计跳过；输出中的
|
||||
`[WatchRecordsController]` 堆栈来自既有故意注入失败的测试。
|
||||
|
||||
```text
|
||||
$ flutter build apk --debug
|
||||
Running Gradle task 'assembleDebug'...
|
||||
38.2s
|
||||
✓ Built build/app/outputs/flutter-apk/app-debug.apk
|
||||
```
|
||||
|
||||
门禁执行期间 Flutter 工具自动改写 `pubspec.lock` 的包镜像和新版 SDK 传递依赖；
|
||||
该文件不属于 K8 范围，已单独还原，未进入提交。
|
||||
|
||||
### 23.5 Git
|
||||
|
||||
```text
|
||||
45c3c64 feat(flutter): 重设计登录页视觉
|
||||
99f64ab merge: 合并 K8 登录页视觉重设计
|
||||
6cc5bfc..99f64ab develop -> develop
|
||||
```
|
||||
|
||||
修复提交与合并提交 author/committer 均为
|
||||
`Zhou Weidong <502333560@qq.com>`。
|
||||
|
||||
### 23.6 用户真机验证步骤与预期
|
||||
|
||||
以下设备侧取证由用户执行，Codex 未跑真机。
|
||||
|
||||
1. 拉取最新客户端 `develop`，冷启动并进入登录页。
|
||||
预期：全屏深色背景，顶部只有克制的蓝色光晕，品牌方块、App 名和印尼
|
||||
tagline 清晰可见。
|
||||
2. 观察表单卡片和输入框。
|
||||
预期：卡片为深色圆角面板；输入框高 52、圆角 14，邮箱和锁图标存在。
|
||||
3. 点击邮箱输入框并切换到密码框。
|
||||
预期：聚焦输入框出现 1.5px 克莱因蓝边框，图标高亮；键盘 Next 会跳到密码，
|
||||
Done 会提交。
|
||||
4. 点击登录/注册 pill 两段。
|
||||
预期：选中段蓝底白字，标题、副标题和按钮文案同步切换。
|
||||
5. 点击密码右侧眼睛按钮。
|
||||
预期：密码明文/密文切换，按钮点击区域不小于 44pt。
|
||||
6. 输入错误邮箱或不安全密码并提交。
|
||||
预期：卡片内出现浅红胶囊错误提示，文案与当前语言一致。
|
||||
7. 在 iPhone SE 尺寸打开键盘并滚动。
|
||||
预期：无横向溢出，提交按钮可滚动到键盘上方并点击。
|
||||
8. 登录/注册提交时观察按钮与触觉。
|
||||
预期：按钮显示 18px 白色 loading 环，输入与分段切换禁用；设备支持触觉时
|
||||
有一次 light impact。
|
||||
|
||||
设备侧截图、日志与最终视觉验收结论由用户执行。
|
||||
Reference in new issue
Block a user