处理模型回显

2026-05-09 22:01:28 +08:00
parent cae76234b7
commit 76420713fa
3 changed files with 546 additions and 130 deletions
--- a/src/views/digitalHuman/creation/index.vue
+++ b/src/views/digitalHuman/creation/index.vue
@@ -20,22 +20,8 @@
 								<div class="tree-node">
 									<span class="ellipsis">{{ data.label }}</span>
 									<div v-if="data.nodeType === 'html' || data.nodeType === 'image'" class="tree-node-actions">
-										<el-button
-											type="primary"
-											link
-											size="small"
-											@click.stop="previewNode(data)"
-										>
-											预览
-										</el-button>
-										<el-button
-											type="primary"
-											link
-											size="small"
-											@click.stop="downloadNode(data)"
-										>
-											下载
-										</el-button>
+										<el-button type="primary" link size="small" @click.stop="previewNode(data)"> 预览 </el-button>
+										<el-button type="primary" link size="small" @click.stop="downloadNode(data)"> 下载 </el-button>
 									</div>
 								</div>
 							</template>
@@ -54,18 +40,17 @@
 									<template v-if="selectedElement.kind === 'node'">
 										<!-- 模型选择（如果有模型配置） -->
 										<el-form-item v-if="currentNodeModelConfig.length > 0" label="选择模型">
-											<el-select v-model="selectedModel" placeholder="请选择模型" class="w100">
-												<el-option
-													v-for="modelConfig in currentNodeModelConfig"
-													:key="modelConfig.modelName"
-													:label="modelConfig.modelName"
-													:value="modelConfig.modelName"
-												/>
-											</el-select>
-										</el-form-item>
-										<!-- 模型 API Key -->
-										<el-form-item v-if="selectedModel" label="模型 API Key">
-											<el-input v-model="dynamicFormValues.modelApiKey" placeholder="请输入模型 API Key" type="password" show-password />
+											<div class="model-selector-wrapper">
+												<el-button type="primary" @click="showModelSelector = true" style="width: 100%">
+													<el-icon><Plus /></el-icon>
+													选择模型
+												</el-button>
+												<div v-if="selectedModel" class="selected-model-tag">
+													<el-tag type="success" size="large" closable @close="handleRemoveModel">
+														{{ selectedModel }}
+													</el-tag>
+												</div>
+											</div>
 										</el-form-item>
 										<!-- 技能选择（如果节点支持） -->
 										<el-form-item v-if="currentNodeSkillOption" label="选择技能">
@@ -329,14 +314,7 @@
 								<el-input v-model="userInput" placeholder="说点什么..." class="chat-input" @keydown.enter="sendMessage" />

 								<!-- 右侧发送按钮 -->
-								<el-button
-									type="primary"
-									:icon="Promotion"
-									:loading="isCreating"
-									@click="sendMessage"
-									class="send-btn"
-									circle
-								/>
+								<el-button type="primary" :icon="Promotion" :loading="isCreating" @click="sendMessage" class="send-btn" circle />
 							</div>

 							<!-- 已选技能标签 -->
@@ -491,6 +469,9 @@
 		<!-- 创作技能选择器 -->
 		<SkillSelector v-model="showCreationSkillSelector" :default-skill="selectedCreationSkill" @confirm="handleCreationSkillConfirm" />

+		<!-- 模型选择器 -->
+		<ModelSelector v-model="showModelSelector" :default-model="selectedModelData" @confirm="handleModelConfirm" />
+
 		<!-- 预览弹窗 -->
 		<el-dialog v-model="previewDialogVisible" title="预览" width="90%" :close-on-click-modal="false" destroy-on-close>
 			<div class="preview-container">
@@ -510,6 +491,7 @@ import { Control, SelectionSelect } from '@logicflow/extension';
 import '@logicflow/core/dist/index.css';
 import '@logicflow/extension/lib/style/index.css';
 import SkillSelector from '/@/components/skill/NodeSkillSelector.vue';
