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