[WIP] Update Flutter frontend to support new API features

[Copilot]

Flutter Frontend Update - Story and Character Integration

Plan Checklist:

• 1. Delete redundant file /flutter_app/lib/config/app_constants.dart
• 2. Create new model files
  • Create story_model.dart
  • Create character_model.dart
• 3. Update constants.dart with new API endpoints
  • Add Story API endpoints
  • Add Character API endpoints
  • Add Search API endpoints
• 4. Update api_service.dart with new API methods
  • Add Story API methods
  • Add Character API methods
  • Add Search API methods
• 5. Create new widget files
  • Create story_card.dart
  • Create character_card.dart
• 6. Create new screen files
  • Create stories_screen.dart
  • Create story_detail_screen.dart
  • Create generate_story_screen.dart
  • Create characters_screen.dart
  • Create add_character_screen.dart
• 7. Update home_screen.dart to add Stories tab
• 8. Update profile_screen.dart to add "My Characters" option
• 9. Update pubspec.yaml to add image_picker dependency
• 10. Run flutter pub get to install dependencies
• 11. Test and verify the implementation

Original prompt

背景

项目的 Spring Boot 后端已经完成了 Story（故事）和 Character（主角）相关的 API，但 Flutter 前端 flutter_app/ 目录下仍然是旧版本，缺少对应的前端页面和服务。需要更新 Flutter 前端，使其能够完整运行并对接所有后端 API。

当前后端 API 列表

已有 API（Flutter 已对接）

• POST /loginmobile - 登录
• POST /register - 注册
• POST /api/note/add - 创建笔记
• GET /api/note/list - 笔记列表
• GET /api/note/{id} - 笔记详情
• PUT /api/note/{id} - 更新笔记
• DELETE /api/note/{id} - 删除笔记
• GET /api/note/count - 笔记计数
• POST /api/rag/search - RAG 向量检索
• POST /api/rag/answer - RAG AI 回答
• POST /api/rag/chat - RAG 多轮对话
• GET /api/review/next - 获取待复习项
• POST /api/review/record - 记录复习
• GET /api/review/stats - 复习统计
• POST /api/review/initialize - 初始化复习

新增 API（Flutter 尚未对接，需要添加）

Story Controller (/api/story):

• POST /api/story/generate - 生成故事（核心功能，上传图片+选择主角，AI识别物品并生成故事）
  • Request Body: { "image": "base64或url", "imageType": "base64", "characterId": 1, "title": "可选标题" }
• GET /api/story/list - 获取故事列表（支持 characterId 和 isFavorite 筛选）
• GET /api/story/{id} - 获取故事详情
• PUT /api/story/{id} - 更新故事（标题、内容）
• DELETE /api/story/{id} - 删除故事
• POST /api/story/{id}/favorite - 收藏故事
• DELETE /api/story/{id}/favorite - 取消收藏
• POST /api/story/{id}/share - 生成分享链接
• GET /api/story/shared/{shareToken} - 通过分享链接查看故事

Character Controller (/api/character):

• GET /api/character/list - 获取主角列表
• GET /api/character/{id} - 获取主角详情
• POST /api/character/add - 创建主角
• PUT /api/character/{id} - 更新主角
• DELETE /api/character/{id} - 删除主角

Search Controller (/api/search):

• POST /api/search/stories - 搜索故事
• POST /api/search/characters - 搜索主角
• POST /api/search/all - 全局搜索

需要完成的任务

1. 新增 Models

flutter_app/lib/models/story_model.dart:

• 字段: id, userId, characterId, title, content, isFavorite, shareToken, embedding, embeddingModel, createdAt, updatedAt
• 包含 fromJson/toJson 方法

flutter_app/lib/models/character_model.dart:

• 字段: id, userId, name, description, avatarUrl, createdAt, updatedAt
• 包含 fromJson/toJson 方法

2. 更新 flutter_app/lib/utils/constants.dart

添加所有新的 API endpoint 常量:

