From b36c2e95111bf8b44992dbbace1cc178c463aeba Mon Sep 17 00:00:00 2001
From: Ethan-Zhang <ethanzhang55@outlook.com>
Date: Sun, 27 Jul 2025 23:30:16 +0800
Subject: [PATCH] =?UTF-8?q?Fix:=20=E6=9D=A1=E4=BB=B6=E5=88=86=E6=94=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VariableChooser.vue            | 136 ++++++++++--------
 src/views/createapp/components/workFlow.vue   |  50 ++++++-
 .../workFlowConfig/ChoiceBranchCard.vue       |  32 ++---
 .../workFlowConfig/ChoiceBranchDrawer.vue     |  11 +-
 .../workFlowConfig/ChoiceBranchNode.vue       |  13 +-
 .../workFlowConfig/CodeNodeDrawer.vue         |   6 +-
 .../components/workFlowConfig/useDnD.js       |  26 +++-
 7 files changed, 177 insertions(+), 97 deletions(-)

diff --git a/src/components/VariableChooser.vue b/src/components/VariableChooser.vue
index 7f5173a..84cb1ec 100644
--- a/src/components/VariableChooser.vue
+++ b/src/components/VariableChooser.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="variable-chooser">
     <div class="variable-row">
-      <div class="variable-name-section">
+      <div class="variable-name-section" v-if="showVariableName">
         <label class="field-label">变量名：</label>
         <el-input
           v-model="localVariableName"
@@ -12,7 +12,7 @@
       </div>
       
       <div class="variable-selector-section" :class="selectorClasses">
-        <label class="field-label">选择变量：</label>
+        <label class="field-label" v-if="showLabel">选择变量：</label>
         
         <!-- 已选变量标签显示 -->
         <div v-if="selectedVariable" class="selected-variable-display" :class="selectorClasses">
@@ -100,10 +100,9 @@
 /**
  * VariableChooser 组件
  * 
- * 提供变量选择功能，支持显示变量详细信息和操作按钮
- * 现在新增了样式控制属性，可以让外部组件灵活控制显示样式
+ * 统一的变量选择器组件，支持灵活的显示和输出格式控制
  * 
- * @since 1.0.0
+ * @since 2.0.0
  * @author Assistant
  */
 <script lang="ts" setup>
