# Agent管理功能使用说明

## 📍 入口位置

### 方式一：通过URL直接访问
在浏览器地址栏输入：
```
http://localhost:8038/agents
```
或
```
http://101.43.95.130:8038/agents
```

### 方式二：通过代码导航
在应用中的任何位置，可以通过以下方式导航到Agent管理页面：

```typescript
// 使用 Vue Router
router.push('/agents')

// 或使用路由名称
router.push({ name: 'agents' })
```

## 🎯 功能概览

Agent管理页面提供了完整的Agent生命周期管理功能：

### 1. Agent列表展示
- 显示所有Agent的基本信息（名称、描述、状态、版本、创建时间）
- 支持分页显示
- 支持搜索和筛选

### 2. 搜索和筛选
- **搜索功能**：按Agent名称或描述搜索
- **状态筛选**：按状态筛选（草稿、已发布、运行中、已停止）

### 3. Agent操作
- **创建Agent**：创建新的Agent
- **编辑Agent**：修改Agent的基本信息和配置
- **设计Agent**：打开工作流设计器，设计Agent的工作流
- **部署Agent**：将Agent状态改为"已发布"
- **停止Agent**：停止运行中的Agent
- **删除Agent**：删除Agent（需确认）

## 📋 详细使用步骤

### 创建Agent

1. 点击页面右上角的 **"创建Agent"** 按钮
2. 在弹出的对话框中填写：
   - **名称**：Agent的名称（必填）
   - **描述**：Agent的描述（可选）
3. 点击 **"确定"** 创建Agent
4. 创建成功后，Agent会出现在列表中，状态为"草稿"

### 设计Agent工作流

1. 在Agent列表中，找到要设计的Agent
2. 点击 **"设计"** 按钮
3. 系统会跳转到工作流设计器页面（`/agents/{agent_id}/design`）
4. 在设计器中：
   - 拖拽节点到画布
   - 连接节点
   - 配置节点参数
   - 保存工作流配置

### 编辑Agent

1. 在Agent列表中，找到要编辑的Agent
2. 点击 **"编辑"** 按钮
3. 在弹出的对话框中修改：
   - Agent名称
   - Agent描述
   - 工作流配置（JSON格式）
4. 点击 **"确定"** 保存修改

### 部署Agent

1. 在Agent列表中，找到状态为"草稿"或"已停止"的Agent
2. 点击 **"部署"** 按钮
3. 确认部署操作
4. Agent状态会变为"已发布"

### 停止Agent

1. 在Agent列表中，找到状态为"已发布"或"运行中"的Agent
2. 点击 **"停止"** 按钮
3. 确认停止操作
4. Agent状态会变为"已停止"

### 删除Agent

1. 在Agent列表中，找到要删除的Agent
2. 点击 **"删除"** 按钮
3. 确认删除操作
4. Agent会被永久删除

## 🔌 API接口说明

### 后端API端点

所有API都需要JWT认证，在请求头中添加：
```
Authorization: Bearer <your_token>
```

#### 1. 获取Agent列表
```
GET /api/v1/agents
```

**查询参数：**
- `skip`: 跳过记录数（分页，默认0）
- `limit`: 每页记录数（默认100，最大100）
- `search`: 搜索关键词（按名称或描述）
- `status`: 状态筛选（draft/published/running/stopped）

**响应示例：**
```json
[
  {
    "id": "agent-uuid",
    "name": "客服Agent",
    "description": "处理客户咨询的智能Agent",
    "workflow_config": {
      "nodes": [...],
      "edges": [...]
    },
    "version": 1,
    "status": "published",
    "user_id": "user-uuid",
    "created_at": "2024-01-01T00:00:00",
    "updated_at": "2024-01-01T00:00:00"
  }
]
```

#### 2. 创建Agent
```
POST /api/v1/agents
```

**请求体：**
```json
{
  "name": "Agent名称",
  "description": "Agent描述",
  "workflow_config": {
    "nodes": [...],
    "edges": [...]
  }
}
```

#### 3. 获取Agent详情
```
GET /api/v1/agents/{agent_id}
```

#### 4. 更新Agent
```
PUT /api/v1/agents/{agent_id}
```

**请求体：**
```json
{
  "name": "新名称",
  "description": "新描述",
  "workflow_config": {...},
  "status": "published"
}
```

#### 5. 删除Agent
```
DELETE /api/v1/agents/{agent_id}
```

#### 6. 部署Agent
```
POST /api/v1/agents/{agent_id}/deploy
```

#### 7. 停止Agent
```
POST /api/v1/agents/{agent_id}/stop
```

## 💡 使用示例

### 示例1：创建一个简单的客服Agent

1. 点击"创建Agent"
2. 填写：
   - 名称：客服Agent
   - 描述：处理客户咨询
3. 点击"确定"创建
4. 点击"设计"按钮，进入设计器
5. 在设计器中：
   - 添加"开始"节点
   - 添加"LLM"节点，配置提示词
   - 添加"输出"节点
   - 连接节点
   - 保存
6. 返回Agent列表，点击"部署"

### 示例2：通过API创建Agent

```bash
curl -X POST http://localhost:8037/api/v1/agents \
  -H "Authorization: Bearer <your_token>" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "API创建的Agent",
    "description": "通过API创建的Agent",
    "workflow_config": {
      "nodes": [
        {
          "id": "start-1",
          "type": "start",
          "position": {"x": 0, "y": 0},
          "data": {"label": "开始"}
        },
        {
          "id": "end-1",
          "type": "end",
          "position": {"x": 200, "y": 0},
          "data": {"label": "结束"}
        }
      ],
      "edges": []
    }
  }'
```

## 🔍 前端代码位置

- **页面组件**：`frontend/src/views/Agents.vue`
- **状态管理**：`frontend/src/stores/agent.ts`
- **路由配置**：`frontend/src/router/index.ts`（路径：`/agents`）

## 🔧 后端代码位置

- **API路由**：`backend/app/api/agents.py`
- **数据模型**：`backend/app/models/agent.py`
- **API前缀**：`/api/v1/agents`

## 📝 注意事项

1. **权限**：所有Agent操作都需要用户登录，且只能操作自己创建的Agent
2. **状态管理**：
   - `draft`：草稿状态，可以编辑和设计
   - `published`：已发布，可以执行
   - `running`：运行中
   - `stopped`：已停止
3. **工作流配置**：Agent的工作流配置格式与普通工作流相同，包含`nodes`和`edges`
4. **版本管理**：每次更新Agent，版本号会自动递增

## 🎨 界面截图说明

Agent管理页面包含：
- 顶部：标题和"创建Agent"按钮
- 搜索栏：搜索框和状态筛选下拉框
- 表格：显示Agent列表
- 操作列：编辑、设计、部署/停止、删除按钮