diff --git a/src/components/VariableRichTextEditor.vue b/src/components/VariableRichTextEditor.vue
index 10b6ba5c2d22c24c191263b245dfbbe707aee817..c53ca8490e53ba2f8990fec850782aa66a147be7 100644
--- a/src/components/VariableRichTextEditor.vue
+++ b/src/components/VariableRichTextEditor.vue
@@ -7,44 +7,53 @@
         <span class="toolbar-title">回复</span>
         <div class="toolbar-actions">
           <el-tooltip content="输入 / 或 &#123;&#123; 插入变量" placement="top">
-            <div class="variable-button-container" ref="variableButtonRef" @click.stop>
-                <el-button 
-                size="small" 
-                type="text" 
+            <div
+              class="variable-button-container"
+              ref="variableButtonRef"
+              @click.stop
+            >
+              <el-button
+                size="small"
+                type="text"
                 @click.stop="toggleVariableDropdown"
                 @mousedown.stop
                 @mouseup.stop
-                :class="{ 'active': showVariableDropdown }"
+                :class="{ active: showVariableDropdown }"
                 class="toolbar-btn"
-                >
+              >
                 {x}
-                </el-button>
-                
-                <!-- 变量插入下拉框 -->
-                <teleport to="body">
-                <div 
-                    v-if="showVariableDropdown" 
-                    class="variable-dropdown-wrapper"
-                    :style="dropdownPosition"
-                    @click.stop
-                    @mousedown.stop.prevent
-                    @mouseup.stop
+              </el-button>
+
+              <!-- 变量插入下拉框 -->
+              <teleport to="body">
+                <div
+                  v-if="showVariableDropdown"
+                  class="variable-dropdown-wrapper"
+                  :style="dropdownPosition"
+                  @click.stop
+                  @mousedown.stop.prevent
+                  @mouseup.stop
                 >
-                    <VariableInsertDropdown
-                    :supported-scopes="['conversation', 'system', 'env', 'user']"
+                  <VariableInsertDropdown
+                    :supported-scopes="[
+                      'conversation',
+                      'system',
+                      'env',
+                      'user',
+                    ]"
                     :flow-id="flowId"
                     :current-step-id="currentStepId"
                     @variable-selected="handleVariableSelection"
                     @variables-loaded="handleVariablesLoaded"
-                    />
+                  />
                 </div>
-                </teleport>
+              </teleport>
             </div>
           </el-tooltip>
           <el-tooltip content="复制内容" placement="top">
-            <el-button 
-              size="small" 
-              type="text" 
+            <el-button
+              size="small"
+              type="text"
               @click="copyContent"
               class="toolbar-btn"
             >
@@ -53,10 +62,10 @@
           </el-tooltip>
         </div>
       </div>
-      
+
       <!-- Tag模式编辑器 -->
       <div v-if="displayMode === 'tag'" class="tag-editor">
-        <div 
+        <div
           ref="tagEditorRef"
           class="editor-content"
           contenteditable="true"
@@ -72,7 +81,7 @@
           @compositionend="handleCompositionEnd"
         ></div>
       </div>
-      
+
       <!-- Text模式编辑器 -->
       <div v-else class="text-editor">
         <el-input
@@ -87,356 +96,383 @@
         />
       </div>
     </div>
-
-    
   </div>
 </template>
 
 <script setup lang="ts">
-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 '@/components/useVariables'
+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 '@/components/useVariables';
 
 interface Props {
-  modelValue: string
-  flowId?: string
-  currentStepId?: string
-  placeholder?: string
+  modelValue: string;
+  flowId?: string;
+  currentStepId?: string;
+  placeholder?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
-  placeholder: '请输入内容...'
-})
+  placeholder: '请输入内容...',
+});
 
-const emit = defineEmits(['update:modelValue', 'variable-inserted', 'toggle-variable-selector', 'toggle-display-mode', 'copy-content'])
+const emit = defineEmits([
+  'update:modelValue',
+  'variable-inserted',
+  'toggle-variable-selector',
+  'toggle-display-mode',
+  'copy-content',
+]);
 
 // 可用变量列表（从 VariableInsertDropdown 组件传递过来）
-const availableVariables = ref<Variable[]>([])
+const availableVariables = ref<Variable[]>([]);
 
 // 响应式数据
-const tagEditorRef = ref<HTMLElement>()
-const textEditorRef = ref()
-const variableButtonRef = ref<HTMLElement>()
-const textContent = ref('')
-const showVariableDropdown = ref(false)
-const isComposing = ref(false)
-const displayMode = ref<'tag' | 'text'>('tag')
-const isUpdatingTagEditor = ref(false)
-const isEnterKeyPressed = ref(false)
+const tagEditorRef = ref<HTMLElement>();
+const textEditorRef = ref();
+const variableButtonRef = ref<HTMLElement>();
+const textContent = ref('');
+const showVariableDropdown = ref(false);
+const isComposing = ref(false);
+const displayMode = ref<'tag' | 'text'>('tag');
+const isUpdatingTagEditor = ref(false);
+const isEnterKeyPressed = ref(false);
 
 // 工具函数
 const getVariableDisplayName = (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}`
+      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 && variable.step) {
-    return `${variable.step}.${variable.name}`
+    return `${variable.step}.${variable.name}`;
   }
-  
-  return `${variable.scope}.${variable.name}`
-}
+
+  return `${variable.scope}.${variable.name}`;
+};
 
 // 生成插入用的变量名格式
 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}`
+      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 `conversation.${variable.step_id}.${variable.name}`;
   }
-  
-  return `${variable.scope}.${variable.name}`
-}
+
+  return `${variable.scope}.${variable.name}`;
+};
 
 // 根据插入格式的变量名获取显示文本
 const getDisplayTextFromInsertName = (insertName: string): string => {
   if (!availableVariables.value || availableVariables.value.length === 0) {
-    return insertName
+    return insertName;
   }
-  
+
   // 查找匹配的变量对象
-  const matchedVariable = availableVariables.value.find(variable => {
-    const expectedInsertName = getVariableInsertName(variable)
-    return expectedInsertName === insertName
-  })
-  
+  const matchedVariable = availableVariables.value.find((variable) => {
+    const expectedInsertName = getVariableInsertName(variable);
+    return expectedInsertName === insertName;
+  });
+
   if (matchedVariable) {
-    return getVariableDisplayName(matchedVariable)
+    return getVariableDisplayName(matchedVariable);
   }
-  
+
   // 如果找不到匹配的变量，尝试解析conversation.step_id.variable_name格式
   if (insertName.includes('.')) {
-    const parts = insertName.split('.')
-    
+    const parts = insertName.split('.');
+
     // 处理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
-      )
-      
+      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}`
+        return `${conversationVariable.step}.${conversationVariable.name}`;
       }
     }
   }
-  
+
   // fallback：返回原始名称
-  return insertName
-}
+  return insertName;
+};
 
 // 检查变量是否在可用变量列表中
 const isVariableValid = (variableName: string): boolean => {
   if (!availableVariables.value || availableVariables.value.length === 0) {
-    return true
+    return true;
   }
-  
-  return availableVariables.value.some(variable => {
+
+  return availableVariables.value.some((variable) => {
     // 检查插入格式是否匹配
-    const expectedInsertName = getVariableInsertName(variable)
+    const expectedInsertName = getVariableInsertName(variable);
     if (expectedInsertName === variableName) {
-      return true
+      return true;
     }
-    
+
     // 检查显示格式是否匹配（为了兼容性）
-    const expectedDisplayName = getVariableDisplayName(variable)
+    const expectedDisplayName = getVariableDisplayName(variable);
     if (expectedDisplayName === variableName) {
-      return true
+      return true;
     }
-    
+
     // 特殊处理conversation.step_id.variable_name格式
     if (variableName.includes('.')) {
-      const parts = variableName.split('.')
-      
+      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
+        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
+        const [scope, varName] = parts;
         if (variable.scope === scope && variable.name === varName) {
-          return true
+          return true;
         }
       }
     } else {
       // 没有scope的情况，仅通过变量名匹配
       if (variable.name === variableName) {
-        return true
+        return true;
       }
     }
-    
-    return false
-  })
-}
+
+    return false;
+  });
+};
 
 // 更新tag编辑器内容
 const updateTagEditor = (content: string) => {
-  if (!tagEditorRef.value) return
-  
+  if (!tagEditorRef.value) return;
+
   if (isUpdatingTagEditor.value) {
-    return
+    return;
   }
-  
+
   try {
-    isUpdatingTagEditor.value = true
-    
+    isUpdatingTagEditor.value = true;
+
     // 将 {{variable}} 格式转换为带样式的span标签
-    const htmlContent = content.replace(/\{\{([^}]+)\}\}/g, (match, variableName) => {
-      const escapedVariableName = variableName.replace(/"/g, '&quot;').replace(/'/g, '&#39;')
-      
-      const isValid = isVariableValid(variableName)
-      
-      const tagClass = isValid ? 'variable-tag' : 'variable-tag variable-tag-invalid'
-      const backgroundStyle = isValid 
-        ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
-        : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;'
-      
-      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;">${getDisplayTextFromInsertName(variableName)}</span>`
-    })
-    
-    tagEditorRef.value.innerHTML = htmlContent
-    
+    const htmlContent = content.replace(
+      /\{\{([^}]+)\}\}/g,
+      (match, variableName) => {
+        const escapedVariableName = variableName
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+
+        const isValid = isVariableValid(variableName);
+
+        const tagClass = isValid
+          ? 'variable-tag'
+          : 'variable-tag variable-tag-invalid';
+        const backgroundStyle = isValid
+          ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
+          : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;';
+
+        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;">${getDisplayTextFromInsertName(variableName)}</span>`;
+      },
+    );
+
+    tagEditorRef.value.innerHTML = htmlContent;
+
     setTimeout(() => {
-      isUpdatingTagEditor.value = false
-    }, 50)
-    
+      isUpdatingTagEditor.value = false;
+    }, 50);
   } catch (error) {
-    isUpdatingTagEditor.value = false
+    isUpdatingTagEditor.value = false;
   }
-}
+};
 
 const closeVariableDropdown = () => {
   if (isInsertingTriggerChar.value) {
-    return
+    return;
   }
-  
+
   if (showVariableDropdown.value) {
-    showVariableDropdown.value = false
-    
+    showVariableDropdown.value = false;
+
     setTimeout(() => {
       if (availableVariables.value.length > 0 && displayMode.value === 'tag') {
-        const cursorPos = saveCursorPosition()
-        const currentContent = props.modelValue
-        updateTagEditor(currentContent)
-        
+        const cursorPos = saveCursorPosition();
+        const currentContent = props.modelValue;
+        updateTagEditor(currentContent);
+
         if (cursorPos !== null) {
           nextTick(() => {
-            restoreCursorPosition(cursorPos)
-          })
+            restoreCursorPosition(cursorPos);
+          });
         }
       }
-    }, 50)
+    }, 50);
   }
-}
+};
 
 // 处理变量列表加载完成
 const handleVariablesLoaded = (variables: Variable[]) => {
-  availableVariables.value = variables
-  
+  availableVariables.value = variables;
+
   if (isUpdatingTagEditor.value) {
-    return
+    return;
   }
-  
+
   if (showVariableDropdown.value) {
-    return
+    return;
   }
-  
+
   if (displayMode.value === 'tag') {
-    const currentContent = props.modelValue
-    updateTagEditor(currentContent)
+    const currentContent = props.modelValue;
+    updateTagEditor(currentContent);
   }
-}
+};
 
 const handleVariableSelection = (variable: Variable) => {
-  isSelectingVariable.value = true
-  
-  const variableName = getVariableInsertName(variable)
-  
+  isSelectingVariable.value = true;
+
+  const variableName = getVariableInsertName(variable);
+
   try {
     if (displayMode.value === 'tag') {
       if (tagEditorRef.value) {
-        tagEditorRef.value.focus()
+        tagEditorRef.value.focus();
       }
-      
-      let insertSuccess = false
-      
+
+      let insertSuccess = false;
+
       if (triggerCursorPosition) {
-        insertSuccess = insertVariableAtTriggerPosition(variableName)
+        insertSuccess = insertVariableAtTriggerPosition(variableName);
       }
-      
+
       if (!insertSuccess && blurCursorPosition !== null) {
-        insertSuccess = insertVariableAtSavedPosition(variableName, blurCursorPosition)
+        insertSuccess = insertVariableAtSavedPosition(
+          variableName,
+          blurCursorPosition,
+        );
       }
-      
+
       if (!insertSuccess) {
-        const currentContent = props.modelValue || ''
-        const newContent = currentContent + (currentContent ? ' ' : '') + `{{${variableName}}}`
-        emit('update:modelValue', newContent)
-        emit('variable-inserted', variableName)
-        
+        const currentContent = props.modelValue || '';
+        const newContent =
+          currentContent + (currentContent ? ' ' : '') + `{{${variableName}}}`;
+        emit('update:modelValue', newContent);
+        emit('variable-inserted', variableName);
+
         setTimeout(() => {
           if (tagEditorRef.value) {
-            tagEditorRef.value.focus()
-            const range = document.createRange()
-            range.selectNodeContents(tagEditorRef.value)
-            range.collapse(false)
-            const selection = window.getSelection()
+            tagEditorRef.value.focus();
+            const range = document.createRange();
+            range.selectNodeContents(tagEditorRef.value);
+            range.collapse(false);
+            const selection = window.getSelection();
             if (selection) {
-              selection.removeAllRanges()
-              selection.addRange(range)
+              selection.removeAllRanges();
+              selection.addRange(range);
             }
           }
-        }, 50)
+        }, 50);
       }
     } 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
-      emit('update:modelValue', textContent.value)
-      emit('variable-inserted', variableName)
+      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;
+      emit('update:modelValue', textContent.value);
+      emit('variable-inserted', variableName);
     }
   } catch (error) {
-    ElMessage.error('变量插入失败，请重试')
+    ElMessage.error('变量插入失败，请重试');
   }
-  
-  showVariableDropdown.value = false
-  triggerCursorPosition = null
-  blurCursorPosition = null
-  isSelectingVariable.value = false
-}
+
+  showVariableDropdown.value = false;
+  triggerCursorPosition = null;
+  blurCursorPosition = null;
+  isSelectingVariable.value = false;
+};
 
 // 在触发位置插入变量
 const insertVariableAtTriggerPosition = (variableName: string) => {
   if (!triggerCursorPosition || !tagEditorRef.value) {
-    return false
+    return false;
   }
-  
+
   try {
     if (!triggerCursorPosition.node.parentNode) {
-      return insertVariableByContentSearch(variableName)
+      return insertVariableByContentSearch(variableName);
     }
-    
-    const nodeText = triggerCursorPosition.node.textContent || ''
-    const beforeOffset = nodeText.substring(0, triggerCursorPosition.offset)
-    
+
+    const nodeText = triggerCursorPosition.node.textContent || '';
+    const beforeOffset = nodeText.substring(0, triggerCursorPosition.offset);
+
     if (!beforeOffset.endsWith(triggerCursorPosition.triggerChar)) {
-      return insertVariableByContentSearch(variableName)
+      return insertVariableByContentSearch(variableName);
     }
-    
-    const variableSpan = document.createElement('span')
-    const isValid = isVariableValid(variableName)
-    variableSpan.className = isValid ? 'variable-tag' : 'variable-tag variable-tag-invalid'
-    variableSpan.contentEditable = 'false'
-    
-    variableSpan.setAttribute('data-variable', variableName)
-    variableSpan.setAttribute('data-original-name', variableName)
-    variableSpan.setAttribute('data-valid', isValid.toString())
-    
+
+    const variableSpan = document.createElement('span');
+    const isValid = isVariableValid(variableName);
+    variableSpan.className = isValid
+      ? 'variable-tag'
+      : 'variable-tag variable-tag-invalid';
+    variableSpan.contentEditable = 'false';
+
+    variableSpan.setAttribute('data-variable', variableName);
+    variableSpan.setAttribute('data-original-name', variableName);
+    variableSpan.setAttribute('data-valid', isValid.toString());
+
     if (!isValid) {
-      variableSpan.setAttribute('title', `变量 ${variableName} 不存在`)
+      variableSpan.setAttribute('title', `变量 ${variableName} 不存在`);
     }
-    
-    variableSpan.textContent = getDisplayTextFromInsertName(variableName)
-    
-    const backgroundStyle = isValid 
+
+    variableSpan.textContent = getDisplayTextFromInsertName(variableName);
+
+    const backgroundStyle = isValid
       ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
-      : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;'
-    
+      : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;';
+
     variableSpan.style.cssText = `
       display: inline-block !important;
       padding: 2px 8px !important;
@@ -449,139 +485,153 @@ const insertVariableAtTriggerPosition = (variableName: string) => {
       cursor: pointer !important;
       user-select: none !important;
       vertical-align: middle !important;
-    `
-    
-    const range = document.createRange()
-    const triggerLength = triggerCursorPosition.triggerChar.length
-    
-    range.setStart(triggerCursorPosition.node, triggerCursorPosition.offset - triggerLength)
-    range.setEnd(triggerCursorPosition.node, triggerCursorPosition.offset)
-    range.deleteContents()
-    range.insertNode(variableSpan)
-    
-    const spaceNode = document.createTextNode(' ')
-    range.setStartAfter(variableSpan)
-    range.insertNode(spaceNode)
-    range.setStartAfter(spaceNode)
-    range.setEndAfter(spaceNode)
-    
-    const selection = window.getSelection()
+    `;
+
+    const range = document.createRange();
+    const triggerLength = triggerCursorPosition.triggerChar.length;
+
+    range.setStart(
+      triggerCursorPosition.node,
+      triggerCursorPosition.offset - triggerLength,
+    );
+    range.setEnd(triggerCursorPosition.node, triggerCursorPosition.offset);
+    range.deleteContents();
+    range.insertNode(variableSpan);
+
+    const spaceNode = document.createTextNode(' ');
+    range.setStartAfter(variableSpan);
+    range.insertNode(spaceNode);
+    range.setStartAfter(spaceNode);
+    range.setEndAfter(spaceNode);
+
+    const selection = window.getSelection();
     if (selection) {
-      selection.removeAllRanges()
-      selection.addRange(range)
+      selection.removeAllRanges();
+      selection.addRange(range);
     }
-    
+
     setTimeout(() => {
-      const currentCursorPos = saveCursorPosition()
-      
-      const content = getTagEditorContent()
-      emit('update:modelValue', content)
-      emit('variable-inserted', variableName)
-      
+      const currentCursorPos = saveCursorPosition();
+
+      const content = getTagEditorContent();
+      emit('update:modelValue', content);
+      emit('variable-inserted', variableName);
+
       if (currentCursorPos !== null) {
         setTimeout(() => {
-          restoreCursorPosition(currentCursorPos)
-        }, 20)
+          restoreCursorPosition(currentCursorPos);
+        }, 20);
       }
-    }, 10)
-    
-    return true
+    }, 10);
+
+    return true;
   } catch (error) {
-    return false
+    return false;
   }
-}
+};
 
 // 基于内容搜索插入变量（当DOM节点失效时的备用方案）
 const insertVariableByContentSearch = (variableName: string) => {
   if (!tagEditorRef.value || !triggerCursorPosition) {
-    return false
+    return false;
   }
-  
+
   try {
-    const structuredContent = getTagEditorContent()
-    const plainText = tagEditorRef.value.textContent || ''
-    
-    const triggerChar = triggerCursorPosition.triggerChar
-    const lastTriggerIndex = plainText.lastIndexOf(triggerChar)
-    
+    const structuredContent = getTagEditorContent();
+    const plainText = tagEditorRef.value.textContent || '';
+
+    const triggerChar = triggerCursorPosition.triggerChar;
+    const lastTriggerIndex = plainText.lastIndexOf(triggerChar);
+
     if (lastTriggerIndex === -1) {
-      return false
+      return false;
     }
-    
-    const structuredTriggerIndex = structuredContent.lastIndexOf(triggerChar)
+
+    const structuredTriggerIndex = structuredContent.lastIndexOf(triggerChar);
     if (structuredTriggerIndex === -1) {
-      const newContent = structuredContent + `{{${variableName}}}`
-      emit('update:modelValue', newContent)
-      emit('variable-inserted', variableName)
-      return true
+      const newContent = structuredContent + `{{${variableName}}}`;
+      emit('update:modelValue', newContent);
+      emit('variable-inserted', variableName);
+      return true;
     }
-    
-    const beforeTrigger = structuredContent.substring(0, structuredTriggerIndex)
-    const afterTrigger = structuredContent.substring(structuredTriggerIndex + triggerChar.length)
-    const newContent = beforeTrigger + `{{${variableName}}}` + afterTrigger
-    
-    emit('update:modelValue', newContent)
-    emit('variable-inserted', variableName)
-    
+
+    const beforeTrigger = structuredContent.substring(
+      0,
+      structuredTriggerIndex,
+    );
+    const afterTrigger = structuredContent.substring(
+      structuredTriggerIndex + triggerChar.length,
+    );
+    const newContent = beforeTrigger + `{{${variableName}}}` + afterTrigger;
+
+    emit('update:modelValue', newContent);
+    emit('variable-inserted', variableName);
+
     setTimeout(() => {
       if (tagEditorRef.value) {
-        const variableTags = tagEditorRef.value.querySelectorAll('.variable-tag')
-        const lastTag = variableTags[variableTags.length - 1]
+        const variableTags =
+          tagEditorRef.value.querySelectorAll('.variable-tag');
+        const lastTag = variableTags[variableTags.length - 1];
         if (lastTag) {
-          const range = document.createRange()
-          range.setStartAfter(lastTag)
-          range.setEndAfter(lastTag)
-          const selection = window.getSelection()
+          const range = document.createRange();
+          range.setStartAfter(lastTag);
+          range.setEndAfter(lastTag);
+          const selection = window.getSelection();
           if (selection) {
-            selection.removeAllRanges()
-            selection.addRange(range)
-            tagEditorRef.value.focus()
+            selection.removeAllRanges();
+            selection.addRange(range);
+            tagEditorRef.value.focus();
           }
         }
       }
-    }, 50)
-    
-    return true
+    }, 50);
+
+    return true;
   } catch (error) {
-    return false
+    return false;
   }
-}
+};
 
 // 在保存的位置插入变量
-const insertVariableAtSavedPosition = (variableName: string, savedPosition: number) => {
+const insertVariableAtSavedPosition = (
+  variableName: string,
+  savedPosition: number,
+) => {
   if (!tagEditorRef.value) {
-    return false
+    return false;
   }
-  
+
   try {
-    restoreCursorPosition(savedPosition)
-    
-    const selection = window.getSelection()
+    restoreCursorPosition(savedPosition);
+
+    const selection = window.getSelection();
     if (!selection || selection.rangeCount === 0) {
-      return false
+      return false;
     }
-    
-    const range = selection.getRangeAt(0)
-    
-    const variableSpan = document.createElement('span')
-    const isValid = isVariableValid(variableName)
-    variableSpan.className = isValid ? 'variable-tag' : 'variable-tag variable-tag-invalid'
-    variableSpan.contentEditable = 'false'
-    
-    variableSpan.setAttribute('data-variable', variableName)
-    variableSpan.setAttribute('data-original-name', variableName)
-    variableSpan.setAttribute('data-valid', isValid.toString())
-    
+
+    const range = selection.getRangeAt(0);
+
+    const variableSpan = document.createElement('span');
+    const isValid = isVariableValid(variableName);
+    variableSpan.className = isValid
+      ? 'variable-tag'
+      : 'variable-tag variable-tag-invalid';
+    variableSpan.contentEditable = 'false';
+
+    variableSpan.setAttribute('data-variable', variableName);
+    variableSpan.setAttribute('data-original-name', variableName);
+    variableSpan.setAttribute('data-valid', isValid.toString());
+
     if (!isValid) {
-      variableSpan.setAttribute('title', `变量 ${variableName} 不存在`)
+      variableSpan.setAttribute('title', `变量 ${variableName} 不存在`);
     }
-    
-    variableSpan.textContent = getDisplayTextFromInsertName(variableName)
-    
-    const backgroundStyle = isValid 
+
+    variableSpan.textContent = getDisplayTextFromInsertName(variableName);
+
+    const backgroundStyle = isValid
       ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
-      : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;'
-    
+      : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;';
+
     variableSpan.style.cssText = `
       display: inline-block !important;
       padding: 2px 8px !important;
@@ -594,500 +644,530 @@ const insertVariableAtSavedPosition = (variableName: string, savedPosition: numb
       cursor: pointer !important;
       user-select: none !important;
       vertical-align: middle !important;
-    `
-    
-    range.insertNode(variableSpan)
-    
-    const spaceNode = document.createTextNode(' ')
-    range.setStartAfter(variableSpan)
-    range.insertNode(spaceNode)
-    range.setStartAfter(spaceNode)
-    range.setEndAfter(spaceNode)
-    
-    selection.removeAllRanges()
-    selection.addRange(range)
-    
+    `;
+
+    range.insertNode(variableSpan);
+
+    const spaceNode = document.createTextNode(' ');
+    range.setStartAfter(variableSpan);
+    range.insertNode(spaceNode);
+    range.setStartAfter(spaceNode);
+    range.setEndAfter(spaceNode);
+
+    selection.removeAllRanges();
+    selection.addRange(range);
+
     setTimeout(() => {
-      const currentCursorPos = saveCursorPosition()
-      
-      const content = getTagEditorContent()
-      emit('update:modelValue', content)
-      emit('variable-inserted', variableName)
-      
+      const currentCursorPos = saveCursorPosition();
+
+      const content = getTagEditorContent();
+      emit('update:modelValue', content);
+      emit('variable-inserted', variableName);
+
       if (currentCursorPos !== null) {
         setTimeout(() => {
-          restoreCursorPosition(currentCursorPos)
-        }, 20)
+          restoreCursorPosition(currentCursorPos);
+        }, 20);
       }
-    }, 10)
-    
-    return true
+    }, 10);
+
+    return true;
   } catch (error) {
-    return false
+    return false;
   }