• Story 相关: storyGenerateEndpoint, storyListEndpoint, storyGetEndpoint, storyUpdateEndpoint, storyDeleteEndpoint, storyFavoriteEndpoint, storyShareEndpoint, storySharedEndpoint
• Character 相关: characterListEndpoint, characterGetEndpoint, characterAddEndpoint, characterUpdateEndpoint, characterDeleteEndpoint
• Search 相关: searchStoriesEndpoint, searchCharactersEndpoint, searchAllEndpoint

3. 更新 flutter_app/lib/services/api_service.dart

在现有 ApiService 中添加以下方法:

• Story API 方法: generateStory(), getStories(), getStoryById(), updateStory(), deleteStory(), favoriteStory(), unfavoriteStory(), shareStory(), getSharedStory()
• Character API 方法: getCharacters(), getCharacterById(), createCharacter(), updateCharacter(), deleteCharacter()
• Search API 方法: searchStories(), searchCharacters(), searchAll()

重要: 保留现有的所有 Note、RAG、Review API 方法不变。在文件末尾（} 之前）追加新方法。

4. 新增 Screens

flutter_app/lib/screens/stories_screen.dart - 故事列表页:

• 显示故事卡片列表，支持下拉刷新
• 可按主角筛选、按收藏筛选
• 每个故事卡片显示标题、内容预览、收藏状态、创建时间
• 点击进入详情，长按可删除
• 右下角 FloatingActionButton 进入生成故事页

flutter_app/lib/screens/story_detail_screen.dart - 故事详情页:

• 显示故事完整内容、标题
• 显示关联的主角信息
• 支持收藏/取消收藏
• 支持分享（生成分享链接）
• 支持编辑标题和内容

flutter_app/lib/screens/generate_story_screen.dart - 生成故事页:

• 支持拍照或从相册选择图片（使用 image_picker）
• 显示图片预览
• 下拉选择主角（从 Character 列表获取）
• 可选输入故事标题
• 点击"生成"按钮调用 API，显示加载动画
• 生成成功后跳转到故事详情页

flutter_app/lib/screens/characters_screen.dart - 主角列表页:

• 显示所有主角卡片
• 每个卡片显示主角名称、描述、头像
• 支持添加、编辑、删除主角
• 右下角 FloatingActionButton 打开添加主角对话框或页面

flutter_app/lib/screens/add_character_screen.dart - 添加/编辑主角页:

• 表单输入: 名称（必填）、描述（可选）
• 支持编辑模式（传入 characterToEdit）
• 保存后返回列表页

5. 新增 Widgets

flutter_app/lib/widgets/story_card.dart:

• 显示故事标题、内容预览（截取前100字）
• 显示收藏图标（已收藏为填充心形，未收藏为空心）
• 显示创建时间（相对时间格式）
• 支持 onTap、onFavorite、onDelete 回调

flutter_app/lib/widgets/character_card.dart:

• 显示主角名称、描述
• 显示头像（如果有 avatarUrl，否则显示默认图标）
• 支持 onTap、onEdit、onDelete 回调

6. 更新 flutter_app/lib/screens/home_screen.dart

将底部导航栏从 4 个 tab 扩展为 5 个 tab:

1. Notes（笔记）- 保持不变
2. Stories（故事）- 新增，导航到 StoriesScreen
3. Search（搜索）- 保持不变
4. Review（复习）- 保持不变
5. Profile（个人）- 保持不变

导入新的 screen 文件: stories_screen.dart, characters_screen.dart

7. 更新 flutter_app/lib/screens/profile_screen.dart

在 Profile 页面添加一个 ListTile "My Characters"（我的主角），点击后导航到 CharactersScreen。

8. 更新 flutter_app/pubspec.yaml

添加 image_picker 依赖（用于拍照/选图功能）:

  image_picker: ^1.0.7

9. 删除冗余文件

删除 flutter_app/lib/config/app_constants.dart（这个文件和 flutter_app/lib/utils/constants.dart 重复且内容是旧的占位符）。

现有文件参考

现有 flutter_app/lib/utils/constants.dart 的完整内容（需要在此基础上追加新 endpoint）:

import 'package:flutter/material.dart';

/// Application constants
class AppConstants {
  // API Configuration
  static const String baseUrl = 'http://localhost:9501';
  static const String apiPrefix = '/api';
  
  // API Endpoints
  static const Str...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.