feat: Add hint for operators, round to square, input variable, readable operator ID. #3056 (#3057)

### What problem does this PR solve?

feat: Add hint for operators, round to square, input variable, readable
operator ID. #3056

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

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

@@ -1,12 +1,9 @@
-import { Flex } from 'antd';
 import classNames from 'classnames';
-import pick from 'lodash/pick';
 import { Handle, NodeProps, Position } from 'reactflow';
-import { Operator, operatorMap } from '../../constant';
 import { NodeData } from '../../interface';
-import OperatorIcon from '../../operator-icon';
-import NodeDropdown from './dropdown';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
+import NodeHeader from './node-header';
 import NodePopover from './popover';
 
 export function RagNode({
@@ -15,17 +12,12 @@ export function RagNode({
   isConnectable = true,
   selected,
 }: NodeProps<NodeData>) {
-  const style = operatorMap[data.label as Operator];
-
   return (
     <NodePopover nodeId={id}>
       <section
         className={classNames(styles.ragNode, {
           [styles.selectedNode]: selected,
         })}
-        style={{
-          ...pick(style, ['backgroundColor', 'color']),
-        }}
       >
         <Handle
           id="c"
@@ -33,39 +25,17 @@ export function RagNode({
           position={Position.Left}
           isConnectable={isConnectable}
           className={styles.handle}
+          style={LeftHandleStyle}
         ></Handle>
-        <Handle type="source" position={Position.Top} id="d" isConnectable />
         <Handle
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
           className={styles.handle}
           id="b"
+          style={RightHandleStyle}
         ></Handle>
-        <Handle type="source" position={Position.Bottom} id="a" isConnectable />
-        <Flex vertical align="center" justify={'space-around'}>
-          <Flex flex={1} justify="center" align="center">
-            <label htmlFor=""> </label>
-          </Flex>
-
-          <Flex flex={1}>
-            <OperatorIcon
-              name={data.label as Operator}
-              fontSize={style?.iconFontSize ?? 16}
-              width={style?.iconWidth}
-            ></OperatorIcon>
-          </Flex>
-          <Flex flex={1}>
-            <NodeDropdown
-              id={id}
-              iconFontColor={style?.moreIconColor}
-            ></NodeDropdown>
-          </Flex>
-        </Flex>
-
-        <section className={styles.bottomBox}>
-          <div className={styles.nodeName}>{data.name}</div>
-        </section>
+        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
       </section>
     </NodePopover>
   );