qzl
232 lines
6.3 KiB
Markdown
232 lines
6.3 KiB
Markdown
# 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)`
|