FruitServer/docs/plans/2026-10-19-K21.md

2026-10-19 K21 登录页 UI 优化

基线

• ReelShort develop: e44fbdf
• FruitServer develop: af28161
• 只改 ReelShort/lib/pages/auth/**、l10n 与必要的新增测试。

布局方案

• 用 LayoutBuilder + SingleChildScrollView + ConstrainedBox + Center， 让品牌与卡片在可视区域垂直居中，键盘弹起时仍可滚动。
• 保留 auth-scroll，底部 padding 继续使用 28 + viewInsets.bottom。
• 返回按钮移到顶部 Positioned + SafeArea 浮层，不再占据内容流。
• 内容最大宽度继续为 440，页面左右边距 16。
• 保留主 background glow（alpha ≤0.18），新增独立 Key 的 warm glow（alpha ≤0.06）。

品牌与卡片

• 品牌区居中竖排：48×48 splash mark、App 名 26/w800、tagline 14/blueSoft。
• auth-brand、auth-brand-mark 保留，mark 尺寸严格 48×48。
• 卡片结构保持：模式切换 → 标题 25/w800 → 副标题 → 字段 → 错误胶囊 → 提交。
• 登录继续使用 authSubtitle；注册使用新增 authSignUpSubtitle。
• 注册态密码框下显示 12px 的 authPasswordHint，登录态隐藏。

字段错误与交互

• AuthLogic 增加 fieldError；validate() 记录具体错误，输入变化或切换模式时清除。
• 邮箱/密码字段按 fieldError 使用 1.5px semantic error errorBorder / focusedErrorBorder。
• 保留 auth-error-capsule、auth-error 的文案、圆角 12 和 alpha 0.1。
• _submit() 首行 busy 短路；异步 catch 中的 setState 前检查 mounted。
• 密码框 done 提交仍走同一 _submit()，busy 时自然忽略。
• 提交按钮增加极淡辣椒红阴影，背景和按下色保持不变。

不可变清单

auth-brand-mark 48x48
auth-card radius 20 / border outlineVariantDark / width 1
input height 52 / radius 14 / fill bar / focus blue 1.5
submit height 52 / radius 26 / blue / bluePressed
auth-enter-animation <=220ms / tween 0 -> 1
mode switch keys, hidden compatibility copy
error capsule radius 12 / alpha 0.1 / semantic color
small screen 320x568 + keyboard 260 scroll reachability

TDD

1. 新增测试：注册副标题、注册态密码提示、登录态不显示提示、字段错误红框。
2. 先确认红灯。
3. 补 authSignUpSubtitle 三语并生成 l10n。
4. 调整 AuthLogic、表单字段、品牌和页面布局。
5. 跑两份既有 Auth 测试与新增测试，再跑全量门禁。

门禁

dart analyze lib test
flutter test
flutter build apk --debug

风险

• 居中布局与小屏滚动会互相影响，必须保持 auth-submit 可滚动到。
• 字段红框不能通过 errorText 增加字段高度，否则会破坏 52 高度断言。
• 品牌改为图片资源后仍必须保持 auth-brand-mark 为 48×48。
• 不改接口、后端、Web、specs、main；真机由用户验收。