diff --git a/docs/plans/INBOX.md b/docs/plans/INBOX.md index bdcaadf..719830b 100644 --- a/docs/plans/INBOX.md +++ b/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 视觉统一」。