feat(web): workflow ui upgrade

web/src/views/Workflow/components/Nodes/AddNode.tsx

@@ -1,11 +1,11 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-09 18:31:30 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-09 18:31:30 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-06 11:43:58
  */
 import { useState } from 'react';
-import { Popover } from 'antd';
+import { Popover, Flex } from 'antd';
 import clsx from 'clsx';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
 import { nodeLibrary, graphNodeLibrary, edgeAttrs, nodeWidth } from '../../constant';
@@ -20,13 +20,13 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
   const handleNodeSelect = (selectedNodeType: any) => {
     const parentBBox = node.getBBox();
     const cycleId = data.cycle;
-    const horizontalSpacing = 20;
+    const horizontalSpacing = 0;
 
     const id = `${selectedNodeType.type.replace(/-/g, '_') }_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
     const newNode = graph.addNode({
       ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
       x: parentBBox.x + horizontalSpacing,
-      y: parentBBox.y,
+      y: parentBBox.y - 12,
       id,
       data: {
         id,
@@ -91,11 +91,19 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
             };
           }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
           
-          const padding = 20;
+          const padding = 50;
           const newWidth = Math.max(nodeWidth, bounds.maxX - bounds.minX + padding * 2);
           const newHeight = Math.max(120, bounds.maxY - bounds.minY + padding * 2);
           
           loopNode.prop('size', { width: newWidth, height: newHeight });
+          
+          // Update right port x position
+          const ports = loopNode.getPorts();
+          ports.forEach(port => {
+            if (port.group === 'right' && port.args) {
+              loopNode.portProp(port.id!, 'args/x', newWidth);
+            }
+          });
         }
       };
       
@@ -161,16 +169,18 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
       onOpenChange={setOpen}
       placement="bottomLeft"
     >
-      <div 
-        className={clsx('rb:group rb:relative rb:h-11 rb:w-22 rb:border rb:rounded-xl rb:flex rb:items-center rb:justify-center rb:text-[12px] rb:p-1 rb:box-border rb:cursor-pointer', {
-          'rb:border-orange-500 rb:border-[3px] rb:bg-white rb:text-gray-700': data.isSelected,
-          'rb:border-[#d1d5db] rb:bg-white rb:text-[#374151]': !data.isSelected
+      <Flex
+        align="center"
+        justify="center"
+        gap={4}
+        className={clsx('rb:text-[#212332] rb:font-medium rb:text-[12px] rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:border rb:rounded-lg rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:border-[#DFE4ED] rb:flex rb:items-center rb:justify-center', {
+          'rb:border-orange-500 rb:border-[3px] rb:bg-[#FCFCFD] rb:text-[#475467]': data.isSelected,
+          'rb:border-[#d1d5db] rb:bg-[#FCFCFD] rb:text-[#374151]': !data.isSelected
         })}
       >
-        <span className="rb:overflow-hidden rb:whitespace-nowrap rb:text-ellipsis">
-          {data.icon} {data.label}
-        </span>
-      </div>
+        <div className="rb:size-4 rb:bg-cover rb:bg-[url('src/assets/images/workflow/node_plus.png')]"></div>
+        {data.label}
+      </Flex>
     </Popover>
   );
 };

web/src/views/Workflow/components/Nodes/ConditionNode.tsx

@@ -1,32 +1,65 @@
 import { useTranslation } from 'react-i18next'
 import clsx from 'clsx';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import { Flex } from 'antd';
 
+import NodeTools from './NodeTools'
+
+const caculateIsSet = (item: any, type: string) => {
+  switch(type) {
+    case 'categories':
+      return typeof item?.class_name === 'string' && item?.class_name !== ''
+    case 'cases':
+      return item.expressions.length > 0 && item.expressions.filter((vo: any) => {
+        const keys = Object.keys(vo)
+        return keys.length === 0 || (keys.length > 0
+          && ((['not_empty', 'empty'].includes(vo.operator) && (['undefined', 'null'].includes(typeof vo.left) || vo.left === ''))
+          || (!['not_empty', 'empty'].includes(vo.operator) && (['undefined', 'null'].includes(typeof vo.right) || vo.right === ''))))
+      }).length === 0
+  }
+}
 const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
   const data = node?.getData() || {};
   const { t } = useTranslation()
 
   return (
-    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
-      'rb:border-[#155EEF]': data.isSelected,
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-3 rb:border rb:rounded-2xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)]', {
+      'rb:border-[#171719]': data.isSelected,
       'rb:border-[#DFE4ED]': !data.isSelected
     })}>
-      <div className="rb:flex rb:items-center rb:justify-between">
-        <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
-          <img src={data.icon} className="rb:w-5 rb:h-5" />
-          <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
-        </div>
+      <NodeTools node={node} />
+      <Flex align="center" gap={8} className="rb:flex-1">
+        <img src={data.icon} className="rb:size-6" />
+        <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
+      </Flex>
 
-        <div
-          className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
-          onClick={(e) => {
-            e.stopPropagation()
-            node.remove()
-          }}
-        ></div>
-      </div>
-
-      <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-7">{t('workflow.clickToConfigure')}</div>
+      {data.type === 'question-classifier' &&
+        <Flex vertical gap={4} className="rb:mt-3!">
+          {data.config?.categories?.defaultValue.map((item: any, index: number) => (
+            <div key={index} className="rb:bg-[#F0F3F8] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:rounded-md rb:py-1 rb:px-1.5 rb:text-[10px] rb:text-[#5B6167] rb:font-medium rb:leading-3.5">
+              <Flex justify="space-between">
+                <span>{t('workflow.config.question-classifier.class_name')} {index + 1}</span>
+                {caculateIsSet(item, 'categories') ? t(`workflow.config.${data.type}.set`) : t(`workflow.config.${data.type}.unset`)}
+              </Flex>
+            </div>
+          ))}
+        </Flex>
+      }
+      {data.type === 'if-else' &&
+        <Flex vertical gap={4} className="rb:mt-3!">
+          {data.config?.cases?.defaultValue.map((item: any, index: number) => (
+            <div key={index} className="rb:bg-[#F0F3F8] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:rounded-md rb:py-1 rb:px-1.5 rb:text-[10px] rb:text-[#5B6167] rb:font-medium rb:leading-3.5">
+              <Flex justify="space-between">
+                <span>{index === 0 ? 'IF' : `ELIF`}</span>
+                {caculateIsSet(item, 'cases') ? t(`workflow.config.${data.type}.set`) : t(`workflow.config.${data.type}.unset`)}
+              </Flex>
+            </div>
+          ))}
+          <div className="rb:bg-[#F0F3F8] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:rounded-md rb:py-1 rb:px-1.5 rb:text-[10px] rb:text-[#5B6167] rb:font-medium rb:leading-3.5">
+            ELSE
+          </div>
+        </Flex>
+      }
     </div>
   );
 };

web/src/views/Workflow/components/Nodes/GroupStartNode.tsx

@@ -1,11 +1,10 @@
 import clsx from 'clsx';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
-import startIcon from '@/assets/images/workflow/start.png';
 
 const GroupStartNode: ReactShapeConfig['component'] = () => {
   return (
-    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)] rb:border-[#DFE4ED]')}>
-      <img src={startIcon} className="rb:w-6 rb:h-6" />
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:border rb:rounded-xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:border-[#DFE4ED] rb:flex rb:items-center rb:justify-center')}>
+      <div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/workflow/start.svg')]" />
     </div>
   );
 };

web/src/views/Workflow/components/Nodes/LoopNode.tsx

@@ -2,7 +2,10 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next'
 import clsx from 'clsx';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import { Flex } from 'antd';
+
 import { graphNodeLibrary, edgeAttrs } from '../../constant';
+import NodeTools from './NodeTools'
 
 const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
   const data = node.getData() || {};
@@ -32,7 +35,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
       const addNode = graph.addNode({
         ...graphNodeLibrary.addStart,
         x: cycleStartBBox.x + 84,
-        y: cycleStartBBox.y,
+        y: cycleStartBBox.y + 4,
         data: {
           type: 'add-node',
           label: t('workflow.addNode'),
@@ -67,8 +70,8 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
     if (existingCycleNodes.length > 0) return;
     // 添加默认子节点
     const parentBBox = node.getBBox();
-    const centerX = parentBBox.x + 24; // 默认节点宽度的一半
-    const centerY = parentBBox.y + 50; // 默认节点高度的一半
+    const centerX = parentBBox.x + 24;
+    const centerY = parentBBox.y + 70;
 
     const cycleStartNodeId = `cycle_start_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
     const cycleStartNode = graph.addNode({
@@ -87,7 +90,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
     const addNode = graph.addNode({
       ...graphNodeLibrary.addStart,
       x: centerX + 84,
-      y: centerY,
+      y: centerY + 4,
       data: {
         type: 'add-node',
         label: t('workflow.addNode'),
@@ -117,25 +120,16 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
   }
 
   return (
-    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
-      'rb:border-[#155EEF]': data.isSelected,
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-3 rb:border rb:rounded-2xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)]', {
+      'rb:border-[#171719]': data.isSelected,
       'rb:border-[#DFE4ED]': !data.isSelected
     })}>
-      <div className="rb:flex rb:items-center rb:justify-between">
-        <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
-          <img src={data.icon} className="rb:w-5 rb:h-5" />
-          <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
-        </div>
-        
-        <div 
-          className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
-          onClick={(e) => {
-            e.stopPropagation()
-            node.remove()
-          }}
-        ></div>
-      </div>
-      <div className="rb:mt-3 rb:min-h-[calc(100%-36px)] rb:w-full rb:bg-[radial-gradient(circle,#e5e7eb_1px,transparent_1px)] rb:bg-size-[12px_12px]"></div>
+      <NodeTools node={node} />
+      <Flex align="center" gap={8} className="rb:flex-1">
+        <img src={data.icon} className="rb:size-6" />
+        <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
+      </Flex>
+      <div className="rb:mt-3 rb:min-h-[calc(100%-36px)] rb:w-full rb:bg-[radial-gradient(circle,#939AB1_1px,#F0F3F8_1px)] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)] rb:rounded-[10px] rb:bg-size-[12px_12px]"></div>
     </div>
   );
 };

