71 lines
2.8 KiB
Markdown
71 lines
2.8 KiB
Markdown
# 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 时自然忽略。
|
||
- 提交按钮增加极淡辣椒红阴影，背景和按下色保持不变。
|
||
|
||
## 不可变清单
|
||
|
||
```text
|
||
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 测试与新增测试，再跑全量门禁。
|
||
|
||
## 门禁
|
||
|
||
```text
|
||
dart analyze lib test
|
||
flutter test
|
||
flutter build apk --debug
|
||
```
|
||
|
||
## 风险
|
||
|
||
- 居中布局与小屏滚动会互相影响，必须保持 `auth-submit` 可滚动到。
|
||
- 字段红框不能通过 errorText 增加字段高度，否则会破坏 52 高度断言。
|
||
- 品牌改为图片资源后仍必须保持 `auth-brand-mark` 为 48×48。
|
||
- 不改接口、后端、Web、specs、main；真机由用户验收。
|