@@ -124,62 +123,79 @@ interface Variable {
 }
 
 interface Props {
-  variableName?: string              // 自定义变量名
-  variableReference?: string         // 变量引用
-  selectedVariable?: Variable        // 选中的变量对象
-  supportedScopes?: string[]         // 支持的作用域
-  flowId?: string                   // 流程ID
-  conversationId?: string           // 对话ID
-  currentStepId?: string            // 当前步骤ID
-  showVariableReference?: boolean   // 是否显示变量引用语法
-  showActions?: boolean             // 是否显示操作按钮
-  showVariableInfo?: boolean        // 是否显示变量详细信息
-  placeholder?: string              // 变量名输入框占位符
-  selectorPlaceholder?: string      // 变量选择器占位符
-  hideBorder?: boolean              // 是否隐藏边框，用于无边框样式
-  noBorderRadius?: boolean          // 是否取消圆角，用于连接其他组件时
-  transparentBackground?: boolean   // 是否使用透明背景，用于融入父容器
-  customClass?: string              // 自定义CSS类名，用于特殊样式定制
+  // 核心数据属性
+  modelValue?: string               // 当前选中的变量引用值
+  selectedVariable?: Variable       // 选中的变量对象
+  variableName?: string            // 自定义变量名（仅在需要输入变量名时使用）
+  
+  // 配置属性
+  supportedScopes?: string[]       // 支持的作用域
+  flowId?: string                 // 流程ID
+  conversationId?: string         // 对话ID
+  currentStepId?: string          // 当前步骤ID
+  
+  // 显示控制
+  showVariableName?: boolean      // 是否显示变量名输入
+  showLabel?: boolean            // 是否显示标签
+  showActions?: boolean          // 是否显示操作按钮
+  showVariableInfo?: boolean     // 是否显示变量详细信息
+  showVariableReference?: boolean // 是否显示变量引用语法
+  
+  // 格式控制
+  outputFormat?: 'raw' | 'wrapped'  // 输出格式：raw = "scope.name", wrapped = "{{scope.name}}"
+  
+  // 样式控制
+  hideBorder?: boolean           // 是否隐藏边框
+  noBorderRadius?: boolean       // 是否取消圆角
+  transparentBackground?: boolean // 是否使用透明背景
+  customClass?: string           // 自定义CSS类名
+  
+  // 占位符
+  placeholder?: string           // 变量名输入框占位符
+  selectorPlaceholder?: string   // 变量选择器占位符
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variableName: '',
-  variableReference: '',
+  modelValue: '',
   selectedVariable: undefined,
+  variableName: '',
   supportedScopes: () => ['conversation', 'system', 'env'],
   flowId: '',
   conversationId: '',
   currentStepId: '',
-  showVariableReference: true,
+  showVariableName: false,
+  showLabel: true,
   showActions: true,
   showVariableInfo: true,
-  placeholder: '输入变量名称',
-  selectorPlaceholder: '选择变量',
+  showVariableReference: true,
+  outputFormat: 'raw',
   hideBorder: false,
   noBorderRadius: false,
   transparentBackground: false,
-  customClass: ''
+  customClass: '',
+  placeholder: '输入变量名称',
+  selectorPlaceholder: '选择变量'
 })
 
 const emit = defineEmits<{
-  'update:variableName': [value: string]
-  'update:variableReference': [value: string]
+  'update:modelValue': [value: string]
   'update:selectedVariable': [value: Variable | undefined]
-  'variable-selected': [variable: Variable]
+  'update:variableName': [value: string]
+  'variable-selected': [variable: Variable, reference: string]
+  'variable-cleared': []
   'name-changed': [name: string]
   'remove': []
 }>()
 
 const localVariableName = ref(props.variableName)
-const localVariableReference = ref(props.variableReference)
 const selectedVariable = ref<Variable | undefined>(props.selectedVariable)
 
