adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): node run status

Browse Source
This commit is contained in:
zhaoying
2026-04-15 16:09:38 +08:00
parent 3e48d620b2
commit 643a3fbe09
8 changed files with 115 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/views/Workflow/components/Nodes/ConditionNode.tsx
View File

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import type { ReactShapeConfig } from '@antv/x6-react-shape';
import { Flex } from 'antd';
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
import NodeTools from './NodeTools'
import { useVariableList } from '../Properties/hooks/useVariableList'
@@ -47,13 +48,23 @@ const ConditionNode: ReactShapeConfig['component'] = ({ node }) => {
return (
<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-[#FCFCFD]': !data.isSelected
'rb:border-[#171719]!': data.isSelected,
'rb:border-[#FCFCFD]': !data.isSelected,
'rb:border-[#369F21]!': !data.isSelected && data.executionStatus === 'completed',
'rb:border-[#FF5D34]!': !data.isSelected && data.executionStatus === 'failed',
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
<div className="rb:wrap-break-word rb:line-clamp-1 rb:flex-1">{data.name ?? t(`workflow.${data.type}`)}</div>
{data.executionStatus === 'completed'
? <CheckCircleFilled style={{ color: '#369F21', fontSize: 16 }} />
: data.executionStatus === 'failed'
? <CloseCircleFilled style={{ color: '#FF5D34', fontSize: 16 }} />
: data.executionStatus === 'running'
? <LoadingOutlined style={{ color: '#5B6167', fontSize: 16 }} />
: null
}
</Flex>
{data.type === 'question-classifier' &&

15
web/src/views/Workflow/components/Nodes/LoopNode.tsx
View File

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import type { ReactShapeConfig } from '@antv/x6-react-shape';
import { Flex } from 'antd';
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
import { graphNodeLibrary, edgeAttrs } from '../../constant';
import NodeTools from './NodeTools'
@@ -131,12 +132,22 @@ 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-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-[#FCFCFD]': !data.isSelected
'rb:border-[#FCFCFD]': !data.isSelected,
'rb:border-[#369F21]!': !data.isSelected && data.executionStatus === 'completed',
'rb:border-[#FF5D34]!': !data.isSelected && data.executionStatus === 'failed',
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
<div className="rb:wrap-break-word rb:line-clamp-1 rb:flex-1">{data.name ?? t(`workflow.${data.type}`)}</div>
{data.executionStatus === 'completed'
? <CheckCircleFilled style={{ color: '#369F21', fontSize: 16 }} />
: data.executionStatus === 'failed'
? <CloseCircleFilled style={{ color: '#FF5D34', fontSize: 16 }} />
: data.executionStatus === 'running'
? <LoadingOutlined style={{ color: '#5B6167', fontSize: 16 }} />
: null
}
</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>

17
web/src/views/Workflow/components/Nodes/NormalNode.tsx
View File

@@ -2,6 +2,7 @@ import clsx from 'clsx';
import { useTranslation } from 'react-i18next'
import type { ReactShapeConfig } from '@antv/x6-react-shape';
import { Flex } from 'antd';
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons';
import NodeTools from './NodeTools'
@@ -11,13 +12,23 @@ const NormalNode: ReactShapeConfig['component'] = ({ node }) => {
return (
<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-[#FCFCFD]': !data.isSelected
'rb:border-[#171719]!': data.isSelected,
'rb:border-[#FCFCFD]': !data.isSelected,
'rb:border-[#369F21]!': !data.isSelected && data.executionStatus === 'completed',
'rb:border-[#FF5D34]!': !data.isSelected && data.executionStatus === 'failed',
})}>
<NodeTools node={node} />
<Flex align="center" gap={8} className="rb:flex-1">
<div className={`rb:size-6 rb:bg-cover ${data.icon}`} />
<div className="rb:wrap-break-word rb:line-clamp-1">{data.name ?? t(`workflow.${data.type}`)}</div>
<div className="rb:wrap-break-word rb:line-clamp-1 rb:flex-1">{data.name ?? t(`workflow.${data.type}`)}</div>
{data.executionStatus === 'completed'
? <CheckCircleFilled style={{ color: '#369F21', fontSize: 16 }} />
: data.executionStatus === 'failed'
? <CloseCircleFilled style={{ color: '#FF5D34', fontSize: 16 }} />
: data.executionStatus === 'running'
? <LoadingOutlined style={{ color: '#5B6167', fontSize: 16 }} />
: null
}
</Flex>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:mt-3">{t('workflow.clickToConfigure')}</div>