social-app/docs/plans/2026-03-23-memories-ui-implementation.md

# Memories 界面实现计划

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

**Goal:** 实现前端memories界面，卡片列表展示user和work记忆，支持查看详情和更新

**Architecture:** 
- 使用现有ApiClient调用后端 `/api/v1/memories` 接口
- 数据模型解析UserMemoryContent和WorkProfileContent
- 遵循项目视觉设计语言(soft blue, layered card-based)
- 通过GoRouter管理导航

**Tech Stack:** Flutter, Dio, GoRouter, GetIt依赖注入

---

### Task 1: 创建Memory数据模型

**Files:**
- Create: `apps/lib/features/settings/data/models/memory_models.dart`

**Step 1: 创建数据模型文件**

```dart
// UserMemoryContent - 用户记忆
class UserMemoryContent {
  final String? occupation;
  final String? timezone;
  final String? primaryLanguage;
  final List<Person> people;
  final List<Place> places;
  final UserPreferences preferences;
  final SchedulingPreferences schedulingPreferences;
  final List<String> interests;
  final List<String> avoidTopics;
  final List<String> customRules;
  final List<RecurringRoutine> recurringRoutines;
  
  // ... 工厂方法 fromJson
}

class Person {
  final String name;
  final String? relationship;
  final String? role;
  final String? preferredContactChannel;
  final String? notes;
  final PersonMeta? meta;
}

class Place {
  final String name;
  final String? category;
  final String? address;
  final String? timezone;
  final int? commuteMinutes;
  final String? preference;
  final String? notes;
  final PlaceMeta? meta;
}

// WorkProfileContent - 工作记忆
class WorkProfileContent {
  final String? occupation;
  final List<String> expertise;
  final List<String> preferredTools;
  final List<CurrentProject> currentProjects;
  final WorkHabits workHabits;
  final List<TeamMember> teamMembers;
  final String? teamContext;
  final List<String> workRules;
}

// MemoryListResponse - API响应
class MemoryListResponse {
  final UserMemoryContent? userMemory;
  final WorkProfileContent? workMemory;
}
```

---

### Task 2: 更新MemoryService调用真实API

**Files:**
- Modify: `apps/lib/features/settings/data/services/memory_service.dart`

**Step 1: 重写MemoryService**

```dart
import 'package:social_app/core/api/i_api_client.dart';
import '../models/memory_models.dart';

class MemoryService {
  final IApiClient _client;
  static const _prefix = '/api/v1/memories';
  
  MemoryService(this._client);
  
  Future<MemoryListResponse> getAllMemories() async { ... }
  Future<UserMemoryContent?> getUserMemory() async { ... }
  Future<WorkProfileContent?> getWorkMemory() async { ... }
  Future<UserMemoryContent> updateUserMemory(UserMemoryContent content) async { ... }
  Future<WorkProfileContent> updateWorkMemory(WorkProfileContent content) async { ... }
  Future<UserMemoryContent> patchUserMemory(Map<String, dynamic> content) async { ... }
  Future<WorkProfileContent> patchWorkMemory(Map<String, dynamic> content) async { ... }
}
```

---

### Task 3: 在injection.dart中注册MemoryService

**Files:**
- Modify: `apps/lib/core/di/injection.dart:26` - 添加import
- Modify: `apps/lib/core/di/injection.dart` - 注册MemoryService

---

### Task 4: 重新设计MemoryScreen主页面

**Files:**
- Modify: `apps/lib/features/settings/ui/screens/memory_screen.dart`

**设计要点:**
- 顶部启用记忆开关卡片
- 两个主要卡片: User Memory (用户记忆) 和 Work Memory (工作记忆)
- 每个卡片显示关键摘要信息
- 点击卡片进入对应详情页
- 底部"管理记忆条目"按钮可点击展开更多信息
- 遵循soft blue品牌、layered card-based界面

**卡片内容:**
- User Memory: 显示 occupation, people数量, places数量, interests数量
- Work Memory: 显示 occupation, expertise数量, currentProjects数量, teamMembers数量

---

### Task 5: 创建UserMemoryDetailScreen

**Files:**
- Create: `apps/lib/features/settings/ui/screens/user_memory_detail_screen.dart`

**功能:**
- 显示完整的UserMemoryContent信息
- 支持编辑和更新
- 分组展示: 基本信息、联系人、地点、偏好设置、日程偏好、兴趣、回避话题等
- 使用可折叠的Section展示

---

### Task 6: 创建WorkMemoryDetailScreen

**Files:**
- Create: `apps/lib/features/settings/ui/screens/work_memory_detail_screen.dart`

**功能:**
- 显示完整的WorkProfileContent信息
- 支持编辑和更新
- 分组展示: 基本信息、项目、团队成员、工作习惯等
- 使用可折叠的Section展示

---

### Task 7: 添加路由配置

**Files:**
- Modify: `apps/lib/core/router/app_router.dart:26` - 添加import
- Modify: `apps/lib/core/router/app_router.dart` - 添加路由
- Modify: `apps/lib/core/router/app_routes.dart` - 添加路由常量

**新增路由:**
- `/settings/memory/user` - UserMemoryDetailScreen
- `/settings/memory/work` - WorkMemoryDetailScreen

---

### Task 8: 更新MemoryScreen导航

**Files:**
- Modify: `apps/lib/features/settings/ui/screens/memory_screen.dart`

**Step 1: 添加导航跳转**

```dart
// 点击User Memory卡片
context.push('/settings/memory/user');

// 点击Work Memory卡片
context.push('/settings/memory/work');
```

---

### Task 9: 验证和测试

**Step 1: 运行flutter analyze检查代码质量**

```bash
cd apps && flutter analyze
```

**Step 2: 验证设计token使用正确**

检查所有颜色、间距、圆角都来自design_tokens.dart

**Step 3: 验证API调用正确**

确认使用正确的endpoint和HTTP方法

---

### 关键文件路径参考

- Design tokens: `apps/lib/core/theme/design_tokens.dart`
- Visual design language: `apps/rules/visual_design_language.md`
- Settings scaffold: `apps/lib/features/settings/ui/widgets/settings_page_scaffold.dart`
- API client: `apps/lib/core/api/api_client.dart`
- 后端router: `backend/src/v1/memories/router.py`
- Protocol文档: `docs/protocols/models/memory.md`

---

### 视觉设计要点

1. **Surface层次**: Background → Primary cards → Secondary grouped surfaces
2. **Color**: 使用AppColors.blue系列作为品牌色，避免过度使用
3. **Spacing**: 使用AppSpacing (xs=4, sm=8, md=12, lg=16, xl=20, xxl=24)
4. **Radius**: 使用AppRadius (sm=6, md=12, lg=16, xl=18, xxl=24)
5. **Motion**: 150-300ms micro-interactions, soft press feedback
6. **卡片阴影**: 使用soft shadow如 `blurRadius: 8, offset: (0, 2)`