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: 创建数据模型文件

// 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

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: 添加导航跳转

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

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

---

Task 9: 验证和测试

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

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)