{"repo": "aarnwang/testcase-manager", "files": {"frontend/src/views/AiConfig.vue": {"a3df62198cf151c8a921b3a70994f9a18c164141": {"t": 1785768139.9036076, "n": 35443, "h": "fb44c0aa8599ca06", "c": "<template>\n  <div class=\"ai-config-container\">\n    <el-tabs tab-position=\"left\" style=\"height: calc(100vh - 80px)\" class=\"demo-tabs\">\n      <el-tab-pane label=\"模型配置\">\n        <div class=\"tab-content\">\n          <div class=\"config-container\">\n            <div class=\"config-layout\">\n              <div class=\"config-left\">\n        <el-form \n          :model=\"configForm\" \n          :rules=\"configRules\" \n          ref=\"configFormRef\" \n          label-width=\"120px\"\n          class=\"config-form\"\n        >\n              <div class=\"form-section\">\n                <h4>基础信息</h4>\n                    <el-form-item label=\"配置名称\" prop=\"configName\">\n                      <el-input \n                        v-model=\"configForm.configName\" \n                        placeholder=\"请输入配置名称\"\n                        class=\"config-input\"\n                      />\n                    </el-form-item>\n          <el-form-item label=\"模型类型\" prop=\"modelType\">\n            <el-select \n              v-model=\"configForm.modelType\" \n              placeholder=\"请选择模型类型\"\n              class=\"config-input\"\n            >\n              <el-option label=\"通义千问\" value=\"qwen\" />\n              <el-option label=\"字节跳动（火山引擎）\" value=\"volcengine\" />\n              <el-option label=\"DeepSeek\" value=\"deepseek\" />\n              <el-option label=\"智谱AI\" value=\"zhipu\" />\n              <el-option label=\"OpenAI\" value=\"openai\" />\n              <el-option label=\"百度文心一言\" value=\"wenxin\" />\n              <el-option label=\"讯飞星火\" value=\"xunfei\" />\n              <el-option label=\"MiniMax\" value=\"minimax\" />\n              <el-option label=\"月之暗面\" value=\"moonshot\" />\n              <el-option label=\"360智脑\" value=\"360\" />\n              <el-option label=\"Claude (Anthropic)\" value=\"claude\" />\n              <el-option label=\"Gemini (Google)\" value=\"gemini\" />\n            </el-select>\n          </el-form-item>\n          \n          <el-form-item label=\"API密钥\" prop=\"apiKey\">\n            <el-input \n              v-model=\"configForm.apiKey\" \n              placeholder=\"请输入API密钥\"\n              type=\"password\"\n              show-password\n              class=\"config-input\"\n            />\n          </el-form-item>\n          \n          <el-form-item label=\"模型URL\" prop=\"baseUrl\">\n            <el-input \n              v-model=\"configForm.baseUrl\" \n              placeholder=\"请输入模型URL\"\n              class=\"config-input\"\n            />\n          </el-form-item>\n          \n          <el-form-item label=\"模型版本\" prop=\"modelVersion\">\n            <el-input \n              v-model=\"configForm.modelVersion\" \n              placeholder=\"请输入模型版本\"\n              class=\"config-input\"\n            />\n          </el-form-item>\n              </div>\n          \n              <div class=\"form-section\">\n                <h4>价格配置</h4>\n          <el-form-item label=\"输入价格\" prop=\"promptPrice\">\n            <el-input \n              v-model=\"configForm.promptPrice\" \n              placeholder=\"每1000个输入token的价格\"\n              class=\"config-input\"\n            >\n              <template #append>CNY</template>\n            </el-input>\n          </el-form-item>\n          \n          <el-form-item label=\"输出价格\" prop=\"completionPrice\">\n            <el-input \n              v-model=\"configForm.completionPrice\" \n              placeholder=\"每1000个输出token的价格\"\n              class=\"config-input\"\n            >\n              <template #append>CNY</template>\n            </el-input>\n          </el-form-item>\n              </div>\n          \n              <el-form-item class=\"form-actions\">\n                <el-button type=\"primary\" @click=\"saveConfig\" :disabled=\"saving\" class=\"save-btn\">\n              <template v-if=\"saving\">\n                <div class=\"saving-inline\">\n                  <div class=\"circular-loading\"></div>\n                  正在保存\n                </div>\n              </template>\n              <template v-else>\n                    <span>保存配置</span>\n              </template>\n            </el-button>\n                <el-button @click=\"resetConfig\" :disabled=\"saving\" class=\"reset-btn\">重置</el-button>\n          </el-form-item>\n        </el-form>\n          </div>\n              <div class=\"config-right\">\n                <div class=\"form-section\">\n                  <h4>配置列表</h4>\n                  <div class=\"config-list\">\n                    <div v-if=\"configList.length === 0\" class=\"empty-list\">\n                      <p>暂无配置</p>\n                    </div>\n                    <div v-else class=\"config-items\">\n                      <div class=\"config-header\">\n                        <div class=\"config-name\">配置名称</div>\n                        <div class=\"config-info\">\n                          <div class=\"model-type-container\">\n                            <span>模型类型</span>\n                          </div>\n                          <div class=\"model-version\">模型版本</div>\n                          <div class=\"config-time\">更新时间</div>\n                          <div class=\"header-enabled\">启用状态</div>\n                          <div class=\"config-actions\">操作</div>\n                        </div>\n                      </div>\n                      <div \n                        v-for=\"config in configList\" \n                        :key=\"config.id\" \n                        class=\"config-item\"\n                      >\n                        <div class=\"config-name\">{{ config.config_name }}</div>\n                        <div class=\"config-info\">\n                          <div class=\"model-type-container\">\n                            <span class=\"model-type\" :style=\"{ \n                              backgroundColor: getModelTypeInfo(config.model_type).bgColor, \n                              color: getModelTypeInfo(config.model_type).color \n                            }\">\n                              {{ getModelTypeInfo(config.model_type).name }}\n                            </span>\n                          </div>\n                          <div class=\"model-version\">{{ config.model_version }}</div>\n                          <div class=\"config-time\">{{ formatTime(config.updated_at) }}</div>\n                          <div class=\"config-enabled\">\n                            <el-switch \n                              :model-value=\"Boolean(config.is_enabled)\" \n                              @update:model-value=\"(value) => toggleConfigEnabled(config, value)\"\n                              size=\"small\"\n                              class=\"animated-switch\"\n                            />\n                          </div>\n                          <div class=\"config-actions\">\n                            <el-button size=\"small\" type=\"success\" @click=\"viewConfig(config)\" class=\"action-btn view-btn\">查看</el-button>\n                            <el-button size=\"small\" type=\"primary\" @click=\"editConfig(config)\" class=\"action-btn edit-btn\">编辑</el-button>\n                            <el-popconfirm\n                              title=\"确定要删除这个配置吗？\"\n                              confirm-button-text=\"确定\"\n                              cancel-button-text=\"取消\"\n                              placement=\"left-end\"\n                              @confirm=\"deleteConfig(config)\"\n                            >\n                              <template #reference>\n                                <el-button size=\"small\" type=\"danger\" class=\"action-btn delete-btn\">删除</el-button>\n                              </template>\n                            </el-popconfirm>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </el-tab-pane>\n      \n      <el-tab-pane label=\"帮助文档\">\n        <div class=\"tab-content\">\n          <div class=\"help-container\">\n            <el-collapse>\n              <el-collapse-item title=\"模型推荐\" name=\"1\" class=\"custom-collapse-item\">\n                <p><strong>通义千问系列：</strong></p>\n                <ul>\n                  <li><strong>qwen-turbo</strong>：强烈推荐！快速响应，生成的用例完整覆盖度高</li>\n                  <li><strong>qwen-plus</strong>：平衡性能，适合复杂对话和中等难度任务</li>\n                  <li><strong>qwen-max</strong>：最强性能，适合高难度任务和专业应用</li>\n                </ul>\n              </el-collapse-item>\n              <el-collapse-item title=\"如何获取API密钥？\" name=\"2\" class=\"custom-collapse-item\">\n                <p>1. 登录您的AI服务提供商账户</p>\n                <p>2. 进入API管理页面</p>\n                <p>3. 创建新的API密钥</p>\n                <p>4. 复制密钥并粘贴到配置中</p>\n              </el-collapse-item>\n              <el-collapse-item title=\"模型URL接口地址说明\" name=\"3\" class=\"custom-collapse-item\">\n                <p>通义千问：https://dashscope.aliyuncs.com/compatible-mode/v1</p>\n                <p>火山引擎：https://ark.cn-beijing.volces.com/api/v3</p>\n                <p>DeepSeek：https://api.deepseek.com</p>\n                <p>智谱AI：https://open.bigmodel.cn/api/paas/v4</p>\n                <p>OpenAI：https://api.openai.com/v1</p>\n                <p>百度文心一言：https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat</p>\n                <p>讯飞星火：https://spark-api.xf-yun.com/v3.1/chat</p>\n                <p>MiniMax：https://api.minimax.chat/v1</p>\n                <p>月之暗面：https://api.moonshot.cn/v1</p>\n                <p>360智脑：https://api.360.cn/v1</p>\n                <p>Claude (Anthropic)：https://api.anthropic.com/v1</p>\n                <p>Gemini (Google)：https://generativelanguage.googleapis.com/v1beta</p>\n              </el-collapse-item>\n              <el-collapse-item title=\"更新日志\" name=\"4\" class=\"custom-collapse-item update-log-item\">\n                <p><strong>V1.0.9 (2025-09-03)</strong></p>\n                <ul>\n                  <li>更新AI模型多配置</li>\n                </ul>\n                <p><strong>V1.0.8 (2025-09-02)</strong></p>\n                <ul>\n                  <li>优化AI生成用例系统，支持Windows、macOS、Linux跨平台运行</li>\n                  <li>改进subprocess命令执行机制，提升跨平台兼容性</li>\n                  <li>增强错误处理和调试信息，便于问题诊断</li>\n                </ul>\n                <p><strong>V1.0.7 (2025-09-02)</strong></p>\n                <ul>\n                  <li>新增支持Claude (Anthropic)、Gemini (Google)等全球顶级AI模型</li>\n                  <li>优化AI模型配置界面，支持12种主流AI模型</li>\n                  <li>完善模型URL接口地址说明文档</li>\n                </ul>\n                <p><strong>V1.0.6 (2025-09-02)</strong></p>\n                <ul>\n                  <li>新增支持OpenAI、百度文心一言、讯飞星火、MiniMax、月之暗面、360智脑等AI模型</li>\n                  <li>优化AI模型配置界面，支持10种主流AI模型</li>\n                  <li>完善模型URL接口地址说明文档</li>\n                </ul>\n                <p><strong>V1.0.5 (2025-09-02)</strong></p>\n                <ul>\n                  <li>完成AI配置服务层</li>\n                  <li>增加多模型适配</li>\n                  <li>修复一些报错</li>\n                  <li>脱离env文件，改为配置化</li>\n                </ul>\n                <p><strong>V1.0.4 (2025-08-29)</strong></p>\n                <ul>\n                  <li>增加AI生成用例策略组json识别</li>\n                  <li>增加用例需求分析功能点规则匹配度</li>\n                  <li>补充用例上传的部分识别逻辑</li>\n                  <li>增加系统设置，后续所有的模型配置将不在代码中写死，改为配置</li>\n                  <li>解决AutoAgent框架识别部分模型时，无法计算价格导致的warning</li>\n                </ul>\n                <p><strong>V1.0.3 (2025-08-22)</strong></p>\n                <ul>\n                  <li>手动增加测试用例功能</li>\n                  <li>运行日志</li>\n                </ul>\n                <p><strong>V1.0.2 (2025-08-12)</strong></p>\n                <ul>\n                  <li>优化AI生成用例的用户体验</li>\n                  <li>修复文件选择后清除生成总结的问题</li>\n                  <li>修复用例类型显示问题</li>\n                  <li>优化下载中心弹窗标题样式</li>\n                  <li>改进错误处理和用户提示</li>\n                </ul>\n                <p><strong>V1.0.1 (2025-08-10)</strong></p>\n                <ul>\n                  <li>AI生成能力（已开发完成）接入用例平台</li>\n                  <li>生成用例总结数据实时显示</li>\n                  <li>支持多种测试类型（功能测试、接口测试、UI自动化测试）</li>\n                  <li>智能文档解析和用例生成</li>\n                  <li>生成历史记录和统计</li>\n                </ul>\n                <p><strong>v1.0.0 (2025-08-01)</strong></p>\n                <ul>\n                  <li>基础项目管理功能</li>\n                  <li>Excel文件上传和解析</li>\n                  <li>测试用例批量导入</li>\n                  <li>重复数据检测和处理</li>\n                  <li>响应式Web界面</li>\n                </ul>\n              </el-collapse-item>\n            </el-collapse>\n          </div>\n    </div>\n      </el-tab-pane>\n    </el-tabs>\n    \n    <!-- 查看配置详情对话框 -->\n    <el-dialog\n      v-model=\"viewDialogVisible\"\n      width=\"600px\"\n      :close-on-click-modal=\"false\"\n      :close-on-press-escape=\"true\"\n    >\n      <div class=\"config-detail\">\n        <div class=\"detail-section\">\n          <h4>基础信息</h4>\n          <div class=\"detail-item\">\n            <label>配置名称：</label>\n            <span>{{ viewConfigData.configName }}</span>\n          </div>\n          <div class=\"detail-item\">\n            <label>模型类型：</label>\n            <span class=\"model-type-tag\" :style=\"{ \n              backgroundColor: getModelTypeInfo(viewConfigData.modelType).bgColor, \n              color: getModelTypeInfo(viewConfigData.modelType).color \n            }\">\n              {{ getModelTypeInfo(viewConfigData.modelType).name }}\n            </span>\n          </div>\n          <div class=\"detail-item\">\n            <label>模型版本：</label>\n            <span>{{ viewConfigData.modelVersion }}</span>\n          </div>\n          <div class=\"detail-item\">\n            <label>API密钥：</label>\n            <span class=\"api-key\">{{ viewConfigData.apiKey }}</span>\n          </div>\n          <div class=\"detail-item\">\n            <label>模型URL：</label>\n            <span class=\"url-text\">{{ viewConfigData.baseUrl }}</span>\n          </div>\n        </div>\n        \n        <div class=\"detail-section\">\n          <h4>价格配置</h4>\n          <div class=\"detail-item\">\n            <label>输入价格：</label>\n            <span>{{ viewConfigData.promptPrice }} CNY / 1000 tokens</span>\n          </div>\n          <div class=\"detail-item\">\n            <label>输出价格：</label>\n            <span>{{ viewConfigData.completionPrice }} CNY / 1000 tokens</span>\n          </div>\n        </div>\n        \n        <div class=\"detail-section\">\n          <h4>状态信息</h4>\n          <div class=\"detail-item\">\n            <label>启用状态：</label>\n            <el-tag :type=\"viewConfigData.isEnabled ? 'success' : 'info'\">\n              {{ viewConfigData.isEnabled ? '启用' : '禁用' }}\n            </el-tag>\n          </div>\n          <div class=\"detail-item\">\n            <label>创建时间：</label>\n            <span>{{ formatTime(viewConfigData.createdAt) }}</span>\n          </div>\n          <div class=\"detail-item\">\n            <label>更新时间：</label>\n            <span>{{ formatTime(viewConfigData.updatedAt) }}</span>\n          </div>\n        </div>\n      </div>\n      \n      <template #footer>\n        <div class=\"dialog-footer\">\n          <el-button @click=\"viewDialogVisible = false\">关闭</el-button>\n        </div>\n      </template>\n    </el-dialog>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted } from 'vue';\nimport { ElMessage, ElMessageBox } from 'element-plus';\nimport { Setting } from '@element-plus/icons-vue';\n\n// 响应式数据\nconst configFormRef = ref();\nconst saving = ref(false);\nconst configList = ref([]);\nconst viewDialogVisible = ref(false);\nconst viewConfigData = ref({});\n\nconst configForm = reactive({\n  configId: null,\n  configName: '',\n  modelType: 'qwen',\n  apiKey: '',\n  baseUrl: '',\n  modelVersion: '',\n  promptPrice: '',\n  completionPrice: ''\n});\n\n// 表单验证规则\nconst configRules = {\n  configName: [\n    { required: true, message: '请输入配置名称', trigger: 'blur' }\n  ],\n  modelType: [\n    { required: true, message: '请选择模型类型', trigger: 'change' }\n  ],\n  apiKey: [\n    { required: true, message: '请输入API密钥', trigger: 'blur' }\n  ],\n  baseUrl: [\n    { required: true, message: '请输入基础URL', trigger: 'blur' }\n  ],\n  modelVersion: [\n    { required: true, message: '请输入模型版本', trigger: 'blur' }\n  ],\n  promptPrice: [\n    { required: true, message: '请输入每1000个输入token的价格', trigger: 'blur' }\n  ],\n  completionPrice: [\n    { required: true, message: '请输入每1000个输出token的价格', trigger: 'blur' }\n  ]\n};\n\n// 页面加载时初始化\nonMounted(async () => {\n  // 初始化表单为空，只有模型类型默认为通义千问\n  resetFormToDefault();\n  // 加载配置列表\n  await loadConfigList();\n});\n\n// 加载配置列表\nconst loadConfigList = async () => {\n  try {\n    const response = await fetch('/api/ai_configs?include_sensitive=true');\n    const result = await response.json();\n    \n    if (result.success) {\n      configList.value = result.data || [];\n    } else {\n      console.error('加载配置列表失败:', result.message);\n    }\n  } catch (error) {\n    console.error('加载配置列表失败:', error);\n  }\n};\n\n// 获取模型类型中文名称和颜色\nconst getModelTypeInfo = (modelType) => {\n  const modelInfo = {\n    'qwen': { name: '通义千问', color: '#ff6b35', bgColor: '#fff2ed' },\n    'volcengine': { name: '字节跳动（火山引擎）', color: '#000000', bgColor: '#f5f5f5' },\n    'deepseek': { name: 'DeepSeek', color: '#6366f1', bgColor: '#eef2ff' },\n    'zhipu': { name: '智谱AI', color: '#059669', bgColor: '#ecfdf5' },\n    'openai': { name: 'OpenAI', color: '#10b981', bgColor: '#ecfdf5' },\n    'wenxin': { name: '百度文心一言', color: '#3b82f6', bgColor: '#eff6ff' },\n    'xunfei': { name: '讯飞星火', color: '#f59e0b', bgColor: '#fffbeb' },\n    'minimax': { name: 'MiniMax', color: '#8b5cf6', bgColor: '#f3f4f6' },\n    'moonshot': { name: '月之暗面', color: '#6366f1', bgColor: '#eef2ff' },\n    '360': { name: '360智脑', color: '#059669', bgColor: '#ecfdf5' },\n    'claude': { name: 'Claude (Anthropic)', color: '#dc2626', bgColor: '#fef2f2' },\n    'gemini': { name: 'Gemini (Google)', color: '#ea4335', bgColor: '#fef2f2' }\n  };\n  return modelInfo[modelType] || { name: modelType, color: '#6b7280', bgColor: '#f9fafb' };\n};\n\n// 格式化时间\nconst formatTime = (timeStr) => {\n  if (!timeStr) return '';\n  const date = new Date(timeStr);\n  return date.toLocaleString('zh-CN', {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit'\n  });\n};\n\n// 查看配置\nconst viewConfig = async (config) => {\n  try {\n    console.log('查看配置:', config);\n    \n    const response = await fetch(`/api/ai_config/${config.id}`);\n    const result = await response.json();\n    \n    if (result.success) {\n      viewConfigData.value = result.data;\n      viewDialogVisible.value = true;\n    } else {\n      ElMessage.error(result.message || '获取配置详情失败');\n    }\n  } catch (error) {\n    console.error('获取配置详情失败:', error);\n    ElMessage.error('获取配置详情失败');\n  }\n};\n\n// 编辑配置\nconst editConfig = (config) => {\n  console.log('编辑配置:', config);\n  // 将选中的配置填充到表单中\n  configForm.configId = config.id; // 添加配置ID\n  configForm.configName = config.config_name;\n  configForm.modelType = config.model_type;\n  configForm.apiKey = config.api_key;\n  configForm.baseUrl = config.model_url;\n  configForm.modelVersion = config.model_version;\n  configForm.promptPrice = config.prompt_price_per_1k;\n  configForm.completionPrice = config.completion_price_per_1k;\n  \n  ElMessage.success('配置已加载到表单中，请修改后保存');\n};\n\n// 删除配置\nconst deleteConfig = async (config) => {\n  try {\n    console.log('删除配置:', config);\n    \n    const response = await fetch(`/api/ai_config/${config.id}/delete`, {\n      method: 'DELETE',\n      headers: {\n        'Content-Type': 'application/json',\n      }\n    });\n    \n    const result = await response.json();\n    \n    if (result.success) {\n      ElMessage.success(result.message);\n      // 刷新配置列表\n      await loadConfigList();\n    } else {\n      ElMessage.error(result.message);\n    }\n  } catch (error) {\n    console.error('删除配置失败:', error);\n    ElMessage.error('删除配置失败');\n  }\n};\n\n// 切换配置启用状态\nconst toggleConfigEnabled = async (config, newValue) => {\n  try {\n    console.log('切换配置启用状态:', config, '新值:', newValue);\n    \n    // 如果要启用，先禁用所有其他配置\n    if (newValue) {\n      // 找到所有已启用的配置（除了当前配置）\n      const otherEnabledConfigs = configList.value.filter(c => c.is_enabled && c.id !== config.id);\n      \n      if (otherEnabledConfigs.length > 0) {\n        // 显示提示信息\n        ElMessage.info('正在切换配置，请稍候...');\n        \n        // 先禁用其他已启用的配置\n        for (const otherConfig of otherEnabledConfigs) {\n          try {\n            const disableResponse = await fetch(`/api/ai_config/${otherConfig.id}/toggle_enabled`, {\n              method: 'PUT',\n              headers: {\n                'Content-Type': 'application/json',\n              },\n              body: JSON.stringify({\n                enabled: false\n              })\n            });\n            \n            const disableResult = await disableResponse.json();\n            if (!disableResult.success) {\n              console.error('禁用其他配置失败:', disableResult.message);\n            }\n          } catch (error) {\n            console.error('禁用其他配置失败:', error);\n          }\n        }\n      }\n    }\n    \n    // 然后切换当前配置的状态\n    const response = await fetch(`/api/ai_config/${config.id}/toggle_enabled`, {\n      method: 'PUT',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({\n        enabled: newValue\n      })\n    });\n    \n    const result = await response.json();\n    \n    if (result.success) {\n      ElMessage.success(result.message);\n      // 刷新配置列表以获取最新状态\n      await loadConfigList();\n    } else {\n      ElMessage.error(result.message);\n    }\n  } catch (error) {\n    console.error('切换启用状态失败:', error);\n    ElMessage.error('切换启用状态失败');\n  }\n};\n\n// 重置表单为默认状态\nconst resetFormToDefault = () => {\n  configForm.configId = null;\n  configForm.configName = '';\n  configForm.modelType = 'qwen';\n  configForm.apiKey = '';\n  configForm.baseUrl = '';\n  configForm.modelVersion = '';\n  configForm.promptPrice = '';\n  configForm.completionPrice = '';\n};\n\n// 加载配置（暂时注释掉，后续从配置列表中选择时调用）\n// const loadConfig = async () => {\n//   try {\n//     const response = await fetch('/api/ai_config');\n//     const result = await response.json();\n//     \n//     if (result.success && result.data) {\n//       // 填充表单数据\n//       configForm.modelType = result.data.modelType || 'qwen';\n//       configForm.apiKey = result.data.apiKey || '';\n//       configForm.baseUrl = result.data.baseUrl || '';\n//       configForm.modelVersion = result.data.modelVersion || '';\n//       configForm.promptPrice = result.data.promptPrice || '0.001';\n//       configForm.completionPrice = result.data.completionPrice || '0.002';\n//     }\n//   } catch (error) {\n//     console.error('加载配置失败:', error);\n//     ElMessage.error('加载配置失败');\n//   }\n// };\n\n// 保存配置\nconst saveConfig = async () => {\n  try {\n    await configFormRef.value.validate();\n    saving.value = true;\n    \n    const isEdit = configForm.configId !== null;\n    const url = isEdit ? `/api/ai_config/${configForm.configId}` : '/api/ai_config';\n    const method = isEdit ? 'PUT' : 'POST';\n    \n    const response = await fetch(url, {\n      method: method,\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({\n        configId: configForm.configId,\n        configName: configForm.configName,\n        modelType: configForm.modelType,\n        apiKey: configForm.apiKey,\n        baseUrl: configForm.baseUrl,\n        modelVersion: configForm.modelVersion,\n        promptPrice: configForm.promptPrice,\n        completionPrice: configForm.completionPrice\n      })\n    });\n    \n    const result = await response.json();\n    \n    if (result.success) {\n      ElMessage.success(isEdit ? '配置更新成功！' : '配置保存成功！');\n      // 保存成功后清空表单\n      resetFormToDefault();\n      // 刷新配置列表\n      await loadConfigList();\n    } else {\n      // 显示具体的验证错误信息\n      if (result.errors) {\n        // 显示所有验证错误\n        const errorMessages = Object.values(result.errors);\n        if (errorMessages.length === 1) {\n          ElMessage.error(errorMessages[0]);\n        } else {\n          // 如果有多个错误，显示所有错误\n          const errorText = errorMessages.join('；');\n          ElMessage.error(`验证失败：${errorText}`);\n          console.error('所有验证错误:', result.errors);\n        }\n    } else {\n      ElMessage.error(result.message || '配置保存失败');\n      }\n    }\n  } catch (error) {\n    console.error('配置保存失败:', error);\n    ElMessage.error('配置保存失败，请检查输入');\n  } finally {\n    saving.value = false;\n  }\n};\n\n// 重置配置\nconst resetConfig = () => {\n  ElMessageBox.confirm(\n    '确定要重置所有配置吗？',\n    '提示',\n    {\n      confirmButtonText: '确定',\n      cancelButtonText: '取消',\n      type: 'warning',\n    }\n  ).then(() => {\n    resetFormToDefault();\n    ElMessage.success('配置已重置');\n  }).catch(() => {\n    // 用户取消\n  });\n};\n</script>\n\n<style scoped>\n.ai-config-container {\n  padding: 24px;\n  width: 100%;\n  height: 100%;\n  background: #f8fafc;\n  border-radius: 20px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\n}\n\n.demo-tabs {\n  height: 100%;\n  border-radius: 16px;\n  overflow: hidden;\n}\n\n.demo-tabs > .el-tabs__content {\n  padding: 32px;\n  color: #6b778c;\n  font-size: 16px;\n  font-weight: 400;\n}\n\n.el-tabs--right .el-tabs__content,\n.el-tabs--left .el-tabs__content {\n  height: 100%;\n}\n\n.el-tabs--left .el-tabs__header {\n  border-right: 1px solid #e4e7ed;\n  border-bottom: none;\n  border-top: none;\n  border-left: none;\n}\n\n.el-tabs--left .el-tabs__nav-wrap {\n  border-bottom: none;\n}\n\n.el-tabs--left .el-tabs__nav {\n  border: none;\n}\n\n.el-tabs--left .el-tabs__item {\n  border: none;\n  border-right: 2px solid transparent;\n  transition: all 0.3s;\n}\n\n.el-tabs--left .el-tabs__item.is-active {\n  border-right: 2px solid #409eff;\n  background-color: #f0f9ff;\n}\n\n.tab-content {\n  height: 100%;\n  overflow-y: auto;\n}\n\n.config-container {\n  padding: 20px;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.config-layout {\n  display: flex;\n  gap: 30px;\n  height: 100%;\n}\n\n.config-left {\n  flex: 1;\n  max-width: 620px;\n  display: flex;\n  flex-direction: column;\n}\n\n.config-right {\n  flex: 1;\n  max-width: 800px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.config-right {\n  flex: 1;\n  max-width: 800px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.config-list {\n  margin-top: 15px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.config-list {\n  margin-top: 15px;\n}\n\n.empty-list {\n  text-align: center;\n  padding: 40px 20px;\n  color: #999;\n  font-size: 14px;\n}\n\n.config-items {\n  height: calc(100vh - 300px);\n  overflow-y: auto;\n  /* 隐藏滚动条 */\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE and Edge */\n}\n\n/* 隐藏 Webkit 浏览器的滚动条 */\n.config-items::-webkit-scrollbar {\n  display: none;\n}\n\n.config-header {\n  display: flex;\n  align-items: center;\n  padding: 10px 15px;\n  background-color: #f1f5f9;\n  border-bottom: 2px solid #e2e8f0;\n  font-weight: 600;\n  color: #475569;\n  font-size: 13px;\n}\n\n.header-name {\n  flex: 0 0 150px;\n}\n\n.header-info {\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  flex: 1;\n}\n\n.config-header .config-name {\n  font-weight: 600;\n  color: #475569;\n  font-size: 13px;\n  flex: 0 0 120px;\n  padding-right: 8px;\n}\n\n.header-model-type {\n  width: 140px;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  padding-right: 8px;\n}\n\n.header-model-version {\n  width: 90px;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding-right: 8px;\n}\n\n.header-update-time {\n  width: 120px;\n  text-align: left;\n}\n\n.header-enabled {\n  width: 80px;\n  text-align: center;\n}\n\n.header-actions {\n  width: 140px;\n  text-align: left;\n}\n\n.config-item {\n  display: flex;\n  align-items: center;\n  padding: 12px 15px;\n  border-bottom: 1px solid #e2e8f0;\n  transition: background-color 0.3s ease;\n}\n\n.config-item:hover {\n  background-color: #f8fafc;\n}\n\n.config-item:last-child {\n  border-bottom: none;\n}\n\n.config-name {\n  font-weight: 600;\n  color: #1e293b;\n  font-size: 14px;\n  flex: 0 0 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding-right: 8px;\n}\n\n.config-info {\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  flex: 1;\n}\n\n.model-type-container {\n  width: 140px;\n  display: flex;\n  align-items: center;\n  padding-right: 8px;\n}\n\n.model-type {\n  padding: 2px 6px;\n  border-radius: 3px;\n  white-space: nowrap;\n  text-align: left;\n  display: inline-block;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.model-version {\n  color: #64748b;\n  white-space: nowrap;\n  width: 90px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-right: 8px;\n}\n\n.config-time {\n  color: #94a3b8;\n  white-space: nowrap;\n  width: 120px;\n}\n\n.config-enabled {\n  width: 80px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.config-actions {\n  width: 140px;\n  display: flex;\n  gap: 6px;\n}\n\n/* 自定义按钮样式 */\n.action-btn {\n  font-weight: 500;\n}\n\n.view-btn {\n  background-color: #10b981 !important;\n  border-color: #10b981 !important;\n  color: white !important;\n}\n\n.view-btn:hover {\n  background-color: #059669 !important;\n  border-color: #059669 !important;\n}\n\n.edit-btn {\n  background-color: #409eff !important;\n  border-color: #409eff !important;\n  color: white !important;\n}\n\n.edit-btn:hover {\n  background-color: #337ecc !important;\n  border-color: #337ecc !important;\n}\n\n.delete-btn {\n  background-color: #dc2626 !important;\n  border-color: #dc2626 !important;\n  color: white !important;\n}\n\n.delete-btn:hover {\n  background-color: #b91c1c !important;\n  border-color: #b91c1c !important;\n}\n\n/* 气泡确认框样式优化 */\n:deep(.el-popconfirm) {\n  .el-popconfirm__main {\n    padding: 12px 16px;\n  }\n  \n  .el-popconfirm__title {\n    font-size: 14px;\n    color: #374151;\n    margin-bottom: 8px;\n  }\n  \n  .el-popconfirm__action {\n    margin-top: 12px;\n  }\n  \n  .el-button {\n    padding: 6px 12px;\n    font-size: 12px;\n  }\n}\n\n/* 配置详情对话框样式 */\n.config-detail {\n  padding: 0;\n}\n\n.detail-section {\n  margin-bottom: 24px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-section h4 {\n  margin-bottom: 16px;\n  color: #409eff;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #e2e8f0;\n  padding-bottom: 8px;\n}\n\n.detail-section h4::before {\n  content: '';\n  width: 3px;\n  height: 16px;\n  background: #409eff;\n  margin-right: 8px;\n  border-radius: 2px;\n}\n\n.detail-item {\n  display: flex;\n  align-items: flex-start;\n  margin-bottom: 12px;\n  line-height: 1.6;\n}\n\n.detail-item:last-child {\n  margin-bottom: 0;\n}\n\n.detail-item label {\n  width: 100px;\n  font-weight: 600;\n  color: #374151;\n  flex-shrink: 0;\n}\n\n.detail-item span {\n  color: #64748b;\n  word-break: break-all;\n}\n\n.detail-item .api-key {\n  font-family: 'Courier New', monospace;\n  background: #f1f5f9;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 12px;\n}\n\n.detail-item .url-text {\n  font-family: 'Courier New', monospace;\n  background: #f1f5f9;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  word-break: break-all;\n}\n\n.detail-item .model-type-tag {\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  display: inline-block;\n}\n\n.dialog-footer {\n  text-align: center;\n}\n\n/* 开关动画效果 */\n.animated-switch {\n  transition: all 0.3s ease;\n}\n\n:deep(.animated-switch .el-switch__core) {\n  transition: all 0.3s ease;\n}\n\n:deep(.animated-switch .el-switch__action) {\n  transition: all 0.3s ease;\n}\n\n:deep(.animated-switch.is-checked .el-switch__core) {\n  background-color: #10b981;\n  border-color: #10b981;\n}\n\n:deep(.animated-switch:not(.is-checked) .el-switch__core) {\n  background-color: #d1d5db;\n  border-color: #d1d5db;\n}\n\n.form-section {\n  margin-bottom: 25px;\n}\n\n.form-section h4 {\n  margin-bottom: 15px;\n  color: #409eff;\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n}\n\n.form-section h4::before {\n  content: '';\n  width: 4px;\n  height: 18px;\n  background: #409eff;\n  margin-right: 8px;\n  border-radius: 2px;\n}\n\n.config-form {\n  max-width: 600px;\n}\n\n.config-input {\n  width: 100%;\n}\n\n.el-form-item {\n  margin-bottom: 20px;\n}\n\n.el-form-item:last-child {\n  margin-bottom: 0;\n  text-align: center;\n}\n\n.form-actions {\n  text-align: center;\n  margin-top: 30px;\n  padding-top: 20px;\n  border-top: 1px solid #eee;\n}\n\n.save-btn, .reset-btn {\n  margin: 0 10px;\n  padding: 12px 24px;\n  font-weight: 600;\n  border-radius: 8px;\n  transition: all 0.3s ease;\n}\n\n.save-btn {\n  background: #38bdf8;\n  border-color: #38bdf8;\n  box-shadow: 0 2px 8px rgba(56,189,248,0.25);\n}\n\n.save-btn:hover {\n  background: #0ea5e9;\n  border-color: #0ea5e9;\n  box-shadow: 0 4px 12px rgba(56,189,248,0.35);\n}\n\n.reset-btn {\n  background: #f8fafc;\n  border: 1px solid #e2e8f0;\n  color: #64748b;\n}\n\n.reset-btn:hover {\n  background: #f1f5f9;\n  border-color: #cbd5e1;\n  color: #475569;\n}\n\n.saving-inline {\n  display: inline-flex;\n  align-items: center;\n}\n\n.circular-loading {\n  width: 16px;\n  height: 16px;\n  border: 2px solid #e4e7ed;\n  border-top: 2px solid #409eff;\n  border-radius: 50%;\n  margin-right: 8px;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.stat-card {\n  margin-top: 20px;\n  max-width: 400px;\n}\n\n.stat-container {\n  padding-left: 40px;\n  padding-top: 20px;\n}\n\n.help-container {\n  /* 隐藏右侧滚动条 */\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n  padding-left: 40px;\n  padding-top: 20px;\n  max-height: calc(100vh - 200px);\n  overflow-y: auto;\n  padding-bottom: 40px;\n}\n\n.custom-collapse-item {\n  margin-bottom: 16px;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  transition: all 0.3s ease;\n}\n\n.custom-collapse-item:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.custom-collapse-item :deep(.el-collapse-item__header) {\n  background: #94a3b8;\n  color: white;\n  font-weight: 600;\n  font-size: 16px;\n  padding: 16px 20px;\n  border: none;\n  border-radius: 8px 8px 0 0;\n  transition: all 0.3s ease;\n}\n\n.custom-collapse-item :deep(.el-collapse-item__header:hover) {\n  background: #64748b;\n}\n\n.custom-collapse-item :deep(.el-collapse-item__content) {\n  background: #f8fafc;\n  padding: 20px;\n  border-radius: 0 0 8px 8px;\n  border: 1px solid #e2e8f0;\n  border-top: none;\n  overflow-y: visible;\n}\n\n/* 更新日志特殊样式 */\n.update-log-item :deep(.el-collapse-item__content) {\n  max-height: 220px;\n  overflow-y: auto;\n}\n\n/* 隐藏更新日志内容区域的滚动条 */\n.update-log-item :deep(.el-collapse-item__content)::-webkit-scrollbar {\n  display: none;\n}\n\n.update-log-item :deep(.el-collapse-item__content) {\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n.custom-collapse-item :deep(.el-collapse-item__wrap) {\n  border: none;\n}\n\n.custom-collapse-item :deep(.el-collapse-item__arrow) {\n  color: white;\n  font-weight: bold;\n}\n\n/* 自定义滚动条样式 */\n.custom-collapse-item :deep(.el-collapse-item__content)::-webkit-scrollbar {\n  width: 6px;\n}\n\n.custom-collapse-item :deep(.el-collapse-item__content)::-webkit-scrollbar-track {\n  background: #f1f5f9;\n  border-radius: 3px;\n}\n\n.custom-collapse-item :deep(.el-collapse-item__content)::-webkit-scrollbar-thumb {\n  background: #cbd5e1;\n  border-radius: 3px;\n}\n\n.custom-collapse-item :deep(.el-collapse-item__content)::-webkit-scrollbar-thumb:hover {\n  background: #94a3b8;\n}\n\n.stat-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 0;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.stat-item:last-child {\n  border-bottom: none;\n}\n\n.stat-label {\n  font-weight: 500;\n  color: #666;\n}\n\n.stat-value {\n  font-weight: 600;\n  color: #409eff;\n  font-size: 18px;\n}\n\nh3 {\n  margin-bottom: 16px;\n  color: #333;\n  font-size: 20px;\n  font-weight: 600;\n}\n\np {\n  margin-bottom: 16px;\n  line-height: 1.6;\n  color: #666;\n}\n\nul {\n  padding-left: 20px;\n  margin-bottom: 16px;\n}\n\nli {\n  margin-bottom: 8px;\n  color: #666;\n}\n</style> "}}}}