feat: Update Switch form data #1739 (#2029)

### What problem does this PR solve?

feat: Update Switch form data #1739
### Type of change


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

web/src/pages/flow/canvas/node/categorize-handle.tsx

@@ -1,6 +1,6 @@
 import { Handle, Position } from 'reactflow';
-// import { v4 as uuid } from 'uuid';
 
+import React from 'react';
 import styles from './index.less';
 
 const DEFAULT_HANDLE_STYLE = {
@@ -10,20 +10,19 @@ const DEFAULT_HANDLE_STYLE = {
   fontSize: 8,
 };
 
-interface IProps {
+interface IProps extends React.PropsWithChildren {
   top: number;
   right: number;
-  text: string;
+  id: string;
   idx?: number;
 }
 
-const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
+const CategorizeHandle = ({ top, right, id, children }: IProps) => {
   return (
     <Handle
       type="source"
       position={Position.Right}
-      // id={`CategorizeHandle${idx}`}
-      id={text}
+      id={id}
       isConnectable
       style={{
         ...DEFAULT_HANDLE_STYLE,
@@ -33,7 +32,7 @@ const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
         color: 'black',
       }}
     >
-      <span className={styles.categorizeAnchorPointText}>{text}</span>
+      <span className={styles.categorizeAnchorPointText}>{children || id}</span>
     </Handle>
   );
 };

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

@@ -3,7 +3,7 @@ import { Flex } from 'antd';
 import classNames from 'classnames';
 import lowerFirst from 'lodash/lowerFirst';
 import { Handle, NodeProps, Position } from 'reactflow';
-import { Operator, operatorMap } from '../../constant';
+import { Operator, SwitchElseTo, operatorMap } from '../../constant';
 import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import CategorizeHandle from './categorize-handle';
@@ -16,6 +16,7 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
   const style = operatorMap[data.label as Operator];
   const { t } = useTranslate('flow');
   const { positions } = useBuildCategorizeHandlePositions({ data, id });
+  const operatorName = data.label;
 
   return (
     <NodePopover nodeId={id}>
@@ -49,13 +50,18 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
           className={styles.handle}
           id={'c'}
         ></Handle>
+        {operatorName === Operator.Switch && (
+          <CategorizeHandle top={50} right={-4} id={SwitchElseTo}>
+            To
+          </CategorizeHandle>
+        )}
         {positions.map((position, idx) => {
           return (
             <CategorizeHandle
               top={position.top}
               right={position.right}
               key={idx}
-              text={position.text}
+              id={position.text}
               idx={idx}
             ></CategorizeHandle>
           );