+import ModelSelector from '/@/components/model/ModelSelector.vue';
 import type { SkillItem } from '/@/api/digitalHuman/skill';
 import {
 	downloadToFile,
@@ -592,6 +574,9 @@ const isCreating = ref(false);
 // 预览相关状态
 const previewDialogVisible = ref(false);
 const previewUrl = ref('');
+// 模型选择器相关状态
+const showModelSelector = ref(false);
+const selectedModelData = ref<any>(null);
 // 会话ID管理（存储在 sessionStorage 中）
 const getSessionId = () => {
 	let sessionId = sessionStorage.getItem('ai_creation_session_id');
@@ -667,9 +652,8 @@ const currentNodeSkillOption = computed(() => {
 });
 // 获取当前选中模型的表单字段
 const currentModelForm = computed<NodeLibraryFormItem[]>(() => {
-	if (!selectedModel.value) return [];
-	const modelConfig = currentNodeModelConfig.value.find((m: any) => m.modelName === selectedModel.value);
-	return modelConfig?.modelForm || [];
+	// 不显示模型的表单字段，返回空数组
+	return [];
 });
 // 合并基础表单和模型表单
 const allFormFields = computed<NodeLibraryFormItem[]>(() => {
@@ -886,36 +870,23 @@ const handleTemplatePageChange = (page: number) => {
 	templateWorkflowPagination.pageNum = page;
 	fetchWorkflowList();
 };
-// 处理技能选择确认
+// 处理技能选择确认（只更新临时状态，不保存到节点）
 const handleSkillConfirm = (skill: SkillItem) => {
 	selectedSkill.value = skill;
-	// 将技能名称保存到节点属性中（只保存 skillName）
-	if (selectedElement.value && logicFlowInstance.value) {
-		const nodeData = logicFlowInstance.value.getNodeModelById(selectedElement.value.id);
-		if (nodeData) {
-			logicFlowInstance.value.setProperties(selectedElement.value.id, {
-				...nodeData.properties,
-				skillName: skill.name,
-			});
-			// 同步更新 selectedElement
-			selectedElement.value.properties.skillName = skill.name;
-		}
-	}
 };
-// 移除已选择的技能
+// 移除已选择的技能（只更新临时状态）
 const handleRemoveSkill = () => {
 	selectedSkill.value = null;
-	// 从节点属性中移除技能信息
-	if (selectedElement.value && logicFlowInstance.value) {
-		const nodeData = logicFlowInstance.value.getNodeModelById(selectedElement.value.id);
-		if (nodeData) {
-			const props = { ...nodeData.properties };
-			delete props.skillName;
-			logicFlowInstance.value.setProperties(selectedElement.value.id, props);
-			// 同步更新 selectedElement
-			delete selectedElement.value.properties.skillName;
-		}
-	}
+};
+// 处理模型选择确认（只更新临时状态，不保存到节点）
+const handleModelConfirm = (model: any) => {
+	selectedModel.value = model.modelName;
+	selectedModelData.value = model;
+};
+// 移除已选择的模型（只更新临时状态）
+const handleRemoveModel = () => {
+	selectedModel.value = '';
+	selectedModelData.value = null;
 };
 // 使用工作流
 const useWorkflow = async (workflow: WorkflowItem) => {
@@ -937,7 +908,17 @@ const useWorkflow = async (workflow: WorkflowItem) => {
 					if (node.formConfig && Array.isArray(node.formConfig)) {
 						node.formConfig.forEach((field: any) => {
 							const fieldKey = `${node.id}_${field.label}`;
-							creationFormValues[fieldKey] = field.value || '';
+							// 根据字段类型转换值
+							if (field.type === 'number') {
+								// 数字类型：转换为数字或 null
+								creationFormValues[fieldKey] = field.value ? Number(field.value) : null;
+							} else if (field.type === 'switch') {
+								// 开关类型：转换为布尔值
+								creationFormValues[fieldKey] = Boolean(field.value);
+							} else {
+								// 其他类型：保持原值或空字符串
+								creationFormValues[fieldKey] = field.value || '';
+							}
 						});
 					}

@@ -1060,9 +1041,7 @@ const sendMessage = async () => {
 				try {
 					const uploadRes = await uploadFile(file, { errorMode: 'page' });
 					// 拼接完整的文件地址
-					const fullUrl = uploadRes.data.fileAddressPrefix 
-						? `${uploadRes.data.fileAddressPrefix}${uploadRes.data.fileURL}`
-						: uploadRes.data.fileURL;
+					const fullUrl = uploadRes.data.fileAddressPrefix ? `${uploadRes.data.fileAddressPrefix}${uploadRes.data.fileURL}` : uploadRes.data.fileURL;
 					fileUrls.push(fullUrl);
 				} catch (error) {
 					ElMessage.error(`文件 ${file.name} 上传失败`);
@@ -1072,43 +1051,44 @@ const sendMessage = async () => {
 		}

 		// 2. 构建节点输入参数
-		const nodeInputParams = currentWorkflowForCreation.value.nodeInputParams?.map((node: any) => {
-			const nodeParam: any = {
-				id: node.id,
-				nodeCode: node.nodeCode,
-				name: node.name,
-			};
+		const nodeInputParams =
+			currentWorkflowForCreation.value.nodeInputParams?.map((node: any) => {
+				const nodeParam: any = {
+					id: node.id,
+					nodeCode: node.nodeCode,
+					name: node.name,
+				};

-			// 添加表单配置和值
-			if (node.formConfig && Array.isArray(node.formConfig)) {
-				nodeParam.formConfig = node.formConfig.map((field: any) => {
-					const fieldKey = `${node.id}_${field.label}`;
-					return {
-						...field,
-						value: creationFormValues[fieldKey] || field.value || '',
-					};
-				});
-			}
+				// 添加表单配置和值
+				if (node.formConfig && Array.isArray(node.formConfig)) {
+					nodeParam.formConfig = node.formConfig.map((field: any) => {
+						const fieldKey = `${node.id}_${field.label}`;
+						return {
+							...field,
+							value: creationFormValues[fieldKey] || field.value || '',
+						};
+					});
+				}

-			// 添加其他配置
-			if (node.config) {
-				nodeParam.config = { ...node.config };
-				// 更新 config 中的值
-				Object.keys(node.config).forEach((key) => {
-					const fieldKey = `${node.id}_${key}`;
-					if (creationFormValues[fieldKey] !== undefined) {
-						nodeParam.config[key] = creationFormValues[fieldKey];
-					}
-				});
-			}
+				// 添加其他配置
+				if (node.config) {
+					nodeParam.config = { ...node.config };
+					// 更新 config 中的值
+					Object.keys(node.config).forEach((key) => {
+						const fieldKey = `${node.id}_${key}`;
+						if (creationFormValues[fieldKey] !== undefined) {
+							nodeParam.config[key] = creationFormValues[fieldKey];
+						}
+					});
+				}

-			// 添加其他字段
-			if (node.inputSource) nodeParam.inputSource = node.inputSource;
-			if (node.modelConfig) nodeParam.modelConfig = node.modelConfig;
-			if (node.skillName) nodeParam.skillName = node.skillName;
+				// 添加其他字段
+				if (node.inputSource) nodeParam.inputSource = node.inputSource;
+				if (node.modelConfig) nodeParam.modelConfig = node.modelConfig;
+				if (node.skillName) nodeParam.skillName = node.skillName;

-			return nodeParam;
-		}) || [];
+				return nodeParam;
+			}) || [];

 		// 3. 同步更新 flowContent.nodes，使其与 nodeInputParams 一致
 		const updatedFlowContent = {
@@ -1130,14 +1110,13 @@ const sendMessage = async () => {

 		// 5. 调用执行接口（不再使用 FormData，直接传 JSON）
 		await executeFlow(params, { errorMode: 'page' });
-		
+
 		ElMessage.success('创作完成！');
-		
+
 		// 6. 清空输入
 		userInput.value = '';
 		selectedFiles.value = [];
 		selectedCreationSkill.value = null;
-		
 	} catch (error) {
 		ElMessage.error('创作失败，请重试');
 	} finally {
@@ -1573,8 +1552,17 @@ watch(
 		if (e?.properties?.formConfig && Array.isArray(e.properties.formConfig)) {
 			e.properties.formConfig.forEach((fieldConfig: any) => {
 				if (baseFieldNames.has(fieldConfig.field)) {
-					// 基础字段：加载到 dynamicFormValues
-					dynamicFormValues[fieldConfig.field] = fieldConfig.value;
+					// 基础字段：加载到 dynamicFormValues，根据类型转换值
+					if (fieldConfig.type === 'number') {
+						// 数字类型：转换为数字或 null
+						dynamicFormValues[fieldConfig.field] = fieldConfig.value ? Number(fieldConfig.value) : null;
+					} else if (fieldConfig.type === 'switch') {
+						// 开关类型：转换为布尔值
+						dynamicFormValues[fieldConfig.field] = Boolean(fieldConfig.value);
+					} else {
+						// 其他类型：保持原值
+						dynamicFormValues[fieldConfig.field] = fieldConfig.value;
+					}
 				} else {
 					// 自定义字段：加载到 customFields
 					customFields.value.push({
@@ -1592,19 +1580,31 @@ watch(
 		if (modelConfig && typeof modelConfig === 'object') {
 			// 从 modelConfig 加载
 			selectedModel.value = modelConfig.modelName || '';
+			selectedModelData.value = modelConfig.modelName ? { modelName: modelConfig.modelName } : null;
 			dynamicFormValues.modelApiKey = modelConfig.modelApiKey || '';

 			// 加载模型表单数据（数组格式）
 			if (modelConfig.modelForm && Array.isArray(modelConfig.modelForm)) {
 				modelConfig.modelForm.forEach((fieldConfig: any) => {
 					if (fieldConfig.field) {
-						dynamicFormValues[fieldConfig.field] = fieldConfig.value;
+						// 根据字段类型转换值
+						if (fieldConfig.type === 'number') {
+							// 数字类型：转换为数字或 null
+							dynamicFormValues[fieldConfig.field] = fieldConfig.value ? Number(fieldConfig.value) : null;
+						} else if (fieldConfig.type === 'switch') {
+							// 开关类型：转换为布尔值
+							dynamicFormValues[fieldConfig.field] = Boolean(fieldConfig.value);
+						} else {
+							// 其他类型：保持原值
+							dynamicFormValues[fieldConfig.field] = fieldConfig.value;
+						}
 					}
 				});
 			}
 		} else {
 			// 兼容旧数据格式
 			selectedModel.value = String(e?.properties?.selectedModel || '');
+			selectedModelData.value = e?.properties?.modelData || null;
 			dynamicFormValues.modelApiKey = e?.properties?.modelApiKey || '';
 		}

@@ -1642,9 +1642,18 @@ watch(

 		// 初始化所有表单字段（基础 + 模型）- 只设置还没有值的字段
 		allFormFields.value.forEach((fieldItem) => {
-			// 如果已经从 formConfig 或 modelConfig 加载过，跳过
-			if (dynamicFormValues[fieldItem.field] !== undefined && dynamicFormValues[fieldItem.field] !== '') {
-				return;
+			const currentValue = dynamicFormValues[fieldItem.field];
+			
+			// 如果已经从 formConfig 或 modelConfig 加载过有效值，跳过
+			// 对于数字类型，空字符串不是有效值
+			if (fieldItem.type === 'number') {
+				if (currentValue !== undefined && currentValue !== '' && currentValue !== null) {
+					return;
+				}
+			} else {
+				if (currentValue !== undefined && currentValue !== '') {
+					return;
+				}
 			}

 			// 使用默认值
@@ -1657,8 +1666,8 @@ watch(
 			if (fieldItem.type === 'switch') {
 				dynamicFormValues[fieldItem.field] = false;
 			} else if (fieldItem.type === 'number') {
-				// 所有数字字段默认为 1
-				dynamicFormValues[fieldItem.field] = 1;
+				// 数字字段默认为 null（而不是空字符串）
+				dynamicFormValues[fieldItem.field] = null;
 			} else {
 				dynamicFormValues[fieldItem.field] = '';
 			}
@@ -1722,9 +1731,22 @@ const applySelected = () => {
 				modelApiKey: dynamicFormValues.modelApiKey || '',
 				modelForm: modelForm,
 			};
+
+			// 保存模型选择状态
+			p.selectedModel = selectedModel.value;
+			p.modelData = selectedModelData.value;
 		} else {
-			// 如果没有选择模型，删除 modelConfig
+			// 如果没有选择模型，删除 modelConfig 和模型状态
 			delete p.modelConfig;
+			delete p.selectedModel;
+			delete p.modelData;
+		}
+
+		// 保存技能选择状态
+		if (selectedSkill.value) {
+			p.skillName = selectedSkill.value.name;
+		} else {
+			delete p.skillName;
 		}

 		// 不再保存基础字段到根级别，所有字段都通过 formConfig 保存
@@ -2054,6 +2076,34 @@ watch(isCreationMode, (newValue) => {
 		leftPanelTab.value = 'selected';
 	}
 });
+
+// 监听选中元素变化，恢复模型和技能状态
+watch(selectedElement, (newElement) => {
+	if (newElement && newElement.kind === 'node') {
+		// 从节点属性的 modelConfig 中恢复模型选择状态
+		const modelName = newElement.properties.modelConfig?.modelName || '';
+		if (modelName) {
+			selectedModel.value = modelName;
+			selectedModelData.value = { modelName };
+		} else {
+			selectedModel.value = '';
+			selectedModelData.value = null;
+		}
+
+		// 从节点属性中恢复技能选择状态
+		if (newElement.properties.skillName) {
+			selectedSkill.value = { name: newElement.properties.skillName } as SkillItem;
+		} else {
+			selectedSkill.value = null;
+		}
+	} else {
+		// 如果不是节点或没有选中元素，清空状态
+		selectedModel.value = '';
+		selectedModelData.value = null;
+		selectedSkill.value = null;
+	}
+});
+
 onMounted(async () => {
 	await getList();
 	await nextTick();
@@ -3049,6 +3099,21 @@ onBeforeUnmount(() => {
 	padding: 8px 16px;
 }

+.model-selector-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.selected-model-tag {
+	margin-top: 12px;
+}
+
+.selected-model-tag .el-tag {
+	font-size: 14px;
+	padding: 8px 16px;
+}
+
 /* AI 创作输入区域样式 */
 .creation-input-area {
 	padding: 20px;