social-app/docs/plans/2026-03-16-settings-account-subpages-implementation.md

设置账户子页面视觉重构 Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: 重构设置页中的编辑资料与修改密码子页面，使其符合视觉设计语言并统一为柔和卡片分层风格。

Architecture: 在 settings feature 内新增复用型页面壳与分组卡组件，统一两页的表面层级、间距节奏与交互强调区；修改密码页面借鉴忘记密码页面的步骤分段与状态提示语义，但保留设置域信息架构与文案。保持现有业务逻辑不变，优先做样式与结构重构。

Tech Stack: Flutter, go_router, flutter_bloc, formz, design tokens (AppColors/AppSpacing/AppRadius), shared widgets (AppButton, AppBanner, FixedLengthCodeInput, Toast)

---

Task 1: 创建设置域复用 UI 壳层组件

Files:

• Create: apps/lib/features/settings/ui/widgets/account_surface_scaffold.dart
• Create: apps/lib/features/settings/ui/widgets/account_section_card.dart

Step 1: 写一个失败的基础渲染测试（可选，若项目已有 widget test 基础）

testWidgets('AccountSectionCard renders title and child', (tester) async {
  await tester.pumpWidget(...);
  expect(find.text('标题'), findsOneWidget);
});

Step 2: 运行测试确认失败（若执行 Step 1）

Run: flutter test apps/test/... -r expanded Expected: FAIL（新组件不存在）

Step 3: 实现最小组件

• AccountSurfaceScaffold：统一背景、头部、滚动主内容、可选底部强调区
• AccountSectionCard：统一分组卡片容器（标题、描述、child）

Step 4: 运行测试确认通过（若执行 Step 1）

Run: flutter test apps/test/... -r expanded Expected: PASS

Step 5: Commit

git add apps/lib/features/settings/ui/widgets/account_surface_scaffold.dart apps/lib/features/settings/ui/widgets/account_section_card.dart
git commit -m "feat: add reusable account surface widgets"

Task 2: 重构编辑资料页面为柔和卡片分层

Files:

• Modify: apps/lib/features/settings/ui/screens/edit_profile_screen.dart

Step 1: 写失败测试（仅在当前测试基建允许时）

testWidgets('Edit profile shows grouped sections and disabled save initially', (tester) async {
  // verify section titles and save button disabled by default
});

Step 2: 运行测试确认失败（若执行 Step 1）

Run: flutter test apps/test/... -r expanded Expected: FAIL（旧结构不满足）

Step 3: 实现最小重构

• 接入 AccountSurfaceScaffold
• 将头像区、用户名区、简介区改为分组卡语义
• 统一输入风格（token 化）
• 底部强调操作区承载 保存修改

Step 4: 运行测试确认通过（若执行 Step 1）

Run: flutter test apps/test/... -r expanded Expected: PASS

Step 5: Commit

git add apps/lib/features/settings/ui/screens/edit_profile_screen.dart
git commit -m "feat: redesign edit profile screen with layered surfaces"

Task 3: 重构修改密码页面为步骤型结构

Files:

• Modify: apps/lib/features/settings/ui/screens/change_password_screen.dart
• Reference: apps/lib/features/auth/ui/screens/reset_password_screen.dart

Step 1: 写失败测试（仅在当前测试基建允许时）

testWidgets('Change password renders step sections and submit state', (tester) async {
  // verify step titles and CTA disabled before code sent
});

Step 2: 运行测试确认失败（若执行 Step 1）

Run: flutter test apps/test/... -r expanded Expected: FAIL（步骤结构不存在）

Step 3: 实现最小重构

• 接入 AccountSurfaceScaffold + AccountSectionCard
• 按 Step 1/Step 2 分段展示（邮箱验证 -> 验证码与新密码）
• 引入 AppBanner 做状态提示
• 保持验证码、倒计时、提交逻辑不变

Step 4: 运行测试确认通过（若执行 Step 1）

Run: flutter test apps/test/... -r expanded Expected: PASS

Step 5: Commit

git add apps/lib/features/settings/ui/screens/change_password_screen.dart
git commit -m "feat: redesign change password flow with step-based sections"

Task 4: 验证与文档同步

Files:

• Modify (if needed): docs/plans/2026-03-16-settings-account-subpages-design.md

Step 1: 运行静态检查

Run: flutter analyze Expected: PASS

Step 2: 运行回归测试

Run: flutter test Expected: PASS

Step 3: 手工验收

• 编辑资料：无变更禁用、有变更可保存
• 修改密码：发码、倒计时、错误提示、成功返回
• 视觉层级：背景/主卡/分组/强调区清晰

Step 4: Commit

git add docs/plans/2026-03-16-settings-account-subpages-design.md
git commit -m "docs: finalize account subpages redesign validation notes"