# 智能体平台 AgentPlatformView

## 功能概览

完整的智能体管理平台，支持浏览、搜索、分类、新增和编辑智能体。

## 文件结构

```
Agents/
├── AgentPlatformView.vue        # 主视图组件
├── AgentPlatformView.scss       # 主视图样式
├── components/
│   ├── AgentCard/              # 智能体卡片组件
│   │   ├── AgentCard.vue
│   │   └── AgentCard.scss
│   └── AgentEdit/              # 智能体编辑对话框组件
│       ├── AgentEdit.vue
│       └── AgentEdit.scss
└── README.md                    # 本文档
```

## 核心功能

### 1. 智能体展示
- ✅ 网格布局展示智能体卡片
- ✅ 显示图标/图片、名称、描述、使用次数
- ✅ 支持点击跳转到聊天页面
- ✅ 悬停动画效果

### 2. 搜索和筛选
- ✅ 搜索框实时搜索（名称/描述）
- ✅ 分类标签筛选（全部/内容创作/办公助手/业务助手/城市生命线）
- ✅ 组合搜索和分类筛选

### 3. 智能体管理
- ✅ 新增智能体
- ✅ 编辑智能体（预留接口）
- ✅ 图片上传（支持预览）
- ✅ 表单验证

### 4. 高级配置
- ✅ API 链接配置
- ✅ Dify API Key 配置
- ✅ 自定义引导词
- ✅ 提示卡片配置（最多3个）

## Mock 数据

### 智能体列表
```typescript
[
    {
        id: 'default',
        name: '城市生命线助手',
        description: '智能城市基础设施安全管理...',
        icon: '🏙️',
        color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        category: 'lifeline',
        usage: 15680
    },
    // ... 其他智能体
]
```

### 分类列表
- **all**: 全部
- **content**: 内容创作
- **office**: 办公助手
- **business**: 业务助手
- **lifeline**: 城市生命线

## 组件说明

### AgentPlatformView（主视图）
主要功能：
- 展示智能体网格
- 搜索和分类筛选
- 调用子组件

Props: 无

Events: 无

### AgentCard（卡片组件）
显示单个智能体信息

Props:
- `agent`: Agent - 智能体数据

Events:
- `click`: () => void - 卡片点击事件

### AgentEdit（编辑对话框）
智能体新增/编辑表单

Props:
- `modelValue`: boolean - 对话框显示状态
- `agent?`: Agent | null - 编辑的智能体数据（null 为新增模式）

Events:
- `update:modelValue`: (value: boolean) => void - 更新显示状态
- `save`: (data: Partial<Agent>) => void - 保存事件

## 数据接口

### Agent 类型定义
```typescript
interface Agent {
    id?: string
    name: string
    description: string
    icon?: string
    imageUrl?: string
    color?: string
    category: string
    usage?: number
    apiUrl?: string
    difyApiKey?: string
    welcomeMessage?: string
    suggestions?: string[]
}
```

## 接入真实 API

### 1. 加载智能体列表
在 `AgentPlatformView.vue` 的 `onMounted` 中：

```typescript
import { onMounted } from 'vue'
import { agentAPI } from '@/api/agent'

onMounted(async () => {
    try {
        const data = await agentAPI.getList()
        agents.value = data
    } catch (error) {
        console.error('加载失败:', error)
        ElMessage.error('加载智能体列表失败')
    }
})
```

### 2. 创建智能体
在 `handleSaveAgent` 函数中（新增时）：

```typescript
const newAgent = await agentAPI.create(agentData)
agents.value.unshift(newAgent)
ElMessage.success('智能体创建成功')
```

### 3. 更新智能体
在 `handleSaveAgent` 函数中（编辑时）：

```typescript
await agentAPI.update(editingAgent.value.id, agentData)
const index = agents.value.findIndex(a => a.id === editingAgent.value!.id)
if (index > -1) {
    agents.value[index] = { ...agents.value[index], ...agentData }
}
ElMessage.success('智能体更新成功')
```

### 4. 图片上传
在 `AgentEdit.vue` 的 `handleFileChange` 中：

```typescript
const uploadedUrl = await uploadAPI.upload(file)
formData.value.imageUrl = uploadedUrl
```

## 路由配置

```typescript
{
    path: '/agents',
    name: 'Agents',
    component: () => import('@/views/public/Agents/AgentPlatformView.vue'),
    meta: {
        title: '智能体平台'
    }
}
```

## 样式特点

### 设计风格
- 网格响应式布局（auto-fill, minmax(280px, 1fr)）
- 现代卡片设计
- 流畅动画效果
- 渐变色支持

### 主题色
- 主色调：紫色 `#7c3aed`
- 背景色：浅灰 `#f9fafb`
- 边框色：`#e5e7eb`
- 文字色：`#1f2937`

### 动画效果
- 卡片悬停：上移4px + 阴影
- 分类标签：颜色渐变
- 上传区域：边框颜色变化

## 依赖

- Vue 3
- Element Plus
- TypeScript
- Vue Router

## 注意事项

1. 所有字段使用 4 个空格缩进（符合用户规则）
2. Mock 数据在组件内，便于测试
3. 已预留 API 接口位置，用 TODO 标注
4. **图片上传使用 FileUpload 组件的 cover 模式**
   - 智能体封面：120x120 像素，最大 5MB
   - 提示词图标：60x60 像素，最大 2MB
   - 自动上传到服务器，返回 URL
5. 表单验证在保存时进行
6. 提示词最多3个，动态添加/删除
7. **依赖 shared 包的 FileUpload 组件**（需确保正确配置）

## 待优化功能

- [ ] 智能体删除功能
- [ ] 智能体排序功能
- [ ] 批量操作
- [ ] 智能体详情页
- [ ] 统计数据展示
- [ ] 导入/导出功能
- [ ] 权限控制

## API 接口设计建议

```typescript
// agent API
export const agentAPI = {
    // 获取列表
    async getList(params?: {
        category?: string
        keyword?: string
    }): Promise<Agent[]> {},
    
    // 创建
    async create(data: Partial<Agent>): Promise<Agent> {},
    
    // 更新
    async update(id: string, data: Partial<Agent>): Promise<Agent> {},
    
    // 删除
    async delete(id: string): Promise<void> {},
    
    // 获取详情
    async getDetail(id: string): Promise<Agent> {}
}
```
