Feat: Modify the style of the canvas operator node #3221 (#8261)

### What problem does this PR solve?

Feat: Modify the style of the canvas operator node #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/node/retrieval-node.tsx

@@ -1,15 +1,17 @@
-import { useTheme } from '@/components/theme-provider';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { IRetrievalNode } from '@/interfaces/database/flow';
 import { UserOutlined } from '@ant-design/icons';
-import { Handle, NodeProps, Position } from '@xyflow/react';
+import { NodeProps, Position } from '@xyflow/react';
 import { Avatar, Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo, useMemo } from 'react';
+import { CommonHandle } from './handle';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
 
 function InnerRetrievalNode({
   id,
@@ -18,7 +20,6 @@ function InnerRetrievalNode({
   selected,
 }: NodeProps<IRetrievalNode>) {
   const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
-  const { theme } = useTheme();
   const { list: knowledgeList } = useFetchKnowledgeList(true);
   const knowledgeBases = useMemo(() => {
     return knowledgeBaseIds.map((x) => {
@@ -32,58 +33,52 @@ function InnerRetrievalNode({
   }, [knowledgeList, knowledgeBaseIds]);
 
   return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={LeftHandleStyle}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        style={RightHandleStyle}
-        id="b"
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={classNames({
-          [styles.nodeHeader]: knowledgeBaseIds.length > 0,
-        })}
-      ></NodeHeader>
-      <Flex vertical gap={8}>
-        {knowledgeBases.map((knowledge) => {
-          return (
-            <div className={styles.nodeText} key={knowledge.id}>
-              <Flex align={'center'} gap={6}>
-                <Avatar
-                  size={26}
-                  icon={<UserOutlined />}
-                  src={knowledge.avatar}
-                />
-                <Flex className={styles.knowledgeNodeName} flex={1}>
-                  {knowledge.name}
+    <ToolBar selected={selected} id={id} label={data.label}>
+      <NodeWrapper>
+        <CommonHandle
+          id="c"
+          type="source"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          style={LeftHandleStyle}
+        ></CommonHandle>
+        <CommonHandle
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          style={RightHandleStyle}
+          id="b"
+        ></CommonHandle>
+        <NodeHeader
+          id={id}
+          name={data.name}
+          label={data.label}
+          className={classNames({
+            [styles.nodeHeader]: knowledgeBaseIds.length > 0,
+          })}
+        ></NodeHeader>
+        <Flex vertical gap={8}>
+          {knowledgeBases.map((knowledge) => {
+            return (
+              <div className={styles.nodeText} key={knowledge.id}>
+                <Flex align={'center'} gap={6}>
+                  <Avatar
+                    size={26}
+                    icon={<UserOutlined />}
+                    src={knowledge.avatar}
+                  />
+                  <Flex className={styles.knowledgeNodeName} flex={1}>
+                    {knowledge.name}
+                  </Flex>
                 </Flex>
-              </Flex>
-            </div>
-          );
-        })}
-      </Flex>
-    </section>
+              </div>
+            );
+          })}
+        </Flex>
+      </NodeWrapper>
+    </ToolBar>
   );
 }