-}
+};
 
 // 点击外部关闭下拉框
 const handleDocumentClick = (event: MouseEvent) => {
   if (!showVariableDropdown.value) {
-    return
+    return;
   }
-  
+
   if (isInsertingTriggerChar.value) {
-    return
-  }
-  
-  const target = event.target as HTMLElement
-  const buttonContainer = variableButtonRef.value
-  
-  const dropdown = document.querySelector('.variable-dropdown-wrapper')
-  
-  const isClickInButton = buttonContainer && buttonContainer.contains(target)
-  const isClickInDropdown = dropdown && dropdown.contains(target)
-  
+    return;
+  }
+
+  const target = event.target as HTMLElement;
+  const buttonContainer = variableButtonRef.value;
+
+  const dropdown = document.querySelector('.variable-dropdown-wrapper');
+
+  const isClickInButton = buttonContainer && buttonContainer.contains(target);
+  const isClickInDropdown = dropdown && dropdown.contains(target);
+
   if (!isClickInButton && !isClickInDropdown) {
     setTimeout(() => {
       if (showVariableDropdown.value && !isSelectingVariable.value) {
-        closeVariableDropdown()
-        triggerCursorPosition = null
-        blurCursorPosition = null
-        isSelectingVariable.value = false
+        closeVariableDropdown();
+        triggerCursorPosition = null;
+        blurCursorPosition = null;
+        isSelectingVariable.value = false;
       }
-    }, 10)
+    }, 10);
   }
-}
+};
 
 // 监听器
-watch(() => props.modelValue, (newVal) => {
-  if (isUpdatingTagEditor.value) {
-    return
-  }
-  
-  if (displayMode.value === 'text') {
-    textContent.value = newVal
-  } else {
-    updateTagEditor(newVal)
-  }
-}, { immediate: true })
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (isUpdatingTagEditor.value) {
+      return;
+    }
+
+    if (displayMode.value === 'text') {
+      textContent.value = newVal;
+    } else {
+      updateTagEditor(newVal);
+    }
+  },
+  { immediate: true },
+);
 
 watch(showVariableDropdown, (newValue) => {
   if (newValue) {
     nextTick(() => {
-      updateDropdownPosition()
-    })
+      updateDropdownPosition();
+    });
   }
-})
+});
 
 watch(displayMode, (newMode) => {
   if (newMode === 'text') {
-    const currentContent = getTagEditorContent()
-    textContent.value = currentContent
-    emit('update:modelValue', currentContent)
+    const currentContent = getTagEditorContent();
+    textContent.value = currentContent;
+    emit('update:modelValue', currentContent);
   } else {
     nextTick(() => {
-      updateTagEditor(textContent.value)
-      emit('update:modelValue', textContent.value)
-    })
+      updateTagEditor(textContent.value);
+      emit('update:modelValue', textContent.value);
+    });
   }
-})
+});
 
-watch(availableVariables, () => {
-  if (isUpdatingTagEditor.value) {
-    return
-  }
-  
-  if (showVariableDropdown.value) {
-    const unwatch = watch(showVariableDropdown, (newValue) => {
-      if (!newValue && displayMode.value === 'tag') {
-        setTimeout(() => {
-          const cursorPos = saveCursorPosition()
-          const currentContent = props.modelValue
-          updateTagEditor(currentContent)
-          
-          if (cursorPos !== null) {
-            nextTick(() => {
-              restoreCursorPosition(cursorPos)
-            })
-          }
-        }, 100)
-        
-        unwatch()
-      }
-    })
-    return
-  }
-  
-  if (displayMode.value === 'tag') {
-    const currentContent = props.modelValue
-    updateTagEditor(currentContent)
-  }
-}, { deep: true })
+watch(
+  availableVariables,
+  () => {
+    if (isUpdatingTagEditor.value) {
+      return;
+    }
+
+    if (showVariableDropdown.value) {
+      const unwatch = watch(showVariableDropdown, (newValue) => {
+        if (!newValue && displayMode.value === 'tag') {
+          setTimeout(() => {
+            const cursorPos = saveCursorPosition();
+            const currentContent = props.modelValue;
+            updateTagEditor(currentContent);
+
+            if (cursorPos !== null) {
+              nextTick(() => {
+                restoreCursorPosition(cursorPos);
+              });
+            }
+          }, 100);
+
+          unwatch();
+        }
+      });
+      return;
+    }
+
+    if (displayMode.value === 'tag') {
+      const currentContent = props.modelValue;
+      updateTagEditor(currentContent);
+    }
+  },
+  { deep: true },
+);
 
 // 获取tag编辑器的纯文本内容（包含变量引用）
 const getTagEditorContent = (): string => {
-  if (!tagEditorRef.value) return ''
-  
-  let content = ''
-  const nodes = tagEditorRef.value.childNodes
-  
+  if (!tagEditorRef.value) return '';
+
+  let content = '';
+  const nodes = tagEditorRef.value.childNodes;
+
   for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i]
-    
+    const node = nodes[i];
+
     if (node.nodeType === Node.TEXT_NODE) {
-      content += node.textContent || ''
+      content += node.textContent || '';
     } else if (node.nodeType === Node.ELEMENT_NODE) {
-      const element = node as HTMLElement
+      const element = node as HTMLElement;
       if (element.classList.contains('variable-tag')) {
-        const dataVariable = element.getAttribute('data-variable')
-        const originalName = element.getAttribute('data-original-name')
-        const textContent = element.textContent || ''
-        
-        let variableName = ''
+        const dataVariable = element.getAttribute('data-variable');
+        const originalName = element.getAttribute('data-original-name');
+        const textContent = element.textContent || '';
+
+        let variableName = '';
         if (dataVariable) {
-          variableName = dataVariable.replace(/&quot;/g, '"').replace(/&#39;/g, "'")
+          variableName = dataVariable
+            .replace(/&quot;/g, '"')
+            .replace(/&#39;/g, "'");
         } else if (originalName) {
-          variableName = originalName.replace(/&quot;/g, '"').replace(/&#39;/g, "'")
+          variableName = originalName
+            .replace(/&quot;/g, '"')
+            .replace(/&#39;/g, "'");
         } else {
-          variableName = textContent
+          variableName = textContent;
         }
-        
-        content += `{{${variableName}}}`
+
+        content += `{{${variableName}}}`;
       } else {
-        content += element.textContent || ''
+        content += element.textContent || '';
       }
     }
   }
-  
-  return content
-}
+
+  return content;
+};
 
 const handleTagInput = () => {
-  if (isComposing.value) return
-  
-  const triggerInfo = checkAndSaveVariableTrigger()
-  const cursorPos = saveCursorPosition()
-  
-  isUpdatingTagEditor.value = true
-  
-  const conversionResult = autoConvertVariableSyntaxInDOM()
-  const hasVariableConversion = conversionResult.hasConversions
-  
-  const content = getTagEditorContent()
-  emit('update:modelValue', content)
-  
+  if (isComposing.value) return;
+
+  const triggerInfo = checkAndSaveVariableTrigger();
+  const cursorPos = saveCursorPosition();
+
+  isUpdatingTagEditor.value = true;
+
+  const conversionResult = autoConvertVariableSyntaxInDOM();
+  const hasVariableConversion = conversionResult.hasConversions;
+
+  const content = getTagEditorContent();
+  emit('update:modelValue', content);
+
   nextTick(() => {
-    if (hasVariableConversion && conversionResult.newCursorNode && conversionResult.newCursorOffset !== undefined) {
-      const selection = window.getSelection()
+    if (
+      hasVariableConversion &&
+      conversionResult.newCursorNode &&
+      conversionResult.newCursorOffset !== undefined
+    ) {
+      const selection = window.getSelection();
       if (selection) {
-        const range = document.createRange()
-        range.setStart(conversionResult.newCursorNode, conversionResult.newCursorOffset)
-        range.setEnd(conversionResult.newCursorNode, conversionResult.newCursorOffset)
-        selection.removeAllRanges()
-        selection.addRange(range)
+        const range = document.createRange();
+        range.setStart(
+          conversionResult.newCursorNode,
+          conversionResult.newCursorOffset,
+        );
+        range.setEnd(
+          conversionResult.newCursorNode,
+          conversionResult.newCursorOffset,
+        );
+        selection.removeAllRanges();
+        selection.addRange(range);
       }
     } else if (cursorPos !== null && !isEnterKeyPressed.value) {
-      restoreCursorPosition(cursorPos)
+      restoreCursorPosition(cursorPos);
     }
-    
-    applyVariableTrigger(triggerInfo)
-    
+
+    applyVariableTrigger(triggerInfo);
+
     if (hasVariableConversion) {
-      const updatedContent = getTagEditorContent()
-      emit('update:modelValue', updatedContent)
+      const updatedContent = getTagEditorContent();
+      emit('update:modelValue', updatedContent);
     }
-    
-    isUpdatingTagEditor.value = false
-  })
-}
+
+    isUpdatingTagEditor.value = false;
+  });
+};
 
 const handleTextInput = () => {
-  emit('update:modelValue', textContent.value)
-}
+  emit('update:modelValue', textContent.value);
+};
 
 // 查找光标前面的变量标签
 const findVariableTagBeforeCursor = (range: Range): HTMLElement | null => {
-  const startContainer = range.startContainer
-  const startOffset = range.startOffset
-  
+  const startContainer = range.startContainer;
+  const startOffset = range.startOffset;
+
   if (startContainer.nodeType === Node.TEXT_NODE) {
     if (startOffset > 0) {
-      return null
+      return null;
     }
-    
+
     if (startOffset === 0) {
-      const previousSibling = startContainer.previousSibling
+      const previousSibling = startContainer.previousSibling;
       if (previousSibling && previousSibling.nodeType === Node.ELEMENT_NODE) {
-        const element = previousSibling as HTMLElement
+        const element = previousSibling as HTMLElement;
         if (element.classList.contains('variable-tag')) {
-          return element
+          return element;
         }
       }
-      
-      let currentNode = startContainer.previousSibling
-      let searchDepth = 0
-      const maxSearchDepth = 3
-      
+
+      let currentNode = startContainer.previousSibling;
+      let searchDepth = 0;
+      const maxSearchDepth = 3;
+
       while (currentNode && searchDepth < maxSearchDepth) {
-        searchDepth++
-        
+        searchDepth++;
+
         if (currentNode.nodeType === Node.ELEMENT_NODE) {
-          const element = currentNode as HTMLElement
+          const element = currentNode as HTMLElement;
           if (element.classList.contains('variable-tag')) {
-            return element
+            return element;
           }
           if (element.tagName === 'BR') {
-            break
+            break;
           }
         } else if (currentNode.nodeType === Node.TEXT_NODE) {
-          const textContent = currentNode.textContent || ''
+          const textContent = currentNode.textContent || '';
           if (textContent.includes('\n')) {
-            break
+            break;
           }
           if (textContent.length > 10) {
-            break
+            break;
           }
         }
-        
-        currentNode = currentNode.previousSibling
+
+        currentNode = currentNode.previousSibling;
       }
     }
   }
-  
+
   if (startContainer.nodeType === Node.ELEMENT_NODE) {
-    const element = startContainer as HTMLElement
-    const childNodes = element.childNodes
-    
+    const element = startContainer as HTMLElement;
+    const childNodes = element.childNodes;
+
     for (let i = startOffset - 1; i >= 0; i--) {
-      const node = childNodes[i]
+      const node = childNodes[i];
       if (node.nodeType === Node.ELEMENT_NODE) {
-        const childElement = node as HTMLElement
+        const childElement = node as HTMLElement;
         if (childElement.classList.contains('variable-tag')) {
-          return childElement
+          return childElement;
         }
       }
     }
   }
-  
-  return null
-}
+
+  return null;
+};
 
 // 查找光标后面的变量标签
 const findVariableTagAfterCursor = (range: Range): HTMLElement | null => {
-  const startContainer = range.startContainer
-  const startOffset = range.startOffset
-  
+  const startContainer = range.startContainer;
+  const startOffset = range.startOffset;
+
   if (startContainer.nodeType === Node.TEXT_NODE) {
-    const textContent = startContainer.textContent || ''
-    
+    const textContent = startContainer.textContent || '';
+
     if (startOffset < textContent.length) {
-      return null
+      return null;
     }
-    
+
     if (startOffset === textContent.length) {
-      const nextSibling = startContainer.nextSibling
+      const nextSibling = startContainer.nextSibling;
       if (nextSibling && nextSibling.nodeType === Node.ELEMENT_NODE) {
-        const element = nextSibling as HTMLElement
+        const element = nextSibling as HTMLElement;
         if (element.classList.contains('variable-tag')) {
-          return element
+          return element;
         }
         if (element.tagName === 'BR') {
-          return null
+          return null;
         }
       } else if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE) {
-        const textContent = nextSibling.textContent || ''
+        const textContent = nextSibling.textContent || '';
         if (textContent.includes('\n')) {
-          return null
+          return null;
         }
       }
     }
   }
-  
+
   if (startContainer.nodeType === Node.ELEMENT_NODE) {
-    const element = startContainer as HTMLElement
-    const childNodes = element.childNodes
-    
+    const element = startContainer as HTMLElement;
+    const childNodes = element.childNodes;
+
     for (let i = startOffset; i < childNodes.length; i++) {
-      const node = childNodes[i]
+      const node = childNodes[i];
       if (node.nodeType === Node.ELEMENT_NODE) {
-        const childElement = node as HTMLElement
+        const childElement = node as HTMLElement;
         if (childElement.classList.contains('variable-tag')) {
-          return childElement
+          return childElement;
         }
         if (childElement.tagName === 'BR') {
-          break
+          break;
         }
       } else if (node.nodeType === Node.TEXT_NODE) {
-        const textContent = node.textContent || ''
+        const textContent = node.textContent || '';
         if (textContent.includes('\n')) {
-          break
+          break;
         }
       }
     }
   }
-  
-  return null
-}
+
+  return null;
+};
 
 const handleKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Escape') {
-    showVariableDropdown.value = false
-    return
+    showVariableDropdown.value = false;
+    return;
   }
-  
+
   if (event.key === 'Enter') {
-    const selection = window.getSelection()
-    let isBeforeVariableTag = false
-    let nextVariableTag: HTMLElement | null = null
-    
+    const selection = window.getSelection();
+    let isBeforeVariableTag = false;
+    let nextVariableTag: HTMLElement | null = null;
+
     if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0)
-      const startContainer = range.startContainer
-      const startOffset = range.startOffset
-      
+      const range = selection.getRangeAt(0);
+      const startContainer = range.startContainer;
+      const startOffset = range.startOffset;
+
       if (startContainer.nodeType === Node.TEXT_NODE) {
-        const nextSibling = startContainer.nextSibling
+        const nextSibling = startContainer.nextSibling;
         if (nextSibling && nextSibling.nodeType === Node.ELEMENT_NODE) {
-          const element = nextSibling as HTMLElement
+          const element = nextSibling as HTMLElement;
           if (element.classList.contains('variable-tag')) {
-            isBeforeVariableTag = true
-            nextVariableTag = element
+            isBeforeVariableTag = true;
+            nextVariableTag = element;
           }
         }
       } else if (startContainer.nodeType === Node.ELEMENT_NODE) {
-        const childNodes = (startContainer as HTMLElement).childNodes
+        const childNodes = (startContainer as HTMLElement).childNodes;
         if (startOffset < childNodes.length) {
-          const nextNode = childNodes[startOffset]
+          const nextNode = childNodes[startOffset];
           if (nextNode.nodeType === Node.ELEMENT_NODE) {
-            const element = nextNode as HTMLElement
+            const element = nextNode as HTMLElement;
             if (element.classList.contains('variable-tag')) {
-              isBeforeVariableTag = true
-              nextVariableTag = element
+              isBeforeVariableTag = true;
+              nextVariableTag = element;
             }
           }
         }
       }
     }
-    
+
     if (isBeforeVariableTag && nextVariableTag) {
-      event.preventDefault()
-      
-      const range = selection?.getRangeAt(0)
+      event.preventDefault();
+
+      const range = selection?.getRangeAt(0);
       if (range) {
-        const br = document.createElement('br')
-        range.insertNode(br)
-        
-        const emptyTextNode = document.createTextNode('')
-        range.setStartAfter(br)
-        range.insertNode(emptyTextNode)
-        
-        range.setStart(emptyTextNode, 0)
-        range.setEnd(emptyTextNode, 0)
-        selection?.removeAllRanges()
-        selection?.addRange(range)
-        
+        const br = document.createElement('br');
+        range.insertNode(br);
+
+        const emptyTextNode = document.createTextNode('');
+        range.setStartAfter(br);
+        range.insertNode(emptyTextNode);
+
+        range.setStart(emptyTextNode, 0);
+        range.setEnd(emptyTextNode, 0);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+
         setTimeout(() => {
-          cleanupDOMStructure()
-        }, 20)
+          cleanupDOMStructure();
+        }, 20);
       }
-      
-      isEnterKeyPressed.value = true
+
+      isEnterKeyPressed.value = true;
       setTimeout(() => {
-        isEnterKeyPressed.value = false
-      }, 10)
-      return
+        isEnterKeyPressed.value = false;
+      }, 10);
+      return;
     }
-    
-    isEnterKeyPressed.value = true
-    
-    const hasUnprocessedVariables = tagEditorRef.value && 
+
+    isEnterKeyPressed.value = true;
+
+    const hasUnprocessedVariables =
+      tagEditorRef.value &&
       (tagEditorRef.value.textContent || '').includes('{{') &&
-      (tagEditorRef.value.textContent || '').includes('}}')
-    
+      (tagEditorRef.value.textContent || '').includes('}}');
+
     if (hasUnprocessedVariables) {
       setTimeout(() => {
-        const conversionResult = autoConvertVariableSyntaxInDOM()
+        const conversionResult = autoConvertVariableSyntaxInDOM();
         if (conversionResult.hasConversions) {
-          const content = getTagEditorContent()
-          emit('update:modelValue', content)
+          const content = getTagEditorContent();
+          emit('update:modelValue', content);
         }
-        isEnterKeyPressed.value = false
-      }, 10)
+        isEnterKeyPressed.value = false;
+      }, 10);
     } else {
       setTimeout(() => {
-        isEnterKeyPressed.value = false
-      }, 10)
+        isEnterKeyPressed.value = false;
+      }, 10);
     }
-    return
+    return;
   }
-  
+
   if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-    const selection = window.getSelection()
