From 0e3ddfc1b1607ed906e5d4a8aa318802456bcc5a Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Mon, 19 Oct 2026 10:31:21 +0800 Subject: [PATCH] =?UTF-8?q?docs(plans):=20=E5=A2=9E=E5=8A=A0=20K21=20?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E5=AE=9E=E6=96=BD=E8=AE=A1=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/plans/2026-10-19-K21.md | 70 ++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 docs/plans/2026-10-19-K21.md diff --git a/docs/plans/2026-10-19-K21.md b/docs/plans/2026-10-19-K21.md new file mode 100644 index 0000000..57b2f66 --- /dev/null +++ b/docs/plans/2026-10-19-K21.md @@ -0,0 +1,70 @@ +# 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;真机由用户验收。