Feat: Connect conditional operators to other operators #3221 (#8231)

### What problem does this PR solve?

Feat: Connect conditional operators to other operators #3221

### Type of change


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

web/src/pages/agent/canvas/node/switch-node.tsx

@@ -1,9 +1,12 @@
+import { IconFont } from '@/components/icon-font';
 import { useTheme } from '@/components/theme-provider';
+import { Card, CardContent } from '@/components/ui/card';
 import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
 import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Divider, Flex } from 'antd';
+import { Flex } from 'antd';
 import classNames from 'classnames';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import { SwitchOperatorOptions } from '../../constant';
 import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
 import { RightHandleStyle } from './handle-icon';
 import { useBuildSwitchHandlePositions } from './hooks';
@@ -29,29 +32,28 @@ const ConditionBlock = ({
 }) => {
   const items = condition?.items ?? [];
   const getLabel = useGetComponentLabelByValue(nodeId);
+
+  const renderOperatorIcon = useCallback((operator?: string) => {
+    const name = SwitchOperatorOptions.find((x) => x.value === operator)?.icon;
+    return <IconFont name={name!}></IconFont>;
+  }, []);
+
   return (
-    <Flex vertical className={styles.conditionBlock}>
-      {items.map((x, idx) => (
-        <div key={idx}>
-          <Flex>
-            <div
-              className={classNames(styles.conditionLine, styles.conditionKey)}
-            >
-              {getLabel(x?.cpn_id)}
-            </div>
-            <span className={styles.conditionOperator}>{x?.operator}</span>
-            <Flex flex={1} className={styles.conditionLine}>
-              {x?.value}
-            </Flex>
-          </Flex>
-          {idx + 1 < items.length && (
-            <Divider orientationMargin="0" className={styles.zeroDivider}>
-              {condition?.logical_operator}
-            </Divider>
-          )}
-        </div>
-      ))}
-    </Flex>
+    <Card>
+      <CardContent className="space-y-1 p-1">
+        {items.map((x, idx) => (
+          <div key={idx}>
+            <section className="flex justify-between gap-2 items-center text-xs">
+              <div className="flex-1 truncate text-background-checked">
+                {getLabel(x?.cpn_id)}
+              </div>
+              <span>{renderOperatorIcon(x?.operator)}</span>
+              <div className="flex-1 truncate">{x?.value}</div>
+            </section>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
   );
 };
 
@@ -87,7 +89,10 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
             <div key={idx}>
               <Flex vertical>
                 <Flex justify={'space-between'}>
-                  <span>{idx < positions.length - 1 && position.text}</span>
+                  <span className="text-text-sub-title text-xs translate-y-2">
+                    {idx < positions.length - 1 &&
+                      position.condition?.logical_operator?.toUpperCase()}
+                  </span>
                   <span>{getConditionKey(idx, positions.length)}</span>
                 </Flex>
                 {position.condition && (