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模型字典数据

### 响应格式
```json
{
  "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接口：

```typescript
// 字典项接口
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` 函数：

```typescript
// 加载模型选项
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应用列表页面，点击任意应用卡片：
```vue
<n-card
  class="app-card"
  hoverable
  @click="handleEditApp(item)"
>
```

### 2. 打开设置弹窗
系统会调用 `handleEditApp` 函数，打开应用设置弹窗：
```typescript
const handleEditApp = (app: AiApp) => {
  isEditMode.value = true
  currentApp.value = { ...app }
  showSettingModal.value = true
}
```

### 3. 自动加载模型数据
弹窗打开时，会自动调用 `loadModelOptions()` 函数加载AI模型数据：
```typescript
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返回的字典项会被映射为选择器选项：

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

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

## 扩展说明

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

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

### 自定义字典查询
使用通用的 `getDictItems` 方法：

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

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