64 lines
3.4 KiB
Markdown
64 lines
3.4 KiB
Markdown
# 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 条目为准，无需新增契约。
|