red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

处理模型回显

Browse Source
This commit is contained in:
吴思建
2026-05-09 22:01:28 +08:00
parent cae76234b7
commit 76420713fa
3 changed files with 546 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
src/views/digitalHuman/creation/index.vue
View File

@@ -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;

100
src/views/digitalHuman/modelConfig/modelModule/component/editModule.vue
View File

@@ -40,9 +40,12 @@
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="请求头绑定" prop="headMsg">
<el-button @click="showHeaderDialog = true" style="width: 100%">
配置请求头 ({{ state.headers.length }})
</el-button>
<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">
<el-form-item label="自定义字段" prop="form">
<el-button @click="showFormDialog = true" style="width: 100%"> 配置表单字段 ({{ state.formFields.length }}) </el-button>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -136,19 +139,38 @@
</span>
</template>
</el-dialog>
<!-- 自定义字段配置弹窗 -->
<el-dialog v-model="showFormDialog" title="配置表单字段" width="600px" :close-on-click-modal="false">
<div class="form-config-container">
<div v-for="(field, index) in state.formFields" :key="index" class="form-field-item">
<el-input v-model="field.key" placeholder="请输入字段名 (Key)" style="width: 40%" clearable></el-input>
<span class="separator">=</span>
<el-input v-model="field.value" placeholder="请输入字段值 (Value)" style="width: 40%" clearable></el-input>
<el-button type="danger" link @click="removeFormField(index)">删除</el-button>
</div>
<el-button type="primary" link @click="addFormField" style="margin-top: 10px">+ 添加字段</el-button>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showFormDialog = false" size="default">取 消</el-button>
<el-button type="primary" @click="confirmFormFields" 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';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
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 showFormDialog = ref(false);
const state = reactive({
ruleForm: {
id: '',
@@ -188,6 +210,7 @@ const state = reactive({
},
showAdvanced: false, // 是否展开高级配置
headers: [] as Array<{ key: string; value: string }>, // 请求头列表
formFields: [] as Array<{ key: string; value: string }>,
});
// 解析 headMsg 字符串为数组
@@ -203,6 +226,30 @@ const parseHeaders = (headMsg: string) => {
});
return headers;
};
// 解析 form 对象为数组
const parseFormFields = (form: any) => {
if (!form || typeof form !== 'object') return [];
const fields: Array<{ key: string; value: string }> = [];
Object.keys(form).forEach((key) => {
if (form[key] && typeof form[key] === 'object' && form[key].value !== undefined) {
fields.push({ key, value: form[key].value });
}
});
return fields;
};
// 将数组转换为 form 对象
const stringifyFormFields = () => {
const formObj: Record<string, { value: string }> = {};
state.formFields.forEach((field) => {
const key = field.key?.trim();
const value = field.value?.trim();
if (key && value) {
formObj[key] = { value: value };
}
});
return formObj;
};
// 将数组转换为 headMsg 字符串
const stringifyHeaders = () => {
@@ -227,6 +274,20 @@ const confirmHeaders = () => {
state.ruleForm.headMsg = stringifyHeaders();
showHeaderDialog.value = false;
};
// 添加表单字段
const addFormField = () => {
state.formFields.push({ key: '', value: '' });
};
// 删除表单字段
const removeFormField = (index: number) => {
state.formFields.splice(index, 1);
};
// 确认表单字段配置
const confirmFormFields = () => {
showFormDialog.value = false;
};
// 打开弹窗
const openDialog = (type: string, row?: any) => {
@@ -252,6 +313,7 @@ const openDialog = (type: string, row?: any) => {
};
// 解析请求头
state.headers = parseHeaders(row.headMsg || '');
state.formFields = parseFormFields(row.form);
state.dialog.title = '修改模型配置';
state.dialog.submitTxt = '修 改';
} else {
@@ -275,6 +337,7 @@ const openDialog = (type: string, row?: any) => {
};
// 初始化一个空的请求头
state.headers = [{ key: '', value: '' }];
state.formFields = [{ key: '', value: '' }];
state.dialog.title = '新增模型配置';
state.dialog.submitTxt = '新 增';
}
@@ -298,28 +361,20 @@ const onCancel = () => {
const onSubmit = () => {
editModuleFormRef.value.validate(async (valid: boolean) => {
if (!valid) return;
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 formObj = stringifyFormFields();
// 提交数据
const submitData = {
...state.ruleForm,
form: formObj,
};
if (state.dialog.type === 'edit') {
await updateModelModule(submitData);
ElMessage.success('修改成功');
@@ -330,7 +385,7 @@ const onSubmit = () => {
closeDialog();
emit('refresh');
} catch (error) {
console.error('保存失败:', error);
ElMessage.error('保存失败');
} finally {
state.dialog.loading = false;
}
@@ -344,6 +399,17 @@ defineExpose({
</script>
<style scoped lang="scss">
.form-config-container {
max-height: 400px;
overflow-y: auto;
}
.form-field-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.ml5 {
margin-left: 5px;
}