diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index e78964d5..59a303f1 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -2552,6 +2552,9 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
         'list-operator.input_list': 'Input list',
       },
       checkListHasErrors: 'Please resolve all issues in the checklist before publishing',
+      variableSelect: {
+        empty: 'No variables available',
+      },
     },
     emotionEngine: {
       emotionEngineConfig: 'Emotion Engine Configuration',
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index d206a1c6..1c3791d4 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -2516,6 +2516,9 @@ export const zh = {
         'list-operator.input_list': '输入变量',
       },
       checkListHasErrors: '发布前确认检查清单中所有问题均已解决',
+      variableSelect: {
+        empty: '暂无变量',
+      },
     },
     emotionEngine: {
       emotionEngineConfig: '情感引擎配置',
diff --git a/web/src/views/Workflow/components/Editor/nodes/VariableNode.tsx b/web/src/views/Workflow/components/Editor/nodes/VariableNode.tsx
index 5688342c..72e73220 100644
--- a/web/src/views/Workflow/components/Editor/nodes/VariableNode.tsx
+++ b/web/src/views/Workflow/components/Editor/nodes/VariableNode.tsx
@@ -48,17 +48,13 @@ const VariableComponent: React.FC<{ nodeKey: NodeKey; data: Suggestion }> = ({
   return (
     <span
       onClick={handleClick}
-      className={clsx('rb:border rb:rounded-md rb:bg-white rb:text-[10px] rb:inline-flex rb:items-center rb:py-0 rb:px-1.5 rb:mx-0.5 rb:cursor-pointer', {
-        'rb:border-[#171719]': isSelected,
-        'rb:border-[#DFE4ED]': !isSelected
-      })}
+      className="rb-border rb:rounded-md rb:bg-white rb:text-[10px] rb:text-[#212332] rb:h-5! rb:inline-flex rb:items-center rb:p-1 rb:mx-px rb:cursor-pointer"
       contentEditable={false}
     >
-      {data.isContext ? (
-        <span style={{ fontSize: '12px', marginRight: '4px' }}>📄</span>
-      ) : data.group !== 'CONVERSATION' && !data.value.includes('conv') ? (
-        <span className={`rb:size-4 rb:mr-1 rb:bg-cover rb:inline-block rb:flex-shrink-0 ${data.nodeData?.icon}`} />
-      ) : <span className="rb:inline-block rb:h-4"></span>}
+      {!data.isContext && data.group !== 'CONVERSATION' && !data.value.includes('conv')
+        ? <div className={`rb:size-3 rb:mr-1 rb:bg-cover ${data.nodeData?.icon}`} />
+        : null
+      }
       {!data.isContext && data.group !== 'CONVERSATION' && (
         <>
           {!data.value.includes('conv') && <>
@@ -73,7 +69,7 @@ const VariableComponent: React.FC<{ nodeKey: NodeKey; data: Suggestion }> = ({
           )}
         </>
       )}
-      <span className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1 rb:text-[#171719]">{data.label}</span>
+      <span className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1">{data.label}</span>
     </span>
   );
 };
diff --git a/web/src/views/Workflow/components/Editor/plugin/AutocompletePlugin.tsx b/web/src/views/Workflow/components/Editor/plugin/AutocompletePlugin.tsx
index f9537032..9f718826 100644
--- a/web/src/views/Workflow/components/Editor/plugin/AutocompletePlugin.tsx
+++ b/web/src/views/Workflow/components/Editor/plugin/AutocompletePlugin.tsx
@@ -2,12 +2,13 @@
  * @Author: ZhaoYing 
  * @Date: 2025-12-23 16:22:51 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-07 16:51:04
+ * @Last Modified time: 2026-04-13 11:12:18
  */
 import { useEffect, useLayoutEffect, useState, useRef, type FC } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, KEY_ENTER_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND } from 'lexical';
 import { Space, Flex } from 'antd';
+import clsx from 'clsx';
 
 import { INSERT_VARIABLE_COMMAND, CLOSE_AUTOCOMPLETE_COMMAND } from '../commands';
 import type { NodeProperties } from '../../../types'
@@ -284,23 +285,23 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
       ref={popupRef}
       data-autocomplete-popup="true"
       onMouseDown={(e) => e.preventDefault()}
-      className="rb:fixed rb:z-1000 rb:bg-white rb:rounded-xl rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)]"
+      className="rb:min-w-70 rb:max-h-57.5 rb:overflow-y-auto rb:fixed rb:z-1000 rb:bg-white rb:rounded-lg rb:border-[0.5px] rb:border-[#EBEBEB] rb:shadow-[0px_2px_6px_0px_rgba(0,0,0,0.1)] rb:py-3 rb:px-2"
       style={{
         top: popupPosition.top,
         left: popupPosition.left,
       }}
     >
-      <div className="rb:py-1 rb:min-w-70 rb:max-h-50 rb:overflow-y-auto">
-        <Flex vertical gap={12}>
-          {Object.entries(groupedSuggestions).map(([nodeId, nodeOptions]) => {
-            const nodeName = nodeOptions[0]?.nodeData?.name || nodeId;
-            const nodeIcon = nodeOptions[0]?.nodeData?.icon;
-            return (
-              <div key={nodeId}>
-                {nodeName !== 'undefined' && <Flex align="center" gap={4} className="rb:px-3! rb:text-[12px] rb:py-1.25! rb:font-medium rb:text-[#5B6167]">
-                  {nodeIcon && <div className={`rb:size-3 rb:bg-cover ${nodeIcon}`} />}
+      <Flex vertical gap={12}>
+        {Object.entries(groupedSuggestions).map(([nodeId, nodeOptions]) => {
+          const nodeName = nodeOptions[0]?.nodeData?.name || nodeId;
+          return (
+            <div key={nodeId} className="rb:text-[12px]">
+              {nodeName !== 'undefined' &&
+                <div className="rb:px-2 rb:leading-4.25 rb:mb-1.25 rb:font-medium rb:text-[#5B6167]">
                   {nodeName}
-                </Flex>}
+                </div>
+              }
+              <Flex vertical gap={2}>
                 {nodeOptions.map((option) => {
                   const globalIndex = flatOptions.indexOf(option);
                   const isExpanded = expandedParent?.key === option.key;
@@ -310,14 +311,13 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
                       key={option.key}
                       ref={(el) => { if (el) itemRefs.current.set(option.key, el); }}
                       data-selected={selectedIndex === globalIndex}
-                      className="rb:pl-6! rb:pr-3! rb:py-2!"
+                      className={clsx("rb:px-2! rb:py-0.75! rb:rounded-sm rb:leading-4.5 rb:text-[#5B6167] rb:hover:bg-[#F6F6F6]", {
+                        'rb:bg-[#F6F6F6]': selectedIndex === globalIndex || isExpanded,
+                        'rb:cursor-not-allowed rb:opacity-65': option.disabled,
+                        'rb:cursor-pointer': !option.disabled,
+                      })}
                       align="center"
                       justify="space-between"
-                      style={{
-                        cursor: option.disabled ? 'not-allowed' : 'pointer',
-                        background: (selectedIndex === globalIndex || isExpanded) ? '#f0f8ff' : 'white',
-                        opacity: option.disabled ? 0.5 : 1,
-                      }}
                       onClick={() => {
                         if (option.disabled) return;
                         insertMention(option);
@@ -337,26 +337,27 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
                         }
                       }}
                     >
-                      {option.label && <Space size={4}>
-                        <span className="rb:text-[#155EEF]">{option.isContext ? '📄' : `{x}`}</span>
-                        <span>{option.label}</span>
-                      </Space>}
-                      <Space size={4}>
-                        {option.dataType && <span className="rb:text-[#5B6167]">{option.dataType}</span>}
-                        {hasChildren && <span className="rb:text-[#5B6167] rb:ml-1">›</span>}
+                      {option.label &&
+                        <div className="rb:font-medium">
+                          <span className="rb:text-[#155EEF]">{`{x}`}</span> {option.label}
+                        </div>
+                      }
+                      <Space size={2}>
+                        {option.dataType && <span>{option.dataType}</span>}
+                        {hasChildren && <div className="rb:size-3 rb:bg-cover rb:bg-[url('src/assets/images/common/arrow_up.svg')] rb:rotate-90"></div>}
                       </Space>
                     </Flex>
                   );
                 })}
-              </div>
-            );
-          })}
-        </Flex>
-      </div>
+              </Flex>
+            </div>
+          );
+        })}
+      </Flex>
       {/* Child variables panel - floats to the left */}
       {expandedParent?.children?.length && (
         <div
-          className="rb:absolute rb:bg-white rb:rounded-xl rb:py-1 rb:min-w-60 rb:max-h-60 rb:overflow-y-auto rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)]"
+          className="rb:min-w-70 rb:max-h-57.5 rb:overflow-y-auto rb:text-[12px] rb:fixed rb:z-1000 rb:bg-white rb:rounded-lg rb:border-[0.5px] rb:border-[#EBEBEB] rb:shadow-[0px_2px_6px_0px_rgba(0,0,0,0.1)] rb:py-3 rb:px-2"
           style={{
             top: childPanelTop,
             right: 'calc(100% + 8px)',
@@ -364,9 +365,8 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
           }}
           onMouseEnter={() => setExpandedParent(expandedParent)}
         >
-          {/* Header */}
-          <div className="rb:px-3 rb:py-2 rb:text-[12px] rb:font-medium rb:text-[#5B6167] rb:border-b rb:border-[#F0F0F0]">
-            <Flex justify="space-between" align="center">
+          <div className="rb:pb-2 rb:mb-1 rb:font-medium rb:text-[#5B6167] rb-border-b">
+            <Flex justify="space-between" align="center" gap={8}>
               <span>{expandedParent.nodeData.name}.{expandedParent.label}</span>
               <span>{expandedParent.dataType}</span>
             </Flex>
@@ -377,19 +377,18 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
               <Flex
                 key={child.key}
                 data-selected={selectedIndex === childIndex}
-                className="rb:px-3! rb:py-2!"
+                className={clsx("rb:px-2! rb:py-0.75! rb:rounded-sm rb:leading-4.5 rb:text-[#5B6167] rb:hover:bg-[#F6F6F6]", {
+                  'rb:bg-[#F6F6F6]': selectedIndex === childIndex,
+                  'rb:cursor-not-allowed rb:opacity-65': child.disabled,
+                  'rb:cursor-pointer': !child.disabled,
+                })}
                 align="center"
                 justify="space-between"
-                style={{
-                  cursor: child.disabled ? 'not-allowed' : 'pointer',
-                  background: selectedIndex === childIndex ? '#f0f8ff' : 'white',
-                  opacity: child.disabled ? 0.5 : 1,
-                }}
                 onClick={() => !child.disabled && insertMention(child)}
                 onMouseEnter={() => setSelectedIndex(childIndex)}
               >
-                <span>{child.label}</span>
-                {child.dataType && <span className="rb:text-[#5B6167]">{child.dataType}</span>}
+                <span className="rb:font-medium">{child.label}</span>
+                {child.dataType && <span>{child.dataType}</span>}
               </Flex>
             );
           })}
