From f64d6334e2959f36ab0fd9e8d0facf08da93bf1c Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Tue, 19 May 2026 13:55:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=92=88=E5=AF=B9https=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/settings/creation/index.vue | 177 +++++++++++++++++++++++---
 1 file changed, 162 insertions(+), 15 deletions(-)

diff --git a/src/views/settings/creation/index.vue b/src/views/settings/creation/index.vue
index dc813db..09dd3ce 100644
--- a/src/views/settings/creation/index.vue
+++ b/src/views/settings/creation/index.vue
@@ -69,25 +69,23 @@
 										</el-form-item>
 										<!-- 基础表单 + 模型表单 -->
 										<el-form-item v-for="fieldItem in allFormFields" :key="fieldItem.field" :label="fieldItem.label">
-											<el-input
-												v-if="fieldItem.type === 'input' && !isSelectField(fieldItem.field)"
-												v-model="dynamicFormValues[fieldItem.field]"
-												:placeholder="fieldItem.required ? '必填' : '选填'"
-											/>
+											<!-- 下拉选择框 -->
 											<el-select
-												v-else-if="fieldItem.type === 'input' && isSelectField(fieldItem.field)"
+												v-if="fieldItem.type === 'select' || isSelectField(fieldItem)"
 												v-model="dynamicFormValues[fieldItem.field]"
 												:placeholder="fieldItem.required ? '必填' : '选填'"
 												class="w100"
 											>
-												<el-option v-for="opt in getSelectOptions(fieldItem.field)" :key="opt.value" :label="opt.label" :value="opt.value" />
+												<el-option v-for="opt in getSelectOptions(fieldItem)" :key="opt.value" :label="opt.label" :value="opt.value" />
 											</el-select>
+											<!-- 数字输入框 -->
 											<el-input-number
-												v-else-if="fieldItem.type === 'number'"
+												v-else-if="fieldItem.type === 'number' || fieldItem.type === 'inputNumber'"
 												v-model="dynamicFormValues[fieldItem.field]"
 												:min="fieldItem.field === 'count' ? 1 : undefined"
 												class="w100"
 											/>
+											<!-- 多行文本框 -->
 											<el-input
 												v-else-if="fieldItem.type === 'textarea'"
 												v-model="dynamicFormValues[fieldItem.field]"
@@ -95,7 +93,46 @@
 												:rows="3"
 												:placeholder="fieldItem.required ? '必填' : '选填'"
 											/>
+											<!-- 开关 -->
 											<el-switch v-else-if="fieldItem.type === 'switch'" v-model="dynamicFormValues[fieldItem.field]" />
+											<!-- 键值对输入（HTTP节点的headers和body） -->
+											<div v-else-if="fieldItem.type === 'keyValue'" class="key-value-input-wrapper">
+												<div
+													v-for="(pair, pairIndex) in getKeyValuePairs(fieldItem.field)"
+													:key="pairIndex"
+													class="key-value-pair"
+												>
+													<el-input
+														v-model="pair.key"
+														placeholder="键"
+														class="key-input"
+														@input="updateKeyValueField(fieldItem.field)"
+													/>
+													<el-input
+														v-model="pair.value"
+														placeholder="值"
+														class="value-input"
+														@input="updateKeyValueField(fieldItem.field)"
+													/>
+													<el-button
+														type="danger"
+														:icon="Delete"
+														circle
+														size="small"
+														@click="removeKeyValuePair(fieldItem.field, pairIndex)"
+													/>
+												</div>
+												<el-button
+													type="primary"
+													link
+													:icon="Plus"
+													@click="addKeyValuePair(fieldItem.field)"
+													class="add-pair-btn"
+												>
+													添加键值对
+												</el-button>
+											</div>
+											<!-- 默认文本输入框 -->
 											<el-input v-else v-model="dynamicFormValues[fieldItem.field]" :placeholder="fieldItem.required ? '必填' : '选填'" />
 										</el-form-item>
 										<!-- 上级节点参数选择（表单参数节点和开始节点除外） -->
@@ -545,7 +582,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { Document, Plus, Paperclip, MagicStick, Promotion, Check, Setting, Search, CircleCheck, VideoPause } from '@element-plus/icons-vue';
+import { Document, Plus, Paperclip, MagicStick, Promotion, Check, Setting, Search, CircleCheck, VideoPause, Delete } from '@element-plus/icons-vue';
 import LogicFlow from '@logicflow/core';
 import { Control, SelectionSelect } from '@logicflow/extension';
 import '@logicflow/core/dist/index.css';
@@ -1648,19 +1685,29 @@ const isJudgeNode = (node: Item) => {
 	return JUDGE_KEYWORDS.some((k) => code.includes(k) || text.includes(k));
 };
 // 判断字段是否应该显示为下拉选择
