From 48b1829b14e4d873f41e989f17e5cda00f783536 Mon Sep 17 00:00:00 2001
From: hjlarry <hjlarry@163.com>
Date: Wed, 29 Oct 2025 22:08:04 +0800
Subject: [PATCH] chore: improve toggle env/conversation/global var panel

---
 .../workflow/header/chat-variable-button.tsx  |  5 +++-
 .../components/workflow/header/env-button.tsx |  5 +++-
 .../header/global-variable-button.tsx         | 27 ++++++++++++++++---
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 8fdc86e6f7..aa68182c23 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -7,13 +7,16 @@ import cn from '@/utils/classnames'
 
 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
+  const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
 
   const handleClick = () => {
     setShowChatVariablePanel(true)
     setShowEnvPanel(false)
+    setShowGlobalVariablePanel(false)
     setShowDebugAndPreviewPanel(false)
   }
 
@@ -21,7 +24,7 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
     <Button
       className={cn(
         'p-2',
-        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        theme === 'dark' && showChatVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
       )}
       disabled={disabled}
       onClick={handleClick}
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index 896bdcb543..26723305f1 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -9,13 +9,16 @@ import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 const EnvButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
+  const showEnvPanel = useStore(s => s.showEnvPanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
   const { closeAllInputFieldPanels } = useInputFieldPanel()
 
   const handleClick = () => {
     setShowEnvPanel(true)
     setShowChatVariablePanel(false)
+    setShowGlobalVariablePanel(false)
     setShowDebugAndPreviewPanel(false)
     closeAllInputFieldPanels()
   }
@@ -24,7 +27,7 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
     <Button
       className={cn(
         'p-2',
-        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        theme === 'dark' && showEnvPanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
       )}
       variant='ghost'
       disabled={disabled}
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index fd69dd5c7c..a133cdeda5 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -2,16 +2,37 @@ import { memo } from 'react'
 import Button from '@/app/components/base/button'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
+import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
-  const setShowPanel = useStore(s => s.setShowGlobalVariablePanel)
+  const { theme } = useTheme()
+  const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
+  const setShowGlobalVariablePanel = useStore(s => s.setShowGlobalVariablePanel)
+  const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
+  const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
+  const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
+  const { closeAllInputFieldPanels } = useInputFieldPanel()
 
   const handleClick = () => {
-    setShowPanel(true)
+    setShowGlobalVariablePanel(true)
+    setShowEnvPanel(false)
+    setShowChatVariablePanel(false)
+    setShowDebugAndPreviewPanel(false)
+    closeAllInputFieldPanels()
   }
 
   return (
-    <Button className='p-2' disabled={disabled} onClick={handleClick} variant='ghost'>
+    <Button
+      className={cn(
+        'p-2',
+        theme === 'dark' && showGlobalVariablePanel && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}
+      disabled={disabled}
+      onClick={handleClick}
+      variant='ghost'
+    >
       <GlobalVariable className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
   )