diff --git a/web/src/views/Workflow/components/Properties/VariableSelect.tsx b/web/src/views/Workflow/components/Properties/VariableSelect.tsx
index b28d7b4f..c0207cb5 100644
--- a/web/src/views/Workflow/components/Properties/VariableSelect.tsx
+++ b/web/src/views/Workflow/components/Properties/VariableSelect.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 15:40:13 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-08 10:48:21
+ * @Last Modified time: 2026-04-13 11:25:40
  */
 import { useState, useRef, useEffect, useLayoutEffect, type FC } from 'react'
 import { createPortal } from 'react-dom'
@@ -190,20 +190,30 @@ const VariableSelect: FC<VariableSelectProps> = ({
       {/* Trigger */}
       <div
         className={clsx(
-          'rb:w-full rb:flex rb:items-center rb:justify-between rb:cursor-pointer rb:rounded-md rb:px-2 rb:transition-colors',
-          variant === 'filled' && 'rb:bg-[#F6F6F6] rb:border-none rb:shadow-none',
-          variant === 'outlined' && 'rb:border rb:border-[#d9d9d9] hover:rb:border-[#4096ff] rb:bg-white',
-          variant === 'outlined' && open && 'rb:border-[#4096ff] rb:shadow-[0_0_0_2px_rgba(5,145,255,0.1)]',
-          variant === 'borderless' && 'rb:border-none rb:shadow-none rb:bg-transparent',
-          multiple && size === 'small' ? 'rb:min-h-7 rb:py-0.75' : multiple ? 'rb:min-h-8 rb:py-1' : size === 'small' ? 'rb:h-7 rb:text-[10px]' : size === 'large' ? 'rb:h-10' : 'rb:h-8 rb:text-[12px]',
-          !multiple && (size === 'small' ? 'rb:text-[12px]' : 'rb:text-[12px]'),
+          'rb:w-full rb:flex rb:items-center rb:justify-between rb:cursor-pointer rb:rounded-lg rb:px-2 rb:transition-colors', {
+            'rb:bg-[#F6F6F6] rb:border-none rb:shadow-none': variant === 'filled',
+            'rb:border rb:border-[#d9d9d9] hover:rb:border-[#4096ff] rb:bg-white': variant === 'outlined',
+            'rb:border-[#4096ff] rb:shadow-[0_0_0_2px_rgba(5,145,255,0.1)]': variant === 'outlined' && open,
+            'rb:border-none rb:shadow-none rb:bg-transparent': variant === 'borderless',
+            'rb:text-[12px]': size === 'small',
+            'rb:text-[14px]': size !== 'small',
+          },
+          multiple && size === 'small'
+            ? 'rb:min-h-7 rb:py-0.75'
+            : multiple
+            ? 'rb:min-h-8 rb:py-1'
+            : size === 'small'
+            ? 'rb:h-7 rb:text-[10px]'
+            : size === 'large'
+            ? 'rb:h-10'
+            : 'rb:h-8 rb:text-[12px]',
           className
         )}
         onClick={() => setOpen(o => !o)}
       >
         {multiple ? (
           selectedValues.length > 0 ? (
-            <span className="rb:flex rb:flex-wrap rb:gap-1 rb:flex-1 rb:min-w-0">
+            <Flex wrap gap={4} className="rb:flex-1! rb:min-w-0">
               {selectedValues.map(v => {
                 const s = suggestionMap.get(v);
                 if (!s) return null;
@@ -214,11 +224,11 @@ const VariableSelect: FC<VariableSelectProps> = ({
                 return (
                   <span
                     key={v}
-                    className="rb:inline-flex rb:items-center rb:gap-0.5 rb:bg-[#f0f8ff] rb:rounded rb:px-1 rb:py-0.5 rb:text-[11px] rb:max-w-full"
+                    className="rb-border rb:rounded-md rb:bg-white rb:text-[10px] rb:text-[#212332] rb:h-5! rb:inline-flex rb:items-center rb:p-1 rb:cursor-pointer"
                   >
-                    {!isConv && nd?.icon && <div className={`rb:size-3 rb:shrink-0 rb:bg-cover ${nd.icon}`} />}
+                    {!isConv && nd?.icon && <div className={`rb:size-3 rb:bg-cover ${nd.icon}`} />}
                     {!isConv && nd?.name && <span className="rb:text-[#5B6167]">{nd.name}{sep}</span>}
-                    <span className="rb:text-[#171719]">
+                    <span>
                       {parent ? <>{parent.label}{sep}{s.label}</> : s.label}
                     </span>
                     <span
@@ -228,17 +238,19 @@ const VariableSelect: FC<VariableSelectProps> = ({
                   </span>
                 );
               })}
-            </span>
+            </Flex>
           ) : (
-            <span className="rb:text-[#bfbfbf] rb:flex-1 rb:text-[12px]">{placeholder}</span>
+            <span className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1">{placeholder}</span>
           )
         ) : selectedSuggestion ? (
           <div className="rb:flex rb:flex-1 rb:min-w-0 rb:max-w-full">
-            <span className="rb:inline-flex rb:items-center rb:gap-0.5 rb:bg-[#f0f8ff] rb:rounded rb:px-1 rb:py-0.5 rb:text-[11px] rb:max-w-full rb:overflow-hidden">
-              {!isConversation && nodeData?.icon && <div className={`rb:size-3 rb:shrink-0 rb:bg-cover ${nodeData.icon}`} />}
-                {!isConversation && nodeData?.name && <span className="rb:text-[#5B6167] rb:shrink rb:min-w-0 rb:truncate rb:max-w-[40%]">{nodeData.name}</span>}
-                {!isConversation && nodeData?.name && <span className="rb:text-[#5B6167]">{sep}</span>}
-              <span className="rb:text-[#171719] rb:shrink rb:min-w-0 rb:truncate">
+            <span
+              className="rb-border rb:rounded-md rb:bg-white rb:text-[10px] rb:text-[#212332] rb:h-5! rb:inline-flex rb:items-center rb:p-1 rb:cursor-pointer"
+            >
+              {!isConversation && nodeData?.icon && <div className={`rb:size-3 rb:bg-cover rb:mr-1 ${nodeData.icon}`} />}
+              {!isConversation && nodeData?.name && <span className="rb:shrink rb:min-w-0 rb:truncate rb:max-w-[40%]">{nodeData.name}</span>}
+              {!isConversation && nodeData?.name && <span>{sep}</span>}
+              <span className="rb:shrink rb:min-w-0 rb:truncate">
                 {parentOfSelected ? <>{parentOfSelected.label}{sep}{selectedSuggestion.label}</> : selectedSuggestion.label}
               </span>
             </span>
@@ -266,18 +278,19 @@ const VariableSelect: FC<VariableSelectProps> = ({
       {open && createPortal(
         <div
           ref={dropdownRef}
-          className="rb:fixed rb:z-9999 rb:bg-white rb:text-[14px] rb:rounded-lg rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)] rb:p-1"
+          className="rb:min-w-70 rb:max-h-57.5 rb:overflow-y-auto rb:fixed rb:z-1000 rb:bg-white rb:rounded-lg rb:border-[0.5px] rb:border-[#EBEBEB] rb:shadow-[0px_2px_6px_0px_rgba(0,0,0,0.1)] rb:py-3 rb:px-2"
           style={{ top: dropdownPos.top, left: dropdownPos.left, minWidth: dropdownPos.width }}
         >
-          <div className="rb:min-w-70 rb:max-h-60 rb:overflow-y-auto rb:py-1">
-            {Object.entries(filteredGroups).map(([nodeId, suggestions]) => {
+          <div className="rb:min-w-70 rb:max-h-57.5 rb:overflow-y-auto">
+            {Object.entries(filteredGroups).map(([nodeId, suggestions], index) => {
               const nd = suggestions[0].nodeData;
               return (
-                <div key={nodeId}>
-                  <Flex align="center" gap={4} className="rb:px-3! rb:py-1.25! rb:text-[12px] rb:text-[#5B6167]">
-                    {nd.icon && <div className={`rb:size-4 rb:bg-cover ${nd.icon}`} />}
+                <div key={nodeId} className={clsx("rb:text-[12px]", {
+                  'rb:mt-3': index !== 0
+                })}>
+                  <div className="rb:px-2 rb:leading-4.25 rb:mb-1.25 rb:font-medium rb:text-[#5B6167]">
                     {nd.name}
-                  </Flex>
+                  </div>
                   {suggestions.map(s => {
                     const isSelected = multiple
                       ? selectedValues.includes(`{{${s.value}}}`)
@@ -288,11 +301,9 @@ const VariableSelect: FC<VariableSelectProps> = ({
                       <Flex
                         key={s.key}
                         ref={(el) => { if (el) itemRefs.current.set(s.key, el); }}
-                        className={clsx("rb:pl-6! rb:pr-3! rb:py-1.25! rb:rounded-lg!", {
-                          'rb:bg-[#e6f4ff]': isSelected || isExpanded,
-                          'rb:bg-white rb:hover:bg-[#F6F6F6]!': !(isSelected || isExpanded),
-                          'rb:opacity-60': s.disabled,
-                          'rb:cursor-not-allowed': s.disabled,
+                        className={clsx("rb:px-2! rb:py-0.75! rb:rounded-sm rb:leading-4.5 rb:text-[#5B6167] rb:hover:bg-[#F6F6F6]", {
+                          'rb:bg-[#F6F6F6]': isSelected || isExpanded,
+                          'rb:cursor-not-allowed rb:opacity-65': s.disabled,
                           'rb:cursor-pointer': !s.disabled,
                         })}
                         align="center"
@@ -314,17 +325,16 @@ const VariableSelect: FC<VariableSelectProps> = ({
                           }
                         }}
                       >
-                        <Space size={4}>
+                        <div className="rb:font-medium">
                           {multiple && (
-                            <Checkbox checked={isSelected} />
+                            <Checkbox checked={isSelected} className="rb:mr-2!" />
                           )}
-                          <span className="rb:text-[#155EEF]">{`{x}`}</span>
-                          <span>{s.label}</span>
-                        </Space>
-                        <Space size={4} className="rb:text-[#5B6167] rb:text-[12px]">
-                          {s.dataType && <span>{s.dataType}</span>}
+                          <span className="rb:text-[#155EEF]">{`{x}`}</span> {s.label}
+                        </div>
 
-                          {hasChildren && <div className="rb:size-3 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')] rb:rotate-90"></div>}
+                        <Space size={2}>
+                          {s.dataType && <span>{s.dataType}</span>}
+                          {hasChildren && <div className="rb:size-3 rb:bg-cover rb:bg-[url('src/assets/images/common/arrow_up.svg')] rb:rotate-90"></div>}
                         </Space>
                       </Flex>
                     );
@@ -334,7 +344,7 @@ const VariableSelect: FC<VariableSelectProps> = ({
             })}
             {Object.keys(filteredGroups).length === 0 && (
               <div className="rb:px-3 rb:py-4 rb:text-center rb:text-[#bfbfbf] rb:text-[14px]">
-                {t('workflow.variableSelect.empty', '暂无变量')}
+                {t('workflow.variableSelect.empty')}
               </div>
             )}
           </div>
@@ -346,18 +356,13 @@ const VariableSelect: FC<VariableSelectProps> = ({
       {open && expandedParent?.children?.length && createPortal(
         <div
           id="variable-select-child-panel"
-          className="rb:fixed rb:z-9999 rb:bg-white rb:rounded-xl rb:py-1 rb:min-w-60 rb:max-h-60 rb:overflow-y-auto rb:text-[14px] rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)]"
+          className="rb:min-w-70 rb:max-h-57.5 rb:overflow-y-auto rb:text-[12px] rb:fixed rb:z-1000 rb:bg-white rb:rounded-lg rb:border-[0.5px] rb:border-[#EBEBEB] rb:shadow-[0px_2px_6px_0px_rgba(0,0,0,0.1)] rb:py-3 rb:px-2"
           style={{ top: childPanelPos.top, right: childPanelPos.right }}
           onMouseEnter={() => setExpandedParent(expandedParent)}
         >
-          <div
-            className="rb:px-3 rb:py-2 rb:text-[14px] rb:font-medium rb:text-[#5B6167] rb:border-b rb:border-[#F0F0F0] rb:cursor-pointer rb:hover:bg-[#f0f8ff]"
-            onClick={() => !expandedParent.disabled && handleSelect(expandedParent)}
-          >
+          <div className="rb:pb-2 rb:mb-1 rb:font-medium rb:text-[#5B6167] rb-border-b">
             <Flex justify="space-between" align="center" gap={8}>
-              <Flex align="center" gap={6}>
-                <span>{expandedParent.nodeData.name}.{expandedParent.label}</span>
-              </Flex>
+              <span>{expandedParent.nodeData.name}.{expandedParent.label}</span>
               <span>{expandedParent.dataType}</span>
             </Flex>
           </div>
@@ -365,32 +370,27 @@ const VariableSelect: FC<VariableSelectProps> = ({
             const isSelected = multiple
               ? selectedValues.includes(`{{${child.value}}}`)
               : `{{${child.value}}}` === value;
-            const hasGrandChildren = !!child.children?.length;
             return (
               <Flex
                 key={child.key}
-                className={clsx("rb:px-3! rb:py-2! rb:hover:bg-[#f0f8ff]!", {
-                  'rb:bg-[#f0f8ff]': isSelected,
-                  'rb:white': !isSelected
+                className={clsx("rb:px-2! rb:py-0.75! rb:rounded-sm rb:leading-4.5 rb:text-[#5B6167] rb:hover:bg-[#F6F6F6]", {
+                  'rb:bg-[#F6F6F6]': isSelected,
+                  'rb:cursor-not-allowed rb:opacity-65': child.disabled,
+                  'rb:cursor-pointer': !child.disabled,
                 })}
                 align="center"
                 justify="space-between"
-                style={{
-                  cursor: child.disabled ? 'not-allowed' : 'pointer',
-                  opacity: child.disabled ? 0.5 : 1,
-                }}
                 onClick={() => !child.disabled && handleSelect(child)}
               >
-                <Flex align="center" gap={6}>
+                <Flex align="center" gap={8}>
                   {multiple && (
                     <Checkbox checked={isSelected} />
                   )}
-                  <span>{child.label}</span>
-                </Flex>
-                <Flex align="center" gap={4}>
-                  {child.dataType && <span className="rb:text-[#5B6167]">{child.dataType}</span>}
-                  {hasGrandChildren && <span className="rb:text-[#5B6167] rb:ml-1">›</span>}
+                  <span className="rb:font-medium">{child.label}</span>
                 </Flex>
+                <Space size={2}>
+                  {child.dataType && <span>{child.dataType}</span>}
+                </Space>
               </Flex>
             );
           })}
diff --git a/web/src/views/Workflow/components/Properties/hooks/useVariableList.ts b/web/src/views/Workflow/components/Properties/hooks/useVariableList.ts
index 3c4ea6f7..14dcced2 100644
--- a/web/src/views/Workflow/components/Properties/hooks/useVariableList.ts
+++ b/web/src/views/Workflow/components/Properties/hooks/useVariableList.ts
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-01-19 17:00:26 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-08 10:12:27
+ * @Last Modified time: 2026-04-13 10:44:17
  */
 /**
  * useVariableList Hook
@@ -414,7 +414,7 @@ export const useVariableList = (
       const pd = parentLoop.getData();
       const pid = pd.id;
       if (pd.type === 'loop') {
-        (pd.cycle_vars || []).forEach((cv: any) => addVariable(list, keys, `${pid}_cycle_${cv.name}`, cv.name, cv.type || 'String', `${pid}.${cv.name}`, pd));
+        (pd.cycle_vars || []).forEach((cv: any) => addVariable(list, keys, `${pid}_cycle_${cv.name}`, cv.name, cv.type || 'string', `${pid}.${cv.name}`, pd));
       } else if (pd.type === 'iteration' && pd.config.input.defaultValue) {
         let itemType = 'object';
         const iv = list.find(v => `{{${v.value}}}` === pd.config.input.defaultValue);
diff --git a/web/src/views/Workflow/components/Properties/index.tsx b/web/src/views/Workflow/components/Properties/index.tsx
index b5bc2d2e..f826edd9 100644
--- a/web/src/views/Workflow/components/Properties/index.tsx
+++ b/web/src/views/Workflow/components/Properties/index.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 15:39:59 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-10 17:24:19
+ * @Last Modified time: 2026-04-13 10:44:19
  */
 import { type FC, useEffect, useState, useMemo } from "react";
 import clsx from 'clsx'
@@ -266,7 +266,7 @@ const Properties: FC<PropertiesProps> = ({
                 key,
                 label: cycleVar.name,
                 type: 'variable',
-                dataType: cycleVar.type || 'String',
+                dataType: cycleVar.type || 'string',
                 value: `${parentNodeId}.${cycleVar.name}`,
                 nodeData: parentData,
               });
@@ -643,7 +643,7 @@ const Properties: FC<PropertiesProps> = ({
                               key: contextKey,
                               label: 'context',
                               type: 'variable',
-                              dataType: 'String',
+                              dataType: 'string',
                               value: `context`,
                               nodeData: selectedNode.getData(),
                               isContext: true,
@@ -791,7 +791,7 @@ const Properties: FC<PropertiesProps> = ({
                                   key: `${selectedNode.id}_cycle_${cycleVar.name}`,
                                   label: cycleVar.name,
                                   type: 'variable',
-                                  dataType: cycleVar.type || 'String',
+                                  dataType: cycleVar.type || 'string',
                                   value: `${selectedNode.getData().id}.${cycleVar.name}`,
                                   nodeData: selectedNode.getData(),
                                 }));