更新模型配置字段结构

src/views/digitalHuman/modelConfig/modelModule/component/editModule.vue

@@ -2,6 +2,7 @@
 	<div class="system-edit-module-container">
 		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px">
 			<el-form ref="editModuleFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="140px">
+				<!-- 基础配置 -->
 				<el-row :gutter="20">
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="模型名称" prop="modelName">
@@ -39,7 +40,9 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="请求头绑定" prop="headMsg">
-							<el-input v-model="state.ruleForm.headMsg" placeholder="格式: key:value,key:value" clearable></el-input>
+							<el-button @click="showHeaderDialog = true" style="width: 100%">
+								配置请求头 ({{ state.headers.length }})
+							</el-button>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -50,6 +53,25 @@
 							</el-radio-group>
 						</el-form-item>
 					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="备注说明" prop="remark">
+							<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注说明" :rows="3" clearable></el-input>
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<!-- 高级配置折叠区域 -->
+				<el-divider content-position="left">
+					<el-button link type="primary" @click="state.showAdvanced = !state.showAdvanced">
+						{{ state.showAdvanced ? '收起高级配置' : '展开高级配置' }}
+						<el-icon class="ml5">
+							<component :is="state.showAdvanced ? 'ArrowUp' : 'ArrowDown'" />
+						</el-icon>
+					</el-button>
+				</el-divider>
+
+				<el-collapse-transition>
+					<el-row v-show="state.showAdvanced" :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="state.ruleForm.maxConcurrency" :min="1" :max="1000" style="width: 100%"></el-input-number>
@@ -85,12 +107,8 @@
 								<el-input-number v-model="state.ruleForm.autoCleanSeconds" :min="0" :max="86400" style="width: 100%"></el-input-number>
 							</el-form-item>
 						</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="备注说明" prop="remark">
-							<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注说明" :rows="3" clearable></el-input>
-						</el-form-item>
-					</el-col>
 					</el-row>
+				</el-collapse-transition>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
@@ -99,16 +117,37 @@
 				</span>
 			</template>
 		</el-dialog>
+
+		<!-- 请求头配置弹窗 -->
+		<el-dialog v-model="showHeaderDialog" title="配置请求头" width="600px" :close-on-click-modal="false">
+			<div class="header-config-container">
+				<div v-for="(header, index) in state.headers" :key="index" class="header-item">
+					<el-input v-model="header.key" placeholder="请输入 Key" style="width: 40%" clearable></el-input>
+					<span class="separator">:</span>
+					<el-input v-model="header.value" placeholder="请输入 Value" style="width: 40%" clearable></el-input>
+					<el-button type="danger" link @click="removeHeader(index)">删除</el-button>
+				</div>
+				<el-button type="primary" link @click="addHeader" style="margin-top: 10px">+ 添加请求头</el-button>
+			</div>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="showHeaderDialog = false" size="default">取 消</el-button>
+					<el-button type="primary" @click="confirmHeaders" size="default">确 定</el-button>
+				</span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts" name="systemEditModule">
 import { reactive, ref } from 'vue';
 import { ElMessage } from 'element-plus';
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
 import { addModelModule, updateModelModule } from '/@/api/digitalHuman/modelConfig/modelModule/index';
 
 const editModuleFormRef = ref();
 const emit = defineEmits(['refresh']);
+const showHeaderDialog = ref(false);
 
 const state = reactive({
 	ruleForm: {
@@ -147,8 +186,48 @@ const state = reactive({
 		submitTxt: '',
 		loading: false,
 	},
+	showAdvanced: false, // 是否展开高级配置
+	headers: [] as Array<{ key: string; value: string }>, // 请求头列表
 });
 
+// 解析 headMsg 字符串为数组
+const parseHeaders = (headMsg: string) => {
+	if (!headMsg) return [];
+	const headers: Array<{ key: string; value: string }> = [];
+	const pairs = headMsg.split(',');
+	pairs.forEach((pair) => {
+		const [key, value] = pair.split(':');
+		if (key && value) {
+			headers.push({ key: key.trim(), value: value.trim() });
+		}
+	});
+	return headers;
+};
+
+// 将数组转换为 headMsg 字符串
+const stringifyHeaders = () => {
+	return state.headers
+		.filter((h) => h.key && h.value)
+		.map((h) => `${h.key}:${h.value}`)
+		.join(',');
+};
+
+// 添加请求头
+const addHeader = () => {
+	state.headers.push({ key: '', value: '' });
+};
+
+// 删除请求头
+const removeHeader = (index: number) => {
+	state.headers.splice(index, 1);
+};
+
+// 确认请求头配置
+const confirmHeaders = () => {
+	state.ruleForm.headMsg = stringifyHeaders();
+	showHeaderDialog.value = false;
+};
+
 // 打开弹窗
 const openDialog = (type: string, row?: any) => {
 	if (type === 'edit') {
@@ -171,6 +250,8 @@ const openDialog = (type: string, row?: any) => {
 			autoCleanSeconds: row.autoCleanSeconds,
 			remark: row.remark || '',
 		};
+		// 解析请求头
+		state.headers = parseHeaders(row.headMsg || '');
 		state.dialog.title = '修改模型配置';
 		state.dialog.submitTxt = '修 改';
 	} else {
@@ -192,11 +273,14 @@ const openDialog = (type: string, row?: any) => {
 			autoCleanSeconds: 300,
 			remark: '',
 		};
+		// 初始化一个空的请求头
+		state.headers = [{ key: '', value: '' }];
 		state.dialog.title = '新增模型配置';
 		state.dialog.submitTxt = '新 增';
 	}
 	state.dialog.type = type;
 	state.dialog.isShowDialog = true;
+	state.showAdvanced = false; // 每次打开弹窗时重置为收起状态
 };
 
 // 关闭弹窗
@@ -217,11 +301,30 @@ const onSubmit = () => {
 		
 		state.dialog.loading = true;
 		try {
+			// 将 headMsg 转换为 form 的 JSON 格式
+			// headMsg: "X-API-Key:xxx,operation:true"
+			// 转换为 form: { "X-API-Key": { "value": "xxx" }, "operation": { "value": "true" } }
+			const formObj: Record<string, { value: string }> = {};
+			state.headers.forEach((header) => {
+				// 去除 key 和 value 的首尾空格
+				const key = header.key?.trim();
+				const value = header.value?.trim();
+				if (key && value) {
+					formObj[key] = { value: value };
+				}
+			});
+			
+			// 提交数据
+			const submitData = {
+				...state.ruleForm,
+				form: formObj,
+			};
+			
 			if (state.dialog.type === 'edit') {
-				await updateModelModule(state.ruleForm);
+				await updateModelModule(submitData);
 				ElMessage.success('修改成功');
 			} else {
-				await addModelModule(state.ruleForm);
+				await addModelModule(submitData);
 				ElMessage.success('新增成功');
 			}
 			closeDialog();
@@ -239,3 +342,26 @@ defineExpose({
 	openDialog,
 });
 </script>
+
+<style scoped lang="scss">
+.ml5 {
+	margin-left: 5px;
+}
+
+.header-config-container {
+	max-height: 400px;
+	overflow-y: auto;
+}
+
+.header-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: 12px;
+}
+
+.separator {
+	font-weight: bold;
+	color: #606266;
+}
+</style>