Feature/newnew workflow loop node (#14863)

Co-authored-by: arkunzz <4873204@qq.com>
2025-03-05 17:41:15 +08:00
parent da91217bc9
commit 2c17bb2c36
131 changed files with 6031 additions and 159 deletions
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-result-panel.tsx
@@ -0,0 +1,122 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowRightSLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
+import TracingPanel from './tracing-panel'
+import { Loop } from '@/app/components/base/icons/src/vender/workflow'
+import cn from '@/utils/classnames'
+import type { NodeTracing } from '@/types/workflow'
+
+const i18nPrefix = 'workflow.singleRun'
+
+type Props = {
+  list: NodeTracing[][]
+  onHide: () => void
+  onBack: () => void
+  noWrap?: boolean
+}
+
+const LoopResultPanel: FC<Props> = ({
+  list,
+  onHide,
+  onBack,
+  noWrap,
+}) => {
+  const { t } = useTranslation()
+  const [expandedLoops, setExpandedLoops] = useState<Record<number, boolean>>([])
+
+  const toggleLoop = useCallback((index: number) => {
+    setExpandedLoops(prev => ({
+      ...prev,
+      [index]: !prev[index],
+    }))
+  }, [])
+
+  const main = (
+    <>
+      <div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
+        <div className='shrink-0 flex justify-between items-center h-8'>
+          <div className='system-xl-semibold text-text-primary truncate'>
+            {t(`${i18nPrefix}.testRunLoop`)}
+          </div>
+          <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          </div>
+        </div>
+        <div className='flex items-center py-2 space-x-1 text-text-accent-secondary cursor-pointer' onClick={onBack}>
+          <ArrowNarrowLeft className='w-4 h-4' />
+          <div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
+        </div>
+      </div>
+      {/* List */}
+      <div className={cn(!noWrap ? 'flex-grow overflow-auto' : 'max-h-full', 'p-2 bg-components-panel-bg')}>
+        {list.map((loop, index) => (
+          <div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
+            <div
+              className={cn(
+                'flex items-center justify-between w-full px-3 cursor-pointer',
+                expandedLoops[index] ? 'pt-3 pb-2' : 'py-3',
+                'rounded-xl text-left',
+              )}
+              onClick={() => toggleLoop(index)}
+            >
+              <div className={cn('flex items-center gap-2 flex-grow')}>
+                <div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
+                  <Loop className='w-3 h-3 text-text-primary-on-surface' />
+                </div>
+                <span className='system-sm-semibold-uppercase text-text-primary grow'>
+                  {t(`${i18nPrefix}.loop`)} {index + 1}
+                </span>
+                <RiArrowRightSLine className={cn(
+                  'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
+                  expandedLoops[index] && 'transform rotate-90',
+                )} />
+              </div>
+            </div>
+            {expandedLoops[index] && <div
+              className="grow h-px bg-divider-subtle"
+            ></div>}
+            <div className={cn(
+              'overflow-hidden transition-all duration-200',
+              expandedLoops[index] ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0',
+            )}>
+              <TracingPanel
+                list={loop}
+                className='bg-background-section-burn'
+              />
+
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+  const handleNotBubble = useCallback((e: React.MouseEvent) => {
+    // if not do this, it will trigger the message log modal disappear(useClickAway)
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+  }, [])
+
+  if (noWrap)
+    return main
+
+  return (
+    <div
+      className='absolute inset-0 z-10 rounded-2xl pt-10'
+      style={{
+        backgroundColor: 'rgba(16, 24, 40, 0.20)',
+      }}
+      onClick={handleNotBubble}
+    >
+      <div className='h-full rounded-2xl bg-components-panel-bg flex flex-col'>
+        {main}
+      </div>
+    </div >
+  )
+}
+export default React.memo(LoopResultPanel)