refactor(editor): replace clipboard icon with action button for better UX

Use ActionButton component to wrap clipboard icons for consistent styling and improved click target area. The change maintains the same functionality while enhancing user interaction.

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -15,6 +15,7 @@ import {
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import FileListInLog from '@/app/components/base/file-uploader/file-list-in-log'
+import ActionButton from '@/app/components/base/action-button'
 
 type Props = {
   className?: string
@@ -88,15 +89,16 @@ const Base: FC<Props> = ({
                 <CodeGeneratorButton onGenerated={onGenerated} codeLanguages={codeLanguages} />
               </div>
             )}
-            {!isCopied
+            <ActionButton className='ml-1' onClick={handleCopy}>
-              ? (
+              {!isCopied
-                <Clipboard className='mx-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary' onClick={handleCopy} />
+                ? (
-              )
+                  <Clipboard className='h-4 w-4 cursor-pointer' />
-              : (
+                )
-                <ClipboardCheck className='mx-1 h-3.5 w-3.5 text-text-tertiary' />
+                : (
-              )
+                  <ClipboardCheck className='h-4 w-4' />
-            }
+                )
-
+              }
+            </ActionButton>
             <div className='ml-1'>
               <ToggleExpandBtn isExpand={isExpand} onExpandChange={setIsExpand} />
             </div>