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>