trigger interaction

This commit is contained in:
jZonG 2025-04-22 16:54:22 +08:00
parent 0ff890d3a0
commit 1e2ee40b2a
3 changed files with 83 additions and 37 deletions

View File

@ -1,36 +1,76 @@
import type { FC } from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { RiLoader2Line, RiStopCircleFill } from '@remixicon/react'
import Tooltip from '@/app/components/base/tooltip'
import { useStore } from '../store'
import useCurrentVars from '../hooks/use-current-vars'
import { WorkflowRunningStatus } from '@/app/components/workflow/types'
import { NodeRunningStatus } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
const VariableInspectTrigger: FC = () => {
const { t } = useTranslation()
const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
const workflowRunningData = useStore(s => s.workflowRunningData)
const isRunning = useMemo(() => {
if (!workflowRunningData)
return false
if (workflowRunningData.result.status === WorkflowRunningStatus.Running)
return true
return (workflowRunningData.tracing || []).some(tracingData => tracingData.status === NodeRunningStatus.Running)
}, [workflowRunningData])
const {
currentVars,
clearCurrentVars,
} = useCurrentVars()
// ##TODD stop handle
if (showVariableInspectPanel)
return null
return (
<div className={cn('flex items-center gap-1')}>
{/* view button */}
{!isRunning && !currentVars.length && (
<div
className='system-2xs-semibold-uppercase flex h-5 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-tertiary shadow-lg backdrop-blur-sm hover:bg-background-default-hover'
onClick={() => setShowVariableInspectPanel(true)}
>
Variable inspect
{t('workflow.debug.variableInspect.trigger.normal')}
</div>
{/* caching button */}
)}
{!isRunning && currentVars.length > 0 && (
<>
<div
className='system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
onClick={() => setShowVariableInspectPanel(true)}
>
{t('workflow.debug.variableInspect.trigger.cached')}
</div>
<div
className='system-xs-medium flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 text-text-tertiary shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent hover:text-text-accent'
onClick={clearCurrentVars}
>
{t('workflow.debug.variableInspect.trigger.clear')}
</div>
</>
)}
{isRunning && (
<>
<div
className='system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
onClick={() => setShowVariableInspectPanel(true)}
>
<RiLoader2Line className='h-4 w-4' />
<span className='text-text-accent'>Caching running status</span>
<span className='text-text-accent'>{t('workflow.debug.variableInspect.trigger.running')}</span>
</div>
{/* stop button */}
<Tooltip
popupContent={'Stop run'}
popupContent={t('workflow.debug.variableInspect.trigger.stop')}
>
<div
className='flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
@ -39,20 +79,8 @@ const VariableInspectTrigger: FC = () => {
<RiStopCircleFill className='h-4 w-4 text-text-accent' />
</div>
</Tooltip>
{/* finish button */}
<div
className='system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
onClick={() => setShowVariableInspectPanel(true)}
>
View cached variables
</div>
{/* clear button */}
<div
className='system-xs-medium flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 text-text-tertiary shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent hover:text-text-accent'
// onClick={() => {}}
>
Clear
</div>
</>
)}
</div>
)
}

View File

@ -914,6 +914,15 @@ const translation = {
description: 'The results of the last run will be displayed here',
runThisNode: 'Run this node',
},
variableInspect: {
trigger: {
normal: 'Variable Inspect',
running: 'Caching running status',
stop: 'Stop run',
cached: 'View cached variables',
clear: 'Clear',
},
},
},
}

View File

@ -915,6 +915,15 @@ const translation = {
description: '上次运行的结果将显示在这里',
runThisNode: '运行此节点',
},
variableInspect: {
trigger: {
normal: '变量检查',
running: '缓存中',
stop: '停止运行',
cached: '查看缓存',
clear: '清除',
},
},
},
}