feat: add settings and last run tab

web/app/components/base/tab-header/index.tsx

@@ -14,12 +14,14 @@ type Item = {
 export type ITabHeaderProps = {
   items: Item[]
   value: string
+  itemClassName?: string
   onChange: (value: string) => void
 }
 
 const TabHeader: FC<ITabHeaderProps> = ({
   items,
   value,
+  itemClassName,
   onChange,
 }) => {
   const renderItem = ({ id, name, icon, extra }: Item) => (
@@ -32,7 +34,7 @@ const TabHeader: FC<ITabHeaderProps> = ({
       onClick={() => onChange(id)}
     >
       {icon || ''}
-      <div className='ml-2'>{name}</div>
+      <div className={cn('ml-2', itemClassName)}>{name}</div>
       {extra || ''}
     </div>
   )

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -6,6 +6,7 @@ import {
   cloneElement,
   memo,
   useCallback,
+  useState,
 } from 'react'
 import {
   RiCloseLine,
@@ -13,16 +14,16 @@ import {
 } from '@remixicon/react'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
-import NextStep from './components/next-step'
+import NextStep from '../next-step'
-import PanelOperator from './components/panel-operator'
+import PanelOperator from '../panel-operator'
-import HelpLink from './components/help-link'
+import HelpLink from '../help-link'
 import {
   DescriptionInput,
   TitleInput,
-} from './components/title-description-input'
+} from '../title-description-input'
-import ErrorHandleOnPanel from './components/error-handle/error-handle-on-panel'
+import ErrorHandleOnPanel from '../error-handle/error-handle-on-panel'
-import RetryOnPanel from './components/retry/retry-on-panel'
+import RetryOnPanel from '../retry/retry-on-panel'
-import { useResizePanel } from './hooks/use-resize-panel'
+import { useResizePanel } from '../../hooks/use-resize-panel'
 import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
@@ -46,6 +47,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import type { Node } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
+import Tab, { TabType } from './tab'
 
 type BasePanelProps = {
   children: ReactNode
@@ -102,6 +104,7 @@ const BasePanel: FC<BasePanelProps> = ({
     saveStateToHistory(WorkflowHistoryEvent.NodeDescriptionChange)
   }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
+  const [tabType, setTabType] = useState<TabType>(TabType.settings)
   return (
     <div className={cn(
       'relative mr-2 h-full',
@@ -167,40 +170,56 @@ const BasePanel: FC<BasePanelProps> = ({
               onChange={handleDescriptionChange}
             />
           </div>
-        </div>
+          <div className='pl-4'>
-        <div>
+            <Tab
-          {cloneElement(children as any, { id, data })}
+              value={tabType}
-        </div>
+              onChange={setTabType}
-        <Split />
-        {
-          hasRetryNode(data.type) && (
-            <RetryOnPanel
-              id={id}
-              data={data}
-            />
-          )
-        }
-        {
-          hasErrorHandleNode(data.type) && (
-            <ErrorHandleOnPanel
-              id={id}
-              data={data}
             />
-          )
+          </div>
-        }
+          <Split />
-        {
+        </div>
-          !!availableNextBlocks.length && (
+
-            <div className='border-t-[0.5px] border-divider-regular p-4'>
+        {tabType === TabType.settings && (
-              <div className='system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary'>
+          <>
-                {t('workflow.panel.nextStep').toLocaleUpperCase()}
+            <div>
-              </div>
+              {cloneElement(children as any, { id, data })}
-              <div className='system-xs-regular mb-2 text-text-tertiary'>
-                {t('workflow.panel.addNextStep')}
-              </div>
-              <NextStep selectedNode={{ id, data } as Node} />
             </div>
-          )
+            <Split />
-        }
+            {
+              hasRetryNode(data.type) && (
+                <RetryOnPanel
+                  id={id}
+                  data={data}
+                />
+              )
+            }
+            {
+              hasErrorHandleNode(data.type) && (
+                <ErrorHandleOnPanel
+                  id={id}
+                  data={data}
+                />
+              )
+            }
+            {
+              !!availableNextBlocks.length && (
+                <div className='border-t-[0.5px] border-divider-regular p-4'>
+                  <div className='system-sm-semibold-uppercase mb-1 flex items-center text-text-secondary'>
+                    {t('workflow.panel.nextStep').toLocaleUpperCase()}
+                  </div>
+                  <div className='system-xs-regular mb-2 text-text-tertiary'>
+                    {t('workflow.panel.addNextStep')}
+                  </div>
+                  <NextStep selectedNode={{ id, data } as Node} />
+                </div>
+              )
+            }
+          </>
+        )}
+
+        {tabType === TabType.lastRun && (
+          <div>last run content</div>
+        )}
       </div>
     </div>
   )

web/app/components/workflow/nodes/_base/components/workflow-panel/tab.tsx

@@ -0,0 +1,34 @@
+'use client'
+import TabHeader from '@/app/components/base/tab-header'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export enum TabType {
+  settings = 'settings',
+  lastRun = 'lastRun',
+}
+
+type Props = {
+  value: TabType,
+  onChange: (value: TabType) => void
+}
+
+const Tab: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <TabHeader
+      items={[
+        { id: TabType.settings, name: t('workflow.debug.settingsTab').toLocaleUpperCase() },
+        { id: TabType.lastRun, name: t('workflow.debug.lastRunTab').toLocaleUpperCase() },
+      ]}
+      itemClassName='ml-0'
+      value={value}
+      onChange={onChange as any}
+    />
+  )
+}
+export default React.memo(Tab)

web/app/components/workflow/nodes/index.tsx

@@ -10,7 +10,7 @@ import {
   PanelComponentMap,
 } from './constants'
 import BaseNode from './_base/node'
-import BasePanel from './_base/panel'
+import BasePanel from './_base/components/workflow-panel'
 
 const CustomNode = (props: NodeProps) => {
   const nodeData = props.data
@@ -18,7 +18,7 @@ const CustomNode = (props: NodeProps) => {
 
   return (
     <>
-      <BaseNode { ...props }>
+      <BaseNode {...props}>
         <NodeComponent />
       </BaseNode>
     </>

web/i18n/en-US/workflow.ts

@@ -879,6 +879,10 @@ const translation = {
       updateFailure: 'Failed to update version',
     },
   },
+  debug: {
+    settingsTab: 'Settings',
+    lastRunTab: 'Last Run',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/workflow.ts

@@ -880,6 +880,10 @@ const translation = {
       updateFailure: '更新失败',
     },
   },
+  debug: {
+    settingsTab: '设置',
+    lastRunTab: '上次运行',
+  },
 }
 
 export default translation