qzl
3.7 KiB
3.7 KiB
设置-账户子页面视觉重构设计（编辑资料 / 修改密码）
背景与目标
当前 编辑资料 与 修改密码 子页面存在明显的“文档页/默认表单堆叠”观感，未满足 apps/rules/visual_design_language.md 要求的“高级、柔和、分层、助手产品感”。
本次设计目标：
- 延续项目现有蓝灰体系，不改变品牌语气
- 建立清晰的表面层级：背景层 -> 主内容层 -> 次级分组层 -> 交互强调层
- 将
修改密码对齐忘记密码的设计语言（分段、状态提示、密码输入体验），但保持“设置域”语义 - 严格使用
AppColors/AppSpacing/AppRadius，移除新增硬编码视觉值
约束来源
apps/AGENTS.mdapps/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），不添加噱头动画
组件与复用策略
- 优先复用：
AppButtonFixedLengthCodeInputAppBanner- Toast 系统
PasswordField（与忘记密码页统一密码输入体验）
- 在 settings 域新增可复用 UI：
account_surface_scaffold.dartaccount_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 analyzeflutter test（至少覆盖 auth/reset-password 相关与 settings 相关用例）- 手工验证：
- 编辑资料：无改动禁用、改动后可保存、成功后返回
- 修改密码：发送验证码、倒计时、错误提示、成功返回