feat: use new arrow icon

web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-down-round-fill">
+<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="#101828" fill-opacity="0.3"/>
+</g>
+</svg>

web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.json

@@ -0,0 +1,37 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "arrow-down-round-fill"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector",
+							"d": "M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z",
+							"fill": "currentColor",
+							"fill-opacity": "0.3"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "ArrowDownRoundFill"
+}

web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ArrowDownRoundFill.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'ArrowDownRoundFill'
+
+export default Icon

web/app/components/base/icons/src/vender/solid/general/index.ts

@@ -1,4 +1,5 @@
 export { default as AnswerTriangle } from './AnswerTriangle'
+export { default as ArrowDownRoundFill } from './ArrowDownRoundFill'
 export { default as CheckCircle } from './CheckCircle'
 export { default as CheckDone01 } from './CheckDone01'
 export { default as Download02 } from './Download02'

web/app/components/workflow/nodes/_base/components/collapse/index.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { useState } from 'react'
-import { RiArrowDropRightLine } from '@remixicon/react'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import cn from '@/utils/classnames'
 
 export { default as FieldCollapse } from './field-collapse'
@@ -27,7 +27,7 @@ const Collapse = ({
 
   return (
     <>
-      <div className='flex items-center'>
+      <div className='group/collapse flex items-center'>
         <div
           className='ml-4 flex grow items-center'
           onClick={() => {
@@ -38,13 +38,13 @@ const Collapse = ({
           }}
         >
           {trigger}
-          <div className='ml-1 h-4 w-4 shrink-0'>
+          <div className='h-4 w-4 shrink-0'>
             {
               !disabled && (
-                <RiArrowDropRightLine
+                <ArrowDownRoundFill
                   className={cn(
-                    'h-4 w-4 cursor-pointer text-text-tertiary',
+                    'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
-                    !collapsedMerged && 'rotate-90',
+                    collapsedMerged && 'rotate-[270deg]',
                   )}
                 />
               )