From af543d2a7f9fa696ea251893360dd43c4bb6abaf Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 27 Jan 2026 18:30:09 +0800
Subject: [PATCH] chore: tool ui

---
 .../components/collapse/field-collapse.tsx    |  8 ++-
 .../nodes/_base/components/collapse/index.tsx |  4 +-
 .../llm/components/computer-use-config.tsx    | 71 ++++++++-----------
 .../components/workflow/nodes/llm/panel.tsx   |  2 +-
 4 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx b/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
index 777bd82035..2a958eed17 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/field-collapse.tsx
@@ -1,12 +1,14 @@
 import type { ReactNode } from 'react'
+import { cn } from '@/utils/classnames'
 import Collapse from '.'
 
 type FieldCollapseProps = {
-  title: string
+  title: string | React.JSX.Element
   children: ReactNode
   collapsed?: boolean
   onCollapse?: (collapsed: boolean) => void
   operations?: ReactNode
+  noXSpacing?: boolean
 }
 const FieldCollapse = ({
   title,
@@ -14,6 +16,7 @@ const FieldCollapse = ({
   collapsed,
   onCollapse,
   operations,
+  noXSpacing,
 }: FieldCollapseProps) => {
   return (
     <div className="py-4">
@@ -24,8 +27,9 @@ const FieldCollapse = ({
         operations={operations}
         collapsed={collapsed}
         onCollapse={onCollapse}
+        noXSpacing={noXSpacing}
       >
-        <div className="px-4">
+        <div className={cn('px-4', noXSpacing && 'px-0')}>
           {children}
         </div>
       </Collapse>
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index 6aeff0242f..ba955737e8 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -13,6 +13,7 @@ type CollapseProps = {
   onCollapse?: (collapsed: boolean) => void
   operations?: ReactNode
   hideCollapseIcon?: boolean
+  noXSpacing?: boolean
 }
 const Collapse = ({
   disabled,
@@ -22,6 +23,7 @@ const Collapse = ({
   onCollapse,
   operations,
   hideCollapseIcon,
+  noXSpacing,
 }: CollapseProps) => {
   const [collapsedLocal, setCollapsedLocal] = useState(true)
   const collapsedMerged = collapsed !== undefined ? collapsed : collapsedLocal
@@ -42,7 +44,7 @@ const Collapse = ({
     <>
       <div className="group/collapse flex items-center">
         <div
-          className="ml-4 flex grow items-center"
+          className={cn('ml-4 flex grow items-center', noXSpacing && 'ml-0')}
           onClick={() => {
             if (!disabled) {
               setCollapsedLocal(!collapsedMerged)
diff --git a/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx b/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx
index 16162f36ae..f36ff89e97 100644
--- a/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx
@@ -1,13 +1,11 @@
 'use client'
 import type { FC } from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
-import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
-import { BoxGroup } from '@/app/components/workflow/nodes/_base/components/layout'
-import { cn } from '@/utils/classnames'
+import FieldCollapse from '@/app/components/workflow/nodes/_base/components/collapse/field-collapse'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
 import ReferenceToolConfig from './reference-tool-config'
 
 const i18nPrefix = 'nodes.llm.computerUse'
@@ -24,56 +22,43 @@ const ComputerUseConfig: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const [isCollapsed, { toggle: toggleCollapsed }] = useBoolean(false)
 
   return (
-    <BoxGroup
-      boxProps={{
-        withBorderBottom: true,
-        withBorderTop: true,
-        className: 'py-0',
-      }}
-      groupProps={{
-        className: 'px-0 py-0',
-      }}
-    >
-      <div className="pb-2 pt-1">
-        <div className="flex items-center pb-1 pt-2">
-          <div className="flex min-w-0 flex-1 items-center gap-1">
-            <div className="system-sm-semibold-uppercase text-text-secondary">
-              {t(`${i18nPrefix}.title`, { ns: 'workflow' })}
-            </div>
+    <div>
+      <Split />
+      <FieldCollapse
+        title={(
+          <div>
+            {t(`${i18nPrefix}.title`, { ns: 'workflow' })}
             <Tooltip
               popupContent={t(`${i18nPrefix}.tooltip`, { ns: 'workflow' })}
               triggerClassName="h-4 w-4"
             />
-            <button
-              type="button"
-              onClick={toggleCollapsed}
-              className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-state-base-hover"
-            >
-              <RiArrowDownSLine
-                className={cn('h-4 w-4 transition-transform', isCollapsed && '-rotate-90')}
-              />
-            </button>
           </div>
-          <Switch
-            size="md"
-            disabled={readonly}
-            defaultValue={enabled}
-            onChange={onChange}
-          />
-        </div>
-        {!isCollapsed && (
-          <div className="flex flex-col gap-2 pb-2">
+        )}
+        noXSpacing
+        operations={(
+          <div>
+            <Switch
+              size="md"
+              disabled={readonly}
+              defaultValue={enabled}
+              onChange={onChange}
+            />
+          </div>
+        )}
+      >
+        <div className="mt-1 flex flex-col gap-2 pb-1">
+          <div className="flex h-6 items-center gap-1">
             <div className="system-xs-medium text-text-tertiary">
               {t(`${i18nPrefix}.referenceTools`, { ns: 'workflow' })}
             </div>
-            <ReferenceToolConfig readonly={readonly} enabled={enabled} />
           </div>
-        )}
-      </div>
-    </BoxGroup>
+          <ReferenceToolConfig readonly={readonly} enabled={enabled} />
+        </div>
+      </FieldCollapse>
+      <Split />
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 6a58e9c7c7..ba9694ce6a 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -245,7 +245,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
         )}
       </div>
 
-      {/* Advanced Settings - 折叠区 */}
+      {/* Advanced Settings */}
       <FieldCollapse title={t(`${i18nPrefix}.advancedSettings`, { ns: 'workflow' })}>
         <div className="space-y-4">
           {/* Context */}