From cc2df4d3ab9599e400026cd59e0b53d673a36403 Mon Sep 17 00:00:00 2001
From: Mminamiyama <minamiyama@qq.com>
Date: Fri, 11 Jul 2025 16:07:55 +0800
Subject: [PATCH] style(workflow): adjust drag handle position and variable
 icon opacity

Update drag handle positioning from negative to positive left value and change its text color. Also add hover opacity effect to variable icon for better visual feedback.
---
 web/app/components/workflow/nodes/start/components/var-item.tsx | 2 +-
 web/app/components/workflow/nodes/start/components/var-list.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index c25e587a60..603a2b2160 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -52,7 +52,7 @@ const VarItem: FC<Props> = ({
   return (
     <div ref={ref} className={cn('flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md', className)}>
       <div className='flex w-0 grow items-center space-x-1'>
-        <Variable02 className='h-3.5 w-3.5 text-text-accent' />
+        <Variable02 className='h-3.5 w-3.5 text-text-accent group-hover:opacity-0' />
         <div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary'>{payload.variable}</div>
         {payload.label && (<><div className='shrink-0 text-xs font-medium text-text-quaternary'>·</div>
           <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-text-tertiary'>{payload.label as string}</div>
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index d1820ba98c..db5b9e9882 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -93,7 +93,7 @@ const VarList: FC<Props> = ({
               varKeys={list.map(item => item.variable)}
             />
             {canDrag && <RiDraggable className={cn(
-              'handle absolute -left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+              'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
               'group-hover:block',
             )} />}
           </div>