diff --git a/.env.micro b/.env.micro
index 514cf7d595e269ceb201aae2b06423b2e4852221..79b12e939ef8e3680f37fa5c70b8c307ca325a4c 100755
--- a/.env.micro
+++ b/.env.micro
@@ -1,3 +1,3 @@
 VITE_BASE_URL=/copilot/
 VITE_MICRO_ROUTER_URL=/eulercopilot/
-VITE_BASE_PROXY_URL=http://localhost:8002
+VITE_BASE_PROXY_URL=http://10.211.55.10:8002
diff --git a/src/api/variable.js b/src/api/variable.js
index 7f726adfb479de8285b8d700cd2317becf154691..37dd80e869c378271e5ebc0fb4c73b6e5b5a12ca 100644
--- a/src/api/variable.js
+++ b/src/api/variable.js
@@ -46,6 +46,10 @@ export async function deleteVariable(params) {
 /**
  * 获取单个变量
  * @param {Object} params 查询参数
+ * @param {string} params.name 变量名称
+ * @param {string} params.scope 变量作用域 (user|env|system|conversation)
+ * @param {string} [params.flow_id] 流程ID（环境级和对话级变量必需）
+ * @param {string} [params.conversation_id] 对话ID（系统级和对话级变量必需）
  */
 export async function getVariable(params) {
   const [error, response] = await get(`${BASE_URL}/get`, params)
@@ -56,6 +60,9 @@ export async function getVariable(params) {
 /**
  * 列出变量
  * @param {Object} params 查询参数
+ * @param {string} params.scope 变量作用域 (user|env|system|conversation)
+ * @param {string} [params.flow_id] 流程ID（环境级和对话级变量必需）
+ * @param {string} [params.conversation_id] 对话ID（系统级和对话级变量必需）
  */
 export async function listVariables(params = {}) {
   const [error, response] = await get(`${BASE_URL}/list`, params)
@@ -91,4 +98,165 @@ export async function clearConversationVariables(params) {
   const [error, response] = await post(`${BASE_URL}/clear-conversation`, {}, params)
   if (error) throw error
   return response
+}
+
+// ========== 便利函数 ==========
+
+/**
+ * 列出用户变量
+ * @returns {Promise} 用户变量列表
+ */
+export async function listUserVariables() {
+  return await listVariables({ scope: 'user' })
+}
+
+/**
+ * 列出环境变量
+ * @param {string} flowId 流程ID
+ * @returns {Promise} 环境变量列表
+ */
+export async function listEnvironmentVariables(flowId) {
+  if (!flowId) {
+    throw new Error('流程ID是必需的')
+  }
+  return await listVariables({ 
+    scope: 'env', 
+    flow_id: flowId 
+  })
+}
+
+/**
+ * 列出系统变量
+ * @param {string} conversationId 对话ID
+ * @returns {Promise} 系统变量列表
+ */
+export async function listSystemVariables(conversationId) {
+  if (!conversationId) {
+    throw new Error('对话ID是必需的')
+  }
+  return await listVariables({ 
+    scope: 'system', 
+    conversation_id: conversationId 
+  })
+}
+
+/**
+ * 列出对话变量
+ * @param {string} conversationId 对话ID
+ * @returns {Promise} 对话变量列表
+ */
+export async function listConversationVariables(conversationId) {
+  if (!conversationId) {
+    throw new Error('对话ID是必需的')
+  }
+  return await listVariables({ 
+    scope: 'conversation', 
+    conversation_id: conversationId 
+  })
+}
+
+/**
+ * 获取用户变量
+ * @param {string} name 变量名称
+ * @returns {Promise} 变量信息
+ */
+export async function getUserVariable(name) {
+  return await getVariable({ 
+    name, 
+    scope: 'user' 
+  })
+}
+
+/**
+ * 获取环境变量
+ * @param {string} name 变量名称
+ * @param {string} flowId 流程ID
+ * @returns {Promise} 变量信息
+ */
+export async function getEnvironmentVariable(name, flowId) {
+  if (!flowId) {
+    throw new Error('流程ID是必需的')
+  }
+  return await getVariable({ 
+    name, 
+    scope: 'env', 
+    flow_id: flowId 
+  })
+}
+
+/**
+ * 获取系统变量
+ * @param {string} name 变量名称
+ * @param {string} conversationId 对话ID
+ * @returns {Promise} 变量信息
+ */
+export async function getSystemVariable(name, conversationId) {
+  if (!conversationId) {
+    throw new Error('对话ID是必需的')
+  }
+  return await getVariable({ 
+    name, 
+    scope: 'system', 
+    conversation_id: conversationId 
+  })
+}
+
+/**
+ * 获取对话变量
+ * @param {string} name 变量名称
+ * @param {string} conversationId 对话ID
+ * @returns {Promise} 变量信息
+ */
+export async function getConversationVariable(name, conversationId) {
+  if (!conversationId) {
+    throw new Error('对话ID是必需的')
+  }
+  return await getVariable({ 
+    name, 
+    scope: 'conversation', 
+    conversation_id: conversationId 
+  })
+}
+
+/**
+ * 创建用户变量
+ * @param {Object} data 变量数据
+ */
+export async function createUserVariable(data) {
+  return await createVariable({
+    ...data,
+    scope: 'user'
+  })
+}
+
+/**
+ * 创建环境变量
+ * @param {Object} data 变量数据
+ * @param {string} flowId 流程ID
+ */
+export async function createEnvironmentVariable(data, flowId) {
+  if (!flowId) {
+    throw new Error('流程ID是必需的')
+  }
+  return await createVariable({
+    ...data,
+    scope: 'env',
+    flow_id: flowId
+  })
+}
+
+/**
+ * 创建对话变量模板（在流程级别定义）
+ * @param {Object} data 变量数据
+ * @param {string} flowId 流程ID
+ */
+export async function createConversationVariableTemplate(data, flowId) {
+  if (!flowId) {
+    throw new Error('流程ID是必需的')
+  }
+  return await createVariable({
+    ...data,
+    scope: 'conversation',
+    flow_id: flowId
+  })
 } 
\ No newline at end of file
diff --git a/src/components/JSONMonacoEditor.vue b/src/components/JSONMonacoEditor.vue
index b7e0dd4389964476e9ea3928dafa34ad89b480d7..7c652a984e5727c3ce21902ac3a6bdd9d863b089 100644
--- a/src/components/JSONMonacoEditor.vue
+++ b/src/components/JSONMonacoEditor.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="json-monaco-editor">
+    <!-- 简化调试信息 -->
+    <div v-if="props.modelValue && props.modelValue.trim() !== '{}'" style="background: #e0f7fa; padding: 2px; font-size: 9px; color: #666;">
+      📝 {{ props.modelValue.length }}
+    </div>
+    
     <div 
       ref="editorContainer" 
       class="editor-container"
@@ -43,9 +48,11 @@ const editorStyle = computed(() => {
   const defaultStyle = {
     width: '100%',
     height: '100%',
+    minHeight: '120px', // 确保最小高度
     maxHeight: '200px',
     fontSize: '14px',
-    lineHeight: '16px'
+    lineHeight: '16px',
+    overflow: 'hidden' // 防止内容溢出
   }
   return { ...defaultStyle, ...props.style }
 })
@@ -54,8 +61,21 @@ const editorStyle = computed(() => {
 const initMonacoEditor = async () => {
   if (!editorContainer.value) return
 
-  // 配置Worker - 不设置worker，使用默认配置
-  // Monaco Editor会自动处理worker加载
+  try {
+    // 配置Worker - 禁用worker避免加载问题
+    if (typeof window !== 'undefined') {
+      (window as any).MonacoEnvironment = {
+        getWorker: () => {
+          // 返回一个空的worker来避免错误
+          return {
+            postMessage: () => {},
+            terminate: () => {},
+            addEventListener: () => {},
+            removeEventListener: () => {}
+          }
+        }
+      }
+    }
 
   // 定义深色主题
   monaco.editor.defineTheme('json-dark', {
@@ -94,9 +114,17 @@ const initMonacoEditor = async () => {
     minimap: {
       enabled: false
     },
-         // JSON特定设置
-     formatOnPaste: true,
-     formatOnType: true
+    // JSON特定设置
+    formatOnPaste: false, // 禁用可能需要worker的功能
+    formatOnType: false,  // 禁用可能需要worker的功能
+    // 禁用一些高级功能来避免worker问题
+    quickSuggestions: false,
+    suggestOnTriggerCharacters: false,
+    acceptSuggestionOnEnter: 'off',
+    tabCompletion: 'off',
+    wordBasedSuggestions: 'off',
+    // 禁用语言服务相关功能
+    foldingStrategy: 'indentation'
   })
 
   // 监听内容变化
@@ -112,10 +140,45 @@ const initMonacoEditor = async () => {
     editor: editor 
   })
 
+  // 强制布局刷新确保正确显示
+  setTimeout(() => {
+    if (editor) {
+      editor.layout();
+      console.log('🔧 Monaco Editor post-creation layout complete');
+    }
+  }, 100);
+
   // 自动聚焦
   if (props.autofocus) {
     editor.focus()
   }
+  } catch (error) {
+    console.error('Monaco Editor 初始化失败:', error)
+    // 可以在这里添加降级方案，比如显示一个简单的 textarea
+    if (editorContainer.value) {
+      editorContainer.value.innerHTML = `
+        <textarea 
+          style="width: 100%; height: 100%; border: none; outline: none; resize: none; font-family: monospace; padding: 8px;"
+          placeholder="${props.placeholder}"
+          ${props.disabled ? 'readonly' : ''}
+        >${props.modelValue}</textarea>
+      `
+      
+      const textarea = editorContainer.value.querySelector('textarea')
+      if (textarea) {
+        textarea.addEventListener('input', (e) => {
+          const value = (e.target as HTMLTextAreaElement).value
+          emit('update:modelValue', value)
+          emit('change', value)
+        })
+        
+        emit('ready', { 
+          view: textarea, 
+          editor: textarea 
+        })
+      }
+    }
+  }
 }
 
 // 获取值
@@ -132,8 +195,23 @@ const setValue = (value: string) => {
 
 // 监听props变化
 watch(() => props.modelValue, (newVal) => {
-  if (editor && newVal !== editor.getValue()) {
-    editor.setValue(newVal || '')
+  if (editor) {
+    editor.setValue(newVal || '');
+    // 强制刷新编辑器布局
+    setTimeout(() => {
+      if (editor) {
+        editor.layout();
+        console.log('📐 Monaco refreshed');
+      }
+    }, 100);
+  } else if (!editor && editorContainer.value) {
+    // 处理降级方案（textarea）
+    const textarea = editorContainer.value.querySelector('textarea');
+    if (textarea) {
+      textarea.value = newVal || '';
+      // 触发输入事件确保显示更新
+      textarea.dispatchEvent(new Event('input'));
+    }
   }
 }, { immediate: true })
 
@@ -179,8 +257,11 @@ defineExpose({
     border: 1px solid var(--el-border-color);
     border-radius: 4px;
     overflow: hidden;
+    min-height: 120px; // 确保最小高度
     
     :deep(.monaco-editor) {
+      min-height: 120px !important; // 强制最小高度
+      
       .margin {
         background-color: var(--el-fill-color-extra-light);
       }
@@ -188,6 +269,17 @@ defineExpose({
       .monaco-editor-background {
         background-color: var(--el-bg-color);
       }
+      
+      // 确保文本内容可见
+      .view-lines {
+        opacity: 1 !important;
+        visibility: visible !important;
+      }
+      
+      .view-line {
+        opacity: 1 !important;
+        visibility: visible !important;
+      }
     }
   }
 }
diff --git a/src/components/StartNodeVariableManager.vue b/src/components/StartNodeVariableManager.vue
index 5b8efc7c9b444c6bbd890c31351622fdbf436db3..ad8ec9de189a23386061b84b90ef1c1e59ec2f8e 100644
--- a/src/components/StartNodeVariableManager.vue
+++ b/src/components/StartNodeVariableManager.vue
@@ -93,8 +93,26 @@ const addVariableRules = {
 const loadSystemVariables = async () => {
   loading.value = true
   try {
-    const response = await listVariables({ scope: 'system' })
+    let params: any = { scope: 'system' }
+    
+    // 根据是否有conversation_id选择参数
+    if (props.conversationId) {
+      // 对话阶段：使用conversation_id查询实例
+      params.conversation_id = props.conversationId
+      console.log('🔄 加载系统变量（对话阶段）, conversationId:', props.conversationId)
+    } else if (props.flowId) {
+      // 配置阶段：使用flow_id查询模板
+      params.flow_id = props.flowId
+      console.log('🔄 加载系统变量（配置阶段）, flowId:', props.flowId)
+    } else {
+      console.warn('⚠️ 缺少conversationId和flowId，跳过系统变量加载')
+      systemVariables.value = []
+      return
+    }
+    
+    const response = await listVariables(params)
     systemVariables.value = response.result?.variables || []
+    console.log('✅ 系统变量加载成功:', systemVariables.value.length, '个')
   } catch (error) {
     console.error('加载系统变量失败:', error)
     ElMessage.error('加载系统变量失败')
diff --git a/src/components/VariableChooser.vue b/src/components/VariableChooser.vue
index 0b8d91174eb1f33b2f711b82f187a17c4e3dd53e..7f5173ada4b2af28f5829ad0f5aefc32fe9152c9 100644
--- a/src/components/VariableChooser.vue
+++ b/src/components/VariableChooser.vue
@@ -11,17 +11,50 @@
         />
       </div>
       
-      <div class="variable-selector-section">
+      <div class="variable-selector-section" :class="selectorClasses">
         <label class="field-label">选择变量：</label>
-        <VariableSelector
-          v-model="localVariableReference"
-          placeholder="从VariablePool中选择变量"
-          :supported-scopes="supportedScopes"
-          :flow-id="flowId"
-          :conversation-id="conversationId"
-          :show-variable-reference="showVariableReference"
-          @variable-selected="handleVariableSelected"
-        />
+        
+        <!-- 已选变量标签显示 -->
+        <div v-if="selectedVariable" class="selected-variable-display" :class="selectorClasses">
+          <el-tooltip 
+            :content="getFullVariableReference(selectedVariable)"
+            placement="top"
+            effect="dark"
+          >
+            <div class="variable-tag">
+              <span class="variable-name">
+                <el-icon v-if="selectedVariable.scope === 'env'">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M20 18a1 1 0 0 1-1 1h-4a3 3 0 0 0-3 3a3 3 0 0 0-3-3H5a1 1 0 0 1-1-1H2a3 3 0 0 0 3 3h4a2 2 0 0 1 2 2h2a2 2 0 0 1 2-2h4a3 3 0 0 0 3-3Zm0-12a1 1 0 0 0-1-1h-4a3 3 0 0 1-3-3a3 3 0 0 1-3 3H5a1 1 0 0 0-1 1H2a3 3 0 0 1 3-3h4a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h4a3 3 0 0 1 3 3Zm-8 6L9 8H7v8h2v-4l3 4h2V8h-2zm9-4l-2 5.27L17 8h-2l3 8h2l3-8zM1 8v8h5v-2H3v-1h2v-2H3v-1h3V8z" />
+                  </svg>
+                </el-icon>
+                {{ getVariableDisplayName(selectedVariable) }}
+              </span>
+              <button 
+                class="clear-btn"
+                @click="clearVariable"
+                type="button"
+                title="清空变量选择"
+              >
+                <el-icon><Close /></el-icon>
+              </button>
+            </div>
+          </el-tooltip>
+        </div>
+        
+        <!-- 变量选择器 -->
+        <div v-else class="variable-selector">
+          <VariableSelector
+            model-value=""
+            :placeholder="selectorPlaceholder"
+            :supported-scopes="supportedScopes"
+            :flow-id="flowId"
+            :conversation-id="conversationId"
+            :current-step-id="currentStepId"
+            :show-variable-reference="showVariableReference"
+            @variable-selected="handleVariableSelected"
+          />
+        </div>
       </div>
       
       <div class="actions-section" v-if="showActions">
@@ -64,11 +97,21 @@
   </div>
 </template>
 
+/**
+ * VariableChooser 组件
+ * 
+ * 提供变量选择功能，支持显示变量详细信息和操作按钮
+ * 现在新增了样式控制属性，可以让外部组件灵活控制显示样式
+ * 
+ * @since 1.0.0
+ * @author Assistant
+ */
 <script lang="ts" setup>
-import { ref, computed, watch } from 'vue'
-import { ElInput, ElButton, ElTag } from 'element-plus'
-import { Delete } from '@element-plus/icons-vue'
+import { ref, computed, watch, onMounted } from 'vue'
+import { ElInput, ElButton, ElTag, ElIcon } from 'element-plus'
+import { Delete, Close } from '@element-plus/icons-vue'
 import VariableSelector from './VariableSelector.vue'
+import { listVariables } from '@/api/variable'
 
 interface Variable {
   name: string
@@ -76,6 +119,8 @@ interface Variable {
   scope: string
   value: string
   description?: string
+  step?: string        // 节点名称（前置节点变量专用）
+  step_id?: string     // 节点ID（前置节点变量专用）
 }
 
 interface Props {
@@ -85,10 +130,16 @@ interface Props {
   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类名，用于特殊样式定制
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -98,10 +149,16 @@ const props = withDefaults(defineProps<Props>(), {
   supportedScopes: () => ['conversation', 'system', 'env'],
   flowId: '',
   conversationId: '',
+  currentStepId: '',
   showVariableReference: true,
   showActions: true,
   showVariableInfo: true,
-  placeholder: '输入变量名称'
+  placeholder: '输入变量名称',
+  selectorPlaceholder: '选择变量',
+  hideBorder: false,
+  noBorderRadius: false,
+  transparentBackground: false,
+  customClass: ''
 })
 
 const emit = defineEmits<{
@@ -117,13 +174,106 @@ 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()
+  
+  // 解析格式：conversation.step_id.variable_name 或 scope.variable_name
+  const parts = cleanRef.split('.')
+  
+  if (parts.length === 3 && parts[0] === 'conversation') {
+    return {
+      scope: parts[0],
+      step_id: parts[1],
+      name: parts[2]
+    }
+  } else if (parts.length === 2) {
+    return {
+      scope: parts[0],
+      name: parts[1]
+    }
+  }
+  
+  return null
+}
+
+// 根据解析的引用信息查找对应的变量
+const findVariableByReference = async (parsedRef: { scope: string; step_id?: string; name: string }) => {
+  try {
+    const params: any = {
+      scope: parsedRef.scope,
+      flow_id: props.flowId,
+      conversation_id: props.conversationId
+    }
+    
+    // 对话变量需要传 current_step_id
+    if (parsedRef.scope === 'conversation' && props.currentStepId) {
+      params.current_step_id = props.currentStepId
+    }
+    
+    const response = await listVariables(params)
+    
+    // 处理不同的API响应结构
+    let variables: Variable[] = []
+    const responseAny = response as any
+    
+    if (responseAny?.result?.variables) {
+      variables = responseAny.result.variables
+    } else if (responseAny?.variables) {
+      variables = responseAny.variables
+    } else if (Array.isArray(responseAny)) {
+      variables = responseAny
+    }
+    
+    // 查找匹配的变量
+    return variables.find(variable => {
+      if (parsedRef.scope === 'conversation' && parsedRef.step_id) {
+        return variable.name === parsedRef.name && variable.step_id === parsedRef.step_id
+      } else {
+        return variable.name === parsedRef.name && variable.scope === parsedRef.scope
+      }
+    })
+    
+  } catch (error) {
+    console.error('查找变量失败:', error)
+    return undefined
+  }
+}
+
+// 初始化选中的变量
+const initializeSelectedVariable = async () => {
+  if (props.variableReference && !selectedVariable.value) {
+    const parsedRef = parseVariableReference(props.variableReference)
+    if (parsedRef) {
+      const foundVariable = await findVariableByReference(parsedRef)
+      if (foundVariable) {
+        selectedVariable.value = foundVariable
+        emit('update:selectedVariable', foundVariable)
+        emit('variable-selected', foundVariable)
+      }
+    }
+  }
+}
+
+// 生命周期钩子
+onMounted(async () => {
+  await initializeSelectedVariable()
+})
+
 // 监听props变化
 watch(() => props.variableName, (newVal) => {
   localVariableName.value = newVal
 }, { immediate: true })
 
-watch(() => props.variableReference, (newVal) => {
+watch(() => props.variableReference, async (newVal) => {
   localVariableReference.value = newVal
+  // 当 variableReference 变化时，重新初始化 selectedVariable
+  if (newVal && !selectedVariable.value) {
+    await initializeSelectedVariable()
+  }
 }, { immediate: true })
 
 watch(() => props.selectedVariable, (newVal) => {
@@ -139,7 +289,18 @@ 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}`
+  }
+  
+  localVariableReference.value = variableReference
   emit('update:selectedVariable', variable)
+  emit('update:variableReference', variableReference)
   emit('variable-selected', variable)
 }
 
@@ -148,6 +309,32 @@ const handleRemove = () => {
   emit('remove')
 }
 
+// 清空变量选择
+const clearVariable = () => {
+  selectedVariable.value = undefined
+  localVariableReference.value = ''
+  emit('update:selectedVariable', undefined)
+  emit('update:variableReference', '')
+}
+
+// 获取变量显示名称（只显示后缀）
+const getVariableDisplayName = (variable: Variable): string => {
+  if (variable.scope === 'conversation' && variable.step) {
+    return `${variable.step}.${variable.name}`
+  } else if (variable.scope !== 'conversation' && variable.scope !== 'env'){
+    return `${variable.scope}.${variable.name}`
+  }
+  return variable.name
+}
+
+// 获取完整的变量引用
+const getFullVariableReference = (variable: Variable): string => {
+  if (variable.scope === 'conversation' && variable.step_id) {
+    return `{{conversation.${variable.step_id}.${variable.name}}}`
+  }
+  return `{{${variable.scope}.${variable.name}}}`
+}
+
 // 获取变量类型显示名称
 const getVariableTypeDisplay = (type: string): string => {
   const typeMap: Record<string, string> = {
@@ -194,6 +381,21 @@ const getScopeTagType = (scope: string): 'primary' | 'success' | 'info' | 'warni
 watch(localVariableReference, (newVal) => {
   emit('update:variableReference', newVal)
 })
+
+// 计算样式类
+const selectorClasses = computed(() => {
+  const classes: Record<string, boolean> = {
+    'hide-border': props.hideBorder,
+    'no-border-radius': props.noBorderRadius,
+    'transparent-bg': props.transparentBackground
+  }
+  
+  if (props.customClass) {
+    classes[props.customClass] = true
+  }
+  
+  return classes
+})
 </script>
 
 <style lang="scss" scoped>
@@ -248,6 +450,132 @@ watch(localVariableReference, (newVal) => {
           width: 100%;
         }
       }
+      
+      // 样式控制类
+      &.hide-border {
+        :deep(.variable-selector) {
+          .el-input__wrapper {
+            border: none !important;
+            box-shadow: none !important;
+          }
+        }
+      }
+      
+      &.no-border-radius {
+        :deep(.variable-selector) {
+          .el-input__wrapper {
+            border-radius: 0 !important;
+          }
+        }
+      }
+      
+      &.transparent-bg {
+        :deep(.variable-selector) {
+          .el-input__wrapper {
+            background: transparent !important;
+          }
+        }
+      }
+    }
+    
+    // 已选变量标签显示区域
+    .selected-variable-display {
+      height: 24px; // 确保与输入框高度一致
+      display: flex;
+      align-items: center;
+      
+        .variable-tag {
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: space-between !important;
+          height: 22px;
+          width: 140px;
+          padding: 2px 6px 2px 10px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          border-radius: 4px;
+          font-size: 12px;
+          font-weight: 500;
+          cursor: default;
+          user-select: none;
+          vertical-align: middle;
+          max-width: 100%;
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+          transition: all 0.2s ease;
+          white-space: nowrap;
+          
+          .variable-name {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-right: 6px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-height: 1.2;
+            max-width: calc(100% - 24px); // 为按钮留出空间
+            flex-shrink: 1;
+          }
+          
+          .clear-btn {
+            background: none;
+            border: none;
+            color: white;
+            cursor: pointer;
+            padding: 0;
+            margin: 0;
+            width: 16px;
+            height: 16px;
+            display: inline-flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            border-radius: 2px;
+            transition: all 0.2s ease;
+            flex-shrink: 0;
+            
+            .el-icon {
+              font-size: 12px;
+              width: 12px;
+              height: 12px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            
+            &:hover {
+              background-color: rgba(255, 255, 255, 0.2);
+              transform: scale(1.1);
+            }
+            
+            &:active {
+              background-color: rgba(255, 255, 255, 0.3);
+              transform: scale(0.95);
+            }
+          }
+        
+        &:hover {
+          opacity: 0.9;
+          transform: translateY(-1px);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+        }
+      }
+      
+      // 适配隐藏边框样式
+      &.hide-border .variable-tag {
+        border: none;
+        box-shadow: none;
+      }
+      
+      // 适配无边框圆角样式
+      &.no-border-radius .variable-tag {
+        border-radius: 0;
+      }
+      
+      // 适配透明背景样式
+      &.transparent-bg .variable-tag {
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
+        backdrop-filter: blur(8px);
+      }
     }
     
     .actions-section {
diff --git a/src/components/VariableInsertDropdown.vue b/src/components/VariableInsertDropdown.vue
index ba50c2b2edf0e864438fd2abc56639a8a2f82918..7686027e4a9dcae8a10a4b6d88ec8ca7b88d2365 100644
--- a/src/components/VariableInsertDropdown.vue
+++ b/src/components/VariableInsertDropdown.vue
@@ -23,7 +23,7 @@
         v-loading="loading"
       >
         <div class="group-header">
-          <span class="group-title">{{ getScopeLabel(group.scope) }}</span>
+          <span class="group-title">{{ getScopeLabel(group.scope, group.nodeId, group.nodeName) }}</span>
           <span class="group-count">{{ group.variables.length }}</span>
         </div>
         
@@ -65,6 +65,7 @@ interface Props {
   supportedScopes?: string[]
   flowId?: string
   conversationId?: string
+  currentStepId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -86,7 +87,7 @@ const {
   getVariableTypeDisplay,
   getScopeLabel,
   loadVariables
-} = useVariables(props.supportedScopes, props.flowId, props.conversationId)
+} = useVariables(props.supportedScopes, props.flowId, props.conversationId, props.currentStepId)
 
 // 生命周期
 onMounted(() => {
@@ -94,7 +95,7 @@ onMounted(() => {
 })
 
 // 监听属性变化
-watch([() => props.flowId, () => props.conversationId], () => {
+watch([() => props.flowId, () => props.conversationId, () => props.currentStepId], () => {
   loadVariables()
 })
 
diff --git a/src/components/VariableRichTextEditor.vue b/src/components/VariableRichTextEditor.vue
index 2342d97f566985607287c91b4606e4f5984ccc1a..10b6ba5c2d22c24c191263b245dfbbe707aee817 100644
--- a/src/components/VariableRichTextEditor.vue
+++ b/src/components/VariableRichTextEditor.vue
@@ -33,6 +33,7 @@
                     <VariableInsertDropdown
                     :supported-scopes="['conversation', 'system', 'env', 'user']"
                     :flow-id="flowId"
+                    :current-step-id="currentStepId"
                     @variable-selected="handleVariableSelection"
                     @variables-loaded="handleVariablesLoaded"
                     />
@@ -96,11 +97,12 @@ import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { ElInput, ElMessage } from 'element-plus'
 import { IconCopy } from '@computing/opendesign-icons'
 import VariableInsertDropdown from '@/components/VariableInsertDropdown.vue'
-import { type Variable } from 'srccomponents/useVariables'
+import { type Variable } from '@/components/useVariables'
 
 interface Props {
   modelValue: string
   flowId?: string
+  currentStepId?: string
   placeholder?: string
 }
 
@@ -140,39 +142,119 @@ const getVariableDisplayName = (variable: Variable): string => {
     }
     return nameMap[variable.name] || `system.${variable.name}`
   }
+  
+  // 特殊处理具备step_id的conversation变量
+  if (variable.scope === 'conversation' && variable.step_id && variable.step) {
+    return `${variable.step}.${variable.name}`
+  }
+  
   return `${variable.scope}.${variable.name}`
 }
 
-// 检查变量是否在可用变量列表中
-const isVariableValid = (variableName: string): boolean => {
+// 生成插入用的变量名格式
+const getVariableInsertName = (variable: Variable): string => {
+  if (variable.scope === 'system') {
+    const nameMap = {
+      'query': 'system.query',
+      'files': 'system.files',
+      'dialogue_count': 'system.dialogue_count',
+      'app_id': 'system.app_id',
+      'flow_id': 'system.flow_id',
+      'user_id': 'system.user_id',
+      'session_id': 'system.session_id',
+      'timestamp': 'system.timestamp'
+    }
+    return nameMap[variable.name] || `system.${variable.name}`
+  }
+  
+  // 特殊处理具备step_id的conversation变量
+  if (variable.scope === 'conversation' && variable.step_id) {
+    return `conversation.${variable.step_id}.${variable.name}`
+  }
+  
+  return `${variable.scope}.${variable.name}`
+}
+
+// 根据插入格式的变量名获取显示文本
+const getDisplayTextFromInsertName = (insertName: string): string => {
   if (!availableVariables.value || availableVariables.value.length === 0) {
-    return true
+    return insertName
   }
   
-  let scopeToCheck = ''
-  let nameToCheck = ''
+  // 查找匹配的变量对象
+  const matchedVariable = availableVariables.value.find(variable => {
+    const expectedInsertName = getVariableInsertName(variable)
+    return expectedInsertName === insertName
+  })
   
-  if (variableName.includes('.')) {
-    const parts = variableName.split('.')
-    scopeToCheck = parts[0]
-    nameToCheck = parts[1]
-  } else {
-    nameToCheck = variableName
+  if (matchedVariable) {
+    return getVariableDisplayName(matchedVariable)
   }
   
-  return availableVariables.value.some(variable => {
-    const expectedDisplayName = getVariableDisplayName(variable)
+  // 如果找不到匹配的变量，尝试解析conversation.step_id.variable_name格式
+  if (insertName.includes('.')) {
+    const parts = insertName.split('.')
     
-    if (expectedDisplayName === variableName) {
+    // 处理conversation.step_id.variable_name格式
+    if (parts.length === 3 && parts[0] === 'conversation') {
+      const [scope, stepId, varName] = parts
+      const conversationVariable = availableVariables.value.find(variable => 
+        variable.scope === scope && variable.step_id === stepId && variable.name === varName
+      )
+      
+      if (conversationVariable && conversationVariable.step) {
+        return `${conversationVariable.step}.${conversationVariable.name}`
+      }
+    }
+  }
+  
+  // fallback：返回原始名称
+  return insertName
+}
+
+// 检查变量是否在可用变量列表中
+const isVariableValid = (variableName: string): boolean => {
+  if (!availableVariables.value || availableVariables.value.length === 0) {
+    return true
+  }
+  
+  return availableVariables.value.some(variable => {
+    // 检查插入格式是否匹配
+    const expectedInsertName = getVariableInsertName(variable)
+    if (expectedInsertName === variableName) {
       return true
     }
     
-    if (!scopeToCheck && variable.name === nameToCheck) {
+    // 检查显示格式是否匹配（为了兼容性）
+    const expectedDisplayName = getVariableDisplayName(variable)
+    if (expectedDisplayName === variableName) {
       return true
     }
     
-    if (scopeToCheck && nameToCheck && variable.scope === scopeToCheck && variable.name === nameToCheck) {
-      return true
+    // 特殊处理conversation.step_id.variable_name格式
+    if (variableName.includes('.')) {
+      const parts = variableName.split('.')
+      
+      // 处理conversation.step_id.variable_name格式
+      if (parts.length === 3 && parts[0] === 'conversation') {
+        const [scope, stepId, varName] = parts
+        if (variable.scope === scope && variable.step_id === stepId && variable.name === varName) {
+          return true
+        }
+      }
+      
+      // 处理scope.variable_name格式
+      if (parts.length === 2) {
+        const [scope, varName] = parts
+        if (variable.scope === scope && variable.name === varName) {
+          return true
+        }
+      }
+    } else {
+      // 没有scope的情况，仅通过变量名匹配
+      if (variable.name === variableName) {
+        return true
+      }
     }
     
     return false
@@ -203,7 +285,7 @@ const updateTagEditor = (content: string) => {
       
       const titleAttribute = isValid ? '' : `title="变量 ${variableName} 不存在"`
       
-      return `<span class="${tagClass}" contenteditable="false" data-variable="${escapedVariableName}" data-original-name="${escapedVariableName}" data-valid="${isValid}" ${titleAttribute} style="display: inline-block !important; padding: 2px 8px !important; margin: 0 2px !important; ${backgroundStyle} color: white !important; border-radius: 4px !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; user-select: none !important; vertical-align: middle !important; direction: ltr !important; unicode-bidi: normal !important; text-align: center !important; writing-mode: horizontal-tb !important;">${variableName}</span>`
+      return `<span class="${tagClass}" contenteditable="false" data-variable="${escapedVariableName}" data-original-name="${escapedVariableName}" data-valid="${isValid}" ${titleAttribute} style="display: inline-block !important; padding: 2px 8px !important; margin: 0 2px !important; ${backgroundStyle} color: white !important; border-radius: 4px !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; user-select: none !important; vertical-align: middle !important; direction: ltr !important; unicode-bidi: normal !important; text-align: center !important; writing-mode: horizontal-tb !important;">${getDisplayTextFromInsertName(variableName)}</span>`
     })
     
     tagEditorRef.value.innerHTML = htmlContent
@@ -262,7 +344,7 @@ const handleVariablesLoaded = (variables: Variable[]) => {
 const handleVariableSelection = (variable: Variable) => {
   isSelectingVariable.value = true
   
-  const variableName = getVariableDisplayName(variable)
+  const variableName = getVariableInsertName(variable)
   
   try {
     if (displayMode.value === 'tag') {
@@ -349,7 +431,7 @@ const insertVariableAtTriggerPosition = (variableName: string) => {
       variableSpan.setAttribute('title', `变量 ${variableName} 不存在`)
     }
     
-    variableSpan.textContent = variableName
+    variableSpan.textContent = getDisplayTextFromInsertName(variableName)
     
     const backgroundStyle = isValid 
       ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
@@ -494,7 +576,7 @@ const insertVariableAtSavedPosition = (variableName: string, savedPosition: numb
       variableSpan.setAttribute('title', `变量 ${variableName} 不存在`)
     }
     
-    variableSpan.textContent = variableName
+    variableSpan.textContent = getDisplayTextFromInsertName(variableName)
     
     const backgroundStyle = isValid 
       ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
@@ -682,10 +764,6 @@ const getTagEditorContent = (): string => {
 const handleTagInput = () => {
   if (isComposing.value) return
   
-  if (isHandlingBackspace.value) {
-    return
-  }
-  
   const triggerInfo = checkAndSaveVariableTrigger()
   const cursorPos = saveCursorPosition()
   
@@ -1057,16 +1135,10 @@ const handleKeyDown = (event: KeyboardEvent) => {
         }
         
         handleTagInput()
-        return
-      } else {
-        isHandlingBackspace.value = true
-        
-        setTimeout(() => {
-          isHandlingBackspace.value = false
-        }, 50)
-        
         return
       }
+      // 对于普通字符删除，让默认行为发生，不设置任何标志
+      // handleTagInput会通过input事件自动被调用，并会检查触发条件
     }
   }
 }
@@ -1332,7 +1404,7 @@ const autoConvertVariableSyntaxInDOM = (): { hasConversions: boolean, newCursorN
               variableSpan.style.pointerEvents = 'auto'
             }
             
-            variableSpan.textContent = item.name
+            variableSpan.textContent = getDisplayTextFromInsertName(item.name)
             
             const backgroundStyle = isValid 
               ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
@@ -1489,7 +1561,7 @@ const insertVariableAtCursor = (variableName: string, variable: Variable) => {
     variableSpan.setAttribute('title', `变量 ${variableName} 不存在`)
   }
   
-  variableSpan.textContent = variableName
+  variableSpan.textContent = getDisplayTextFromInsertName(variableName)
   
   const backgroundStyle = isValid 
     ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
@@ -1625,7 +1697,6 @@ const dropdownPosition = computed(() => {
 // 防抖控制
 const isToggling = ref(false)
 const isInsertingTriggerChar = ref(false)
-const isHandlingBackspace = ref(false)
 
 // 工具栏事件处理 - 在光标位置插入/字符触发变量选择
 const toggleVariableDropdown = (event?: Event) => {
@@ -1802,15 +1873,18 @@ const fallbackCopyTextToClipboard = (text: string) => {
 
 // 外部调用的插入变量方法
 const insertVariable = (variableName: string, variable: Variable) => {
+  // 使用插入格式而不是传入的variableName
+  const insertName = getVariableInsertName(variable)
+  
   if (displayMode.value === 'tag') {
-    insertVariableAtCursor(variableName, variable)
+    insertVariableAtCursor(insertName, variable)
   } else {
     const cursorPos = textEditorRef.value?.$refs?.textarea?.selectionStart || textContent.value.length
     const before = textContent.value.substring(0, cursorPos)
     const after = textContent.value.substring(cursorPos)
-    textContent.value = before + `{{${variableName}}}` + after
+    textContent.value = before + `{{${insertName}}}` + after
     emit('update:modelValue', textContent.value)
-    emit('variable-inserted', variableName)
+    emit('variable-inserted', insertName)
   }
 }
 
diff --git a/src/components/VariableSelector.vue b/src/components/VariableSelector.vue
index e2b991dd07093e2c6f5e5e664c872c300e713d1f..cad846bc1dd576ee4b67b29cdc346827e5c6ccec 100644
--- a/src/components/VariableSelector.vue
+++ b/src/components/VariableSelector.vue
@@ -10,6 +10,8 @@ interface Variable {
   scope: string
   value: string
   description?: string
+  step?: string  // 节点名称（前置节点变量专用）
+  step_id?: string  // 节点ID（前置节点变量专用）
 }
 
 interface Props {
@@ -20,6 +22,7 @@ interface Props {
   flowId?: string
   conversationId?: string
   showVariableReference?: boolean
+  currentStepId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -61,20 +64,59 @@ const groupedVariables = computed(() => {
     env: envVariables.value,
     user: userVariables.value, 
   }
+  
+  const result: Array<{
+    scope: string
+    nodeId?: string | null
+    nodeName?: string | null
+    variables: Variable[]
+    hasVariables: boolean
+  }> = []
+  
   // 按照supportedScopes的顺序返回分组，确保渲染顺序正确
-  return props.supportedScopes.map(scope => {
+  for (const scope of props.supportedScopes) {
     const variables = groups[scope] || []
+    
+    if (scope === 'conversation') {
+      // 对话变量需要特殊处理，按节点分组
+      const nodeGroups = groupConversationVariablesByNode(variables)
+      
+      for (const nodeGroup of nodeGroups) {
+        const filteredVariables = nodeGroup.variables.filter(variable => 
+          !searchText.value || 
+          variable.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
+          variable.description?.toLowerCase().includes(searchText.value.toLowerCase())
+        )
+        
+        if (filteredVariables.length > 0) {
+          result.push({
+            scope: nodeGroup.scope,
+            nodeId: nodeGroup.nodeId,
+            nodeName: nodeGroup.nodeName,
+            variables: filteredVariables,
+            hasVariables: true
+          })
+        }
+      }
+    } else {
+      // 其他作用域保持原有逻辑
     const filteredVariables = variables.filter(variable => 
       !searchText.value || 
       variable.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
       variable.description?.toLowerCase().includes(searchText.value.toLowerCase())
     )
-    return {
+      
+      if (filteredVariables.length > 0) {
+        result.push({
       scope,
       variables: filteredVariables,
-      hasVariables: filteredVariables.length > 0
+          hasVariables: true
+        })
+      }
     }
-      }).filter(group => group.hasVariables)
+  }
+  
+  return result
 })
 
 const scopeLabels: Record<string, string> = {
@@ -84,6 +126,13 @@ const scopeLabels: Record<string, string> = {
   conversation: '对话变量'
 }
 
+const getScopeLabel = (scope: string, nodeId?: string | null, nodeName?: string | null): string => {
+  if (scope.startsWith('conversation_node_') && nodeName) {
+    return `节点 ${nodeName} 输出`
+  }
+  return scopeLabels[scope] || scope
+}
+
 const typeLabels = {
   string: '字符串',
   number: '数字',
@@ -101,17 +150,65 @@ const typeLabels = {
 }
 
 // 方法
+const groupConversationVariablesByNode = (variables: Variable[]) => {
+  const groups: Record<string, {scope: string, nodeId: string | null, nodeName: string | null, variables: Variable[]}> = {}
+  
+  for (const variable of variables) {
+    if (variable.step_id && variable.scope === 'conversation') {
+      // 前置节点变量（基于step_id字段）
+      const groupKey = `conversation_${variable.step_id}`
+      
+      if (!groups[groupKey]) {
+        groups[groupKey] = {
+          scope: `conversation_node_${variable.step_id}`,
+          nodeId: variable.step_id,
+          nodeName: variable.step || variable.step_id, // 优先使用step名称，降级使用step_id
+          variables: []
+        }
+      }
+      groups[groupKey].variables.push(variable)
+    } else {
+      // 普通对话变量
+      const groupKey = 'conversation_base'
+      if (!groups[groupKey]) {
+        groups[groupKey] = {
+          scope: 'conversation',
+          nodeId: null,
+          nodeName: null,
+          variables: []
+        }
+      }
+      groups[groupKey].variables.push(variable)
+    }
+  }
+  
+  return Object.values(groups)
+}
+
 const loadVariables = async () => {
   loading.value = true
   try {
+    console.log('🔄 VariableSelector开始加载变量，当前参数:', {
+      supportedScopes: props.supportedScopes,
+      flowId: props.flowId,
+      conversationId: props.conversationId,
+      currentStepId: props.currentStepId
+    })
+    
     // 并行加载所有支持的作用域的变量
     const promises = props.supportedScopes.map(scope => {
-      const params = {
+      const params: any = {
         scope,
         flow_id: props.flowId,
         conversation_id: props.conversationId
       }
       
+      // 只有对话变量需要传current_step_id以获取前置节点变量
+      if (scope === 'conversation' && props.currentStepId) {
+        params.current_step_id = props.currentStepId
+        console.log('🎯 对话变量查询带有current_step_id:', props.currentStepId)
+      }
+      
       return listVariables(params).then(response => {
         // 支持多种API响应结构的类型安全处理
         const responseAny = response as any
@@ -128,8 +225,10 @@ const loadVariables = async () => {
           variables = responseAny
         }
         
+        console.log(`📋 ${scope}变量加载结果:`, variables.length, '个')
         return {scope, variables: Array.isArray(variables) ? variables : []}
       }).catch(error => {
+        console.error(`❌ ${scope}变量加载失败:`, error)
         return {scope, variables: []}
       })
     })
@@ -168,12 +267,13 @@ const loadVariables = async () => {
       ...conversationVariables.value
     ]
     
-    console.log('✅ 变量加载完成:', {
+    console.log('✅ VariableSelector变量加载完成:', {
       总数: variables.value.length,
       系统变量: systemVariables.value.length,
       用户变量: userVariables.value.length,
       环境变量: envVariables.value.length,
-      对话变量: conversationVariables.value.length
+      对话变量: conversationVariables.value.length,
+      前置节点变量: conversationVariables.value.filter(v => v.name.includes('.') && !v.name.startsWith('system.')).length
     })
   } catch (error) {
     console.error('❌ 变量加载失败:', error)
@@ -205,6 +305,13 @@ const formatVariableReference = (variable: Variable): string => {
     env: 'env',
     conversation: 'conversation'
   }
+  
+  // 前置节点变量需要使用step_id.name的格式
+  if (variable.step_id && variable.scope === 'conversation') {
+    return `{{${scopeMap[variable.scope]}.${variable.step_id}.${variable.name}}}`
+  }
+  
+  // 普通变量使用原有格式
   return `{{${scopeMap[variable.scope]}.${variable.name}}}`
 }
 
@@ -225,7 +332,7 @@ onMounted(() => {
 })
 
 // 监听属性变化
-watch([() => props.flowId, () => props.conversationId], (newValues, oldValues) => {
+watch([() => props.flowId, () => props.conversationId, () => props.currentStepId], (newValues, oldValues) => {
   loadVariables()
 })
 </script>
@@ -272,7 +379,7 @@ watch([() => props.flowId, () => props.conversationId], (newValues, oldValues) =
             class="variable-group"
           >
             <div class="group-header">
-              <span class="group-title">{{ scopeLabels[group.scope] }}</span>
+              <span class="group-title">{{ getScopeLabel(group.scope, group.nodeId, group.nodeName) }}</span>
               <ElTag size="small" type="info">{{ group.variables.length }}</ElTag>
             </div>
             
diff --git a/src/components/dialoguePanel/DialogueFlow.vue b/src/components/dialoguePanel/DialogueFlow.vue
index e0c6a5d7920ff06e83476ffc6f8663097ce91385..82537dcc14e33ef1e67f4eab892035478c4f51fd 100644
--- a/src/components/dialoguePanel/DialogueFlow.vue
+++ b/src/components/dialoguePanel/DialogueFlow.vue
@@ -12,6 +12,13 @@ const props = withDefaults(
   }>(),
   {},
 );
+
+// 调试方法
+const debugCode = (desc: any, title: string) => {
+  console.log(`🎯 DialogueFlow passing to FlowCode - title: "${title}", code:`, desc);
+  return desc;
+};
+
 const contents = ref();
 const totalTime = ref(0);
 if (props.flowdata) {
@@ -145,7 +152,7 @@ watch(
                     />
                     <div class="loading-icon-box">
                       <el-icon
-                        class="loading-icon"
+                        class="status-icon"
                         v-if="secItem.status === 'success'"
                       >
                         <IconSuccess />
@@ -153,7 +160,7 @@ watch(
                     </div>
                     <div class="loading-icon-box">
                       <el-icon
-                        class="loading-icon"
+                        class="status-icon"
                         v-if="secItem.status === 'error'"
                       >
                         <IconError />
@@ -185,7 +192,7 @@ watch(
                   class="o-collapse-content"
                 >
                   <div class="code-bar">
-                    <FlowCode :code="desc" :title="index" :disabled="true" />
+                    <FlowCode :code="debugCode(desc, String(index))" :title="String(index)" :disabled="true" />
                   </div>
                 </div>
               </el-collapse-item>
@@ -288,6 +295,18 @@ watch(
       height: 14px;
     }
   }
+  .status-icon {
+    width: 21px;
+    height: auto;
+    display: block;
+    margin-right: 8px;
+    /* 确保状态图标不会旋转 */
+    animation: none !important;
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
   .loading-title-icon{
     width: 24px;
     height: 24px;
diff --git a/src/components/dialoguePanel/DialoguePanel.scss b/src/components/dialoguePanel/DialoguePanel.scss
index 2ff42f9a88c857a1a57c70344f0945cf3ab9e13d..40a134111a3edf190e72069caf08e83f09d400e3 100644
--- a/src/components/dialoguePanel/DialoguePanel.scss
+++ b/src/components/dialoguePanel/DialoguePanel.scss
@@ -288,7 +288,6 @@
 
     .loading {
       display: flex;
-      background-color: var(--o-bg-color-base);
       border-radius: 8px !important;
       border-top-left-radius: 0px !important;
       border-radius: 8px !important;
@@ -339,7 +338,6 @@
     }
 
     &-content {
-      background-color: var(--o-bg-color-base);
       padding: 24px 24px 16px 24px;
       border-top-right-radius: 8px;
       overflow-wrap: break-word;
@@ -360,7 +358,6 @@
     }
 
     &-bottom {
-      background-color: var(--o-bg-color-base);
       padding: 0px 24px;
       border-radius: 0 0 8px 8px;
 
diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue
index 0d9e83a8a9d71faed0a1b222c8a73737d9f9f405..31ac2250af975f0c2eae144760d8fa80036f3047 100644
--- a/src/components/dialoguePanel/DialoguePanel.vue
+++ b/src/components/dialoguePanel/DialoguePanel.vue
@@ -53,6 +53,8 @@ export interface DialoguePanelProps {
   modeOptions: any;
   // 是否是工作流调试模式
   isWorkFlowDebug: boolean;
+  // 是否隐藏输入参数（用于对话页面）
+  hideInputParams?: boolean;
 }
 import JsonFormComponent from './JsonFormComponent.vue';
 import { Metadata } from 'src/apis/paths/type';
@@ -540,7 +542,7 @@ const chatWithParams = async () => {
           <JsonFormComponent
             :code="props.inputParams"
             title="参数补充"
-            v-if="props.inputParams"
+            v-if="props.inputParams && !props.isWorkFlowDebug && !props.hideInputParams"
             type="input"
           />
         </div>
diff --git a/src/components/dialoguePanel/FlowCode.vue b/src/components/dialoguePanel/FlowCode.vue
index a04d4128ddd02d0186dd1e160fd3994281bf8db5..5e8cb5bc63be75ba4e9aa7a02e91d14de9798787 100644
--- a/src/components/dialoguePanel/FlowCode.vue
+++ b/src/components/dialoguePanel/FlowCode.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import JSONMonacoEditor from '@/components/JSONMonacoEditor.vue';
 import { storeToRefs } from 'pinia';
 import { useChangeThemeStore, useHistorySessionStore } from '@/store/';
@@ -27,7 +27,37 @@ const props = withDefaults(
   },
 );
 
-const code = ref(JSON.stringify(props.code, null, 2));
+const code = ref('');
+
+// 智能处理不同类型的数据
+const formatCodeData = (data: any) => {
+  console.log('🔧 FlowCode formatCodeData input:', data, 'type:', typeof data);
+  
+  if (data === null || data === undefined) {
+    return '{}';
+  }
+  
+  if (typeof data === 'string') {
+    // 如果是字符串，检查是否是有效的JSON
+    try {
+      const parsed = JSON.parse(data);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      // 如果不是JSON，直接返回字符串
+      return data;
+    }
+  }
+  
+  if (typeof data === 'object') {
+    return JSON.stringify(data, null, 2);
+  }
+  
+  // 其他类型转为字符串
+  return String(data);
+};
+
+// 初始化数据
+code.value = formatCodeData(props.code);
 const monacoEditorRef = ref();
 
 const currentTheme = computed(() => {
@@ -36,6 +66,18 @@ const currentTheme = computed(() => {
 
 const handleReady = (payload: any) => {
   monacoEditorRef.value = payload.editor;
+  console.log('📝 Monaco editor ready, current code:', code.value);
+  
+  // 确保编辑器显示当前内容
+  if (payload.editor && code.value) {
+    setTimeout(() => {
+      if (payload.editor && typeof payload.editor.setValue === 'function') {
+        payload.editor.setValue(code.value);
+        payload.editor.layout && payload.editor.layout();
+        console.log('🔄 Monaco Editor forced update on ready with value:', code.value);
+      }
+    }, 100);
+  }
 };
 
 const handleChange = (value: string) => {
@@ -43,19 +85,85 @@ const handleChange = (value: string) => {
   params.value = value;
 };
 
-const copy = () => {
+// 强制刷新编辑器
+const forceRefresh = () => {
   if (monacoEditorRef.value) {
+    console.log('🔄 Force refreshing Monaco Editor');
+    // 触发布局更新
+    monacoEditorRef.value.layout && monacoEditorRef.value.layout();
+    // 重新设置值
+    const currentValue = code.value;
+    nextTick(() => {
+      if (monacoEditorRef.value && typeof monacoEditorRef.value.setValue === 'function') {
+        monacoEditorRef.value.setValue(currentValue);
+      }
+    });
+  }
+};
+
+const copy = () => {
+  console.log('Copy button clicked, code.value:', code.value);
+  console.log('monacoEditorRef.value:', monacoEditorRef.value);
+  
+  const textToCopy = code.value || JSON.stringify(props.code, null, 2);
+  
+  if (navigator.clipboard) {
     navigator.clipboard
-      .writeText(code.value)
+      .writeText(textToCopy)
       .then(() => {
-        console.log('文本已复制到剪切板');
+        console.log('文本已复制到剪切板:', textToCopy);
+        // 可以在这里添加用户友好的提示
       })
       .catch((err) => {
         console.error('复制文本时出错:', err);
+        // 降级到旧的复制方法
+        fallbackCopy(textToCopy);
       });
+  } else {
+    // 不支持 navigator.clipboard 的浏览器降级方法
+    fallbackCopy(textToCopy);
+  }
+};
+
+const fallbackCopy = (text: string) => {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand('copy');
+    console.log('文本已通过降级方法复制到剪切板');
+  } catch (err) {
+    console.error('降级复制方法也失败了:', err);
   }
+  document.body.removeChild(textArea);
 };
 
+watch(
+  () => props.code,
+  (newCode) => {
+    console.log('🔄 FlowCode props.code changed:', newCode);
+    const formattedCode = formatCodeData(newCode);
+    console.log('📝 FlowCode formatted result:', formattedCode);
+    code.value = formattedCode;
+    
+    // 强制更新 Monaco Editor（如果存在）
+    if (monacoEditorRef.value) {
+      console.log('🔄 Force updating Monaco Editor with new value');
+      // 使用 nextTick 确保更新在下一个 tick 执行
+      nextTick(() => {
+        if (monacoEditorRef.value && typeof monacoEditorRef.value.setValue === 'function') {
+          monacoEditorRef.value.setValue(formattedCode);
+          // 强制刷新布局
+          forceRefresh();
+        }
+      });
+    }
+  },
+  { immediate: true, deep: true }
+);
+
 watch(
   () => code.value,
   () => {
@@ -71,6 +179,11 @@ watch(
       <span v-else-if="props.title === 'output'">{{ $t('flow.output')}}</span>
       <span v-else-if="props.title === 'params'">{{ $t('flow.params')}}</span>
       <span v-else>{{ $t('flow.supplementaryParameters')}} {{ props.title }}</span>
+      <span
+        @click="forceRefresh()"
+        style="cursor: pointer; margin-right: 8px; font-size: 12px; color: #666; padding: 2px 4px; border-radius: 3px; background: #f0f0f0;"
+        title="刷新编辑器"
+      >🔄</span>
       <span
         @click="copy()"
         class="copyIcon"
@@ -78,6 +191,11 @@ watch(
       ></span>
     </div>
     <div class="code-container">
+      <!-- 调试信息：显示当前数据（仅当有内容时显示） -->
+      <div v-if="code && code.trim() !== '{}'" style="background: #e8f5e8; padding: 4px; font-size: 10px; border-bottom: 1px solid #ccc; color: #666;">
+        ✅ 数据: {{ code.length }} 字符
+      </div>
+      
       <JSONMonacoEditor
         v-model="code"
         placeholder="Code goes here..."
diff --git a/src/components/useVariables.ts b/src/components/useVariables.ts
index aaea57f3fd8bab64477b4ac74a0137a6fbfc0769..8f14216d628c94a8a361d54d4c9d2f6a2eec199f 100644
--- a/src/components/useVariables.ts
+++ b/src/components/useVariables.ts
@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { listVariables } from '@/api/variable'
 
 export interface Variable {
@@ -7,18 +7,15 @@ export interface Variable {
   scope: string
   value: string
   description?: string
-}
-
-export interface VariableGroup {
-  scope: string
-  variables: Variable[]
-  hasVariables: boolean
+  step?: string  // 节点名称（前置节点变量专用）
+  step_id?: string  // 节点ID（前置节点变量专用）
 }
 
 export const useVariables = (
-  supportedScopes: string[] = ['conversation', 'system', 'env', 'user'],
+  supportedScopes: string[],
   flowId?: string,
-  conversationId?: string
+  conversationId?: string,
+  currentStepId?: string
 ) => {
   // 响应式数据
   const loading = ref(false)
@@ -29,15 +26,14 @@ export const useVariables = (
   const envVariables = ref<Variable[]>([])
   const conversationVariables = ref<Variable[]>([])
 
-  // 作用域标签映射
+  // 作用域和类型标签映射
   const scopeLabels: Record<string, string> = {
     system: '系统变量',
-    user: '用户变量',
+    user: '用户变量', 
     env: '环境变量',
     conversation: '对话变量'
   }
 
-  // 类型标签映射
   const typeLabels: Record<string, string> = {
     string: '字符串',
     number: '数字',
@@ -45,7 +41,6 @@ export const useVariables = (
     object: '对象',
     secret: '密钥',
     file: '文件',
-    array: '数组',
     'array[any]': '数组',
     'array[string]': '字符串数组',
     'array[number]': '数字数组',
@@ -55,115 +50,204 @@ export const useVariables = (
     'array[secret]': '密钥数组'
   }
 
-  // 工具函数
-  const getVariableDisplayName = (variable: Variable): string => {
-    if (variable.scope === 'system') {
-      const nameMap: Record<string, string> = {
-        'query': 'system.query',
-        'files': 'system.files',
-        'dialogue_count': 'system.dialogue_count',
-        'app_id': 'system.app_id',
-        'flow_id': 'system.flow_id',
-        'user_id': 'system.user_id',
-        'session_id': 'system.session_id',
-        'timestamp': 'system.timestamp'
-      }
-      return nameMap[variable.name] || `system.${variable.name}`
-    }
-    return `${variable.scope}.${variable.name}`
-  }
-
-  const formatVariableReference = (variable: Variable): string => {
-    const scopeMap = {
-      system: 'system',
-      user: 'user',
-      env: 'env',
-      conversation: 'conversation'
-    }
-    return `{{${scopeMap[variable.scope]}.${variable.name}}}`
-  }
-
-  const getVariableTypeDisplay = (type: string): string => {
-    return typeLabels[type] || type
-  }
-
-  const getScopeLabel = (scope: string): string => {
-    return scopeLabels[scope] || scope
-  }
-
   // 计算属性
   const filteredVariables = computed(() => {
     if (!searchText.value) return variables.value
-    return variables.value.filter(variable =>
+    return variables.value.filter(variable => 
       variable.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
       variable.description?.toLowerCase().includes(searchText.value.toLowerCase())
     )
   })
 
-  const groupedVariables = computed((): VariableGroup[] => {
+  const groupedVariables = computed(() => {
     const groups = {
       conversation: conversationVariables.value,
       system: systemVariables.value,
       env: envVariables.value,
-      user: userVariables.value,
+      user: userVariables.value, 
     }
-
-    return supportedScopes.map(scope => {
+    
+    const result: Array<{
+      scope: string
+      nodeId?: string | null
+      nodeName?: string | null
+      variables: Variable[]
+      hasVariables: boolean
+    }> = []
+    
+    // 按照supportedScopes的顺序返回分组，确保渲染顺序正确
+    for (const scope of supportedScopes) {
       const variables = groups[scope] || []
-      const filteredVariables = variables.filter(variable =>
-        !searchText.value ||
-        variable.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
-        variable.description?.toLowerCase().includes(searchText.value.toLowerCase())
-      )
-      return {
-        scope,
-        variables: filteredVariables,
-        hasVariables: filteredVariables.length > 0
+      
+      if (scope === 'conversation') {
+        // 对话变量需要特殊处理，按节点分组
+        const nodeGroups = groupConversationVariablesByNode(variables)
+        
+        for (const nodeGroup of nodeGroups) {
+          const filteredVariables = nodeGroup.variables.filter(variable => 
+            !searchText.value || 
+            variable.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
+            variable.description?.toLowerCase().includes(searchText.value.toLowerCase())
+          )
+          
+          if (filteredVariables.length > 0) {
+            result.push({
+              scope: nodeGroup.scope,
+              nodeId: nodeGroup.nodeId,
+              nodeName: nodeGroup.nodeName,
+              variables: filteredVariables,
+              hasVariables: true
+            })
+          }
+        }
+      } else {
+        // 其他作用域保持原有逻辑
+        const filteredVariables = variables.filter(variable => 
+          !searchText.value || 
+          variable.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
+          variable.description?.toLowerCase().includes(searchText.value.toLowerCase())
+        )
+        
+        if (filteredVariables.length > 0) {
+          result.push({
+            scope,
+            variables: filteredVariables,
+            hasVariables: true
+          })
+        }
       }
-    }).filter(group => group.hasVariables)
+    }
+    
+    return result
   })
 
-  // 变量加载方法
+  // 方法
+  const groupConversationVariablesByNode = (variables: Variable[]) => {
+    const groups: Record<string, {scope: string, nodeId: string | null, nodeName: string | null, variables: Variable[]}> = {}
+    
+    for (const variable of variables) {
+      if (variable.step_id && variable.scope === 'conversation') {
+        // 前置节点变量（基于step_id字段）
+        const groupKey = `conversation_${variable.step_id}`
+        
+        if (!groups[groupKey]) {
+          groups[groupKey] = {
+            scope: `conversation_node_${variable.step_id}`,
+            nodeId: variable.step_id,
+            nodeName: variable.step || variable.step_id, // 优先使用step名称，降级使用step_id
+            variables: []
+          }
+        }
+        groups[groupKey].variables.push(variable)
+      } else {
+        // 普通对话变量
+        const groupKey = 'conversation_base'
+        if (!groups[groupKey]) {
+          groups[groupKey] = {
+            scope: 'conversation',
+            nodeId: null,
+            nodeName: null,
+            variables: []
+          }
+        }
+        groups[groupKey].variables.push(variable)
+      }
+    }
+    
+    return Object.values(groups)
+  }
+
+  const getScopeLabel = (scope: string, nodeId?: string | null, nodeName?: string | null): string => {
+    if (scope.startsWith('conversation_node_') && nodeName) {
+      return `节点 ${nodeName} 输出`
+    }
+    return scopeLabels[scope] || scope
+  }
+
+  const getVariableDisplayName = (variable: Variable): string => {
+    return variable.name
+  }
+
+  const getVariableTypeDisplay = (varType: string): string => {
+    return typeLabels[varType] || varType
+  }
+
+  const formatVariableReference = (variable: Variable): string => {
+    const scopeMap = {
+      system: 'system',
+      user: 'user', 
+      env: 'env',
+      conversation: 'conversation'
+    }
+    
+    // 前置节点变量需要使用step_id.name的格式
+    if (variable.step_id && variable.scope === 'conversation') {
+      return `{{${scopeMap[variable.scope]}.${variable.step_id}.${variable.name}}}`
+    }
+    
+    // 普通变量使用原有格式
+    return `{{${scopeMap[variable.scope]}.${variable.name}}}`
+  }
+
   const loadVariables = async () => {
     loading.value = true
     try {
+      console.log('🔄 useVariables开始加载变量，当前参数:', {
+        supportedScopes,
+        flowId,
+        conversationId,
+        currentStepId
+      })
+      
+      // 并行加载所有支持的作用域的变量
       const promises = supportedScopes.map(scope => {
-        const params = {
+        const params: any = {
           scope,
           flow_id: flowId,
           conversation_id: conversationId
         }
-
+        
+        // 只有对话变量需要传current_step_id以获取前置节点变量
+        if (scope === 'conversation' && currentStepId) {
+          params.current_step_id = currentStepId
+          console.log('🎯 对话变量查询带有current_step_id:', currentStepId)
+        }
+        
         return listVariables(params).then(response => {
+          // 支持多种API响应结构的类型安全处理
           const responseAny = response as any
           let variables: Variable[] = []
-
+          
           if (responseAny?.result?.variables) {
+            // 结构1: { result: { variables: [...] } }
             variables = responseAny.result.variables
           } else if (responseAny?.variables) {
+            // 结构2: { variables: [...], total: 8 }
             variables = responseAny.variables
           } else if (Array.isArray(responseAny)) {
+            // 结构3: 直接返回数组
             variables = responseAny
           }
-
-          return { scope, variables: Array.isArray(variables) ? variables : [] }
+          
+          console.log(`📋 ${scope}变量加载结果:`, variables.length, '个')
+          return {scope, variables: Array.isArray(variables) ? variables : []}
         }).catch(error => {
-          console.error(`加载${scope}变量失败:`, error)
-          return { scope, variables: [] }
+          console.error(`❌ ${scope}变量加载失败:`, error)
+          return {scope, variables: []}
         })
       })
-
+      
       const results = await Promise.all(promises)
-
+      
       // 清空现有变量
       systemVariables.value = []
       userVariables.value = []
       envVariables.value = []
       conversationVariables.value = []
-
+      
       // 分组存储变量
-      results.forEach(({ scope, variables: vars }) => {
-        switch (scope) {
+      results.forEach(({scope, variables: vars}) => {
+        switch(scope) {
           case 'system':
             systemVariables.value = vars
             break
@@ -178,17 +262,25 @@ export const useVariables = (
             break
         }
       })
-
+      
       // 合并所有变量
       variables.value = [
         ...systemVariables.value,
-        ...userVariables.value,
+        ...userVariables.value, 
         ...envVariables.value,
         ...conversationVariables.value
       ]
-
+      
+      console.log('✅ useVariables变量加载完成:', {
+        总数: variables.value.length,
+        系统变量: systemVariables.value.length,
+        用户变量: userVariables.value.length,
+        环境变量: envVariables.value.length,
+        对话变量: conversationVariables.value.length,
+        前置节点变量: conversationVariables.value.filter(v => v.name.includes('.') && !v.name.startsWith('system.')).length
+      })
     } catch (error) {
-      console.error('❌ 变量加载失败:', error)
+      console.error('❌ useVariables变量加载失败:', error)
     } finally {
       loading.value = false
     }
@@ -208,17 +300,11 @@ export const useVariables = (
     filteredVariables,
     groupedVariables,
     
-    // 工具函数
+    // 方法
+    loadVariables,
+    getScopeLabel,
     getVariableDisplayName,
-    formatVariableReference,
     getVariableTypeDisplay,
-    getScopeLabel,
-    
-    // 常量
-    scopeLabels,
-    typeLabels,
-    
-    // 方法
-    loadVariables
+    formatVariableReference
   }
 } 
\ No newline at end of file
diff --git a/src/store/conversation.ts b/src/store/conversation.ts
index 4dcfa1217a4787e5df2e5a66b11c2ef3fac2b404..8b733958824400a68473a5d1411aa18bd398f5ad 100644
--- a/src/store/conversation.ts
+++ b/src/store/conversation.ts
@@ -769,11 +769,16 @@ export const useSessionStore = defineStore('conversation', () => {
    */
   const stopDebug = async (): Promise<void> => {
     isPaused.value = true;
-    (
-      conversationList.value[
-        conversationList.value.length - 1
-      ] as RobotConversationItem
-    ).isFinish = true;
+    
+    // 安全检查：确保 conversationList 不为空
+    if (conversationList.value.length > 0) {
+      (
+        conversationList.value[
+          conversationList.value.length - 1
+        ] as RobotConversationItem
+      ).isFinish = true;
+    }
+    
     cancel();
     const resp = await api.stopGeneration();
     if (resp?.[1]?.code === 200) {
diff --git a/src/views/createapp/components/DebugApp.vue b/src/views/createapp/components/DebugApp.vue
index 80e3895b45fbd18e00e799fad7771bab4ffb8f8b..fc3dcfca16fa31d47bdce6eda0f16bbd765cbb40 100644
--- a/src/views/createapp/components/DebugApp.vue
+++ b/src/views/createapp/components/DebugApp.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import CommonFooter from '@/components/commonFooter/CommonFooter.vue';
 import Bubble from '@/components/bubble/index.vue';
+import DialogueFlow from '@/components/dialoguePanel/DialogueFlow.vue';
 import {
   useHistorySessionStore,
   useLangStore,
@@ -21,6 +22,7 @@ import { useScrollBottom } from '@/hooks/useScrollBottom';
 import dayjs from 'dayjs';
 import { useRoute } from 'vue-router';
 
+
 let isDebugSuccess = false;
 
 interface DebugConfig {
@@ -39,6 +41,8 @@ interface DebugConfig {
   model?: string;
 }
 
+
+
 const props = defineProps<{
   visible: boolean;
   config: DebugConfig;
@@ -58,6 +62,8 @@ const { currentSelectedSession, historySession } = storeToRefs(
 
 const { generateSession, getHistorySession } = useHistorySessionStore();
 
+
+
 async function initDebugSession() {
   const { conversationList } = useSessionStore();
   if (conversationList.length === 0) return;
@@ -211,9 +217,17 @@ function useConversations() {
     answerIndex: number;
     role: 'user' | 'assistant';
     createdAt?: Date | number;
+    flowdata?: {
+      id: string;
+      title: string;
+      status: string;
+      display: boolean;
+      data: any[][];
+      progress?: string;
+    };
   }
 
-  type StreamEvent = 'text.add' | 'init' | 'input';
+  type StreamEvent = 'text.add' | 'init' | 'input' | 'flow.start' | 'step.input' | 'step.output' | 'flow.stop';
   interface StreamMetadata {
     inputTokens: number;
 
@@ -223,15 +237,19 @@ function useConversations() {
   }
 
   interface StreamChunk {
-    content: {
-      text: string;
-    };
+    content: any;
     conversationId: string;
     event: StreamEvent;
     groupId: string;
     id: string;
     metadata: StreamMetadata;
     taskId: string;
+    flow?: {
+      stepId: string;
+      stepName: string;
+      stepStatus: string;
+      stepProgress: string;
+    };
   }
 
   const conversations = ref<Conversation[]>([]);
@@ -241,7 +259,21 @@ function useConversations() {
     question: string,
     conversation?: Conversation,
   ) => {
-    const { id, event, content, metadata } = JSON.parse(data) as StreamChunk;
+    // 记录原始数据
+    console.log('🔍 Raw message data:', data);
+    
+    const parsedData = JSON.parse(data) as StreamChunk;
+    const { id, event, content, metadata, flow } = parsedData;
+    
+    // 详细记录解析后的数据
+    console.log('📋 Parsed message:', {
+      id,
+      event,
+      content,
+      metadata,
+      flow,
+      fullObject: parsedData
+    });
 
     if (event === 'init') {
       if (conversation) {
@@ -263,6 +295,7 @@ function useConversations() {
         });
       }
     }
+    
     if (event === 'text.add') {
       if (!isDebugSuccess) {
         isDebugSuccess = true;
@@ -272,14 +305,134 @@ function useConversations() {
       c.answer[c.answerIndex].content += content.text;
       c.answer[c.answerIndex].metadata = metadata;
     }
+    
+    // 处理工作流事件
+    if (event === 'flow.start') {
+      console.log('🚀 Flow Start Event:', { event, flow, content });
+      const c = conversations.value[conversations.value.length - 1];
+      if (c && flow) {
+        c.flowdata = {
+          id: flow.stepId || '',
+          title: '工作流执行',
+          status: 'running',
+          display: true,
+          data: [[]],
+          progress: flow.stepProgress || '',
+        };
+        console.log('✅ Flow data initialized:', c.flowdata);
+      }
+    }
+    
+    if (event === 'step.input') {
+      console.log('📥 Step Input Event - Detailed Analysis:');
+      console.log('  ├─ Event:', event);
+      console.log('  ├─ Flow object:', flow);
+      console.log('  ├─ Content type:', typeof content);
+      console.log('  ├─ Content value:', content);
+      console.log('  ├─ Content JSON:', JSON.stringify(content, null, 2));
+      console.log('  └─ Metadata:', metadata);
+      
+      const c = conversations.value[conversations.value.length - 1];
+      console.log('📝 Current conversation:', c);
+      console.log('📊 Current flowdata:', c?.flowdata);
+      
+      if (c && c.flowdata && flow) {
+        const stepData = {
+          id: flow.stepId,
+          title: flow.stepName,
+          status: flow.stepStatus,
+          data: {
+            input: content,
+          },
+        };
+        
+        console.log('➕ Adding step data:', stepData);
+        c.flowdata.data[0].push(stepData);
+        c.flowdata.progress = flow.stepProgress;
+        c.flowdata.status = flow.stepStatus;
+        
+        console.log('✅ Updated flowdata after step.input:', JSON.stringify(c.flowdata, null, 2));
+      } else {
+        console.log('❌ Step input failed - missing data:', {
+          hasConversation: !!c,
+          hasFlowdata: !!c?.flowdata,
+          hasFlow: !!flow
+        });
+      }
+    }
+    
+    if (event === 'step.output') {
+      console.log('📤 Step Output Event - Detailed Analysis:');
+      console.log('  ├─ Event:', event);
+      console.log('  ├─ Flow object:', flow);
+      console.log('  ├─ Content type:', typeof content);
+      console.log('  ├─ Content value:', content);
+      console.log('  ├─ Content JSON:', JSON.stringify(content, null, 2));
+      console.log('  └─ Metadata:', metadata);
+      
+      const c = conversations.value[conversations.value.length - 1];
+      console.log('📝 Current conversation:', c);
+      console.log('📊 Current flowdata:', c?.flowdata);
+      
+      if (c && c.flowdata && flow) {
+        console.log('🔍 Looking for step with ID:', flow.stepId);
+        console.log('📋 Available steps:', c.flowdata.data[0].map(step => ({ id: step.id, title: step.title })));
+        
+        const target = c.flowdata.data[0].find((item) => item.id === flow.stepId);
+        
+        if (target) {
+          console.log('🎯 Found target step:', target);
+          
+          // 添加输出数据，与 conversation.ts 保持一致
+          target.data.output = content;
+          target.status = flow.stepStatus;
+          target.costTime = metadata?.timeCost;
+          
+          if (flow.stepStatus === 'error') {
+            c.flowdata.status = flow.stepStatus;
+          }
+          
+          console.log('✅ Updated target after step.output:', JSON.stringify(target, null, 2));
+          console.log('🏁 Final flowdata state:', JSON.stringify(c.flowdata, null, 2));
+        } else {
+          console.log('❌ Step output failed - target not found:');
+          console.log('  ├─ Looking for stepId:', flow.stepId);
+          console.log('  ├─ Available stepIds:', c.flowdata.data[0].map(item => item.id));
+          console.log('  └─ All steps:', c.flowdata.data[0]);
+        }
+      } else {
+        console.log('❌ Step output failed - missing data:', {
+          hasConversation: !!c,
+          hasFlowdata: !!c?.flowdata,
+          hasFlow: !!flow
+        });
+      }
+    }
+    
+    if (event === 'flow.stop') {
+      console.log('🏁 Flow Stop Event:', { event, flow, content });
+      const c = conversations.value[conversations.value.length - 1];
+      if (c && c.flowdata && flow) {
+        c.flowdata.status = flow.stepStatus || 'success';
+        c.flowdata.title = '工作流执行完成';
+        console.log('✅ Flow completed, final state:', c.flowdata);
+      }
+    }
+    
+    // 记录所有事件类型以便调试
+    if (!['init', 'text.add', 'flow.start', 'step.input', 'step.output', 'flow.stop', 'heartbeat'].includes(event)) {
+      console.log('🔔 Unhandled event type:', event, 'Full data:', parsedData);
+    }
+    
     scrollToBottom();
   };
 
   return { conversations, setConversations };
 }
 
-function onSend(q: string) {
+async function onSend(q: string) {
   if (isStreaming.value) return;
+  
   conversations.value.push({
     id: `user-${(conversations.value.length % 2) + 1}`,
     question: q,
@@ -288,7 +441,9 @@ function onSend(q: string) {
     role: 'user',
   });
   scrollToBottom(true);
-  queryStream(q, currentSelectedSession.value, language.value as 'zh' | 'en');
+  
+  const conversationId = currentSelectedSession.value;
+  queryStream(q, conversationId, language.value as 'zh' | 'en');
   dialogueInput.value = '';
 }
 
@@ -296,11 +451,11 @@ function onSend(q: string) {
  * 处理鼠标事件
  * @param event
  */
-const handleKeydown = (event: KeyboardEvent) => {
+const handleKeydown = async (event: KeyboardEvent) => {
   if (event.key === 'Enter' && !event.shiftKey) {
     event.preventDefault();
     if (dialogueInput.value !== '') {
-      onSend(dialogueInput.value);
+      await onSend(dialogueInput.value);
     }
   }
 };
@@ -333,12 +488,15 @@ const bubbleStyles = computed(() => (role: 'user' | 'assistant') => {
 
 watch(
   () => props.visible,
-  () => {
-    if (!props.visible) {
+  (newVisible, oldVisible) => {
+    if (!newVisible) {
       deleteSession(currentSelectedSession.value);
       return;
     }
-    initDebugSession();
+    
+    if (newVisible && !oldVisible) {
+      initDebugSession();
+    }
   },
 );
 </script>
@@ -371,6 +529,8 @@ watch(
               />
             </div>
           </div>
+          
+
         </div>
 
         <div class="chat-container" ref="chatContainerRef">
@@ -401,7 +561,7 @@ watch(
           <Bubble
             v-else
             v-for="(
-              { id, role, question, answer, answerIndex, createdAt }, idx
+              { id, role, question, answer, answerIndex, createdAt, flowdata }, idx
             ) in conversations"
             :key="id"
             :avatar="role === 'user' ? userAvatar : (config.icon?config.icon:robotAvatar)"
@@ -431,6 +591,13 @@ watch(
               "
               #footer
             >
+              <!-- 工作流显示 -->
+              <div v-if="flowdata" class="workflow-container">
+                <DialogueFlow 
+                  :flowdata="flowdata" 
+                  :isWorkFlowDebug="true"
+                />
+              </div>
               <div class="bubble-footer">
                 <div class="action-toolbar">
                   <div class="left">
@@ -526,7 +693,7 @@ watch(
                 v-else
                 :src="isStreaming ? SendDisabledIcon : SendEnableIcon"
                 alt=""
-                @click="onSend(dialogueInput)"
+                @click="async () => await onSend(dialogueInput)"
               />
             </div>
           </div>
@@ -615,6 +782,8 @@ watch(
           }
         }
       }
+
+
     }
 
     .chat-container {
@@ -801,6 +970,12 @@ watch(
     height: 24px;
     border-radius: 4px;
   }
+
+  .workflow-container {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--o-border-color-light);
+  }
 }
 </style>
 <style>
diff --git a/src/views/createapp/components/codeMirror/nodeMirrorText.vue b/src/views/createapp/components/codeMirror/nodeMirrorText.vue
index 9c6cd1084229bc3303a1347e5338c3df908b928d..838a994fcc0d56249826767cb34c495c499c224e 100644
--- a/src/views/createapp/components/codeMirror/nodeMirrorText.vue
+++ b/src/views/createapp/components/codeMirror/nodeMirrorText.vue
@@ -13,7 +13,7 @@
     >
       <template #title>
         <span class="icon" :class="`${resultInfo.status}Icon`"></span>
-        <span>{{ $t(`flow.${resultInfo.title}`) }}</span>
+        <span>{{ t(`flow.${resultInfo.title}`) }}</span>
         <!-- 这里接口返回的需要限制最大位数 -->
         <span
           class="time"
@@ -22,7 +22,7 @@
         >
           {{ resultInfo.time }}
         </span>
-        <span class="flexRight">{{ $t('flow.result') }}</span>
+        <span class="flexRight">{{ t('flow.result') }}</span>
         <el-icon class="el-collapse-item__arrow">
           <IconChevronDown></IconChevronDown>
         </el-icon>
@@ -33,33 +33,50 @@
         class="o-collapse-content"
       >
         <div class="itemTitle">
-          <div class="subName">{{ $t(`flow.${subItem.name}`) }}</div>
+          <div class="subName">{{ t(`flow.${subItem.name}`) }}</div>
           <div
             class="copyIcon"
             :class="themeStore.theme === 'light' ? 'lightCopy' : 'darkCopy'"
             @click="handleCopy(subItem.code)"
           ></div>
         </div>
-        <MirrorText
-          ref="textarea"
-          :class="{ outputMirror: idx === 1 }"
-          :yamlCode="yaml.dump(subItem.code)"
-          :disabled="true"
-        ></MirrorText>
+        <div class="monaco-container" :class="{ outputMirror: idx === 1 }">
+          <JSONMonacoEditor
+            :ref="(el) => setEditorRef(el, `${item.id}-${idx}`)"
+            v-model="editorContents[`${item.id}-${idx}`]"
+            :style="CODE_STYLE"
+            :autofocus="false"
+            :theme="currentTheme"
+            :disabled="true"
+            @ready="(payload) => handleReady(payload, `${item.id}-${idx}`, subItem.code)"
+            @change="(value) => handleChange(value, subItem, idx)"
+          />
+        </div>
       </div>
     </el-collapse-item>
   </el-collapse>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { IconChevronDown } from '@computing/opendesign-icons';
-import MirrorText from '../codeMirror/mirrorTextArea.vue';
+import JSONMonacoEditor from '@/components/JSONMonacoEditor.vue';
 import { useChangeThemeStore } from '@/store';
 import yaml from 'js-yaml';
-import { writeText } from 'src/utils';
+
 import { errorMsg, successMsg } from 'src/components/Message';
 import { StatusInfoTitle } from '../types';
+import { useI18n } from 'vue-i18n';
+
+const CODE_STYLE = {
+  width: '100%',
+  height: '160px',
+  maxHeight: '160px',
+  overflowY: 'auto',
+  fontSize: '14px',
+  lineHeight: '16px',
+};
+
 const props = defineProps({
   status: {
     default: 'default',
@@ -69,8 +86,122 @@ const props = defineProps({
   },
   inputAndOutput: Object,
 });
+
 const themeStore = useChangeThemeStore();
+const { t } = useI18n();
 const nodeResult = ref();
+
+// Monaco Editor 引用管理
+const monacoEditorRefs = ref(new Map());
+const editorContents = ref({});
+
+const currentTheme = computed(() => {
+  return themeStore.theme === 'dark' ? 'dark' : 'light';
+});
+
+// 智能处理不同类型的数据
+const formatCodeData = (data: any) => {
+  if (data === null || data === undefined) {
+    return '';
+  }
+  
+  if (typeof data === 'string') {
+    // 如果是字符串，检查是否是有效的JSON
+    try {
+      const parsed = JSON.parse(data);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      // 如果不是JSON，尝试用YAML格式化
+      try {
+        return yaml.dump(data, { indent: 2, lineWidth: -1 });
+      } catch {
+        return data;
+      }
+    }
+  }
+  
+  if (typeof data === 'object') {
+    try {
+      // 尝试JSON格式化
+      return JSON.stringify(data, null, 2);
+    } catch {
+      // 如果JSON格式化失败，尝试YAML
+      try {
+        return yaml.dump(data, { indent: 2, lineWidth: -1 });
+      } catch {
+        return String(data);
+      }
+    }
+  }
+  
+  // 其他类型转为字符串
+  return String(data);
+};
+
+// 初始化编辑器内容（为默认数据设置初始值）
+const initializeEditorContents = () => {
+  resultInfo.value.infoList.forEach((item) => {
+    item.desc.forEach((subItem, idx) => {
+      const key = `${item.id}-${idx}`;
+      editorContents.value[key] = formatCodeData(subItem.code);
+    });
+  });
+};
+
+// 设置编辑器引用
+const setEditorRef = (el: any, key: string) => {
+  if (el) {
+    monacoEditorRefs.value.set(key, el);
+  }
+};
+
+// 编辑器准备就绪回调
+const handleReady = (payload: any, editorKey: string, code?: any) => {
+  if (payload && payload.editor) {
+    console.log(`📝 Monaco editor ready for ${editorKey}`);
+    
+    // 设置初始内容
+    if (code !== undefined) {
+      const formattedCode = formatCodeData(code);
+      editorContents.value[editorKey] = formattedCode;
+    }
+    
+    // 延迟设置值以确保编辑器完全初始化
+    setTimeout(() => {
+      if (payload.editor && typeof payload.editor.setValue === 'function') {
+        const editor = monacoEditorRefs.value.get(editorKey);
+        if (editor) {
+          payload.editor.layout && payload.editor.layout();
+        }
+      }
+    }, 100);
+  }
+};
+
+// 处理编辑器内容变化（只读模式下基本不会触发）
+const handleChange = (value: string, subItem: any, idx: number) => {
+  // 由于是只读模式，这里基本不会执行
+  console.log(`Content changed for ${subItem.name}:`, value);
+};
+
+// 强制刷新编辑器
+const forceRefreshEditor = (editorKey: string) => {
+  const editor = monacoEditorRefs.value.get(editorKey);
+  if (editor && editor.$refs && editor.$refs.editor) {
+    console.log(`🔄 Force refreshing Monaco Editor: ${editorKey}`);
+    const monacoInstance = editor.$refs.editor;
+    // 触发布局更新
+    monacoInstance.layout && monacoInstance.layout();
+  }
+};
+
+// 强制刷新所有编辑器
+const forceRefreshAllEditors = () => {
+  monacoEditorRefs.value.forEach((editor, key) => {
+    forceRefreshEditor(key);
+  });
+};
+
 const resultInfo = ref({
   time: '3.1s',
   status: '', // 成功/失败/运行中三种状态
@@ -93,6 +224,9 @@ const resultInfo = ref({
   ],
 });
 
+// 初始化编辑器内容
+initializeEditorContents();
+
 watch(
   () => props,
   () => {
@@ -106,12 +240,25 @@ watch(
         props.inputAndOutput.input_parameters;
       resultInfo.value.infoList[0].desc[1].code =
         props.inputAndOutput.output_parameters;
+      
+      // 更新编辑器内容
+      const inputKey = '1-0';
+      const outputKey = '1-1';
+      editorContents.value[inputKey] = formatCodeData(props.inputAndOutput.input_parameters);
+      editorContents.value[outputKey] = formatCodeData(props.inputAndOutput.output_parameters);
     }
     if (props.status === 'success' || props.status === 'error') {
       resultInfo.value.time = props.costTime;
     } else {
       resultInfo.value.time = '';
     }
+    
+    // 数据更新后延迟刷新所有编辑器
+    nextTick(() => {
+      setTimeout(() => {
+        forceRefreshAllEditors();
+      }, 200);
+    });
   },
   { deep: true, immediate: true },
 );
@@ -120,11 +267,68 @@ watch(
 const handleCopy = (code) => {
   // 判断是否有值
   if (!code) {
-    errorMsg($t('feedback.noCopyMessage'));
+    errorMsg(t('feedback.noCopyMessage'));
     return;
   }
-  writeText(yaml.dump(code));
-  successMsg($t('feedback.copied_successfully'));
+  
+  try {
+    // 优先使用格式化后的内容
+    const formattedCode = formatCodeData(code);
+    
+    // 使用现代clipboard API或降级方法
+    if (navigator.clipboard) {
+      navigator.clipboard
+        .writeText(formattedCode)
+        .then(() => {
+          successMsg(t('feedback.copied_successfully'));
+        })
+        .catch((err) => {
+          console.error('复制文本时出错:', err);
+          fallbackCopy(formattedCode);
+        });
+    } else {
+      fallbackCopy(formattedCode);
+    }
+  } catch (error) {
+    console.error('复制时出错:', error);
+    // 降级使用原始内容
+    try {
+      const fallbackContent = typeof code === 'string' ? code : yaml.dump(code);
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(fallbackContent).then(() => {
+          successMsg(t('feedback.copied_successfully'));
+        }).catch(() => {
+          fallbackCopy(fallbackContent);
+        });
+      } else {
+        fallbackCopy(fallbackContent);
+      }
+    } catch (fallbackError) {
+      console.error('降级复制也失败:', fallbackError);
+      errorMsg(t('feedback.noCopyMessage'));
+    }
+  }
+};
+
+// 降级复制方法
+const fallbackCopy = (text: string) => {
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+  textArea.style.position = 'fixed';
+  textArea.style.left = '-999999px';
+  textArea.style.top = '-999999px';
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand('copy');
+    successMsg(t('feedback.copied_successfully'));
+  } catch (err) {
+    console.error('降级复制方法也失败了:', err);
+    errorMsg(t('feedback.noCopyMessage'));
+  } finally {
+    document.body.removeChild(textArea);
+  }
 };
 </script>
 <style lang="scss">
@@ -196,6 +400,7 @@ const handleCopy = (code) => {
       }
       .copyIcon {
         width: 16px;
+        cursor: pointer;
       }
       .lightCopy {
         background: url(@/assets/svgs/light_copy.svg) center center no-repeat;
@@ -207,15 +412,34 @@ const handleCopy = (code) => {
     .o-collapse-content {
       padding-left: 0px;
       margin-bottom: 8px;
-      .cm-editor {
+      
+      .monaco-container {
+        height: 160px;
         max-height: 160px;
-        overflow-y: auto;
-        .cm-gutterElement {
-          span[title='Fold line'] {
-            display: none;
+        overflow: hidden;
+        border: 1px solid var(--o-time-text);
+        border-radius: 4px;
+        
+        // 确保Monaco Editor容器样式
+        :deep(.monaco-editor-container) {
+          height: 160px !important;
+          
+          .monaco-editor {
+            height: 160px !important;
+          }
+        }
+        
+        // 兼容JSON Monaco Editor的样式
+        :deep(.json-monaco-editor) {
+          height: 160px !important;
+          
+          .editor-container {
+            height: 160px !important;
+            border: none;
           }
         }
       }
+      
       &:last-child {
         margin-bottom: 0px;
       }
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index ad34b8d8fe7013f502af47d296ed754a1d8678c0..83699ea7729c7e6469ed737b86734d4d46bb89cf 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -7,6 +7,7 @@ import { VueFlow, useVueFlow } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
 import BranchNode from './workFlowConfig/BranchNode.vue';
+import ChoiceBranchNode from './workFlowConfig/ChoiceBranchNode.vue';
 import CustomEdge from './workFlowConfig/CustomEdge.vue';
 import CustomNode from './workFlowConfig/CustomNode.vue';
 import CustomControl from './CustomControl.vue';
@@ -23,10 +24,13 @@ import {
   IconCaretDown,
   IconPlusCircle,
 } from '@computing/opendesign-icons';
+
 import EditYamlDrawer from './workFlowConfig/yamlEditDrawer.vue';
 import VariableBasedStartNodeDrawer from './workFlowConfig/VariableBasedStartNodeDrawer.vue';
 import CodeNodeDrawer from './workFlowConfig/CodeNodeDrawer.vue';
 import DirectReplyDrawer from './workFlowConfig/DirectReplyDrawer.vue';
+import ChoiceBranchDrawer from './workFlowConfig/ChoiceBranchDrawer.vue';
+import InsertNodeMenu from './workFlowConfig/insertNodeMenu.vue';
 import { api } from 'src/apis';
 // 导入变量API
 import { listVariables } from '@/api/variable';
@@ -36,13 +40,13 @@ import { getSrcIcon, DefaultViewPortZoom } from './types';
 import $bus from 'src/bus/index';
 import CustomLoading from '../../customLoading/index.vue';
 import EditFlowName from './workFlowConfig/editFlowName.vue';
+import NodeListPanel from './workFlowConfig/NodeListPanel.vue';
+import EnvironmentVariableDrawer from './workFlowConfig/EnvironmentVariableDrawer.vue';
 
 const { t } = useI18n();
 const copilotAside = ref<HTMLElement>();
-const isCopilotAsideVisible = ref(true);
-const apiSearchValue = ref();
-const activeNames = ref([]);
-const activeName = ref();
+const isCopilotAsideVisible = ref(false);
+
 const workFlowItemName = ref();
 const isAddWorkFlow = ref(false);
 const isEditFlowName = ref(false);
@@ -53,10 +57,13 @@ const isEditYaml = ref(false);
 const isEditStartNode = ref(false);
 const isEditCodeNode = ref(false);
 const isEditDirectReplyNode = ref(false);
+const isEditChoiceBranchNode = ref(false);
+const isEditEnvironmentVariables = ref(false);
 const nodeName = ref('');
 const nodeDesc = ref('');
 const currentCodeNodeData = ref({});
 const currentDirectReplyNodeData = ref({});
+const currentChoiceBranchNodeData = ref({});
 const flowZoom = ref(1);
 const debugDialogVisible = ref(false);
 const apiServiceList = ref([]);
@@ -65,10 +72,10 @@ const yamlContent = ref();
 const nodeYamlId = ref();
 const emits = defineEmits(['updateFlowsDebug']);
 const route = useRoute();
-const workFlowList = ref([]);
+const workFlowList = ref<any[]>([]);
 const props = defineProps(['flowList']);
-const flowObj = ref({});
-const nodes = ref([]);
+const flowObj = ref<{flowId?: string, debug?: boolean, name?: string, nodes?: any[], edges?: any[]}>({});
+const nodes = ref<any[]>([]);
 const debugStatus = ref('');
 const debugTime = ref('');
 const totalTime = ref(0);
@@ -82,10 +89,17 @@ const updateFlowsDebugStatus = ref(false);
 // 添加选中节点状态管理
 const selectedNodeId = ref('');
 
-// 变量相关状态管理
-const variablesCache = ref(new Map());
+// 对话变量缓存 - 仅用于开始节点展示
+const conversationVariablesForDisplay = ref<any[]>([]);
 const variablesLoading = ref(false);
-const conversationId = ref(''); // 从路由或props获取
+
+// 插入节点相关状态
+const insertMenuData = ref({
+  visible: false,
+  position: { x: 0, y: 0 },
+  edgeInfo: null,
+  direction: 'right' as 'left' | 'right'
+});
 
 const hanleAsideVisible = () => {
   if (!copilotAside.value) return;
@@ -152,9 +166,7 @@ onConnect((e) => {
     type: 'normal',
   });
 });
-const handleChange = () => {
-  activeNames.value = activeName.value;
-};
+
 
 // 打开新增工作流弹窗
 const addWorkFlow = () => {
@@ -165,10 +177,13 @@ const addWorkFlow = () => {
 // 关闭工作流弹出
 const handleClose = (flowId?: string) => {
   if (isEditFlowName.value) {
-    api.querySingleAppData({ id: route.query.appId }).then((res) => {
+    api.querySingleAppData({ id: route.query.appId as string }).then((res) => {
       //workflowList 数据更新
       workFlowList.value = res[1]?.result.workflows;
-      choiceFlowId(workFlowList.value.find((item) => item.id === flowId));
+      const foundFlow = workFlowList.value.find((item: any) => item.id === flowId);
+      if (foundFlow) {
+        choiceFlowId(foundFlow);
+      }
     });
   }
   isEditFlowName.value = false;
@@ -182,35 +197,16 @@ const delNode = (id) => {
   }
 };
 
-// 注意：变量管理通过variable接口直接处理，不需要附加到工作流节点中
-
-// 获取对话变量用于显示 - 使用computed确保响应式更新
-const conversationVariablesForDisplay = computed(() => {
-  const conversationVars = variablesCache.value.get('conversation') || [];
-  console.log('🎯 获取对话变量用于显示 (computed) - 重新计算触发!');
-  console.log('🎯 当前变量数据:', conversationVars);
-  console.log('🎯 变量数量:', conversationVars.length);
-  console.log('🎯 变量名列表:', conversationVars.map(v => v?.name || 'unnamed'));
-  console.log('🎯 缓存Map引用:', variablesCache.value);
-  console.log('🎯 conversation键是否存在:', variablesCache.value.has('conversation'));
-  return conversationVars;
-});
-
-// 处理变量更新事件
-const handleVariablesUpdated = async () => {
-  console.log('🔄 收到变量更新通知，延迟300ms后重新加载变量数据...');
-  console.log('🔄 删除前缓存的对话变量:', variablesCache.value.get('conversation'));
-  
+// 处理变量更新事件 - 仅重新加载对话变量用于开始节点展示
+const handleVariablesUpdated = async () => {  
   // 延迟加载，确保后端数据已经同步
   setTimeout(async () => {
-    await loadWorkflowVariables();
-    console.log('✅ 父组件变量数据已重新加载');
-    console.log('📊 删除后缓存的对话变量:', variablesCache.value.get('conversation'));
+    await loadConversationVariablesForDisplay();
   }, 300);
 };
 
-// 加载工作流变量
-const loadWorkflowVariables = async () => {
+// 加载对话变量用于开始节点展示
+const loadConversationVariablesForDisplay = async () => {
   if (!flowObj.value?.flowId) {
     console.warn('没有flowId，跳过变量加载');
     return;
@@ -218,84 +214,35 @@ const loadWorkflowVariables = async () => {
   
   variablesLoading.value = true;
   
-  try {
-    console.log('🔄 开始加载工作流变量...');
-    
-    // 加载系统变量
-    const systemVars = await listVariables({ scope: 'system' });
-    const systemVariables = systemVars?.result?.variables || systemVars?.variables || (Array.isArray(systemVars) ? systemVars : []);
-    if (systemVariables.length > 0) {
-      variablesCache.value.set('system', systemVariables);
-      console.log('✅ 系统变量加载成功:', systemVariables.length, '个');
-    }
-    
-    // 加载用户变量  
-    const userVars = await listVariables({ scope: 'user' });
-    const userVariables = userVars?.result?.variables || userVars?.variables || (Array.isArray(userVars) ? userVars : []);
-    if (userVariables.length > 0) {
-      variablesCache.value.set('user', userVariables);
-      console.log('✅ 用户变量加载成功:', userVariables.length, '个');
-    }
-    
-    // 加载环境变量
-    const envVars = await listVariables({ scope: 'env' });
-    const envVariables = envVars?.result?.variables || envVars?.variables || (Array.isArray(envVars) ? envVars : []);
-    if (envVariables.length > 0) {
-      variablesCache.value.set('env', envVariables);
-      console.log('✅ 环境变量加载成功:', envVariables.length, '个');
-    }
-    
-    // 加载对话变量（使用flowId）
-    console.log('🔄 准备调用对话变量API, flowId:', flowObj.value.flowId);
-    console.log('🔍 父组件LIST API使用的flowId:', flowObj.value.flowId);
-    const convVars = await listVariables({ 
+  try {    
+    // 只加载对话变量（不带current_step_id，因为是给开始节点展示用的）
+    const convVars: any = await listVariables({ 
       scope: 'conversation', 
       flow_id: flowObj.value.flowId 
     });
-    console.log('📥 对话变量API响应:', convVars);
     
     // 修复：支持多种API响应结构
-    let variables = null;
+    let variables: any[] = [];
     if (convVars?.result?.variables) {
       // 结构1: { result: { variables: [...] } }
       variables = convVars.result.variables;
-      console.log('📋 使用result.variables结构');
     } else if (convVars?.variables) {
       // 结构2: { variables: [...], total: 1 }
       variables = convVars.variables;
-      console.log('📋 使用直接variables结构');
     } else if (Array.isArray(convVars)) {
       // 结构3: 直接返回数组
       variables = convVars;
-      console.log('📋 使用数组结构');
     }
     
     if (variables && Array.isArray(variables)) {
-      // 无论数组是否为空，都要更新缓存
-      variablesCache.value.set('conversation', variables);
-      if (variables.length > 0) {
-        console.log('✅ 对话变量加载成功:', variables.length, '个');
-        console.log('📋 变量详情:', variables);
-      } else {
-        console.log('✅ 对话变量已清空（空数组）');
-      }
+      conversationVariablesForDisplay.value = variables;
     } else {
-      // API返回的不是数组，设置为空数组
-      variablesCache.value.set('conversation', []);
-      console.log('⚠️ 对话变量API返回非数组，设置为空数组 - API响应结构:', {
-        convVars,
-        hasResult: !!convVars?.result,
-        hasResultVariables: !!convVars?.result?.variables,
-        hasDirectVariables: !!convVars?.variables,
-        isArray: Array.isArray(convVars),
-        variablesLength: variables?.length || 0
-      });
+      conversationVariablesForDisplay.value = [];
     }
     
-    console.log('🎉 所有变量加载完成');
   } catch (error) {
-    console.error('❌ 加载变量失败:', error);
-    ElMessage.error('加载变量失败');
+    console.error('❌ 加载对话变量失败:', error);
+    ElMessage.error('加载对话变量失败');
   } finally {
     variablesLoading.value = false;
   }
@@ -382,6 +329,20 @@ const editYamlDrawer = (name, desc, yamlCode, nodeId) => {
     nodeYamlId.value = nodeId;
     selectedNodeId.value = nodeId;
     isEditDirectReplyNode.value = true;
+  } else if (currentNode && currentNode.data.callId === 'Choice') {
+    // 打开条件分支节点编辑器
+    currentChoiceBranchNodeData.value = {
+      name: currentNode.data.name,
+      description: currentNode.data.description,
+      callId: currentNode.data.callId,
+      parameters: currentNode.data.parameters || {
+        input_parameters: { choices: [] },
+        output_parameters: { branch_id: '' }
+      }
+    };
+    nodeYamlId.value = nodeId;
+    selectedNodeId.value = nodeId;
+    isEditChoiceBranchNode.value = true;
   } else {
     // 打开YAML编辑器（其他节点类型）
     yamlContent.value = yamlCode;
@@ -450,6 +411,47 @@ const saveDirectReplyNode = (nodeData, nodeId) => {
   ElMessage.success('直接回复节点保存成功');
 };
 
+// 关闭条件分支节点抽屉
+const closeChoiceBranchDrawer = () => {
+  isEditChoiceBranchNode.value = false;
+  selectedNodeId.value = '';
+  currentChoiceBranchNodeData.value = {};
+};
+
+// 保存条件分支节点
+const saveChoiceBranchNode = (nodeData, nodeId) => {
+  // 更新节点数据
+  const updateNodeParameter = {
+    id: nodeId,
+    ...nodeData,
+  };
+  
+  // 调用保存接口
+  saveFlow(updateNodeParameter);
+  
+  // 关闭抽屉
+  closeChoiceBranchDrawer();
+  
+  ElMessage.success('条件分支节点保存成功');
+};
+
+// 打开环境变量配置
+const openEnvironmentVariables = () => {
+  if (debugDialogVisible.value) {
+    return; // 调试模式下不响应点击
+  }
+  if (!flowObj.value?.flowId) {
+    ElMessage.warning('请先选择工作流');
+    return;
+  }
+  isEditEnvironmentVariables.value = true;
+};
+
+// 关闭环境变量配置
+const closeEnvironmentVariables = () => {
+  isEditEnvironmentVariables.value = false;
+};
+
 // 编辑开始节点
 const editStartNodeDrawer = async (name, desc, yamlCode, nodeId) => {
   yamlContent.value = yamlCode;
@@ -459,9 +461,6 @@ const editStartNodeDrawer = async (name, desc, yamlCode, nodeId) => {
   // 设置选中的节点
   selectedNodeId.value = nodeId;
   
-  // 加载变量数据
-  await loadWorkflowVariables();
-  
   isEditStartNode.value = true;
   // 编辑 yaml 时，需要debug 后才可发布
   emits('updateFlowsDebug', false);
@@ -487,10 +486,8 @@ const saveStartNode = (nodeId, name, description) => {
 
 // 处理保存节点描述事件
 const handleSaveNodeDescription = (nodeInfo) => {
-  console.log('📝 收到保存节点描述事件:', nodeInfo);
   // 调用saveFlow方法保存到后端
   saveFlow(nodeInfo);
-  console.log('✅ 节点描述已通过saveFlow方法保存到后端');
 };
 
 const handleZommOnScroll = () => {
@@ -529,32 +526,9 @@ onMounted(() => {
     })
     .then((res) => {
       const services = res[1]?.result.services || [];
-      
-      // 添加"直接回复"节点到第一个服务组中
-      if (services.length > 0) {
-        const directReplyNode = {
-          name: '直接回复',
-          callId: 'DirectReply',
-          nodeId: 'DirectReply',
-          type: 'custom',
-          description: '直接回复用户输入的内容，支持变量插入'
-        };
-        
-        if (!services[0].nodeMetaDatas) {
-          services[0].nodeMetaDatas = [];
-        }
-        
-        // 检查是否已经存在DirectReply节点，避免重复添加
-        const existingDirectReply = services[0].nodeMetaDatas.find(node => node.callId === 'DirectReply');
-        if (!existingDirectReply) {
-          services[0].nodeMetaDatas.unshift(directReplyNode);
-        }
-      }
-      
+ 
       apiServiceList.value = services;
       allApiServiceList.value = services;
-      activeName.value = [services[0]?.serviceId];
-      activeNames.value = [services[0]?.serviceId];
       apiLoading.value = false;
     });
   handleChangeZoom(DefaultViewPortZoom);
@@ -566,16 +540,13 @@ onUnmounted(() => {
   sessionStorage.setItem('workflowViewPortY', '');
 });
 
-// 过滤工作流接口返回的可拖拽节点
-const searchApiList = () => {
-  apiServiceList.value = allApiServiceList.value.map((item) => {
-    const filterObj = { ...item, nodeMetaDatas: [] };
-    if (item?.nodeMetaDatas) {
-      filterObj.nodeMetaDatas = item.nodeMetaDatas.filter((item) =>
-        item?.name.includes(apiSearchValue.value),
-      );
-    }
-    return filterObj;
+
+
+// 处理节点拖拽开始事件
+const handleNodeDragStart = (event: DragEvent, node: any) => {
+  onDragStart(event, node.type, {
+    serviceId: node.serviceId,
+    ...node,
   });
 };
 
@@ -693,11 +664,10 @@ const editFlow = async (item) => {
     
     if (res[1]?.result?.flow) {
       flowObj.value = res[1].result.flow;
-      redrageFlow(flowObj.value.nodes, flowObj.value.edges);
+      redrageFlow(flowObj.value.nodes || [], flowObj.value.edges || []);
       
-      // 加载工作流变量
-      console.log('🔄 工作流加载完成，开始加载变量...');
-      await loadWorkflowVariables();
+      // 加载对话变量用于开始节点展示
+      await loadConversationVariablesForDisplay();
     }
   } catch (error) {
     console.error('加载工作流失败:', error);
@@ -715,7 +685,7 @@ const delFlow = (item) => {
   loading.value = true;
   api
     .delFlowTopology({
-      appId: route.query?.appId,
+      appId: route.query?.appId as string,
       flowId: item.id,
     })
     .then((res) => {
@@ -775,8 +745,35 @@ const redrageFlow = (nodesList, edgesList) => {
         nodePosition: node.callId === 'start' ? 'Right' : 'Left',
       };
       newNode.deletable = false;
-    } else if (node.callId === 'choice') {
-      newNode.type = 'branch';
+    } else if (node.callId === 'Choice') {
+      newNode.type = 'Choice';
+      
+      // 处理Choice节点的参数，确保包含ELSE分支
+      const choices = node.parameters?.input_parameters?.choices || [];
+      
+      // 检查是否已有默认分支
+      const hasDefaultBranch = choices.some(choice => choice.is_default === true);
+      
+      // 如果没有默认分支，添加一个ELSE分支
+      if (!hasDefaultBranch) {
+        choices.push({
+          branch_id: `else_${node.stepId || Date.now()}`,
+          name: 'ELSE',
+          is_default: true,
+          conditions: [],
+          logic: 'and'
+        });
+      }
+      
+      newNode.data = {
+        ...newNode.data,
+        parameters: {
+          input_parameters: { 
+            choices: choices 
+          },
+          output_parameters: node.parameters?.output_parameters || { branch_id: '' }
+        }
+      };
     } else if (node.callId === 'Code') {
       // Code节点特殊处理：从parameters中提取特有属性并添加到data中
       newNode.type = 'custom';
@@ -822,6 +819,151 @@ const redrageFlow = (nodesList, edgesList) => {
   nodeAndLineConnection();
 };
 
+// 处理插入节点事件
+const handleInsertNode = (edgeInfo) => {
+  if (debugDialogVisible.value) {
+    return; // 调试模式下不允许插入节点
+  }
+  
+  // 获取Vue Flow画布的viewport信息
+  const viewport = getViewport();
+  
+  // 获取Vue Flow容器的位置信息
+  const vueFlowElement = document.querySelector('.vue-flow__viewport');
+  const containerRect = vueFlowElement?.getBoundingClientRect();
+  
+  if (!containerRect) {
+    console.error('无法获取Vue Flow容器位置');
+    return;
+  }
+  
+  // 将画布坐标转换为相对于Vue Flow容器的坐标
+  const containerX = edgeInfo.midX * viewport.zoom + viewport.x;
+  const containerY = edgeInfo.midY * viewport.zoom + viewport.y;
+  
+  // 计算建议的菜单方向（不做位置调整，只做方向建议）
+  const menuWidth = 400;
+  let direction: 'left' | 'right' = 'right';
+  
+  // 简单的方向建议：如果右侧空间不足，建议左侧显示
+  if (containerX + menuWidth + 20 > containerRect.width) {
+    direction = 'left';
+  } else {
+    direction = 'right';
+  }
+  
+  // 更新插入菜单数据（直接传递容器坐标，让子组件处理边界）
+  insertMenuData.value = {
+    visible: true,
+    position: {
+      x: containerX,
+      y: containerY
+    },
+    edgeInfo,
+    direction
+  };
+};
+
+// 关闭插入节点菜单
+const closeInsertNodeMenu = () => {
+  insertMenuData.value.visible = false;
+  insertMenuData.value.edgeInfo = null;
+  insertMenuData.value.position = { x: 0, y: 0 };
+};
+
+// 执行插入节点操作
+const executeInsertNode = (nodeMetaData) => {
+  try {
+    if (!insertMenuData.value.edgeInfo) {
+      console.error('没有边信息，无法插入节点');
+      return;
+    }
+    
+    const edgeInfo = insertMenuData.value.edgeInfo;
+    
+    // 生成新节点ID
+    const newNodeId = `node_${Date.now()}`;
+    
+    // 找到源边
+    const sourceEdge = getEdges.value.find(edge => edge.id === edgeInfo.edgeId);
+    if (!sourceEdge) {
+      console.error('找不到要插入的边');
+      return;
+    }
+    
+    // 创建新节点
+    const newNode = {
+      id: newNodeId,
+      type: nodeMetaData.callId === 'Choice' ? 'branch' : 'custom',
+      position: {
+        x: edgeInfo.midX - 100, // 节点宽度的一半
+        y: edgeInfo.midY - 40   // 节点高度的一半
+      },
+      data: {
+        name: nodeMetaData.name,
+        description: nodeMetaData.description,
+        nodeId: nodeMetaData.nodeId,
+        callId: nodeMetaData.callId,
+        serviceId: nodeMetaData.serviceId || 'default',
+        parameters: {
+          input_parameters: {},
+          output_parameters: {}
+        }
+      },
+      deletable: true
+    };
+    
+    // 添加新节点
+    const currentNodes = [...getNodes.value, newNode];
+    setNodes(currentNodes);
+    
+    // 删除原来的边
+    const currentEdges = getEdges.value.filter(edge => edge.id !== edgeInfo.edgeId);
+    
+    // 创建新的边：源节点 -> 新节点 -> 目标节点
+    const newEdge1 = {
+      id: `edge_${Date.now()}_1`,
+      source: sourceEdge.source,
+      target: newNodeId,
+      sourceHandle: sourceEdge.sourceHandle,
+      type: 'normal',
+      data: {
+        sourceStatus: 'default',
+        targetStatus: 'default'
+      }
+    };
+    
+    const newEdge2 = {
+      id: `edge_${Date.now()}_2`, 
+      source: newNodeId,
+      target: sourceEdge.target,
+      targetHandle: sourceEdge.targetHandle,
+      type: 'normal',
+      data: {
+        sourceStatus: 'default',
+        targetStatus: 'default'
+      }
+    };
+    
+    // 设置新的边
+    setEdges([...currentEdges, newEdge1, newEdge2]);
+    
+    // 触发工作流状态更新
+    emits('updateFlowsDebug', false);
+    updateFlowsDebugStatus.value = false;
+    nodeAndLineConnection();
+    
+    // 关闭菜单
+    closeInsertNodeMenu();
+    
+    ElMessage.success(`${nodeMetaData.name} 节点插入成功`);
+    
+  } catch (error) {
+    console.error('插入节点失败:', error);
+    ElMessage.error('插入节点失败');
+  }
+};
+
 // 接受工作流调试时获取的相应的数据
 $bus.on('getNodesStatue', (item: any) => {
   // 对相应节点修改状态--此处需要分为开始/结束,分支,普通三种节点修改
@@ -991,11 +1133,56 @@ const saveFlow = (updateNodeParameter?, debug?) => {
         type: 'startAndEnd',
       };
     } else if (item.type === 'branch') {
-      // 这里是需要将parameters
+      // 处理分支节点保存，确保包含ELSE分支
+      const choices = item.data.parameters?.input_parameters?.choices || [];
+      
+      // 检查是否已有默认分支
+      const hasDefaultBranch = choices.some(choice => choice.is_default === true);
+      
+      // 如果没有默认分支，添加一个ELSE分支
+      if (!hasDefaultBranch) {
+        choices.push({
+          branch_id: `else_${item.id || Date.now()}`,
+          name: 'ELSE',
+          is_default: true,
+          conditions: [],
+          logic: 'and'
+        });
+      }
+      
       newItem = {
         ...newItem,
-        callId: 'choice',
-        parameters: item.data.parameters,
+        callId: 'Choice',
+        parameters: {
+          input_parameters: { choices: choices },
+          output_parameters: item.data.parameters?.output_parameters || { branch_id: '' }
+        },
+      };
+    } else if (item.type === 'Choice') {
+      // 处理Choice节点保存，确保包含ELSE分支
+      const choices = item.data.parameters?.input_parameters?.choices || [];
+      
+      // 检查是否已有默认分支
+      const hasDefaultBranch = choices.some(choice => choice.is_default === true);
+      
+      // 如果没有默认分支，添加一个ELSE分支
+      if (!hasDefaultBranch) {
+        choices.push({
+          branch_id: `else_${item.id || Date.now()}`,
+          name: 'ELSE',
+          is_default: true,
+          conditions: [],
+          logic: 'and'
+        });
+      }
+      
+      newItem = {
+        ...newItem,
+        callId: 'Choice',
+        parameters: {
+          input_parameters: { choices: choices },
+          output_parameters: item.data.parameters?.output_parameters || { branch_id: '' }
+        },
       };
     }
     return newItem;
@@ -1015,17 +1202,7 @@ const saveFlow = (updateNodeParameter?, debug?) => {
   if (updateNodeParameter) {
     updateNodes.forEach((item) => {
       if (item.stepId === updateNodeParameter.id) {
-        if (item.type === 'choice') {
-          // 确保parameters对象存在
-          if (!item.parameters) {
-            item.parameters = {};
-          }
-          if (!item.parameters.input_parameters) {
-            item.parameters.input_parameters = {};
-          }
-          item.parameters.input_parameters.choices =
-            updateNodeParameter.inputStream;
-        } else if (item.type === 'Code') {
+        if (item.type === 'Code') {
           item.parameters.input_parameters = updateNodeParameter.parameters.input_parameters;
           item.parameters.output_parameters = updateNodeParameter.parameters.output_parameters;
           item.parameters.code = updateNodeParameter.parameters.code;
@@ -1041,6 +1218,13 @@ const saveFlow = (updateNodeParameter?, debug?) => {
           }
           item.parameters.input_parameters = updateNodeParameter.parameters.input_parameters;
           item.parameters.output_parameters = updateNodeParameter.parameters.output_parameters;
+        } else if (item.callId === 'Choice') {
+          // 条件分支节点
+          if (!item.parameters) {
+            item.parameters = {};
+          }
+          item.parameters.input_parameters = updateNodeParameter.parameters.input_parameters;
+          item.parameters.output_parameters = updateNodeParameter.parameters.output_parameters;
         } else if (item.type === 'start') {
           item.variables == updateNodeParameter.variables;
         } else if (item.inputStream !== undefined) {
@@ -1120,84 +1304,48 @@ defineExpose({
       <el-tooltip
         placement="right"
         :content="
-          isCopilotAsideVisible ? t('history.collapse') : t('history.expand')
+          isCopilotAsideVisible ? '收起节点面板' : '展开节点面板 - 拖拽节点创建工作流'
         "
       >
         <div
-          class="trapezoid"
-          :class="{ isExpandIcon: isCopilotAsideVisible }"
+          class="node-panel-toggle"
+          :class="{ collapsed: !isCopilotAsideVisible, expanded: isCopilotAsideVisible }"
           @click="hanleAsideVisible"
-        />
-      </el-tooltip>
+        >
+          <!-- 折叠状态：显示节点图标 + 箭头 -->
+          <div v-if="!isCopilotAsideVisible" class="collapsed-content">
+            <div class="expand-arrow">›</div>
+            <div class="drag-hint">拖拉拽新建节点</div>
+          </div>
+          
+          <!-- 展开状态：显示收起箭头 -->
+          <div v-else class="expanded-content">
+            <div class="collapse-arrow">‹</div>
+          </div>
+        </div>
+      </ElTooltip>
 
       <transition name="transition-fade">
-        <div class="copilot-aside nodes" v-if="isCopilotAsideVisible">
+        <div class="copilot-aside-new" v-if="isCopilotAsideVisible">
           <CustomLoading :loading="apiLoading"></CustomLoading>
-          <div class="apiCenterBox">
-            <div class="apiCenterTitle">
-              {{ $t('semantic.semantic_interface_center') }}
-            </div>
-            <div class="apiCenterSearch">
-              <el-input
-                v-model="apiSearchValue"
-                class="o-style-search"
-                :placeholder="$t('semantic.interface_search')"
-                @input="searchApiList"
-                :prefix-icon="IconSearch"
-                clearable
-              ></el-input>
+          <!-- Tab切换 -->
+          <div class="aside-tabs">
+            <div class="tab-item active">
+              节点
             </div>
-            <div class="apiContanter">
-              <el-collapse
-                v-model="activeName"
-                @change="handleChange"
-                class="o-hpc-collapse"
-              >
-                <el-collapse-item
-                  title="Consistency"
-                  :name="item.serviceId"
-                  v-for="item in apiServiceList"
-                  :key="item.serviceId"
-                >
-                  <template #title>
-                    <el-icon
-                      class="el-collapse-item__arrow"
-                      :class="{
-                        'is-active': activeNames.includes(item.serviceId),
-                      }"
-                    >
-                      <IconCaretRight />
-                    </el-icon>
-                    <span>{{ item.name }}</span>
-                  </template>
-                  <div
-                    class="stancesItem"
-                    v-for="(node, index) in item.nodeMetaDatas"
-                    :key="index"
-                    :draggable="true"
-                    @dragstart="
-                      onDragStart($event, node.type, {
-                        serviceId: item.serviceId,
-                        ...node,
-                      })
-                    "
-                  >
-                    <el-tooltip
-                    :disabled="true"
-                    class="popper-class"
-                    placement="top"
-                    :content="node.name">
-                        <div class="stancesName">
-                    <img class="nodeIcon" :src="getSrcIcon(node)" />
-
-                          {{ node.name }}
-                        </div>
-                    </el-tooltip>
-                  </div>
-                </el-collapse-item>
-              </el-collapse>
+            <div class="tab-item disabled">
+              应用
             </div>
           </div>
+          
+          <div class="aside-content">
+            <NodeListPanel
+              :api-service-list="apiServiceList"
+              :search-placeholder="$t('semantic.interface_search')"
+              :enable-drag="true"
+              :on-drag-start="handleNodeDragStart"
+            />
+          </div>
         </div>
       </transition>
     </aside>
@@ -1259,6 +1407,18 @@ defineExpose({
           ></BranchNode>
         </template>
 
+        <!-- 条件分支节点 -->
+        <template #node-Choice="choiceBranchNodeProps">
+          <ChoiceBranchNode
+            v-bind="choiceBranchNodeProps"
+            :disabled="debugDialogVisible"
+            :selected="selectedNodeId === choiceBranchNodeProps.id"
+            @delNode="delNode"
+            @editYamlDrawer="editYamlDrawer"
+            @updateConnectHandle="updateConnectHandle"
+          ></ChoiceBranchNode>
+        </template>
+
         <!-- 开始结束节点 -->
         <template #node-start="nodeStartProps">
           <CustomSaENode
@@ -1293,6 +1453,8 @@ defineExpose({
             :sourcePosition="props.sourcePosition"
             :targetPosition="props.targetPosition"
             :data="JSON.parse(JSON.stringify(props.data))"
+            :disabled="debugDialogVisible"
+            @insertNode="handleInsertNode"
           />
         </template>
         <!-- 连接时边线 -->
@@ -1349,6 +1511,22 @@ defineExpose({
             </template>
           </el-select>
         </div>
+        <el-tooltip
+          v-if="workFlowItemName && flowObj?.flowId"
+          effect="dark"
+          content="配置环境变量"
+          placement="top"
+        >
+          <div
+            class="envBtn"
+            :class="{ isEnvDis: debugDialogVisible }"
+            @click="openEnvironmentVariables"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M20 18a1 1 0 0 1-1 1h-4a3 3 0 0 0-3 3a3 3 0 0 0-3-3H5a1 1 0 0 1-1-1H2a3 3 0 0 0 3 3h4a2 2 0 0 1 2 2h2a2 2 0 0 1 2-2h4a3 3 0 0 0 3-3Zm0-12a1 1 0 0 0-1-1h-4a3 3 0 0 1-3-3a3 3 0 0 1-3 3H5a1 1 0 0 0-1 1H2a3 3 0 0 1 3-3h4a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h4a3 3 0 0 1 3 3Zm-8 6L9 8H7v8h2v-4l3 4h2V8h-2zm9-4l-2 5.27L17 8h-2l3 8h2l3-8zM1 8v8h5v-2H3v-1h2v-2H3v-1h3V8z" />
+            </svg>
+          </div>
+        </el-tooltip>
         <el-tooltip
           v-if="!isNodeAndLineConnect && !isNodeConnect"
           effect="dark"
@@ -1451,4 +1629,282 @@ defineExpose({
     @update:visible="closeDirectReplyDrawer"
     @saveNode="saveDirectReplyNode"
   />
-</template>
\ No newline at end of file
+  
+  <!-- 条件分支节点编辑器 -->
+  <ChoiceBranchDrawer
+    :visible="isEditChoiceBranchNode"
+    :nodeData="currentChoiceBranchNodeData"
+    :nodeId="nodeYamlId"
+    :flowId="flowObj?.flowId"
+    @update:visible="closeChoiceBranchDrawer"
+    @saveNode="saveChoiceBranchNode"
+  />
+  
+  <!-- 插入节点选择菜单 -->
+  <InsertNodeMenu
+    :visible="insertMenuData.visible"
+    :position="insertMenuData.position"
+    :menu-direction="insertMenuData.direction"
+    :api-service-list="apiServiceList"
+    @close="closeInsertNodeMenu"
+    @select-node="executeInsertNode"
+  />
+  
+  <!-- 环境变量配置抽屉 -->
+  <EnvironmentVariableDrawer
+    v-if="isEditEnvironmentVariables"
+    :flowId="flowObj?.flowId"
+    @closeDrawer="closeEnvironmentVariables"
+  />
+</template>
+
+<style lang="scss" scoped>
+// 新的展开按钮样式
+.node-panel-toggle {
+  position: absolute;
+  top: 50%;
+  right: -10px;
+  transform: translateY(-50%);
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border: 2px solid white;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  z-index: 1000;
+  
+  &.collapsed {
+    width: 30px;
+    height: 120px;
+    
+    &:hover {
+      transform: translateY(-50%) scale(1.05);
+      box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+      
+      .collapsed-content {
+        .expand-arrow {
+          transform: translate(-50%, -50%) translateY(-40px);
+        }
+        
+        .drag-hint {
+          opacity: 1;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+  
+  &.expanded {
+    width: 40px;
+    height: 40px;
+    
+    &:hover {
+      transform: translateY(-50%) scale(1.1);
+      background: linear-gradient(135deg, #5b5fc7 0%, #7c3aed 100%);
+    }
+  }
+  
+  .collapsed-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 4px;
+    position: relative;
+    
+    .expand-arrow {
+      color: white;
+      font-size: 16px;
+      font-weight: bold;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .drag-hint {
+      color: white;
+      font-size: 8px;
+      font-weight: 500;
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      text-align: center;
+      line-height: 1.2;
+      position: absolute;
+      top: 30px;
+      left: 50%;
+      transform: translateX(-50%);
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      letter-spacing: 2px;
+    }
+  }
+  
+  .expanded-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    
+    .collapse-arrow {
+      color: white;
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+}
+
+// 新的Aside样式，模仿insertNodeMenu.vue
+.copilot-aside-new {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e1e4e8;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  
+  .aside-tabs {
+    display: flex;
+    padding: 12px 20px;
+    border-bottom: 1px solid #e1e4e8;
+    background: #f8f9fa;
+    
+    .tab-item {
+      padding: 8px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #586069;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s ease;
+      
+      &.active {
+        color: #6395fd;
+        border-bottom-color: #6395fd;
+      }
+      
+      &.disabled {
+        color: #c0c4cc;
+        cursor: not-allowed;
+      }
+      
+      &:hover:not(.disabled) {
+        color: #6395fd;
+      }
+    }
+  }
+  
+  .aside-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// 环境变量按钮样式
+.envBtn {
+  width: 32px;
+  height: 32px;
+  background: #ffffff;
+  border: 1px solid #e0e7ff;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 12px;
+  color: #486bf7;
+  cursor: pointer;
+  
+  &:hover {
+    background: #dbeafe;
+    border-color: #93c5fd;
+    color: #2563eb; 
+  }
+  &:active {
+    background: #bfdbfe;
+  }
+}
+.envBtn.isEnvDis {
+  background: #f9fafb;
+  border-color: #e5e7eb;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+// 深色主题支持
+.dark {
+  .node-panel-toggle {
+    background: linear-gradient(135deg, #4c1d95 0%, #6b21a8 100%);
+    border-color: #374151;
+    box-shadow: 0 4px 12px rgba(76, 29, 149, 0.3);
+    
+    &.collapsed {
+      &:hover {
+        box-shadow: 0 6px 20px rgba(76, 29, 149, 0.4);
+      }
+    }
+    
+    &.expanded {
+      &:hover {
+        background: linear-gradient(135deg, #3c1361 0%, #581c87 100%);
+      }
+    }
+    
+
+  }
+  
+  .copilot-aside-new {
+    background: #2d3748;
+    border-color: #4a5568;
+    
+    .aside-tabs {
+      background: #374151;
+      border-bottom-color: #4a5568;
+      
+      .tab-item {
+        color: #a0aec0;
+        
+        &.active {
+          color: #6395fd;
+          border-bottom-color: #6395fd;
+        }
+        
+        &.disabled {
+          color: #718096;
+          cursor: not-allowed;
+        }
+        
+        &:hover:not(.disabled) {
+          color: #e2e8f0;
+        }
+      }
+    }
+  }
+  
+  .envBtn {
+    background: #1e3a8a;
+    border-color: #3730a3;
+    color: #60a5fa;
+    
+    &:hover {
+      background: #1e40af;
+      border-color: #4338ca;
+      color: #93c5fd;
+    }
+    &:active {
+      background: #1d4ed8;
+    }
+    
+    &.isEnvDis {
+      background: #374151;
+      border-color: #4b5563;
+      color: #6b7280;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/createapp/components/workFlowConfig/ChoiceBranchCard.vue b/src/views/createapp/components/workFlowConfig/ChoiceBranchCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..22418da90036273a9f491e105697204ca6af9d1c
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/ChoiceBranchCard.vue
@@ -0,0 +1,940 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ElMessage, ElMessageBox, ElButton, ElSelect, ElOption, ElInput, ElSwitch } from 'element-plus';
+import { Plus, Delete, Refresh } from '@element-plus/icons-vue';
+import { v4 as uuidv4 } from 'uuid';
+import VariableChooser from '@/components/VariableChooser.vue';
+
+// 类型定义
+interface Condition {
+  id: string;
+  left: {
+    type: string; // 第一行固定为 'reference'
+    value: any;
+  };
+  right: {
+    type: string; // 'reference' 或具体数据类型
+    value: any;
+  };
+  operate: string;
+  dataType: string; // 新增字段：选择的数据类型
+  isRightReference: boolean; // 新增字段：右值是否为变量引用
+}
+
+interface ChoiceBranch {
+  branch_id: string;
+  name: string;
+  logic: string;
+  conditions: Condition[];
+  is_default: boolean;
+}
+
+interface ValueTypeOption {
+  label: string;
+  value: string;
+}
+
+interface OperatorOption {
+  label: string;
+  value: string;
+}
+
+const props = defineProps({
+  choice: {
+    type: Object as () => ChoiceBranch,
+    required: true,
+  },
+  choiceIndex: {
+    type: Number,
+    required: true,
+  },
+  valueTypeOptions: {
+    type: Array as () => ValueTypeOption[],
+    required: true,
+  },
+  operatorOptions: {
+    type: Object as () => Record<string, OperatorOption[]>,
+    required: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  flowId: {
+    type: String,
+    default: '',
+  },
+  conversationId: {
+    type: String,
+    default: '',
+  },
+  currentStepId: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['removeBranch', 'addCondition', 'removeCondition', 'toggleLogic', 'updateCondition']);
+
+// 数据类型选项（基于后端schemas）
+const dataTypeOptions = [
+  { label: '字符串', value: 'string' },
+  { label: '数值', value: 'number' },
+  { label: '数组', value: 'list' },
+  { label: '布尔值', value: 'bool' },
+  { label: '对象', value: 'dict' },
+];
+
+// 基于后端schemas的操作符配置
+const operatorOptionsByType = {
+  string: [
+    { label: '等于', value: 'string_equal' },
+    { label: '不等于', value: 'string_not_equal' },
+    { label: '包含', value: 'string_contains' },
+    { label: '不包含', value: 'string_not_contains' },
+    { label: '开始于', value: 'string_starts_with' },
+    { label: '结束于', value: 'string_ends_with' },
+    { label: '长度等于', value: 'string_length_equal' },
+    { label: '长度大于', value: 'string_length_greater_than' },
+    { label: '长度大于等于', value: 'string_length_greater_than_or_equal' },
+    { label: '长度小于', value: 'string_length_less_than' },
+    { label: '长度小于等于', value: 'string_length_less_than_or_equal' },
+    { label: '正则匹配', value: 'string_regex_match' },
+  ],
+  number: [
+    { label: '等于', value: 'number_equal' },
+    { label: '不等于', value: 'number_not_equal' },
+    { label: '大于', value: 'number_greater_than' },
+    { label: '小于', value: 'number_less_than' },
+    { label: '大于等于', value: 'number_greater_than_or_equal' },
+    { label: '小于等于', value: 'number_less_than_or_equal' },
+  ],
+  list: [
+    { label: '等于', value: 'list_equal' },
+    { label: '不等于', value: 'list_not_equal' },
+    { label: '包含', value: 'list_contains' },
+    { label: '不包含', value: 'list_not_contains' },
+    { label: '长度等于', value: 'list_length_equal' },
+    { label: '长度大于', value: 'list_length_greater_than' },
+    { label: '长度大于等于', value: 'list_length_greater_than_or_equal' },
+    { label: '长度小于', value: 'list_length_less_than' },
+    { label: '长度小于等于', value: 'list_length_less_than_or_equal' },
+  ],
+  bool: [
+    { label: '等于', value: 'bool_equal' },
+    { label: '不等于', value: 'bool_not_equal' },
+  ],
+  dict: [
+    { label: '等于', value: 'dict_equal' },
+    { label: '不等于', value: 'dict_not_equal' },
+    { label: '包含键', value: 'dict_contains_key' },
+    { label: '不包含键', value: 'dict_not_contains_key' },
+  ],
+};
+
+// 获取分支标题
+const getBranchTitle = computed(() => {
+  if (props.choice.is_default) {
+    return 'ELSE';
+  }
+  return props.choiceIndex === 0 ? 'IF' : 'ELIF';
+});
+
+// 获取 Case 编号
+const getCaseNumber = (index: number) => {
+  return `CASE ${index + 1}`;
+};
+
+// 计算 conditions-bracket 的高度
+const getBracketHeight = computed(() => {
+  const conditionCount = props.choice.conditions.length;
+  
+  // 更精确的高度计算：
+  // 每个条件项包含：
+  // - 上下 padding: 16px * 2 = 32px
+  // - 两行内容（变量行 + 值行）：约 32px * 2 = 64px  
+  // - 行间距：12px
+  // 总计约 108px 每个条件项
+  const conditionItemHeight = 107;
+  
+  // 总高度 = 条件项高度 * 数量 + 按钮区域高度
+  return conditionCount * conditionItemHeight;
+});
+
+// 计算连接线的高度
+const getConnectingLineHeight = computed(() => {
+  const conditionCount = props.choice.conditions.length;
+  
+  if (conditionCount <= 1) {
+    return 0; // 只有一个条件项时不需要连接线
+  }
+  
+  const conditionItemHeight = 107;
+  
+  // 连接线从第一个条件项中心到最后一个条件项中心
+  // 高度 = (条件项数量 - 1) * 条件项高度
+  return (conditionCount - 1) * conditionItemHeight;
+});
+
+// 获取操作符选项
+const getOperatorOptions = (dataType: string) => {
+  return operatorOptionsByType[dataType] || operatorOptionsByType.string;
+};
+
+// 添加条件
+const addCondition = () => {
+  emit('addCondition', props.choiceIndex);
+};
+
+// 删除条件
+const removeCondition = (conditionIndex: number) => {
+  if (props.choice.conditions.length <= 1) {
+    ElMessage.warning('每个分支至少需要一个条件');
+    return;
+  }
+  emit('removeCondition', props.choiceIndex, conditionIndex);
+};
+
+// 切换逻辑运算符
+const toggleLogic = () => {
+  emit('toggleLogic', props.choiceIndex);
+};
+
+// 删除分支
+const removeBranch = async () => {
+  if (!props.canDelete) {
+    ElMessage.warning('至少需要保留一个条件分支');
+    return;
+  }
+  
+  try {
+    await ElMessageBox.confirm('确定要删除这个分支吗？', '确认删除', {
+      type: 'warning',
+    });
+    
+    emit('removeBranch', props.choiceIndex);
+  } catch {
+    // 用户取消删除
+  }
+};
+
+// 处理数据类型变化
+const handleDataTypeChange = (conditionIndex: number, dataType: string) => {
+  const condition = props.choice.conditions[conditionIndex];
+  condition.dataType = dataType;
+  
+  // 重置操作符为该类型的第一个
+  const operators = getOperatorOptions(dataType);
+  if (operators.length > 0) {
+    condition.operate = operators[0].value;
+  }
+  
+  // 如果右值不是变量引用，更新右值类型
+  if (!condition.isRightReference) {
+    condition.right.type = dataType;
+    condition.right.value = '';
+  }
+  
+  emit('updateCondition', props.choiceIndex, conditionIndex, condition);
+};
+
+// 处理操作符变化
+const handleOperatorChange = (conditionIndex: number, operator: string) => {
+  const condition = props.choice.conditions[conditionIndex];
+  condition.operate = operator;
+  emit('updateCondition', props.choiceIndex, conditionIndex, condition);
+};
+
+// 处理右值引用切换
+const handleRightReferenceToggle = (conditionIndex: number, isReference: boolean) => {
+  const condition = props.choice.conditions[conditionIndex];
+  condition.isRightReference = isReference;
+  
+  if (isReference) {
+    condition.right.type = 'reference';
+    condition.right.value = '';
+  } else {
+    condition.right.type = condition.dataType;
+    condition.right.value = '';
+  }
+  
+  emit('updateCondition', props.choiceIndex, conditionIndex, condition);
+};
+
+// 处理左值变量选择
+const handleLeftVariableSelected = (conditionIndex: number, variable: any) => {
+  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}`;
+  }
+  emit('updateCondition', props.choiceIndex, conditionIndex, condition);
+};
+
+// 处理右值变量选择
+const handleRightVariableSelected = (conditionIndex: number, variable: any) => {
+  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}`;
+  }
+  emit('updateCondition', props.choiceIndex, conditionIndex, condition);
+};
+
+// 处理右值输入变化
+const handleRightValueChange = (conditionIndex: number, value: any) => {
+  const condition = props.choice.conditions[conditionIndex];
+  condition.right.value = value;
+  emit('updateCondition', props.choiceIndex, conditionIndex, condition);
+};
+</script>
+
+<template>
+  <div class="branch-card">
+    <!-- 条件配置 -->
+    <div class="conditions-section">
+      <!-- 分支标题 -->
+      <div class="conditions-header">
+        <div class="conditions-title">{{ getBranchTitle }}</div>
+        <div class="conditions-subtitle">{{ getCaseNumber(choiceIndex) }}</div>
+      </div>
+
+      <div class="conditions-container" :class="{ 'single-condition': choice.conditions.length <= 1 }">
+        <!-- 条件组连接线 -->
+        <div 
+          v-if="choice.conditions.length > 1" 
+          class="conditions-bracket"
+          :style="{ height: getBracketHeight + 'px' }"
+        >
+          <el-button
+            class="logic-switch-btn"
+            size="small"
+            :icon="Refresh"
+            @click="toggleLogic"
+            type="default"
+          >
+            {{ choice.logic === 'and' ? 'AND' : 'OR' }}
+          </el-button>
+          <div 
+            class="connecting-line"
+            :style="{ height: getConnectingLineHeight + 'px' }"
+          ></div>
+        </div>
+
+        <!-- 条件列表 -->
+        <div class="conditions-list">
+          <div
+            v-for="(condition, conditionIndex) in choice.conditions"
+            :key="condition.id"
+            class="condition-item"
+          >
+            <!-- 第一列 -->
+            <div class="condition-setting-col">
+              <!-- 第一行：变量选择 + 数据类型 + 操作符 -->
+              <div class="condition-row variable-row">
+                <div class="variable-section">
+                  <VariableChooser
+                    :variable-reference="condition.left.value"
+                    :flow-id="flowId"
+                    :conversation-id="conversationId"
+                    :current-step-id="currentStepId"
+                    :show-actions="false"
+                    :show-variable-info="false"
+                    :hide-border="true"
+                    :no-border-radius="true"
+                    :transparent-background="true"
+                    selector-placeholder="选择左值变量"
+                    @variable-selected="handleLeftVariableSelected(conditionIndex, $event)"
+                  />
+                </div>
+                <!-- 数据类型选择 -->
+                <el-select
+                  :model-value="condition.dataType || 'string'"
+                  @update:model-value="handleDataTypeChange(conditionIndex, $event)"
+                  size="small"
+                  class="data-type-select"
+                  placeholder="类型"
+                >
+                  <el-option
+                    v-for="option in dataTypeOptions"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+                
+                <!-- 操作符选择 -->
+                <el-select
+                  :model-value="condition.operate"
+                  @update:model-value="handleOperatorChange(conditionIndex, $event)"
+                  size="small"
+                  class="operator-select"
+                  placeholder="操作符"
+                >
+                  <el-option
+                    v-for="option in getOperatorOptions(condition.dataType || 'string')"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </div>
+
+              <!-- 第二行：右值输入 + 切换按钮 -->
+              <div class="condition-row value-row">
+                <div class="value-section">
+                  <!-- 变量引用模式 -->
+                  <div v-if="condition.isRightReference" class="reference-input">
+                    <VariableChooser
+                      :variable-reference="condition.right.value"
+                      :flow-id="flowId"
+                      :conversation-id="conversationId"
+                      :current-step-id="currentStepId"
+                      :show-actions="false"
+                      :show-variable-info="false"
+                      :hide-border="true"
+                      :no-border-radius="true"
+                      :transparent-background="true"
+                      selector-placeholder="选择右值变量"
+                      @variable-selected="handleRightVariableSelected(conditionIndex, $event)"
+                    />
+                  </div>
+                  
+                  <!-- 直接输入模式 -->
+                  <div v-else class="direct-input">
+                    <!-- 布尔值特殊处理 -->
+                    <el-select
+                      v-if="condition.dataType === 'bool'"
+                      :model-value="condition.right.value"
+                      @update:model-value="handleRightValueChange(conditionIndex, $event)"
+                      size="small"
+                      style="flex: 1;"
+                      placeholder="选择布尔值"
+                    >
+                      <el-option label="true" value="true" />
+                      <el-option label="false" value="false" />
+                    </el-select>
+                    
+                    <!-- 其他类型 -->
+                    <el-input
+                      v-else
+                      :model-value="condition.right.value"
+                      @update:model-value="handleRightValueChange(conditionIndex, $event)"
+                      size="small"
+                      :placeholder="`输入${dataTypeOptions.find(t => t.value === condition.dataType)?.label || '值'}`"
+                      style="flex: 1;"
+                    />
+                  </div>
+                </div>
+                
+                <div class="toggle-section">
+                  <el-button
+                    size="small"
+                    type="default"
+                    @click="handleRightReferenceToggle(conditionIndex, !condition.isRightReference)"
+                    :icon="Refresh"
+                  >
+                    {{ condition.isRightReference ? '变量引用' : '输入值' }}
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <!-- 第二列 条件删除按钮列 -->
+            <div class="condition-delete-col">
+              <button
+                class="danger-button"
+                @click="removeCondition(conditionIndex)"
+                type="button"
+                title="删除条件"
+              >
+                <Delete />
+              </button>
+            </div>
+          </div>
+          <!-- 添加条件按钮/删除分支按钮 -->
+          <div class="action-buttons">
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                :icon="Plus"
+                @click="addCondition"
+              >
+                  添加条件
+              </el-button>
+              <button
+                type="button"
+                class="danger-button delete-branch"
+                @click="removeBranch"
+              >
+                <Delete />
+                移除
+              </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.branch-card {
+  border-radius: 8px;
+  margin-bottom: 16px;
+  background: #ffffff;
+  
+  &.default-branch {
+    border-color: #f56c6c;
+    background: #fef0f0;
+  }
+  
+  .branch-header {
+    padding: 16px;
+    border-bottom: 1px solid #e4e7ed;
+    background: #f8f9fa;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    .branch-title-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      
+      .main-title {
+        font-size: 18px;
+        font-weight: 700;
+        color: #409eff;
+        padding: 6px 12px;
+        background: #ecf5ff;
+        border-radius: 6px;
+        border: 1px solid #d9ecff;
+        min-width: 60px;
+        text-align: center;
+      }
+      
+      .sub-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #606266;
+      }
+    }
+    
+    .branch-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+  
+  .conditions-section {
+    position: relative;
+    border-radius: 8px;
+
+    .conditions-header {
+      position: absolute;
+      padding: 16px;
+      
+      .conditions-title {
+        font-weight: 600;
+        color: black;
+        font-size: 16px;
+      }
+
+      .conditions-subtitle {
+        font-weight: 500;
+        color: #676f83;
+        font-size: 12px;
+      }
+    }
+
+    .conditions-container {
+      position: relative;
+      padding: 16px 0 16px 80px;
+      
+      .conditions-bracket {
+        position: absolute;
+        left: 0;
+        top: 16px;
+        width: 80px;
+        padding: 16px 0 16px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        
+        .logic-switch-btn {
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 50px;
+          font-weight: 600;
+          font-size: 10px;
+          padding: 4px 8px;
+          background-color: white;
+          z-index: 1;
+          
+          // 调整图标大小
+          :deep(.el-icon) {
+            font-size: 10px;
+            width: 10px;
+            height: 10px;
+          }
+        }
+        
+        .connecting-line {
+          position: absolute;
+          right: 0;
+          top: 46px;
+          width: 2rem;
+          border-color: #10182824;
+          border-style: solid;
+          border-top-left-radius: 16px;
+          border-bottom-left-radius: 16px;
+          border-right-width: 0 !important;
+          border-width: 1px;
+          z-index: 0;
+        }
+      }
+      
+      .conditions-list {
+        width: 100%;
+        
+        .condition-item {
+          border-radius: 8px;
+          padding: 16px;
+          background: transparent;
+          display: flex;
+          align-items: flex-start;
+          gap: 16px;
+          transition: background-color 0.2s ease;
+            
+          // 当包含的删除按钮hover时，改变condition-setting-col的背景色
+          &:has(.danger-button:hover) .condition-setting-col {
+            background-color: var(--el-color-danger-light-9);
+          }
+          
+          .condition-setting-col {
+            flex: 1;
+            min-width: 0;
+            background: #f8f9fa;
+            border: 1px solid #e4e7ed;
+            border-radius: 8px;
+            overflow: hidden;
+            transition: background-color 0.2s ease;
+          }
+          
+          .condition-delete-col {
+            flex-shrink: 0;
+            display: flex;
+            align-items: flex-start;
+            padding-top: 8px;
+          }
+          
+          .condition-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+            
+            .condition-number {
+              font-size: 12px;
+              font-weight: 600;
+              color: #909399;
+            }
+          }
+          
+          .condition-row {
+            margin: 0;
+            display: flex;
+            align-items: flex-end;
+            gap: 0;
+            padding: 6px 0 6px 0;
+            
+            &:not(:last-child) {
+              border-bottom: 1px solid #e4e7ed;
+              margin-left: 2px;
+              margin-right: 2px;
+              padding-left: 0;
+              padding-right: 0;
+            }
+            
+            &.variable-row {
+              gap: 12px;
+              
+              .variable-section {
+                flex: 3; // VariableChooser 占3份空间
+                border-right: 1px solid #e4e7ed;
+                padding-right: 12px;
+              }
+              
+              .data-type-select {
+                flex: 0 0 25%;
+                border-right: 1px solid #e4e7ed;
+                padding-right: 12px;
+                
+                :deep(.el-select__wrapper) {
+                  border: none;
+                  box-shadow: none;
+                  background: transparent;
+                  border-radius: 0;
+                }
+              }
+              
+              .operator-select {
+                flex: 0 0 25%;
+                
+                :deep(.el-select__wrapper) {
+                  border: none;
+                  box-shadow: none;
+                  background: transparent;
+                  border-radius: 0;
+                  // 操作符选择器作为最后一个元素，不需要右边框
+                }
+              }
+            }
+            
+            &.value-row {
+              display: flex;
+              align-items: flex-end;
+              gap: 12px;
+              
+              .value-section {
+                flex: 1;
+                min-width: 0;
+                border-right: 1px solid #e4e7ed;
+                padding-right: 12px;
+                
+                .reference-input,
+                .direct-input {
+                  :deep(.el-select__wrapper),
+                  :deep(.el-input__wrapper) {
+                    border: none;
+                    box-shadow: none;
+                    background: transparent;
+                    border-radius: 0;
+                  }
+                }
+              }
+              
+              .toggle-section {
+                flex-shrink: 0;
+                
+                .el-button {
+                  border: none;
+                  background: transparent;
+                  color: #409eff;
+                  font-size: 12px;
+                  padding: 4px 8px;
+                  border-radius: 0;
+                  margin-right: 8px;
+                  
+                  &:hover {
+                    background: rgba(64, 158, 255, 0.1);
+                  }
+                  
+                  &:focus {
+                    box-shadow: none;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // 当包含的删除按钮hover时，改变背景色
+    &:has(.action-buttons .danger-button:hover) {
+      background-color: var(--el-color-danger-light-9);
+      
+      .condition-setting-col {
+        background-color: #eee8e9;
+        transition: none;
+      }
+    }
+  }
+}
+
+// 深色主题支持
+.dark {
+  .branch-card {
+    background: #374151;
+    border-color: #4b5563;
+    
+    &.default-branch {
+      border-color: #f87171;
+      background: #450a0a;
+    }
+    
+    .branch-header {
+      background: #4b5563;
+      border-color: #6b7280;
+      
+      .branch-title-section {
+        .main-title {
+          color: #3b82f6;
+          background: #1e3a8a;
+          border-color: #1e40af;
+        }
+        
+        .sub-title {
+          color: #e5e7eb;
+        }
+      }
+    }
+    
+    .conditions-container {
+      .conditions-bracket {
+        .bracket-line {
+          background: #3b82f6;
+        }
+      }
+      
+      .conditions-list {
+        .condition-item {
+          background: #4b5563;
+          border-color: #6b7280;
+          
+          .condition-setting-col {
+            background: #4b5563;
+            border-color: #6b7280;
+            
+            .condition-row {
+              &:not(:last-child) {
+                border-bottom-color: #6b7280;
+              }
+              
+              &.variable-row {
+                .variable-section {
+                  border-right-color: #6b7280;
+                }
+                
+                .data-type-select {
+                  border-right-color: #6b7280;
+                }
+                
+                .operator-select :deep(.el-select__wrapper) {
+                  border-right-color: #6b7280;
+                }
+              }
+              
+              &.value-row {
+                .value-section {
+                  border-right-color: #6b7280;
+                }
+                
+                .toggle-section .el-button {
+                  color: #3b82f6;
+                  
+                  &:hover {
+                    background: rgba(59, 130, 246, 0.2);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    
+
+  }
+}
+
+// 确保VariableChooser组件样式适配
+:deep(.variable-chooser) {
+  .variable-row {
+    margin-bottom: 0;
+    
+    .variable-name-section {
+      display: none; // 隐藏变量名输入，只保留选择器
+    }
+    
+    .variable-selector-section {
+      flex: 1;
+      min-width: 0 !important; // 使用 !important 强制覆盖原始的 min-width
+      
+      .field-label {
+        display: none; // 隐藏标签
+      }
+    }
+    
+    .actions-section {
+      display: none; // 隐藏操作按钮
+    }
+  }
+  
+  .variable-info {
+    display: none; // 隐藏变量信息
+  }
+}
+
+// 按钮组flex布局样式
+.action-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px 0 16px;
+  margin: 8px 0 8px 0;
+}
+
+// 条件删除按钮样式
+.danger-button {
+  background: none;
+  border: none;
+  padding: 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  color: var(--el-color-danger);
+  
+  &:hover {
+    color: var(--el-color-danger-light-3);
+    background-color: var(--el-color-danger-light-8);
+  }
+  
+  &:active {
+    color: var(--el-color-danger-dark-2);
+    background-color: var(--el-color-danger-light-7);
+  }
+  
+  &:focus {
+    outline: 2px solid var(--el-color-danger-light-6);
+    outline-offset: 1px;
+    background-color: var(--el-color-danger-light-8);
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+// Delete分支按钮的特殊样式
+.delete-branch {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+  
+  // 确保图标和文本垂直对齐
+  span, svg {
+    vertical-align: middle;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/createapp/components/workFlowConfig/ChoiceBranchDrawer.vue b/src/views/createapp/components/workFlowConfig/ChoiceBranchDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81d0178a9dd64ad05ab1fa8d224f23863b2e7c99
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/ChoiceBranchDrawer.vue
@@ -0,0 +1,626 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Plus, Delete, QuestionFilled } from '@element-plus/icons-vue';
+import { useI18n } from 'vue-i18n';
+import { v4 as uuidv4 } from 'uuid';
+import ChoiceBranchCard from './ChoiceBranchCard.vue';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  nodeData: {
+    type: Object,
+    default: () => ({}),
+  },
+  nodeId: {
+    type: String,
+    default: '',
+  },
+  flowId: {
+    type: String,
+    default: '',
+  },
+  conversationId: {
+    type: String,
+    default: '',
+  },
+  currentStepId: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:visible', 'saveNode']);
+
+// 类型定义
+interface Condition {
+  id: string;
+  left: {
+    type: string;
+    value: any;
+  };
+  right: {
+    type: string;
+    value: any;
+  };
+  operate: string;
+  dataType: string;
+  isRightReference: boolean;
+}
+
+interface ChoiceBranch {
+  branch_id: string;
+  name: string;
+  logic: string;
+  conditions: Condition[];
+  is_default: boolean;
+}
+
+interface FormData {
+  name: string;
+  description: string;
+  choices: ChoiceBranch[];
+  defaultBranch: ChoiceBranch | null;
+}
+
+// 表单数据
+const formData = ref<FormData>({
+  name: '',
+  description: '',
+  choices: [],
+  defaultBranch: null
+});
+
+// 操作符选项
+const operatorOptions = {
+  string: [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'ne' },
+    { label: '包含', value: 'contains' },
+    { label: '不包含', value: 'not_contains' },
+    { label: '开始于', value: 'starts_with' },
+    { label: '结束于', value: 'ends_with' },
+    { label: '为空', value: 'is_empty' },
+    { label: '不为空', value: 'is_not_empty' },
+  ],
+  number: [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'ne' },
+    { label: '大于', value: 'gt' },
+    { label: '大于等于', value: 'gte' },
+    { label: '小于', value: 'lt' },
+    { label: '小于等于', value: 'lte' },
+  ],
+  bool: [
+    { label: '等于', value: 'eq' },
+    { label: '不等于', value: 'ne' },
+  ],
+  list: [
+    { label: '包含', value: 'contains' },
+    { label: '不包含', value: 'not_contains' },
+    { label: '为空', value: 'is_empty' },
+    { label: '不为空', value: 'is_not_empty' },
+    { label: '长度等于', value: 'length_eq' },
+    { label: '长度大于', value: 'length_gt' },
+    { label: '长度小于', value: 'length_lt' },
+  ],
+  dict: [
+    { label: '包含键', value: 'has_key' },
+    { label: '不包含键', value: 'not_has_key' },
+    { label: '为空', value: 'is_empty' },
+    { label: '不为空', value: 'is_not_empty' },
+  ],
+};
+
+// 值类型选项
+const valueTypeOptions = [
+  { label: '字符串', value: 'string' },
+  { label: '数字', value: 'number' },
+  { label: '布尔值', value: 'bool' },
+  { label: '列表', value: 'list' },
+  { label: '字典', value: 'dict' },
+  { label: '引用变量', value: 'reference' },
+];
+
+// 逻辑运算符选项
+const logicOptions = [
+  { label: '且 (AND)', value: 'and' },
+  { label: '或 (OR)', value: 'or' },
+];
+
+// 初始化表单数据
+const initFormData = () => {
+  if (props.nodeData) {
+    const allChoices = JSON.parse(JSON.stringify(props.nodeData.parameters?.input_parameters?.choices || []));
+    
+    // 分离默认分支和非默认分支
+    let defaultBranches = allChoices.filter(choice => choice.is_default);
+    let nonDefaultChoices = allChoices.filter(choice => !choice.is_default);
+    
+    // 验证默认分支数量
+    if (defaultBranches.length > 1) {
+      ElMessage.error('数据错误：不能有多个默认分支');
+      defaultBranches = [defaultBranches[0]]; // 只保留第一个默认分支
+    }
+    
+    formData.value = {
+      name: props.nodeData.name || '条件分支',
+      description: props.nodeData.description || '',
+      choices: nonDefaultChoices,
+      defaultBranch: defaultBranches.length > 0 ? defaultBranches[0] : null,
+    };
+
+    // 确保每个非默认choice都有必要的字段
+    formData.value.choices = formData.value.choices.map((choice, index) => ({
+      branch_id: choice.branch_id || uuidv4(),
+      name: choice.name || `分支 ${index + 1}`,
+      logic: choice.logic || 'and',
+      conditions: (choice.conditions || []).map(condition => ({
+        id: condition.id || uuidv4(),
+        left: {
+          type: condition.left?.type || 'reference',
+          value: condition.left?.value || '',
+        },
+        right: {
+          type: condition.right?.type || 'string',
+          value: condition.right?.value || '',
+        },
+        operate: condition.operate || 'string_equal',
+        dataType: condition.dataType || 'string',
+        isRightReference: condition.isRightReference !== undefined ? condition.isRightReference : false,
+      })),
+      is_default: false, // 确保非默认分支的is_default为false
+    }));
+    
+    // 确保默认分支有必要的字段
+    if (formData.value.defaultBranch) {
+      formData.value.defaultBranch = {
+        branch_id: formData.value.defaultBranch.branch_id || uuidv4(),
+        name: 'ELSE',
+        logic: 'and',
+        conditions: [],
+        is_default: true,
+      };
+    }
+    
+    // 如果没有非默认分支，初始化一个IF分支
+    if (formData.value.choices.length === 0) {
+      initDefaultBranches();
+    } else {
+      // 更新非默认分支名称为 IF/ELIF
+      updateBranchNames();
+    }
+    
+    // 如果没有默认分支，创建一个
+    if (!formData.value.defaultBranch) {
+      formData.value.defaultBranch = {
+        branch_id: uuidv4(),
+        name: 'ELSE',
+        logic: 'and',
+        conditions: [],
+        is_default: true,
+      };
+    }
+  }
+};
+
+
+
+// 更新非默认分支名称
+const updateBranchNames = () => {
+  formData.value.choices.forEach((choice, index) => {
+    if (index === 0) {
+      choice.name = 'IF';
+    } else {
+      choice.name = 'ELIF';
+    }
+  });
+};
+
+// 创建空条件
+const createEmptyCondition = () => ({
+  id: uuidv4(),
+  left: {
+    type: 'reference',
+    value: '',
+  },
+  right: {
+    type: 'string',
+    value: '',
+  },
+  operate: 'string_equal',
+  dataType: 'string',
+  isRightReference: false,
+});
+
+// 初始化默认分支（只初始化一个IF分支）
+const initDefaultBranches = () => {
+  formData.value.choices = [
+    {
+      branch_id: uuidv4(),
+      name: 'IF',
+      logic: 'and',
+      conditions: [createEmptyCondition()],
+      is_default: false,
+    }
+  ];
+};
+
+// 添加新分支
+const addBranch = () => {
+  // 添加新的 ELIF 分支到非默认分支列表末尾
+  const newBranch = {
+    branch_id: uuidv4(),
+    name: 'ELIF',
+    logic: 'and',
+    conditions: [createEmptyCondition()],
+    is_default: false,
+  };
+  
+  formData.value.choices.push(newBranch);
+  
+  // 更新分支名称
+  updateBranchNames();
+};
+
+// 删除分支
+const removeBranch = (index) => {
+  formData.value.choices.splice(index, 1);
+  // 删除后更新分支名称
+  updateBranchNames();
+};
+
+// 添加条件
+const addCondition = (choiceIndex) => {
+  formData.value.choices[choiceIndex].conditions.push(createEmptyCondition());
+};
+
+// 删除条件
+const removeCondition = (choiceIndex, conditionIndex) => {
+  const choice = formData.value.choices[choiceIndex];
+  choice.conditions.splice(conditionIndex, 1);
+};
+
+// 切换逻辑运算符
+const toggleLogic = (choiceIndex) => {
+  const choice = formData.value.choices[choiceIndex];
+  choice.logic = choice.logic === 'and' ? 'or' : 'and';
+};
+
+// 更新条件
+const updateCondition = (choiceIndex, conditionIndex, condition) => {
+  formData.value.choices[choiceIndex].conditions[conditionIndex] = condition;
+};
+
+
+
+// 验证表单
+const validateForm = () => {
+  if (!formData.value.name.trim()) {
+    ElMessage.error('请输入节点名称');
+    return false;
+  }
+  
+  if (formData.value.choices.length === 0) {
+    ElMessage.error('至少需要一个条件分支');
+    return false;
+  }
+  
+  if (!formData.value.defaultBranch) {
+    ElMessage.error('必须设置默认分支');
+    return false;
+  }
+  
+  // 验证所有条件分支（非默认分支）
+  for (const choice of formData.value.choices) {
+    if (choice.conditions.length === 0) {
+      ElMessage.error(`${choice.name} 分支需要至少一个条件`);
+      return false;
+    }
+    
+    for (const condition of choice.conditions) {
+      if (!condition.left.value || condition.left.value === '') {
+        ElMessage.error(`${choice.name} 分支存在未填写的左值变量`);
+        return false;
+      }
+      if (!condition.right.value || condition.right.value === '') {
+        ElMessage.error(`${choice.name} 分支存在未填写的右值`);
+        return false;
+      }
+      if (!condition.operate) {
+        ElMessage.error(`${choice.name} 分支存在未选择的操作符`);
+        return false;
+      }
+    }
+  }
+  
+  return true;
+};
+
+// 保存节点
+const saveNode = () => {
+  if (!validateForm()) {
+    return;
+  }
+  
+  // 合并非默认分支和默认分支
+  const allChoices = [...formData.value.choices];
+  // if (formData.value.defaultBranch) {
+  //   allChoices.push(formData.value.defaultBranch);
+  // }
+  
+  const nodeData = {
+    name: formData.value.name,
+    description: formData.value.description,
+    callId: 'Choice',
+    parameters: {
+      input_parameters: {
+        choices: allChoices,
+      },
+      output_parameters: {
+        branch_id: '',
+      },
+    },
+  };
+  
+  emit('saveNode', nodeData, props.nodeId);
+  handleClose();
+};
+
+// 关闭抽屉
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+// 监听visible变化
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (newVal) {
+      nextTick(() => {
+        initFormData();
+      });
+    }
+  },
+  { immediate: true }
+);
+
+// 解析值输入
+const parseValue = (value, type) => {
+  if (type === 'number') {
+    const num = parseFloat(value);
+    return isNaN(num) ? 0 : num;
+  } else if (type === 'bool') {
+    return value === 'true' || value === true;
+  } else if (type === 'list') {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return [];
+    }
+  } else if (type === 'dict') {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return {};
+    }
+  }
+  return value;
+};
+
+// 格式化值显示
+const formatValue = (value, type) => {
+  if (type === 'list' || type === 'dict') {
+    return JSON.stringify(value);
+  }
+  return String(value);
+};
+</script>
+
+<template>
+  <el-drawer
+    :model-value="visible"
+    @update:model-value="emit('update:visible', $event)"
+    title="配置条件分支"
+    direction="rtl"
+    size="600px"
+    :before-close="handleClose"
+    class="choice-branch-drawer"
+  >
+    <div class="drawer-content">
+      <!-- 基本信息 -->
+      <div class="section">
+        <h3 class="section-title">基本信息</h3>
+        <el-form :model="formData" label-width="100px">
+          <el-form-item label="节点名称" required>
+            <el-input v-model="formData.name" placeholder="请输入节点名称" />
+          </el-form-item>
+          <el-form-item label="节点描述" label-width="100px">
+            <el-input
+              v-model="formData.description"
+              type="textarea"
+              :rows="2"
+              placeholder="请输入节点描述"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 分支配置 -->
+      <div class="section">
+        <div class="section-header">
+          <h3 class="section-title">分支配置</h3>
+        </div>
+
+        <div class="branches-container">
+          <!-- 非默认分支 -->
+          <ChoiceBranchCard
+            v-for="(choice, choiceIndex) in formData.choices"
+            :key="choice.branch_id"
+            :choice="choice"
+            :choice-index="choiceIndex"
+            :value-type-options="valueTypeOptions"
+            :operator-options="operatorOptions"
+            :can-delete="formData.choices.length > 1"
+            :flow-id="flowId"
+            :conversation-id="conversationId"
+            :current-step-id="currentStepId"
+            @remove-branch="removeBranch"
+            @add-condition="addCondition"
+            @remove-condition="removeCondition"
+            @toggle-logic="toggleLogic"
+            @update-condition="updateCondition"
+          />
+
+          <!-- 添加分支按钮 -->
+          <div class="add-branch-container">
+            <button class="add-branch-btn" @click="addBranch">
+              <Plus />
+              ELIF
+            </button>
+          </div>
+
+          <!-- 分割线 -->
+          <div class="divider"></div>
+
+          <!-- 默认分支 -->
+          <div v-if="formData.defaultBranch" class="default-branch-section">
+            <h3 class="else-title">ELSE</h3>
+            <p class="else-description">用于定义当IF/ELIF条件均不满足时执行的分支</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <template #footer>
+      <div class="drawer-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="saveNode">保存</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="scss" scoped>
+.choice-branch-drawer {
+  :deep(.el-drawer__body) {
+    padding: 0;
+  }
+}
+
+.drawer-content {
+  height: 100%;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.section {
+  margin-bottom: 24px;
+  
+  .section-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    margin: 0 0 16px 0;
+  }
+  
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+}
+
+.branches-container {
+  .add-branch-container {
+    margin-bottom: 16px;
+    
+    .add-branch-btn {
+      width: calc(100% - 20px);
+      padding: 12px 16px;
+      background-color: #f2f4f7;
+      color: black;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: all 0.2s;
+      
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+      
+      &:hover {
+        background-color: #e5e7eb;
+      }
+      
+      &:active {
+        transform: translateY(1px);
+      }
+    }
+  }
+
+  .divider {
+    height: 1px;
+    background: #e4e7ed;
+    margin: 24px 0;
+  }
+
+  .default-branch-section {    
+    .else-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+      margin: 0 0 8px 0;
+    }
+    
+    .else-description {
+      font-size: 14px;
+      color: #909399;
+      margin: 0;
+      line-height: 1.5;
+    }
+  }
+
+
+}
+
+.drawer-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #e4e7ed;
+  background: #f8f9fa;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+// 深色主题支持
+.dark {
+  .choice-branch-drawer {
+    .drawer-content {
+      background: #1a1a1a;
+    }
+    
+    .section-title {
+      color: #e5e7eb;
+    }
+    
+    .drawer-footer {
+      background: #374151;
+      border-color: #4b5563;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/createapp/components/workFlowConfig/ChoiceBranchNode.vue b/src/views/createapp/components/workFlowConfig/ChoiceBranchNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..70972f0c5e0f5a2e069589bf453015270e9e434d
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/ChoiceBranchNode.vue
@@ -0,0 +1,996 @@
+<script lang="ts" setup>
+import { Position, Handle } from '@vue-flow/core';
+import { ref, computed, watch } from 'vue';
+import NodeMirrorText from '../codeMirror/nodeMirrorText.vue';
+import { CopyDocument, Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { IconSuccess } from '@computing/opendesign-icons';
+import { useI18n } from 'vue-i18n';
+import { getSrcIcon } from '../types';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: false,
+  },
+  position: {
+    type: Object,
+    required: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits(['delNode', 'editYamlDrawer', 'updateConnectHandle']);
+
+const { t } = useI18n();
+
+const statusList = ref(['running', 'success', 'error']);
+const curStatus = ref('');
+const costTime = ref('');
+
+// 控制删除按钮文字显示
+const showDeleteText = ref(false);
+
+// 当前handle是否连接中[分别是target和source]
+const handleTargetConnecting = ref(false);
+const handleSourceConnecting = ref(false);
+
+// 定义传给mirror展示输入输出的存储量
+const inputAndOutput = ref({
+  input_parameters: {},
+  output_parameters: {},
+});
+
+// 计算分支列表
+const branches = computed(() => {
+  console.log(props.data);
+  const choices = props.data?.parameters?.input_parameters?.choices || [];
+  return choices.map((choice, index) => {
+    return {
+      id: choice.branch_id || `branch_${index}`,
+      name: choice.name || `分支 ${index + 1}`,
+      isDefault: choice.is_default || false,
+      conditions: choice.conditions || [],
+      logic: choice.logic || 'and'
+    };
+  });
+});
+
+// 计算条件分支（非默认分支）
+const conditionalBranches = computed(() => {
+  return branches.value.filter(branch => !branch.isDefault);
+});
+
+// 计算默认分支
+const defaultBranch = computed(() => {
+  return branches.value.find(branch => branch.isDefault);
+});
+
+// 处理节点点击事件
+const handleNodeClick = () => {
+  if (!props.disabled) {
+    editYaml(props.data.name, props.data.description, props.data.parameters);
+  }
+};
+
+// 监听数据变化
+watch(
+  () => props.data,
+  () => {
+    const isInclude = statusList.value.includes(props.data?.status);
+    // 设置节点的状态
+    if (!isInclude) {
+      curStatus.value = 'default';
+    } else {
+      curStatus.value = props.data?.status;
+    }
+    
+    // 节点调试消耗时间
+    costTime.value = props.data?.constTime || '';
+    
+    // 默认的输入赋值
+    inputAndOutput.value.input_parameters =
+      props.data?.parameters?.input_parameters || {};
+      
+    // 判断是否有调试的输入输出
+    if (props.data.content?.type === 'input') {
+      inputAndOutput.value.input_parameters = props.data.content.params;
+    } else if (props.data.content?.type === 'output') {
+      inputAndOutput.value.output_parameters = props.data.content.params;
+    } else {
+      inputAndOutput.value.input_parameters =
+        props.data?.parameters?.input_parameters || {};
+      inputAndOutput.value.output_parameters =
+        props.data?.parameters?.output_parameters || {};
+    }
+    
+    // 重置Handle连接状态
+    handleTargetConnecting.value = false;
+    handleSourceConnecting.value = false;
+  },
+  { deep: true, immediate: true },
+);
+
+const delNode = (id) => {
+  emits('delNode', id);
+};
+
+// 编辑条件分支
+const editYaml = (nodeName, nodeDesc, yamlCode) => {
+  emits('editYamlDrawer', nodeName, nodeDesc, yamlCode, props.id);
+};
+
+const handleCopyTextToclipboard = (text) => {
+  const input = document.createElement('input');
+  input.value = text;
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand('copy');
+  ElMessage({
+    showClose: true,
+    message: t('feedback.copied_successfully'),
+    icon: IconSuccess,
+    customClass: 'o-message--success',
+    duration: 2000,
+  });
+  document.body.removeChild(input);
+};
+
+// 设置当前正在连接[这里是使连接过程中，handle节点高亮]
+const setConnectStatus = (type) => {
+  if (type === 'source') {
+    handleSourceConnecting.value = true;
+  } else {
+    handleTargetConnecting.value = true;
+  }
+  // 更新当前节点handle连接状态
+  emits('updateConnectHandle', props.id);
+};
+
+// 操作符中文映射
+const operatorLabels = {
+  'string_equal': '等于',
+  'string_not_equal': '不等于',
+  'string_contains': '包含',
+  'string_not_contains': '不包含',
+  'string_starts_with': '开始于',
+  'string_ends_with': '结束于',
+  'string_length_equal': '长度等于',
+  'string_length_greater_than': '长度大于',
+  'string_length_greater_than_or_equal': '长度大于等于',
+  'string_length_less_than': '长度小于',
+  'string_length_less_than_or_equal': '长度小于等于',
+  'string_regex_match': '正则匹配',
+  'number_equal': '等于',
+  'number_not_equal': '不等于',
+  'number_greater_than': '大于',
+  'number_less_than': '小于',
+  'number_greater_than_or_equal': '大于等于',
+  'number_less_than_or_equal': '小于等于',
+  'list_equal': '等于',
+  'list_not_equal': '不等于',
+  'list_contains': '包含',
+  'list_not_contains': '不包含',
+  'list_length_equal': '长度等于',
+  'list_length_greater_than': '长度大于',
+  'list_length_greater_than_or_equal': '长度大于等于',
+  'list_length_less_than': '长度小于',
+  'list_length_less_than_or_equal': '长度小于等于',
+  'bool_equal': '等于',
+  'bool_not_equal': '不等于',
+  'dict_equal': '等于',
+  'dict_not_equal': '不等于',
+  'dict_contains_key': '包含键',
+  'dict_not_contains_key': '不包含键',
+};
+
+// 解析变量引用，提取变量名
+const parseVariableReference = (variableRef) => {
+  if (!variableRef || typeof variableRef !== 'string') {
+    return '?';
+  }
+  
+  // 格式: conversation.step_id.variable_name 或 scope.variable_name
+  const parts = variableRef.split('.');
+  if (parts.length >= 2) {
+    // 返回最后一部分作为变量名
+    return parts[parts.length - 1];
+  }
+  
+  return variableRef;
+};
+
+// 根据数据类型格式化值
+const formatValueByType = (value, dataType, isReference = false) => {
+  if (isReference) {
+    return parseVariableReference(value);
+  }
+  
+  if (!value && value !== 0 && value !== false) {
+    return '?';
+  }
+  
+  switch (dataType) {
+    case 'string':
+      return `"${value}"`;
+    case 'number':
+      return String(value);
+    case 'bool':
+      return String(value);
+    case 'list':
+      return Array.isArray(value) ? `[${value.join(', ')}]` : `[${value}]`;
+    case 'dict':
+      return typeof value === 'object' ? JSON.stringify(value) : `{${value}}`;
+    default:
+      return String(value);
+  }
+};
+
+// 格式化条件显示
+const formatConditions = (conditions, logic) => {
+  if (!conditions || conditions.length === 0) {
+    return '条件未设置';
+  }
+  
+  const conditionTexts = conditions.map(condition => {
+    // 解析左值（变量）
+    const leftValue = parseVariableReference(condition.left?.value);
+    
+    // 获取操作符中文
+    const operatorLabel = operatorLabels[condition.operate] || condition.operate || '==';
+    
+    // 解析右值
+    const isRightReference = condition.right?.type === 'reference';
+    const rightValue = formatValueByType(
+      condition.right?.value, 
+      condition.dataType || 'string',
+      isRightReference
+    );
+    
+    return `${leftValue} ${operatorLabel} ${rightValue}`;
+  });
+  
+  const logicText = logic === 'and' ? ' 且 ' : ' 或 ';
+  return conditionTexts.join(logicText);
+};
+
+// 格式化条件显示为HTML（带标签样式）
+const formatConditionsHtml = (conditions, logic) => {
+  if (!conditions || conditions.length === 0) {
+    return '<span class="no-condition">条件未设置</span>';
+  }
+  
+  const conditionTexts = conditions.map(condition => {
+    // 解析左值（变量）- 添加标签样式
+    const leftValue = parseVariableReference(condition.left?.value);
+    const leftHtml = `<span class="variable-tag">${leftValue}</span>`;
+    
+    // 获取操作符中文 - 添加操作符样式
+    const operatorLabel = operatorLabels[condition.operate] || condition.operate || '==';
+    const operatorHtml = `<span class="operator-text">${operatorLabel}</span>`;
+    
+    // 解析右值 - 根据类型添加不同样式
+    const isRightReference = condition.right?.type === 'reference';
+    const rightValue = formatValueByType(
+      condition.right?.value, 
+      condition.dataType || 'string',
+      isRightReference
+    );
+    
+    let rightHtml;
+    if (isRightReference) {
+      rightHtml = `<span class="variable-tag">${rightValue}</span>`;
+    } else {
+      rightHtml = `<span class="value-text ${condition.dataType || 'string'}-value">${rightValue}</span>`;
+    }
+    
+    return `${leftHtml} ${operatorHtml} ${rightHtml}`;
+  });
+  
+  const logicText = logic === 'and' ? ' <span class="logic-text">且</span> ' : ' <span class="logic-text">或</span> ';
+  return conditionTexts.join(logicText);
+};
+</script>
+
+<template>
+  <div class="choiceBranchNodeStyle" :class="[curStatus, { 'node-selected': selected }]">
+    <!-- 左侧输入handle -->
+    <Handle
+      :class="{ isConnecting: handleTargetConnecting }"
+      @mousedown="setConnectStatus('target')"
+      type="target"
+      :position="Position.Left"
+    ></Handle>
+
+    <div class="nodeContainer">
+      <!-- 节点主体 -->
+      <div class="nodeBox" @click="handleNodeClick">
+        <!-- 节点标题 -->
+        <div class="title" v-if="props.data.name">
+          <div class="iconLabel">
+            <img
+              class="iconStyle"
+              v-if="props.data.nodeId"
+              :src="getSrcIcon(props.data)"
+            />
+            <div class="iconStyle choiceIcon" v-else>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8a8 8 0 0 1-8 8z"/>
+                <path fill="currentColor" d="M12 7a1 1 0 0 0-1 1v4H8a1 1 0 0 0 0 2h3v3a1 1 0 0 0 2 0v-3h3a1 1 0 0 0 0-2h-3V8a1 1 0 0 0-1-1z"/>
+              </svg>
+            </div>
+            <div class="label">{{ props.data.name }}</div>
+          </div>
+        </div>
+
+        <!-- 分支列表 -->
+        <div class="branchList" v-if="branches.length > 0">
+          <!-- 条件分支 -->
+          <div 
+            class="branchItem" 
+            v-for="(branch, index) in conditionalBranches" 
+            :key="branch.id"
+          >
+            <div class="branchHeader">
+              <span class="caseLabel">CASE {{ index + 1 }}</span>
+              <div class="branchTypeLabel if-label">{{ index === 0 ? 'IF' : 'ELIF' }}</div>
+            </div>
+            <div class="branchContent">
+              <div class="branchCondition">
+                <span v-html="formatConditionsHtml(branch.conditions, branch.logic)"></span>
+              </div>
+            </div>
+
+            <!-- 右侧输出handle -->
+            <Handle
+              class="sourceHandle"
+              :id="branch.id"
+              type="source"
+              :position="Position.Right"
+              @mousedown="setConnectStatus('source')"
+              :class="{ isConnecting: handleSourceConnecting }"
+            ></Handle>
+          </div>
+          
+          <!-- 默认分支 ELSE -->
+          <div 
+            class="branchItem"
+            v-if="defaultBranch"
+            :key="defaultBranch.id"
+          >
+            <div class="branchHeader">
+              <span class="caseLabel">ELSE</span>
+              <div class="branchTypeLabel else-label">ELSE</div>
+            </div>
+            <div class="branchContent">
+              <div class="branchCondition">
+                <span class="defaultText">其他所有情况</span>
+              </div>
+            </div>
+
+            <!-- 右侧输出handle -->
+            <Handle
+              class="sourceHandle"
+              :id="defaultBranch.id"
+              type="source"
+              :position="Position.Right"
+              @mousedown="setConnectStatus('source')"
+              :class="{ isConnecting: handleSourceConnecting }"
+            ></Handle>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div class="emptyBranches" v-else>
+          <div class="emptyText">点击编辑添加分支条件</div>
+        </div>
+      </div>
+
+      <!-- 节点底部信息 -->
+      <div class="nodeFooter" v-if="props.id">
+        <div class="nodeIdText">
+          <span>{{ props.id }}</span>
+        </div>
+        <el-icon
+          class="copydocument"
+          @click="handleCopyTextToclipboard(props.id)"
+        >
+          <CopyDocument />
+        </el-icon>
+      </div>
+
+      <!-- 调试结果显示 -->
+      <NodeMirrorText
+        v-if="curStatus !== 'default'"
+        :status="curStatus"
+        :costTime="costTime"
+        :inputAndOutput="inputAndOutput"
+        style="display: block"
+      ></NodeMirrorText>
+    </div>
+    
+    <!-- 右上角删除按钮小卡片 -->
+    <div class="deleteCardWrapper" v-if="!props.disabled">
+      <div class="deleteCard">
+        <button
+          class="deleteButton"
+          @click="delNode(props.id)"
+          :title="$t('semantic.interface_delete')"
+          @mouseenter="showDeleteText = true"
+          @mouseleave="showDeleteText = false"
+        >
+          <el-icon class="delete-icon">
+            <Delete />
+          </el-icon>
+          <span class="delete-text" v-show="showDeleteText">{{ $t('semantic.interface_delete') }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.choiceBranchNodeStyle {
+  position: relative;
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-width: 320px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: #6395fd;
+    box-shadow: 0 4px 12px rgba(99, 149, 253, 0.2);
+    
+    .deleteCardWrapper {
+      opacity: 1;
+    }
+  }
+
+  &.node-selected {
+    border-color: #6395fd;
+    box-shadow: 0 0 0 2px rgba(99, 149, 253, 0.2);
+  }
+
+  // 状态样式
+  &.running {
+    border-color: #f39c12;
+    .title .iconStyle {
+      color: #f39c12;
+    }
+  }
+
+  &.success {
+    border-color: #27ae60;
+    .title .iconStyle {
+      color: #27ae60;
+    }
+  }
+
+  &.error {
+    border-color: #e74c3c;
+    .title .iconStyle {
+      color: #e74c3c;
+    }
+  }
+
+  .nodeContainer {
+    position: relative;
+    z-index: 1;
+  }
+
+  .nodeBox {
+    padding: 16px;
+    cursor: pointer;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    
+    .iconLabel {
+      display: flex;
+      align-items: center;
+    }
+
+    .iconStyle {
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #6395fd;
+      
+      &.choiceIcon {
+        background: rgba(99, 149, 253, 0.1);
+        border-radius: 4px;
+      }
+    }
+
+    .label {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 600;
+      color: #24292e;
+    }
+  }
+
+  .branchList {
+    .branchItem {
+      position: relative;
+      margin-bottom: 2px;
+      background: #ffffff;
+      border: 1px solid #e8eaed;
+      border-radius: 6px;
+      transition: all 0.2s ease;
+      overflow: visible;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        border-color: #6395fd;
+        box-shadow: 0 1px 4px rgba(99, 149, 253, 0.1);
+      }
+
+      .branchHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px 4px 12px;
+        
+        .caseLabel {
+          font-size: 11px;
+          font-weight: 600;
+          color: #6b7280;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+        
+        .branchTypeLabel {
+          font-size: 10px;
+          font-weight: 600;
+          padding: 2px 6px;
+          border-radius: 3px;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+          
+          &.if-label {
+            background: #3b82f6;
+            color: #ffffff;
+          }
+          
+          &.else-label {
+            background: #f59e0b;
+            color: #ffffff;
+          }
+        }
+      }
+
+      .branchContent {
+        padding: 0 12px 8px 12px;
+        margin-right: 20px;
+      }
+
+      .branchCondition {
+        font-size: 12px;
+        color: #374151;
+        line-height: 1.4;
+        word-break: break-word;
+        
+        // 变量标签样式
+        :deep(.variable-tag) {
+          display: inline-block;
+          padding: 2px 6px;
+          background: #e3f2fd;
+          border: 1px solid #90caf9;
+          border-radius: 4px;
+          font-size: 11px;
+          font-weight: 500;
+          color: #1565c0;
+          margin: 0 2px;
+        }
+        
+        // 操作符文本样式
+        :deep(.operator-text) {
+          display: inline-block;
+          padding: 1px 4px;
+          font-weight: 600;
+          color: #5c6ac4;
+          margin: 0 4px;
+        }
+        
+        // 逻辑连接符样式
+        :deep(.logic-text) {
+          display: inline-block;
+          padding: 1px 4px;
+          font-weight: 600;
+          color: #ed6c02;
+          margin: 0 4px;
+        }
+        
+        // 值文本样式
+        :deep(.value-text) {
+          display: inline-block;
+          padding: 1px 4px;
+          font-weight: 500;
+          margin: 0 2px;
+          
+          &.string-value {
+            color: #2e7d32;
+            font-style: italic;
+          }
+          
+          &.number-value {
+            color: #d32f2f;
+            font-weight: 600;
+          }
+          
+          &.bool-value {
+            color: #7b1fa2;
+            font-weight: 600;
+          }
+          
+          &.list-value,
+          &.dict-value {
+            color: #f57c00;
+            font-family: monospace;
+          }
+        }
+        
+        // 无条件状态样式
+        :deep(.no-condition) {
+          color: #9e9e9e;
+          font-style: italic;
+        }
+        
+        // 默认分支文本样式
+        .defaultText {
+          color: #6b7280;
+          font-style: italic;
+        }
+      }
+
+      .sourceHandle {
+        position: absolute;
+        top: 50%;
+        right: -6px;
+        transform: translateY(-50%);
+        width: 12px;
+        height: 12px;
+        background: #c3cedf;
+        border: 2px solid #ffffff;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        z-index: 10;
+        
+        &.isConnecting {
+          background: #6395fd;
+          width: 14px;
+          height: 14px;
+          box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
+        }
+        
+        &:hover {
+          background: #6395fd;
+          width: 14px;
+          height: 14px;
+          box-shadow: 0 2px 8px rgba(99, 149, 253, 0.3);
+        }
+      }
+    }
+  }
+
+  .emptyBranches {
+    padding: 20px;
+    text-align: center;
+    color: #6b7280;
+    background: #f9fafb;
+    border: 2px dashed #d1d5db;
+    border-radius: 6px;
+    
+    .emptyText {
+      font-size: 13px;
+      font-style: italic;
+    }
+  }
+
+  .nodeFooter {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    border-top: 1px solid #e5e7eb;
+    background: #f9fafb;
+    border-radius: 0 0 8px 8px;
+    
+    .nodeIdText {
+      font-size: 11px;
+      color: #6b7280;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    }
+    
+    .copydocument {
+      font-size: 12px;
+      color: #6b7280;
+      cursor: pointer;
+      
+      &:hover {
+        color: #6395fd;
+      }
+    }
+  }
+
+  // Handle样式覆盖
+  :deep(.vue-flow__handle-left) {
+    background: #c3cedf;
+    border: 2px solid #ffffff;
+    width: 12px;
+    height: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    transition: all 0.2s ease;
+    
+    &.isConnecting {
+      background: #6395fd;
+      width: 14px;
+      height: 14px;
+      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
+    }
+    
+    &:hover {
+      background: #6395fd;
+      width: 14px;
+      height: 14px;
+      box-shadow: 0 2px 8px rgba(99, 149, 253, 0.3);
+    }
+  }
+
+  // 删除按钮样式
+  .deleteCardWrapper {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .deleteCard {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 自定义删除按钮样式 - 悬浮圆形到圆角矩形动画 */
+  .deleteButton {
+    /* 基础样式 */
+    border: none;
+    background-color: #f56c6c;
+    color: #ffffff;
+    cursor: pointer;
+    padding: 0;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    
+    /* 圆形按钮尺寸 */
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    
+    /* 布局样式 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    overflow: hidden;
+    
+    /* 悬浮效果 */
+    box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
+    
+    /* 动画效果 - 分离不同属性的动画时间 */
+    transition: 
+      width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.3s ease;
+    
+    /* 初始变形状态 */
+    transform: scaleX(1) translateY(0);
+    transform-origin: center;
+    
+    /* 移除默认按钮样式 */
+    outline: none;
+    text-decoration: none;
+    box-sizing: border-box;
+    
+    &:hover {
+      background-color: #f56c6c;
+      color: #ffffff;
+      
+      /* 展开为圆角矩形 */
+      width: 88px;
+      height: 32px;
+      border-radius: 16px;
+      padding: 0 12px;
+      
+      /* 左右拉伸变形效果 */
+      transform: scaleX(1.05) translateY(-1px);
+      
+      /* 增强悬浮效果 */
+      box-shadow: 0 6px 20px rgba(245, 108, 108, 0.5);
+    }
+    
+    &:active {
+      background-color: #e6a23c;
+      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.6);
+      transform: scaleX(1) translateY(0);
+    }
+    
+    &:focus {
+      outline: 2px solid #f56c6c40;
+      outline-offset: 2px;
+    }
+  }
+
+  .delete-icon {
+    font-size: 14px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .deleteButton:hover .delete-icon {
+    transform: scale(0.9);
+  }
+
+  .delete-text {
+    font-size: 12px;
+    margin-left: 6px;
+    opacity: 0;
+    transform: translateX(-8px) scale(0.8);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .deleteButton:hover .delete-text {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+// 深色主题支持
+.dark {
+  .choiceBranchNodeStyle {
+    background: #1f2937;
+    border-color: #374151;
+    
+    .title .label {
+      color: #f3f4f6;
+    }
+    
+    .branchItem {
+      background: #374151;
+      border-color: #4b5563;
+      
+      &:hover {
+        border-color: #6395fd;
+      }
+      
+      .branchHeader .caseLabel {
+        color: #9ca3af;
+      }
+      
+      .branchCondition {
+        color: #d1d5db;
+        
+        // 深色主题下的变量标签样式
+        :deep(.variable-tag) {
+          background: #1e3a8a;
+          border-color: #3b82f6;
+          color: #93c5fd;
+        }
+        
+        // 深色主题下的操作符文本样式
+        :deep(.operator-text) {
+          color: #a5b4fc;
+        }
+        
+        // 深色主题下的逻辑连接符样式
+        :deep(.logic-text) {
+          color: #fb923c;
+        }
+        
+        // 深色主题下的值文本样式
+        :deep(.value-text) {
+          &.string-value {
+            color: #86efac;
+          }
+          
+          &.number-value {
+            color: #fca5a5;
+          }
+          
+          &.bool-value {
+            color: #d8b4fe;
+          }
+          
+          &.list-value,
+          &.dict-value {
+            color: #fdba74;
+          }
+        }
+        
+        // 深色主题下的无条件状态样式
+        :deep(.no-condition) {
+          color: #6b7280;
+        }
+        
+        // 深色主题下的默认分支文本样式
+        .defaultText {
+          color: #9ca3af;
+          font-style: italic;
+        }
+      }
+      
+      .sourceHandle {
+        background: #6395fd;
+        border-color: #374151;
+        
+        &.isConnecting {
+          background: #4f46e5;
+          border-color: #374151;
+        }
+      }
+    }
+    
+    .emptyBranches {
+      background: #374151;
+      border-color: #4b5563;
+      color: #9ca3af;
+    }
+    
+    .nodeFooter {
+      background: #374151;
+      border-color: #4b5563;
+      
+      .nodeIdText {
+        color: #9ca3af;
+      }
+    }
+    
+    // 深色主题下的Handle样式
+    :deep(.vue-flow__handle-left) {
+      background: #6395fd;
+      border-color: #374151;
+      
+      &.isConnecting {
+        background: #4f46e5;
+        border-color: #374151;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue b/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue
index 8ec4414b514288fd2065cbcd28ebe4997051c54e..46a2192e5e59e9158fdca603d853e22ed1547a43 100644
--- a/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/CodeNodeDrawer.vue
@@ -83,6 +83,7 @@
                             v-model:selected-variable="variable.selectedVariable"
                             :supported-scopes="['conversation', 'system', 'env']"
                             :flow-id="flowId"
+                            :current-step-id="nodeId"
                             :show-variable-reference="true"
                             :show-actions="true"
                             :show-variable-info="true"
@@ -713,7 +714,6 @@ const handleLanguageChange = (language: string) => {
   if (!nodeConfig.value.code || nodeConfig.value.code.trim() === '') {
     nodeConfig.value.code = generateTemplateByLanguage(language)
   }
-  console.log('Language changed to:', language)
 }
 
 const addInputVariable = () => {
@@ -883,7 +883,6 @@ watch(drawerVisible, (newVal) => {
 
 // 监听nodeData变化
 watch(() => props.nodeData, (newData: any) => {
-  console.log(newData);
   if (newData) {
     loadNodeData(newData)
   }
diff --git a/src/views/createapp/components/workFlowConfig/CustomEdge.vue b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
index 1650f0456bbcae9cdc2ab41b13beeb288efedb4f..ef619955fabe29ab1a0f52be78c8850dea80ff3a 100644
--- a/src/views/createapp/components/workFlowConfig/CustomEdge.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
@@ -1,5 +1,5 @@
 <template>
-  <g class="flowEdge">
+  <g class="flowEdge" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
     <linearGradient id="success_error">
       <stop offset="0" stop-color="#24ab36" />
       <stop offset="100" stop-color="#e32020" />
@@ -8,6 +8,8 @@
       <stop offset="0" stop-color="#e32020" />
       <stop offset="100" stop-color="#24ab36" />
     </linearGradient>
+    
+    <!-- 主路径 -->
     <path
       v-if="status === 'success_error' || status === 'error_success'"
       :d="`M ${targetX - 10} ${targetY - 60}` + path"
@@ -15,6 +17,7 @@
       :stroke="`url(#${status})`"
       stroke-width="2"
       stroke-dasharray="0"
+      class="edge-path"
     />
     <path
       v-else
@@ -23,7 +26,19 @@
       :stroke="strokeColor[status]"
       stroke-width="2"
       :stroke-dasharray="status === 'running' ? 5 : 0"
+      class="edge-path"
     />
+    
+    <!-- 不可见的更宽路径，用于更好的悬停检测 -->
+    <path
+      :d="`M ${targetX - 10} ${targetY - 60}` + path"
+      fill="none"
+      stroke="transparent"
+      stroke-width="20"
+      class="edge-interaction"
+    />
+
+    <!-- 箭头 -->
     <path
       class="markEnd"
       :transform="transform"
@@ -31,6 +46,33 @@
       :fill="strokeColor[status] || '#c3cedf'"
       stroke="none"
     />
+    
+    <!-- 插入节点按钮 - 仅在非连接状态且悬停时显示 -->
+    <g
+      class="insert-node-button"
+      :class="{ 'show': !isConnection && isHovered && !disabled }"
+      @click="handleInsertNode"
+    >
+      <!-- 按钮背景圆圈 -->
+      <circle
+        :cx="midX"
+        :cy="midY"
+        :r="buttonRadius"
+        fill="#6395fd"
+        class="button-bg"
+        @mouseenter="handleButtonHover"
+        @mouseleave="handleButtonLeave"
+      />
+      <!-- + 图标 -->
+      <path
+        :d="`M${midX - 4} ${midY}h8M${midX} ${midY - 4}v8`"
+        stroke="#ffffff"
+        stroke-width="2"
+        stroke-linecap="round"
+        class="plus-icon"
+        :class="{ 'visible': isButtonHovered }"
+      />
+    </g>
   </g>
 </template>
 <script setup>
@@ -40,9 +82,13 @@ import {
   getSimpleBezierPath,
 } from '@vue-flow/core';
 import { computed, watch, ref, onMounted } from 'vue';
+
+// 状态管理
 const status = ref('default');
 const startOffset = ref(0);
 const endOffset = ref(100);
+const isHovered = ref(false);
+const isButtonHovered = ref(false);
 // default状态默认第一位，以便于判断包含时正好不包含index为0的default
 const connectStatus = ref([
   'defau1lt',
@@ -99,7 +145,65 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 事件定义
+const emit = defineEmits(['insertNode']);
+
+// 计算边的中点坐标
+const midX = computed(() => {
+  return (props.sourceX + props.targetX) / 2;
 });
+
+const midY = computed(() => {
+  return (props.sourceY + props.targetY) / 2;
+});
+
+// 计算按钮半径
+const buttonRadius = computed(() => {
+  return isButtonHovered.value ? 12 : 6;
+});
+
+// 悬停事件处理 - 统一处理所有悬停区域
+const handleMouseEnter = () => {
+  if (!props.disabled && !props.isConnection) {
+    isHovered.value = true;
+  }
+};
+
+const handleMouseLeave = () => {
+  isHovered.value = false;
+};
+
+// 按钮区域悬停事件处理
+const handleButtonHover = () => {
+  if (!props.disabled && !props.isConnection) {
+    isButtonHovered.value = true;
+  }
+};
+
+const handleButtonLeave = () => {
+  isButtonHovered.value = false;
+};
+
+// 插入节点事件处理
+const handleInsertNode = (event) => {
+  event.stopPropagation();
+  if (props.disabled || props.isConnection) {
+    return;
+  }
+  
+  // 发射插入节点事件，传递边的信息和中点坐标
+  emit('insertNode', {
+    edgeId: props.id,
+    midX: midX.value,
+    midY: midY.value,
+  });
+};
 watch(
   () => props.data,
   () => {
@@ -169,12 +273,57 @@ function getArrowTransform(props) {
 <style lang="scss">
 .flowEdge {
   &:hover {
-    path {
+    .edge-path {
       stroke: #6395fd;
     }
     .markEnd {
       fill: #6395fd;
     }
   }
+  
+  .edge-interaction {
+    cursor: pointer;
+  }
+  
+  .insert-node-button {
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease;
+    pointer-events: none;
+    
+    &.show {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+    
+    .button-bg {
+      transition: r 0.2s ease;
+    }
+    
+    .plus-icon {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      
+      &.visible {
+        opacity: 1;
+      }
+    }
+  }
+
+}
+
+/* 删除全局动画样式，现在由.show类控制 */
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 </style>
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index 0d85a182b5f8f4ffb017d189ff011b50dd09cd7b..b2398aff180c950f494ee261cc29b9891413da71 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -2,7 +2,7 @@
 import { Position, Handle } from '@vue-flow/core';
 import { ref, watch } from 'vue';
 import NodeMirrorText from '../codeMirror/nodeMirrorText.vue';
-import { CopyDocument, WarnTriangleFilled } from '@element-plus/icons-vue';
+import { CopyDocument, WarnTriangleFilled, Delete } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { IconSuccess } from '@computing/opendesign-icons';
 import { getSrcIcon, getNodeClass } from '../types';
@@ -54,6 +54,9 @@ const inputAndOutput = ref({
   output_parameters: {},
 });
 
+// 控制删除按钮文字显示
+const showDeleteText = ref(false);
+
 watch(
   () => props.data,
   () => {
@@ -151,39 +154,6 @@ const handleCopyTextToclipboard = (text) => {
             </el-icon>
             <div class="label">{{ props.data.name }}</div>
           </div>
-
-          <div class="moreTip" :class="{ notAllow: props.disabled }">
-            <el-popover
-              :disabled="props.disabled"
-              placement="bottom-end"
-              trigger="hover"
-              popper-class="nodeDealPopper"
-            >
-              <template #reference>
-                <div class="moreDots">
-                  <div class="nodeDot"></div>
-                  <div class="nodeDot"></div>
-                  <div class="nodeDot"></div>
-                </div>
-              </template>
-              <el-button
-                text
-                class="dealItem"
-                @click="
-                  editYaml(
-                    props.data.name,
-                    props.data.description,
-                    props.data.parameters,
-                  )
-                "
-              >
-                {{ $t('semantic.edit') }}
-              </el-button>
-              <el-button text class="dealItem" @click="delNode(props.id)">
-                {{ $t('semantic.interface_delete') }}
-              </el-button>
-            </el-popover>
-          </div>
         </div>
         <!-- 移除description显示 -->
       </div>
@@ -200,6 +170,25 @@ const handleCopyTextToclipboard = (text) => {
         </el-icon>
       </div>
     </div>
+    
+    <!-- 右上角删除按钮小卡片 -->
+    <div class="deleteCardWrapper" v-if="!props.disabled">
+      <div class="deleteCard">
+        <button
+          class="deleteButton"
+          @click="delNode(props.id)"
+          :title="$t('semantic.interface_delete')"
+          @mouseenter="showDeleteText = true"
+          @mouseleave="showDeleteText = false"
+        >
+          <el-icon class="delete-icon">
+            <Delete />
+          </el-icon>
+          <span class="delete-text" v-show="showDeleteText">{{ $t('semantic.interface_delete') }}</span>
+        </button>
+      </div>
+    </div>
+    
     <Handle
       type="source"
       :position="Position.Right"
@@ -217,3 +206,130 @@ const handleCopyTextToclipboard = (text) => {
     ></NodeMirrorText>
   </div>
 </template>
+
+<style scoped>
+.customNodeStyle {
+  position: relative;
+}
+
+.deleteCardWrapper {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  z-index: 10;
+}
+
+.deleteCard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 自定义删除按钮样式 - 悬浮圆形到圆角矩形动画 */
+.deleteButton {
+  /* 基础样式 */
+  border: none;
+  background-color: #f56c6c;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  
+  /* 圆形按钮尺寸 */
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  
+  /* 布局样式 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  overflow: hidden;
+  
+  /* 悬浮效果 */
+  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
+  
+  /* 动画效果 - 分离不同属性的动画时间 */
+  transition: 
+    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.3s ease;
+  
+  /* 初始变形状态 */
+  transform: scaleX(1) translateY(0);
+  transform-origin: center;
+  
+  /* 移除默认按钮样式 */
+  outline: none;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+.deleteButton:hover {
+  background-color: #f56c6c;
+  color: #ffffff;
+  
+  /* 展开为圆角矩形 */
+  width: 88px;
+  height: 32px;
+  border-radius: 16px;
+  padding: 0 12px;
+  
+  /* 左右拉伸变形效果 */
+  transform: scaleX(1.05) translateY(-1px);
+  
+  /* 增强悬浮效果 */
+  box-shadow: 0 6px 20px rgba(245, 108, 108, 0.5);
+}
+
+.deleteButton:active {
+  background-color: #e6a23c;
+  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.6);
+  transform: scaleX(1) translateY(0);
+}
+
+.deleteButton:focus {
+  outline: 2px solid #f56c6c40;
+  outline-offset: 2px;
+}
+
+.delete-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.deleteButton:hover .delete-icon {
+  transform: scale(0.9);
+}
+
+.delete-text {
+  font-size: 12px;
+  margin-left: 6px;
+  opacity: 0;
+  transform: translateX(-8px) scale(0.8);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.deleteButton:hover .delete-text {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+/* 只在hover整个节点时显示删除卡片 */
+.customNodeStyle .deleteCardWrapper {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.customNodeStyle:hover .deleteCardWrapper {
+  opacity: 1;
+}
+</style>
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
index de31abd4e2a409ff16c7fdc8187943d69ccfab5c..149b9088692aa4821f1047bebcf98718aef529b2 100644
--- a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -81,7 +81,6 @@ const getInputParamKeys = () => {
 const conversationVariables = computed(() => {
   // 优先使用外部传入的conversationVariables props
   if (props.conversationVariables && props.conversationVariables.length > 0) {
-    console.log('🎯 使用外部传入的对话变量数据:', props.conversationVariables);
     return props.conversationVariables.map((variable: any) => ({
       name: variable.name,
       type: getVariableTypeDisplay(variable.var_type || variable.type || 'string'),
@@ -89,17 +88,9 @@ const conversationVariables = computed(() => {
     }));
   }
   
-  // 降级处理：从节点数据中获取（保持向后兼容）
-  console.log('🔍 CustomSaENode computed - props.data:', props.data);
-  console.log('🔍 props.data.variables:', props.data.variables);
-  console.log('🔍 props.data.parameters?.conversation_variables:', props.data.parameters?.conversation_variables);
-  
   const variables = props.data.variables || props.data.parameters?.conversation_variables || {};
   
-  console.log('🔍 最终使用的variables:', variables);
-  
   if (!variables || Object.keys(variables).length === 0) {
-    console.log('⚠️ 变量为空，返回空数组');
     return [];
   }
   
@@ -109,20 +100,9 @@ const conversationVariables = computed(() => {
     value: value?.value !== undefined ? value.value : value
   }));
   
-  console.log('✅ conversationVariables computed result:', result);
   return result;
 });
 
-// 获取对话级变量的键名数组，用于显示（保持向后兼容）
-const getConversationVariableKeys = () => {
-  return conversationVariables.value.map(v => v.name);
-};
-
-// 获取对话级变量的详细信息，包括类型等（保持向后兼容）
-const getConversationVariables = () => {
-  return conversationVariables.value;
-};
-
 // 获取变量类型的显示名称
 const getVariableTypeDisplay = (type: string): string => {
   const typeMap: Record<string, string> = {
diff --git a/src/views/createapp/components/workFlowConfig/DebugVariablePanel.vue b/src/views/createapp/components/workFlowConfig/DebugVariablePanel.vue
index 6b26d5c7a94096075589ce690347327b4dbebc02..fb9af612d9ff8728a1352a01118921c552cd9ae0 100644
--- a/src/views/createapp/components/workFlowConfig/DebugVariablePanel.vue
+++ b/src/views/createapp/components/workFlowConfig/DebugVariablePanel.vue
@@ -5,8 +5,8 @@
       <div class="header-left">
         <div class="variable-icon">⚙️</div>
         <span class="header-title">变量配置</span>
-        <span class="variable-count" v-if="conversationVariables.length > 0">
-          ({{ conversationVariables.length }})
+        <span class="variable-count" v-if="internalVariables.length > 0">
+          ({{ internalVariables.length }})
         </span>
       </div>
       <div class="header-right">
@@ -29,7 +29,7 @@
                  <div class="variable-list" v-loading="variablesLoading || false">
           <!-- 对话变量展示 -->
           <div 
-            v-for="variable in conversationVariables" 
+            v-for="variable in internalVariables" 
             :key="`conv_${variable.name}`"
             class="variable-item"
           >
@@ -49,8 +49,7 @@
                   :placeholder="getVariablePlaceholder(variable)"
                   :type="variable.var_type === 'number' ? 'number' : 'text'"
                   size="small"
-                  @blur="updateVariableValue(variable)"
-                  @keydown.enter="updateVariableValue(variable)"
+                  @input="handleVariableInput(variable)"
                   class="variable-input"
                 />
                 
@@ -73,7 +72,7 @@
                   :rows="3"
                   :placeholder="getVariablePlaceholder(variable)"
                   size="small"
-                  @blur="updateVariableValue(variable)"
+                  @input="handleVariableInput(variable)"
                   class="variable-textarea"
                 />
                 
@@ -141,7 +140,6 @@
                     placeholder="输入后按回车添加，或用逗号分隔多个值"
                     size="small"
                     @keydown.enter="addStringToArray(variable)"
-                    @blur="processStringArrayInput(variable)"
                     class="array-input"
                   />
                   <div v-if="variable.stringArray && variable.stringArray.length > 0" class="string-tags">
@@ -165,8 +163,7 @@
                   :placeholder="getVariablePlaceholder(variable)"
                   size="small"
                   show-password
-                  @blur="updateVariableValue(variable)"
-                  @keydown.enter="updateVariableValue(variable)"
+                  @input="handleVariableInput(variable)"
                   class="variable-input"
                 />
                 
@@ -176,8 +173,7 @@
                   v-model="variable.displayValue"
                   :placeholder="getVariablePlaceholder(variable)"
                   size="small"
-                  @blur="updateVariableValue(variable)"
-                  @keydown.enter="updateVariableValue(variable)"
+                  @input="handleVariableInput(variable)"
                   class="variable-input"
                 />
               </div>
@@ -185,10 +181,10 @@
           </div>
 
           <!-- 空状态 -->
-          <div v-if="conversationVariables.length === 0 && !variablesLoading" class="empty-state">
-            <div class="empty-icon">📝</div>
-            <div class="empty-text">暂无用户变量</div>
-            <div class="empty-hint">在开始节点中配置用户变量后，可在此设置变量值</div>
+          <div v-if="internalVariables.length === 0 && !variablesLoading" class="empty-state">
+            <div class="empty-icon">⚙️</div>
+            <div class="empty-text">变量配置面板</div>
+            <div class="empty-hint">当工作流包含变量时，可以在这里配置变量值</div>
           </div>
         </div>
       </div>
@@ -221,18 +217,68 @@ interface Props {
   conversationVariables: Variable[]
   variablesLoading?: boolean
   flowId: string
+  conversationId?: string
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits(['toggleVisibility', 'variableUpdated'])
 
-// 处理变量显示值
-const processedVariables = computed(() => {
-  return props.conversationVariables.map(variable => ({
+// 内部独立的变量状态（与外部props解耦）
+const internalVariables = ref<Variable[]>([])
+
+// 检查是否是用户可编辑的变量
+const isEditableVariable = (variable: Variable): boolean => {
+  // 必须是 conversation 类型
+  if (variable.scope !== 'conversation') {
+    return false
+  }
+  
+  // 排除 UUID.result 格式的变量名（这些是 node 执行结果）
+  const uuidResultPattern = /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\.result$/i
+  if (uuidResultPattern.test(variable.name)) {
+    return false
+  }
+  
+  // 排除其他系统变量格式
+  const systemVariablePatterns = [
+    /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\./i, // UUID.xxx 格式
+    /^node_\d+\./i, // node_xxx.xxx 格式
+    /^sys\./i, // sys.xxx 格式
+    /^_/i // 下划线开头的内部变量
+  ]
+  
+  for (const pattern of systemVariablePatterns) {
+    if (pattern.test(variable.name)) {
+      return false
+    }
+  }
+  
+  return true
+}
+
+// 初始化内部变量状态
+const initializeInternalVariables = () => {
+  // 只显示用户可编辑的 conversation 变量，过滤掉系统变量和 node 变量
+  const editableVariables = props.conversationVariables.filter(isEditableVariable)
+  
+  internalVariables.value = editableVariables.map(variable => ({
     ...variable,
-    displayValue: variable.displayValue || getVariableDisplayValue(variable.value)
+    displayValue: getVariableDisplayValue(variable.value),
+    // 初始化特殊类型的属性
+    booleanValue: variable.var_type === 'boolean' ? (variable.value === true || variable.value === 'true') : undefined,
+    fileName: variable.var_type === 'file' && variable.value?.name ? variable.value.name : undefined,
+    fileList: variable.var_type === 'array[file]' && Array.isArray(variable.value) 
+      ? variable.value.map(v => ({ name: v.name || v, file: v })) 
+      : [],
+    stringArray: variable.var_type === 'array[string]' && Array.isArray(variable.value) 
+      ? [...variable.value] 
+      : [],
+    stringArrayInput: ''
   }))
-})
+  
+  console.log('🔧 变量面板初始化，所有变量:', props.conversationVariables.map(v => `${v.name}(${v.scope})`))
+  console.log('🔧 变量面板初始化，可编辑变量:', internalVariables.value.map(v => `${v.name}(${v.scope})`))
+}
 
 // 获取变量显示值
 const getVariableDisplayValue = (value: any): string => {
@@ -278,10 +324,106 @@ const getFileAcceptTypes = (): string => {
   return '.pdf,.docx,.doc,.txt,.md,.xlsx'
 }
 
+// 批量更新所有变量到后端
+const batchUpdateVariables = async (conversationId: string) => {
+  if (!conversationId) {
+    console.log('❌ 缺少对话ID，无法批量更新变量');
+    return false;
+  }
+
+  // 只更新用户可编辑的变量
+  const editableVariables = internalVariables.value.filter(isEditableVariable)
+
+  if (editableVariables.length === 0) {
+    console.log('📋 没有可编辑变量需要更新');
+    return true;
+  }
+
+  try {
+    console.log('🔄 开始批量更新变量到后端...');
+    console.log('📋 对话ID:', conversationId);
+    console.log('📋 要更新的可编辑变量:', editableVariables.map(v => v.name));
+    
+    const updatePromises = editableVariables.map(async (variable) => {
+      const updateParams = {
+        name: variable.name,
+        scope: 'conversation',
+        conversation_id: conversationId,
+        flow_id: props.flowId
+      };
+      
+      // 根据变量类型处理值
+      let processedValue = variable.displayValue || variable.value;
+      
+      // 特殊类型的值处理
+      if (variable.var_type === 'boolean') {
+        processedValue = variable.booleanValue;
+      } else if (variable.var_type === 'number' && variable.displayValue) {
+        const numValue = Number(variable.displayValue);
+        processedValue = isNaN(numValue) ? variable.value : numValue;
+      } else if (variable.var_type === 'object' && variable.displayValue) {
+        try {
+          processedValue = JSON.parse(variable.displayValue);
+        } catch (error) {
+          console.warn(`⚠️ 变量 ${variable.name} JSON 解析失败，使用原始值`);
+          processedValue = variable.displayValue;
+        }
+      } else if (variable.var_type === 'array[string]') {
+        processedValue = variable.stringArray || [];
+      } else if (variable.var_type === 'file') {
+        processedValue = variable.fileName ? { name: variable.fileName } : null;
+      } else if (variable.var_type === 'array[file]') {
+        processedValue = variable.fileList ? variable.fileList.map(f => ({ name: f.name })) : [];
+      }
+      
+      const updateData = {
+        value: processedValue,
+        var_type: variable.var_type,
+        description: variable.description
+      };
+      
+      try {
+        const result = await updateVariable(updateParams, updateData);
+        console.log(`✅ 变量 ${variable.name} 更新成功:`, result);
+        return { success: true, variable: variable.name };
+      } catch (error) {
+        console.error(`❌ 变量 ${variable.name} 更新失败:`, error);
+        return { success: false, variable: variable.name, error };
+      }
+    });
+    
+    const results = await Promise.all(updatePromises);
+    const successCount = results.filter(r => r.success).length;
+    const failCount = results.length - successCount;
+    
+    console.log(`📊 变量更新结果: 成功 ${successCount}/${results.length}, 失败 ${failCount}`);
+    
+    if (successCount > 0) {
+      emit('variableUpdated');
+    }
+    
+    return successCount > 0; // 只要有一个成功就继续
+  } catch (error) {
+    console.error('❌ 批量更新变量失败:', error);
+    return false;
+  }
+};
+
+// 处理变量输入事件（不触发API调用）
+const handleVariableInput = (variable: Variable) => {
+  console.log('🔧 变量值更新:', variable.name, '=', variable.displayValue);
+  // 只做本地状态更新，不调用API
+};
+
+// 暴露方法给父组件调用
+defineExpose({
+  batchUpdateVariables
+});
+
 // 更新布尔变量
 const updateBooleanVariable = async (variable: Variable) => {
-  if (!props.flowId) {
-    ElMessage.error('缺少工作流ID，无法保存变量')
+  if (!props.conversationId) {
+    ElMessage.error('缺少对话ID，无法保存变量')
     return
   }
 
@@ -290,6 +432,7 @@ const updateBooleanVariable = async (variable: Variable) => {
       { 
         name: variable.name, 
         scope: 'conversation',
+        conversation_id: props.conversationId,
         flow_id: props.flowId
       },
       { 
@@ -319,6 +462,7 @@ const handleFileChange = async (variable: Variable, file: any) => {
       { 
         name: variable.name, 
         scope: 'conversation',
+        conversation_id: props.conversationId,
         flow_id: props.flowId
       },
       { 
@@ -345,6 +489,7 @@ const clearFileVariable = async (variable: Variable) => {
       { 
         name: variable.name, 
         scope: 'conversation',
+        conversation_id: props.conversationId,
         flow_id: props.flowId
       },
       { 
@@ -379,6 +524,7 @@ const handleFileArrayChange = async (variable: Variable, fileList: any[]) => {
       { 
         name: variable.name, 
         scope: 'conversation',
+        conversation_id: props.conversationId,
         flow_id: props.flowId
       },
       { 
@@ -408,6 +554,7 @@ const removeFileFromArray = async (variable: Variable, index: number) => {
       { 
         name: variable.name, 
         scope: 'conversation',
+        conversation_id: props.conversationId,
         flow_id: props.flowId
       },
       { 
@@ -470,8 +617,8 @@ const removeStringFromArray = (variable: Variable, index: number) => {
 
 // 更新字符串数组变量
 const updateStringArrayVariable = async (variable: Variable) => {
-  if (!props.flowId) {
-    ElMessage.error('缺少工作流ID，无法保存变量')
+  if (!props.conversationId) {
+    ElMessage.error('缺少对话ID，无法保存变量')
     return
   }
 
@@ -480,6 +627,7 @@ const updateStringArrayVariable = async (variable: Variable) => {
       { 
         name: variable.name, 
         scope: 'conversation',
+        conversation_id: props.conversationId,
         flow_id: props.flowId
       },
       { 
@@ -499,8 +647,8 @@ const updateStringArrayVariable = async (variable: Variable) => {
 
 // 更新变量值
 const updateVariableValue = async (variable: Variable) => {
-  if (!props.flowId) {
-    ElMessage.error('缺少工作流ID，无法保存变量')
+  if (!props.conversationId) {
+    ElMessage.error('缺少对话ID，无法保存变量')
     return
   }
 
@@ -539,6 +687,7 @@ const updateVariableValue = async (variable: Variable) => {
       { 
         name: variable.name, 
         scope: 'conversation',
+        conversation_id: props.conversationId,
         flow_id: props.flowId
       },
       { 
@@ -556,41 +705,16 @@ const updateVariableValue = async (variable: Variable) => {
   }
 }
 
-// 监听props变化，同步显示值
+// 监听props变化，重新初始化内部变量（只在外部数据源变化时）
 watch(
   () => props.conversationVariables,
   (newVariables) => {
-    newVariables.forEach(variable => {
-      if (!variable.displayValue) {
-        variable.displayValue = getVariableDisplayValue(variable.value)
-      }
-      
-      // 初始化不同类型的特殊属性
-      if (variable.var_type === 'boolean') {
-        if (variable.booleanValue === undefined) {
-          variable.booleanValue = variable.value === true || variable.value === 'true'
-        }
-      } else if (variable.var_type === 'file') {
-        if (variable.value && typeof variable.value === 'object' && variable.value.name) {
-          variable.fileName = variable.value.name
-        }
-      } else if (variable.var_type === 'array[file]') {
-        if (Array.isArray(variable.value)) {
-          variable.fileList = variable.value.map(v => ({ name: v.name || v, file: v }))
-        }
-      } else if (variable.var_type === 'array[string]') {
-        if (Array.isArray(variable.value)) {
-          variable.stringArray = [...variable.value]
-        } else if (!variable.stringArray) {
-          variable.stringArray = []
-        }
-        if (!variable.stringArrayInput) {
-          variable.stringArrayInput = ''
-        }
-      }
-    })
+    if (newVariables && newVariables.length >= 0) {
+      console.log('📡 外部变量数据变化，重新初始化内部状态');
+      initializeInternalVariables();
+    }
   },
-  { deep: true, immediate: true }
+  { immediate: true }
 )
 </script>
 
diff --git a/src/views/createapp/components/workFlowConfig/DirectReplyDrawer.vue b/src/views/createapp/components/workFlowConfig/DirectReplyDrawer.vue
index 6dd045d04354314f6597ded8a9cb6d85d652f16e..4bc11a554dde32ce4a9f4e7eb32ffe935c336cec 100644
--- a/src/views/createapp/components/workFlowConfig/DirectReplyDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/DirectReplyDrawer.vue
@@ -68,6 +68,7 @@
                    ref="textEditorRef"
                    v-model="nodeConfig.answer"
                    :flow-id="flowId"
+                   :current-step-id="nodeId"
                    placeholder="请输入回复内容，可以使用变量插入功能..."
                  />
                 
diff --git a/src/views/createapp/components/workFlowConfig/EnvironmentVariableDrawer.vue b/src/views/createapp/components/workFlowConfig/EnvironmentVariableDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f06c7c7ae50106384584a2e3b6ec61ab4fde5a4
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/EnvironmentVariableDrawer.vue
@@ -0,0 +1,714 @@
+<template>
+  <div class="environmentVariableConfig">
+    <el-drawer
+      v-model="visible"
+      :show-close="false"
+      :modal="true"
+      modal-class="transparent-modal"
+      class="flowDrawer environmentVariableDrawer"
+      @close="closeDrawer"
+      size="600px"
+    >
+      <template #header>
+        <div class="drawerHeader">
+          <div class="headerIcon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M20 18a1 1 0 0 1-1 1h-4a3 3 0 0 0-3 3a3 3 0 0 0-3-3H5a1 1 0 0 1-1-1H2a3 3 0 0 0 3 3h4a2 2 0 0 1 2 2h2a2 2 0 0 1 2-2h4a3 3 0 0 0 3-3Zm0-12a1 1 0 0 0-1-1h-4a3 3 0 0 1-3-3a3 3 0 0 1-3 3H5a1 1 0 0 0-1 1H2a3 3 0 0 1 3-3h4a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h4a3 3 0 0 1 3 3Zm-8 6L9 8H7v8h2v-4l3 4h2V8h-2zm9-4l-2 5.27L17 8h-2l3 8h2l3-8zM1 8v8h5v-2H3v-1h2v-2H3v-1h3V8z" />
+            </svg>
+          </div>
+          <div class="headerText">环境变量配置</div>
+        </div>
+      </template>
+      
+      <template #default>
+        <div class="drawerBody">
+          <!-- 说明文本 -->
+          <div class="envDescription">
+            <el-alert
+              title="环境变量说明"
+              type="info"
+              :closable="false"
+              show-icon
+            >
+              <template #default>
+                环境变量与当前工作流绑定，在流程运行期间只能读取，不能修改。适用于存储配置信息、密钥、常量等。
+              </template>
+            </el-alert>
+          </div>
+
+          <!-- 变量列表 -->
+          <div class="variableSection">
+            <div class="sectionHeader">
+              <h3>环境变量列表</h3>
+              <el-button
+                type="primary"
+                :icon="Plus"
+                size="small"
+                @click="addEnvironmentVariable"
+              >
+                添加变量
+              </el-button>
+            </div>
+
+            <div class="variableList" v-loading="variablesLoading">
+              <div 
+                v-for="variable in environmentVariables" 
+                :key="variable.name"
+                class="variableItem"
+                @click="editEnvironmentVariable(variable)"
+              >
+                <div class="variableIcon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M20 18a1 1 0 0 1-1 1h-4a3 3 0 0 0-3 3a3 3 0 0 0-3-3H5a1 1 0 0 1-1-1H2a3 3 0 0 0 3 3h4a2 2 0 0 1 2 2h2a2 2 0 0 1 2-2h4a3 3 0 0 0 3-3Zm0-12a1 1 0 0 0-1-1h-4a3 3 0 0 1-3-3a3 3 0 0 1-3 3H5a1 1 0 0 0-1 1H2a3 3 0 0 1 3-3h4a2 2 0 0 0 2-2h2a2 2 0 0 0 2 2h4a3 3 0 0 1 3 3Zm-8 6L9 8H7v8h2v-4l3 4h2V8h-2zm9-4l-2 5.27L17 8h-2l3 8h2l3-8zM1 8v8h5v-2H3v-1h2v-2H3v-1h3V8z" />
+                  </svg>
+                </div>
+                <div class="variableInfo">
+                  <div class="variableHeader">
+                    <div class="variableName">{{ variable.name }}</div>
+                    <div class="variableType">{{ getVariableTypeDisplay(variable.var_type) }}</div>
+                  </div>
+                  <div class="variableValue">
+                    <span class="valueContent" :class="getValueClass(variable.var_type)">
+                      {{ formatVariableValue(variable) }}
+                    </span>
+                  </div>
+                  <div v-if="variable.description" class="variableDescription">
+                    {{ variable.description }}
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 空状态提示 -->
+              <div v-if="environmentVariables.length === 0 && !variablesLoading" class="emptyState">
+                <div class="emptyText">暂无环境变量</div>
+                <div class="emptySubText">点击"添加变量"按钮创建你的第一个环境变量</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      
+      <template #footer>
+        <div class="drawerFooter">
+          <el-button @click="closeDrawer">关闭</el-button>
+        </div>
+      </template>
+    </el-drawer>
+
+    <!-- 变量编辑弹窗 -->
+    <el-dialog
+      v-model="showVariableDialog"
+      :title="isEditingVariable ? '编辑环境变量' : '添加环境变量'"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        :model="editingVariable"
+        label-width="80px"
+        :rules="variableRules"
+        ref="variableFormRef"
+      >
+        <el-form-item label="变量名" prop="name">
+          <el-input 
+            v-model="editingVariable.name" 
+            placeholder="请输入变量名（支持字母、数字、下划线）"
+            :disabled="isEditingVariable"
+          />
+        </el-form-item>
+        
+        <el-form-item label="变量类型" prop="var_type">
+          <el-select v-model="editingVariable.var_type" placeholder="请选择变量类型">
+            <el-option label="字符串 (string)" value="string" />
+            <el-option label="数字 (number)" value="number" />
+            <el-option label="布尔值 (boolean)" value="boolean" />
+            <el-option label="JSON对象 (object)" value="object" />
+          </el-select>
+        </el-form-item>
+        
+        <el-form-item label="变量值" prop="value">
+          <el-input 
+            v-if="editingVariable.var_type === 'string'"
+            v-model="editingVariable.value" 
+            placeholder="请输入字符串值" 
+          />
+          <el-input 
+            v-else-if="editingVariable.var_type === 'number'"
+            v-model.number="editingVariable.value" 
+            type="number"
+            placeholder="请输入数字值" 
+          />
+          <el-select 
+            v-else-if="editingVariable.var_type === 'boolean'"
+            v-model="editingVariable.value"
+            placeholder="请选择布尔值"
+          >
+            <el-option label="true" :value="true" />
+            <el-option label="false" :value="false" />
+          </el-select>
+          <el-input 
+            v-else-if="editingVariable.var_type === 'object'"
+            v-model="editingVariable.valueJson"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入JSON格式的对象"
+          />
+        </el-form-item>
+        
+        <el-form-item label="描述">
+          <el-input 
+            v-model="editingVariable.description" 
+            placeholder="请输入变量描述（可选）" 
+          />
+        </el-form-item>
+      </el-form>
+      
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleVariableDialogClose">取消</el-button>
+          <el-button 
+            v-if="isEditingVariable"
+            type="danger" 
+            @click="deleteEnvironmentVariable(editingVariable)"
+          >
+            删除
+          </el-button>
+          <el-button 
+            type="primary" 
+            @click="saveEnvironmentVariable"
+          >
+            保存
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { 
+  ElDrawer, ElButton, ElDialog, ElForm, ElFormItem, 
+  ElSelect, ElOption, ElMessage, ElAlert, ElInput, ElMessageBox
+} from 'element-plus'
+import { Plus, Delete } from '@element-plus/icons-vue'
+import { 
+  listEnvironmentVariables, 
+  createVariable, 
+  updateVariable, 
+  deleteVariable 
+} from '@/api/variable'
+
+interface Variable {
+  name: string
+  var_type: string
+  scope: string
+  value?: any
+  description?: string
+  valueJson?: string
+}
+
+interface Props {
+  flowId: string
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const visible = ref(true)
+
+// 变量相关状态
+const environmentVariables = ref<Variable[]>([])
+const variablesLoading = ref(false)
+
+// 变量编辑状态
+const showVariableDialog = ref(false)
+const editingVariable = ref<Variable>({
+  name: '',
+  var_type: 'string',
+  scope: 'env',
+  value: '',
+  description: '',
+  valueJson: ''
+})
+const isEditingVariable = ref(false)
+const variableFormRef = ref()
+
+// 表单验证规则
+const variableRules = {
+  name: [
+    { required: true, message: '请输入变量名', trigger: 'blur' },
+    { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*$/, message: '变量名只能包含字母、数字和下划线，且不能以数字开头', trigger: 'blur' }
+  ],
+  var_type: [
+    { required: true, message: '请选择变量类型', trigger: 'change' }
+  ],
+  value: [
+    { required: true, message: '请输入变量值', trigger: 'blur' }
+  ]
+}
+
+const emits = defineEmits(['closeDrawer'])
+
+// 获取变量类型显示名称
+const getVariableTypeDisplay = (type: string): string => {
+  const typeMap: Record<string, string> = {
+    'string': 'String',
+    'number': 'Number', 
+    'boolean': 'Boolean',
+    'object': 'Object',
+    'array_file': 'Array[File]',
+    'array[file]': 'Array[File]',  // 支持后端返回的格式
+    'array': 'Array',
+    'secret': 'Secret'
+  }
+  return typeMap[type] || type
+}
+
+// 格式化变量值显示
+const formatVariableValue = (variable: Variable): string => {
+  if (variable.value === null || variable.value === undefined) {
+    return '未设置'
+  }
+  
+  switch (variable.var_type) {
+    case 'string':
+      const stringValue = String(variable.value)
+      return stringValue.length > 50 ? `${stringValue.substring(0, 50)}...` : stringValue
+    case 'number':
+      return String(variable.value)
+    case 'boolean':
+      return variable.value ? 'true' : 'false'
+    case 'object':
+      try {
+        const objectStr = typeof variable.value === 'string' ? variable.value : JSON.stringify(variable.value)
+        return objectStr.length > 60 ? `${objectStr.substring(0, 60)}...` : objectStr
+      } catch {
+        return '{ ... }'
+      }
+    case 'secret':
+      return '****** (隐藏)'
+    default:
+      const defaultValue = String(variable.value)
+      return defaultValue.length > 50 ? `${defaultValue.substring(0, 50)}...` : defaultValue
+  }
+}
+
+// 获取值的样式类名
+const getValueClass = (type: string): string => {
+  const classMap: Record<string, string> = {
+    'string': 'value-string',
+    'number': 'value-number',
+    'boolean': 'value-boolean',
+    'object': 'value-object',
+    'secret': 'value-secret'
+  }
+  return classMap[type] || 'value-default'
+}
+
+// 加载环境变量列表
+const loadEnvironmentVariables = async () => {
+  if (!props.flowId) {
+    console.warn('没有flowId，跳过环境变量加载')
+    return
+  }
+  
+  variablesLoading.value = true
+  
+  try {
+    console.log('🔄 开始加载环境变量...')
+    
+    const response = await listEnvironmentVariables(props.flowId)
+    console.log('📥 环境变量API响应:', response)
+    
+    // 处理API响应结构
+    let variables: Variable[] = []
+    if (response?.result?.variables) {
+      variables = response.result.variables
+    } else if (response?.variables) {
+      variables = response.variables
+    } else if (Array.isArray(response)) {
+      variables = response
+    }
+    
+    environmentVariables.value = variables || []
+    console.log('✅ 环境变量加载成功:', environmentVariables.value.length, '个')
+    
+  } catch (error) {
+    console.error('❌ 加载环境变量失败:', error)
+    ElMessage.error('加载环境变量失败')
+    environmentVariables.value = []
+  } finally {
+    variablesLoading.value = false
+  }
+}
+
+// 添加环境变量
+const addEnvironmentVariable = () => {
+  editingVariable.value = {
+    name: '',
+    var_type: 'string',
+    scope: 'env',
+    value: '',
+    description: '',
+    valueJson: ''
+  }
+  isEditingVariable.value = false
+  showVariableDialog.value = true
+}
+
+// 编辑环境变量
+const editEnvironmentVariable = (variable: Variable) => {
+  editingVariable.value = {
+    ...variable,
+    valueJson: variable.var_type === 'object' ? JSON.stringify(variable.value, null, 2) : ''
+  }
+  isEditingVariable.value = true
+  showVariableDialog.value = true
+}
+
+// 保存环境变量
+const saveEnvironmentVariable = async () => {
+  try {
+    await variableFormRef.value?.validate()
+    
+    const variableData = { ...editingVariable.value }
+    
+    // 处理不同类型的值
+    if (variableData.var_type === 'object') {
+      try {
+        variableData.value = JSON.parse(variableData.valueJson || '{}')
+      } catch (error) {
+        ElMessage.error('JSON格式不正确，请检查输入')
+        return
+      }
+    } else if (variableData.var_type === 'boolean') {
+      variableData.value = Boolean(variableData.value)
+    } else if (variableData.var_type === 'number') {
+      variableData.value = Number(variableData.value)
+    }
+    
+    // 删除辅助字段
+    delete variableData.valueJson
+    
+    if (isEditingVariable.value) {
+      // 更新变量
+      await updateVariable(
+        { 
+          name: variableData.name, 
+          scope: 'env', 
+          flow_id: props.flowId 
+        },
+        variableData
+      )
+      ElMessage.success('环境变量更新成功')
+    } else {
+      // 创建变量
+      await createVariable({
+        ...variableData,
+        flow_id: props.flowId
+      })
+      ElMessage.success('环境变量创建成功')
+    }
+    
+    showVariableDialog.value = false
+    await loadEnvironmentVariables()
+    
+  } catch (error) {
+    console.error('保存环境变量失败:', error)
+    ElMessage.error(isEditingVariable.value ? '更新环境变量失败' : '创建环境变量失败')
+  }
+}
+
+// 删除环境变量
+const deleteEnvironmentVariable = async (variable: Variable) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除环境变量"${variable.name}"吗？此操作不可恢复。`,
+      '确认删除',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+    
+    await deleteVariable({ 
+      name: variable.name, 
+      scope: 'env', 
+      flow_id: props.flowId 
+    })
+    
+    ElMessage.success('环境变量删除成功')
+    await loadEnvironmentVariables()
+    
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除环境变量失败:', error)
+      ElMessage.error('删除环境变量失败')
+    }
+  }
+}
+
+// 关闭变量编辑弹窗
+const handleVariableDialogClose = () => {
+  showVariableDialog.value = false
+  editingVariable.value = {
+    name: '',
+    var_type: 'string',
+    scope: 'env',
+    value: '',
+    description: '',
+    valueJson: ''
+  }
+}
+
+// 关闭抽屉
+const closeDrawer = () => {
+  visible.value = false
+  emits('closeDrawer')
+}
+
+onMounted(() => {
+  console.log('🚀 EnvironmentVariableDrawer 已挂载')
+  nextTick(() => {
+    loadEnvironmentVariables()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.environmentVariableConfig {
+  :deep(.flowDrawer) {
+    .el-drawer__header {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--o-border-color-light);
+      margin-bottom: 0;
+    }
+    
+    .el-drawer__body {
+      padding: 0;
+    }
+  }
+
+  .drawerHeader {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    .headerText {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--o-text-color-primary);
+    }
+  }
+
+  .drawerBody {
+    padding: 0;
+    
+    .envDescription {
+      margin: 20px 24px 24px;
+      
+      :deep(.el-alert__content) {
+        line-height: 1.5;
+      }
+    }
+    
+    .variableSection {
+      padding: 0 24px 24px;
+      
+      .sectionHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+        
+        h3 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--o-text-color-primary);
+        }
+      }
+      
+      .variableList {
+        min-height: 200px;
+        
+        .variableItem {
+          display: flex;
+          align-items: flex-start;
+          padding: 16px;
+          margin-bottom: 12px;
+          border-radius: 12px;
+          border: 1px solid var(--el-border-color-light);
+          background: var(--el-fill-color-extra-light);
+          transition: all 0.2s;
+          cursor: pointer;
+          
+          &:hover {
+            background: var(--el-color-primary-light-9);
+            border-color: var(--el-color-primary-light-7);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          }
+          
+          .variableIcon {
+            color: var(--el-color-primary);
+            margin-right: 16px;
+            margin-top: 2px;
+            flex-shrink: 0;
+          }
+          
+          .variableInfo {
+            flex: 1;
+            min-width: 0;
+            
+            .variableHeader {
+              display: flex;
+              align-items: center;
+              gap: 12px;
+              margin-bottom: 8px;
+              
+              .variableName {
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--el-text-color-primary);
+                font-family: 'Monaco', 'Consolas', monospace;
+                flex-shrink: 0;
+              }
+              
+              .variableType {
+                font-size: 11px;
+                color: var(--el-text-color-secondary);
+                background: var(--el-fill-color);
+                padding: 2px 8px;
+                border-radius: 6px;
+                border: 1px solid var(--el-border-color-lighter);
+                font-weight: 500;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+              }
+            }
+            
+            .variableValue {
+              display: flex;
+              align-items: flex-start;
+              margin-bottom: 6px;
+              gap: 8px;
+              
+              .valueLabel {
+                font-size: 12px;
+                color: var(--el-text-color-regular);
+                flex-shrink: 0;
+                margin-top: 1px;
+              }
+              
+              .valueContent {
+                font-size: 12px;
+                font-family: 'Monaco', 'Consolas', monospace;
+                line-height: 1.4;
+                word-break: break-all;
+                flex: 1;
+                padding: 4px 8px;
+                border-radius: 4px;
+                background: var(--el-fill-color-blank);
+                border: 1px solid var(--el-border-color-lighter);
+                
+                &.value-string {
+                  color: #16a085;
+                  background: rgba(22, 160, 133, 0.05);
+                  border-color: rgba(22, 160, 133, 0.2);
+                }
+                
+                &.value-number {
+                  color: #e67e22;
+                  background: rgba(230, 126, 34, 0.05);
+                  border-color: rgba(230, 126, 34, 0.2);
+                }
+                
+                &.value-boolean {
+                  color: #8e44ad;
+                  background: rgba(142, 68, 173, 0.05);
+                  border-color: rgba(142, 68, 173, 0.2);
+                }
+                
+                &.value-object {
+                  color: #2980b9;
+                  background: rgba(41, 128, 185, 0.05);
+                  border-color: rgba(41, 128, 185, 0.2);
+                }
+                
+                &.value-secret {
+                  color: #e74c3c;
+                  background: rgba(231, 76, 60, 0.05);
+                  border-color: rgba(231, 76, 60, 0.2);
+                }
+                
+                &.value-default {
+                  color: var(--el-text-color-regular);
+                }
+              }
+            }
+            
+            .variableDescription {
+              font-size: 12px;
+              color: var(--el-text-color-secondary);
+              line-height: 1.3;
+              font-style: italic;
+              opacity: 0.8;
+            }
+          }
+        }
+        
+        .emptyState {
+          text-align: center;
+          padding: 60px 20px;
+          
+          .emptyIcon {
+            width: 64px;
+            height: 64px;
+            margin: 0 auto 16px;
+            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
+            border-radius: 50%;
+            position: relative;
+            
+            &::before {
+              content: 'ENV';
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: white;
+              font-size: 12px;
+              font-weight: bold;
+            }
+          }
+          
+          .emptyText {
+            font-size: 16px;
+            color: var(--o-text-color-secondary);
+            margin-bottom: 8px;
+          }
+          
+          .emptySubText {
+            font-size: 14px;
+            color: var(--o-text-color-placeholder);
+          }
+        }
+      }
+    }
+  }
+
+  .drawerFooter {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px 24px;
+    border-top: 1px solid var(--o-border-color-light);
+  }
+}
+
+// 透明遮罩样式
+:deep(.transparent-modal) {
+  background-color: transparent !important;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/createapp/components/workFlowConfig/NodeListPanel.vue b/src/views/createapp/components/workFlowConfig/NodeListPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4458aa3b33421465199633c9b5018588751fd2db
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/NodeListPanel.vue
@@ -0,0 +1,366 @@
+<template>
+  <div class="node-list-panel">
+    <!-- 搜索栏 -->
+    <div class="search-bar">
+      <input 
+        v-model="searchKeyword"
+        type="text" 
+        :placeholder="searchPlaceholder"
+        class="search-input"
+        @input="handleSearch"
+      />
+      <div 
+        v-if="searchKeyword.trim()"
+        class="clear-icon"
+        @click="resetSearch"
+        title="清空搜索"
+      >
+        ✕
+      </div>
+      <div class="search-icon">🔍</div>
+    </div>
+    
+    <!-- 节点列表 -->
+    <div class="nodes-list">
+      <div
+        v-for="(group, groupName) in groupedNodes"
+        :key="groupName"
+        class="node-group"
+      >
+        <!-- Default类型不显示组标题 -->
+        <div v-if="groupName !== 'default'" class="group-title">
+          {{ getTypeDisplayName(groupName) }}
+        </div>
+        <div
+          v-for="node in group"
+          :key="node.nodeId"
+          class="node-item"
+          :draggable="enableDrag"
+          @click="handleNodeClick(node)"
+          @dragstart="handleDragStart($event, node)"
+        >
+          <img class="node-icon" :src="getSrcIcon(node)" />
+          <div class="node-info">
+            <div class="node-name">{{ node.name }}</div>
+            <div class="node-desc">{{ node.description }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { getSrcIcon } from '../types';
+
+// Props
+interface Props {
+  apiServiceList: any[];
+  searchPlaceholder?: string;
+  enableDrag?: boolean;
+  onDragStart?: (event: DragEvent, node: any) => void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  apiServiceList: () => [],
+  searchPlaceholder: '搜索节点...',
+  enableDrag: false,
+  onDragStart: undefined
+});
+
+// Emits
+interface Emits {
+  (e: 'nodeClick', node: any): void;
+  (e: 'dragStart', event: DragEvent, node: any): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// 响应式数据
+const searchKeyword = ref('');
+
+// Node type名称映射字典
+const nodeTypeNameMap: Record<string, string> = {
+  'tool': '工具',
+  'transform': '转换',
+  'logic': '逻辑',
+  'default': 'default'
+};
+
+// 计算属性：获取service类型的节点数据
+const serviceNodes = computed(() => {
+  const nodes: any[] = [];
+  props.apiServiceList.forEach(service => {
+    if (service.type === 'system' || !service.type) { // 兼容没有type字段的情况
+      if (service.nodeMetaDatas && Array.isArray(service.nodeMetaDatas)) {
+        // 为每个节点添加serviceId信息
+        const nodesWithServiceId = service.nodeMetaDatas.map(node => ({
+          ...node,
+          serviceId: service.serviceId
+        }));
+        nodes.push(...nodesWithServiceId);
+      }
+    }
+  });
+  return nodes;
+});
+
+// 计算属性：搜索过滤后的节点
+const filteredNodes = computed(() => {
+  if (!searchKeyword.value.trim()) {
+    return serviceNodes.value;
+  }
+  
+  const keyword = searchKeyword.value.toLowerCase().trim();
+  return serviceNodes.value.filter(node => 
+    node.name?.toLowerCase().includes(keyword) ||
+    node.description?.toLowerCase().includes(keyword)
+  );
+});
+
+// 计算属性：按type分组的节点
+const groupedNodes = computed(() => {
+  const groups: Record<string, any[]> = {};
+  
+  filteredNodes.value.forEach(node => {
+    const type = node.type || 'default';
+    if (!groups[type]) {
+      groups[type] = [];
+    }
+    groups[type].push(node);
+  });
+  
+  // 重新排序：default类型在最前面，其他按字母顺序排列
+  const sortedGroups: Record<string, any[]> = {};
+  
+  // 首先添加default组（如果存在）
+  if (groups.default) {
+    sortedGroups.default = groups.default;
+  }
+  
+  // 然后按字母顺序添加其他组
+  const otherTypes = Object.keys(groups)
+    .filter(type => type !== 'default')
+    .sort();
+    
+  otherTypes.forEach(type => {
+    sortedGroups[type] = groups[type];
+  });
+  
+  return sortedGroups;
+});
+
+// 方法
+const handleNodeClick = (node: any) => {
+  emit('nodeClick', node);
+};
+
+const handleDragStart = (event: DragEvent, node: any) => {
+  if (props.enableDrag) {
+    if (props.onDragStart) {
+      props.onDragStart(event, node);
+    }
+    emit('dragStart', event, node);
+  }
+};
+
+const handleSearch = () => {
+  // 搜索逻辑已经在computed中处理
+};
+
+// 获取type的显示名称
+const getTypeDisplayName = (type: string): string => {
+  return nodeTypeNameMap[type] || type;
+};
+
+// 重置搜索关键词的方法
+const resetSearch = () => {
+  searchKeyword.value = '';
+};
+
+// 暴露方法给父组件
+defineExpose({
+  resetSearch
+});
+</script>
+
+<style lang="scss" scoped>
+.node-list-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  
+  .search-bar {
+    display: flex;
+    align-items: center;
+    background: #f8f9fa;
+    border: 1px solid #e1e4e8;
+    border-radius: 8px;
+    margin: 16px 20px 12px;
+    flex-shrink: 0;
+    
+    .search-input {
+      flex: 1;
+      border: none;
+      outline: none;
+      background: transparent;
+      padding: 12px 16px;
+      font-size: 14px;
+      color: #24292e;
+      
+      &::placeholder {
+        color: #586069;
+      }
+    }
+    
+    .clear-icon {
+      font-size: 16px;
+      color: #586069;
+      margin-right: 12px;
+      cursor: pointer;
+      transition: color 0.2s ease;
+      
+      &:hover {
+        color: #24292e;
+      }
+    }
+    
+    .search-icon {
+      font-size: 16px;
+      color: #586069;
+      margin-right: 12px;
+    }
+  }
+  
+  .nodes-list {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+    
+    .node-group {
+      .group-title {
+        padding: 8px 20px 4px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #586069;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        border-bottom: 1px solid #f1f3f4;
+        margin-bottom: 4px;
+      }
+      
+      .node-item {
+        display: flex;
+        align-items: center;
+        padding: 12px 20px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-left: 3px solid transparent;
+        
+        &:hover {
+          background: #f6f8fa;
+          border-left-color: #6395fd;
+          
+          .node-name {
+            color: #6395fd;
+          }
+        }
+        
+        .node-icon {
+          width: 32px;
+          height: 32px;
+          margin-right: 12px;
+          border-radius: 6px;
+          object-fit: contain;
+          background: #f8f9fa;
+          padding: 4px;
+        }
+        
+        .node-info {
+          flex: 1;
+          
+          .node-name {
+            font-size: 14px;
+            font-weight: 500;
+            color: #24292e;
+            margin-bottom: 2px;
+            transition: color 0.2s ease;
+          }
+          
+          .node-desc {
+            font-size: 12px;
+            color: #586069;
+            line-height: 1.4;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 280px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 深色主题支持
+.dark .node-list-panel {
+  .search-bar {
+    background: #4a5568;
+    border-color: #6b7280;
+    
+    .search-input {
+      color: #e2e8f0;
+      
+      &::placeholder {
+        color: #a0aec0;
+      }
+    }
+    
+    .clear-icon {
+      color: #a0aec0;
+      
+      &:hover {
+        color: #e2e8f0;
+      }
+    }
+    
+    .search-icon {
+      color: #a0aec0;
+    }
+  }
+  
+  .nodes-list {
+    .node-group {
+      .group-title {
+        color: #a0aec0;
+        border-bottom-color: #4a5568;
+      }
+      
+      .node-item {
+        &:hover {
+          background: #374151;
+          
+          .node-name {
+            color: #6395fd;
+          }
+        }
+        
+        .node-icon {
+          background: #374151;
+        }
+        
+        .node-info {
+          .node-name {
+            color: #e2e8f0;
+          }
+          
+          .node-desc {
+            color: #a0aec0;
+          }
+        }
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/createapp/components/workFlowConfig/VariableBasedStartNodeDrawer.vue b/src/views/createapp/components/workFlowConfig/VariableBasedStartNodeDrawer.vue
index 6028e970150ff7e915d14d836b0832eb62f6eb69..4509ccf7d58b6fc200e18470249fcc04bf7f8f44 100644
--- a/src/views/createapp/components/workFlowConfig/VariableBasedStartNodeDrawer.vue
+++ b/src/views/createapp/components/workFlowConfig/VariableBasedStartNodeDrawer.vue
@@ -243,75 +243,14 @@ const emits = defineEmits(['closeDrawer', 'saveStartNode', 'variablesUpdated', '
 const loadAllVariables = async () => {
   variablesLoading.value = true
   
-  try {
-    console.log('🔄 开始加载变量...')
-    
-    // 加载系统变量 - 修复数据结构解析
-    try {
-      console.log('🔄 正在调用系统变量API...')
-      const systemResponse = await listVariables({ scope: 'system' })
-      console.log('📥 系统变量API响应:', systemResponse)
-      
-      // 修复：支持多种响应数据结构
-      let variables: any[] | null = null
-      const response = systemResponse as any // 类型断言避免TS错误
-      
-      if (response?.result?.variables) {
-        // 结构1: { result: { variables: [...] } }
-        variables = response.result.variables
-        console.log('📋 使用result.variables结构')
-      } else if (response?.variables) {
-        // 结构2: { variables: [...], total: 8 }  
-        variables = response.variables
-        console.log('📋 使用直接variables结构')
-      } else if (Array.isArray(response)) {
-        // 结构3: 直接返回数组
-        variables = response
-        console.log('📋 使用数组结构')
-      }
-      
-      if (variables && Array.isArray(variables)) {
-        systemVariables.value = variables
-        console.log('✅ 系统变量加载成功:', systemVariables.value.length, '个')
-        console.log('📋 系统变量详情:', systemVariables.value.map(v => ({
-          name: v.name,
-          type: v.var_type,
-          value: v.value,
-          description: v.description
-        })))
-      } else {
-        console.log('⚠️ 未找到系统变量数据')
-        console.log('📋 完整响应结构:', JSON.stringify(systemResponse, null, 2))
-        systemVariables.value = []
-      }
-    } catch (systemError: any) {
-      console.error('❌ 系统变量加载失败:', systemError)
-      console.error('❌ 错误详情:', {
-        message: systemError.message,
-        stack: systemError.stack,
-        response: systemError.response
-      })
-      
-      // 检查是否是Pydantic验证错误
-      if (systemError.message?.includes('validation error')) {
-        console.log('🔧 检测到Pydantic验证错误，可能是系统变量值为None')
-        ElMessage.warning('系统变量加载失败：后端数据验证错误，请检查系统变量初始化')
-      } else {
-        ElMessage.error('系统变量加载失败')
-      }
-      systemVariables.value = []
-    }
-    
-    // 加载对话变量（如果有flowId）
+  try {    
+    // 加载对话变量（配置阶段使用flowId）
     if (props.flowId) {
       try {
-        console.log('🔄 正在调用对话变量API...')
-        console.log('🔍 LIST API使用的flowId:', props.flowId)
         const convResponse = await listVariables({ 
           scope: 'conversation', 
           flow_id: props.flowId 
         })
-        console.log('📥 对话变量API响应:', convResponse)
         
         // 修复：支持多种响应数据结构
         let convVariables: any[] | null = null
@@ -319,34 +258,60 @@ const loadAllVariables = async () => {
         
         if (convResponseAny?.result?.variables) {
           convVariables = convResponseAny.result.variables
-          console.log('📋 对话变量使用result.variables结构')
         } else if (convResponseAny?.variables) {
           convVariables = convResponseAny.variables
-          console.log('📋 对话变量使用直接variables结构')
         } else if (Array.isArray(convResponseAny)) {
           convVariables = convResponseAny
-          console.log('📋 对话变量使用数组结构')
         }
         
         if (convVariables && Array.isArray(convVariables)) {
           conversationVariables.value = convVariables
-          console.log('✅ 对话变量加载成功:', conversationVariables.value.length, '个')
-          console.log('📋 具体变量列表:', conversationVariables.value.map(v => v.name))
         } else {
           conversationVariables.value = []
-          console.log('ℹ️ 对话变量为空，设置为空数组')
-          console.log('📋 convVariables:', convVariables)
         }
       } catch (convError: any) {
-        console.error('❌ 对话变量加载失败:', convError)
         conversationVariables.value = []
       }
     } else {
-      console.log('ℹ️ 无flowId，跳过对话变量加载')
       conversationVariables.value = []
     }
     
-    console.log('🎉 变量加载完成')
+    // 加载系统变量 - 配置阶段使用flow_id，对话阶段使用conversation_id
+    if (props.conversationId) {
+      // 对话/调试阶段：使用conversation_id查询系统变量实例
+      try {
+        const systemResponse = await listVariables({ 
+          scope: 'system',
+          conversation_id: props.conversationId 
+        })
+        
+        // 处理响应数据
+        const systemVars = (systemResponse as any)?.variables || (systemResponse as any)?.result?.variables || []
+        systemVariables.value = Array.isArray(systemVars) ? systemVars : []
+      } catch (error) {
+        console.error('❌ 系统变量加载失败（对话阶段）:', error)
+        systemVariables.value = []
+      }
+    } else if (props.flowId) {
+      // 配置阶段：使用flow_id查询系统变量模板
+      try {
+        const systemResponse = await listVariables({ 
+          scope: 'system',
+          flow_id: props.flowId 
+        })
+        
+        // 处理响应数据
+        const systemVars = (systemResponse as any)?.variables || (systemResponse as any)?.result?.variables || []
+        systemVariables.value = Array.isArray(systemVars) ? systemVars : []
+      } catch (error) {
+        console.error('❌ 系统变量加载失败（配置阶段）:', error)
+        systemVariables.value = []
+      }
+    } else {
+      // 既没有conversation_id也没有flow_id
+      systemVariables.value = []
+    }
+    
   } catch (error) {
     console.error('❌ 变量加载过程发生未知错误:', error)
     ElMessage.error('变量加载失败')
@@ -357,30 +322,9 @@ const loadAllVariables = async () => {
 
 // 强制重新加载变量
 const forceReloadVariables = async () => {
-  console.log('🔄 强制重新加载变量...')
   await loadAllVariables()
 }
 
-// 直接测试API调用
-const testApiDirectly = async () => {
-  console.log('🧪 开始直接测试API调用...')
-  try {
-    const response = await listVariables({ scope: 'system' })
-    console.log('🔬 直接API调用结果:')
-    console.log('- 原始响应:', response)
-    console.log('- 响应类型:', typeof response)
-    console.log('- 是否为数组:', Array.isArray(response))
-    console.log('- response.variables:', (response as any)?.variables)
-    console.log('- response.result:', (response as any)?.result)
-    console.log('- response.result.variables:', (response as any)?.result?.variables)
-    
-    ElMessage.info('API测试完成，请查看控制台输出')
-  } catch (error) {
-    console.error('🔬 API测试失败:', error)
-    ElMessage.error('API测试失败')
-  }
-}
-
 // 初始化数据 - 在函数定义后设置watch
 watch(
   () => [props.yamlContent, props.nodeName, props.nodeDesc],
@@ -397,7 +341,6 @@ watch(
 
 // 组件挂载时立即加载变量
 onMounted(() => {
-  console.log('🚀 组件已挂载，开始加载变量...')
   nextTick(() => {
     loadAllVariables()
   })
@@ -514,10 +457,6 @@ const editConversationVariable = (variable: Variable) => {
 
 // 保存对话变量
 const saveConversationVariable = async () => {
-  console.log('🔄 开始保存对话变量...')
-  console.log('📋 当前编辑变量:', editingVariable.value)
-  console.log('📋 工作流ID:', props.flowId)
-  
   // 详细的参数验证
   if (!editingVariable.value) {
     ElMessage.error('缺少变量数据')
@@ -561,11 +500,9 @@ const saveConversationVariable = async () => {
       flow_id: props.flowId
     }
     
-    console.log('📤 准备发送的变量数据:', variableData)
 
     if (isEditingVariable.value) {
-      // 更新变量
-      console.log('🔄 调用更新变量API...')
+      // 更新变量（配置阶段使用flow_id）
       const updateParams = { 
         name: editingVariable.value.name, 
         scope: 'conversation',
@@ -576,17 +513,12 @@ const saveConversationVariable = async () => {
         description: variableData.description,
         var_type: variableData.var_type  // 添加变量类型字段
       }
-      console.log('📤 更新参数:', updateParams)
-      console.log('📤 更新数据:', updateData)
       
       const updateResult = await updateVariable(updateParams, updateData)
-      console.log('📥 更新结果:', updateResult)
       ElMessage.success('变量更新成功')
     } else {
       // 创建变量
-      console.log('🔄 调用创建变量API...')
       const createResult = await createVariable(variableData)
-      console.log('📥 创建结果:', createResult)
       ElMessage.success('变量创建成功')
     }
 
@@ -628,20 +560,13 @@ const saveConversationVariable = async () => {
   }
 }
 
-// 删除对话变量
+// 删除对话变量（配置阶段使用flow_id）
 const deleteConversationVariable = async () => {
   if (!editingVariable.value || !props.flowId) {
     console.error('❌ 删除失败：缺少必要参数', { editingVariable: editingVariable.value, flowId: props.flowId })
     return
   }
 
-  console.log('🗑️ 开始删除变量:', {
-    name: editingVariable.value.name,
-    scope: 'conversation',
-    flow_id: props.flowId
-  })
-  console.log('🔍 DELETE API使用的flowId:', props.flowId)
-
   try {
     const deleteResult = await deleteVariable({
       name: editingVariable.value.name,
@@ -649,7 +574,6 @@ const deleteConversationVariable = async () => {
       flow_id: props.flowId
     })
     
-    console.log('✅ 删除变量API调用成功:', deleteResult)
     ElMessage.success('变量删除成功')
     
     // 在关闭对话框前先保存变量名（避免引用失效）
@@ -657,19 +581,15 @@ const deleteConversationVariable = async () => {
     
     handleVariableDialogClose()
     
-    // 方案1：直接从本地数组中移除（立即生效）
-    conversationVariables.value = conversationVariables.value.filter(v => v.name !== deletedVariableName)
-    console.log('🗑️ 本地移除变量后的列表:', conversationVariables.value.map(v => v.name))
+    // 直接从本地数组中移除（立即生效）
+    // conversationVariables.value = conversationVariables.value.filter(v => v.name !== deletedVariableName)
     
-    // 方案2：延迟后重新加载（确保数据一致性）
-    console.log('🔄 延迟200ms后重新加载变量数据...')
+    // 延迟后重新加载（确保数据一致性）
     setTimeout(async () => {
       await loadAllVariables()
-      console.log('📊 重新加载后的对话变量:', conversationVariables.value.map(v => v.name))
     }, 200)
     
     // 通知父组件变量已更新
-    console.log('📡 触发变量更新事件')
     emits('variablesUpdated')
   } catch (error) {
     console.error('❌ 删除变量失败:', error)
@@ -691,9 +611,7 @@ const closeDrawer = () => {
 }
 
 // 保存开始节点配置
-const saveStartNodeConfig = () => {
-  console.log('💾 保存开始节点配置（基于变量）')
-  
+const saveStartNodeConfig = () => {  
   // 构建对话变量对象用于节点显示
   const conversationVariablesObj: Record<string, any> = {}
   conversationVariables.value.forEach(variable => {
@@ -710,16 +628,13 @@ const saveStartNodeConfig = () => {
     conversation_variables: conversationVariablesObj,
     variables: conversationVariablesObj // 同时保存到variables字段以兼容不同的取值方式
   }
-  
-  console.log('📋 传递给节点的变量数据:', conversationVariablesObj)
-  
+    
   emits('saveStartNode', nodeParams, props.nodeYamlId, nodeName.value, nodeDescription.value)
   ElMessage.success('保存成功')
   closeDrawer()
 }
 
 onMounted(() => {
-  console.log('🚀 VariableBasedStartNodeDrawer 已挂载')
   // 确保组件挂载后初始化数据
   if (props.nodeName) {
     nodeName.value = props.nodeName
diff --git a/src/views/createapp/components/workFlowConfig/insertNodeMenu.vue b/src/views/createapp/components/workFlowConfig/insertNodeMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b6b067b2b3f4a68937e6366962ebfc83f4cc7a7
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/insertNodeMenu.vue
@@ -0,0 +1,370 @@
+<template>
+  <!-- 插入节点选择菜单 -->
+  <div
+    v-if="visible"
+    class="insert-node-menu-overlay"
+    @click="handleClose"
+  >
+    <div
+      class="insert-node-menu"
+      :class="`menu-${menuDirection}`"
+      :style="menuStyle"
+      @click.stop
+    >
+      <div class="menu-header">
+        <span>选择要插入的节点</span>
+        <div class="close-btn" @click="handleClose">×</div>
+      </div>
+      
+      <!-- Tab切换 -->
+      <div class="menu-tabs">
+        <div 
+          class="tab-item" 
+          :class="{ active: activeTab === 'nodes' }"
+          @click="activeTab = 'nodes'"
+        >
+          节点
+        </div>
+        <div 
+          class="tab-item disabled"
+          :class="{ active: activeTab === 'apps' }"
+        >
+          应用
+        </div>
+      </div>
+      
+      <div class="menu-content">
+        <!-- 节点Tab Panel -->
+        <div v-if="activeTab === 'nodes'" class="tab-panel">
+          <NodeListPanel
+            :api-service-list="apiServiceList"
+            search-placeholder="搜索节点..."
+            :enable-drag="false"
+            @node-click="handleSelectNode"
+          />
+        </div>
+        
+        <!-- 应用Tab Panel (暂时禁用) -->
+        <div v-if="activeTab === 'apps'" class="tab-panel">
+          <div class="disabled-panel">
+            <div class="disabled-text">应用功能即将上线，敬请期待...</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import NodeListPanel from './NodeListPanel.vue';
+
+// Props
+interface Props {
+  visible: boolean;
+  position: { x: number; y: number };
+  menuDirection: 'left' | 'right';
+  apiServiceList: any[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  position: () => ({ x: 0, y: 0 }),
+  menuDirection: 'right',
+  apiServiceList: () => []
+});
+
+// Emits
+interface Emits {
+  (e: 'close'): void;
+  (e: 'selectNode', node: any): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// 响应式数据
+const activeTab = ref('nodes');
+
+// 计算菜单样式，包含边界检测
+const menuStyle = computed(() => {
+  const { x, y } = props.position;
+  
+  // 获取Vue Flow容器的位置信息，将相对坐标转换为绝对坐标
+  const vueFlowElement = document.querySelector('.vue-flow__viewport');
+  const containerRect = vueFlowElement?.getBoundingClientRect();
+  
+  let absoluteX = x;
+  let absoluteY = y;
+  
+  // 如果找到了Vue Flow容器，将相对坐标转换为绝对坐标
+  if (containerRect) {
+    absoluteX = x + containerRect.left;
+    absoluteY = y + containerRect.top;
+  }
+  
+  const menuWidth = 400; // 菜单最大宽度
+  const menuHeight = 600; // 菜单预估最大高度
+  const padding = 20; // 距离边界的安全距离
+  
+  // 获取视口尺寸
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  
+  let left = absoluteX;
+  let top = absoluteY;
+  let transformX = '0';
+  let transformY = '-50%';
+  
+  // 水平位置调整
+  if (props.menuDirection === 'right') {
+    // 检查右侧是否有足够空间
+    if (absoluteX + menuWidth + padding > viewportWidth) {
+      // 右侧空间不足，菜单显示在点击位置左侧
+      transformX = '-100%';
+      left = absoluteX;
+    } else {
+      // 右侧有足够空间，菜单显示在点击位置右侧
+      transformX = '0';
+      left = absoluteX;
+    }
+  } else {
+    // menu-left 方向
+    // 检查左侧是否有足够空间
+    if (absoluteX - menuWidth < padding) {
+      // 左侧空间不足，菜单显示在点击位置右侧
+      transformX = '0';
+      left = absoluteX;
+    } else {
+      // 左侧有足够空间，菜单显示在点击位置左侧
+      transformX = '-100%';
+      left = absoluteX;
+    }
+  }
+  
+  // 垂直位置调整（重点处理顶部防护）
+  const halfMenuHeight = menuHeight / 2;
+  
+  // 检查顶部边界
+  if (absoluteY - halfMenuHeight < padding) {
+    // 菜单顶部会超出视口，调整到安全位置
+    top = padding + halfMenuHeight;
+    transformY = '-50%';
+  }
+  // 检查底部边界
+  else if (absoluteY + halfMenuHeight + padding > viewportHeight) {
+    // 菜单底部会超出视口，调整到安全位置
+    top = viewportHeight - padding - halfMenuHeight;
+    transformY = '-50%';
+  } else {
+    // 垂直居中于点击位置
+    top = absoluteY;
+    transformY = '-50%';
+  }
+  
+  const finalStyle = {
+    left: `${left}px`,
+    top: `${top}px`,
+    transform: `translate(${transformX}, ${transformY})`,
+    transformOrigin: 'center center'
+  };
+  
+  return finalStyle;
+});
+
+// 方法
+const handleClose = () => {
+  emit('close');
+};
+
+const handleSelectNode = (node: any) => {
+  emit('selectNode', node);
+};
+</script>
+
+<style lang="scss" scoped>
+.insert-node-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(2px);
+}
+
+.insert-node-menu {
+  position: absolute;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  border: 1px solid #e1e4e8;
+  width: 400px;
+  max-height: 80vh;
+  overflow: visible;
+  animation: menuSlideIn 0.2s ease-out;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  
+  &.menu-left,
+  &.menu-right {
+    animation: menuSlideIn 0.2s ease-out;
+  }
+  
+  .menu-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e1e4e8;
+    font-weight: 600;
+    font-size: 14px;
+    color: #24292e;
+    
+    .close-btn {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: #e1e4e8;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 16px;
+      color: #586069;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: #d1d5da;
+        color: #24292e;
+      }
+    }
+  }
+  
+  .menu-tabs {
+    display: flex;
+    padding: 12px 20px;
+    border-bottom: 1px solid #e1e4e8;
+    background: #f8f9fa;
+    
+    .tab-item {
+      padding: 8px 16px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #586069;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s ease;
+      
+      &.active {
+        color: #6395fd;
+        border-bottom-color: #6395fd;
+      }
+      
+      &.disabled {
+        color: #c0c4cc;
+        cursor: not-allowed;
+      }
+      
+      &:hover:not(.disabled) {
+        color: #6395fd;
+      }
+    }
+  }
+  
+  .menu-content {
+    padding: 0;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    
+    .tab-panel {
+      padding: 0;
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+    }
+    
+
+    
+    .disabled-panel {
+      text-align: center;
+      padding: 60px 20px;
+      color: #c0c4cc;
+      font-size: 14px;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+@keyframes menuSlideIn {
+  from {
+    opacity: 0;
+    scale: 0.9;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+// 深色主题支持
+.dark .insert-node-menu {
+  background: #2d3748;
+  border-color: #4a5568;
+  
+  .menu-header {
+    background: #1a202c;
+    border-bottom-color: #4a5568;
+    color: #e2e8f0;
+    
+    .close-btn {
+      background: #4a5568;
+      color: #a0aec0;
+      
+      &:hover {
+        background: #718096;
+        color: #e2e8f0;
+      }
+    }
+  }
+  
+  .menu-tabs {
+    background: #374151;
+    border-bottom-color: #4a5568;
+    
+    .tab-item {
+      color: #a0aec0;
+      
+      &.active {
+        color: #6395fd;
+        border-bottom-color: #6395fd;
+      }
+      
+      &.disabled {
+        color: #718096;
+        cursor: not-allowed;
+      }
+      
+      &:hover:not(.disabled) {
+        color: #e2e8f0;
+      }
+    }
+  }
+  
+  .menu-content {
+    .disabled-panel {
+      color: #718096;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/createapp/components/workFlowConfig/useDnD.js b/src/views/createapp/components/workFlowConfig/useDnD.js
index b69d9b145e35397811a29721e0cc46b2b83d9414..fe6ac941936addfd139f9a785b3b7a284d5d7dc8 100644
--- a/src/views/createapp/components/workFlowConfig/useDnD.js
+++ b/src/views/createapp/components/workFlowConfig/useDnD.js
@@ -43,7 +43,7 @@ export default function useDragAndDrop() {
       event.dataTransfer.setData('application/vueflow', type);
       event.dataTransfer.effectAllowed = 'move';
     }
-    draggedType.value = type === 'choice' ? 'branch' : 'custom';
+    draggedType.value = type === 'Choice' ? 'branch' : 'custom';
     isDragging.value = true;
     nodeData.value = { ...info };
 
diff --git a/src/views/createapp/components/workFlowDebug.vue b/src/views/createapp/components/workFlowDebug.vue
index e2ce2c135acc36ba9409d7f9004cad0fe8860fc0..2abf98c9ce7346325f3eb1b5d8b67ab905ea3257 100644
--- a/src/views/createapp/components/workFlowDebug.vue
+++ b/src/views/createapp/components/workFlowDebug.vue
@@ -1,17 +1,36 @@
 <template>
-  <div class="workFlowDebug">
+  <div class="workFlowDebug" :class="{ 'minimized': isMinimized }">
     <div class="workFlowDebugClose">
       <div class="title">{{ $t('flow.debug') }}</div>
-      <div class="closeBtn" @click="handleCloseDebugDialog"><IconX /></div>
+      <div class="controlButtons">
+        <!-- 最小化按钮 -->
+        <div v-if="!isMinimized" class="minimizeBtn" @click="handleMinimize">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path d="M14,8v1H2V8H14z"/>
+          </svg>
+        </div>
+        <!-- 还原按钮 -->
+        <div v-if="isMinimized" class="restoreBtn" @click="handleRestore">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path d="M3,5v8h8V5H3z M10,11H4V6h6V11z"/>
+          </svg>
+        </div>
+        <!-- 关闭按钮 -->
+        <div class="closeBtn" @click="handleCloseDebugDialog">
+          <IconX />
+        </div>
+      </div>
     </div>
-    <div class="debugContent">
+    <div v-show="!isMinimized" class="debugContent">
       <!-- 变量配置面板 -->
       <DebugVariablePanel
+        ref="debugVariablePanelRef"
         v-if="shouldShowVariablePanel"
         :visible="variablePanelVisible"
         :conversation-variables="conversationVariables"
         :variables-loading="variablesLoading"
         :flow-id="props.flowId"
+        :conversation-id="tmpConversationId"
         @toggle-visibility="toggleVariablePanel"
         @variable-updated="handleVariableUpdated"
       />
@@ -35,6 +54,7 @@
           :user-selected-app="user_selected_app"
           :search_suggestions="getItem(item, 'search_suggestions')"
           :paramsList="getItem(item, 'paramsList')"
+          :modeOptions="{}"
           :isWorkFlowDebug="true"
           @report="handleReport"
           @handleSendMessage="handleSendMessage"
@@ -87,6 +107,15 @@ import { storeToRefs } from 'pinia';
 import { api } from '@/apis';
 import { onBeforeRouteLeave } from 'vue-router';
 import { listVariables } from '@/api/variable';
+
+interface ConversationVariable {
+  name: string;
+  var_type: string;
+  scope: string;
+  value?: any;
+  description?: string;
+}
+
 // 对话列表
 const { sendQuestion, stopDebug } = useSessionStore();
 const testFlag = ref(true);
@@ -112,14 +141,28 @@ const props = defineProps({
 // 对话输入内容
 const dialogueInput = ref<string>('');
 
+// 最小化状态
+const isMinimized = ref(false);
+
+// 最小化和还原方法
+const handleMinimize = () => {
+  isMinimized.value = true;
+};
+
+const handleRestore = () => {
+  isMinimized.value = false;
+};
+
 // 变量面板相关状态
+const debugVariablePanelRef = ref<InstanceType<typeof DebugVariablePanel> | null>(null);
 const variablePanelVisible = ref(true);
-const conversationVariables = ref<any[]>([]);
+const conversationVariables = ref<ConversationVariable[]>([]);
 const variablesLoading = ref(false);
 
 // 计算属性：是否应该显示变量面板
 const shouldShowVariablePanel = computed(() => {
-  return conversationVariables.value.length > 0;
+  // 总是显示变量面板，即使暂时没有变量数据
+  return true;
 });
 
 // 切换变量面板显示/隐藏
@@ -134,33 +177,48 @@ const handleVariableUpdated = () => {
 
 // 加载对话变量
 const loadConversationVariables = async () => {
-  if (!props.flowId) return;
-  
   variablesLoading.value = true;
   try {
-    const response = await listVariables({ 
-      scope: 'conversation', 
-      flow_id: props.flowId 
-    });
+    let queryParams: any = { scope: 'conversation' };
+    
+    // 优先使用对话ID，如果没有则使用flowId
+    if (tmpConversationId.value) {
+      queryParams.conversation_id = tmpConversationId.value;
+    } else if (props.flowId) {
+      queryParams.flow_id = props.flowId;
+    } else {
+      return;
+    }
     
+    const response = await listVariables(queryParams);
+        
     // 处理API响应
-    let variables = null;
+    let variables: ConversationVariable[] = [];
     if (response?.result?.variables) {
       variables = response.result.variables;
     } else if ((response as any)?.variables) {
       variables = (response as any).variables;
     } else if (Array.isArray(response)) {
-      variables = response;
+      variables = response as ConversationVariable[];
     }
     
     conversationVariables.value = variables || [];
+    
   } catch (error) {
-    console.error('加载对话变量失败:', error);
+    console.error('❌ 加载变量失败:', error);
     conversationVariables.value = [];
   } finally {
     variablesLoading.value = false;
   }
 };
+
+// 批量更新所有变量到后端
+const updateAllVariablesToBackend = async (conversationId: string) => {
+  if (debugVariablePanelRef.value && 'batchUpdateVariables' in debugVariablePanelRef.value) {
+    return await (debugVariablePanelRef.value as any).batchUpdateVariables(conversationId);
+  }
+  return true;
+};
 /**
  *
  * @param item
@@ -172,6 +230,12 @@ const getItem = <T,>(item: ConversationItem, field: string): T | undefined => {
   return undefined;
 };
 
+// 举报函数
+const handleReport = async (qaRecordId: string, reason?: string) => {
+  // 处理举报逻辑
+  console.log('举报记录:', qaRecordId, reason);
+};
+
 onMounted(() => {
   // 删除成功
   conversationList.value = [];
@@ -179,7 +243,7 @@ onMounted(() => {
   currentSelectedSession.value = '';
   historySession.value = [];
   
-  // 加载对话变量
+  // 尝试加载变量配置（基于flowId）
   loadConversationVariables();
 });
 
@@ -199,9 +263,22 @@ const handleSendMessage = async (
   )
     return;
   dialogueInput.value = '';
+  
+  // 生成对话ID（如果还没有）
   if (!tmpConversationId.value) {
     const res = await generateSessionDebug({ debug: true });
     tmpConversationId.value = res || 1;
+    console.log('✅ 新对话创建，conversationId:', tmpConversationId.value);
+  }
+
+  // 先更新所有变量到后端（使用用户在面板中输入的值），再发送消息
+  if (tmpConversationId.value) {
+    console.log('🔄 准备更新变量到后端...');
+    await updateAllVariablesToBackend(tmpConversationId.value);
+    
+    // 变量更新完成后，重新加载以确保状态同步
+    console.log('🔄 变量更新完成，重新加载变量状态...');
+    await loadConversationVariables();
   }
 
   props.handleDebugDialogOps!();
@@ -238,8 +315,20 @@ const handleKeydown = (event: KeyboardEvent) => {
 
 const handleCloseDebugDialog = () => {
   testFlag.value = false;
-  stopDebug();
+  
+  // 只有在有对话时才调用 stopDebug，避免访问空数组
+  if (conversationList.value.length > 0) {
+    stopDebug();
+  } else {
+    // 如果没有对话，直接停止生成状态
+    isAnswerGenerating.value = false;
+  }
+  
   delChat();
+  // 清理变量状态
+  console.log('🗑️ 调试窗口关闭，清理变量状态');
+  conversationVariables.value = [];
+  tmpConversationId.value = '';
   props.handleDebugDialogOps!(false);
 };
 
diff --git a/src/views/dialogue/Copilot.vue b/src/views/dialogue/Copilot.vue
index c93cbbed9afdb7bd0f96ac7eaa5ccf01c2251455..1164d4cf786e21ca98a8a4e955ac644c4d387e77 100644
--- a/src/views/dialogue/Copilot.vue
+++ b/src/views/dialogue/Copilot.vue
@@ -47,10 +47,18 @@ watch(
   () => {
     const currRoute = router.currentRoute;
     if (currRoute.value.query.appId && userinfo.user_sub) {
+      const appId = route.query?.appId as string;
+      const appName = route.query?.name as string;
+      
+      // 同步到store
+      app.value.appId = appId;
+      app.value.name = appName || '';
+      app.value.selectedAppId = appId;
+      
       // 判断是否编辑--是否需要查询回显数据
       api
         .querySingleAppData({
-          id: route.query?.appId as string,
+          id: appId,
         })
         .then((res) => {
           const appInfo = res?.[1]?.result;
diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue
index e39abf90e403bf703c806d8018630233c5e0849e..e62ddab1cf0766287d3d2a9df341a9eaea061101 100644
--- a/src/views/dialogue/components/DialogueAside.vue
+++ b/src/views/dialogue/components/DialogueAside.vue
@@ -28,7 +28,10 @@ import {
   IconChevronUp,
   IconChevronDown,
 } from '@computing/opendesign-icons';
-import router from 'src/router';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
 const { user_selected_app } = storeToRefs(useHistorySessionStore());
 
 interface HistorySession {
@@ -273,11 +276,28 @@ const selectApp = (id) => {
     user_selected_app.value = '';
     app.value.selectedAppId = '';
     app.value.appId = '';
+    // 清除URL中的appId参数
+    router.replace({ 
+      path: '/',
+      query: {}
+    });
   } else {
     selectedAppId.value = id;
     user_selected_app.value = id;
     app.value.selectedAppId = id;
     app.value.appId = id;
+    
+    // 找到选中的应用信息
+    const selectedApp = apps.value.find(app => app.appId === id);
+    
+    // 更新URL参数
+    router.replace({
+      path: '/',
+      query: {
+        appId: id,
+        name: selectedApp?.name || ''
+      }
+    });
   }
   getHistorySession();
 };
@@ -337,6 +357,33 @@ watch(
     }
   },
 );
+
+// 监听路由参数变化，同步应用选择状态
+watch(
+  () => route.query.appId,
+  (newAppId) => {
+    if (newAppId && typeof newAppId === 'string') {
+      // 从URL参数恢复应用选择
+      selectedAppId.value = newAppId;
+      user_selected_app.value = newAppId;
+      if (app.value) {
+        app.value.selectedAppId = newAppId;
+        app.value.appId = newAppId;
+        app.value.name = (route.query.name as string) || '';
+      }
+    } else if (!newAppId) {
+      // URL中没有appId，清除选择
+      selectedAppId.value = '';
+      user_selected_app.value = '';
+      if (app.value) {
+        app.value.selectedAppId = '';
+        app.value.appId = '';
+        app.value.name = '';
+      }
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
diff --git a/src/views/dialogue/components/DialogueSession.vue b/src/views/dialogue/components/DialogueSession.vue
index 88ae0416e76152fa2006d8f2bfc81f8a3fe88636..907b31db03f00c94383cad0b050a3ed5e4651e26 100644
--- a/src/views/dialogue/components/DialogueSession.vue
+++ b/src/views/dialogue/components/DialogueSession.vue
@@ -16,6 +16,8 @@ import { api } from 'src/apis';
 import { useHistorySessionStore } from 'src/store/historySession';
 import { successMsg, errorMsg } from 'src/components/Message';
 import i18n from 'src/i18n';
+import DialogueVariablePanel from './DialogueVariablePanel.vue';
+import { listVariables } from '@/api/variable';
 const isDropdownOpen = ref(false);
 const { appList } = storeToRefs(useSessionStore());
 const { user_selected_app, selectLLM } = storeToRefs(useHistorySessionStore());
@@ -43,12 +45,150 @@ const { app } = storeToRefs(useSessionStore());
 // 对话输入内容
 const dialogueInput = ref<string>('');
 
+// 变量配置相关状态
+const conversationVariables = ref<any[]>([]);
+const variablesLoading = ref(false);
+const showVariablePanel = ref(false);
+const variablePanelMinimized = ref(false);
+const conversationStarted = ref(false);
+const currentFlowId = ref<string>('');
+
 // 对话列表
 const { sendQuestion } = useSessionStore();
 const { conversationList, isAnswerGenerating, dialogueRef } =
   storeToRefs(useSessionStore());
 const { generateSession } = useHistorySessionStore();
 const { currentSelectedSession } = storeToRefs(useHistorySessionStore());
+
+// 加载对话变量
+const loadConversationVariables = async () => {
+  if (!user_selected_app.value) return;
+  
+  variablesLoading.value = true;
+  try {
+    // 首先根据 app_id 获取应用详情，从中获取 flow_id
+    console.log('📤 根据 app_id 查询应用详情:', user_selected_app.value);
+    const [appError, appResponse] = await api.querySingleAppData({
+      id: user_selected_app.value
+    });
+    
+    if (appError || !appResponse?.result) {
+      console.log('❌ 获取应用信息失败:', appError, appResponse);
+      conversationVariables.value = [];
+      currentFlowId.value = '';
+      showVariablePanel.value = false;
+      conversationStarted.value = true;
+      return;
+    }
+    
+    const workflows = appResponse.result.workflows;
+    if (!workflows || !Array.isArray(workflows) || workflows.length === 0) {
+      console.log('❌ 应用没有工作流:', workflows);
+      conversationVariables.value = [];
+      currentFlowId.value = '';
+      showVariablePanel.value = false;
+      conversationStarted.value = true;
+      return;
+    }
+    
+    // 获取第一个工作流的ID作为flow_id（通常应用只有一个主工作流）
+    const flowId = workflows[0].id;
+    currentFlowId.value = flowId;
+    console.log('✅ 获取到 flow_id:', flowId, '工作流列表:', workflows);
+    
+    // 使用 flow_id 查询变量列表
+    const queryParams: any = { 
+      scope: 'conversation',
+      flow_id: flowId
+    };
+    
+    console.log('📤 查询变量参数:', queryParams);
+    const response = await listVariables(queryParams);
+    
+    console.log('📥 对话变量查询响应:', response);
+    
+    // 处理API响应
+    let variables: any[] = [];
+    if (response?.result?.variables) {
+      variables = response.result.variables;
+    } else if ((response as any)?.variables) {
+      variables = (response as any).variables;
+    } else if (Array.isArray(response)) {
+      variables = response as any[];
+    }
+    
+    // 过滤出 conversation 类型的用户可编辑变量
+    const conversationVars = variables.filter(variable => 
+      variable.scope === 'conversation' && 
+      !variable.name.includes('.result') &&
+      !variable.name.match(/^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\./)
+    );
+    
+    conversationVariables.value = conversationVars || [];
+    
+    // 如果有可编辑的变量，则显示变量面板
+    if (conversationVars.length > 0) {
+      // 如果没有对话，显示完整的变量面板
+      if (conversationList.value.length === 0) {
+        showVariablePanel.value = true;
+        variablePanelMinimized.value = false;
+        conversationStarted.value = false;
+      } else {
+        // 如果已有对话，显示最小化的变量面板
+        showVariablePanel.value = false;
+        variablePanelMinimized.value = true;
+        conversationStarted.value = true;
+      }
+    } else {
+      showVariablePanel.value = false;
+      variablePanelMinimized.value = false;
+      conversationStarted.value = true;
+    }
+    
+    console.log('✅ 变量加载完成:', conversationVariables.value);
+    console.log('🎛️ 变量面板显示状态:', {
+      showVariablePanel: showVariablePanel.value,
+      variablePanelMinimized: variablePanelMinimized.value,
+      conversationStarted: conversationStarted.value,
+      conversationListLength: conversationList.value.length,
+      conversationVarsLength: conversationVars.length
+    });
+    
+      } catch (error) {
+      console.error('❌ 加载变量失败:', error);
+      conversationVariables.value = [];
+      currentFlowId.value = '';
+      showVariablePanel.value = false;
+      conversationStarted.value = true;
+  } finally {
+    variablesLoading.value = false;
+  }
+};
+
+// 处理变量面板展开
+const handleVariablePanelExpand = () => {
+  showVariablePanel.value = true;
+  variablePanelMinimized.value = false;
+  conversationStarted.value = false;
+};
+
+// 处理开始对话
+const handleStartConversation = () => {
+  showVariablePanel.value = false;
+  variablePanelMinimized.value = true;
+  conversationStarted.value = true;
+  
+  // 聚焦到输入框
+  if (inputRef.value) {
+    inputRef.value.focus();
+  }
+};
+
+// 处理变量更新
+const handleVariableUpdated = () => {
+  console.log('🔄 变量已更新');
+};
+
 /**
  * 发送消息
  */
@@ -518,6 +658,14 @@ onMounted(() => {
   if (!inputRef.value) return;
   inputRef.value.focus();
   getProviderLLM();
+  
+  // 加载变量配置（如果有选中的应用）
+  if (user_selected_app.value) {
+    console.log('🚀 页面加载时检查变量配置, appId:', user_selected_app.value);
+    loadConversationVariables();
+  }
+  
+
 });
 
 watch(selectLLM, (newValue) => {
@@ -582,6 +730,8 @@ watch(
     }
     if (user_selected_app.value && !isCreateApp.value) {
       getappMode(user_selected_app.value);
+      // 加载变量配置
+      loadConversationVariables();
     }
     if (!isCreateApp.value) {
       Form.value = props.createAppForm;
@@ -593,6 +743,27 @@ watch(
   },
 );
 
+// 监听对话列表变化，调整变量面板显示状态
+watch(
+  conversationList,
+  (newList) => {
+    if (conversationVariables.value.length > 0) {
+      if (newList.length > 0) {
+        // 有对话时，如果有变量则显示最小化面板
+        showVariablePanel.value = false;
+        variablePanelMinimized.value = true;
+        conversationStarted.value = true;
+      } else {
+        // 没有对话时，如果有变量则显示完整面板
+        showVariablePanel.value = true;
+        variablePanelMinimized.value = false;
+        conversationStarted.value = false;
+      }
+    }
+  },
+  { deep: true }
+);
+
 watch(
   () => app,
   (val) => {
@@ -623,6 +794,35 @@ watch(
   <div class="dialogue-rightContainer">
     <!-- 会话区域 -->
     <div style="height: 100%" class="dialogue-conversation">
+      <!-- 变量面板固定区域 -->
+      <div class="dialogue-variable-section" v-if="!isCreateApp">
+        <DialogueVariablePanel
+          v-if="showVariablePanel && conversationVariables.length > 0"
+          :is-minimized="variablePanelMinimized"
+          :conversation-variables="conversationVariables"
+          :variables-loading="variablesLoading"
+          :conversation-id="currentSelectedSession"
+          :app-id="currentFlowId"
+          @expand="handleVariablePanelExpand"
+          @start-conversation="handleStartConversation"
+          @variable-updated="handleVariableUpdated"
+        />
+        
+        <!-- 最小化的变量面板 -->
+        <DialogueVariablePanel
+          v-if="variablePanelMinimized && conversationVariables.length > 0"
+          :is-minimized="true"
+          :conversation-variables="conversationVariables"
+          :variables-loading="variablesLoading"
+          :conversation-id="currentSelectedSession"
+          :app-id="currentFlowId"
+          @expand="handleVariablePanelExpand"
+          @start-conversation="handleStartConversation"
+          @variable-updated="handleVariableUpdated"
+        />
+      </div>
+
+      <!-- 对话内容滚动区域 -->
       <div
         class="dialogue-conversation-main"
         ref="dialogueRef"
@@ -642,6 +842,7 @@ watch(
             </div>
           </div>
         </div>
+
         <DialoguePanel
           v-for="(item, index) in conversationList"
           :cid="item.cid"
@@ -668,21 +869,28 @@ watch(
           :user-selected-app="user_selected_app"
           :search_suggestions="getItem(item, 'search_suggestions')"
           :paramsList="getItem(item, 'paramsList')"
+          :modeOptions="{}"
+          :isWorkFlowDebug="false"
+          :hideInputParams="true"
           @handleReport="handleReport"
           @handleSendMessage="handleSendMessage"
           @clearSuggestion="clearSuggestion(index)"
         />
+
         <template v-if="conversationList.length === 0">
-          <InitalPanel
-            v-if="app.selectedAppId === '' || !app.selectedAppId"
-            @selectQuestion="selectQuestion"
-          />
-          <div v-else class="dialogue-interPreview-main">
-            <InterPreview
-              :createAppForm="Form"
+          <!-- 原有的初始面板，只在对话还没开始且没有显示变量配置面板时显示 -->
+          <template v-if="!showVariablePanel || conversationVariables.length === 0">
+            <InitalPanel
+              v-if="app.selectedAppId === '' || !app.selectedAppId"
               @selectQuestion="selectQuestion"
             />
-          </div>
+            <div v-else class="dialogue-interPreview-main">
+              <InterPreview
+                :createAppForm="Form"
+                @selectQuestion="selectQuestion"
+              />
+            </div>
+          </template>
         </template>
       </div>
       <div class="dialogue-conversation-bottom">
@@ -943,6 +1151,7 @@ button[disabled]:hover {
   align-items: center;
   justify-content: space-between;
   min-width: 982px;
+  height: 100%;
 
   &::before {
     content: '';
@@ -955,13 +1164,25 @@ button[disabled]:hover {
     z-index: -1;
   }
 
+  // 变量面板固定区域
+  .dialogue-variable-section {
+    width: 100%;
+    flex-shrink: 0;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    padding: 0 88px; // 与主内容区域保持一致的边距
+  }
+
   &-main {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    height: 100%;
+    flex: 1;
     overflow-y: auto;
+    min-height: 0; // 确保flex子项可以收缩
+    
     .initial-message {
       background-color: #fff;
     }
diff --git a/src/views/dialogue/components/DialogueVariablePanel.vue b/src/views/dialogue/components/DialogueVariablePanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0482141b2545f5f39f41cc64773aafc50cd2ed31
--- /dev/null
+++ b/src/views/dialogue/components/DialogueVariablePanel.vue
@@ -0,0 +1,764 @@
+<template>
+  <div class="dialogue-variable-panel" :class="{ 'panel-minimized': isMinimized }">
+    <!-- 面板头部 -->
+    <div class="panel-header">
+      <div class="header-left">
+        <div class="variable-icon">💬</div>
+        <span class="header-title">新对话设置</span>
+      </div>
+        <div class="header-right" v-if="isMinimized">
+          <el-button
+            text
+            type="default"
+            size="small"
+            @click="$emit('expand')"
+          >
+            编辑
+          </el-button>
+        </div>
+    </div>
+
+    <!-- 面板内容 -->
+    <div v-if="!isMinimized" class="panel-content">
+      <div class="variable-list" v-loading="variablesLoading || false">
+        <!-- 对话变量展示 -->
+        <div 
+          v-for="variable in internalVariables" 
+          :key="`conv_${variable.name}`"
+          class="variable-item"
+        >
+          <div class="variable-label">
+            <span class="variable-type-icon">{{ getVariableTypeIcon(variable.var_type) }}</span>
+            {{ variable.name }}
+          </div>
+          <div class="variable-note">可选</div>
+          <div class="variable-input-wrapper">
+            <!-- String 和 Number 类型：普通输入框 -->
+            <el-input
+              v-if="variable.var_type === 'string' || variable.var_type === 'number'"
+              v-model="variable.displayValue"
+              :placeholder="getVariablePlaceholder(variable)"
+              :type="variable.var_type === 'number' ? 'number' : 'text'"
+              size="default"
+              @input="handleVariableInput(variable)"
+              class="variable-input"
+            />
+            
+            <!-- Boolean 类型：开关 -->
+            <el-switch
+              v-else-if="variable.var_type === 'boolean'"
+              v-model="variable.booleanValue"
+              active-text="true"
+              inactive-text="false"
+              size="default"
+              @change="updateBooleanVariable(variable)"
+              class="variable-switch"
+            />
+            
+            <!-- Object 类型：文本域 -->
+            <el-input
+              v-else-if="variable.var_type === 'object'"
+              v-model="variable.displayValue"
+              type="textarea"
+              :rows="3"
+              :placeholder="getVariablePlaceholder(variable)"
+              size="default"
+              @input="handleVariableInput(variable)"
+              class="variable-textarea"
+            />
+            
+            <!-- File 类型：文件上传 -->
+            <div v-else-if="variable.var_type === 'file'" class="file-upload-section">
+              <el-upload
+                class="variable-file-upload"
+                :auto-upload="false"
+                :show-file-list="false"
+                :on-change="(file) => handleFileChange(variable, file)"
+                :accept="getFileAcceptTypes()"
+              >
+                <el-button size="default" type="primary">
+                  <el-icon><IconUpload /></el-icon>
+                  选择文件
+                </el-button>
+              </el-upload>
+              <div v-if="variable.fileName" class="selected-file">
+                <span class="file-name">{{ variable.fileName }}</span>
+                <el-button
+                  size="small"
+                  type="danger"
+                  text
+                  @click="clearFileVariable(variable)"
+                >
+                  <el-icon><IconDelete /></el-icon>
+                </el-button>
+              </div>
+            </div>
+            
+            <!-- Array[String] 类型：标签输入 -->
+            <div v-else-if="variable.var_type === 'array[string]'" class="string-array-section">
+              <el-input
+                v-model="variable.stringArrayInput"
+                placeholder="输入后按回车添加，或用逗号分隔多个值"
+                size="default"
+                @keydown.enter="addStringToArray(variable)"
+                class="array-input"
+              />
+              <div v-if="variable.stringArray && variable.stringArray.length > 0" class="string-tags">
+                <el-tag
+                  v-for="(item, index) in variable.stringArray"
+                  :key="index"
+                  closable
+                  @close="removeStringFromArray(variable, index)"
+                  size="default"
+                >
+                  {{ item }}
+                </el-tag>
+              </div>
+            </div>
+            
+            <!-- Secret 类型：密码输入 -->
+            <el-input
+              v-else-if="variable.var_type === 'secret'"
+              v-model="variable.displayValue"
+              type="password"
+              :placeholder="getVariablePlaceholder(variable)"
+              size="default"
+              show-password
+              @input="handleVariableInput(variable)"
+              class="variable-input"
+            />
+            
+            <!-- 其他类型：默认输入框 -->
+            <el-input
+              v-else
+              v-model="variable.displayValue"
+              :placeholder="getVariablePlaceholder(variable)"
+              size="default"
+              @input="handleVariableInput(variable)"
+              class="variable-input"
+            />
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div v-if="internalVariables.length === 0 && !variablesLoading" class="empty-state">
+          <div class="empty-text">暂无需要配置的变量</div>
+        </div>
+      </div>
+
+      <!-- 开始对话按钮 -->
+      <div class="start-conversation-btn">
+        <el-button
+          type="primary"
+          size="large"
+          @click="handleStartConversation"
+          :loading="isStarting"
+          class="start-btn"
+        >
+          开始对话
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { ElMessage, ElTag, ElSwitch, ElUpload } from 'element-plus'
+import { IconUpload, IconDelete } from '@computing/opendesign-icons'
+import { updateVariable } from '@/api/variable'
+
+interface Variable {
+  name: string
+  var_type: string
+  scope: string
+  value?: any
+  description?: string
+  displayValue?: string
+  booleanValue?: boolean
+  fileName?: string
+  fileList?: Array<{ name: string; file: File }>
+  stringArray?: string[]
+  stringArrayInput?: string
+}
+
+interface Props {
+  isMinimized: boolean
+  conversationVariables: Variable[]
+  variablesLoading?: boolean
+  conversationId?: string
+  appId?: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['expand', 'startConversation', 'variableUpdated'])
+
+// 内部独立的变量状态
+const internalVariables = ref<Variable[]>([])
+const isStarting = ref(false)
+
+// 检查是否是用户可编辑的变量
+const isEditableVariable = (variable: Variable): boolean => {
+  // 必须是 conversation 类型
+  if (variable.scope !== 'conversation') {
+    return false
+  }
+  
+  // 排除 UUID.result 格式的变量名（这些是 node 执行结果）
+  const uuidResultPattern = /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\.result$/i
+  if (uuidResultPattern.test(variable.name)) {
+    return false
+  }
+  
+  // 排除其他系统变量格式
+  const systemVariablePatterns = [
+    /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\./i, // UUID.xxx 格式
+    /^node_\d+\./i, // node_xxx.xxx 格式
+    /^sys\./i, // sys.xxx 格式
+    /^_/i // 下划线开头的内部变量
+  ]
+  
+  for (const pattern of systemVariablePatterns) {
+    if (pattern.test(variable.name)) {
+      return false
+    }
+  }
+  
+  return true
+}
+
+// 初始化内部变量状态
+const initializeInternalVariables = () => {
+  // 只显示用户可编辑的 conversation 变量
+  const editableVariables = props.conversationVariables.filter(isEditableVariable)
+  
+  internalVariables.value = editableVariables.map(variable => ({
+    ...variable,
+    displayValue: getVariableDisplayValue(variable.value),
+    // 初始化特殊类型的属性
+    booleanValue: variable.var_type === 'boolean' ? (variable.value === true || variable.value === 'true') : undefined,
+    fileName: variable.var_type === 'file' && variable.value?.name ? variable.value.name : undefined,
+    fileList: variable.var_type === 'array[file]' && Array.isArray(variable.value) 
+      ? variable.value.map(v => ({ name: v.name || v, file: v })) 
+      : [],
+    stringArray: variable.var_type === 'array[string]' && Array.isArray(variable.value) 
+      ? [...variable.value] 
+      : [],
+    stringArrayInput: ''
+  }))
+  
+  console.log('💬 对话变量面板初始化，可编辑变量:', internalVariables.value.map(v => `${v.name}(${v.scope})`))
+}
+
+// 获取变量显示值
+const getVariableDisplayValue = (value: any): string => {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+
+// 获取变量类型图标
+const getVariableTypeIcon = (type: string): string => {
+  switch (type) {
+    case 'string':
+      return '📝'
+    case 'number':
+      return '🔢'
+    case 'boolean':
+      return '🔘'
+    case 'object':
+      return '📋'
+    case 'secret':
+      return '🔐'
+    case 'file':
+      return '📎'
+    case 'array[string]':
+      return '📝'
+    case 'array[file]':
+      return '📎'
+    default:
+      return '⚙️'
+  }
+}
+
+// 获取变量占位符
+const getVariablePlaceholder = (variable: Variable): string => {
+  switch (variable.var_type) {
+    case 'string':
+      return '请输入文本值'
+    case 'number':
+      return '请输入数字'
+    case 'boolean':
+      return 'true 或 false'
+    case 'object':
+      return '请输入JSON格式'
+    case 'secret':
+      return '请输入密钥'
+    case 'array[string]':
+      return '输入字符串值'
+    default:
+      return '请输入变量值'
+  }
+}
+
+// 获取文件接受类型
+const getFileAcceptTypes = (): string => {
+  return '.pdf,.docx,.doc,.txt,.md,.xlsx'
+}
+
+// 处理变量输入事件
+const handleVariableInput = (variable: Variable) => {
+  console.log('🔧 变量值更新:', variable.name, '=', variable.displayValue)
+}
+
+// 更新布尔变量
+const updateBooleanVariable = async (variable: Variable) => {
+  if (!props.conversationId) {
+    return
+  }
+
+  try {
+    await updateVariable(
+      { 
+        name: variable.name, 
+        scope: 'conversation',
+        conversation_id: props.conversationId,
+        flow_id: props.appId
+      },
+      { 
+        value: variable.booleanValue,
+        var_type: variable.var_type,
+        description: variable.description
+      }
+    )
+
+    emit('variableUpdated')
+  } catch (error) {
+    console.error('更新变量失败:', error)
+    ElMessage.error('更新变量失败')
+  }
+}
+
+// 处理文件选择
+const handleFileChange = async (variable: Variable, file: any) => {
+  if (!file) return
+  
+  variable.fileName = file.name
+  // 这里可以添加文件上传逻辑
+}
+
+// 清除文件变量
+const clearFileVariable = async (variable: Variable) => {
+  variable.fileName = undefined
+}
+
+// 添加字符串到数组
+const addStringToArray = (variable: Variable) => {
+  if (!variable.stringArrayInput || !variable.stringArrayInput.trim()) return
+  
+  if (!variable.stringArray) {
+    variable.stringArray = []
+  }
+  
+  const value = variable.stringArrayInput.trim()
+  if (!variable.stringArray.includes(value)) {
+    variable.stringArray.push(value)
+    variable.stringArrayInput = ''
+  }
+}
+
+// 从字符串数组中移除项
+const removeStringFromArray = (variable: Variable, index: number) => {
+  if (!variable.stringArray) return
+  variable.stringArray.splice(index, 1)
+}
+
+// 批量更新所有变量到后端
+const batchUpdateVariables = async (): Promise<boolean> => {
+  if (!props.conversationId) {
+    console.log('❌ 缺少对话ID，无法批量更新变量')
+    return false
+  }
+
+  const editableVariables = internalVariables.value.filter(isEditableVariable)
+
+  if (editableVariables.length === 0) {
+    console.log('📋 没有可编辑变量需要更新')
+    return true
+  }
+
+  try {
+    console.log('🔄 开始批量更新变量到后端...')
+    console.log('📋 对话ID:', props.conversationId)
+    console.log('📋 要更新的可编辑变量:', editableVariables.map(v => v.name))
+    
+    const updatePromises = editableVariables.map(async (variable) => {
+      const updateParams = {
+        name: variable.name,
+        scope: 'conversation',
+        conversation_id: props.conversationId,
+        flow_id: props.appId
+      }
+      
+      // 根据变量类型处理值
+      let processedValue = variable.displayValue || variable.value
+      
+      // 特殊类型的值处理
+      if (variable.var_type === 'boolean') {
+        processedValue = variable.booleanValue
+      } else if (variable.var_type === 'number' && variable.displayValue) {
+        const numValue = Number(variable.displayValue)
+        processedValue = isNaN(numValue) ? variable.value : numValue
+      } else if (variable.var_type === 'object' && variable.displayValue) {
+        try {
+          processedValue = JSON.parse(variable.displayValue)
+        } catch (error) {
+          console.warn(`⚠️ 变量 ${variable.name} JSON 解析失败，使用原始值`)
+          processedValue = variable.displayValue
+        }
+      } else if (variable.var_type === 'array[string]') {
+        processedValue = variable.stringArray || []
+      } else if (variable.var_type === 'file') {
+        processedValue = variable.fileName ? { name: variable.fileName } : null
+      }
+      
+      const updateData = {
+        value: processedValue,
+        var_type: variable.var_type,
+        description: variable.description
+      }
+      
+      try {
+        const result = await updateVariable(updateParams, updateData)
+        console.log(`✅ 变量 ${variable.name} 更新成功:`, result)
+        return { success: true, variable: variable.name }
+      } catch (error) {
+        console.error(`❌ 变量 ${variable.name} 更新失败:`, error)
+        return { success: false, variable: variable.name, error }
+      }
+    })
+    
+    const results = await Promise.all(updatePromises)
+    const successCount = results.filter(r => r.success).length
+    
+    console.log(`📊 变量更新结果: 成功 ${successCount}/${results.length}`)
+    
+    if (successCount > 0) {
+      emit('variableUpdated')
+    }
+    
+    return successCount > 0
+  } catch (error) {
+    console.error('❌ 批量更新变量失败:', error)
+    return false
+  }
+}
+
+// 处理开始对话
+const handleStartConversation = async () => {
+  isStarting.value = true
+  try {
+    // 先更新所有变量
+    await batchUpdateVariables()
+    
+    // 通知父组件开始对话
+    emit('startConversation')
+  } catch (error) {
+    console.error('开始对话失败:', error)
+    ElMessage.error('开始对话失败')
+  } finally {
+    isStarting.value = false
+  }
+}
+
+// 监听props变化，重新初始化内部变量
+watch(
+  () => props.conversationVariables,
+  (newVariables) => {
+    if (newVariables && newVariables.length >= 0) {
+      console.log('📡 外部变量数据变化，重新初始化内部状态')
+      initializeInternalVariables()
+    }
+  },
+  { immediate: true }
+)
+
+// 暴露方法给父组件调用
+defineExpose({
+  batchUpdateVariables
+})
+</script>
+
+<style lang="scss" scoped>
+.dialogue-variable-panel {
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  width: 90%;
+  max-width: 800px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+  &.panel-minimized {
+    width: 60%;
+    max-width: 500px;
+    
+    .panel-header {
+      padding: 8px 16px;
+      border-bottom: none;
+      
+      .header-title {
+        font-size: 12px;
+      }
+      
+      .variable-icon {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    background: linear-gradient(135deg, var(--el-color-primary-light-9), var(--el-color-primary-light-8));
+    border-bottom: 1px solid var(--el-border-color-lighter);
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .variable-icon {
+        font-size: 20px;
+        background: var(--el-color-primary-light-9);
+        padding: 8px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .header-title {
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--el-text-color-primary);
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .header-right {
+      .el-button {
+        font-size: 12px;
+        padding: 4px 8px;
+        
+        &:hover {
+          background: var(--el-color-primary-light-9);
+        }
+      }
+    }
+  }
+
+  .panel-content {
+    padding: 20px;
+
+    .variable-list {
+      margin-bottom: 32px;
+      
+      .variable-item {
+        margin-bottom: 24px;
+        padding: 20px;
+        background: var(--el-fill-color-extra-light);
+        border: 1px solid var(--el-border-color-lighter);
+        border-radius: 8px;
+        transition: all 0.2s ease;
+        
+        &:hover {
+          border-color: var(--el-color-primary-light-7);
+          background: var(--el-color-primary-light-9);
+        }
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .variable-label {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+          margin-bottom: 6px;
+          display: flex;
+          align-items: center;
+          
+          .variable-type-icon {
+            margin-right: 8px;
+            font-size: 16px;
+          }
+        }
+
+        .variable-note {
+          font-size: 13px;
+          color: var(--el-text-color-secondary);
+          margin-bottom: 12px;
+          padding: 4px 8px;
+          background: var(--el-color-warning-light-9);
+          border-radius: 4px;
+          display: inline-block;
+        }
+
+        .variable-input-wrapper {
+          .variable-input,
+          .variable-textarea {
+            width: 100%;
+            
+            // 重置 wrapper 的样式，避免与 inner 重叠
+            :deep(.el-input__wrapper) {
+              border: none !important;
+              box-shadow: none !important;
+              background: transparent !important;
+              padding: 0 !important;
+              
+              &:hover {
+                border: none !important;
+                box-shadow: none !important;
+              }
+              
+              &.is-focus {
+                border: none !important;
+                box-shadow: none !important;
+              }
+            }
+            
+            :deep(.el-textarea__wrapper) {
+              border: none !important;
+              box-shadow: none !important;
+              background: transparent !important;
+              padding: 0 !important;
+              
+              &:hover {
+                border: none !important;
+                box-shadow: none !important;
+              }
+              
+              &.is-focus {
+                border: none !important;
+                box-shadow: none !important;
+              }
+            }
+            
+            // 只在 inner 上应用样式
+            :deep(.el-input__inner),
+            :deep(.el-textarea__inner) {
+              border-radius: 6px;
+              border: 2px solid var(--el-border-color-light);
+              background: var(--el-bg-color);
+              font-size: 14px;
+              padding: 12px 16px;
+              transition: all 0.2s ease;
+              
+              &:focus {
+                border-color: var(--el-color-primary);
+                box-shadow: 0 0 0 3px var(--el-color-primary-light-9);
+              }
+              
+              &:hover {
+                border-color: var(--el-color-primary-light-7);
+              }
+            }
+          }
+
+          .variable-switch {
+            display: flex;
+            align-items: center;
+          }
+
+          .file-upload-section {
+            .variable-file-upload {
+              width: 100%;
+              
+              :deep(.el-upload) {
+                width: 100%;
+              }
+            }
+
+            .selected-file {
+              margin-top: 8px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 8px 12px;
+              background: var(--el-fill-color-extra-light);
+              border-radius: 6px;
+              
+              .file-name {
+                font-size: 13px;
+                color: var(--el-text-color-regular);
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+
+          .string-array-section {
+            .array-input {
+              width: 100%;
+              margin-bottom: 12px;
+            }
+
+            .string-tags {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 6px;
+            }
+          }
+        }
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: var(--el-text-color-secondary);
+
+        .empty-text {
+          font-size: 16px;
+          color: var(--el-text-color-regular);
+          font-weight: 500;
+        }
+      }
+    }
+
+    .start-conversation-btn {
+      text-align: center;
+      padding-top: 8px;
+      border-top: 1px solid var(--el-border-color-lighter);
+      
+      .start-btn {
+        width: 100%;
+        height: 48px;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        background: linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
+        border: none;
+        box-shadow: 0 2px 8px var(--el-color-primary-light-8);
+        transition: all 0.2s ease;
+        
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px var(--el-color-primary-light-7);
+        }
+        
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/dialogue/dialogueView.vue b/src/views/dialogue/dialogueView.vue
index 9190353bb3e2a847d18383dcf1e3de0e03585601..b180c088a2852ae1c0f70e6d3388be4e197dfdc4 100644
--- a/src/views/dialogue/dialogueView.vue
+++ b/src/views/dialogue/dialogueView.vue
@@ -25,7 +25,6 @@ import WitChainDIcon from '@/assets/svgs/witChainD.svg';
 import WitChainDIconSelected from '@/assets/svgs/witChainDSelected.svg';
 import Setting from '@/assets/svgs/setting.svg';
 import SettingSelected from '@/assets/svgs/setting_active.svg';
-import tools from '../tools/index.vue';
 import TitleBar from './components/TitleBar.vue';
 
 const { userinfo } = storeToRefs(useAccountStore());
@@ -307,10 +306,7 @@ watch(
         </router-link>
       </div>
       <div class="dialogue-content">
-        <KeepAlive v-show="router.currentRoute.value.name === 'witchainD'">
-          <tools />
-        </KeepAlive>
-        <RouterView v-show="router.currentRoute.value.name !== 'witchainD'" />
+        <RouterView />
       </div>
     </div>
     <el-dialog
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index b4bd64f7385422d586843bfb87b53f10ad32fd76..ce2035b01a014bcc2737f51f49cd01c7684ef7ea 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -1,6 +1,5 @@
 .workFlowContainer {
   display: flex;
-  gap: 24px;
   width: 100%;
   @keyframes slideInFromLeft {
     from {
diff --git a/src/views/styles/workFlowDebug.scss b/src/views/styles/workFlowDebug.scss
index a5ef9b25cf2a60d95a824c32d69dfa4adc560658..e3c4e975b223b86bb70a096507d7382393284c40 100644
--- a/src/views/styles/workFlowDebug.scss
+++ b/src/views/styles/workFlowDebug.scss
@@ -11,35 +11,100 @@
   border-right: 1px solid white;
   display: flex;
   flex-direction: column;
-  padding: 16px 0 16px 24px;
+  padding: 16px 24px 16px 24px;
   z-index: 99999;
+  transition: all 0.3s ease-in-out;
+  
+  // 最小化状态样式
+  &.minimized {
+    width: 200px;
+    min-width: 200px;
+    height: 48px;
+    right: 16px;
+    top: 16px;
+    border-radius: 24px;
+    padding: 8px 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--o-border-color);
+    
+    .workFlowDebugClose {
+      margin-right: 0;
+      
+      .title {
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 120px;
+      }
+    }
+  }
+  
   .workFlowDebugClose {
     display: flex;
     line-height: 24px;
     margin-right: 24px;
     align-items: center;
     justify-content: space-between;
+    
     .title {
-      font-size: 16px;
-      height: 24px;
+      flex: 1;
+      font-size: 14px;
+      height: 32px;
+      line-height: 32px;
       color: var(--o-text-color-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    .closeBtn {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
+    
+    .controlButtons {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      
+      .minimizeBtn, .restoreBtn, .closeBtn {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--o-text-color-secondary);
+        transition: color 0.2s ease;
+        
+        &:hover {
+          color: var(--o-text-color-primary);
+        }
+        
+        svg {
+          width: 12px;
+          height: 12px;
+        }
+      }
+      
+      .closeBtn {
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
     }
   }
+  
   .debugContent {
     display: flex;
     flex: 1;
     flex-direction: column;
     height: calc(100% - 32px);
     gap: 16px;
+    
     .debugCheckArea {
       flex: 1;
       overflow-y: auto;
     }
+    
     .inputDebugQuestion {
       height: 48px;
       width: calc(100% - 80px);
@@ -51,10 +116,12 @@
       border-radius: 8px;
       gap: 8px;
       box-shadow: rgba(25, 25, 25, 0.05);
+      
       .textareaInput {
         flex: 1;
         display: flex;
         height: 48px;
+        
         textarea {
           font-size: 14px;
           width: 100%;
@@ -66,12 +133,15 @@
           color: var(--o-text-color-primary);
         }
       }
+      
       .sendIcon {
         width: 48px;
         height: 32px;
+        
         .ableSend {
           cursor: pointer;
         }
+        
         img {
           width: 32px;
         }
@@ -79,6 +149,7 @@
     }
   }
 }
+
 .workFlowDebug {
   background-image: var(--o-bg-image);
 }