-// 解析 variableReference 字符串
+// 解析变量引用字符串
 const parseVariableReference = (reference: string) => {
   if (!reference) return null
   
   // 移除可能的 {{ }} 包装
-  const cleanRef = reference.replace(/^\{\{|\}\}$/g, '').trim()
+  const cleanRef = reference.replace(/^\{\{(.*)\}\}$/, '$1').trim()
   
   // 解析格式：conversation.step_id.variable_name 或 scope.variable_name
   const parts = cleanRef.split('.')
@@ -243,16 +259,28 @@ const findVariableByReference = async (parsedRef: { scope: string; step_id?: str
   }
 }
 
+// 生成变量引用字符串
+const generateVariableReference = (variable: Variable, format: 'raw' | 'wrapped' = 'raw'): string => {
+  let reference = ''
+  
+  if (variable.scope === 'conversation' && variable.step_id) {
+    reference = `conversation.${variable.step_id}.${variable.name}`
+  } else {
+    reference = `${variable.scope}.${variable.name}`
+  }
+  
+  return format === 'wrapped' ? `{{${reference}}}` : reference
+}
+
 // 初始化选中的变量
 const initializeSelectedVariable = async () => {
-  if (props.variableReference && !selectedVariable.value) {
-    const parsedRef = parseVariableReference(props.variableReference)
+  if (props.modelValue && !selectedVariable.value) {
+    const parsedRef = parseVariableReference(props.modelValue)
     if (parsedRef) {
       const foundVariable = await findVariableByReference(parsedRef)
       if (foundVariable) {
         selectedVariable.value = foundVariable
         emit('update:selectedVariable', foundVariable)
-        emit('variable-selected', foundVariable)
       }
     }
   }
@@ -268,11 +296,12 @@ watch(() => props.variableName, (newVal) => {
   localVariableName.value = newVal
 }, { immediate: true })
 
-watch(() => props.variableReference, async (newVal) => {
-  localVariableReference.value = newVal
-  // 当 variableReference 变化时，重新初始化 selectedVariable
+watch(() => props.modelValue, async (newVal) => {
+  // 当 modelValue 变化时，重新初始化 selectedVariable
   if (newVal && !selectedVariable.value) {
     await initializeSelectedVariable()
+  } else if (!newVal) {
+    selectedVariable.value = undefined
   }
 }, { immediate: true })
 
@@ -290,18 +319,13 @@ const handleNameChange = (value: string) => {
 const handleVariableSelected = (variable: Variable) => {
   selectedVariable.value = variable
   
-  // 构建完整的变量引用
-  let variableReference = ''
-  if (variable.scope === 'conversation' && variable.step_id) {
-    variableReference = `conversation.${variable.step_id}.${variable.name}`
-  } else {
-    variableReference = `${variable.scope}.${variable.name}`
-  }
+  // 生成变量引用字符串
+  const reference = generateVariableReference(variable, props.outputFormat)
   
-  localVariableReference.value = variableReference
+  // 发出事件
   emit('update:selectedVariable', variable)
-  emit('update:variableReference', variableReference)
-  emit('variable-selected', variable)
+  emit('update:modelValue', reference)
+  emit('variable-selected', variable, reference)
 }
 
 // 处理删除
@@ -312,9 +336,9 @@ const handleRemove = () => {
 // 清空变量选择
 const clearVariable = () => {
   selectedVariable.value = undefined
-  localVariableReference.value = ''
   emit('update:selectedVariable', undefined)
-  emit('update:variableReference', '')
+  emit('update:modelValue', '')
+  emit('variable-cleared')
 }
 
 // 获取变量显示名称（只显示后缀）
@@ -329,10 +353,7 @@ const getVariableDisplayName = (variable: Variable): string => {
 
 // 获取完整的变量引用
 const getFullVariableReference = (variable: Variable): string => {
-  if (variable.scope === 'conversation' && variable.step_id) {
-    return `{{conversation.${variable.step_id}.${variable.name}}}`
-  }
-  return `{{${variable.scope}.${variable.name}}}`
+  return generateVariableReference(variable, 'wrapped')
 }
 
 // 获取变量类型显示名称
@@ -377,11 +398,6 @@ const getScopeTagType = (scope: string): 'primary' | 'success' | 'info' | 'warni
   return typeMap[scope] || 'primary'
 }
 
-// 监听变量引用变化
-watch(localVariableReference, (newVal) => {
-  emit('update:variableReference', newVal)
-})
-
 // 计算样式类
 const selectorClasses = computed(() => {
   const classes: Record<string, boolean> = {
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 7673082..f505f2d 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -337,7 +337,12 @@ const editYamlDrawer = (name, desc, yamlCode, nodeId) => {
       callId: currentNode.data.callId,
       parameters: currentNode.data.parameters || {
         input_parameters: { choices: [] },
-        output_parameters: { branch_id: '' }
+        output_parameters: { 
+  branch_id: {
+    type: 'string',
+    description: '选中的分支ID'
+  }
+}
       }
     };
     nodeYamlId.value = nodeId;
@@ -771,7 +776,12 @@ const redrageFlow = (nodesList, edgesList) => {
           input_parameters: { 
             choices: choices 
           },
-          output_parameters: node.parameters?.output_parameters || { branch_id: '' }
+          output_parameters: node.parameters?.output_parameters || { 
+            branch_id: {
+              type: 'string',
+              description: '选中的分支ID'
+            }
+          }
         }
       };
     } else if (node.callId === 'Code') {
@@ -894,7 +904,7 @@ const executeInsertNode = (nodeMetaData) => {
     // 创建新节点
     const newNode = {
       id: newNodeId,
-      type: nodeMetaData.callId === 'Choice' ? 'branch' : 'custom',
+      type: nodeMetaData.callId === 'Choice' ? 'Choice' : 'custom',
       position: {
         x: edgeInfo.midX - 100, // 节点宽度的一半
         y: edgeInfo.midY - 40   // 节点高度的一半
@@ -905,7 +915,25 @@ const executeInsertNode = (nodeMetaData) => {
         nodeId: nodeMetaData.nodeId,
         callId: nodeMetaData.callId,
         serviceId: nodeMetaData.serviceId || 'default',
-        parameters: {
+        parameters: nodeMetaData.callId === 'Choice' ? {
+          input_parameters: { 
+            choices: [
+              {
+                branch_id: `else_${newNodeId}`,
+                name: 'ELSE',
+                is_default: true,
+                conditions: [],
+                logic: 'and'
+              }
+            ]
+          },
+          output_parameters: { 
+            branch_id: {
+              type: 'string',
+              description: '选中的分支ID'
+            }
+          }
+        } : {
           input_parameters: {},
           output_parameters: {}
         }
@@ -1155,7 +1183,12 @@ const saveFlow = (updateNodeParameter?, debug?) => {
         callId: 'Choice',
         parameters: {
           input_parameters: { choices: choices },
-          output_parameters: item.data.parameters?.output_parameters || { branch_id: '' }
+          output_parameters: item.data.parameters?.output_parameters || { 
+            branch_id: {
+              type: 'string',
+              description: '选中的分支ID'
+            }
+          }
         },
       };
     } else if (item.type === 'Choice') {
@@ -1181,7 +1214,12 @@ const saveFlow = (updateNodeParameter?, debug?) => {
         callId: 'Choice',
         parameters: {
           input_parameters: { choices: choices },
-          output_parameters: item.data.parameters?.output_parameters || { branch_id: '' }
+          output_parameters: item.data.parameters?.output_parameters || { 
+            branch_id: {
+              type: 'string',
+              description: '选中的分支ID'
+            }
+          }
         },
       };
     }
diff --git a/src/views/createapp/components/workFlowConfig/ChoiceBranchCard.vue b/src/views/createapp/components/workFlowConfig/ChoiceBranchCard.vue
index 22418da..6905d28 100644
--- a/src/views/createapp/components/workFlowConfig/ChoiceBranchCard.vue
+++ b/src/views/createapp/components/workFlowConfig/ChoiceBranchCard.vue
@@ -262,26 +262,18 @@ const handleRightReferenceToggle = (conditionIndex: number, isReference: boolean
 };
 
 // 处理左值变量选择
-const handleLeftVariableSelected = (conditionIndex: number, variable: any) => {
+const handleLeftVariableSelected = (conditionIndex: number, variable: any, reference: string) => {
   const condition = props.choice.conditions[conditionIndex];
-  // 保存完整的变量引用格式
-  if (variable.scope === 'conversation' && variable.step_id) {
-    condition.left.value = `conversation.${variable.step_id}.${variable.name}`;
-  } else {
-    condition.left.value = `${variable.scope}.${variable.name}`;
-  }
+  // 手动设置带大括号的引用格式，确保正确的格式
+  condition.left.value = reference; // reference 已经是 {{scope.name}} 格式
   emit('updateCondition', props.choiceIndex, conditionIndex, condition);
 };
 
 // 处理右值变量选择
-const handleRightVariableSelected = (conditionIndex: number, variable: any) => {
+const handleRightVariableSelected = (conditionIndex: number, variable: any, reference: string) => {
   const condition = props.choice.conditions[conditionIndex];
-  // 保存完整的变量引用格式
-  if (variable.scope === 'conversation' && variable.step_id) {
-    condition.right.value = `conversation.${variable.step_id}.${variable.name}`;
-  } else {
-    condition.right.value = `${variable.scope}.${variable.name}`;
-  }
+  // 手动设置带大括号的引用格式，确保正确的格式
+  condition.right.value = reference; // reference 已经是 {{scope.name}} 格式
   emit('updateCondition', props.choiceIndex, conditionIndex, condition);
 };
 
@@ -338,17 +330,19 @@ const handleRightValueChange = (conditionIndex: number, value: any) => {
               <div class="condition-row variable-row">
                 <div class="variable-section">
                   <VariableChooser
-                    :variable-reference="condition.left.value"
+                    v-model="condition.left.value"
                     :flow-id="flowId"
                     :conversation-id="conversationId"
                     :current-step-id="currentStepId"
                     :show-actions="false"
                     :show-variable-info="false"
+                    :show-label="false"
                     :hide-border="true"
                     :no-border-radius="true"
                     :transparent-background="true"
+                    output-format="wrapped"
                     selector-placeholder="选择左值变量"
-                    @variable-selected="handleLeftVariableSelected(conditionIndex, $event)"
+                    @variable-selected="(variable, reference) => handleLeftVariableSelected(conditionIndex, variable, reference)"
                   />
                 </div>
                 <!-- 数据类型选择 -->
@@ -390,17 +384,19 @@ const handleRightValueChange = (conditionIndex: number, value: any) => {
                   <!-- 变量引用模式 -->
                   <div v-if="condition.isRightReference" class="reference-input">
                     <VariableChooser
-                      :variable-reference="condition.right.value"
+                      v-model="condition.right.value"
                       :flow-id="flowId"
                       :conversation-id="conversationId"
                       :current-step-id="currentStepId"
                       :show-actions="false"
                       :show-variable-info="false"
+                      :show-label="false"
                       :hide-border="true"
                       :no-border-radius="true"
                       :transparent-background="true"
+                      output-format="wrapped"
                       selector-placeholder="选择右值变量"
-                      @variable-selected="handleRightVariableSelected(conditionIndex, $event)"
+                      @variable-selected="(variable, reference) => handleRightVariableSelected(conditionIndex, variable, reference)"
                     />
                   </div>
                   
diff --git a/src/views/createapp/components/workFlowConfig/ChoiceBranchDrawer.vue b/src/views/createapp/components/workFlowConfig/ChoiceBranchDrawer.vue
index 81d0178..53787fd 100644
--- a/src/views/createapp/components/workFlowConfig/ChoiceBranchDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/ChoiceBranchDrawer.vue
@@ -350,9 +350,9 @@ const saveNode = () => {
   
   // 合并非默认分支和默认分支
   const allChoices = [...formData.value.choices];
-  // if (formData.value.defaultBranch) {
-  //   allChoices.push(formData.value.defaultBranch);
-  // }
+  if (formData.value.defaultBranch) {
+    allChoices.push(formData.value.defaultBranch);
+  }
   
   const nodeData = {
     name: formData.value.name,
@@ -363,7 +363,10 @@ const saveNode = () => {
         choices: allChoices,
       },
       output_parameters: {
-        branch_id: '',
+        branch_id: {
+          type: 'string',
+          description: '选中的分支ID'
+        }
       },
     },
   };
diff --git a/src/views/createapp/components/workFlowConfig/ChoiceBranchNode.vue b/src/views/createapp/components/workFlowConfig/ChoiceBranchNode.vue
index 70972f0..d759b6f 100644
--- a/src/views/createapp/components/workFlowConfig/ChoiceBranchNode.vue
+++ b/src/views/createapp/components/workFlowConfig/ChoiceBranchNode.vue
@@ -58,7 +58,6 @@ const inputAndOutput = ref({
 
 // 计算分支列表
 const branches = computed(() => {
-  console.log(props.data);
   const choices = props.data?.parameters?.input_parameters?.choices || [];
   return choices.map((choice, index) => {
     return {
@@ -205,14 +204,18 @@ const parseVariableReference = (variableRef) => {
     return '?';
   }
   
+  // 先清理可能的 {{ }} 包装
+  let cleanRef = variableRef.replace(/^\{\{(.*)\}\}$/, '$1').trim();
+  
   // 格式: conversation.step_id.variable_name 或 scope.variable_name
-  const parts = variableRef.split('.');
+  const parts = cleanRef.split('.');
   if (parts.length >= 2) {
-    // 返回最后一部分作为变量名
-    return parts[parts.length - 1];
+    // 返回最后一部分作为变量名，并清理可能残留的 }}
+    let variableName = parts[parts.length - 1];
+    return variableName.replace(/\}\}$/, '');
   }
   
-  return variableRef;
+  return cleanRef.replace(/\}\}$/, '');
 };
 
 // 根据数据类型格式化值
diff --git a/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue b/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue
index 46a2192..0df4011 100644
--- a/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue
@@ -79,17 +79,19 @@
                         >
                           <VariableChooser
                             v-model:variable-name="variable.variableName"
-                            v-model:variable-reference="variable.variableReference"
+                            v-model="variable.variableReference"
                             v-model:selected-variable="variable.selectedVariable"
                             :supported-scopes="['conversation', 'system', 'env']"
                             :flow-id="flowId"
                             :current-step-id="nodeId"
+                            :show-variable-name="true"
                             :show-variable-reference="true"
                             :show-actions="true"
                             :show-variable-info="true"
+                            output-format="raw"
                             placeholder="输入节点内的变量名"
                             @remove="removeInputVariable(index)"
-                            @variable-selected="(selectedVar) => handleInputVariableSelected(selectedVar, index)"
+                            @variable-selected="(selectedVar, reference) => handleInputVariableSelected(selectedVar, index)"
                           />
                         </div>
                         
diff --git a/src/views/createapp/components/workFlowConfig/useDnD.js b/src/views/createapp/components/workFlowConfig/useDnD.js
index fe6ac94..b433981 100644
--- a/src/views/createapp/components/workFlowConfig/useDnD.js
+++ b/src/views/createapp/components/workFlowConfig/useDnD.js
@@ -43,7 +43,8 @@ export default function useDragAndDrop() {
       event.dataTransfer.setData('application/vueflow', type);
       event.dataTransfer.effectAllowed = 'move';
     }
-    draggedType.value = type === 'Choice' ? 'branch' : 'custom';
+    
+    draggedType.value = info?.callId === 'Choice' ? 'Choice' : 'custom';
     isDragging.value = true;
     nodeData.value = { ...info };
 
@@ -91,7 +92,7 @@ export default function useDragAndDrop() {
 
     const nodeId = getId();
 
-    // 清洗节点数据，确保Code节点有正确的parameters结构
+    // 清洗节点数据，确保不同节点类型有正确的parameters结构
     let cleanNodeData = { ...nodeData.value };
     
     // 如果是Code节点，确保parameters结构正确
@@ -119,6 +120,27 @@ export default function useDragAndDrop() {
         memoryLimitMb: cleanNodeData.memoryLimitMb || 128,
         cpuLimit: cleanNodeData.cpuLimit || 0.5,
       };
+    } else if (cleanNodeData.callId === 'Choice') {
+      // 如果是Choice节点，确保parameters结构正确
+      cleanNodeData.parameters = {
+        input_parameters: { 
+          choices: [
+            {
+              branch_id: `else_${nodeId}`,
+              name: 'ELSE',
+              is_default: true,
+              conditions: [],
+              logic: 'and'
+            }
+          ]
+        },
+        output_parameters: { 
+          branch_id: {
+            type: 'string',
+            description: '选中的分支ID'
+          }
+        }
+      };
     }
 
     const newNode = {
-- 
Gitee