web/src/views/Workflow/components/Nodes/NodeTools.tsx

@@ -0,0 +1,43 @@
+import { type FC } from 'react';
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx';
+import { Node } from '@antv/x6';
+import { Flex, Dropdown, type MenuProps } from 'antd';
+
+const NodeTools: FC<{ node: Node }> = ({
+  node
+}) => {
+  const data = node?.getData() || {};
+  const { t } = useTranslation()
+
+  const handleClick: MenuProps['onClick'] = (e) => {
+    switch (e.key) {
+      case 'delete':
+        node.remove()
+        break;
+      case 'copy':
+        break;
+    }
+  }
+  return (
+    <div className={clsx("rb:absolute rb:p-1 rb:bg-white rb:-top-7.5 rb:right-0 rb:rounded-lg", {
+      'rb:block': data.isSelected,
+      'rb:hidden': !data.isSelected
+    })}>
+      <Dropdown
+        menu={{
+          items: [
+            { key: 'delete', icon: <div className="rb:size-4 rb:bg-cover rb:bg-[url('src/assets/images/common/delete_dark.svg')]"></div>, label: <Flex>{t('common.delete')}</Flex>},
+            // { key: 'copy', icon: <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/copy_dark.svg')]"></div>, label: t('common.copy') }
+          ],
+          onClick: handleClick
+        }}
+      >
+        <div className="rb:cursor-pointer rb:size-4 rb:hover:bg-[#F6F6F6] rb:rounded-sm rb:bg-cover rb:bg-[url(@/assets/images/common/dash.svg)]">
+        </div>
+      </Dropdown>
+    </div>
+  )
+}
+
+export default NodeTools;