-const isSelectField = (field: string) => {
-	return field === 'size' || field === 'resolution';
+const isSelectField = (fieldItem: NodeLibraryFormItem) => {
+	// 如果字段类型是 select，直接返回 true
+	if (fieldItem.type === 'select') return true;
+	
+	// 兼容旧的硬编码字段
+	return fieldItem.field === 'size' || fieldItem.field === 'resolution';
 };
 // 获取下拉选项
-const getSelectOptions = (field: string) => {
-	if (field === 'size') {
+const getSelectOptions = (fieldItem: NodeLibraryFormItem) => {
+	// 优先使用字段配置中的 options
+	if (fieldItem.options && Array.isArray(fieldItem.options)) {
+		return fieldItem.options;
+	}
+	
+	// 兼容旧的硬编码选项
+	if (fieldItem.field === 'size') {
 		return [
 			{ label: '1024x1024', value: '1024x1024' },
 			{ label: '512x512', value: '512x512' },
 			{ label: '256x256', value: '256x256' },
 		];
 	}
-	if (field === 'resolution') {
+	if (fieldItem.field === 'resolution') {
 		return [
 			{ label: '1920x1080', value: '1920x1080' },
 			{ label: '1280x720', value: '1280x720' },
@@ -1677,7 +1724,72 @@ const addCustomField = () => {
 const removeCustomField = (index: number) => {
 	customFields.value.splice(index, 1);
 };
-// 判断是否可以添加自定义字段（排除判断节点、开始节点）
+// 获取键值对数组
+const getKeyValuePairs = (field: string) => {
+	const value = dynamicFormValues[field];
+	if (!value) {
+		return [{ key: '', value: '' }];
+	}
+	
+	// 如果是字符串，尝试解析为JSON对象
+	if (typeof value === 'string') {
+		try {
+			const parsed = JSON.parse(value);
+			if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
+				return Object.entries(parsed).map(([k, v]) => ({ key: k, value: String(v) }));
+			}
+		} catch (e) {
+			// 解析失败，返回空数组
+		}
+		return [{ key: '', value: '' }];
+	}
+	
+	// 如果是对象，转换为键值对数组
+	if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+		const pairs = Object.entries(value).map(([k, v]) => ({ key: k, value: String(v) }));
+		return pairs.length > 0 ? pairs : [{ key: '', value: '' }];
+	}
+	
+	return [{ key: '', value: '' }];
+};
+// 添加键值对
+const addKeyValuePair = (field: string) => {
+	const pairs = getKeyValuePairs(field);
+	pairs.push({ key: '', value: '' });
+	updateKeyValueFieldFromPairs(field, pairs);
+};
+// 删除键值对
+const removeKeyValuePair = (field: string, index: number) => {
+	const pairs = getKeyValuePairs(field);
+	pairs.splice(index, 1);
+	// 如果删除后为空，保留一个空的键值对
+	if (pairs.length === 0) {
+		pairs.push({ key: '', value: '' });
+	}
+	updateKeyValueFieldFromPairs(field, pairs);
+};
+// 更新键值对字段
+const updateKeyValueField = (field: string) => {
+	const pairs = getKeyValuePairs(field);
+	updateKeyValueFieldFromPairs(field, pairs);
+};
+// 从键值对数组更新字段值
+const updateKeyValueFieldFromPairs = (field: string, pairs: Array<{ key: string; value: string }>) => {
+	// 过滤掉空的键值对
+	const validPairs = pairs.filter(p => p.key.trim() !== '');
+	
+	// 转换为对象
+	const obj: Record<string, string> = {};
+	validPairs.forEach(p => {
+		if (p.key.trim()) {
+			obj[p.key.trim()] = p.value;
+		}
+	});
+	
+	// 保存为JSON字符串
+	dynamicFormValues[field] = Object.keys(obj).length > 0 ? JSON.stringify(obj) : '';
+};
+// 判断是否可以添加自定义字段（排除判断节点、开始节点、HTTP节点等）
 const canAddCustomFields = (element: SelectedState | null) => {
 	if (!element || element.kind !== 'node') return false;
 	const nodeCode = String(element.properties?.nodeCode || '').toLowerCase();
@@ -1689,6 +1801,12 @@ const canAddCustomFields = (element: SelectedState | null) => {
 	// 排除开始节点
 	if (nodeCode === START_NODE_CODE || text === START_NODE_TEXT.toLowerCase()) return false;
 
+	// 排除HTTP节点（已有完整的表单配置，不需要自定义字段）
+	if (nodeCode === 'http') return false;
+
+	// 排除表单节点
+	if (nodeCode === 'form') return false;
+
 	return true;
 };
 // 判断是否可以选择上级参数（排除表单参数节点和开始节点）
@@ -3002,6 +3120,35 @@ onBeforeUnmount(() => {
 .custom-field-value-full {
 	width: 100%;
 }
+.key-value-input-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px;
+	background: #f9fafb;
+	border: 1px solid #e5e7eb;
+	border-radius: 8px;
+}
+.key-value-pair {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+.key-value-pair .key-input {
+	flex: 0 0 35%;
+	min-width: 0;
+}
+.key-value-pair .value-input {
+	flex: 1;
+	min-width: 0;
+}
+.key-value-pair .el-button {
+	flex-shrink: 0;
+}
+.add-pair-btn {
+	align-self: flex-start;
+	margin-top: 4px;
+}
 .input-source-list {
 	display: flex;
 	flex-direction: column;