qzl
152 lines
4.8 KiB
Markdown
152 lines
4.8 KiB
Markdown
# 设置账户子页面视觉重构 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"
|
|
```
|