# 设置-账户子页面视觉重构设计（编辑资料 / 修改密码）

## 背景与目标

当前 `编辑资料` 与 `修改密码` 子页面存在明显的“文档页/默认表单堆叠”观感，未满足 `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 相关用例）
- 手工验证：
  - 编辑资料：无改动禁用、改动后可保存、成功后返回
  - 修改密码：发送验证码、倒计时、错误提示、成功返回