deotalandAi/.trae/documents/替换提示词管理页面的模拟数据为API调用.md

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