docs(plans): 下发 K21 登录页 UI 优化任务

docs/plans/INBOX.md

@@ -20,6 +20,83 @@
 
 ---
 
+## [待处理] 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/尺寸清单、测试条数与门禁原始输出、真机验收步骤。
+
+---
+
 ## [已处理·待用户验收] 2026-10-19 | K20 客户端视觉统一（辣椒红主题）
 
 **用户指令（2026-10-19）**：「保留辣椒红，先做 K20 视觉统一」。