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 基础）**

```dart
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**

```bash
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: 写失败测试（仅在当前测试基建允许时）**

```dart
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**

```bash
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: 写失败测试（仅在当前测试基建允许时）**

```dart
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**

```bash
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**

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