feat: graph skill main struct

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

@@ -6,6 +6,7 @@ import { useSearchParams } from 'next/navigation'
 import {
   useEffect,
   useMemo,
+  useState,
 } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FeaturesProvider } from '@/app/components/base/features'
@@ -15,10 +16,12 @@ import WorkflowWithDefaultContext from '@/app/components/workflow'
 import {
   WorkflowContextProvider,
 } from '@/app/components/workflow/context'
+import SkillMain from '@/app/components/workflow/skill/main'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { useTriggerStatusStore } from '@/app/components/workflow/store/trigger-status'
 import {
   SupportUploadFileTypes,
+  ViewType,
 } from '@/app/components/workflow/types'
 import {
   initialEdges,
@@ -28,8 +31,8 @@ import { useAppContext } from '@/context/app-context'
 import { fetchRunDetail } from '@/service/log'
 import { useAppTriggers } from '@/service/use-tools'
 import { AppModeEnum } from '@/types/app'
+import ViewPicker from '../workflow/view-picker'
 import WorkflowAppMain from './components/workflow-main'
-
 import { useGetRunAndTraceUrl } from './hooks/use-get-run-and-trace-url'
 import {
   useWorkflowInit,
@@ -37,6 +40,8 @@ import {
 import { createWorkflowSlice } from './store/workflow/workflow-slice'
 
 const WorkflowAppWithAdditionalContext = () => {
+  const [viewType, setViewType] = useState(ViewType.graph)
+
   const {
     data,
     isLoading,
@@ -200,13 +205,25 @@ const WorkflowAppWithAdditionalContext = () => {
       edges={edgesData}
       nodes={nodesData}
     >
-      <FeaturesProvider features={initialFeatures}>
-        <WorkflowAppMain
-          nodes={nodesData}
-          edges={edgesData}
-          viewport={data.graph.viewport}
+      <div className="relative h-full w-full">
+        <ViewPicker
+          value={viewType}
+          onChange={setViewType}
         />
-      </FeaturesProvider>
+        {viewType === ViewType.graph
+          ? (
+              <FeaturesProvider features={initialFeatures}>
+                <WorkflowAppMain
+                  nodes={nodesData}
+                  edges={edgesData}
+                  viewport={data.graph.viewport}
+                />
+              </FeaturesProvider>
+            )
+          : (
+              <SkillMain />
+            )}
+      </div>
     </WorkflowWithDefaultContext>
   )
 }

web/app/components/workflow/header/header-in-normal.tsx

@@ -65,7 +65,7 @@ const HeaderInNormal = ({
 
   return (
     <div className="flex w-full items-center justify-between">
-      <div>
+      <div className="relative top-[30px]">
         <EditingTitle />
       </div>
       <div>

web/app/components/workflow/skill/main.tsx

@@ -0,0 +1,12 @@
+'use client'
+import type { FC } from 'react'
+import * as React from 'react'
+
+const SkillMain: FC = () => {
+  return (
+    <div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
+      Main
+    </div>
+  )
+}
+export default React.memo(SkillMain)

web/app/components/workflow/types.ts

@@ -517,3 +517,8 @@ export type Block = {
   title: string
   description?: string
 }
+
+export enum ViewType {
+  graph = 'graph',
+  skill = 'skill',
+}

web/app/components/workflow/view-picker.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import type { FC } from 'react'
+import * as React from 'react'
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import SegmentedControl from '@/app/components/base/segmented-control'
+import { cn } from '@/utils/classnames'
+import { ViewType } from '../workflow/types'
+
+type ViewPickerProps = {
+  value: ViewType
+  onChange: (value: ViewType) => void
+  className?: string
+}
+
+const ViewPicker: FC<ViewPickerProps> = ({
+  value,
+  onChange,
+  className,
+}) => {
+  const { t } = useTranslation()
+  const options = useMemo(() => ([
+    { value: ViewType.graph, text: t('viewPicker.graph', { ns: 'workflow' }) },
+    { value: ViewType.skill, text: t('viewPicker.skill', { ns: 'workflow' }) },
+  ]), [t])
+
+  const handleChange = useCallback((nextValue: string | number | symbol) => {
+    if (nextValue === value)
+      return
+    onChange(nextValue as ViewType)
+  }, [onChange, value])
+
+  return (
+    <SegmentedControl
+      className={cn('absolute left-3 top-3 z-[999] text-text-accent-light-mode-only', className)}
+      options={options}
+      value={value}
+      onChange={handleChange}
+      btnClassName="system-sm-semibold-uppercase text-text-secondary"
+      activeClassName="!text-text-accent-light-mode-only"
+      size="regular"
+      padding="none"
+    />
+  )
+}
+
+export default React.memo(ViewPicker)

web/i18n/en-US/workflow.json

@@ -1062,5 +1062,7 @@
   "versionHistory.nameThisVersion": "Name this version",
   "versionHistory.releaseNotesPlaceholder": "Describe what changed",
   "versionHistory.restorationTip": "After version restoration, the current draft will be overwritten.",
-  "versionHistory.title": "Versions"
+  "versionHistory.title": "Versions",
+  "viewPicker.graph": "Graph",
+  "viewPicker.skill": "Skill"
 }

web/i18n/zh-Hans/workflow.json

@@ -1056,5 +1056,7 @@
   "versionHistory.nameThisVersion": "命名",
   "versionHistory.releaseNotesPlaceholder": "请描述变更",
   "versionHistory.restorationTip": "版本回滚后，当前草稿将被覆盖。",
-  "versionHistory.title": "版本"
+  "versionHistory.title": "版本",
+  "viewPicker.graph": "工作流图",
+  "viewPicker.skill": "技能"
 }