137 lines
3.9 KiB
Markdown
137 lines
3.9 KiB
Markdown
|
# 首页图片选择功能设计
|
|||
|
|
|
|||
|
|
## 1. 需求概述
|
|||
|
|
|
|||
|
|
在首页聊天界面的加号按钮弹出的底部面板中，实现拍照和相册选择图片功能：
|
|||
|
|
- 最多选择 3 张图片
|
|||
|
|
- 图片预览显示在输入框上方
|
|||
|
|
- 图片可被取消移除
|
|||
|
|
- 点击发送后图片随文本一起发送到后端
|
|||
|
|
|
|||
|
|
## 2. 技术方案
|
|||
|
|
|
|||
|
|
### 2.1 依赖
|
|||
|
|
|
|||
|
|
添加 `image_picker: ^1.0.7` 到 `pubspec.yaml`
|
|||
|
|
|
|||
|
|
### 2.2 状态管理
|
|||
|
|
|
|||
|
|
在 `HomeScreen` 中添加图片状态：
|
|||
|
|
```dart
|
|||
|
|
List<XFile> _selectedImages = []; // 最多3张
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2.3 图片选择逻辑
|
|||
|
|
|
|||
|
|
修改 `home_sheet.dart`：
|
|||
|
|
- `image_picker` 选择图片（最多3张）
|
|||
|
|
- 返回选中的 `List<XFile>` 到 `HomeScreen`
|
|||
|
|
|
|||
|
|
### 2.4 AG-UI 消息格式
|
|||
|
|
|
|||
|
|
修改 `ag_ui_service.dart` 的 `_buildRunInput` 方法，支持多模态消息：
|
|||
|
|
|
|||
|
|
```dart
|
|||
|
|
Map<String, dynamic> _buildRunInput({
|
|||
|
|
required String content,
|
|||
|
|
List<XFile>? images,
|
|||
|
|
}) {
|
|||
|
|
final threadId = _threadId ?? _newUuid();
|
|||
|
|
final runId = _nextId(_runIdPrefix);
|
|||
|
|
|
|||
|
|
// 构建多模态内容块
|
|||
|
|
final contentBlocks = <Map<String, dynamic>>[];
|
|||
|
|
|
|||
|
|
// 添加文本
|
|||
|
|
if (content.isNotEmpty) {
|
|||
|
|
contentBlocks.add({'type': 'text', 'text': content});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加图片（Base64 编码）
|
|||
|
|
for (final image in images ?? []) {
|
|||
|
|
final bytes = await image.readAsBytes();
|
|||
|
|
final base64 = base64Encode(bytes);
|
|||
|
|
contentBlocks.add({
|
|||
|
|
'type': 'image',
|
|||
|
|
'source': {
|
|||
|
|
'type': 'base64',
|
|||
|
|
'media_type': 'image/jpeg',
|
|||
|
|
'data': base64,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
'threadId': threadId,
|
|||
|
|
'runId': runId,
|
|||
|
|
'state': <String, dynamic>{},
|
|||
|
|
'messages': [
|
|||
|
|
{
|
|||
|
|
'id': _nextId('user_'),
|
|||
|
|
'role': 'user',
|
|||
|
|
'content': contentBlocks.length == 1
|
|||
|
|
? (contentBlocks[0]['type'] == 'text'
|
|||
|
|
? contentBlocks[0]['text']
|
|||
|
|
: contentBlocks)
|
|||
|
|
: contentBlocks,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
// ...
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 3. UI 设计
|
|||
|
|
|
|||
|
|
### 3.1 图片预览区
|
|||
|
|
|
|||
|
|
位置：输入框上方，聊天消息区域下方
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────────────────────────────┐
|
|||
|
|
│ 聊天消息区域 │
|
|||
|
|
│ │
|
|||
|
|
├─────────────────────────────────────┤
|
|||
|
|
│ ┌─────────┐ ┌─────────┐ ┌────────┐│
|
|||
|
|
│ │ ✕ │ │ ✕ │ │ ✕ ││ ← 预览区
|
|||
|
|
│ │ [图片] │ │ [图片] │ │ [图片] ││
|
|||
|
|
│ └─────────┘ └─────────┘ └────────┘│
|
|||
|
|
├─────────────────────────────────────┤
|
|||
|
|
│ [+] [ 输入消息... ] [发送]│
|
|||
|
|
└─────────────────────────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3.2 样式规格
|
|||
|
|
|
|||
|
|
| 元素 | 值 |
|
|||
|
|
|------|-----|
|
|||
|
|
| 预览卡片尺寸 | 80x80 dp |
|
|||
|
|
| 圆角 | `AppRadius.md` (12dp) |
|
|||
|
|
| 间距 | `AppSpacing.sm` (8dp) |
|
|||
|
|
| 取消按钮 | 24x24 圆形，红色背景，白色 X 图标 |
|
|||
|
|
| 边框 | 1dp `AppColors.slate200` |
|
|||
|
|
|
|||
|
|
### 3.3 交互
|
|||
|
|
|
|||
|
|
- 点击加号 → 底部弹出选择面板
|
|||
|
|
- 选择图片 → 预览区显示缩略图
|
|||
|
|
- 点击 X → 移除对应图片
|
|||
|
|
- 输入文本 + 有图片 → 点击发送发送组合消息
|
|||
|
|
|
|||
|
|
## 4. 文件改动
|
|||
|
|
|
|||
|
|
| 文件 | 改动 |
|
|||
|
|
|------|------|
|
|||
|
|
| `pubspec.yaml` | 添加 image_picker 依赖 |
|
|||
|
|
| `home_sheet.dart` | 实现拍照/相册选择 |
|
|||
|
|
| `home_screen.dart` | 添加图片状态、预览区 UI |
|
|||
|
|
| `ag_ui_service.dart` | 修改 _buildRunInput 支持多模态 |
|
|||
|
|
|
|||
|
|
## 5. 测试要点
|
|||
|
|
|
|||
|
|
- [ ] 选择 1-3 张图片正常显示
|
|||
|
|
- [ ] 选择超过 3 张时提示或限制
|
|||
|
|
- [ ] 图片可以成功移除
|
|||
|
|
- [ ] 发送消息时图片 Base64 正确编码
|
|||
|
|
- [ ] AG-UI 消息格式符合规范
|