Feat: Add the iteration Node #4242 (#4247)

### What problem does this PR solve?

Feat: Add the iteration Node #4242

### Type of change


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

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

@@ -8,15 +8,17 @@ import NodeDropdown from './dropdown';
 import { NextNodePopover } from './popover';
 
 import { RunTooltip } from '../../flow-tooltip';
-import styles from './index.less';
 interface IProps {
   id: string;
   label: string;
   name: string;
   gap?: number;
   className?: string;
+  wrapperClassName?: string;
 }
 
+const ExcludedRunStateOperators = [Operator.Answer];
+
 export function RunStatus({ id, name, label }: IProps) {
   const { t } = useTranslate('flow');
   return (
@@ -35,10 +37,17 @@ export function RunStatus({ id, name, label }: IProps) {
   );
 }
 
-const NodeHeader = ({ label, id, name, gap = 4, className }: IProps) => {
+const NodeHeader = ({
+  label,
+  id,
+  name,
+  gap = 4,
+  className,
+  wrapperClassName,
+}: IProps) => {
   return (
-    <section>
-      {label !== Operator.Answer && (
+    <section className={wrapperClassName}>
+      {!ExcludedRunStateOperators.includes(label as Operator) && (
         <RunStatus id={id} name={name} label={label}></RunStatus>
       )}
       <Flex
@@ -52,7 +61,9 @@ const NodeHeader = ({ label, id, name, gap = 4, className }: IProps) => {
           name={label as Operator}
           color={operatorMap[label as Operator].color}
         ></OperatorIcon>
-        <span className={styles.nodeTitle}>{name}</span>
+        <span className="truncate text-center font-semibold text-sm">
+          {name}
+        </span>
         <NodeDropdown id={id} label={label}></NodeDropdown>
       </Flex>
     </section>