OL-LearnPlatform-Frontend/docs/ai-model-dict-api.md

AI模型字典API集成

概述

本文档说明如何在AI应用设置弹窗中集成真实的AI模型字典API，替换原有的模拟数据。

API接口信息

获取AI模型字典

• 接口地址: /sys/dict/getDictItems/airag_model%20where%20model_type%20=%20'LLM',name,id
• 请求方法: GET
• 接口说明: 获取LLM类型的AI模型字典数据

响应格式

{
  "success": true,
  "message": "",
  "code": 0,
  "result": [
    {
      "value": "1890232564262739969",
      "text": "OpenAI",
      "color": null,
      "jsonObject": null,
      "label": "OpenAI",
      "title": "OpenAI"
    },
    {
      "value": "1897481367743143938",
      "text": "deepseek",
      "color": null,
      "jsonObject": null,
      "label": "deepseek",
      "title": "deepseek"
    },
    {
      "value": "1897883052995006466",
      "text": "智谱",
      "color": null,
      "jsonObject": null,
      "label": "智谱",
      "title": "智谱"
    },
    {
      "value": "1970031008335876097",
      "text": "测试",
      "color": null,
      "jsonObject": null,
      "label": "测试",
      "title": "测试"
    }
  ],
  "timestamp": 1759136645858
}

实现的功能

1. API模块扩展 (src/api/modules/system.ts)

添加了字典相关的API接口：

// 字典项接口
export interface DictItem {
  value: string
  text: string
  color: string | null
  jsonObject: any | null
  label: string
  title: string
}

export const SystemApi = {
  // 获取字典项
  getDictItems(dictCode: string, params?: string): Promise<ApiResponse<DictItem[]>>
  
  // 获取AI模型字典项（LLM类型）
  getAiModelDict(): Promise<ApiResponse<DictItem[]>>
}

2. AI应用设置组件更新 (src/views/Ai/component/AiAppSetting.vue)

修改了 loadModelOptions 函数：

// 加载模型选项
const loadModelOptions = async () => {
  loadingModels.value = true
  try {
    const response = await SystemApi.getAiModelDict()
    if (response.data.code === 200 || response.data.code === 0) {
      modelOptions.value = response.data.data.map(item => ({
        label: item.text,
        value: item.value
      }))
      console.log('✅ AI模型列表加载成功:', modelOptions.value)
    } else {
      throw new Error(response.data.message || '获取模型列表失败')
    }
  } catch (error: any) {
    console.error('❌ 加载模型列表失败:', error)
    message.error(error.message || '加载模型列表失败')
    
    // 失败时使用备用数据
    modelOptions.value = [
      { label: 'GPT-3.5 Turbo', value: 'gpt-3.5-turbo' },
      { label: 'GPT-4', value: 'gpt-4' },
      { label: 'Claude-3', value: 'claude-3' }
    ]
  } finally {
    loadingModels.value = false
  }
}

3. 测试页面 (src/views/AiModelTest.vue)

创建了专门的测试页面来验证API调用：

• 实时加载AI模型数据
• 显示API响应状态
• 测试选择器功能
• 查看原始数据

使用流程

1. 点击AI应用卡片

在AI应用列表页面，点击任意应用卡片：

<n-card
  class="app-card"
  hoverable
  @click="handleEditApp(item)"
>

2. 打开设置弹窗

系统会调用 handleEditApp 函数，打开应用设置弹窗：

const handleEditApp = (app: AiApp) => {
  isEditMode.value = true
  currentApp.value = { ...app }
  showSettingModal.value = true
}

3. 自动加载模型数据

弹窗打开时，会自动调用 loadModelOptions() 函数加载AI模型数据：

onMounted(() => {
  loadModelOptions()  // 自动加载模型选项
  loadFlowOptions()
  loadSelectedKnowledges()
})

4. 显示模型选择器

在"模型配置"选项卡中，用户可以看到从后端加载的真实AI模型列表：

• OpenAI
• deepseek
• 智谱
• 测试

测试方法

1. 访问测试页面

http://localhost:5173/ai-model-test

2. 测试功能

• 点击"加载AI模型列表"按钮
• 查看加载状态和结果
• 测试选择器功能
• 查看原始API响应数据

3. 验证AI应用设置

• 访问 /ai/app 页面
• 点击任意AI应用卡片
• 在弹窗中切换到"模型配置"选项卡
• 验证AI模型下拉选择器是否显示真实数据

错误处理

系统包含完整的错误处理机制：

1. 网络请求失败: 显示错误消息并使用备用数据
2. API响应错误: 解析错误信息并提示用户
3. 数据格式错误: 容错处理，确保界面正常显示
4. 加载状态: 显示加载指示器，提升用户体验

数据映射

API返回的字典项会被映射为选择器选项：

// API数据格式
{
  "value": "1890232564262739969",
  "text": "OpenAI",
  "label": "OpenAI",
  "title": "OpenAI"
}

// 映射为选择器选项
{
  label: "OpenAI",      // 显示文本
  value: "1890232564262739969"  // 选择值
}

扩展说明

添加其他字典类型

可以在 SystemApi 中添加其他字典类型的获取方法：

// 获取其他类型的字典
getOtherDict(): Promise<ApiResponse<DictItem[]>> {
  return request.get('/sys/dict/getDictItems/other_dict_code')
}

自定义字典查询

使用通用的 getDictItems 方法：

// 自定义查询条件
const response = await SystemApi.getDictItems('dict_code', 'custom_params')

这样就完成了AI模型字典API的集成，用户在AI应用设置弹窗中可以看到真实的AI模型数据了！