2910410219andClaude
bf1e9fa89a
1. Token 映射下拉:
- 新增 flattenWrappedFields 函数递归提取 { type, attrs } 结构中的叶子字段
- 下拉选项显示 路径 — 标签 格式，选中值存完整路径
- 同步/流式从响应映射取，异步从回调响应映射取
2. 模型详情 API:
- 新增 getModelManage 详情接口 (/model/manage/getModelManage)
- openDialog 改为 async，编辑时调详情接口获取完整数据
- 修复 res.data.modelManage 取值路径
3. JSON 编辑器布局:
- 弹窗宽度 1000px → 1200px
- 配置侧栏 320px → 380px
- config-summary 改用 flex:1 防止滚动条截断文本
Co-Authored-By: Claude <noreply@anthropic.com>
681 lines
25 KiB
Vue
681 lines
25 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" :close-on-click-modal="false" destroy-on-close>
|
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="detailLoading">
|
|
<!-- ========== 基础信息 ========== -->
|
|
<el-divider content-position="left">基础信息</el-divider>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="模型名称" prop="modelName">
|
|
<el-input v-model="formData.modelName" placeholder="请输入模型名称（唯一标识）" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="模型类型" prop="modelType">
|
|
<el-cascader
|
|
v-model="formData.modelType"
|
|
:options="modelTypes"
|
|
:props="{ expandTrigger: 'hover', value: 'value', label: 'label', children: 'children' }"
|
|
placeholder="请选择模型类型"
|
|
clearable
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="模型供应商" prop="modelSupplier">
|
|
<el-select
|
|
v-model="formData.modelSupplier"
|
|
placeholder="请选择模型供应商"
|
|
clearable
|
|
filterable
|
|
style="width: 100%"
|
|
:loading="supplierLoading"
|
|
>
|
|
<el-option
|
|
v-for="item in supplierList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="服务地址" prop="baseUrl">
|
|
<el-input v-model="formData.baseUrl" placeholder="请输入模型服务地址" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- ========== 调用配置 ========== -->
|
|
<el-divider content-position="left">调用配置</el-divider>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="返回类型" prop="responseType">
|
|
<el-select v-model="formData.responseType" placeholder="请选择返回类型" clearable style="width: 100%">
|
|
<el-option label="同步" :value="1" />
|
|
<el-option label="异步" :value="2" />
|
|
<el-option label="流式" :value="3" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="API Key" prop="apiKey">
|
|
<el-input v-model="formData.apiKey" type="password" show-password placeholder="请输入调用凭证/密钥" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="对话模型" prop="chatModel">
|
|
<el-switch v-model="formData.chatModel" :disabled="!isReasoningModel" />
|
|
<span v-if="!isReasoningModel" class="form-hint">仅推理模型支持此设置</span>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="启用" prop="enabled">
|
|
<el-switch v-model="formData.enabled" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<!-- 占位对齐 -->
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="最大并发" prop="maxConcurrency">
|
|
<el-input-number v-model="formData.maxConcurrency" :min="1" :max="1000" style="width: 100%" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="最大 Token 数" prop="maxTokens">
|
|
<el-input-number v-model="formData.maxTokens" :min="0" :max="999999" style="width: 100%" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="Token 预估价格" prop="tokenPredictPrice">
|
|
<el-input-number v-model="formData.tokenPredictPrice" :min="0" :precision="4" :step="0.0001" style="width: 100%" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- ========== 映射配置 ========== -->
|
|
<el-divider content-position="left">映射配置</el-divider>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
<el-form-item label="请求头映射">
|
|
<KeyValueEditor v-model="formData.requestHeadMapping" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="请求体映射">
|
|
<el-button @click="openMappingEditor('requestBodyMapping')" style="width: 100%">
|
|
配置 ({{ Object.keys(formData.requestBodyMapping).length }})
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="响应映射">
|
|
<el-button @click="openMappingEditor('responseMapping')" style="width: 100%">
|
|
配置 ({{ Object.keys(formData.responseMapping).length }})
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- ========== Token 映射配置 ========== -->
|
|
<el-divider content-position="left">Token 映射配置</el-divider>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="输入 Token 路径">
|
|
<el-select v-model="formData.tokenMapping.promptTokens" :disabled="!hasMappingConfig" :placeholder="mappingPlaceholder" clearable style="width: 100%">
|
|
<el-option v-for="item in tokenMappingOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="输出 Token 路径">
|
|
<el-select v-model="formData.tokenMapping.completionTokens" :disabled="!hasMappingConfig" :placeholder="mappingPlaceholder" clearable style="width: 100%">
|
|
<el-option v-for="item in tokenMappingOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="总 Token 路径">
|
|
<el-select v-model="formData.tokenMapping.totalTokens" :disabled="!hasMappingConfig" :placeholder="mappingPlaceholder" clearable style="width: 100%">
|
|
<el-option v-for="item in tokenMappingOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- ========== 异步任务配置 ========== -->
|
|
<template v-if="formData.responseType === 2">
|
|
<el-divider content-position="left">异步任务配置</el-divider>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="回调 URL">
|
|
<el-input v-model="formData.asyncTaskMapping.url" placeholder="请输入异步回调地址" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
<el-form-item label="回调请求头映射">
|
|
<KeyValueEditor v-model="formData.asyncTaskMapping.requestHeadMapping" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="回调响应映射">
|
|
<el-button @click="openMappingEditor('asyncResponseMapping')" style="width: 100%">
|
|
配置 ({{ Object.keys(formData.asyncTaskMapping.responseMapping).length }})
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-divider content-position="left" class="sub-divider">任务状态字段路径</el-divider>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="Task ID 路径">
|
|
<el-input v-model="formData.asyncTaskMapping.taskId" placeholder="如 data.task_id" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="任务状态路径">
|
|
<el-input v-model="formData.asyncTaskMapping.taskStatus" placeholder="如 data.status" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="待处理值">
|
|
<el-input v-model="formData.asyncTaskMapping.taskStatusPending" placeholder="pending" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="运行中值">
|
|
<el-input v-model="formData.asyncTaskMapping.taskStatusRunning" placeholder="running" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="成功值">
|
|
<el-input v-model="formData.asyncTaskMapping.taskStatusSuccess" placeholder="succeeded" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="失败值">
|
|
<el-input v-model="formData.asyncTaskMapping.taskStatusFailed" placeholder="failed" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="取消值">
|
|
<el-input v-model="formData.asyncTaskMapping.taskStatusCancel" placeholder="canceled" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
|
|
<el-form-item label="未知值">
|
|
<el-input v-model="formData.asyncTaskMapping.taskStatusUnknown" placeholder="unknown" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<!-- ========== 视频配置 ========== -->
|
|
<template v-if="isVideoModel">
|
|
<el-divider content-position="left">视频配置</el-divider>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
<el-form-item label="尾帧图像">
|
|
<el-input v-model="formData.lastFrame" placeholder="视频的尾帧图像 URL" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
</el-form>
|
|
|
|
<!-- JSON 编辑器弹窗 -->
|
|
<el-dialog v-model="jsonEditorVisible" :title="jsonEditorTitle" width="1200px" top="5vh" :close-on-click-modal="false" destroy-on-close append-to-body>
|
|
<template #header>
|
|
<span>{{ jsonEditorTitle }}</span>
|
|
<div class="json-editor-toolbar">
|
|
<el-button size="small" @click="handlePasteJson">粘贴 JSON</el-button>
|
|
<el-button size="small" @click="handleViewJson">查看 JSON</el-button>
|
|
</div>
|
|
</template>
|
|
<div style="height: 520px; overflow-y: auto">
|
|
<JsonEditor ref="jsonEditorRef" v-model="jsonEditorData" />
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="jsonEditorVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="confirmJsonEditor">确 定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 查看 JSON 弹窗 -->
|
|
<el-dialog v-model="viewJsonVisible" title="查看 JSON" width="700px" :close-on-click-modal="false" destroy-on-close append-to-body>
|
|
<el-input type="textarea" :rows="18" v-model="viewJsonText" readonly />
|
|
<template #footer>
|
|
<el-button type="primary" @click="viewJsonVisible = false">关 闭</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit" :loading="submitting">{{ submitText }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="modelConfigV2EditModule">
|
|
import { ref, reactive, computed, watch } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
import type { FormInstance, FormRules } from 'element-plus';
|
|
import { JsonEditor } from '/@/components/json-schema-editor';
|
|
import {
|
|
createModelManage,
|
|
updateModelManage,
|
|
getModelManage,
|
|
getModelSupplierList,
|
|
type ModelManageItem,
|
|
type ModelTypeTreeNode,
|
|
type ModelSupplierItem,
|
|
type TokenMapping,
|
|
type AsyncTaskMapping,
|
|
} from '/@/api/settings/modelConfigV2';
|
|
import KeyValueEditor from './keyValueEditor.vue';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelTypes?: ModelTypeTreeNode[];
|
|
}>(),
|
|
{
|
|
modelTypes: () => [] as ModelTypeTreeNode[],
|
|
}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
refresh: [];
|
|
}>();
|
|
|
|
const formRef = ref<FormInstance>();
|
|
const dialogVisible = ref(false);
|
|
const submitting = ref(false);
|
|
const detailLoading = ref(false);
|
|
const isEdit = ref(false);
|
|
const editId = ref('');
|
|
const supplierList = ref<ModelSupplierItem[]>([]);
|
|
const supplierLoading = ref(false);
|
|
|
|
const dialogTitle = computed(() => (isEdit.value ? '修改模型配置' : '新增模型配置'));
|
|
const submitText = computed(() => (isEdit.value ? '保存修改' : '确 定'));
|
|
|
|
const defaultTokenMapping: TokenMapping = {
|
|
promptTokens: '',
|
|
completionTokens: '',
|
|
totalTokens: '',
|
|
};
|
|
|
|
const defaultAsyncTaskMapping: AsyncTaskMapping = {
|
|
url: '',
|
|
httpMethod: 'POST',
|
|
requestHeadMapping: {},
|
|
responseMapping: {},
|
|
taskId: '',
|
|
taskStatus: '',
|
|
taskStatusPending: '',
|
|
taskStatusRunning: '',
|
|
taskStatusSuccess: '',
|
|
taskStatusFailed: '',
|
|
taskStatusCancel: '',
|
|
taskStatusUnknown: '',
|
|
};
|
|
|
|
const formData = reactive({
|
|
modelName: '',
|
|
modelType: [] as number[],
|
|
modelSupplier: undefined as number | undefined,
|
|
baseUrl: '',
|
|
apiKey: '',
|
|
responseType: undefined as number | undefined,
|
|
enabled: true,
|
|
chatModel: false,
|
|
maxConcurrency: 10,
|
|
maxTokens: 4096,
|
|
tokenPredictPrice: 0,
|
|
// 映射
|
|
requestHeadMapping: {} as Record<string, unknown>,
|
|
requestBodyMapping: {} as Record<string, unknown>,
|
|
responseMapping: {} as Record<string, unknown>,
|
|
// Token 映射
|
|
tokenMapping: { ...defaultTokenMapping },
|
|
// 异步任务映射
|
|
asyncTaskMapping: { ...defaultAsyncTaskMapping },
|
|
// 视频
|
|
lastFrame: '',
|
|
});
|
|
|
|
/** 获取选中模型类型路径上的所有标签 */
|
|
function getSelectedModelLabels(): string[] {
|
|
const path = formData.modelType;
|
|
if (!path || path.length === 0) return [];
|
|
const labels: string[] = [];
|
|
let currentLevel = props.modelTypes;
|
|
for (let i = 0; i < path.length; i++) {
|
|
const found = currentLevel.find((n) => n.value === path[i]);
|
|
if (!found) break;
|
|
labels.push(found.label);
|
|
currentLevel = found.children || [];
|
|
}
|
|
return labels;
|
|
}
|
|
|
|
/** 判断是否是视频模型类型 */
|
|
const isVideoModel = computed(() => {
|
|
return getSelectedModelLabels().some((l) => l.includes('视频') || l.toLowerCase().includes('video'));
|
|
});
|
|
|
|
/** 判断是否是推理模型类型 */
|
|
const isReasoningModel = computed(() => {
|
|
return getSelectedModelLabels().some((l) => l.includes('推理') || l.toLowerCase().includes('reasoning'));
|
|
});
|
|
|
|
/** 非推理模型时自动关闭对话模型开关 */
|
|
watch(isReasoningModel, (val) => {
|
|
if (!val) formData.chatModel = false;
|
|
});
|
|
|
|
|
|
/** 递归提取 { type, attrs/value } 包裹结构中的所有叶子字段 */
|
|
function flattenWrappedFields(obj: any, basePath: string = ''): { path: string; label: string }[] {
|
|
const results: { path: string; label: string }[] = [];
|
|
if (!obj || typeof obj !== 'object') return results;
|
|
|
|
// 检测 { type, attrs/value } 包裹格式
|
|
if (typeof obj.type === 'string' && ['string','number','boolean','null','object','array'].includes(obj.type)) {
|
|
const jtype = obj.type;
|
|
const dataKey = (jtype === 'object' || jtype === 'array') ? 'attrs' : 'value';
|
|
|
|
if (jtype === 'object' && dataKey in obj && obj[dataKey] && typeof obj[dataKey] === 'object' && !Array.isArray(obj[dataKey])) {
|
|
for (const [key, val] of Object.entries(obj[dataKey])) {
|
|
const childPath = basePath ? basePath + '.attrs.' + key : key;
|
|
results.push(...flattenWrappedFields(val, childPath));
|
|
}
|
|
} else if (jtype === 'array' && dataKey in obj && Array.isArray(obj[dataKey])) {
|
|
obj[dataKey].forEach((item: any, idx: number) => {
|
|
results.push(...flattenWrappedFields(item, basePath + '.attrs[' + idx + ']'));
|
|
});
|
|
} else if (['string', 'number', 'boolean', 'null'].includes(jtype)) {
|
|
results.push({ path: basePath, label: obj.label || '' });
|
|
}
|
|
return results;
|
|
}
|
|
|
|
// 普通对象（非包裹格式）
|
|
if (!Array.isArray(obj)) {
|
|
for (const [key, val] of Object.entries(obj)) {
|
|
const childPath = basePath ? basePath + '.' + key : key;
|
|
results.push(...flattenWrappedFields(val, childPath));
|
|
}
|
|
}
|
|
return results;
|
|
}
|
|
|
|
/** 根据返回类型获取 Token 映射下拉选项（响应映射的 key — 路径） */
|
|
const tokenMappingOptions = computed(() => {
|
|
const source = formData.responseType === 2
|
|
? formData.asyncTaskMapping.responseMapping
|
|
: formData.responseMapping;
|
|
return source ? flattenWrappedFields(source) : [];
|
|
});
|
|
|
|
/** 是否有可用的映射配置 */
|
|
const hasMappingConfig = computed(() => tokenMappingOptions.value.length > 0);
|
|
|
|
/** 下拉占位文本 */
|
|
const mappingPlaceholder = computed(() =>
|
|
hasMappingConfig.value ? '请选择' : '请先配置响应映射'
|
|
);
|
|
|
|
/** 切换返回类型时清空 token mapping */
|
|
watch(() => formData.responseType, () => {
|
|
formData.tokenMapping = { ...defaultTokenMapping };
|
|
});
|
|
|
|
/** JSON 编辑器弹窗状态 */
|
|
const jsonEditorVisible = ref(false);
|
|
const jsonEditorData = ref<Record<string, unknown>>({});
|
|
const editingMappingKey = ref<string>('');
|
|
const jsonEditorRef = ref();
|
|
|
|
const mappingFieldLabels: Record<string, string> = {
|
|
requestHeadMapping: '请求头映射',
|
|
requestBodyMapping: '请求体映射',
|
|
responseMapping: '响应映射',
|
|
asyncResponseMapping: '异步-响应映射',
|
|
};
|
|
|
|
const jsonEditorTitle = computed(() => {
|
|
const label = mappingFieldLabels[editingMappingKey.value] || editingMappingKey.value;
|
|
return `编辑 ${label}`;
|
|
});
|
|
|
|
/** 获取映射字段的引用 */
|
|
function getMappingValue(key: string): Record<string, unknown> {
|
|
if (key === 'asyncResponseMapping') return formData.asyncTaskMapping.responseMapping;
|
|
return (formData as Record<string, unknown>)[key] as Record<string, unknown>;
|
|
}
|
|
|
|
/** 设置映射字段的值 */
|
|
function setMappingValue(key: string, value: Record<string, unknown>) {
|
|
if (key === 'asyncResponseMapping') {
|
|
formData.asyncTaskMapping.responseMapping = value;
|
|
} else {
|
|
(formData as Record<string, unknown>)[key] = value;
|
|
}
|
|
}
|
|
|
|
const openMappingEditor = (key: string) => {
|
|
editingMappingKey.value = key;
|
|
jsonEditorData.value = { ...getMappingValue(key) };
|
|
jsonEditorVisible.value = true;
|
|
};
|
|
|
|
const confirmJsonEditor = () => {
|
|
setMappingValue(editingMappingKey.value, { ...jsonEditorData.value });
|
|
jsonEditorVisible.value = false;
|
|
};
|
|
|
|
const handlePasteJson = () => {
|
|
jsonEditorRef.value?.openPasteDialog();
|
|
};
|
|
|
|
const handleViewJson = () => {
|
|
viewJsonText.value = JSON.stringify(jsonEditorData.value, null, 2);
|
|
viewJsonVisible.value = true;
|
|
};
|
|
|
|
/** 查看 JSON 弹窗 */
|
|
const viewJsonVisible = ref(false);
|
|
const viewJsonText = ref('');
|
|
|
|
const formRules: FormRules = {
|
|
modelName: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
|
|
modelType: [
|
|
{
|
|
validator: (_rule: unknown, value: unknown, callback: (e?: Error) => void) => {
|
|
if (!value || (Array.isArray(value) && value.length === 0)) {
|
|
callback(new Error('请选择模型类型'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
modelSupplier: [{ required: true, message: '请选择模型供应商', trigger: 'change' }],
|
|
baseUrl: [{ required: true, message: '请输入模型服务地址', trigger: 'blur' }],
|
|
responseType: [{ required: true, message: '请选择返回类型', trigger: 'change' }],
|
|
};
|
|
|
|
const loadSupplierList = async () => {
|
|
supplierLoading.value = true;
|
|
try {
|
|
const res = await getModelSupplierList();
|
|
supplierList.value = res.data?.list || [];
|
|
} catch {
|
|
supplierList.value = [];
|
|
} finally {
|
|
supplierLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
formData.modelName = '';
|
|
formData.modelType = [];
|
|
formData.modelSupplier = undefined;
|
|
formData.baseUrl = '';
|
|
formData.apiKey = '';
|
|
formData.responseType = undefined;
|
|
formData.enabled = true;
|
|
formData.chatModel = false;
|
|
formData.maxConcurrency = 10;
|
|
formData.maxTokens = 4096;
|
|
formData.tokenPredictPrice = 0;
|
|
formData.requestHeadMapping = {};
|
|
formData.requestBodyMapping = {};
|
|
formData.responseMapping = {};
|
|
formData.tokenMapping = { ...defaultTokenMapping };
|
|
formData.asyncTaskMapping = { ...defaultAsyncTaskMapping };
|
|
formData.lastFrame = '';
|
|
};
|
|
|
|
const openDialog = async (type: 'add' | 'edit', id?: string) => {
|
|
resetForm();
|
|
isEdit.value = type === 'edit';
|
|
detailLoading.value = type === 'edit';
|
|
loadSupplierList();
|
|
|
|
if (type === 'edit' && id) {
|
|
editId.value = id;
|
|
try {
|
|
const res = await getModelManage(id);
|
|
const row = res.data.modelManage;
|
|
formData.modelName = row.modelName;
|
|
formData.modelType = [row.modelType];
|
|
formData.modelSupplier = Number(row.modelSupplier) || undefined;
|
|
formData.baseUrl = row.baseUrl;
|
|
formData.apiKey = row.apiKey || '';
|
|
formData.responseType = row.responseType ?? row.invokeType;
|
|
formData.enabled = row.enabled ?? true;
|
|
formData.chatModel = row.ChatModel ?? false;
|
|
formData.maxConcurrency = row.maxConcurrency || 10;
|
|
formData.maxTokens = row.maxTokens || 4096;
|
|
formData.tokenPredictPrice = row.tokenPredictPrice ?? 0;
|
|
formData.requestHeadMapping = row.requestHeadMapping || row.requestMapping || {};
|
|
formData.requestBodyMapping = row.requestBodyMapping || {};
|
|
formData.responseMapping = row.responseMapping || {};
|
|
formData.tokenMapping = row.tokenMapping ? { ...defaultTokenMapping, ...row.tokenMapping } : { ...defaultTokenMapping };
|
|
formData.asyncTaskMapping = row.asyncTaskMapping ? { ...defaultAsyncTaskMapping, ...row.asyncTaskMapping } : { ...defaultAsyncTaskMapping };
|
|
formData.lastFrame = row.lastFrame || '';
|
|
} catch {
|
|
// 关闭弹窗，错误由全局处理
|
|
dialogVisible.value = false;
|
|
return;
|
|
} finally {
|
|
detailLoading.value = false;
|
|
}
|
|
}
|
|
|
|
dialogVisible.value = true;
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return;
|
|
await formRef.value.validate(async (valid) => {
|
|
if (!valid) return;
|
|
|
|
submitting.value = true;
|
|
try {
|
|
const baseParams = {
|
|
modelName: formData.modelName,
|
|
modelType: Array.isArray(formData.modelType) ? formData.modelType[formData.modelType.length - 1] : formData.modelType,
|
|
modelSupplier: formData.modelSupplier as number,
|
|
baseUrl: formData.baseUrl,
|
|
responseType: formData.responseType as number,
|
|
apiKey: formData.apiKey || undefined,
|
|
enabled: formData.enabled,
|
|
chatModel: formData.chatModel,
|
|
maxConcurrency: formData.maxConcurrency,
|
|
maxTokens: formData.maxTokens,
|
|
tokenPredictPrice: formData.tokenPredictPrice,
|
|
requestHeadMapping: Object.keys(formData.requestHeadMapping).length > 0 ? formData.requestHeadMapping : undefined,
|
|
requestBodyMapping: Object.keys(formData.requestBodyMapping).length > 0 ? formData.requestBodyMapping : undefined,
|
|
responseMapping: Object.keys(formData.responseMapping).length > 0 ? formData.responseMapping : undefined,
|
|
};
|
|
|
|
// 根据返回类型附加对应配置
|
|
let tokenMapping: TokenMapping | undefined;
|
|
let asyncTaskMapping: AsyncTaskMapping | undefined;
|
|
let lastFrame: string | undefined;
|
|
|
|
// 所有返回类型共用 Token 映射（存的是响应映射中的 key）
|
|
const hasTokenConfig = Object.values(formData.tokenMapping).some((v) => v);
|
|
tokenMapping = hasTokenConfig ? { ...formData.tokenMapping } : undefined;
|
|
|
|
if (formData.responseType === 2) {
|
|
const atm = formData.asyncTaskMapping;
|
|
const hasAsyncConfig = atm.url || Object.keys(atm.requestHeadMapping).length > 0 || atm.taskId;
|
|
asyncTaskMapping = hasAsyncConfig ? ({ ...atm } as AsyncTaskMapping) : undefined;
|
|
}
|
|
|
|
if (formData.lastFrame) {
|
|
lastFrame = formData.lastFrame;
|
|
}
|
|
|
|
const params: Record<string, unknown> = {
|
|
...baseParams,
|
|
...(tokenMapping ? { tokenMapping } : {}),
|
|
...(asyncTaskMapping ? { asyncTaskMapping } : {}),
|
|
...(lastFrame ? { lastFrame } : {}),
|
|
};
|
|
|
|
if (isEdit.value) {
|
|
await updateModelManage({ id: editId.value, ...params } as any);
|
|
ElMessage.success('修改成功');
|
|
} else {
|
|
await createModelManage(params as any);
|
|
ElMessage.success('新增成功');
|
|
}
|
|
|
|
dialogVisible.value = false;
|
|
emit('refresh');
|
|
} catch {
|
|
// 接口错误由 request 全局提示
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
defineExpose({ openDialog });
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.mb20 {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
::v-deep(.sub-divider .el-divider__text) {
|
|
font-size: 13px;
|
|
color: #909399;
|
|
}
|
|
|
|
.json-editor-toolbar {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
margin-left: 16px;
|
|
}
|
|
</style>
|