FruitServer/docs/plans/2026-10-17-K8.md

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