59 lines
2.8 KiB
Markdown
59 lines
2.8 KiB
Markdown
# 替换提示词管理页面的模拟数据为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 方法
|
||
- 页面数据与后端保持同步
|
||
- 提供良好的加载状态和错误提示 |