docs(plans): 记录 K21 登录页优化回执

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；真机由用户验收。

docs/plans/INBOX.md

@@ -20,6 +20,106 @@
 
 ---
 
+## [已处理·待用户验收] 2026-10-19 | K21 登录页 UI 优化
+
+**用户指令（2026-10-19）**：「现在主要做登录页面 ui 优化」。
+> 只改客户端 `ReelShort` 登录/注册页（`lib/pages/auth/**`）及其 l10n；不改接口、后端、Web、specs、main。
+> 主题继续使用辣椒红暖色与 K20 的 `AppDimens` token。
+
+### 一、现状问题
+
+- 品牌区是左上角小横排，缺少登录页应有的品牌感；页面整体顶对齐，大屏下方留白过多。
+- 返回按钮独占一行，推高内容且与品牌区挤在一起。
+- 登录/注册共用一句 `authSubtitle`，注册态缺少针对性说明。
+- 注册态没有密码规则提示（文案已有 `authPasswordHint`，但只作为输入框 hint）。
+- 本地校验失败只有一个错误胶囊，出错字段没有红框定位。
+- `_submit()` 没有 `busy` 短路，密码框 IME 回车可绕过禁用态重复提交；失败分支 `setState` 缺 `mounted` 判断。
+
+### 二、改造项
+
+1. **布局重排**（`auth_view.dart`）
+   - 页面改为「可垂直居中、键盘弹起可滚动」：用 `LayoutBuilder` + `SingleChildScrollView`（保留 Key `auth-scroll`）
+     + `ConstrainedBox(minHeight: 可视高度 - padding)` + 居中内容，最大宽度仍 440。
+   - 返回按钮改为顶部浮层（`Positioned` + `SafeArea`，Key `auth-back` 保留），不再占据内容流；
+     品牌区与卡片整体垂直居中。
+   - 保留 `auth-background-glow` 主光晕（每个颜色 alpha ≤ 0.18），新增一层金色/暖色极淡光晕（alpha ≤ 0.06，独立 Key）。
+2. **品牌区重做**（`auth_widgets.dart`）
+   - `_AuthBrand` 改为居中竖排：品牌图标 + `appName`（26/w800）+ `authBrandTagline`（14，`blueSoft`）。
+   - 品牌图标改用真实资源 `assets/icon/splash_mark.png`（`ClipRRect` 圆角 14 + 辣椒红柔光阴影），
+     **Key `auth-brand-mark` 必须保留且尺寸仍为 48×48**（既有测试断言）。
+3. **卡片与文案**
+   - 卡片结构保持：模式切换 → 标题（25/w800）→ 副标题 → 字段 → 错误胶囊 → 提交按钮。
+   - 副标题按模式区分：登录用现有 `authSubtitle`；注册新增 `authSignUpSubtitle`（三语）：
+     - en: `Create an account to keep your list, history, and progress.`
+     - zh: `创建账号，保存你的片单、观看记录和进度。`
+     - id: `Buat akun untuk menyimpan daftar, riwayat, dan progresmu.`
+   - 注册态在密码框下增加一行 12px 的 `authPasswordHint` 辅助说明；登录态不显示。
+4. **字段级错误定位**（`auth_logic.dart` + `auth_form_widgets.dart`）
+   - `AuthLogic` 增加 `AuthFieldError? fieldError`；`validate()` 失败时记录具体字段错误，`onChanged` 时清除。
+   - 邮箱/密码 `InputDecoration` 增加 `errorBorder` / `focusedErrorBorder`（`colorScheme.error`，宽度 1.5），
+     出错字段显示红框；**错误胶囊 `auth-error-capsule` / `auth-error` 及其文案、圆角 12、alpha 0.1 全部保留**。
+5. **交互健壮性**（`auth_view.dart`）
+   - `_submit()` 开头 `if (_logic.busy) return;`；`catch` 中 `setState` 前判断 `mounted`；
+     `onSubmitted` 在 busy 时忽略。其余提交与导航行为不变。
+6. **视觉细节**
+   - 输入框聚焦时前缀图标保持 `blueSoft`（现状），提交按钮增加极轻的辣椒红阴影（不改背景色断言）。
+   - 页面底部保留 `28 + viewInsets.bottom` 的内边距，确保小屏 + 键盘下提交按钮可达。
+   - 不引入新依赖、不新增图片资源。
+
+### 三、硬约束（既有测试不得改断言）
+
+`test/auth/auth_visual_test.dart` 与 `test/auth/auth_page_test.dart` 必须原样通过，重点保留：
+
+- `auth-brand`、`auth-brand-mark` 尺寸 `48×48`、品牌名与 tagline 文案；
+- `auth-background-glow` 渐变每个颜色 alpha ≤ 0.18；
+- `auth-card` 圆角 20、边框色 `outlineVariantDark`、宽度 1；
+- 输入框高度 52、圆角 14、背景 `AppColors.bar`、聚焦边框 `blue` / 1.5；
+- 提交按钮高度 52、圆角 26、背景 `blue` / 按下 `bluePressed`；
+- `auth-enter-animation` 时长 ≤220ms、tween 0→1；
+- 模式切换 Key、选中色 `blue`、标题文案 `Welcome back` / `Create your account`；
+- 隐藏兼容文案 `New here? Create an account` / `Already have an account? Sign in` 必须仍可被 `find.text` 找到；
+- 错误胶囊 Key、圆角 12、alpha 0.1、错误图标与语义色；
+- 小屏 320×568 + 键盘 260 时 `auth-submit` 可滚动到并可点击。
+
+**测试失败时改实现，不改测试。** 允许新增测试覆盖注册副标题、密码提示与字段红框。
+
+### 四、门禁
+
+`dart analyze lib test` 零告警；`flutter test` 全过；`flutter build apk --debug` 通过。
+真机验收由用户执行，Codex 不做设备侧取证。
+
+### 五、Git 与回执
+
+- 从干净 `develop`（基线 `e44fbdf`）拉 `feature/flutter-k21-auth-ui`，小步提交，完成后
+  `--no-ff` 合并回 develop 并 push；不动 main；作者统一 `Zhou Weidong <502333560@qq.com>`。
+- 计划文档 `FruitServer/docs/plans/2026-10-19-K21.md`；留痕写 `PROGRESS.md` 并单独提交 FruitServer develop。
+- 回执：布局前后差异、三语文案、保留的 Key/尺寸清单、测试条数与门禁原始输出、真机验收步骤。
+
+### 六、K21 完成回执
+
+- 客户端分支：`feature/flutter-k21-auth-ui`
+- 功能提交：`8a96f34`
+- 合并回 develop：`b1c69e2`
+- 已推送：`e44fbdf..b1c69e2 develop`
+- author/committer：`Zhou Weidong <502333560@qq.com>`
+
+已完成：居中可滚动布局、顶部浮层返回、图片品牌 hero、模式独立副标题、
+注册密码规则提示、字段级红框、busy/mounted 保护、双层光晕和提交阴影。
+
+```text
+$ dart analyze lib test
+No issues found!
+
+$ flutter test
+00:24 +343: All tests passed!
+
+$ flutter build apk --debug
+Running Gradle task 'assembleDebug'... 7.5s
+✓ Built build/app/outputs/flutter-apk/app-debug.apk
+```
+
+---
+
 ## [已处理·待用户验收] 2026-10-19 | K20 客户端视觉统一（辣椒红主题）
 
 **用户指令（2026-10-19）**：「保留辣椒红，先做 K20 视觉统一」。

