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/begin-node.tsx

@@ -1,10 +1,8 @@
-import { Flex, Space } from 'antd';
+import { Flex } from 'antd';
 import classNames from 'classnames';
 import { Handle, NodeProps, Position } from 'reactflow';
-import { Operator } from '../../constant';
+import { Operator, operatorMap } from '../../constant';
 import { NodeData } from '../../interface';
-import OperatorIcon from '../../operator-icon';
-import NodeDropdown from './dropdown';
 
 import styles from './index.less';
 
@@ -15,6 +13,12 @@ export function BeginNode({ id, data, selected }: NodeProps<NodeData>) {
       className={classNames(styles.ragNode, {
         [styles.selectedNode]: selected,
       })}
+      style={{
+        backgroundColor: operatorMap[data.label as Operator].backgroundColor,
+        color: 'white',
+        width: 50,
+        height: 50,
+      }}
     >
       <Handle
         type="source"
@@ -22,14 +26,8 @@ export function BeginNode({ id, data, selected }: NodeProps<NodeData>) {
         isConnectable
         className={styles.handle}
       ></Handle>
-      <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}>
+        <span className={styles.type}>{data.label}</span>
       </Flex>
       <section className={styles.bottomBox}>
         <div className={styles.nodeName}>{data.name}</div>

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>

web/src/pages/flow/canvas/node/dropdown.tsx

@@ -38,6 +38,7 @@ const NodeDropdown = ({ id }: IProps) => {
   return (
     <OperateDropdown
       iconFontSize={14}
+      height={14}
       deleteItem={deleteNode}
       items={items}
     ></OperateDropdown>

web/src/pages/flow/canvas/node/index.less

@@ -23,6 +23,9 @@
     color: #777;
     font-size: 12px;
   }
+  .type {
+    // font-size: 12px;
+  }
   .description {
     font-size: 10px;
   }

web/src/pages/flow/canvas/node/index.tsx

@@ -1,9 +1,13 @@
+import { Flex } from 'antd';
 import classNames from 'classnames';
-import { Handle, NodeProps, Position } from 'reactflow';
-
-import { Flex, Space } from 'antd';
 import get from 'lodash/get';
-import { CategorizeAnchorPointPositions, Operator } from '../../constant';
+import pick from 'lodash/pick';
+import { Handle, NodeProps, Position } from 'reactflow';
+import {
+  CategorizeAnchorPointPositions,
+  Operator,
+  operatorMap,
+} from '../../constant';
 import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import CategorizeHandle from './categorize-handle';
@@ -18,12 +22,14 @@ export function RagNode({
 }: NodeProps<NodeData>) {
   const isCategorize = data.label === Operator.Categorize;
   const categoryData = get(data, 'form.category_description') ?? {};
+  const style = operatorMap[data.label as Operator];
 
   return (
     <section
       className={classNames(styles.ragNode, {
         [styles.selectedNode]: selected,
       })}
+      style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
     >
       <Handle
         id="c"
@@ -51,14 +57,18 @@ export function RagNode({
             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={style['iconFontSize'] ?? 24}
+        ></OperatorIcon>
+        <span
+          className={styles.type}
+          style={{ fontSize: style.fontSize ?? 14 }}
+        >
+          {data.label}
+        </span>
+        <NodeDropdown id={id}></NodeDropdown>
       </Flex>
 
       <section className={styles.bottomBox}>