qzl
100 lines
3.7 KiB
Markdown
100 lines
3.7 KiB
Markdown
# 设置-账户子页面视觉重构设计（编辑资料 / 修改密码）
|
||
|
||
## 背景与目标
|
||
|
||
当前 `编辑资料` 与 `修改密码` 子页面存在明显的“文档页/默认表单堆叠”观感，未满足 `apps/rules/visual_design_language.md` 要求的“高级、柔和、分层、助手产品感”。
|
||
|
||
本次设计目标：
|
||
|
||
- 延续项目现有蓝灰体系，不改变品牌语气
|
||
- 建立清晰的表面层级：背景层 -> 主内容层 -> 次级分组层 -> 交互强调层
|
||
- 将 `修改密码` 对齐 `忘记密码` 的设计语言（分段、状态提示、密码输入体验），但保持“设置域”语义
|
||
- 严格使用 `AppColors` / `AppSpacing` / `AppRadius`，移除新增硬编码视觉值
|
||
|
||
## 约束来源
|
||
|
||
- `apps/AGENTS.md`
|
||
- `apps/rules/visual_design_language.md`
|
||
- 现有共享组件体系（`AppButton`、`AppBanner`、`FixedLengthCodeInput`、Toast 系统）
|
||
|
||
## 方案选择
|
||
|
||
已确认采用方案 B：设置域统一壳层。
|
||
|
||
方案要点：
|
||
|
||
- 在 settings feature 内建立可复用的页面壳与分组卡片语义
|
||
- 两个子页面共享同一结构语言与间距节奏
|
||
- `修改密码` 采用步骤型结构（Step 1 验证邮箱 / Step 2 设置新密码）
|
||
|
||
## 信息架构
|
||
|
||
### 编辑资料
|
||
|
||
- 页面头部：返回 + 标题 + 简短辅助说明
|
||
- 主内容卡：
|
||
- 资料概览组（头像占位、当前账号信息）
|
||
- 基础信息组（用户名输入）
|
||
- 个人简介组（多行输入 + 字数）
|
||
- 底部强调操作区：`保存修改` 按钮（仅在有变更且可提交时可用）
|
||
|
||
### 修改密码（步骤型）
|
||
|
||
- 页面头部：返回 + 标题 + 简短辅助说明
|
||
- Step 1：邮箱验证与验证码发送
|
||
- 展示当前邮箱
|
||
- 发送/重发验证码 + 倒计时
|
||
- Step 2：输入验证码并设置新密码
|
||
- 验证码输入
|
||
- 新密码、确认密码
|
||
- 状态提示（使用 `AppBanner`）
|
||
- 底部强调操作区：`确认修改`
|
||
|
||
## 视觉与交互规则
|
||
|
||
- 背景：`AppColors.surfaceSecondary`
|
||
- 主卡：`AppColors.white` + `AppColors.borderSecondary` + 圆角 `AppRadius.lg/xl`
|
||
- 次级分组：`AppColors.surfaceTertiary/surfaceInfoLight`（按语义使用）+ `AppColors.borderTertiary`
|
||
- 输入聚焦态：`AppColors.blue500`
|
||
- 间距节奏：
|
||
- 页面外边距：`AppSpacing.xl`
|
||
- 组内：`AppSpacing.sm/lg`
|
||
- 组间：`AppSpacing.xxl`
|
||
- 动效策略：仅保留柔和状态反馈（按钮 loading/disabled、步骤区显隐、输入 focus），不添加噱头动画
|
||
|
||
## 组件与复用策略
|
||
|
||
- 优先复用：
|
||
- `AppButton`
|
||
- `FixedLengthCodeInput`
|
||
- `AppBanner`
|
||
- Toast 系统
|
||
- `PasswordField`（与忘记密码页统一密码输入体验）
|
||
- 在 settings 域新增可复用 UI：
|
||
- `account_surface_scaffold.dart`
|
||
- `account_section_card.dart`
|
||
|
||
## 影响文件
|
||
|
||
- 修改：`apps/lib/features/settings/ui/screens/edit_profile_screen.dart`
|
||
- 修改：`apps/lib/features/settings/ui/screens/change_password_screen.dart`
|
||
- 新增：`apps/lib/features/settings/ui/widgets/account_surface_scaffold.dart`
|
||
- 新增：`apps/lib/features/settings/ui/widgets/account_section_card.dart`
|
||
- 可能补充：`apps/lib/core/theme/design_tokens.dart`（仅缺失 token 时）
|
||
|
||
## 验收标准
|
||
|
||
- 两个页面具备一致的“柔和卡片分层”结构
|
||
- 修改密码页面与忘记密码页面在设计语言上可感知一致
|
||
- 不出现“纯白文档页/后台表单页”观感
|
||
- 不新增视觉硬编码，遵守 token 体系
|
||
- 核心交互逻辑不回归（验证码、倒计时、提交、错误提示）
|
||
|
||
## 验证计划
|
||
|
||
- `flutter analyze`
|
||
- `flutter test`（至少覆盖 auth/reset-password 相关与 settings 相关用例）
|
||
- 手工验证：
|
||
- 编辑资料：无改动禁用、改动后可保存、成功后返回
|
||
- 修改密码：发送验证码、倒计时、错误提示、成功返回
|