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

@@ -0,0 +1,35 @@
+import { Flex } from 'antd';
+
+import { Operator, operatorMap } from '../../constant';
+import OperatorIcon from '../../operator-icon';
+import NodeDropdown from './dropdown';
+import styles from './index.less';
+
+interface IProps {
+  id: string;
+  label: string;
+  name: string;
+  gap?: number;
+  className?: string;
+}
+
+const NodeHeader = ({ label, id, name, gap = 4, className }: IProps) => {
+  return (
+    <Flex
+      flex={1}
+      align="center"
+      justify={'space-between'}
+      gap={gap}
+      className={className}
+    >
+      <OperatorIcon
+        name={label as Operator}
+        color={operatorMap[label as Operator].color}
+      ></OperatorIcon>
+      <span className={styles.nodeTitle}>{name}</span>
+      <NodeDropdown id={id}></NodeDropdown>
+    </Flex>
+  );
+};
+
+export default NodeHeader;