feat: modify the style of the operator #918 (#1335)

### What problem does this PR solve?

feat: modify the style of the operator #918
### Type of change


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

web/src/pages/flow/canvas/node/categorize-node.tsx

@@ -1,8 +1,12 @@
-import { Flex, Space } from 'antd';
+import { Flex } from 'antd';
 import classNames from 'classnames';
 import get from 'lodash/get';
 import { Handle, NodeProps, Position } from 'reactflow';
-import { CategorizeAnchorPointPositions, Operator } from '../../constant';
+import {
+  CategorizeAnchorPointPositions,
+  Operator,
+  operatorMap,
+} from '../../constant';
 import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import CategorizeHandle from './categorize-handle';
@@ -12,12 +16,17 @@ import styles from './index.less';
 
 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
   const categoryData = get(data, 'form.category_description') ?? {};
+  const style = operatorMap[data.label as Operator];
 
   return (
     <section
       className={classNames(styles.ragNode, {
         [styles.selectedNode]: selected,
       })}
+      style={{
+        backgroundColor: style.backgroundColor,
+        color: style.color,
+      }}
     >
       <Handle
         type="target"
@@ -49,14 +58,13 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
           idx={idx}
         ></CategorizeHandle>
       ))}
-      <Flex vertical align="center" justify="center">
-        <Space size={6}>
-          <OperatorIcon
-            name={data.label as Operator}
-            fontSize={16}
-          ></OperatorIcon>
-          <NodeDropdown id={id}></NodeDropdown>
-        </Space>
+      <Flex vertical align="center" justify="center" gap={6}>
+        <OperatorIcon
+          name={data.label as Operator}
+          fontSize={24}
+        ></OperatorIcon>
+        <span className={styles.type}>{data.label}</span>
+        <NodeDropdown id={id}></NodeDropdown>
       </Flex>
       <section className={styles.bottomBox}>
         <div className={styles.nodeName}>{data.name}</div>