Feat: Initialize the data pipeline canvas. #9869 (#9870)

### What problem does this PR solve?
Feat: Initialize the data pipeline canvas. #9869

### Type of change


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

web/src/pages/data-flow/canvas/node/node-header.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import { memo } from 'react';
+import { Operator } from '../../constant';
+import OperatorIcon from '../../operator-icon';
+interface IProps {
+  id: string;
+  label: string;
+  name: string;
+  gap?: number;
+  className?: string;
+  wrapperClassName?: string;
+}
+
+const InnerNodeHeader = ({
+  label,
+  name,
+  className,
+  wrapperClassName,
+}: IProps) => {
+  return (
+    <section className={cn(wrapperClassName, 'pb-4')}>
+      <div className={cn(className, 'flex gap-2.5')}>
+        <OperatorIcon name={label as Operator}></OperatorIcon>
+        <span className="truncate text-center font-semibold text-sm">
+          {name}
+        </span>
+      </div>
+    </section>
+  );
+};
+
+const NodeHeader = memo(InnerNodeHeader);
+
+export default NodeHeader;