web/src/views/Workflow/components/Nodes/NormalNode.tsx

@@ -1,32 +1,26 @@
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next'
 import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import { Flex } from 'antd';
+
+import NodeTools from './NodeTools'
 
 const NormalNode: ReactShapeConfig['component'] = ({ node }) => {
   const data = node?.getData() || {}
   const { t } = useTranslation()
 
   return (
-    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-2.5 rb:border rb:rounded-xl rb:bg-white rb:hover:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.12)]', {
-      'rb:border-[#155EEF]': data.isSelected,
+    <div className={clsx('rb:cursor-pointer rb:group rb:relative rb:h-full rb:w-full rb:p-3 rb:border rb:rounded-2xl rb:bg-[#FCFCFD] rb:shadow-[0px_2px_4px_0px_rgba(23,23,25,0.03)]', {
+      'rb:border-[#171719]': data.isSelected,
       'rb:border-[#DFE4ED]': !data.isSelected
     })}>
-      <div className="rb:flex rb:items-center rb:justify-between">
-        <div className="rb:flex rb:items-center rb:gap-2 rb:flex-1">
-          <img src={data.icon} className="rb:w-5 rb:h-5" />
-          <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
-        </div>
-        
-        <div 
-          className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]" 
-          onClick={(e) => {
-            e.stopPropagation()
-            node.remove()
-          }}
-        ></div>
-      </div>
+      <NodeTools node={node} />
+      <Flex align="center" gap={8} className="rb:flex-1">
+        <img src={data.icon} className="rb:size-6" />
+        <div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
+      </Flex>
 
-      <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-1.5">{t('workflow.clickToConfigure')}</div>
+      <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-3">{t('workflow.clickToConfigure')}</div>
     </div>
   );
 };