red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c432eb431a1be21bd73a0e1cefeb28e1f186fb7c
admin-ui/src/views/settings/modelConfigV2/component/editModule.vue
T
2910410219andClaude c432eb431a 模型配置响应主体映射保存时直接填充字段中文 label 
responseBodyMapping 提交时 value 由空串占位改为对应响应映射字段的中文
label（无 label 时兜底为路径本身），使后端存储即携带展示名，无需前端
workflow 侧再 enrich 补充。

Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-20 18:20:08 +08:00

886 lines
33 KiB
Vue
Raw Blame History

<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%" @change="handleResponseTypeChange">
<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: calc(100% - 148px); margin-right: 8px" />
<el-select v-model="formData.tokenPredictPriceUnit" placeholder="单位" clearable style="width: 140px">
<el-option label="秒" value="second" />
<el-option label="百万 Token" value="per_million_tokens" />
<el-option label="千 Token" value="per_kilo_tokens" />
<el-option label="字数" value="per_word" />
</el-select>
</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="6" :md="6" :lg="6" :xl="6" 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="6" :md="6" :lg="6" :xl="6" 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-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
<el-form-item label="错误消息映射">
<el-button @click="openMappingEditor('error_message_mapping')" style="width: 100%">
配置 ({{ Object.keys(formData.error_message_mapping || {}).length }})
</el-button>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" v-if="formData.responseType !== 2">
<el-form-item label="响应主体映射">
<el-select
v-model="formData.responseBodyMapping"
multiple
: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="8" :md="8" :lg="8" :xl="8" 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-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
<el-form-item label="请求方法">
<el-select v-model="formData.asyncTaskMapping.httpMethod" style="width: 100%">
<el-option label="POST" value="POST" />
<el-option label="GET" value="GET" />
<el-option label="PUT" value="PUT" />
<el-option label="DELETE" value="DELETE" />
</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="回调 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="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求体映射">
<el-button @click="openMappingEditor('asyncRequestBodyMapping')" style="width: 100%">
配置 ({{ Object.keys((formData.asyncTaskMapping.requestBodyMapping || {})).length }})
</el-button>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="响应主体映射">
<el-select
v-model="formData.responseBodyMapping"
multiple
: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>
<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-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-select v-model="formData.asyncTaskMapping.taskId" :disabled="!hasTaskIdConfig" :placeholder="hasTaskIdConfig ? '请选择 Task ID 路径' : '请先配置响应映射'" clearable style="width: 100%">
<el-option v-for="item in taskIdOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
</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="任务状态路径">
<el-select v-model="formData.asyncTaskMapping.taskStatus" :disabled="!hasTaskStatusConfig" :placeholder="hasTaskStatusConfig ? '请选择任务状态路径' : '请先配置回调响应映射'" clearable style="width: 100%">
<el-option v-for="item in taskStatusOptions" :key="item.path" :label="`${item.path} — ${item.label}`" :value="item.path" />
</el-select>
</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>
<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="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-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="最大视频时长（秒）">
<el-input-number v-model="formData.maxDuration" :min="0" :max="999999" style="width: 100%" />
</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 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: {},
requestBodyMapping: {},
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>,
error_message_mapping: {} as Record<string, unknown>,
responseMapping: {} as Record<string, unknown>,
responseBodyMapping: [] as string[],
// Token 映射
tokenMapping: { ...defaultTokenMapping },
// 异步任务映射
asyncTaskMapping: { ...defaultAsyncTaskMapping },
// 视频
lastFrame: '',
maxDuration: 0,
tokenPredictPriceUnit: '',
});
/** 获取选中模型类型路径上的所有标签 */
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;
}
/** 从模型类型树中查找叶子值对应的完整路径（el-cascader 需要路径而非叶子值） */
function findModelTypePath(value: number, tree: ModelTypeTreeNode[]): number[] {
for (const node of tree) {
if (node.value === value) return [value];
if (node.children) {
const found = node.children.find((c) => c.value === value);
if (found) return [node.value, value];
}
}
return [value];
}
/** 判断是否是视频模型类型 */
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(() => {
if (hasMappingConfig.value) return '请选择';
return formData.responseType === 2 ? '请先配置回调响应映射' : '请先配置响应映射';
});
/** Task ID 路径下拉选项（来源响应映射） */
const taskIdOptions = computed(() => {
const source = formData.responseMapping;
return source ? flattenWrappedFields(source) : [];
});
/** 是否有 Task ID 映射配置 */
const hasTaskIdConfig = computed(() => taskIdOptions.value.length > 0);
/** 任务状态路径下拉选项（来源回调响应映射） */
const taskStatusOptions = computed(() => {
const source = formData.asyncTaskMapping.responseMapping;
return source ? flattenWrappedFields(source) : [];
});
/** 是否有任务状态映射配置 */
const hasTaskStatusConfig = computed(() => taskStatusOptions.value.length > 0);
/** 用户手动切换返回类型时清空 token 映射（编程赋值不触发） */
function handleResponseTypeChange() {
formData.tokenMapping = { ...defaultTokenMapping };
formData.responseBodyMapping = [];
}
/** 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: '响应映射',
error_message_mapping: '错误消息映射',
asyncResponseMapping: '异步-响应映射',
asyncRequestBodyMapping: '异步-请求体映射',
};
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;
if (key === 'asyncRequestBodyMapping') return formData.asyncTaskMapping.requestBodyMapping || {};
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 if (key === 'asyncRequestBodyMapping') {
formData.asyncTaskMapping.requestBodyMapping = value;
} else {
(formData as Record<string, unknown>)[key] = value;
}
}
const openMappingEditor = (key: string) => {
editingMappingKey.value = key;
jsonEditorData.value = { ...getMappingValue(key) };
jsonEditorVisible.value = true;
};
/** 递归将 schema 中所有标量字段的 value 重置为 null。
* 模型配置保存的是「结构模板」：保留 value 键与结构、defaultValue 等配置，但数据值不预设。
* defaultValue 已有专门字段承载默认值，value 不再携带任何值，统一置 null。
* 根节点经 nodeToValue 输出时不带 type/attrs 包装（普通对象），故需对无 type 节点也递归子键。
*/
function resetSchemaValues(schema: any): any {
if (schema === null || schema === undefined) return schema;
if (Array.isArray(schema)) {
schema.forEach((item, i) => {
schema[i] = resetSchemaValues(item);
});
return schema;
}
if (typeof schema !== 'object') return schema;
if (typeof schema.type === 'string') {
switch (schema.type) {
case 'object':
if (schema.attrs && typeof schema.attrs === 'object') {
Object.keys(schema.attrs).forEach((k) => {
schema.attrs[k] = resetSchemaValues(schema.attrs[k]);
});
}
break;
case 'array':
if (Array.isArray(schema.attrs)) {
schema.attrs = schema.attrs.map((item: any) => resetSchemaValues(item));
}
break;
case 'string':
case 'number':
case 'boolean':
case 'null':
schema.value = null;
break;
}
return schema;
}
// 普通对象（如根 object 或未包装节点）：递归子键
Object.keys(schema).forEach((k) => {
schema[k] = resetSchemaValues(schema[k]);
});
return schema;
}
const confirmJsonEditor = () => {
const cleaned = resetSchemaValues(JSON.parse(JSON.stringify(jsonEditorData.value)));
setMappingValue(editingMappingKey.value, cleaned);
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.error_message_mapping = {};
formData.responseMapping = {};
formData.responseBodyMapping = [];
formData.tokenMapping = { ...defaultTokenMapping };
formData.asyncTaskMapping = { ...defaultAsyncTaskMapping };
formData.lastFrame = '';
formData.maxDuration = 0;
formData.tokenPredictPriceUnit = '';
};
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 = findModelTypePath(row.modelType, props.modelTypes);
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 ?? 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.error_message_mapping = row.error_message_mapping || {};
formData.responseMapping = row.responseMapping || {};
formData.responseBodyMapping = row.responseBodyMapping
? (Array.isArray(row.responseBodyMapping) ? row.responseBodyMapping : Object.keys(row.responseBodyMapping))
: [];
formData.tokenMapping = row.tokenMapping ? { ...defaultTokenMapping, ...row.tokenMapping } : { ...defaultTokenMapping };
formData.asyncTaskMapping = row.asyncTaskMapping
? {
...defaultAsyncTaskMapping,
...row.asyncTaskMapping,
requestHeadMapping: row.asyncTaskMapping.requestHeadMapping || {},
requestBodyMapping: row.asyncTaskMapping.requestBodyMapping || {},
responseMapping: row.asyncTaskMapping.responseMapping || {},
}
: { ...defaultAsyncTaskMapping };
formData.lastFrame = row.lastFrame || '';
formData.maxDuration = row.maxDuration ?? 0;
formData.tokenPredictPriceUnit = row.tokenPredictPriceUnit || '';
} 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 {
// 响应主体映射的 value 直接填对应字段的中文 label（无 label 时兜底为路径本身），不再用空串占位
const responseBodyLabelMap = new Map<string, string>(
tokenMappingOptions.value.map((o) => [o.path, o.label || o.path])
);
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,
error_message_mapping: Object.keys(formData.error_message_mapping).length > 0 ? formData.error_message_mapping : undefined,
responseMapping: Object.keys(formData.responseMapping).length > 0 ? formData.responseMapping : undefined,
responseBodyMapping: formData.responseBodyMapping.length > 0
? Object.fromEntries(formData.responseBodyMapping.map((k) => [k, responseBodyLabelMap.get(k) || k]))
: 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 ||
Object.keys(atm.requestBodyMapping || {}).length > 0 ||
atm.taskId;
asyncTaskMapping = hasAsyncConfig ? ({ ...atm } as AsyncTaskMapping) : undefined;
}
if (isVideoModel.value && formData.lastFrame) {
lastFrame = formData.lastFrame;
}
let maxDuration: number | undefined;
let tokenPredictPriceUnit: string | undefined;
if (isVideoModel.value) {
maxDuration = formData.maxDuration || undefined;
}
if (formData.tokenPredictPriceUnit) {
tokenPredictPriceUnit = formData.tokenPredictPriceUnit;
}
const params: Record<string, unknown> = {
...baseParams,
...(tokenMapping ? { tokenMapping } : {}),
...(asyncTaskMapping ? { asyncTaskMapping } : {}),
...(lastFrame ? { lastFrame } : {}),
...(maxDuration ? { maxDuration } : {}),
...(tokenPredictPriceUnit ? { tokenPredictPriceUnit } : {}),
};
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>
Reference in New Issue View Git Blame Copy Permalink