# 替换提示词管理页面的模拟数据为API调用

## 目标
将 `AdminPromptManagement.vue` 组件中的模拟数据替换为真实的 API 调用，使用 `AdminPromptManagement` 类中定义的方法。

## 实现步骤

### 1. 导入 API 类并创建实例
- 在 `AdminPromptManagement.vue` 中导入 `AdminPromptManagement` 类
- 创建 API 实例用于调用方法

### 2. 替换模拟数据结构
- 移除 `prompts` 模拟数据数组
- 添加响应式数据：`prompts`（用于存储所有提示词）、`loading`（加载状态）
- 调整 `formData` 结构以匹配 API 要求（将 `referenceImage` 改为 `imageUrls`）

### 3. 实现数据获取逻辑
- 创建 `fetchPrompts` 方法，调用 `getPromptList` 获取所有提示词
  - 调用时设置 `pageSize: 99` 以获取所有数据（不分页）
  - 无需按 `isActive` 区分调用，获取所有数据后在前端过滤
- 在组件挂载时调用 `fetchPrompts` 初始化数据

### 4. 更新计算属性
- `inactivePrompts`：过滤 `prompts` 中 `isActive === 0` 的数据
- `activePrompts`：过滤 `prompts` 中 `isActive === 1` 的数据
- `sortedActivePrompts`：排序逻辑保持不变，但使用 `sortOrder` 字段替代 `sortIndex`

### 5. 更新组件方法
- **savePrompt**：根据 `isEditing` 状态调用 `updatePrompt` 或 `createPrompt`
  - 将 `formData.imageUrls` 转换为数组格式
- **deletePrompt**：调用 `deletePrompt` API 方法，成功后重新获取数据
- **removeFromActive**：调用 `deactivatePrompt` API 方法，成功后重新获取数据
- **handleDrop**：调用 `activatePrompt` API 方法，成功后重新获取数据
- **handleSortUpdate**：调用 `batchUpdateSort` API 方法，传递排序后的提示词列表

### 6. 调整拖拽功能
- 确保拖拽排序后正确调用 `batchUpdateSort` 更新后端数据
- 转换数据格式以匹配 API 要求（`sortOrder` 字段）

### 7. 处理 API 响应
- 确保 API 返回的数据格式与组件期望的格式匹配
- 处理 API 调用的错误情况
- 添加适当的加载状态提示

## 注意事项
- API 方法返回的是 Promise，需要使用 `async/await` 处理
- API 数据结构与模拟数据略有不同，需要调整：
  - `isActive` 是数字类型（0/1），而非布尔值
  - `imageUrls` 是数组，而非单个字符串
  - 排序字段是 `sortOrder`，而非 `sortIndex`
- 需要添加错误处理和加载状态管理
- 确保所有数据更新操作后重新获取最新数据

## 预期效果
- 页面初始加载时从 API 获取所有提示词（不分页，pageSize=99）
- 左侧显示 `isActive=0` 的提示词，右侧显示 `isActive=1` 的提示词
- 所有操作（添加、编辑、删除、激活、取消激活、排序）都会调用相应的 API 方法
- 页面数据与后端保持同步
- 提供良好的加载状态和错误提示