+    const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0)
-      const startContainer = range.startContainer
-      const startOffset = range.startOffset
-      
+      const range = selection.getRangeAt(0);
+      const startContainer = range.startContainer;
+      const startOffset = range.startOffset;
+
       if (event.key === 'ArrowLeft') {
         if (startContainer.nodeType === Node.TEXT_NODE && startOffset === 0) {
-          const prevSibling = startContainer.previousSibling
+          const prevSibling = startContainer.previousSibling;
           if (prevSibling && prevSibling.nodeType === Node.ELEMENT_NODE) {
-            const element = prevSibling as HTMLElement
+            const element = prevSibling as HTMLElement;
             if (element.classList.contains('variable-tag')) {
-              const beforeVariableTag = element.previousSibling
-              if (beforeVariableTag && beforeVariableTag.nodeType === Node.TEXT_NODE) {
-                event.preventDefault()
-                const newRange = document.createRange()
-                const textLength = beforeVariableTag.textContent?.length || 0
-                newRange.setStart(beforeVariableTag, textLength)
-                newRange.setEnd(beforeVariableTag, textLength)
-                selection.removeAllRanges()
-                selection.addRange(newRange)
-                return
+              const beforeVariableTag = element.previousSibling;
+              if (
+                beforeVariableTag &&
+                beforeVariableTag.nodeType === Node.TEXT_NODE
+              ) {
+                event.preventDefault();
+                const newRange = document.createRange();
+                const textLength = beforeVariableTag.textContent?.length || 0;
+                newRange.setStart(beforeVariableTag, textLength);
+                newRange.setEnd(beforeVariableTag, textLength);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+                return;
               } else {
-                const emptyTextNode = document.createTextNode('')
-                element.parentNode?.insertBefore(emptyTextNode, element)
-                
-                event.preventDefault()
-                const newRange = document.createRange()
-                newRange.setStart(emptyTextNode, 0)
-                newRange.setEnd(emptyTextNode, 0)
-                selection.removeAllRanges()
-                selection.addRange(newRange)
-                return
+                const emptyTextNode = document.createTextNode('');
+                element.parentNode?.insertBefore(emptyTextNode, element);
+
+                event.preventDefault();
+                const newRange = document.createRange();
+                newRange.setStart(emptyTextNode, 0);
+                newRange.setEnd(emptyTextNode, 0);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+                return;
               }
             }
           }
         }
-      }
-      
-      else if (event.key === 'ArrowRight') {
+      } else if (event.key === 'ArrowRight') {
         if (startContainer.nodeType === Node.TEXT_NODE) {
-          const textContent = startContainer.textContent || ''
+          const textContent = startContainer.textContent || '';
           if (startOffset === textContent.length) {
-            const nextSibling = startContainer.nextSibling
+            const nextSibling = startContainer.nextSibling;
             if (nextSibling && nextSibling.nodeType === Node.ELEMENT_NODE) {
-              const element = nextSibling as HTMLElement
+              const element = nextSibling as HTMLElement;
               if (element.classList.contains('variable-tag')) {
-                const afterVariableTag = element.nextSibling
-                if (afterVariableTag && afterVariableTag.nodeType === Node.TEXT_NODE) {
-                  event.preventDefault()
-                  const newRange = document.createRange()
-                  newRange.setStart(afterVariableTag, 0)
-                  newRange.setEnd(afterVariableTag, 0)
-                  selection.removeAllRanges()
-                  selection.addRange(newRange)
-                  return
+                const afterVariableTag = element.nextSibling;
+                if (
+                  afterVariableTag &&
+                  afterVariableTag.nodeType === Node.TEXT_NODE
+                ) {
+                  event.preventDefault();
+                  const newRange = document.createRange();
+                  newRange.setStart(afterVariableTag, 0);
+                  newRange.setEnd(afterVariableTag, 0);
+                  selection.removeAllRanges();
+                  selection.addRange(newRange);
+                  return;
                 } else {
-                  const emptyTextNode = document.createTextNode('')
-                  element.parentNode?.insertBefore(emptyTextNode, element.nextSibling)
-                  
-                  event.preventDefault()
-                  const newRange = document.createRange()
-                  newRange.setStart(emptyTextNode, 0)
-                  newRange.setEnd(emptyTextNode, 0)
-                  selection.removeAllRanges()
-                  selection.addRange(newRange)
-                  return
+                  const emptyTextNode = document.createTextNode('');
+                  element.parentNode?.insertBefore(
+                    emptyTextNode,
+                    element.nextSibling,
+                  );
+
+                  event.preventDefault();
+                  const newRange = document.createRange();
+                  newRange.setStart(emptyTextNode, 0);
+                  newRange.setEnd(emptyTextNode, 0);
+                  selection.removeAllRanges();
+                  selection.addRange(newRange);
+                  return;
                 }
               }
             }
@@ -1096,320 +1176,335 @@ const handleKeyDown = (event: KeyboardEvent) => {
       }
     }
   }
-  
+
   if (event.key === 'Backspace' || event.key === 'Delete') {
-    const selection = window.getSelection()
+    const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0)
-      
-      let targetVariableTag: HTMLElement | null = null
-      
-      const startContainer = range.startContainer
-      if (startContainer.nodeType === Node.TEXT_NODE && startContainer.parentNode) {
-        const parentElement = startContainer.parentNode as HTMLElement
+      const range = selection.getRangeAt(0);
+
+      let targetVariableTag: HTMLElement | null = null;
+
+      const startContainer = range.startContainer;
+      if (
+        startContainer.nodeType === Node.TEXT_NODE &&
+        startContainer.parentNode
+      ) {
+        const parentElement = startContainer.parentNode as HTMLElement;
         if (parentElement.classList?.contains('variable-tag')) {
-          targetVariableTag = parentElement
+          targetVariableTag = parentElement;
         }
       }
-      
+
       if (!targetVariableTag) {
         if (event.key === 'Backspace') {
-          targetVariableTag = findVariableTagBeforeCursor(range)
+          targetVariableTag = findVariableTagBeforeCursor(range);
         } else {
-          targetVariableTag = findVariableTagAfterCursor(range)
+          targetVariableTag = findVariableTagAfterCursor(range);
         }
       }
-      
+
       if (targetVariableTag) {
-        event.preventDefault()
-        
-        const newRange = document.createRange()
-        newRange.setStartBefore(targetVariableTag)
-        newRange.setEndBefore(targetVariableTag)
-        
-        targetVariableTag.remove()
-        
+        event.preventDefault();
+
+        const newRange = document.createRange();
+        newRange.setStartBefore(targetVariableTag);
+        newRange.setEndBefore(targetVariableTag);
+
+        targetVariableTag.remove();
+
         if (selection) {
-          selection.removeAllRanges()
-          selection.addRange(newRange)
+          selection.removeAllRanges();
+          selection.addRange(newRange);
         }
-        
-        handleTagInput()
-        return
+
+        handleTagInput();
+        return;
       }
       // 对于普通字符删除，让默认行为发生，不设置任何标志
       // handleTagInput会通过input事件自动被调用，并会检查触发条件
     }
   }
-}
+};
 
 const handleFocus = () => {
   // 聚焦时的处理
-}
+};
 
 // 保存blur时的光标位置
-let blurCursorPosition: any = null
+let blurCursorPosition: any = null;
 
 const handleBlur = () => {
   if (isInsertingTriggerChar.value) {
-    return
+    return;
   }
-  
-  blurCursorPosition = saveCursorPosition()
-  
+
+  blurCursorPosition = saveCursorPosition();
+
   setTimeout(() => {
     if (!isSelectingVariable.value && !isInsertingTriggerChar.value) {
-      closeVariableDropdown()
-      triggerCursorPosition = null
+      closeVariableDropdown();
+      triggerCursorPosition = null;
     }
-  }, 200)
-}
+  }, 200);
+};
 
 // 添加变量选择状态追踪
-const isSelectingVariable = ref(false)
+const isSelectingVariable = ref(false);
 
 const handlePaste = (event: ClipboardEvent) => {
-  event.preventDefault()
-  const text = event.clipboardData?.getData('text/plain') || ''
-  document.execCommand('insertText', false, text)
-  handleTagInput()
-}
+  event.preventDefault();
+  const text = event.clipboardData?.getData('text/plain') || '';
+  document.execCommand('insertText', false, text);
+  handleTagInput();
+};
 
 // 中文输入法事件处理
 const handleCompositionStart = (event: CompositionEvent) => {
-  isComposing.value = true
-}
+  isComposing.value = true;
+};
 
 const handleCompositionUpdate = (event: CompositionEvent) => {
   // 在输入过程中，保持 isComposing 状态
-}
+};
 
 const handleCompositionEnd = (event: CompositionEvent) => {
-  isComposing.value = false
-  
-  const savedPosition = saveCursorPosition()
-  
+  isComposing.value = false;
+
+  const savedPosition = saveCursorPosition();
+
   nextTick(() => {
-    const content = getTagEditorContent()
-    emit('update:modelValue', content)
-    
+    const content = getTagEditorContent();
+    emit('update:modelValue', content);
+
     if (savedPosition !== null) {
       nextTick(() => {
-        restoreCursorPosition(savedPosition)
-      })
+        restoreCursorPosition(savedPosition);
+      });
     }
-    
-    checkForVariableTrigger()
-  })
-}
+
+    checkForVariableTrigger();
+  });
+};
 
 // 保存触发时的光标位置和屏幕坐标
-let triggerCursorPosition: { 
-  node: Node; 
-  offset: number; 
-  triggerChar: string; 
+let triggerCursorPosition: {
+  node: Node;
+  offset: number;
+  triggerChar: string;
   screenX: number;
   screenY: number;
-} | null = null
+} | null = null;
 
 // 检查变量触发
 const checkForVariableTrigger = () => {
-  const selection = window.getSelection()
+  const selection = window.getSelection();
   if (!selection || selection.rangeCount === 0) {
-    return
+    return;
   }
-  
-  const range = selection.getRangeAt(0)
-  const textNode = range.startContainer
-  
+
+  const range = selection.getRangeAt(0);
+  const textNode = range.startContainer;
+
   if (textNode.nodeType === Node.TEXT_NODE) {
-    const text = textNode.textContent || ''
-    const cursorPos = range.startOffset
-    
-    const beforeCursor = text.substring(0, cursorPos)
-    
+    const text = textNode.textContent || '';
+    const cursorPos = range.startOffset;
+
+    const beforeCursor = text.substring(0, cursorPos);
+
     if (beforeCursor.endsWith('/') || beforeCursor.endsWith('{{')) {
-      const rangeRect = range.getBoundingClientRect()
+      const rangeRect = range.getBoundingClientRect();
       triggerCursorPosition = {
         node: textNode,
         offset: cursorPos,
         triggerChar: beforeCursor.endsWith('{{') ? '{{' : '/',
         screenX: rangeRect.left,
-        screenY: rangeRect.top
-      }
-      showVariableDropdown.value = true
+        screenY: rangeRect.top,
+      };
+      showVariableDropdown.value = true;
     } else {
-      triggerCursorPosition = null
-      showVariableDropdown.value = false
+      triggerCursorPosition = null;
+      showVariableDropdown.value = false;
     }
   }
-}
+};
 
 // 清理DOM结构，移除可能导致变量标签显示异常的不规范元素
 const cleanupDOMStructure = () => {
-  if (!tagEditorRef.value) return
-  
-  const childNodes = Array.from(tagEditorRef.value.childNodes)
-  let hasChanges = false
-  
+  if (!tagEditorRef.value) return;
+
+  const childNodes = Array.from(tagEditorRef.value.childNodes);
+  let hasChanges = false;
+
   for (let i = 0; i < childNodes.length; i++) {
-    const node = childNodes[i]
-    
+    const node = childNodes[i];
+
     if (node.nodeName === 'BR') {
-      let consecutiveBrCount = 0
-      let j = i
-      
+      let consecutiveBrCount = 0;
+      let j = i;
+
       while (j < childNodes.length && childNodes[j].nodeName === 'BR') {
-        consecutiveBrCount++
-        j++
+        consecutiveBrCount++;
+        j++;
       }
-      
+
       if (consecutiveBrCount > 1) {
         for (let k = i + 1; k < i + consecutiveBrCount; k++) {
           if (childNodes[k] && childNodes[k].parentNode) {
-            childNodes[k].parentNode?.removeChild(childNodes[k])
-            hasChanges = true
+            childNodes[k].parentNode?.removeChild(childNodes[k]);
+            hasChanges = true;
           }
         }
-        
-        i = j - 1
+
+        i = j - 1;
       }
-    }
-    
-    else if (node.nodeName === 'DIV' && node.nodeType === Node.ELEMENT_NODE) {
-      const divElement = node as HTMLElement
-      
-      if (!divElement.textContent?.trim() || (divElement.innerHTML === '<br>' || divElement.innerHTML === '<br/>')) {
-        const br = document.createElement('br')
-        divElement.parentNode?.replaceChild(br, divElement)
-        hasChanges = true
+    } else if (node.nodeName === 'DIV' && node.nodeType === Node.ELEMENT_NODE) {
+      const divElement = node as HTMLElement;
+
+      if (
+        !divElement.textContent?.trim() ||
+        divElement.innerHTML === '<br>' ||
+        divElement.innerHTML === '<br/>'
+      ) {
+        const br = document.createElement('br');
+        divElement.parentNode?.replaceChild(br, divElement);
+        hasChanges = true;
       }
     }
   }
-  
+
   if (hasChanges) {
     setTimeout(() => {
-      const content = getTagEditorContent()
-      emit('update:modelValue', content)
-    }, 10)
+      const content = getTagEditorContent();
+      emit('update:modelValue', content);
+    }, 10);
   }
-}
+};
 
 // 自动转换DOM中的{{variable}}格式为变量标签
-const autoConvertVariableSyntaxInDOM = (): { hasConversions: boolean, newCursorNode?: Node, newCursorOffset?: number } => {
-  if (!tagEditorRef.value) return { hasConversions: false }
-  
-  let hasConversions = false
-  let newCursorNode: Node | undefined
-  let newCursorOffset: number | undefined
-  
-  const selection = window.getSelection()
-  let currentCursorNode: Node | null = null
-  let currentCursorOffset = 0
-  
+const autoConvertVariableSyntaxInDOM = (): {
+  hasConversions: boolean;
+  newCursorNode?: Node;
+  newCursorOffset?: number;
+} => {
+  if (!tagEditorRef.value) return { hasConversions: false };
+
+  let hasConversions = false;
+  let newCursorNode: Node | undefined;
+  let newCursorOffset: number | undefined;
+
+  const selection = window.getSelection();
+  let currentCursorNode: Node | null = null;
+  let currentCursorOffset = 0;
+
   if (selection && selection.rangeCount > 0) {
-    const range = selection.getRangeAt(0)
-    currentCursorNode = range.startContainer
-    currentCursorOffset = range.startOffset
+    const range = selection.getRangeAt(0);
+    currentCursorNode = range.startContainer;
+    currentCursorOffset = range.startOffset;
   }
-  
+
   const walker = document.createTreeWalker(
     tagEditorRef.value,
     NodeFilter.SHOW_TEXT,
-    null
-  )
-  
-  let targetTextNode: Text | null = null
-  let targetText = ''
-  
-  let node
-  while (node = walker.nextNode()) {
-    const textNode = node as Text
-    const text = textNode.textContent || ''
-    
+    null,
+  );
+
+  let targetTextNode: Text | null = null;
+  let targetText = '';
+
+  let node;
+  while ((node = walker.nextNode())) {
+    const textNode = node as Text;
+    const text = textNode.textContent || '';
+
     if (text.includes('{{') && text.includes('}}')) {
       if (currentCursorNode === textNode) {
-        targetTextNode = textNode
-        targetText = text
-        break
+        targetTextNode = textNode;
+        targetText = text;
+        break;
       }
       if (!targetTextNode) {
-        targetTextNode = textNode
-        targetText = text
+        targetTextNode = textNode;
+        targetText = text;
       }
     }
   }
-  
+
   if (targetTextNode && targetText) {
-    const node = targetTextNode
-    const text = targetText
-    const regex = /\{\{([^}]+)\}\}/g
-    let match
-    const fragments: (string | { type: 'variable', name: string })[] = []
-    let lastIndex = 0
-    
+    const node = targetTextNode;
+    const text = targetText;
+    const regex = /\{\{([^}]+)\}\}/g;
+    let match;
+    const fragments: (string | { type: 'variable'; name: string })[] = [];
+    let lastIndex = 0;
+
     while ((match = regex.exec(text)) !== null) {
       if (match.index > lastIndex) {
-        fragments.push(text.substring(lastIndex, match.index))
+        fragments.push(text.substring(lastIndex, match.index));
       }
-      
-      const variableName = match[1].trim()
+
+      const variableName = match[1].trim();
       if (variableName) {
-        fragments.push({ type: 'variable', name: variableName })
-        hasConversions = true
+        fragments.push({ type: 'variable', name: variableName });
+        hasConversions = true;
       }
-      
-      lastIndex = match.index + match[0].length
+
+      lastIndex = match.index + match[0].length;
     }
-    
+
     if (lastIndex < text.length) {
-      fragments.push(text.substring(lastIndex))
+      fragments.push(text.substring(lastIndex));
     }
-    
+
     if (hasConversions && fragments.length > 1) {
-      const parentNode = node.parentNode
+      const parentNode = node.parentNode;
       if (parentNode) {
-        const isCurrentCursorNode = currentCursorNode === node
-        
-        const fragment = document.createDocumentFragment()
-        let currentTextOffset = 0
-        let lastTextNode: Text | null = null
-        
+        const isCurrentCursorNode = currentCursorNode === node;
+
+        const fragment = document.createDocumentFragment();
+        let currentTextOffset = 0;
+        let lastTextNode: Text | null = null;
+
         fragments.forEach((item, index) => {
           if (typeof item === 'string') {
             if (item) {
-              const textNode = document.createTextNode(item)
-              fragment.appendChild(textNode)
-              lastTextNode = textNode as Text
-              
-              if (isCurrentCursorNode && currentCursorOffset >= currentTextOffset && currentCursorOffset < currentTextOffset + item.length) {
-                newCursorNode = textNode
-                newCursorOffset = currentCursorOffset - currentTextOffset
+              const textNode = document.createTextNode(item);
+              fragment.appendChild(textNode);
+              lastTextNode = textNode as Text;
+
+              if (
+                isCurrentCursorNode &&
+                currentCursorOffset >= currentTextOffset &&
+                currentCursorOffset < currentTextOffset + item.length
+              ) {
+                newCursorNode = textNode;
+                newCursorOffset = currentCursorOffset - currentTextOffset;
               }
-              
-              currentTextOffset += item.length
+
+              currentTextOffset += item.length;
             }
           } else {
-            const variableSpan = document.createElement('span')
-            const isValid = isVariableValid(item.name)
-            
-            variableSpan.className = isValid ? 'variable-tag' : 'variable-tag variable-tag-invalid'
-            variableSpan.contentEditable = 'false'
-            variableSpan.setAttribute('data-variable', item.name)
-            variableSpan.setAttribute('data-original-name', item.name)
-            variableSpan.setAttribute('data-valid', isValid.toString())
-            
+            const variableSpan = document.createElement('span');
+            const isValid = isVariableValid(item.name);
+
+            variableSpan.className = isValid
+              ? 'variable-tag'
+              : 'variable-tag variable-tag-invalid';
+            variableSpan.contentEditable = 'false';
+            variableSpan.setAttribute('data-variable', item.name);
+            variableSpan.setAttribute('data-original-name', item.name);
+            variableSpan.setAttribute('data-valid', isValid.toString());
+
             if (!isValid) {
-              variableSpan.setAttribute('title', `变量 ${item.name} 不存在`)
-              variableSpan.style.pointerEvents = 'auto'
+              variableSpan.setAttribute('title', `变量 ${item.name} 不存在`);
+              variableSpan.style.pointerEvents = 'auto';
             }
-            
-            variableSpan.textContent = getDisplayTextFromInsertName(item.name)
-            
-            const backgroundStyle = isValid 
+
+            variableSpan.textContent = getDisplayTextFromInsertName(item.name);
+
+            const backgroundStyle = isValid
               ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
-              : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;'
-            
+              : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;';
+
             variableSpan.style.cssText = `
               display: inline-block !important;
               padding: 2px 8px !important;
@@ -1423,150 +1518,154 @@ const autoConvertVariableSyntaxInDOM = (): { hasConversions: boolean, newCursorN
               user-select: ${isValid ? 'none' : 'auto'} !important;
               vertical-align: middle !important;
               pointer-events: all !important;
-            `
-            
-            fragment.appendChild(variableSpan)
-            
-            const variableTextLength = `{{${item.name}}}`.length
-            currentTextOffset += variableTextLength
+            `;
+
+            fragment.appendChild(variableSpan);
+
+            const variableTextLength = `{{${item.name}}}`.length;
+            currentTextOffset += variableTextLength;
           }
-        })
-        
+        });
+
         if (isCurrentCursorNode && !newCursorNode) {
           if (currentCursorOffset >= text.length) {
-            const emptyTextNode = document.createTextNode('')
-            fragment.appendChild(emptyTextNode)
-            newCursorNode = emptyTextNode
-            newCursorOffset = 0
+            const emptyTextNode = document.createTextNode('');
+            fragment.appendChild(emptyTextNode);
+            newCursorNode = emptyTextNode;
+            newCursorOffset = 0;
           } else if (lastTextNode) {
-            newCursorNode = lastTextNode
-            newCursorOffset = 0
+            newCursorNode = lastTextNode;
+            newCursorOffset = 0;
           } else {
-            const emptyTextNode = document.createTextNode('')
-            fragment.appendChild(emptyTextNode)
-            newCursorNode = emptyTextNode
-            newCursorOffset = 0
+            const emptyTextNode = document.createTextNode('');
+            fragment.appendChild(emptyTextNode);
+            newCursorNode = emptyTextNode;
+            newCursorOffset = 0;
           }
         }
-        
-        parentNode.replaceChild(fragment, node)
+
+        parentNode.replaceChild(fragment, node);
       }
     }
   }
-  
-  return { hasConversions, newCursorNode, newCursorOffset }
-}
+
+  return { hasConversions, newCursorNode, newCursorOffset };
+};
 
 // 检查变量触发并返回触发信息（不改变状态）
 const checkAndSaveVariableTrigger = () => {
-  const selection = window.getSelection()
+  const selection = window.getSelection();
   if (!selection || selection.rangeCount === 0) {
-    return null
+    return null;
   }
-  
-  const range = selection.getRangeAt(0)
-  const textNode = range.startContainer
-  
+
+  const range = selection.getRangeAt(0);
+  const textNode = range.startContainer;
+
   if (textNode.nodeType === Node.TEXT_NODE) {
-    const text = textNode.textContent || ''
-    const cursorPos = range.startOffset
-    
-    const beforeCursor = text.substring(0, cursorPos)
-    
+    const text = textNode.textContent || '';
+    const cursorPos = range.startOffset;
+
+    const beforeCursor = text.substring(0, cursorPos);
+
     if (beforeCursor.endsWith('/') || beforeCursor.endsWith('{{')) {
-      const rangeRect = range.getBoundingClientRect()
+      const rangeRect = range.getBoundingClientRect();
       const triggerInfo = {
         node: textNode,
         offset: cursorPos,
         triggerChar: beforeCursor.endsWith('{{') ? '{{' : '/',
         screenX: rangeRect.left,
         screenY: rangeRect.top,
-        shouldShow: true
-      }
-      return triggerInfo
+        shouldShow: true,
+      };
+      return triggerInfo;
     }
   }
-  
-  return { shouldShow: false }
-}
+
+  return { shouldShow: false };
+};
 
 // 应用触发信息
 const applyVariableTrigger = (triggerInfo: any) => {
   if (!triggerInfo) {
-    return
+    return;
   }
-  
+
   if (triggerInfo.shouldShow) {
-    const selection = window.getSelection()
+    const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0)
-      const currentNode = range.startContainer
-      
+      const range = selection.getRangeAt(0);
+      const currentNode = range.startContainer;
+
       triggerCursorPosition = {
         node: currentNode,
         offset: range.startOffset,
         triggerChar: triggerInfo.triggerChar,
         screenX: triggerInfo.screenX,
-        screenY: triggerInfo.screenY
-      }
-      showVariableDropdown.value = true
+        screenY: triggerInfo.screenY,
+      };
+      showVariableDropdown.value = true;
     }
   } else {
-    triggerCursorPosition = null
-    showVariableDropdown.value = false
+    triggerCursorPosition = null;
+    showVariableDropdown.value = false;
   }
-}
+};
 
 // 在光标位置插入变量
 const insertVariableAtCursor = (variableName: string, variable: Variable) => {
   if (displayMode.value === 'text') {
-    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
-    emit('update:modelValue', textContent.value)
-    emit('variable-inserted', variableName)
-    return
+    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;
+    emit('update:modelValue', textContent.value);
+    emit('variable-inserted', variableName);
+    return;
   }
 
   if (!tagEditorRef.value) {
-    return
+    return;
   }
 
-  const selection = window.getSelection()
+  const selection = window.getSelection();
   if (!selection || selection.rangeCount === 0) {
-    tagEditorRef.value.focus()
-    const range = document.createRange()
-    range.selectNodeContents(tagEditorRef.value)
-    range.collapse(false)
+    tagEditorRef.value.focus();
+    const range = document.createRange();
+    range.selectNodeContents(tagEditorRef.value);
+    range.collapse(false);
     if (selection) {
-      selection.removeAllRanges()
-      selection.addRange(range)
+      selection.removeAllRanges();
+      selection.addRange(range);
     }
   }
-  
-  if (!selection) return
-  const range = selection.getRangeAt(0)
-  
-  const variableSpan = document.createElement('span')
-  const isValid = isVariableValid(variableName)
-  variableSpan.className = isValid ? 'variable-tag' : 'variable-tag variable-tag-invalid'
-  variableSpan.contentEditable = 'false'
-  
-  variableSpan.setAttribute('data-variable', variableName)
-  variableSpan.setAttribute('data-original-name', variableName)
-  variableSpan.setAttribute('data-valid', isValid.toString())
-  
+
+  if (!selection) return;
+  const range = selection.getRangeAt(0);
+
+  const variableSpan = document.createElement('span');
+  const isValid = isVariableValid(variableName);
+  variableSpan.className = isValid
+    ? 'variable-tag'
+    : 'variable-tag variable-tag-invalid';
+  variableSpan.contentEditable = 'false';
+
+  variableSpan.setAttribute('data-variable', variableName);
+  variableSpan.setAttribute('data-original-name', variableName);
+  variableSpan.setAttribute('data-valid', isValid.toString());
+
   if (!isValid) {
-    variableSpan.setAttribute('title', `变量 ${variableName} 不存在`)
+    variableSpan.setAttribute('title', `变量 ${variableName} 不存在`);
   }
-  
-  variableSpan.textContent = getDisplayTextFromInsertName(variableName)
-  
-  const backgroundStyle = isValid 
+
+  variableSpan.textContent = getDisplayTextFromInsertName(variableName);
+
+  const backgroundStyle = isValid
     ? 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;'
-    : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;'
-  
+    : 'background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;';
+
   variableSpan.style.cssText = `
     display: inline-block !important;
     padding: 2px 8px !important;
@@ -1583,477 +1682,506 @@ const insertVariableAtCursor = (variableName: string, variable: Variable) => {
     unicode-bidi: normal !important;
     text-align: center !important;
     writing-mode: horizontal-tb !important;
-  `
-  
-  const textNode = range.startContainer
+  `;
+
+  const textNode = range.startContainer;
   if (textNode.nodeType === Node.TEXT_NODE) {
-    const text = textNode.textContent || ''
-    const cursorPos = range.startOffset
-    const beforeCursor = text.substring(0, cursorPos)
-    
+    const text = textNode.textContent || '';
+    const cursorPos = range.startOffset;
+    const beforeCursor = text.substring(0, cursorPos);
+
     if (beforeCursor.endsWith('/') || beforeCursor.endsWith('{{')) {
-      const triggerLength = beforeCursor.endsWith('{{') ? 2 : 1
-      range.setStart(textNode, cursorPos - triggerLength)
-      range.setEnd(textNode, cursorPos)
-      range.deleteContents()
+      const triggerLength = beforeCursor.endsWith('{{') ? 2 : 1;
+      range.setStart(textNode, cursorPos - triggerLength);
+      range.setEnd(textNode, cursorPos);
+      range.deleteContents();
     }
   }
-  
-  range.insertNode(variableSpan)
-  
-  const spaceNode = document.createTextNode(' ')
-  range.setStartAfter(variableSpan)
-  range.insertNode(spaceNode)
-  
-  range.setStartAfter(spaceNode)
-  range.setEndAfter(spaceNode)
+
+  range.insertNode(variableSpan);
+
+  const spaceNode = document.createTextNode(' ');
+  range.setStartAfter(variableSpan);
+  range.insertNode(spaceNode);
+
+  range.setStartAfter(spaceNode);
+  range.setEndAfter(spaceNode);
   if (selection) {
-  selection.removeAllRanges()
-  selection.addRange(range)
+    selection.removeAllRanges();
+    selection.addRange(range);
   }
-  
-  const currentContent = props.modelValue || ''
-  
-  let newContent = ''
+
+  const currentContent = props.modelValue || '';
+
+  let newContent = '';
   try {
-    if (selection && range && range.startContainer.nodeType === Node.TEXT_NODE) {
-      const textContent = range.startContainer.textContent || ''
-      const cursorPos = range.startOffset
-      const beforeCursor = textContent.substring(0, cursorPos)
-      const afterCursor = textContent.substring(cursorPos)
-      
-      let cleanBeforeCursor = beforeCursor
+    if (
+      selection &&
+      range &&
+      range.startContainer.nodeType === Node.TEXT_NODE
+    ) {
+      const textContent = range.startContainer.textContent || '';
+      const cursorPos = range.startOffset;
+      const beforeCursor = textContent.substring(0, cursorPos);
+      const afterCursor = textContent.substring(cursorPos);
+
+      let cleanBeforeCursor = beforeCursor;
       if (beforeCursor.endsWith('/') || beforeCursor.endsWith('{{')) {
-        const triggerLength = beforeCursor.endsWith('{{') ? 2 : 1
-        cleanBeforeCursor = beforeCursor.substring(0, beforeCursor.length - triggerLength)
+        const triggerLength = beforeCursor.endsWith('{{') ? 2 : 1;
+        cleanBeforeCursor = beforeCursor.substring(
+          0,
+          beforeCursor.length - triggerLength,
+        );
       }
-      
-      newContent = cleanBeforeCursor + `{{${variableName}}}` + afterCursor
+
+      newContent = cleanBeforeCursor + `{{${variableName}}}` + afterCursor;
     } else {
-      newContent = currentContent + ` {{${variableName}}}`
+      newContent = currentContent + ` {{${variableName}}}`;
     }
   } catch (error) {
-    newContent = currentContent + ` {{${variableName}}}`
+    newContent = currentContent + ` {{${variableName}}}`;
   }
-  
-  emit('update:modelValue', newContent)
-  emit('variable-inserted', variableName)
-  
+
+  emit('update:modelValue', newContent);
+  emit('variable-inserted', variableName);
+
   setTimeout(() => {
-    const insertedTag = tagEditorRef.value?.querySelector(`[data-variable="${variableName}"]`)
+    const insertedTag = tagEditorRef.value?.querySelector(
+      `[data-variable="${variableName}"]`,
+    );
     if (!insertedTag) {
-      updateTagEditor(newContent)
+      updateTagEditor(newContent);
     }
-  }, 100)
-}
+  }, 100);
+};
 
 // 计算下拉框位置
 const dropdownPosition = computed(() => {
   if (!showVariableDropdown.value) {
-    return { display: 'none' }
-  }
-  
-  const dropdownWidth = 320
-  const dropdownHeight = 400
-  
-  let baseX = 0
-  let baseY = 0
-  
+    return { display: 'none' };
+  }
+
+  const dropdownWidth = 320;
+  const dropdownHeight = 400;
+
+  let baseX = 0;
+  let baseY = 0;
+
   if (triggerCursorPosition) {
-    baseX = triggerCursorPosition.screenX
-    baseY = triggerCursorPosition.screenY + 20
+    baseX = triggerCursorPosition.screenX;
+    baseY = triggerCursorPosition.screenY + 20;
   } else if (variableButtonRef.value) {
-    const rect = variableButtonRef.value.getBoundingClientRect()
-    baseX = rect.right - dropdownWidth
-    baseY = rect.bottom + 4
+    const rect = variableButtonRef.value.getBoundingClientRect();
+    baseX = rect.right - dropdownWidth;
+    baseY = rect.bottom + 4;
   } else {
-    return { display: 'none' }
+    return { display: 'none' };
   }
-  
-  let left = baseX
+
+  let left = baseX;
   if (left < 8) {
-    left = 8
+    left = 8;
   }
   if (left + dropdownWidth > window.innerWidth - 8) {
-    left = window.innerWidth - dropdownWidth - 8
+    left = window.innerWidth - dropdownWidth - 8;
   }
-  
-  let top = baseY
+
+  let top = baseY;
   if (top + dropdownHeight > window.innerHeight - 8) {
-    top = baseY - dropdownHeight - 25
+    top = baseY - dropdownHeight - 25;
     if (top < 8) {
-      top = window.innerHeight - dropdownHeight - 8
+      top = window.innerHeight - dropdownHeight - 8;
     }
   }
-  
+
   return {
     position: 'fixed' as const,
     top: `${top}px`,
     left: `${left}px`,
-    zIndex: 9999
-  }
-})
+    zIndex: 9999,
+  };
+});
 
 // 防抖控制
-const isToggling = ref(false)
-const isInsertingTriggerChar = ref(false)
+const isToggling = ref(false);
+const isInsertingTriggerChar = ref(false);
 
 // 工具栏事件处理 - 在光标位置插入/字符触发变量选择
 const toggleVariableDropdown = (event?: Event) => {
   if (event) {
-    event.stopPropagation()
-    event.preventDefault()
+    event.stopPropagation();
+    event.preventDefault();
   }
-  
+
   if (isToggling.value || isSelectingVariable.value) {
-    return
+    return;
   }
-  
-  isToggling.value = true
-  
-  insertTriggerCharacterAtCursor()
-  
+
+  isToggling.value = true;
+
+  insertTriggerCharacterAtCursor();
+
   setTimeout(() => {
-    isToggling.value = false
-  }, 100)
-}
+    isToggling.value = false;
+  }, 100);
+};
 
 // 在光标位置插入/字符并触发变量选择
 const insertTriggerCharacterAtCursor = () => {
-  isInsertingTriggerChar.value = true
-  
+  isInsertingTriggerChar.value = true;
+
   if (displayMode.value === 'text') {
-    const textarea = textEditorRef.value?.$refs?.textarea
+    const textarea = textEditorRef.value?.$refs?.textarea;
     if (textarea) {
-      const cursorPos = textarea.selectionStart || textContent.value.length
-      const before = textContent.value.substring(0, cursorPos)
-      const after = textContent.value.substring(cursorPos)
-      textContent.value = before + '/' + after
-      
+      const cursorPos = textarea.selectionStart || textContent.value.length;
+      const before = textContent.value.substring(0, cursorPos);
+      const after = textContent.value.substring(cursorPos);
+      textContent.value = before + '/' + after;
+
       nextTick(() => {
-        textarea.selectionStart = cursorPos + 1
-        textarea.selectionEnd = cursorPos + 1
-        textarea.focus()
-      })
-      
-      handleTextInput()
-      
+        textarea.selectionStart = cursorPos + 1;
+        textarea.selectionEnd = cursorPos + 1;
+        textarea.focus();
+      });
+
+      handleTextInput();
+
       setTimeout(() => {
-        isInsertingTriggerChar.value = false
-      }, 200)
+        isInsertingTriggerChar.value = false;
+      }, 200);
     }