docs/plans/PROGRESS.md

@@ -2202,6 +2202,130 @@ $ flutter test
 
 ---
 
+## 37. K21 登录页 UI 优化
+
+### 37.1 基线与布局
+
+```text
+ReelShort:   e44fbdf style(ui): 合并 K20 客户端视觉统一
+FruitServer: af28161 docs(plans): 下发 K21 登录页 UI 优化任务
+```
+
+计划先提交为 `0e3ddfc docs(plans): 增加 K21 登录页实施计划`。
+
+布局由顶部对齐 + ListView 改为：
+
+- `LayoutBuilder + SingleChildScrollView + ConstrainedBox + Center`；
+- 正常高度品牌与卡片垂直居中；
+- 高度小于 720 时使用紧凑横向品牌，保证 600 高测试视口与提交按钮可达；
+- 返回按钮改为 `Positioned + SafeArea` 浮层，不占内容流；
+- 小屏键盘仍保留 `28 + viewInsets.bottom` 底部 padding，可滚动到 `auth-submit`。
+
+### 37.2 品牌与文案
+
+- `auth-brand-mark` 改用 `assets/icon/splash_mark.png`，尺寸仍为 48×48。
+- 品牌名 26/w800，tagline 14/blueSoft；正常视口居中竖排。
+- 登录使用现有 `authSubtitle`；注册新增 `authSignUpSubtitle`：
+
+```text
+en: Create an account to keep your list, history, and progress.
+zh: 创建账号，保存你的片单、观看记录和进度。
+id: Buat akun untuk menyimpan daftar, riwayat, dan progresmu.
+```
+
+- 注册态密码框下显示 `authPasswordHint`，Key `auth-password-rule`；登录态隐藏。
+
+### 37.3 字段错误与交互
+
+`AuthLogic` 新增 `fieldError`，`validate()` 记录具体字段错误，输入变化或切换模式时清除。
+邮箱/密码字段增加 semantic error 红框：
+
+```text
+errorBorder / focusedErrorBorder
+color = colorScheme.error
+width = 1.5
+```
+
+同时：
+
+- `_submit()` busy 首行短路；
+- 异步 catch 的 `setState` 前判断 mounted；
+- 密码框 IME done 提交同样经过 busy 短路；
+- 提交按钮增加 alpha 0.22 的辣椒红轻阴影，背景色与按下色不变。
+
+### 37.4 保留项
+
+```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 keys, title copy, hidden compatibility copy
+error capsule radius 12 / alpha 0.1 / semantic color
+320x568 + keyboard 260 scroll reachability
+```
+
+主 glow 颜色 alpha 保持 ≤0.18；新增 warm glow Key
+`auth-background-warm-glow`，alpha 上限 0.06。
+
+### 37.5 TDD 与门禁
+
+新增 `test/auth/auth_k21_test.dart`，先红灯后转绿：
+
+```text
+$ flutter test test/auth/auth_k21_test.dart
+00:00 +2: All tests passed!
+```
+
+全部 Auth 测试：
+
+```text
+$ flutter test test/auth/auth_visual_test.dart \
+    test/auth/auth_page_test.dart test/auth/auth_k21_test.dart
+00:01 +17: All tests passed!
+```
+
+全量门禁：
+
+```text
+$ dart analyze lib test
+No issues found!
+
+$ flutter test
+00:24 +343: All tests passed!
+
+$ flutter build apk --debug
+Running Gradle task 'assembleDebug'... 7.5s
+✓ Built build/app/outputs/flutter-apk/app-debug.apk
+```
+
+### 37.6 Git
+
+```text
+8a96f34 feat(auth): 优化登录页布局与字段反馈
+b1c69e2 feat(auth): 合并 K21 登录页优化
+e44fbdf..b1c69e2  develop -> develop
+```
+
+author/committer 均为 `Zhou Weidong <502333560@qq.com>`。
+
+### 37.7 用户真机验收
+
+设备侧取证由用户执行：
+
+1. 普通手机竖屏打开登录页：品牌 hero 与卡片垂直居中，返回键为顶部浮层。
+2. 切换注册：副标题变为注册文案，密码框下出现规则提示。
+3. 提交空邮箱：邮箱出现 1.5px 红色边框，错误胶囊仍保留。
+4. 输入非法邮箱后修改：字段红框清除。
+5. 输入弱密码：密码框变红，规则提示仍在。
+6. 连续点提交或按键盘 Done：只发出一次请求，busy 时按钮与模式切换禁用。
+7. 320×568 小屏弹出键盘：滚动后提交按钮可点击。
+8. 检查主辣椒红 glow、暖色副 glow 均淡且不影响文字对比度。
+9. 检查品牌图为 `splash_mark.png`，显示 48×48，无拉伸。
+
+---
+
 ## 36. K20 客户端视觉统一
 
 ### 36.1 基线与计划