-    return
+    return;
   }
-  
+
   if (!tagEditorRef.value) {
-    isInsertingTriggerChar.value = false
-    return
+    isInsertingTriggerChar.value = false;
+    return;
   }
-  
-  tagEditorRef.value.focus()
-  
-  const selection = window.getSelection()
+
+  tagEditorRef.value.focus();
+
+  const selection = window.getSelection();
   if (!selection) {
-    isInsertingTriggerChar.value = false
-    return
+    isInsertingTriggerChar.value = false;
+    return;
   }
-  
-  let range: Range
+
+  let range: Range;
   if (selection.rangeCount > 0) {
-    range = selection.getRangeAt(0)
+    range = selection.getRangeAt(0);
   } else {
-    range = document.createRange()
-    range.selectNodeContents(tagEditorRef.value)
-    range.collapse(false)
-  }
-  
-  const triggerTextNode = document.createTextNode('/')
-  range.insertNode(triggerTextNode)
-  
-  range.setStart(triggerTextNode, 1)
-  range.setEnd(triggerTextNode, 1)
-  selection.removeAllRanges()
-  selection.addRange(range)
-  
+    range = document.createRange();
+    range.selectNodeContents(tagEditorRef.value);
+    range.collapse(false);
+  }
+
+  const triggerTextNode = document.createTextNode('/');
+  range.insertNode(triggerTextNode);
+
+  range.setStart(triggerTextNode, 1);
+  range.setEnd(triggerTextNode, 1);
+  selection.removeAllRanges();
+  selection.addRange(range);
+
   nextTick(() => {
     setTimeout(() => {
-      const selection = window.getSelection()
+      const selection = window.getSelection();
       if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0)
-        const textNode = range.startContainer
+        const range = selection.getRangeAt(0);
+        const textNode = range.startContainer;
       }
-      
-      checkForVariableTrigger()
-      
-      handleTagInput()
-      
+
+      checkForVariableTrigger();
+
+      handleTagInput();
+
       setTimeout(() => {
-        isInsertingTriggerChar.value = false
-      }, 200)
-    }, 10)
-  })
-}
+        isInsertingTriggerChar.value = false;
+      }, 200);
+    }, 10);
+  });
+};
 
 // 监听页面滚动和窗口大小变化，更新浮层位置
 const updateDropdownPosition = () => {
   if (showVariableDropdown.value && variableButtonRef.value) {
     nextTick(() => {
       // 计算属性会自动重新计算
-    })
+    });
   }
-}
+};
 
 const handleScroll = () => {
   if (showVariableDropdown.value) {
-    updateDropdownPosition()
+    updateDropdownPosition();
   }
-}
+};
 
 const handleResize = () => {
   if (showVariableDropdown.value) {
-    updateDropdownPosition()
+    updateDropdownPosition();
   }
-}
+};
 
 const toggleDisplayMode = () => {
-  displayMode.value = displayMode.value === 'tag' ? 'text' : 'tag'
-}
+  displayMode.value = displayMode.value === 'tag' ? 'text' : 'tag';
+};
 
 const copyContent = async () => {
-  const content = displayMode.value === 'tag' ? getTagEditorContent() : textContent.value
-  
+  const content =
+    displayMode.value === 'tag' ? getTagEditorContent() : textContent.value;
+
   try {
     // 检查是否支持现代的 Clipboard API
     if (navigator.clipboard && navigator.clipboard.writeText) {
-      await navigator.clipboard.writeText(content)
-      ElMessage.success('内容已复制到剪贴板')
+      await navigator.clipboard.writeText(content);
+      ElMessage.success('内容已复制到剪贴板');
     } else {
       // 回退到传统的 document.execCommand 方法
-      fallbackCopyTextToClipboard(content)
+      fallbackCopyTextToClipboard(content);
     }
   } catch (error) {
     // 如果现代 API 失败，尝试回退方法
     try {
-      fallbackCopyTextToClipboard(content)
+      fallbackCopyTextToClipboard(content);
     } catch (fallbackError) {
-      ElMessage.error('复制失败，请手动选择文本复制')
+      ElMessage.error('复制失败，请手动选择文本复制');
     }
   }
-}
+};
 
 // 回退的复制方法
 const fallbackCopyTextToClipboard = (text: string) => {
-  const textArea = document.createElement('textarea')
-  textArea.value = text
-  
+  const textArea = document.createElement('textarea');
+  textArea.value = text;
+
   // 避免滚动到底部
-  textArea.style.top = '0'
-  textArea.style.left = '0'
-  textArea.style.position = 'fixed'
-  textArea.style.opacity = '0'
-  
-  document.body.appendChild(textArea)
-  textArea.focus()
-  textArea.select()
-  
+  textArea.style.top = '0';
+  textArea.style.left = '0';
+  textArea.style.position = 'fixed';
+  textArea.style.opacity = '0';
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
   try {
-    const successful = document.execCommand('copy')
+    const successful = document.execCommand('copy');
     if (successful) {
-      ElMessage.success('内容已复制到剪贴板')
+      ElMessage.success('内容已复制到剪贴板');
     } else {
-      throw new Error('execCommand failed')
+      throw new Error('execCommand failed');
     }
   } catch (err) {
-    console.error('Fallback: Could not copy text: ', err)
-    ElMessage.error('复制失败，请手动选择文本复制')
+    console.error('Fallback: Could not copy text: ', err);
+    ElMessage.error('复制失败，请手动选择文本复制');
   }
-  
-  document.body.removeChild(textArea)
-}
+
+  document.body.removeChild(textArea);
+};
 
 // 外部调用的插入变量方法
 const insertVariable = (variableName: string, variable: Variable) => {
   // 使用插入格式而不是传入的variableName
-  const insertName = getVariableInsertName(variable)
-  
+  const insertName = getVariableInsertName(variable);
+
   if (displayMode.value === 'tag') {
-    insertVariableAtCursor(insertName, 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 + `{{${insertName}}}` + after
-    emit('update:modelValue', textContent.value)
-    emit('variable-inserted', insertName)
+    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 + `{{${insertName}}}` + after;
+    emit('update:modelValue', textContent.value);
+    emit('variable-inserted', insertName);
   }
-}
+};
 
 // 暴露方法给父组件
 defineExpose({
-  insertVariable
-})
+  insertVariable,
+});
 
 // 保存和恢复光标位置
 const saveCursorPosition = () => {
-  const selection = window.getSelection()
-  if (!selection || selection.rangeCount === 0 || !tagEditorRef.value) return null
-  
-  const range = selection.getRangeAt(0)
-  const startContainer = range.startContainer
-  const startOffset = range.startOffset
-  
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0 || !tagEditorRef.value)
+    return null;
+
+  const range = selection.getRangeAt(0);
+  const startContainer = range.startContainer;
+  const startOffset = range.startOffset;
+
   const positionInfo = {
     nodeType: startContainer.nodeType,
     nodeIndex: -1,
     offsetInNode: startOffset,
     isInVariableTag: false,
     variableTagData: null as string | null,
-    textOffset: 0
-  }
-  
+    textOffset: 0,
+  };
+
   if (startContainer.parentNode === tagEditorRef.value) {
-    positionInfo.nodeIndex = Array.from(tagEditorRef.value.childNodes).indexOf(startContainer as ChildNode)
-  } else if (startContainer.nodeType === Node.TEXT_NODE && startContainer.parentNode) {
-    const parentElement = startContainer.parentNode as HTMLElement
+    positionInfo.nodeIndex = Array.from(tagEditorRef.value.childNodes).indexOf(
+      startContainer as ChildNode,
+    );
+  } else if (
+    startContainer.nodeType === Node.TEXT_NODE &&
+    startContainer.parentNode
+  ) {
+    const parentElement = startContainer.parentNode as HTMLElement;
     if (parentElement.classList?.contains('variable-tag')) {
-      positionInfo.isInVariableTag = true
-      positionInfo.variableTagData = parentElement.getAttribute('data-variable')
-      positionInfo.nodeIndex = Array.from(tagEditorRef.value.childNodes).indexOf(parentElement)
+      positionInfo.isInVariableTag = true;
+      positionInfo.variableTagData =
+        parentElement.getAttribute('data-variable');
+      positionInfo.nodeIndex = Array.from(
+        tagEditorRef.value.childNodes,
+      ).indexOf(parentElement);
     }
   }
-  
-  const preCaretRange = range.cloneRange()
-  preCaretRange.selectNodeContents(tagEditorRef.value)
-  preCaretRange.setEnd(range.startContainer, range.startOffset)
-  positionInfo.textOffset = preCaretRange.toString().length
-  
-  return positionInfo
-}
+
+  const preCaretRange = range.cloneRange();
+  preCaretRange.selectNodeContents(tagEditorRef.value);
+  preCaretRange.setEnd(range.startContainer, range.startOffset);
+  positionInfo.textOffset = preCaretRange.toString().length;
+
+  return positionInfo;
+};
 
 const restoreCursorPosition = (savedPosition: any) => {
-  if (!tagEditorRef.value || savedPosition === null) return
-  
-  const selection = window.getSelection()
-  if (!selection) return
-  
+  if (!tagEditorRef.value || savedPosition === null) return;
+
+  const selection = window.getSelection();
+  if (!selection) return;
+
   if (typeof savedPosition === 'number') {
-    restoreCursorPositionByOffset(savedPosition)
-    return
+    restoreCursorPositionByOffset(savedPosition);
+    return;
   }
-  
+
   try {
-    const childNodes = Array.from(tagEditorRef.value.childNodes)
-    
+    const childNodes = Array.from(tagEditorRef.value.childNodes);
+
     if (savedPosition.isInVariableTag && savedPosition.variableTagData) {
-      const variableTag = tagEditorRef.value.querySelector(`[data-variable="${savedPosition.variableTagData}"]`) as HTMLElement
+      const variableTag = tagEditorRef.value.querySelector(
+        `[data-variable="${savedPosition.variableTagData}"]`,
+      ) as HTMLElement;
       if (variableTag) {
-        let targetNode = variableTag.nextSibling
-        
+        let targetNode = variableTag.nextSibling;
+
         if (!targetNode || targetNode.nodeType !== Node.TEXT_NODE) {
-          const textNode = document.createTextNode('')
+          const textNode = document.createTextNode('');
           if (variableTag.parentNode) {
-            variableTag.parentNode.insertBefore(textNode, variableTag.nextSibling)
-            targetNode = textNode
+            variableTag.parentNode.insertBefore(
+              textNode,
+              variableTag.nextSibling,
+            );
+            targetNode = textNode;
           }
         }
-        
+
         if (targetNode && targetNode.nodeType === Node.TEXT_NODE) {
-          const range = document.createRange()
-          range.setStart(targetNode, 0)
-          range.setEnd(targetNode, 0)
-          selection.removeAllRanges()
-          selection.addRange(range)
-          return
+          const range = document.createRange();
+          range.setStart(targetNode, 0);
+          range.setEnd(targetNode, 0);
+          selection.removeAllRanges();
+          selection.addRange(range);
+          return;
         }
       }
     }
-    
-    if (savedPosition.nodeIndex >= 0 && savedPosition.nodeIndex < childNodes.length) {
-      const targetNode = childNodes[savedPosition.nodeIndex]
-      
+
+    if (
+      savedPosition.nodeIndex >= 0 &&
+      savedPosition.nodeIndex < childNodes.length
+    ) {
+      const targetNode = childNodes[savedPosition.nodeIndex];
+
       if (targetNode.nodeType === Node.TEXT_NODE) {
-        const textLength = targetNode.textContent?.length || 0
-        const offset = Math.min(savedPosition.offsetInNode, textLength)
-        
-        const range = document.createRange()
-        range.setStart(targetNode, offset)
-        range.setEnd(targetNode, offset)
-        selection.removeAllRanges()
-        selection.addRange(range)
-        return
+        const textLength = targetNode.textContent?.length || 0;
+        const offset = Math.min(savedPosition.offsetInNode, textLength);
+
+        const range = document.createRange();
+        range.setStart(targetNode, offset);
+        range.setEnd(targetNode, offset);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        return;
       }
     }
-    
-    restoreCursorPositionByOffset(savedPosition.textOffset)
+
+    restoreCursorPositionByOffset(savedPosition.textOffset);
   } catch (error) {
-    restoreCursorPositionByOffset(savedPosition.textOffset || 0)
+    restoreCursorPositionByOffset(savedPosition.textOffset || 0);
   }
-}
+};
 
 // 备用的基于文本偏移量的光标恢复方法
 const restoreCursorPositionByOffset = (savedPosition: number) => {
-  if (!tagEditorRef.value) return
-  
-  const selection = window.getSelection()
-  if (!selection) return
-  
+  if (!tagEditorRef.value) return;
+
+  const selection = window.getSelection();
+  if (!selection) return;
+
   const walker = document.createTreeWalker(
     tagEditorRef.value,
     NodeFilter.SHOW_TEXT,
-    null
-  )
-  
-  let currentOffset = 0
-  let targetNode: Node | null = null
-  let targetOffset = 0
-  
+    null,
+  );
+
+  let currentOffset = 0;
+  let targetNode: Node | null = null;
+  let targetOffset = 0;
+
   while (walker.nextNode()) {
-    const node = walker.currentNode
-    const nodeLength = node.textContent?.length || 0
-    
+    const node = walker.currentNode;
+    const nodeLength = node.textContent?.length || 0;
+
     if (currentOffset + nodeLength >= savedPosition) {
-      targetNode = node
-      targetOffset = savedPosition - currentOffset
-      break
+      targetNode = node;
+      targetOffset = savedPosition - currentOffset;
+      break;
     }
-    currentOffset += nodeLength
+    currentOffset += nodeLength;
   }
-  
+
   if (targetNode) {
-    const range = document.createRange()
-    range.setStart(targetNode, targetOffset)
-    range.setEnd(targetNode, targetOffset)
-    selection.removeAllRanges()
-    selection.addRange(range)
+    const range = document.createRange();
+    range.setStart(targetNode, targetOffset);
+    range.setEnd(targetNode, targetOffset);
+    selection.removeAllRanges();
+    selection.addRange(range);
   }
-}
+};
 
 // 生命周期
 onMounted(() => {
   if (displayMode.value === 'tag') {
-    updateTagEditor(props.modelValue)
+    updateTagEditor(props.modelValue);
   } else {
-    textContent.value = props.modelValue
+    textContent.value = props.modelValue;
   }
-  
-  nextTick(() => {
-  })
-  
-  document.addEventListener('click', handleDocumentClick)
-  window.addEventListener('scroll', handleScroll, true)
-  window.addEventListener('resize', handleResize)
-})
+
+  nextTick(() => {});
+
+  document.addEventListener('click', handleDocumentClick);
+  window.addEventListener('scroll', handleScroll, true);
+  window.addEventListener('resize', handleResize);
+});
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleDocumentClick)
-  window.removeEventListener('scroll', handleScroll, true)
-  window.removeEventListener('resize', handleResize)
-})
+  document.removeEventListener('click', handleDocumentClick);
+  window.removeEventListener('scroll', handleScroll, true);
+  window.removeEventListener('resize', handleResize);
+});
 </script>
 
 <style scoped lang="scss">
 .variable-rich-text-editor {
   position: relative;
+  width: 100%;
 
   .editor-container {
     border: 1px solid #dcdfe6;
@@ -2061,11 +2189,11 @@ onUnmounted(() => {
     background-color: #fafbfc;
     overflow: hidden;
     transition: border-color 0.2s ease;
-    
+
     &:focus-within {
       border-color: #409eff;
     }
-    
+
     &:hover {
       border-color: #c0c4cc;
     }
@@ -2097,7 +2225,7 @@ onUnmounted(() => {
         border: none;
         border-radius: 3px;
         font-size: 12px;
-        
+
         &:hover {
           background-color: #e6f7ff;
           color: #409eff;
@@ -2128,11 +2256,11 @@ onUnmounted(() => {
         box-sizing: border-box;
         width: 100%;
         resize: none;
-        
+
         /* 确保正确的文本方向 */
         direction: ltr !important;
         text-align: left !important;
-        
+
         &:focus {
           outline: none;
         }
@@ -2148,7 +2276,11 @@ onUnmounted(() => {
           display: inline-block !important;
           padding: 2px 8px !important;
           margin: 0 2px !important;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+          background: linear-gradient(
+            135deg,
+            #667eea 0%,
+            #764ba2 100%
+          ) !important;
           color: white !important;
           border-radius: 4px !important;
           font-size: 12px !important;
@@ -2157,26 +2289,30 @@ onUnmounted(() => {
           user-select: none !important;
           vertical-align: middle !important;
           pointer-events: auto !important; // 确保可以响应hover事件
-          
+
           &:hover {
             opacity: 0.8 !important;
           }
-          
+
           // 无效变量的警告样式
           &.variable-tag-invalid {
-            background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
+            background: linear-gradient(
+              135deg,
+              #f56565 0%,
+              #e53e3e 100%
+            ) !important;
             position: relative;
             cursor: help !important; // 使用help光标提示有tooltip
             pointer-events: all !important; // 强制允许所有指针事件
             user-select: auto !important; // 允许选择以支持tooltip
-            
+
             &:hover {
               opacity: 0.9 !important;
             }
-            
+
             // 添加警告图标
             &::after {
-              content: " ⚠️";
+              content: ' ⚠️';
               font-size: 10px;
               margin-left: 2px;
             }
@@ -2200,13 +2336,13 @@ onUnmounted(() => {
           max-height: 300px;
           resize: none;
           box-sizing: border-box;
-          
+
           /* 修复文本方向问题 */
           direction: ltr !important;
           unicode-bidi: normal !important;
           text-align: left !important;
           writing-mode: horizontal-tb !important;
-          
+
           &:focus {
             border-color: transparent;
             box-shadow: none;
@@ -2242,8 +2378,6 @@ onUnmounted(() => {
     margin-top: 8px;
     text-align: center;
   }
-
-
 }
 </style>
 
@@ -2268,11 +2402,11 @@ onUnmounted(() => {
   user-select: none !important;
   vertical-align: middle !important;
   pointer-events: auto !important; // 确保可以响应hover事件
-  
+
   &:hover {
     opacity: 0.8 !important;
   }
-  
+
   // 无效变量的警告样式
   &.variable-tag-invalid {
     background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
@@ -2280,17 +2414,17 @@ onUnmounted(() => {
     cursor: help !important; // 使用help光标提示有tooltip
     pointer-events: all !important; // 强制允许所有指针事件
     user-select: auto !important; // 允许选择以支持tooltip
-    
+
     &:hover {
       opacity: 0.9 !important;
     }
-    
+
     // 添加警告图标
     &::after {
-      content: " ⚠️";
+      content: ' ⚠️';
       font-size: 10px;
       margin-left: 2px;
     }
   }
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index 5b6e518af81551e6dc6910a194962e2a4e414d77..87ac5a4adcc25f484a9197116058a3a968d7cc6a 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -91,6 +91,12 @@ export default {
     baseMessage: 'Base Message',
     copyFailed: 'Copy failed',
     checkFormat: 'Please check the format',
+    component_name: 'component name',
+    component_introduction: 'component introduction',
+    selectedModel: 'select model',
+    key: 'key',
+    value: 'value',
+    rag_query_variables: 'query'
   },
   plugin_center: {
     plugin_name: 'Plugin Name',
@@ -426,24 +432,6 @@ export default {
     output: 'Output',
     params: 'Parameters',
     supplementaryParameters: 'Supplementary Parameters',
-    add_description: 'Add description...',
-    settings: 'Settings',
-    input_params: 'Input Fields',
-    param_name: 'Parameter Name',
-    param_label: 'Parameter Label',
-    select_type: 'Select Type',
-    required: 'Required',
-    default_value: 'Default Value',
-    no_input_params: 'No input parameters',
-    add_first_param: 'Add first parameter',
-    duplicate_param_key: 'Parameter name cannot be duplicate',
-    save_failed: 'Save failed',
-    add_param: 'Add Parameter',
-    edit_param: 'Edit Parameter',
-    param_type: 'Parameter Type',
-    param_settings: 'Parameter Settings',
-    param_name_required: 'Parameter name is required',
-    invalid_param_name: 'Invalid parameter name format',
   },
   pagination: {
     prev: 'Previous',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 2af288735256caff488a7fe4fdd71158be682131..8d0d8b1f4be3db4ea441965b4552448f8dfc6856 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -90,6 +90,12 @@ export default {
     publish: '发布',
     copyFailed: '复制失败',
     checkFormat: '请检查格式',
+    component_name: '组件名称',
+    component_introduction: '组件描述',
+    selectedModel: '选择模型',
+    key: '键',
+    value: '值',
+    rag_query_variables: '问题'
   },
   plugin_center: {
     plugin_name: '插件名称',
diff --git a/src/views/createapp/components/types.ts b/src/views/createapp/components/types.ts
index 425721a8ad21b148acf31764a13c9b6fe050fedc..6cdb5cff9b871824de3b45b9ab05f7454e398ca5 100644
--- a/src/views/createapp/components/types.ts
+++ b/src/views/createapp/components/types.ts
@@ -148,3 +148,14 @@ export interface ListItem {
   id: string;
   value: string | null;
 }
+
+export const NodeType = {
+  RAG: 'rag',
+  API: 'api',
+  LLM: 'llm',
+  MCP: 'mcp',
+  CHOICE: 'choice',
+  CODE: 'code',
+  DIRECTREPLY: 'directreply',
+  PLUGIN: 'api',
+};
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index f4a9d9cbad1ef40fd442cedffe7c7333fe4b8c5f..3b97cd64c4f007593c1266c533571741628bf11f 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -25,6 +25,10 @@ import {
   IconPlusCircle,
 } from '@computing/opendesign-icons';
 
+import ApiCallDrawer from './workFlowConfig/ApiCallDrawer.vue';
+import LLMDrawer from './workFlowConfig/LLMDrawer.vue';
+import MCPDrawer from './workFlowConfig/MCPDrawer.vue';
+import RAGDrawer from './workFlowConfig/RAGDrawer.vue';
 import EditYamlDrawer from './workFlowConfig/yamlEditDrawer.vue';
 import VariableBasedStartNodeDrawer from './workFlowConfig/VariableBasedStartNodeDrawer.vue';
 import CodeNodeDrawer from './workFlowConfig/CodeNodeDrawer.vue';
@@ -42,7 +46,7 @@ import CustomLoading from '../../customLoading/index.vue';
 import EditFlowName from './workFlowConfig/editFlowName.vue';
 import NodeListPanel from './workFlowConfig/NodeListPanel.vue';
 import EnvironmentVariableDrawer from './workFlowConfig/EnvironmentVariableDrawer.vue';
-
+import { NodeType } from './types';
 const { t } = useI18n();
 const copilotAside = ref<HTMLElement>();
 const isCopilotAsideVisible = ref(false);
@@ -54,6 +58,10 @@ const editFlowNameId = ref();
 const editData = ref();
 const dialogType = ref('');
 const isEditYaml = ref(false);
+const isEditApiCall = ref(false);
+const isEditLLM = ref(false);
+const isEditRAG = ref(false);
+const isEditMCP = ref(false);
 const isEditStartNode = ref(false);
 const isEditCodeNode = ref(false);
 const isEditDirectReplyNode = ref(false);
@@ -74,7 +82,13 @@ const emits = defineEmits(['updateFlowsDebug']);
 const route = useRoute();
 const workFlowList = ref<any[]>([]);
 const props = defineProps(['flowList']);
-const flowObj = ref<{flowId?: string, debug?: boolean, name?: string, nodes?: any[], edges?: any[]}>({});
+const flowObj = ref<{
+  flowId?: string;
+  debug?: boolean;
+  name?: string;
+  nodes?: any[];
+  edges?: any[];
+}>({});
 const nodes = ref<any[]>([]);
 const debugStatus = ref('');
 const debugTime = ref('');
@@ -101,7 +115,7 @@ const insertMenuData = ref({
   visible: false,
   position: { x: 0, y: 0 },
   edgeInfo: null,
-  direction: 'right' as 'left' | 'right'
+  direction: 'right' as 'left' | 'right',
 });
 
 const hanleAsideVisible = () => {
@@ -170,7 +184,6 @@ onConnect((e) => {
   });
 });
 
-
 // 打开新增工作流弹窗
 const addWorkFlow = () => {
   // 待增加新增弹窗
@@ -183,7 +196,9 @@ const handleClose = (flowId?: string) => {
     api.querySingleAppData({ id: route.query.appId as string }).then((res) => {
       //workflowList 数据更新
       workFlowList.value = res[1]?.result.workflows;
-      const foundFlow = workFlowList.value.find((item: any) => item.id === flowId);
+      const foundFlow = workFlowList.value.find(
+        (item: any) => item.id === flowId,
+      );
       if (foundFlow) {
         choiceFlowId(foundFlow);
       }
@@ -201,7 +216,7 @@ const delNode = (id) => {
 };
 
 // 处理变量更新事件 - 仅重新加载对话变量用于开始节点展示
-const handleVariablesUpdated = async () => {  
+const handleVariablesUpdated = async () => {
   // 延迟加载，确保后端数据已经同步
   setTimeout(async () => {
     await loadConversationVariablesForDisplay();
@@ -214,16 +229,16 @@ const loadConversationVariablesForDisplay = async () => {
     console.warn('没有flowId，跳过变量加载');
     return;
   }
-  
+
   variablesLoading.value = true;
-  
-  try {    
+
+  try {
     // 只加载对话变量（不带current_step_id，因为是给开始节点展示用的）
-    const convVars: any = await listVariables({ 
-      scope: 'conversation', 
-      flow_id: flowObj.value.flowId 
+    const convVars: any = await listVariables({
+      scope: 'conversation',
+      flow_id: flowObj.value.flowId,
     });
-    
+
     // 修复：支持多种API响应结构
     let variables: any[] = [];
     if (convVars?.result?.variables) {
@@ -236,13 +251,12 @@ const loadConversationVariablesForDisplay = async () => {
       // 结构3: 直接返回数组
       variables = convVars;
     }
-    
+
     if (variables && Array.isArray(variables)) {
       conversationVariablesForDisplay.value = variables;
     } else {
       conversationVariablesForDisplay.value = [];
     }
-    
   } catch (error) {
     console.error('❌ 加载对话变量失败:', error);
     ElMessage.error('加载对话变量失败');
@@ -251,8 +265,6 @@ const loadConversationVariablesForDisplay = async () => {
   }
 };
 
-
-
 // 验证节点是否都连接
 const nodeAndLineConnection = () => {
   // 获取当前所有节点和边
@@ -290,83 +302,120 @@ const nodeAndLineConnection = () => {
 };
 // 编辑yaml
 const editYamlDrawer = (name, desc, yamlCode, nodeId) => {
-  // 查找当前节点
   const currentNode = findNode(nodeId);
-  
-  // 检查是否为Code类型节点
-  if (currentNode && currentNode.data.callId === 'Code') {
-    // 打开代码节点编辑器
-    currentCodeNodeData.value = {
-      name: currentNode.data.name,
-      description: currentNode.data.description,
-      callId: currentNode.data.callId,
-      
-      // 代码节点自身属性
-      code: currentNode.data.code || '',
-      codeType: currentNode.data.codeType || 'python',
-      securityLevel: currentNode.data.securityLevel || 'low',
-      timeoutSeconds: currentNode.data.timeoutSeconds || 30,
-      memoryLimitMb: currentNode.data.memoryLimitMb || 128,
-      cpuLimit: currentNode.data.cpuLimit || 0.5,
-      
-      // 用户定义的输入输出参数
-      input_parameters: currentNode.data.parameters?.input_parameters || {},
-      output_parameters: currentNode.data.parameters?.output_parameters || {},
-    };
-    nodeYamlId.value = nodeId;
-    selectedNodeId.value = nodeId;
-    isEditCodeNode.value = true;
-  } else if (currentNode && currentNode.data.callId === 'DirectReply') {
-    // 打开直接回复节点编辑器
-    currentDirectReplyNodeData.value = {
-      name: currentNode.data.name,
-      description: currentNode.data.description,
-      callId: currentNode.data.callId,
-      parameters: {
-        input_parameters: {
-          answer: currentNode.data.parameters?.input_parameters?.answer || ''
+  console.log(currentNode?.data.callId);
+  switch (currentNode?.data.callId) {
+    case 'Code':
+      // 打开代码节点编辑器
+      currentCodeNodeData.value = {
+        name: currentNode.data.name,
+        description: currentNode.data.description,
+        callId: currentNode.data.callId,
+
+        // 代码节点自身属性
+        code: currentNode.data.code || '',
+        codeType: currentNode.data.codeType || 'python',
+        securityLevel: currentNode.data.securityLevel || 'low',
+        timeoutSeconds: currentNode.data.timeoutSeconds || 30,
+        memoryLimitMb: currentNode.data.memoryLimitMb || 128,
+        cpuLimit: currentNode.data.cpuLimit || 0.5,
+
+        // 用户定义的输入输出参数
+        input_parameters: currentNode.data.parameters?.input_parameters || {},
+        output_parameters: currentNode.data.parameters?.output_parameters || {},
+      };
+      isEditCodeNode.value = true;
+      break;
+    case 'DirectReply':
+      // 打开直接回复节点编辑器
+      currentDirectReplyNodeData.value = {
+        name: currentNode.data.name,
+        description: currentNode.data.description,
+        callId: currentNode.data.callId,
+        parameters: {
+          input_parameters: {
+            answer: currentNode.data.parameters?.input_parameters?.answer || '',
+          },
+          output_parameters:
+            currentNode.data.parameters?.output_parameters || {},
         },
-        output_parameters: currentNode.data.parameters?.output_parameters || {}
-      }
-    };
-    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: {
-    type: 'string',
-    description: '选中的分支ID'
-  }
-}
-      }
-    };
-    nodeYamlId.value = nodeId;
-    selectedNodeId.value = nodeId;
-    isEditChoiceBranchNode.value = true;
-  } else {
-    // 打开YAML编辑器（其他节点类型）
-    yamlContent.value = yamlCode;
-    nodeName.value = name;
-    nodeDesc.value = desc;
-    isEditYaml.value = true;
-    nodeYamlId.value = nodeId;
-    selectedNodeId.value = nodeId;
+      };
+      isEditDirectReplyNode.value = true;
+      break;
+    case '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: {
+              type: 'string',
+              description: '选中的分支ID',
+            },
+          },
+        },
+      };
+      isEditChoiceBranchNode.value = true;
+      break;
+    case 'API':
+      isEditApiCall.value = true;
+      break;
+    case 'LLM':
+      isEditLLM.value = true;
+      break;
+    case 'RAG':
+      isEditRAG.value = true;
+      break;
+    case 'MCP':
+      isEditMCP.value = true;
+      break;
+    default:
+      isEditYaml.value = true;
+      break;
   }
-  
-  // 编辑时，需要debug 后才可发布
+
+  yamlContent.value = yamlCode;
+  nodeName.value = name;
+  nodeDesc.value = desc;
+  nodeYamlId.value = nodeId;
+  selectedNodeId.value = nodeId;
+  // ↓ 调用节点需要debug 后才可发布
   emits('updateFlowsDebug', false);
 };
 // 关闭抽屉
-const closeDrawer = () => {
-  isEditYaml.value = false;
+const closeDrawer = (node_type) => {
+  switch (node_type) {
+    case NodeType.API:
+      isEditApiCall.value = false;
+      break;
+    case NodeType.LLM:
+      isEditLLM.value = false;
+      break;
+    case NodeType.RAG:
+      isEditRAG.value = false;
+      break;
+    case NodeType.MCP:
+      isEditMCP.value = false;
+      break;
+    case NodeType.CODE:
+      isEditCodeNode.value = false;
+      currentCodeNodeData.value = {};
+      break;
+    case NodeType.DIRECTREPLY:
+      isEditDirectReplyNode.value = false;
+      currentDirectReplyNodeData.value = {};
+      break;
+    case NodeType.CHOICE:
+      isEditChoiceBranchNode.value = false;
+      currentChoiceBranchNodeData.value = {};
+      break;
+    default:
+      isEditYaml.value = false;
+  }
+
   // 清除选中状态
   selectedNodeId.value = '';
 };
@@ -385,13 +434,13 @@ const saveCodeNode = (nodeData, nodeId) => {
     id: nodeId,
     ...nodeData,
   };
-  
+
   // 调用保存接口
   saveFlow(updateNodeParameter);
-  
+
   // 关闭抽屉
   closeCodeNodeDrawer();
-  
+
   ElMessage.success('代码节点保存成功');
 };
 
@@ -409,13 +458,13 @@ const saveDirectReplyNode = (nodeData, nodeId) => {
     id: nodeId,
     ...nodeData,
   };
-  
+
   // 调用保存接口
   saveFlow(updateNodeParameter);
-  
+
   // 关闭抽屉
   closeDirectReplyDrawer();
-  
+
   ElMessage.success('直接回复节点保存成功');
 };
 
@@ -433,13 +482,13 @@ const saveChoiceBranchNode = (nodeData, nodeId) => {
     id: nodeId,
     ...nodeData,
   };
-  
+
   // 调用保存接口
   saveFlow(updateNodeParameter);
-  
+
   // 关闭抽屉
   closeChoiceBranchDrawer();
-  
+
   ElMessage.success('条件分支节点保存成功');
 };
 
@@ -468,7 +517,7 @@ const editStartNodeDrawer = async (name, desc, yamlCode, nodeId) => {
   nodeYamlId.value = nodeId;
   // 设置选中的节点
   selectedNodeId.value = nodeId;
-  
+
   isEditStartNode.value = true;
   // 编辑 yaml 时，需要debug 后才可发布
   emits('updateFlowsDebug', false);
@@ -534,7 +583,7 @@ onMounted(() => {
     })
     .then((res) => {
       const services = res[1]?.result.services || [];
- 
+
       apiServiceList.value = services;
       allApiServiceList.value = services;
       apiLoading.value = false;
@@ -548,8 +597,6 @@ onUnmounted(() => {
   sessionStorage.setItem('workflowViewPortY', '');
 });
 
-
-
 // 处理节点拖拽开始事件
 const handleNodeDragStart = (event: DragEvent, node: any) => {
   onDragStart(event, node.type, {
@@ -621,7 +668,7 @@ const getCreatedFlow = async (createdFlowObj) => {
     workFlowItemName.value = createdFlowObj.name;
     // 回显工作流节点和边
     redrageFlow(createdFlowObj?.nodes, createdFlowObj?.edges);
-    
+
     // 重新加载对话变量，确保显示当前flow的正确变量状态
     await loadConversationVariablesForDisplay();
   }
@@ -672,11 +719,11 @@ const editFlow = async (item) => {
       appId: route.query?.appId,
       flowId: item.id,
     });
-    
+
     if (res[1]?.result?.flow) {
       flowObj.value = res[1].result.flow;
       redrageFlow(flowObj.value.nodes || [], flowObj.value.edges || []);
-      
+
       // 加载对话变量用于开始节点展示
       await loadConversationVariablesForDisplay();
     }
@@ -758,13 +805,15 @@ const redrageFlow = (nodesList, edgesList) => {
       newNode.deletable = false;
     } 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);
-      
+      const hasDefaultBranch = choices.some(
+        (choice) => choice.is_default === true,
+      );
+
       // 如果没有默认分支，添加一个ELSE分支
       if (!hasDefaultBranch) {
         choices.push({
@@ -772,30 +821,30 @@ const redrageFlow = (nodesList, edgesList) => {
           name: 'ELSE',
           is_default: true,
           conditions: [],
-          logic: 'and'
+          logic: 'and',
         });
       }
-      
+
       newNode.data = {
         ...newNode.data,
         parameters: {
-          input_parameters: { 
-            choices: choices 
+          input_parameters: {
+            choices: choices,
           },
-          output_parameters: node.parameters?.output_parameters || { 
+          output_parameters: node.parameters?.output_parameters || {
             branch_id: {
               type: 'string',
-              description: '选中的分支ID'
-            }
-          }
-        }
+              description: '选中的分支ID',
+            },
+          },
+        },
       };
     } else if (node.callId === 'Code') {
       // Code节点特殊处理：从parameters中提取特有属性并添加到data中
       newNode.type = 'custom';
       newNode.data = {
         ...newNode.data,
-        nodeId: 'Code',  // 设置正确的nodeId
+        nodeId: 'Code', // 设置正确的nodeId
         // 从parameters中提取Code节点特有的配置属性
         code: node.parameters?.code || '',
         codeType: node.parameters?.codeType || 'python',
@@ -840,43 +889,43 @@ 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
+      y: containerY,
     },
     edgeInfo,
-    direction
+    direction,
   };
 };
 
@@ -894,26 +943,28 @@ const executeInsertNode = (nodeMetaData) => {
       console.error('没有边信息，无法插入节点');
       return;
     }
-    
+
     const edgeInfo = insertMenuData.value.edgeInfo;
-    
+
     // 生成新节点ID
     const newNodeId = `node_${Date.now()}`;
-    
+
     // 找到源边
-    const sourceEdge = getEdges.value.find(edge => edge.id === edgeInfo.edgeId);
+    const sourceEdge = getEdges.value.find(
+      (edge) => edge.id === edgeInfo.edgeId,
+    );
     if (!sourceEdge) {
       console.error('找不到要插入的边');
       return;
     }
-    
+
     // 创建新节点
     const newNode = {
       id: newNodeId,
       type: nodeMetaData.callId === 'Choice' ? 'Choice' : 'custom',
       position: {
         x: edgeInfo.midX - 100, // 节点宽度的一半
-        y: edgeInfo.midY - 40   // 节点高度的一半
+        y: edgeInfo.midY - 40, // 节点高度的一半
       },
       data: {
         name: nodeMetaData.name,
@@ -921,44 +972,51 @@ const executeInsertNode = (nodeMetaData) => {
         nodeId: nodeMetaData.nodeId,
         callId: nodeMetaData.callId,
         serviceId: nodeMetaData.serviceId || 'default',
-        parameters: nodeMetaData.callId === 'Choice' ? {
-          input_parameters: { 
-            choices: [
-              {
-                branch_id: `else_${newNodeId}`,
-                name: 'ELSE',
-                is_default: true,
-                conditions: [],
-                logic: 'and'
+        parameters:
+          nodeMetaData.callId === 'Choice'
+            ? {
+                input_parameters: {
+                  choices: [
+                    {
+                      branch_id: `else_${newNodeId}`,
+                      name: 'ELSE',
+                      is_default: true,
+                      conditions: [],
+                      logic: 'and',
+                    },
+                  ],
+                },
+                output_parameters: {
+                  branch_id: {
+                    type: 'string',
+                    description: '选中的分支ID',
+                  },
+                },
               }
-            ]
-          },
-          output_parameters: { 
-            branch_id: {
-              type: 'string',
-              description: '选中的分支ID'
-            }
-          }
-        } : nodeMetaData.callId === 'DirectReply' ? {
-          input_parameters: {
-            answer: ''  // 确保新建的DirectReply节点内容为空
-          },
-          output_parameters: {}
-        } : {
-          input_parameters: {},
-          output_parameters: {}
-        }
+            : nodeMetaData.callId === 'DirectReply'
+              ? {
+                  input_parameters: {
+                    answer: '', // 确保新建的DirectReply节点内容为空
+                  },
+                  output_parameters: {},
+                }
+              : {
+                  input_parameters: {},
+                  output_parameters: {},
+                },
       },
-      deletable: true
+      deletable: true,
     };
-    
+
     // 添加新节点
     const currentNodes = [...getNodes.value, newNode];
     setNodes(currentNodes);
-    
+
     // 删除原来的边
-    const currentEdges = getEdges.value.filter(edge => edge.id !== edgeInfo.edgeId);
-    
+    const currentEdges = getEdges.value.filter(
+      (edge) => edge.id !== edgeInfo.edgeId,
+    );
+
     // 创建新的边：源节点 -> 新节点 -> 目标节点
     const newEdge1 = {
       id: `edge_${Date.now()}_1`,
@@ -968,35 +1026,34 @@ const executeInsertNode = (nodeMetaData) => {
       type: 'normal',
       data: {
         sourceStatus: 'default',
-        targetStatus: 'default'
-      }
+        targetStatus: 'default',
+      },
     };
-    
+
     const newEdge2 = {
-      id: `edge_${Date.now()}_2`, 
+      id: `edge_${Date.now()}_2`,
       source: newNodeId,
       target: sourceEdge.target,
       targetHandle: sourceEdge.targetHandle,
       type: 'normal',
       data: {
         sourceStatus: 'default',
-        targetStatus: '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('插入节点失败');
@@ -1131,10 +1188,10 @@ const saveFlow = (updateNodeParameter?, debug?) => {
       apiId: item.data.nodeId,
       serviceId: item.data.serviceId,
       stepId: item.id,
-      nodeId: item.data.nodeId,  // 添加nodeId字段
+      nodeId: item.data.nodeId, // 添加nodeId字段
       type: item.data.nodeId,
     };
-    
+
     // 对于Code节点，需要特殊处理parameters结构
     if (item.data.callId === 'Code') {
       // Code节点：将所有配置放在parameters中
@@ -1152,7 +1209,7 @@ const saveFlow = (updateNodeParameter?, debug?) => {
           timeoutSeconds: item.data.timeoutSeconds || 30,
           memoryLimitMb: item.data.memoryLimitMb || 128,
           cpuLimit: item.data.cpuLimit || 0.5,
-        }
+        },
       };
     } else {
       // 其他节点：使用原有逻辑
@@ -1174,10 +1231,12 @@ const saveFlow = (updateNodeParameter?, debug?) => {
     } else if (item.type === 'branch') {
       // 处理分支节点保存，确保包含ELSE分支
       const choices = item.data.parameters?.input_parameters?.choices || [];
-      
+
       // 检查是否已有默认分支
-      const hasDefaultBranch = choices.some(choice => choice.is_default === true);
-      
+      const hasDefaultBranch = choices.some(
+        (choice) => choice.is_default === true,
+      );
+
       // 如果没有默认分支，添加一个ELSE分支
       if (!hasDefaultBranch) {
         choices.push({
@@ -1185,30 +1244,32 @@ const saveFlow = (updateNodeParameter?, debug?) => {
           name: 'ELSE',
           is_default: true,
           conditions: [],
-          logic: 'and'
+          logic: 'and',
         });
       }
-      
+
       newItem = {
         ...newItem,
         callId: 'Choice',
         parameters: {
           input_parameters: { choices: choices },
-          output_parameters: item.data.parameters?.output_parameters || { 
+          output_parameters: item.data.parameters?.output_parameters || {
             branch_id: {
               type: 'string',
-              description: '选中的分支ID'
-            }
-          }
+              description: '选中的分支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);
-      
+      const hasDefaultBranch = choices.some(
+        (choice) => choice.is_default === true,
+      );
+
       // 如果没有默认分支，添加一个ELSE分支
       if (!hasDefaultBranch) {
         choices.push({
@@ -1216,21 +1277,21 @@ const saveFlow = (updateNodeParameter?, debug?) => {
           name: 'ELSE',
           is_default: true,
           conditions: [],
-          logic: 'and'
+          logic: 'and',
         });
       }
-      
+
       newItem = {
         ...newItem,
         callId: 'Choice',
         parameters: {
           input_parameters: { choices: choices },
-          output_parameters: item.data.parameters?.output_parameters || { 
+          output_parameters: item.data.parameters?.output_parameters || {
             branch_id: {
               type: 'string',
-              description: '选中的分支ID'
-            }
-          }
+              description: '选中的分支ID',
+            },
+          },
         },
       };
     }
@@ -1252,28 +1313,37 @@ const saveFlow = (updateNodeParameter?, debug?) => {
     updateNodes.forEach((item) => {
       if (item.stepId === updateNodeParameter.id) {
         if (item.type === 'Code') {
-          item.parameters.input_parameters = updateNodeParameter.parameters.input_parameters;
-          item.parameters.output_parameters = updateNodeParameter.parameters.output_parameters;
+          item.parameters.input_parameters =
+            updateNodeParameter.parameters.input_parameters;
+          item.parameters.output_parameters =
+            updateNodeParameter.parameters.output_parameters;
           item.parameters.code = updateNodeParameter.parameters.code;
           item.parameters.codeType = updateNodeParameter.parameters.codeType;
-          item.parameters.securityLevel = updateNodeParameter.parameters.securityLevel;
-          item.parameters.timeoutSeconds = updateNodeParameter.parameters.timeoutSeconds;
-          item.parameters.memoryLimitMb = updateNodeParameter.parameters.memoryLimitMb;
+          item.parameters.securityLevel =
+            updateNodeParameter.parameters.securityLevel;
+          item.parameters.timeoutSeconds =
+            updateNodeParameter.parameters.timeoutSeconds;
+          item.parameters.memoryLimitMb =
+            updateNodeParameter.parameters.memoryLimitMb;
           item.parameters.cpuLimit = updateNodeParameter.parameters.cpuLimit;
         } else if (item.callId === 'DirectReply') {
           // 确保parameters对象存在
           if (!item.parameters) {
             item.parameters = {};
           }
-          item.parameters.input_parameters = updateNodeParameter.parameters.input_parameters;
-          item.parameters.output_parameters = updateNodeParameter.parameters.output_parameters;
+          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;
+          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) {
@@ -1281,17 +1351,6 @@ const saveFlow = (updateNodeParameter?, debug?) => {
           if (!item.parameters) {
             item.parameters = {};
           }
-          // 当Node以yaml编辑器形式修改了参数
-          // 检查updateNodeParameter.inputStream是否包含新的数据结构
-          if (updateNodeParameter.inputStream.input_parameters !== undefined && 
-              updateNodeParameter.inputStream.output_parameters !== undefined) {
-            
-            item.parameters.input_parameters = updateNodeParameter.inputStream.input_parameters;
-            item.parameters.output_parameters = updateNodeParameter.inputStream.output_parameters;
-          } else {
-            // 旧格式：兼容处理
-            item.parameters.input_parameters = updateNodeParameter.inputStream;
-          }
         }
         item.name = updateNodeParameter.name;
         item.description = updateNodeParameter.description;
@@ -1353,12 +1412,17 @@ defineExpose({
       <el-tooltip
         placement="right"
         :content="
-          isCopilotAsideVisible ? '收起节点面板' : '展开节点面板 - 拖拽节点创建工作流'
+          isCopilotAsideVisible
+            ? '收起节点面板'
+            : '展开节点面板 - 拖拽节点创建工作流'
         "
       >
         <div
           class="node-panel-toggle"
-          :class="{ collapsed: !isCopilotAsideVisible, expanded: isCopilotAsideVisible }"
+          :class="{
+            collapsed: !isCopilotAsideVisible,
+            expanded: isCopilotAsideVisible,
+          }"
           @click="hanleAsideVisible"
         >
           <!-- 折叠状态：显示节点图标 + 箭头 -->
@@ -1366,7 +1430,7 @@ defineExpose({
             <div class="expand-arrow">›</div>
             <div class="drag-hint">拖拉拽新建节点</div>
           </div>
-          
+
           <!-- 展开状态：显示收起箭头 -->
           <div v-else class="expanded-content">
             <div class="collapse-arrow">‹</div>
@@ -1379,14 +1443,10 @@ defineExpose({
           <CustomLoading :loading="apiLoading"></CustomLoading>
           <!-- Tab切换 -->
           <div class="aside-tabs">
-            <div class="tab-item active">
-              节点
-            </div>
-            <div class="tab-item disabled">
-              应用
-            </div>
+            <div class="tab-item active">节点</div>
+            <div class="tab-item disabled">应用</div>
           </div>
-          
+
           <div class="aside-content">
             <NodeListPanel
               :api-service-list="apiServiceList"
@@ -1571,8 +1631,16 @@ defineExpose({
             :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
+              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>
@@ -1594,7 +1662,9 @@ defineExpose({
         <!-- 这里显示调试最终结果与耗时 -->
         <div class="debugStatus" v-if="debugStatus">
           <div class="icon" :class="`${debugStatus}Icon`"></div>
-          <div class="resultText">{{ $t(`flow.${StatusInfoTitle[debugStatus]}`) }}</div>
+          <div class="resultText">
+            {{ $t(`flow.${StatusInfoTitle[debugStatus]}`) }}
+          </div>
           <span
             class="time"
             :class="`${debugStatus}Bg`"
@@ -1630,6 +1700,58 @@ defineExpose({
       @createFlowId="getCreatedFlow"
     ></WorkFlowDialog>
   </div>
+
+  <!-- 自定义api调用抽屉 -->
+  <ApiCallDrawer
+    v-if="isEditApiCall"
+    :appId="route.query?.appId"
+    :flowId="flowObj?.flowId"
+    :yamlContent="yamlContent"
+    :nodeName="nodeName"
+    :nodeDesc="nodeDesc"
+    :nodeYamlId="nodeYamlId"
+    @closeDrawer="closeDrawer(NodeType.API)"
+    @saveNode="saveNode"
+  ></ApiCallDrawer>
+
+  <!-- 自定义大模型抽屉 -->
+  <LLMDrawer
+    v-if="isEditLLM"
+    :appId="route.query?.appId"
+    :flowId="flowObj?.flowId"
+    :yamlContent="yamlContent"
+    :nodeName="nodeName"
+    :nodeDesc="nodeDesc"
+    :nodeYamlId="nodeYamlId"
+    @closeDrawer="closeDrawer(NodeType.LLM)"
+    @saveNode="saveNode"
+  ></LLMDrawer>
+
+  <!-- 自定义知识库抽屉 -->
+  <RAGDrawer
+    v-if="isEditRAG"
+    :appId="route.query?.appId"
+    :flowId="flowObj?.flowId"
+    :yamlContent="yamlContent"
+    :nodeName="nodeName"
+    :nodeDesc="nodeDesc"
+    :nodeYamlId="nodeYamlId"
+    @closeDrawer="closeDrawer(NodeType.RAG)"
+    @saveNode="saveNode"
+  ></RAGDrawer>
+
+  <!-- 自定义知识库抽屉 -->
+  <MCPDrawer
+    v-if="isEditMCP"
+    :appId="route.query?.appId"
+    :flowId="flowObj?.flowId"
+    :yamlContent="yamlContent"
+    :nodeName="nodeName"
+    :nodeDesc="nodeDesc"
+    :nodeYamlId="nodeYamlId"
+    @closeDrawer="closeDrawer(NodeType.MCP)"
+    @saveNode="saveNode"
+  ></MCPDrawer>
   <!-- 节点yaml数据抽屉 -->
   <EditYamlDrawer
     v-if="isEditYaml"
@@ -1642,7 +1764,7 @@ defineExpose({
     :nodeDesc="nodeDesc"
     :nodeYamlId="nodeYamlId"
   ></EditYamlDrawer>
-  
+
   <!-- 开始节点表单编辑器 - 基于变量接口 -->
   <VariableBasedStartNodeDrawer
     v-if="isEditStartNode"
@@ -1658,7 +1780,7 @@ defineExpose({
     :nodeYamlId="nodeYamlId"
     :conversationId="conversationId"
   ></VariableBasedStartNodeDrawer>
-  
+
   <!-- 代码节点编辑器 - 基于变量逻辑 -->
   <CodeNodeDrawer
     :visible="isEditCodeNode"
@@ -1668,7 +1790,7 @@ defineExpose({
     @update:visible="closeCodeNodeDrawer"
     @saveNode="saveCodeNode"
   />
-  
+
   <!-- 直接回复节点编辑器 -->
   <DirectReplyDrawer
     :visible="isEditDirectReplyNode"
@@ -1678,7 +1800,7 @@ defineExpose({
     @update:visible="closeDirectReplyDrawer"
     @saveNode="saveDirectReplyNode"
   />
-  
+
   <!-- 条件分支节点编辑器 -->
   <ChoiceBranchDrawer
     :visible="isEditChoiceBranchNode"
@@ -1690,7 +1812,7 @@ defineExpose({
     @update:visible="closeChoiceBranchDrawer"
     @saveNode="saveChoiceBranchNode"
   />
-  
+
   <!-- 插入节点选择菜单 -->
   <InsertNodeMenu
     :visible="insertMenuData.visible"
@@ -1700,7 +1822,7 @@ defineExpose({
     @close="closeInsertNodeMenu"
     @select-node="executeInsertNode"
   />
-  
+
   <!-- 环境变量配置抽屉 -->
   <EnvironmentVariableDrawer
     v-if="isEditEnvironmentVariables"
@@ -1723,20 +1845,20 @@ defineExpose({
   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%);
@@ -1744,17 +1866,17 @@ defineExpose({
       }
     }
   }
-  
+
   &.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;
@@ -1763,7 +1885,7 @@ defineExpose({
     height: 100%;
     padding: 4px;
     position: relative;
-    
+
     .expand-arrow {
       color: white;
       font-size: 16px;
@@ -1774,7 +1896,7 @@ defineExpose({
       transform: translate(-50%, -50%);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    
+
     .drag-hint {
       color: white;
       font-size: 8px;
@@ -1792,13 +1914,13 @@ defineExpose({
       letter-spacing: 2px;
     }
   }
-  
+
   .expanded-content {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
-    
+
     .collapse-arrow {
       color: white;
       font-size: 18px;
@@ -1817,13 +1939,13 @@ defineExpose({
   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;
@@ -1832,23 +1954,23 @@ defineExpose({
       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;
@@ -1870,11 +1992,11 @@ defineExpose({
   margin-left: 12px;
   color: #486bf7;
   cursor: pointer;
-  
+
   &:hover {
     background: #dbeafe;
     border-color: #93c5fd;
-    color: #2563eb; 
+    color: #2563eb;
   }
   &:active {
     background: #bfdbfe;
@@ -1893,55 +2015,53 @@ defineExpose({
     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;
@@ -1950,7 +2070,7 @@ defineExpose({
     &:active {
       background: #1d4ed8;
     }
-    
+
     &.isEnvDis {
       background: #374151;
       border-color: #4b5563;
@@ -1958,4 +2078,4 @@ defineExpose({
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/createapp/components/workFlowConfig/ApiCallDrawer.vue b/src/views/createapp/components/workFlowConfig/ApiCallDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5a29edc9774a9262b29f533640d2230cc200007e
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/ApiCallDrawer.vue
@@ -0,0 +1,830 @@
+<template>
+  <div class="api-call-drawer">
+    <el-drawer
+      v-model="drawerVisible"
+      :show-close="false"
+      :modal="true"
+      modal-class="transparent-modal"
+      class="flowDrawer"
+      size="70%"
+      @close="closeDrawer"
+    >
+      <template #header>
+        <div class="drawer-header">
+          <div class="header-title">
+            <img class="node-icon" :src="getSrcIcon({ callId: 'API' })" />
+            <span>
+              {{ $t('flow.step_configuration') }} - {{ apiCallForm.name }}
+            </span>
+          </div>
+        </div>
+      </template>
+
+      <template #default>
+        <div class="drawer-body">
+          <el-collapse v-model="activeName" class="o-hpc-collapse">
+            <!-- 基本信息 -->
+            <el-collapse-item name="basic" class="basic-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('basic') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>基本信息</span>
+              </template>
+              <div class="basic-content">
+                <el-form
+                  :rules="apiCallFormRules"
+                  :model="apiCallForm"
+                  ref="APICallFormRef"
+                  label-position="left"
+                  label-width="120px"
+                >
+                  <el-form-item
+                    prop="name"
+                    :label="$t('semantic.component_name')"
+                    required
+                  >
+                    <el-input
+                      v-model="apiCallForm.name"
+                      type="text"
+                      placeholder="请输入节点名称"
+                      maxlength="50"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    prop="description"
+                    :label="$t('semantic.component_introduction')"
+                  >
+                    <el-input
+                      v-model="apiCallForm.description"
+                      type="textarea"
+                      placeholder="请输入节点描述"
+                      :rows="3"
+                    />
+                  </el-form-item>
+                  <el-form-item prop="url" label="URL" required>
+                    <el-input
+                      v-model="apiCallForm.url"
+                      clearable
+                      placeholder="请输入API地址"
+                    >
+                      <template #prepend>
+                        <el-select
+                          v-model="apiCallForm.method"
+                          placeholder="Select"
+                          style="width: 120px"
+                        >
+                          <el-option
+                            :label="option"
+                            :value="option"
+                            v-for="option in method_options"
+                            :key="option"
+                          />
+                        </el-select>
+                      </template>
+                    </el-input>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 请求头 -->
+            <el-collapse-item name="headers" class="headers-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('headers') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>请求头</span>
+              </template>
+              <div class="headers-content">
+                <div class="section">
+                  <table class="api-table">
+                    <tbody>
+                      <tr
+                        v-for="(row, index) in apiCallForm.headers"
+                        :key="index"
+                      >
+                        <td>
+                          <el-input
+                            class="key-value-input"
+                            type="text"
+                            v-model="row.key"
+                            placeholder="请输入键"
+                          >
+                            <template #prepend>
+                              {{ $t('semantic.key') }}
+                            </template>
+                          </el-input>
+                        </td>
+                        <td>
+                          <div class="value-cell">
+                            <el-input
+                              class="key-value-input"
+                              v-model="row.value"
+                              placeholder="请输入值"
+                              @focus="addRowIfLast(apiCallForm.headers, index)"
+                            >
+                              <template #prepend>
+                                {{ $t('semantic.value') }}
+                              </template>
+                            </el-input>
+                            <el-button
+                              v-if="apiCallForm.headers.length != 1"
+                              type="danger"
+                              size="small"
+                              @click="
+                                deleteRowIndex(apiCallForm.headers, index)
+                              "
+                              class="remove-btn"
+                            >
+                              <el-icon><Delete /></el-icon>
+                            </el-button>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </el-collapse-item>
+
+            <!-- 查询参数 -->
+            <el-collapse-item name="query" class="query-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('query') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>查询参数</span>
+              </template>
+              <div class="query-content">
+                <div class="section">
+                  <table class="api-table">
+                    <tbody>
+                      <tr
+                        v-for="(row, index) in apiCallForm.query"
+                        :key="index"
+                      >
+                        <td>
+                          <el-input
+                            type="text"
+                            class="key-value-input"
+                            v-model="row.key"
+                            placeholder="请输入键"
+                          >
+                            <template #prepend>
+                              {{ $t('semantic.key') }}
+                            </template>
+                          </el-input>
+                        </td>
+                        <td>
+                          <div class="value-cell">
+                            <el-input
+                              class="key-value-input"
+                              v-model="row.value"
+                              placeholder="请输入值"
+                              @focus="addRowIfLast(apiCallForm.query, index)"
+                            >
+                              <template #prepend>
+                                {{ $t('semantic.value') }}
+                              </template>
+                            </el-input>
+                            <el-button
+                              v-if="apiCallForm.query.length != 1"
+                              type="danger"
+                              size="small"
+                              @click="deleteRowIndex(apiCallForm.query, index)"
+                              class="remove-btn"
+                            >
+                              <el-icon><Delete /></el-icon>
+                            </el-button>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </el-collapse-item>
+
+            <!-- 请求体 -->
+            <el-collapse-item name="body" class="body-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('body') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>请求体</span>
+              </template>
+              <div class="body-content">
+                <div class="section">
+                  <el-radio-group v-model="apiCallForm.content_type">
+                    <el-radio
+                      v-for="(value, key) in ContentType"
+                      :key="key"
+                      :value="value"
+                    >
+                      {{ key.toLowerCase() }}
+                    </el-radio>
+                  </el-radio-group>
+                  <div class="body-box" style="margin-top: 16px">
+                    <div v-if="apiCallForm.content_type === ContentType.JSON">
+                      <VariableRichTextEditor
+                        ref="jsonEditorRef"
+                        v-model="apiCallForm.json"
+                        :flow-id="flowId"
+                        :current-step-id="nodeYamlId"
+                        placeholder="请输入JSON格式的请求体"
+                      />
+                    </div>
+
+                    <div
+                      v-if="
+                        apiCallForm.content_type === ContentType.FORM_URLENCODED
+                      "
+                    >
+                      <table class="api-table">
+                        <tbody>
+                          <tr
+                            v-for="(row, index) in apiCallForm.formData"
+                            :key="index"
+                          >
+                            <td>
+                              <el-input
+                                type="text"
+                                class="key-value-input"
+                                v-model="row.key"
+                                placeholder="请输入键"
+                              >
+                                <template #prepend>
+                                  {{ $t('semantic.key') }}
+                                </template>
+                              </el-input>
+                            </td>
+                            <td style="width: 80px">
+                              <el-select
+                                style="width: 80px"
+                                v-model="row.type"
+                                placeholder="Select"
+                              >
+                                <el-option
+                                  :label="option"
+                                  :value="option"
+                                  v-for="option in ['text', 'file']"
+                                  :key="option"
+                                />
+                              </el-select>
+                            </td>
+                            <td>
+                              <div class="value-cell">
+                                <el-input
+                                  v-model="row.value"
+                                  class="key-value-input"
+                                  placeholder="请输入值"
+                                  @focus="
+                                    addRowIfLast(apiCallForm.formData, index)
+                                  "
+                                >
+                                  <template #prepend>
+                                    {{ $t('semantic.value') }}
+                                  </template>
+                                </el-input>
+                                <el-button
+                                  v-if="apiCallForm.formData.length != 1"
+                                  type="danger"
+                                  size="small"
+                                  @click="
+                                    deleteRowIndex(apiCallForm.formData, index)
+                                  "
+                                  class="remove-btn"
+                                >
+                                  <el-icon><Delete /></el-icon>
+                                </el-button>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+
+                    <div
+                      v-if="
+                        apiCallForm.content_type ===
+                        ContentType.MULTIPART_FORM_DATA
+                      "
+                    >
+                      <table class="api-table">
+                        <tbody>
+                          <tr
+                            v-for="(
+                              row, index
+                            ) in apiCallForm.xWwwFormUrlencoded"
+                            :key="index"
+                          >
+                            <td>
+                              <el-input
+                                type="text"
+                                class="key-value-input"
+                                v-model="row.key"
+                                placeholder="请输入键"
+                              >
+                                <template #prepend>
+                                  {{ $t('semantic.key') }}
+                                </template>
+                              </el-input>
+                            </td>
+                            <td>
+                              <div class="value-cell">
+                                <el-input
+                                  v-model="row.value"
+                                  class="key-value-input"
+                                  placeholder="请输入值"
+                                  @focus="
+                                    addRowIfLast(
+                                      apiCallForm.xWwwFormUrlencoded,
+                                      index,
+                                    )
+                                  "
+                                >
+                                  <template #prepend>
+                                    {{ $t('semantic.value') }}
+                                  </template>
+                                </el-input>
+                                <el-button
+                                  v-if="
+                                    apiCallForm.xWwwFormUrlencoded.length != 1
+                                  "
+                                  type="danger"
+                                  size="small"
+                                  @click="
+                                    deleteRowIndex(
+                                      apiCallForm.xWwwFormUrlencoded,
+                                      index,
+                                    )
+                                  "
+                                  class="remove-btn"
+                                >
+                                  <el-icon><Delete /></el-icon>
+                                </el-button>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-collapse-item>
+
+            <!-- 输出变量 -->
+            <el-collapse-item name="output" class="output-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('output') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>输出变量</span>
+              </template>
+              <div class="output-content">
+                <YamlContentOutput :yamlOutPutContent="apiCallOutputInYaml" />
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="closeDrawer">{{ $t('main.close') }}</el-button>
+          <el-button
+            :disabled="infoDisabled"
+            type="primary"
+            @click="updateNodeYaml(APICallFormRef)"
+            :loading="saving"
+          >
+            {{ $t('semantic.submit') }}
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, computed, watch } from 'vue';
+import yaml from 'js-yaml';
+import { IconCaretRight } from '@computing/opendesign-icons';
+import { Delete } from '@element-plus/icons-vue';
+import YamlContentOutput from 'src/components/yamloutput/yamlContentOutput.jsx';
+import { ElMessage, FormInstance } from 'element-plus';
+import i18n from 'src/i18n';
+import VariableRichTextEditor from '@/components/VariableRichTextEditor.vue';
+import { NodeType, getSrcIcon } from '../types';
+
+const visible = ref(true);
+const infoDisabled = ref(true);
+const drawerVisible = ref(false);
+const saving = ref(false);
+type MethodOptions = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+const method_options = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'];
+const activeName = ref('output');
+
+interface ParamInterface {
+  key: string;
+  value: string;
+}
+
+interface FormDataParamInterface {
+  key: string;
+  type: string;
+  value: string;
+}
+
+const ContentType = {
+  JSON: 'application/json',
+  FORM_URLENCODED: 'application/x-www-form-urlencoded',
+  MULTIPART_FORM_DATA: 'multipart/form-data',
+};
+
+interface APICallForm {
+  name: string;
+  description: string;
+  url: string;
+  method: MethodOptions;
+  headers: ParamInterface[];
+  query: ParamInterface[];
+  content_type: string;
+  json: string;
+  formData: FormDataParamInterface[];
+  xWwwFormUrlencoded: ParamInterface[];
+  to_user: boolean;
+  timeout: number;
+  node_type: string;
+}
+
+const apiCallForm = reactive<APICallForm>({
+  name: '',
+  description: '',
+  url: '',
+  method: 'GET',
+  headers: [
+    {
+      key: '',
+      value: '',
+    },
+  ],
+  query: [
+    {
+      key: '',
+      value: '',
+    },
+  ], // TODO 有bug 当读取预制插件yaml的时候是{msg: ''} 当以api调用node传入的时候是{key: '', value: ''}
+  content_type: ContentType.JSON,
+  json: '',
+  formData: [
+    {
+      key: '',
+      type: 'text', // text or file
+      value: '',
+    },
+  ],
+  xWwwFormUrlencoded: [
+    {
+      key: '',
+      value: '',
+    },
+  ],
+  to_user: true,
+  timeout: 300,
+  node_type: NodeType.API,
+});
+
+const apiCallFormRules = ref({
+  name: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  description: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  url: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+    {
+      pattern: /^(https?:\/\/)/,
+      message: 'URL必须以 http:// 或 https:// 开头',
+      trigger: 'blur',
+    },
+  ],
+});
+
+const apiCallOutputInYaml = ref('');
+const jsonEditorRef = ref();
+
+const emits = defineEmits(['closeDrawer', 'saveNode']);
+const props = defineProps<{
+  yamlContent: any;
+  nodeName: string;
+  nodeDesc: string;
+  appId: any;
+  flowId: any;
+  nodeYamlId: any;
+}>();
+
+onMounted(() => {
+  let input_content = props.yamlContent.input_parameters;
+  console.log(input_content);
+  Object.assign(apiCallForm, {
+    ...apiCallForm,
+    name: props.nodeName,
+    description: props.nodeDesc,
+    url: input_content.url,
+    contentType: input_content.content_type
+      ? input_content.content_type
+      : 'json',
+    headers:
+      input_content.headers && Object.keys(input_content.headers).length === 0
+        ? apiCallForm.headers
+        : input_content.headers,
+    query:
+      Object.keys(input_content.query).length === 0
+        ? apiCallForm.query
+        : input_content.query,
+    json:
+      input_content.content_type === ContentType.JSON ? input_content.body : '',
+    formData:
+      input_content.content_type === ContentType.FORM_URLENCODED &&
+      Object.keys(input_content.body).length !== 0
+        ? input_content.body
+        : apiCallForm.formData,
+    xWwwFormUrlencoded:
+      input_content.content_type === ContentType.MULTIPART_FORM_DATA &&
+      Object.keys(input_content.body).length !== 0
+        ? input_content.body
+        : apiCallForm.formData,
+    to_user: input_content.to_user,
+    timeout: input_content.timeout,
+    method: input_content.method
+      ? input_content.method.toUpperCase()
+      : apiCallForm.method,
+  });
+  apiCallOutputInYaml.value = props.yamlContent.output_parameters;
+  if (apiCallForm.name && apiCallForm.description) {
+    infoDisabled.value = false;
+  } else {
+    infoDisabled.value = true;
+  }
+});
+
+const APICallFormRef = ref<FormInstance>();
+
+const addRowIfLast = (rows, index) => {
+  if (index === rows.length - 1) {
+    if (rows[index].type) {
+      rows.push({
+        key: '',
+        type: 'text',
+        value: '',
+      });
+    } else {
+      rows.push({
+        key: '',
+        value: '',
+      });
+    }
+  }
+};
+const deleteRowIndex = (rows, index) => {
+  if (rows.length > 1) {
+    rows.splice(index, 1);
+  }
+};
+
+const closeDrawer = () => {
+  drawerVisible.value = false;
+};
+
+// 监听器
+watch(
+  () => visible.value,
+  (newVal) => {
+    drawerVisible.value = newVal;
+  },
+  { immediate: true },
+);
+
+watch(drawerVisible, (newVal) => {
+  if (!newVal) {
+    emits('closeDrawer');
+  }
+});
+
+// 完成yaml更新
+const updateNodeYaml = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+
+  console.log(apiCallForm);
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      let body;
+      try {
+        // 根据不同的content-type组装body
+        if (apiCallForm.content_type === ContentType.FORM_URLENCODED) {
+          body = apiCallForm.formData.reduce(
+            // 此处reduce逻辑都是过滤存在空的键值(类型)对
+            (acc: FormDataParamInterface[], { key, type, value }) => {
+              if (key && type && value) {
+                acc.push({ key, type, value });
+              }
+              return acc;
+            },
+            [] as FormDataParamInterface[],
+          );
+        } else if (apiCallForm.content_type === ContentType.JSON) {
+          body = apiCallForm.json;
+        } else if (
+          apiCallForm.content_type === ContentType.MULTIPART_FORM_DATA
+        ) {
+          body = apiCallForm.xWwwFormUrlencoded.reduce(
+            (acc: ParamInterface[], { key, value }) => {
+              if (key && value) {
+                acc.push({ key, value });
+              }
+              return acc;
+            },
+            [] as ParamInterface[],
+          );
+        } else {
+          body = '';
+        }
+        let transResult = {
+          ...apiCallForm,
+          method: apiCallForm.method.toLowerCase(),
+          timeout: 300, // 这个后面加上按钮允许配置
+          body: body,
+          query: apiCallForm.query.filter((item) => {
+            return item.key !== '' && item.value !== '';
+          }),
+          headers: apiCallForm.headers.filter((item) => {
+            return item.key !== '' && item.value !== '';
+          }),
+          node_type: NodeType.API,
+        };
+        let transResultToYaml = yaml.load(JSON.stringify(transResult));
+        // 调用接口并更新--根据id包含更新后的yamlCode, name, desc
+        emits(
+          'saveNode',
+          transResultToYaml,
+          props.nodeYamlId,
+          apiCallForm.name,
+          apiCallForm.description,
+        );
+        closeDrawer();
+      } catch (error) {
+        ElMessage.error(i18n.global.t('semantic.checkFormat'));
+      }
+    } else {
+      console.log('submit failed!', fields);
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.api-call-drawer {
+  :deep(.el-drawer) {
+    border-radius: 8px 0 0 8px;
+  }
+
+  :deep(.el-drawer__header) {
+    padding: 24px 24px 16px !important;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  :deep(.el-drawer__body) {
+    padding: 0;
+  }
+
+  :deep(.el-drawer__footer) {
+    padding: 16px 24px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+
+  .drawer-header {
+    .header-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+
+      .node-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .drawer-body {
+    height: 100%;
+    overflow-y: auto;
+
+    :deep(.el-collapse-item__header) {
+      padding: 16px 24px;
+      font-weight: 500;
+      background: var(--el-fill-color-extra-light);
+      border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    :deep(.el-collapse-item__wrap) {
+      border-bottom: none;
+    }
+  }
+
+  .basic-content,
+  .headers-content,
+  .query-content,
+  .body-content,
+  .output-content {
+    :deep(.el-form-item) {
+      margin-bottom: 16px;
+    }
+  }
+
+  .headers-content,
+  .query-content,
+  .body-content {
+    .section {
+      margin: 15px 0;
+
+      .api-table {
+        width: 100%;
+        border-collapse: collapse;
+
+        th,
+        td {
+          padding: 8px;
+          text-align: left;
+        }
+
+        .key-value-input {
+          width: 100%;
+        }
+
+        .value-cell {
+          display: flex;
+          gap: 12px;
+          align-items: center;
+
+          .remove-btn {
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .body-content {
+    .el-radio-group {
+      margin-bottom: 16px;
+    }
+  }
+
+  .drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+}
+
+// 透明遮罩样式
+:deep(.transparent-modal) {
+  background-color: transparent !important;
+}
+</style>
diff --git a/src/views/createapp/components/workFlowConfig/LLMDrawer.vue b/src/views/createapp/components/workFlowConfig/LLMDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7391aa56771cbddc5bb066ac6908a203d7ab72b4
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/LLMDrawer.vue
@@ -0,0 +1,581 @@
+<template>
+  <div class="llm-drawer">
+    <el-drawer
+      v-model="drawerVisible"
+      :show-close="false"
+      :modal="true"
+      modal-class="transparent-modal"
+      class="flowDrawer"
+      size="70%"
+      @close="closeDrawer"
+    >
+      <template #header>
+        <div class="drawer-header">
+          <div class="header-title">
+            <img class="node-icon" :src="getSrcIcon({ callId: 'LLM' })" />
+            <span>
+              {{ $t('flow.step_configuration') }} - {{ llmForm.name }}
+            </span>
+          </div>
+        </div>
+      </template>
+
+      <template #default>
+        <div class="drawer-body">
+          <el-collapse v-model="activeName" class="o-hpc-collapse">
+            <!-- 基本信息 -->
+            <el-collapse-item name="basic" class="basic-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('basic') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>基本信息</span>
+              </template>
+              <div class="basic-content">
+                <el-form
+                  :rules="llmFormRules"
+                  :model="llmForm"
+                  ref="llmFormRef"
+                  label-position="left"
+                  label-width="120px"
+                >
+                  <el-form-item
+                    prop="name"
+                    :label="$t('semantic.component_name')"
+                    required
+                  >
+                    <el-input
+                      v-model="llmForm.name"
+                      type="text"
+                      placeholder="请输入节点名称"
+                      maxlength="50"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    prop="description"
+                    :label="$t('semantic.component_introduction')"
+                  >
+                    <el-input
+                      v-model="llmForm.description"
+                      type="textarea"
+                      placeholder="请输入节点描述"
+                      :rows="3"
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    prop="selectedModel"
+                    :label="$t('semantic.selectedModel')"
+                    required
+                  >
+                    <el-select
+                      v-model="llmForm.selectedModel"
+                      placeholder="请选择模型"
+                      style="width: 100%"
+                    >
+                      <template #label="{ value }">
+                        <div style="display: flex; align-items: center">
+                          <img
+                            v-if="
+                              llmForm.selectedModel.modelName ===
+                              'default-model'
+                            "
+                            style="width: 16px"
+                            src="@/assets/images/logo-euler-copilot.png"
+                            alt=""
+                          />
+                          <img
+                            v-else
+                            style="width: 16px"
+                            :src="value.icon"
+                            alt=""
+                          />
+                          <span
+                            style="
+                              width: 100px;
+                              overflow: hidden;
+                              line-height: 32px;
+                              padding-left: 8px;
+                            "
+                          >
+                            {{ value.modelName }}
+                          </span>
+                        </div>
+                      </template>
+                      <el-option
+                        :label="option.modelName"
+                        :value="option"
+                        v-for="option in llmOptions"
+                        :key="option.llmId"
+                      >
+                        <div style="display: flex; align-items: center">
+                          <img
+                            v-if="option.modelName === 'default-model'"
+                            style="width: 16px"
+                            src="@/assets/images/logo-euler-copilot.png"
+                            alt=""
+                          />
+                          <img
+                            v-else
+                            style="width: 16px"
+                            :src="option.icon"
+                            alt=""
+                          />
+                          <span
+                            style="
+                              width: 100px;
+                              overflow: hidden;
+                              line-height: 32px;
+                              padding-left: 8px;
+                            "
+                          >
+                            {{ option.modelName }}
+                          </span>
+                        </div>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 提示词配置 -->
+            <el-collapse-item name="prompt" class="prompt-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('prompt') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>提示词配置</span>
+              </template>
+              <div class="prompt-content">
+                <el-form
+                  :model="llmForm"
+                  label-position="left"
+                  label-width="120px"
+                >
+                  <el-form-item label="系统提示词">
+                    <VariableRichTextEditor
+                      v-model="llmForm.system_prompt"
+                      :current-step-id="nodeYamlId"
+                      :flow-id="flowId"
+                      placeholder="请输入系统提示词"
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="用户提示词">
+                    <VariableRichTextEditor
+                      v-model="llmForm.user_prompt"
+                      :flow-id="flowId"
+                      :current-step-id="nodeYamlId"
+                      placeholder="请输入用户提示词"
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="问题" required>
+                    <VariableRichTextEditor
+                      v-model="llmForm.user_question"
+                      :flow-id="flowId"
+                      :current-step-id="nodeYamlId"
+                      placeholder="请输入问题"
+                    />
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 参数配置 -->
+            <el-collapse-item name="parameters" class="parameters-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('parameters') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>参数配置</span>
+              </template>
+              <div class="parameters-content">
+                <el-form
+                  :model="llmForm"
+                  label-position="left"
+                  label-width="120px"
+                >
+                  <el-form-item label="温度">
+                    <div style="display: flex; align-items: center; gap: 12px">
+                      <el-switch v-model="llmForm.enable_temperature" />
+                      <el-slider
+                        :disabled="!llmForm.enable_temperature"
+                        v-model="llmForm.temperature"
+                        :max="1"
+                        :min="0"
+                        :step="0.1"
+                        show-input
+                        style="flex: 1"
+                      />
+                    </div>
+                  </el-form-item>
+
+                  <el-form-item label="上下文">
+                    <div style="display: flex; align-items: center; gap: 12px">
+                      <el-switch v-model="llmForm.enable_context" />
+                      <el-slider
+                        :disabled="!llmForm.enable_context"
+                        v-model="llmForm.step_history_size"
+                        :max="10"
+                        :min="1"
+                        :step="1"
+                        show-input
+                        style="flex: 1"
+                      />
+                    </div>
+                  </el-form-item>
+
+                  <el-form-item label="频率惩罚">
+                    <div style="display: flex; align-items: center; gap: 12px">
+                      <el-switch v-model="llmForm.enable_frequency_penalty" />
+                      <el-slider
+                        :disabled="!llmForm.enable_frequency_penalty"
+                        v-model="llmForm.frequency_penalty"
+                        :max="1"
+                        :min="0"
+                        :step="0.1"
+                        show-input
+                        style="flex: 1"
+                      />
+                    </div>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 输出变量 -->
+            <el-collapse-item name="output" class="output-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('output') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>输出变量</span>
+              </template>
+              <div class="output-content">
+                <YamlContentOutput :yamlOutPutContent="LLMOutputInYaml" />
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="closeDrawer">{{ $t('main.close') }}</el-button>
+          <el-button
+            :disabled="infoDisabled"
+            type="primary"
+            @click="updateNodeYaml(llmFormRef)"
+            :loading="saving"
+          >
+            {{ $t('semantic.submit') }}
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, watch } from 'vue';
+import yaml from 'js-yaml';
+import { IconCaretRight } from '@computing/opendesign-icons';
+import YamlContentOutput from 'src/components/yamloutput/yamlContentOutput.jsx';
+import { ElMessage, FormInstance } from 'element-plus';
+import i18n from 'src/i18n';
+import { api } from 'src/apis';
+import VariableRichTextEditor from '@/components/VariableRichTextEditor.vue';
+import { NodeType, getSrcIcon } from '../types';
+
+const visible = ref(true);
+const infoDisabled = ref(true);
+const drawerVisible = ref(false);
+const saving = ref(false);
+const activeName = ref(['prompt', 'basic', 'output']);
+
+interface LLMForm {
+  name: string;
+  description: string;
+  to_user: boolean;
+  enable_context: boolean;
+  step_history_size: number;
+  system_prompt: string;
+  temperature: number;
+  user_prompt: string;
+  enable_temperature: boolean;
+  enable_frequency_penalty: boolean;
+  frequency_penalty: number;
+  llmId: string;
+  user_question: string;
+  node_type: string;
+  selectedModel: {
+    icon: string;
+    modelName: string;
+    llmId: string;
+  };
+}
+
+const llmForm = reactive<LLMForm>({
+  name: '',
+  description: '',
+  to_user: true,
+  enable_context: false,
+  step_history_size: 3,
+  system_prompt: '',
+  temperature: 0,
+  user_prompt: '',
+  enable_temperature: false,
+  enable_frequency_penalty: false,
+  frequency_penalty: 0,
+  llmId: 'empty',
+  user_question: '',
+  node_type: NodeType.LLM,
+  selectedModel: {
+    icon: '@/assets/images/logo-euler-copilot.png',
+    modelName: 'default-model',
+    llmId: 'empty',
+  },
+});
+
+const llmFormRef = ref<FormInstance>();
+
+const llmFormRules = ref({
+  name: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  description: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  selectedModel: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  user_question: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+});
+
+// 获取可用LLM
+const getProviderLLM = async () => {
+  const [_, res] = await api.getLLMList();
+  if (!_ && res && res.code === 200) {
+    if (res.result.length === 0) {
+      ElMessage.error(i18n.global.t('feedback.no_model_error'));
+    }
+    llmOptions.value.push(...res.result);
+    if (llmForm.llmId !== 'empty') {
+      llmOptions.value.forEach((item) => {
+        llmForm.selectedModel =
+          item.llmId === llmForm.llmId ? item : llmForm.selectedModel;
+      });
+    }
+  } else {
+    ElMessage.error(i18n.global.t('feedback.network_error'));
+  }
+};
+
+// 设计默认model是为了应对需要导出或平台配置改动导致模型找不到id的情况
+const llmOptions = ref([
+  {
+    icon: '@/assets/images/logo-euler-copilot.png',
+    modelName: 'default-model',
+    llmId: 'empty',
+  },
+]);
+
+// TODO app.outputContent 还没有对接 在预定义的插件那里会有outputContent
+const LLMOutputInYaml = ref('');
+const emits = defineEmits(['closeDrawer', 'saveNode']);
+const props = defineProps<{
+  yamlContent: any;
+  nodeName: string;
+  nodeDesc: string;
+  appId: any;
+  flowId: any;
+  nodeYamlId: any;
+}>();
+
+onMounted(() => {
+  let input_content = props.yamlContent.input_parameters;
+  Object.assign(llmForm, {
+    ...input_content,
+    name: props.nodeName,
+    description: props.nodeDesc,
+    enable_frequency_penalty: input_content.frequency_penalty !== 0,
+    enable_temperature: input_content.temperature !== 0.7,
+  });
+
+  if (llmForm.name && llmForm.description) {
+    infoDisabled.value = false;
+  } else {
+    infoDisabled.value = true;
+  }
+
+  LLMOutputInYaml.value = props.yamlContent.output_parameters;
+  getProviderLLM();
+});
+
+const closeDrawer = () => {
+  drawerVisible.value = false;
+};
+
+// 监听器
+watch(
+  () => visible.value,
+  (newVal) => {
+    drawerVisible.value = newVal;
+  },
+  { immediate: true },
+);
+
+watch(drawerVisible, (newVal) => {
+  if (!newVal) {
+    emits('closeDrawer');
+  }
+});
+
+// 完成yaml更新
+const updateNodeYaml = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  console.log(llmForm);
+
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      try {
+        let transResult = {
+          ...llmForm,
+          step_history_size: llmForm.enable_context
+            ? llmForm.step_history_size
+            : 0,
+          temperature: llmForm.enable_temperature ? llmForm.temperature : 0.7,
+          frequency_penalty: llmForm.enable_frequency_penalty
+            ? llmForm.frequency_penalty
+            : 0,
+          llmId: llmForm.selectedModel.llmId,
+          node_type: NodeType.LLM,
+        };
+        let transResultToYaml = yaml.load(JSON.stringify(transResult));
+
+        console.log(transResultToYaml);
+        // 调用接口并更新--根据id包含更新后的yamlCode, name, desc
+        emits(
+          'saveNode',
+          transResultToYaml,
+          props.nodeYamlId,
+          llmForm.name,
+          llmForm.description,
+        );
+        closeDrawer();
+      } catch {
+        ElMessage.error(i18n.global.t('semantic.checkFormat'));
+      }
+    } else {
+      console.log('submit failed!', fields);
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.llm-drawer {
+  :deep(.el-drawer) {
+    border-radius: 8px 0 0 8px;
+  }
+
+  :deep(.el-drawer__header) {
+    padding: 24px 24px 16px !important;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  :deep(.el-drawer__body) {
+    padding: 0;
+  }
+
+  :deep(.el-drawer__footer) {
+    padding: 16px 24px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+
+  .drawer-header {
+    .header-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+
+      .node-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .drawer-body {
+    height: 100%;
+    overflow-y: auto;
+
+    :deep(.el-collapse-item__header) {
+      padding: 16px 24px;
+      font-weight: 500;
+      background: var(--el-fill-color-extra-light);
+      border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    :deep(.el-collapse-item__wrap) {
+      border-bottom: none;
+    }
+  }
+
+  .basic-content,
+  .prompt-content,
+  .parameters-content,
+  .output-content {
+    :deep(.el-form-item) {
+      margin-bottom: 16px;
+    }
+  }
+
+  .drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+}
+
+// 透明遮罩样式
+:deep(.transparent-modal) {
+  background-color: transparent !important;
+}
+</style>
diff --git a/src/views/createapp/components/workFlowConfig/MCPDrawer.vue b/src/views/createapp/components/workFlowConfig/MCPDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bab042347331de0817898614d2419978daad42a1
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/MCPDrawer.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="mcp-drawer">
+    <el-drawer
+      v-model="drawerVisible"
+      :show-close="false"
+      :modal="true"
+      modal-class="transparent-modal"
+      class="flowDrawer"
+      size="70%"
+      @close="closeDrawer"
+    >
+      <template #header>
+        <div class="drawer-header">
+          <div class="header-title">
+            <img class="node-icon" :src="getSrcIcon({ callId: 'MCP' })" />
+            <span>
+              {{ $t('flow.step_configuration') }} - {{ mcpForm.name }}
+            </span>
+          </div>
+        </div>
+      </template>
+
+      <template #default>
+        <div class="drawer-body">
+          <el-collapse v-model="activeName" class="o-hpc-collapse">
+            <!-- 基本信息 -->
+            <el-collapse-item name="basic" class="basic-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('basic') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>基本信息</span>
+              </template>
+              <div class="basic-content">
+                <el-form
+                  :rules="mcpFormRules"
+                  :model="mcpForm"
+                  ref="mcpFormRef"
+                  label-position="left"
+                  label-width="120px"
+                >
+                  <el-form-item
+                    prop="name"
+                    :label="$t('semantic.component_name')"
+                    required
+                  >
+                    <el-input
+                      v-model="mcpForm.name"
+                      type="text"
+                      placeholder="请输入节点名称"
+                      maxlength="50"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    prop="description"
+                    :label="$t('semantic.component_introduction')"
+                  >
+                    <el-input
+                      v-model="mcpForm.description"
+                      type="textarea"
+                      placeholder="请输入节点描述"
+                      :rows="3"
+                    />
+                  </el-form-item>
+                  <el-form-item prop="mcp_list" label="MCP工具" required>
+                    <el-select
+                      v-model="mcpForm.mcp_list"
+                      multiple
+                      placeholder="请选择MCP工具"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in mcpListOption"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item prop="max_steps" label="最大步骤数">
+                    <el-slider
+                      v-model="mcpForm.max_steps"
+                      :max="20"
+                      :min="1"
+                      :step="1"
+                      show-input
+                    />
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 输出变量 -->
+            <el-collapse-item name="output" class="output-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('output') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>输出变量</span>
+              </template>
+              <div class="output-content">
+                <YamlContentOutput :yamlOutPutContent="mcpOutputInYaml" />
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="closeDrawer">{{ $t('main.close') }}</el-button>
+          <el-button
+            :disabled="infoDisabled"
+            type="primary"
+            @click="updateNodeYaml(mcpFormRef)"
+            :loading="saving"
+          >
+            {{ $t('semantic.submit') }}
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted, ref, watch } from 'vue';
+import yaml from 'js-yaml';
+import { IconCaretRight } from '@computing/opendesign-icons';
+import YamlContentOutput from 'src/components/yamloutput/yamlContentOutput.jsx';
+import { ElMessage, FormInstance } from 'element-plus';
+import i18n from 'src/i18n';
+import { api } from '@/apis';
+import { NodeType, getSrcIcon } from '../types';
+
+const visible = ref(true);
+const infoDisabled = ref(true);
+const drawerVisible = ref(false);
+const saving = ref(false);
+const activeName = ref('output');
+const mcpListOption = ref<MCPListItem[]>([]);
+
+const mcpFormRules = ref({
+  name: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  description: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  mcp_list: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  max_steps: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+});
+
+interface MCPForm {
+  name: string; // node name
+  description: string; // node description
+  node_type: string; // node type
+  mcp_list: string[]; // 修改为字符串数组
+  max_steps: number;
+}
+
+interface MCPListItem {
+  value: string;
+  label: string;
+}
+
+const mcpForm = reactive<MCPForm>({
+  name: '',
+  description: '',
+  node_type: NodeType.MCP,
+  mcp_list: [],
+  max_steps: 5,
+});
+
+const mcpFormRef = ref<FormInstance>();
+const mcpOutputInYaml = ref('');
+
+const emits = defineEmits(['closeDrawer', 'saveNode']);
+const props = defineProps<{
+  yamlContent: any;
+  nodeName: string;
+  nodeDesc: string;
+  appId: any;
+  flowId: any;
+  nodeYamlId: any;
+}>();
+
+/**
+ * 查询MCP服务
+ */
+async function queryMcpList() {
+  try {
+    const [, res] = await api.getMcpList({
+      keyword: '',
+    });
+    // 清空之前的选项
+    mcpListOption.value = [];
+    if (res?.result?.services) {
+      res?.result.services.forEach((item) => {
+        mcpListOption.value.push({
+          value: item.mcpserviceId,
+          label: item.name,
+        });
+      });
+    }
+  } catch (error) {
+    console.error('查询MCP服务失败:', error);
+    // 清空选项以避免显示旧数据
+    mcpListOption.value = [];
+    ElMessage.error('查询MCP服务失败');
+  }
+}
+
+onMounted(() => {
+  let input_content = props.yamlContent.input_parameters;
+  queryMcpList();
+
+  Object.assign(mcpForm, {
+    ...input_content,
+    name: props.nodeName,
+    description: props.nodeDesc,
+    mcp_list: Array.isArray(input_content.mcp_list)
+      ? input_content.mcp_list.filter((item) => item)
+      : [],
+  });
+
+  mcpOutputInYaml.value = props.yamlContent.output_parameters;
+  if (mcpForm.name && mcpForm.description) {
+    infoDisabled.value = false;
+  } else {
+    infoDisabled.value = true;
+  }
+});
+
+const closeDrawer = () => {
+  drawerVisible.value = false;
+};
+
+// 监听器
+watch(
+  () => visible.value,
+  (newVal) => {
+    drawerVisible.value = newVal;
+  },
+  { immediate: true },
+);
+
+watch(drawerVisible, (newVal) => {
+  if (!newVal) {
+    emits('closeDrawer');
+  }
+});
+
+// 完成yaml更新
+const updateNodeYaml = async (formEl: FormInstance | undefined) => {
+  // 现在把每个数值单独提取出来是为了更好的可拓展性
+
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const transResult = {
+        ...mcpForm,
+      };
+      try {
+        let transResultToYaml = yaml.load(JSON.stringify(transResult));
+        // 调用接口并更新--根据id包含更新后的yamlCode, name, desc
+        emits(
+          'saveNode',
+          transResultToYaml,
+          props.nodeYamlId,
+          transResult.name,
+          transResult.description,
+        );
+        closeDrawer();
+      } catch {
+        ElMessage.error(i18n.global.t('semantic.checkFormat'));
+      }
+      console.log('submit!');
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.mcp-drawer {
+  :deep(.el-drawer) {
+    border-radius: 8px 0 0 8px;
+  }
+
+  :deep(.el-drawer__header) {
+    padding: 24px 24px 16px !important;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  :deep(.el-drawer__body) {
+    padding: 0;
+  }
+
+  :deep(.el-drawer__footer) {
+    padding: 16px 24px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+
+  .drawer-header {
+    .header-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+
+      .node-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .drawer-body {
+    height: 100%;
+    overflow-y: auto;
+
+    :deep(.el-collapse-item__header) {
+      padding: 16px 24px;
+      font-weight: 500;
+      background: var(--el-fill-color-extra-light);
+      border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    :deep(.el-collapse-item__wrap) {
+      border-bottom: none;
+    }
+  }
+
+  .basic-content,
+  .output-content {
+    :deep(.el-form-item) {
+      margin-bottom: 16px;
+    }
+  }
+
+  .drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+}
+
+// 透明遮罩样式
+:deep(.transparent-modal) {
+  background-color: transparent !important;
+}
+</style>
diff --git a/src/views/createapp/components/workFlowConfig/RAGDrawer.vue b/src/views/createapp/components/workFlowConfig/RAGDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d30a9548e2e15cbcdb2f52bd5a6fefa3b653051b
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/RAGDrawer.vue
@@ -0,0 +1,538 @@
+<template>
+  <div class="rag-drawer">
+    <el-drawer
+      v-model="drawerVisible"
+      :show-close="false"
+      :modal="true"
+      modal-class="transparent-modal"
+      class="flowDrawer"
+      size="70%"
+      @close="closeDrawer"
+    >
+      <template #header>
+        <div class="drawer-header">
+          <div class="header-title">
+            <img class="node-icon" :src="getSrcIcon({ callId: 'RAG' })" />
+            <span>
+              {{ $t('flow.step_configuration') }} - {{ ragForm.name }}
+            </span>
+          </div>
+        </div>
+      </template>
+
+      <template #default>
+        <div class="drawer-body">
+          <el-collapse v-model="activeName" class="o-hpc-collapse">
+            <!-- 基本信息 -->
+            <el-collapse-item name="basic" class="basic-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('basic') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>基本信息</span>
+              </template>
+              <div class="basic-content">
+                <el-form
+                  :rules="ragFormRules"
+                  :model="ragForm"
+                  ref="ragFormRef"
+                  label-position="left"
+                  label-width="120px"
+                >
+                  <el-form-item
+                    prop="name"
+                    :label="$t('semantic.component_name')"
+                    required
+                  >
+                    <el-input
+                      v-model="ragForm.name"
+                      type="text"
+                      placeholder="请输入节点名称"
+                      maxlength="50"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    prop="description"
+                    :label="$t('semantic.component_introduction')"
+                  >
+                    <el-input
+                      v-model="ragForm.description"
+                      type="textarea"
+                      placeholder="请输入节点描述"
+                      :rows="3"
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    prop="query_variables"
+                    :label="$t('semantic.rag_query_variables')"
+                    required
+                  >
+                    <VariableRichTextEditor
+                      v-model="ragForm.query_variables"
+                      :current-step-id="nodeYamlId"
+                      title-placeholder="问题检索"
+                      :flow-id="flowId"
+                      placeholder="请输入要查询知识库的问题"
+                    />
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 知识库配置 -->
+            <el-collapse-item name="knowledge" class="knowledge-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('knowledge') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>知识库配置</span>
+              </template>
+              <div class="knowledge-content">
+                <el-form
+                  :model="ragForm"
+                  label-position="left"
+                  label-width="120px"
+                >
+                  <el-form-item prop="document_ids" label="知识库" required>
+                    <el-select
+                      v-model="ragForm.document_ids"
+                      multiple
+                      placeholder="请选择知识库"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in knowledgeBaseListOption"
+                        :key="item.kb_id"
+                        :label="item.kb_name + '(' + item.team_name + ')'"
+                        :value="item.kb_id"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item prop="search_method" label="检索方法" required>
+                    <el-select
+                      v-model="ragForm.search_method"
+                      placeholder="请选择检索方法"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="item in searchMethodOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item prop="top_k" label="top k">
+                    <el-slider
+                      v-model="ragForm.top_k"
+                      :max="10"
+                      :min="1"
+                      :step="1"
+                      show-input
+                    />
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 高级选项 -->
+            <el-collapse-item name="advanced" class="advanced-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('advanced') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>高级选项</span>
+              </template>
+              <div class="advanced-content">
+                <el-form
+                  :model="ragForm"
+                  label-position="left"
+                  label-width="160px"
+                >
+                  <el-form-item prop="is_rerank" label="是否重排">
+                    <el-switch v-model="ragForm.is_rerank" />
+                  </el-form-item>
+                  <el-form-item prop="is_compress" label="是否压缩">
+                    <el-switch v-model="ragForm.is_compress" />
+                  </el-form-item>
+                  <el-form-item
+                    prop="is_classify_by_doc"
+                    label="是否按文档分类"
+                  >
+                    <el-switch v-model="ragForm.is_classify_by_doc" />
+                  </el-form-item>
+                  <el-form-item
+                    prop="is_related_surrounding"
+                    label="是否关联上下文"
+                  >
+                    <el-switch v-model="ragForm.is_related_surrounding" />
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <!-- 输出变量 -->
+            <el-collapse-item name="output" class="output-panel">
+              <template #title>
+                <el-icon
+                  class="el-collapse-item__arrow"
+                  :class="{ 'is-active': activeName.includes('output') }"
+                >
+                  <IconCaretRight />
+                </el-icon>
+                <span>输出变量</span>
+              </template>
+              <div class="output-content">
+                <YamlContentOutput :yamlOutPutContent="ragOutputInYaml" />
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="closeDrawer">{{ $t('main.close') }}</el-button>
+          <el-button
+            :disabled="infoDisabled"
+            type="primary"
+            @click="updateNodeYaml(ragFormRef)"
+            :loading="saving"
+          >
+            {{ $t('semantic.submit') }}
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 获取session访问rag
+import { api } from 'src/apis';
+import { useHistorySessionStore } from 'src/store';
+import { storeToRefs } from 'pinia';
+const { currentSelectedSession } = storeToRefs(useHistorySessionStore());
+
+import { reactive, onMounted, ref, watch } from 'vue';
+import yaml from 'js-yaml';
+import { IconCaretRight } from '@computing/opendesign-icons';
+import YamlContentOutput from 'src/components/yamloutput/yamlContentOutput.jsx';
+import { ElMessage, FormInstance } from 'element-plus';
+import i18n from 'src/i18n';
+import VariableRichTextEditor from '@/components/VariableRichTextEditor.vue';
+
+import { NodeType, getSrcIcon } from '../types';
+
+const visible = ref(true);
+const infoDisabled = ref(true);
+const drawerVisible = ref(false);
+const saving = ref(false);
+const activeName = ref('output');
+
+const ragFormRules = ref({
+  name: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  description: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  query_variables: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  document_ids: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+  search_method: [
+    {
+      required: true,
+      message: i18n.global.t('semantic.pleaseEnter'),
+      trigger: 'blur',
+    },
+  ],
+});
+
+interface RAGForm {
+  name: string; // node name
+  description: string; // node description
+  node_type: string; // node type
+  top_k: number; // 返回的分片数
+  document_ids: string[]; // 文档id列表
+  search_method: string; // 检索方法
+  is_related_surrounding: boolean; // 是否关联上下文
+  is_classify_by_doc: boolean; // 是否按文档分类
+  is_rerank: boolean; // 是否重排
+  is_compress: boolean; // 是否压缩
+  token_limits: number; // TODO token限制 这个还没开放配置
+  query_variables: string; // 查询变量
+}
+
+const ragForm = reactive<RAGForm>({
+  name: '',
+  description: '',
+  node_type: NodeType.RAG,
+  top_k: 0,
+  document_ids: [],
+  search_method: '',
+  is_related_surrounding: true,
+  is_classify_by_doc: false,
+  is_rerank: false,
+  is_compress: false,
+  token_limits: 8192,
+  query_variables: '',
+});
+
+const ragFormRef = ref<FormInstance>();
+
+// TODO app.outputContent 还没有对接 在预定义的插件那里会有outputContent
+const ragOutputInYaml = ref('');
+
+const emits = defineEmits(['closeDrawer', 'saveNode']);
+const props = defineProps<{
+  yamlContent: any;
+  nodeName: string;
+  nodeDesc: string;
+  appId: any;
+  flowId: any;
+  nodeYamlId: any;
+}>();
+
+const searchMethodOptions = [
+  {
+    value: 'keyword',
+    label: '关键词检索',
+  },
+  {
+    value: 'vector',
+    label: '向量化检索',
+  },
+  {
+    value: 'keyword_and_vector',
+    label: '混合检索',
+  },
+  {
+    value: 'doc2chunk',
+    label: '文档分块检索',
+  },
+  {
+    value: 'doc2chunk_bfs',
+    label: '文档分块检索(bfs)',
+  },
+  {
+    value: 'enhanced_by_llm',
+    label: '大模型增强检索',
+  },
+];
+
+interface KnowledgeBaseListItem {
+  kb_name: string;
+  kb_id: string;
+  team_name: string;
+  team_id: string;
+}
+
+const knowledgeBaseListOption = ref<KnowledgeBaseListItem[]>([]);
+
+/**
+ * 查询知识库列表
+ */
+async function getKnowledgeList() {
+  try {
+    const [, res] = await api.getConvKnowledgeList({
+      conversationId: currentSelectedSession.value,
+    });
+    // 清空之前的选项
+    knowledgeBaseListOption.value = [];
+
+    if (res?.result?.teamKbList) {
+      res.result.teamKbList.forEach((team: any) => {
+        team.kb_list.forEach((kb) => {
+          knowledgeBaseListOption.value.push({
+            kb_name: kb.kbName,
+            kb_id: kb.kbId,
+            team_name: team.teamName,
+            team_id: team.teamId,
+          });
+        });
+      });
+    }
+  } catch (error) {
+    console.error('查询知识库失败:', error);
+    // 清空选项以避免显示旧数据
+    knowledgeBaseListOption.value = [];
+    ElMessage.error('查询知识库失败');
+  }
+}
+
+onMounted(() => {
+  getKnowledgeList();
+  let input_content = props.yamlContent.input_parameters;
+
+  Object.assign(ragForm, {
+    ...input_content,
+    name: props.nodeName,
+    description: props.nodeDesc,
+  });
+
+  ragOutputInYaml.value = props.yamlContent.output_parameters;
+  if (ragForm.name && ragForm.description) {
+    infoDisabled.value = false;
+  } else {
+    infoDisabled.value = true;
+  }
+});
+
+const closeDrawer = () => {
+  drawerVisible.value = false;
+};
+
+// 监听器
+watch(
+  () => visible.value,
+  (newVal) => {
+    drawerVisible.value = newVal;
+  },
+  { immediate: true },
+);
+
+watch(drawerVisible, (newVal) => {
+  if (!newVal) {
+    emits('closeDrawer');
+  }
+});
+
+// 完成yaml更新
+const updateNodeYaml = async (formEl: FormInstance | undefined) => {
+  // 现在把每个数值单独提取出来是为了更好的可拓展性
+
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(ragForm);
+      const transResult = {
+        ...ragForm,
+      };
+      try {
+        let transResultToYaml = yaml.load(JSON.stringify(transResult));
+        // 调用接口并更新--根据id包含更新后的yamlCode, name, desc
+        emits(
+          'saveNode',
+          transResultToYaml,
+          props.nodeYamlId,
+          transResult.name,
+          transResult.description,
+        );
+        closeDrawer();
+      } catch {
+        ElMessage.error(i18n.global.t('semantic.checkFormat'));
+      }
+      console.log('submit!');
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.rag-drawer {
+  :deep(.el-drawer) {
+    border-radius: 8px 0 0 8px;
+  }
+
+  :deep(.el-drawer__header) {
+    padding: 24px 24px 16px !important;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  :deep(.el-drawer__body) {
+    padding: 0;
+  }
+
+  :deep(.el-drawer__footer) {
+    padding: 16px 24px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+
+  .drawer-header {
+    .header-title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+
+      .node-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .drawer-body {
+    height: 100%;
+    overflow-y: auto;
+
+    :deep(.el-collapse-item__header) {
+      padding: 16px 24px;
+      font-weight: 500;
+      background: var(--el-fill-color-extra-light);
+      border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+
+    :deep(.el-collapse-item__wrap) {
+      border-bottom: none;
+    }
+  }
+
+  .basic-content,
+  .knowledge-content,
+  .advanced-content,
+  .output-content {
+    :deep(.el-form-item) {
+      margin-bottom: 16px;
+    }
+  }
+
+  .drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+}
+
+// 透明遮罩样式
+:deep(.transparent-modal) {
+  background-color: transparent !important;
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 685ac9061bf00a2f6bde8671566d29f4515a8c4e..667eb2301b7d11dd3cf113552450f47fc6c8e3ed 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ import type { UserConfigExport } from 'vite';
 // https://vitejs.dev/config/
 export default ({ mode }): UserConfigExport => {
   const env = loadEnv(mode, process.cwd());
-  
+
   // 开发模式使用 '/'，生产模式使用 './'
   const baseUrl = mode === 'development' ? '/' : './';
   return defineConfig({
@@ -72,10 +72,10 @@ export default ({ mode }): UserConfigExport => {
     },
 
     server: {
-      host: '10.211.55.10',
+      host: 'localhost',
       hmr: true,
-      port: 8080,
-      origin: 'http://10.211.55.10:8080',
+      port: 3000,
+      origin: 'http://localhost:3000',
       headers: {
         'Access-Control-Allow-Origin': '*',
       },