feat: add loading and empty states for version history panel; enhance version management with new types and translations

2025-03-05 17:15:59 +08:00 · 2025-03-05 17:15:59 +08:00 · 4dbafcc4a7
commit 4dbafcc4a7
parent 93978931c2
20 changed files with 623 additions and 45 deletions
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@ -0,0 +1,112 @@
+import React, { type FC, useCallback, useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { VersionHistory } from '@/types/workflow'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import Input from '../../base/input'
+import Textarea from '../../base/textarea'
+import Button from '../../base/button'
+import Toast from '@/app/components/base/toast'
+
+type VersionInfoModalProps = {
+  isOpen: boolean
+  versionInfo: VersionHistory
+  onClose: () => void
+  onPublish: (params: { title: string; releaseNotes: string }) => void
+}
+
+const TITLE_MAX_LENGTH = 15
+const RELEASE_NOTES_MAX_LENGTH = 100
+
+const VersionInfoModal: FC<VersionInfoModalProps> = ({
+  isOpen,
+  versionInfo,
+  onClose,
+  onPublish,
+}) => {
+  const { t } = useTranslation()
+  const [title, setTitle] = useState(versionInfo.marked_name || '')
+  const [releaseNotes, setReleaseNotes] = useState(versionInfo.marked_comment || '')
+  const [titleError, setTitleError] = useState(false)
+  const [releaseNotesError, setReleaseNotesError] = useState(false)
+
+  const handlePublish = () => {
+    if (title.length > TITLE_MAX_LENGTH) {
+      setTitleError(true)
+      Toast.notify({
+        type: 'error',
+        message: t('workflow.versionHistory.editField.titleLengthLimit', { limit: TITLE_MAX_LENGTH }),
+      })
+      return
+    }
+    else {
+      titleError && setTitleError(false)
+    }
+
+    if (releaseNotes.length > RELEASE_NOTES_MAX_LENGTH) {
+      setReleaseNotesError(true)
+      Toast.notify({
+        type: 'error',
+        message: t('workflow.versionHistory.editField.releaseNotesLengthLimit', { limit: TITLE_MAX_LENGTH }),
+      })
+      return
+    }
+    else {
+      releaseNotesError && setReleaseNotesError(false)
+    }
+
+    onPublish({ title, releaseNotes })
+    onClose()
+  }
+
+  const handleTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value)
+  }, [])
+
+  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setReleaseNotes(e.target.value)
+  }, [])
+
+  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
+    <div className='relative w-full p-6 pb-4 pr-14'>
+      <div className='text-text-primary title-2xl-semi-bold first-letter:capitalize'>
+        {versionInfo.marked_name ? t('workflow.versionHistory.editVersionInfo') : t('workflow.versionHistory.nameThisVersion')}
+      </div>
+      <div className='w-8 h-8 flex items-center justify-center p-1.5 absolute top-5 right-5 cursor-pointer' onClick={onClose}>
+        <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
+      </div>
+    </div>
+    <div className='flex flex-col gap-y-4 px-6 py-3'>
+      <div className='flex flex-col gap-y-1'>
+        <div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
+          {t('workflow.versionHistory.editField.title')}
+        </div>
+        <Input
+          value={title}
+          placeholder={t('workflow.versionHistory.nameThisVersion')}
+          onChange={handleTitleChange}
+          destructive={titleError}
+        />
+      </div>
+      <div className='flex flex-col gap-y-1'>
+        <div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
+          {t('workflow.versionHistory.editField.releaseNotes')}
+        </div>
+        <Textarea
+          value={releaseNotes}
+          placeholder={t('workflow.versionHistory.releaseNotesPlaceholder')}
+          onChange={handleDescriptionChange}
+          destructive={releaseNotesError}
+        />
+      </div>
+    </div>
+    <div className='flex justify-end p-6 pt-5'>
+      <div className='flex items-center gap-x-3'>
+        <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' onClick={handlePublish}>{t('workflow.common.publish')}</Button>
+      </div>
+    </div>
+  </Modal>
+}
+
+export default VersionInfoModal
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@ -28,7 +28,7 @@ import {
  useWorkflowRun,
 } from '../hooks'
 import AppPublisher from '../../app/app-publisher'
-import { ToastContext } from '../../base/toast'
+import Toast, { ToastContext } from '../../base/toast'
 import Divider from '../../base/divider'
 import RunAndHistory from './run-and-history'
 import EditingTitle from './editing-title'
@ -43,6 +43,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { publishWorkflow } from '@/service/workflow'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import { useResetWorkflowVersionHistory } from '@/service/use-workflow'

 const Header: FC = () => {
  const { t } = useTranslation()
@ -112,11 +113,30 @@ const Header: FC = () => {
    setShowWorkflowVersionHistoryPanel(false)
  }, [workflowStore, handleLoadBackupDraft, setShowWorkflowVersionHistoryPanel])

+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+
  const handleRestore = useCallback(() => {
+    setShowWorkflowVersionHistoryPanel(false)
    workflowStore.setState({ isRestoring: false })
    workflowStore.setState({ backupDraft: undefined })
-    handleSyncWorkflowDraft(true)
-  }, [handleSyncWorkflowDraft, workflowStore])
+    handleSyncWorkflowDraft(true, false, {
+      onSuccess: () => {
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.restoreSuccess'),
+        })
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.restoreFailure'),
+        })
+      },
+      onSettled: () => {
+        resetWorkflowVersionHistory()
+      },
+    })
+  }, [handleSyncWorkflowDraft, workflowStore, setShowWorkflowVersionHistoryPanel, resetWorkflowVersionHistory, t])

  const onPublish = useCallback(async () => {
    if (handleCheckBeforePublish()) {
@ -227,7 +247,7 @@ const Header: FC = () => {
          <div className='flex justify-end items-center gap-x-2'>
            <Button
              onClick={handleRestore}
-              disabled={currentVersion?.version === WorkflowVersion.Draft}
+              disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
              variant='primary'
            >
              {t('workflow.common.restore')}
--- a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
@ -105,7 +105,14 @@ export const useNodesSyncDraft = () => {
    }
  }, [getPostParams, params.appId, getNodesReadOnly])

-  const doSyncWorkflowDraft = useCallback(async (notRefreshWhenSyncError?: boolean) => {
+  const doSyncWorkflowDraft = useCallback(async (
+    notRefreshWhenSyncError?: boolean,
+    callback?: {
+      onSuccess?: () => void
+      onError?: () => void
+      onSettled?: () => void
+    },
+  ) => {
    if (getNodesReadOnly())
      return
    const postParams = getPostParams()
@ -119,6 +126,7 @@ export const useNodesSyncDraft = () => {
        const res = await syncWorkflowDraft(postParams)
        setSyncWorkflowDraftHash(res.hash)
        setDraftUpdatedAt(res.updated_at)
+        callback?.onSuccess && callback.onSuccess()
      }
      catch (error: any) {
        if (error && error.json && !error.bodyUsed) {
@ -127,16 +135,28 @@ export const useNodesSyncDraft = () => {
              handleRefreshWorkflowDraft()
          })
        }
+        callback?.onError && callback.onError()
+      }
+      finally {
+        callback?.onSettled && callback.onSettled()
      }
    }
  }, [workflowStore, getPostParams, getNodesReadOnly, handleRefreshWorkflowDraft])

-  const handleSyncWorkflowDraft = useCallback((sync?: boolean, notRefreshWhenSyncError?: boolean) => {
+  const handleSyncWorkflowDraft = useCallback((
+    sync?: boolean,
+    notRefreshWhenSyncError?: boolean,
+    callback?: {
+      onSuccess?: () => void
+      onError?: () => void
+      onSettled?: () => void
+    },
+  ) => {
    if (getNodesReadOnly())
      return

    if (sync)
-      doSyncWorkflowDraft(notRefreshWhenSyncError)
+      doSyncWorkflowDraft(notRefreshWhenSyncError, callback)
    else
      debouncedSyncWorkflowDraft(doSyncWorkflowDraft)
  }, [debouncedSyncWorkflowDraft, doSyncWorkflowDraft, getNodesReadOnly])
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@ -1,4 +1,4 @@
-import React, { type FC } from 'react'
+import React, { type FC, useCallback } from 'react'
 import { RiMoreFill } from '@remixicon/react'
 import { VersionHistoryContextMenuOptions } from '../../../types'
 import MenuItem from './menu-item'
@ -26,22 +26,27 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
    options,
  } = useContextMenu(props)

+  const handleClickTrigger = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    setOpen(v => !v)
+  }, [setOpen])
+
  return (
    <PortalToFollowElem
      placement={'bottom-end'}
      offset={{
        mainAxis: 4,
-        crossAxis: 4,
+        crossAxis: 0,
      }}
      open={open}
      onOpenChange={setOpen}
    >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <Button size='small' className='px-1'>
+      <PortalToFollowElemTrigger>
+        <Button size='small' className='px-1' onClick={handleClickTrigger}>
          <RiMoreFill className='w-4 h-4' />
        </Button>
      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-[12]'>
+      <PortalToFollowElemContent className='z-10'>
        <div className='flex flex-col w-[184px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
          <div className='flex flex-col p-1'>
            {
@ -62,7 +67,7 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
                <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-0' />
                <div className='p-1'>
                  <MenuItem
-                    item={deleteOperation.current}
+                    item={deleteOperation}
                    isDestructive
                    onClick={handleClickMenuItem.bind(null, VersionHistoryContextMenuOptions.delete)}
                  />
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/use-context-menu.ts
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/use-context-menu.ts
@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { VersionHistoryContextMenuOptions } from '../../../types'
 import type { ContextMenuProps } from './index'
@ -9,10 +9,10 @@ const useContextMenu = (props: ContextMenuProps) => {
  } = props
  const { t } = useTranslation()

-  const deleteOperation = useRef({
+  const deleteOperation = {
    key: VersionHistoryContextMenuOptions.delete,
    name: t('common.operation.delete'),
-  })
+  }

  const options = useMemo(() => {
    return [
@ -23,11 +23,11 @@ const useContextMenu = (props: ContextMenuProps) => {
      isNamedVersion
        ? {
          key: VersionHistoryContextMenuOptions.edit,
-          name: t('workflow.versionHistory.nameThisVersion'),
+          name: t('workflow.versionHistory.editVersionInfo'),
        }
        : {
          key: VersionHistoryContextMenuOptions.edit,
-          name: t('workflow.versionHistory.editVersionInfo'),
+          name: t('workflow.versionHistory.nameThisVersion'),
        },
    ]
    // eslint-disable-next-line react-hooks/exhaustive-deps
--- a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
@ -22,7 +22,7 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
    <div className='flex flex-col gap-y-2 p-6 pb-4 '>
      <div className='text-text-primary title-2xl-semi-bold'>
-        {`${t('common.operation.delete')} ${versionInfo.version}`}
+        {`${t('common.operation.delete')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
      </div>
      <p className='text-text-secondary system-md-regular'>
        {t('workflow.versionHistory.deletionTip')}
--- a/web/app/components/workflow/panel/version-history-panel/empty.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/empty.tsx
@ -0,0 +1,30 @@
+import Button from '@/app/components/base/button'
+import { RiHistoryLine } from '@remixicon/react'
+import React, { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type EmptyProps = {
+  onResetFilter: () => void
+}
+
+const Empty: FC<EmptyProps> = ({
+  onResetFilter,
+}) => {
+  const { t } = useTranslation()
+
+  return <div className='h-5/6 w-full flex flex-col justify-center gap-y-2'>
+    <div className='flex justify-center'>
+      <RiHistoryLine className='w-10 h-10 text-text-empty-state-icon' />
+    </div>
+    <div className='flex justify-center text-text-tertiary system-xs-regular'>
+      {t('workflow.versionHistory.filter.empty')}
+    </div>
+    <div className='flex justify-center'>
+      <Button size='small' onClick={onResetFilter}>
+        {t('workflow.versionHistory.filter.reset')}
+      </Button>
+    </div>
+  </div>
+}
+
+export default React.memo(Empty)
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@ -51,7 +51,7 @@ const Filter: FC<FilterProps> = ({
            isFiltering ? 'bg-state-accent-active-alt' : 'hover:bg-state-base-hover',
          )}
        >
-          <RiFilter3Line className='w-4 h-4 text-text-tertiary' />
+          <RiFilter3Line className={cn('w-4 h-4', isFiltering ? 'text-text-accent' : ' text-text-tertiary')} />
        </div>
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-[12]'>
--- a/web/app/components/workflow/panel/version-history-panel/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/index.tsx
@ -9,9 +9,11 @@ import VersionHistoryItem from './version-history-item'
 import Filter from './filter'
 import type { VersionHistory } from '@/types/workflow'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Loading from '@/app/components/base/loading'
 import { useWorkflowVersionHistory } from '@/service/use-workflow'
 import Divider from '@/app/components/base/divider'
+import Loading from './loading'
+import Empty from './empty'
+import { useSelector as useAppContextSelector } from '@/context/app-context'

 const HISTORY_PER_PAGE = 5
 const INITIAL_PAGE = 1
@ -25,6 +27,7 @@ const VersionHistoryPanel = () => {
  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
  const currentVersion = useStore(s => s.currentVersion)
  const setCurrentVersion = useStore(s => s.setCurrentVersion)
+  const userProfile = useAppContextSelector(s => s.userProfile)
  const { t } = useTranslation()

  const {
@ -32,7 +35,13 @@ const VersionHistoryPanel = () => {
    fetchNextPage,
    hasNextPage,
    isFetching,
-  } = useWorkflowVersionHistory(appDetail!.id, INITIAL_PAGE, HISTORY_PER_PAGE)
+  } = useWorkflowVersionHistory({
+    appId: appDetail!.id,
+    initialPage: INITIAL_PAGE,
+    limit: HISTORY_PER_PAGE,
+    userId: filterValue === WorkflowVersionFilterOptions.onlyYours ? userProfile.id : '',
+    namedOnly: isOnlyShowNamedVersions,
+  })

  const handleVersionClick = (item: VersionHistory) => {
    if (item.version !== currentVersion?.version) {
@ -60,6 +69,11 @@ const VersionHistoryPanel = () => {
    setIsOnlyShowNamedVersions(value)
  }, [])

+  const handleResetFilter = useCallback(() => {
+    setFilterValue(WorkflowVersionFilterOptions.all)
+    setIsOnlyShowNamedVersions(false)
+  }, [])
+
  return (
    <div className='flex flex-col w-[268px] bg-components-panel-bg rounded-l-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border shadow-xl shadow-shadow-shadow-5'>
      <div className='flex items-center gap-x-2 px-4 pt-3'>
@ -81,9 +95,8 @@ const VersionHistoryPanel = () => {
      <div className="flex-1 relative px-3 py-2 overflow-y-auto">
        {(isFetching && !versionHistory?.pages?.length)
          ? (
-            <div className='flex items-center justify-center h-10'>
-              {/* // TODO skeleton */}
-              <Loading/>
+            <div className='flex items-center justify-center h-full'>
+              <Loading />
            </div>
          )
          : (
@ -120,12 +133,9 @@ const VersionHistoryPanel = () => {
                  </div>
                </div>
              )}
-              {/* // TODO empty state */}
-              {/* {!isFetchingNextPage && !versionHistory?.items?.length && (
-                <div className='flex items-center justify-center h-10 text-gray-500'>
-                  {t('workflow.common.noHistory')}
-                </div>
-              )} */}
+              {!isFetching && !versionHistory?.pages?.length && (
+                <Empty onResetFilter={handleResetFilter} />
+              )}
            </>
          )}
      </div>
--- a/web/app/components/workflow/panel/version-history-panel/loading/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/index.tsx
@ -0,0 +1,8 @@
+const Loading = () => {
+  return <div className='w-full h-full'>
+    {/* // TODO skeleton */}
+    loading...
+  </div>
+}
+
+export default Loading
--- a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
@ -0,0 +1,7 @@
+import React from 'react'
+
+const Item = () => {
+  return <div className='h-2 w-full bg-gray-500' />
+}
+
+export default React.memo(Item)
--- a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
@ -22,7 +22,7 @@ const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
    <div className='flex flex-col gap-y-2 p-6 pb-4 '>
      <div className='text-text-primary title-2xl-semi-bold'>
-        {`${t('workflow.common.restore')} ${versionInfo.version}`}
+        {`${t('workflow.common.restore')} ${versionInfo.marked_name || t('workflow.versionHistory.defaultName')}`}
      </div>
      <p className='text-text-secondary system-md-regular'>
        {t('workflow.versionHistory.restorationTip')}
--- a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
@ -0,0 +1,276 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import dayjs from 'dayjs'
+import { useTranslation } from 'react-i18next'
+import { VersionHistoryContextMenuOptions, WorkflowVersion } from '../../types'
+import ContextMenu from './context-menu'
+import RestoreConfirmModal from './restore-confirm-modal'
+import cn from '@/utils/classnames'
+import type { VersionHistory } from '@/types/workflow'
+import { useStore, useWorkflowStore } from '../../store'
+import { useNodesSyncDraft, useWorkflowRun } from '../../hooks'
+import DeleteConfirmModal from './delete-confirm-modal'
+import VersionInfoModal from '@/app/components/app/app-publisher/version-info-modal'
+import { useDeleteWorkflow, useResetWorkflowVersionHistory, useUpdateWorkflow } from '@/service/use-workflow'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import Toast from '@/app/components/base/toast'
+
+type VersionHistoryItemProps = {
+  item: VersionHistory
+  currentVersion: VersionHistory | null
+  onClick: (item: VersionHistory) => void
+  curIdx: number
+  page: number
+  isLast: boolean
+}
+
+const formatVersion = (version: string, curIdx: number, page: number): string => {
+  if (curIdx === 0 && page === 1)
+    return WorkflowVersion.Draft
+  if (curIdx === 1 && page === 1)
+    return WorkflowVersion.Latest
+  try {
+    const date = new Date(version)
+    if (Number.isNaN(date.getTime()))
+      return version
+
+    // format as YYYY-MM-DD HH:mm:ss
+    return date.toISOString().slice(0, 19).replace('T', ' ')
+  }
+  catch {
+    return version
+  }
+}
+
+const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
+  item,
+  currentVersion,
+  onClick,
+  curIdx,
+  page,
+  isLast,
+}) => {
+  const { t } = useTranslation()
+  const workflowStore = useWorkflowStore()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const appDetail = useAppStore.getState().appDetail
+  const setShowWorkflowVersionHistoryPanel = useStore(s => s.setShowWorkflowVersionHistoryPanel)
+  const { handleRestoreFromPublishedWorkflow } = useWorkflowRun()
+  const [isHovering, setIsHovering] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false)
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
+  const [editModalOpen, setEditModalOpen] = useState(false)
+
+  const formatTime = (time: number) => dayjs.unix(time).format('YYYY-MM-DD HH:mm')
+  const formattedVersion = formatVersion(item.version, curIdx, page)
+  const isSelected = item.version === currentVersion?.version
+  const isDraft = formattedVersion === WorkflowVersion.Draft
+  const isLatest = formattedVersion === WorkflowVersion.Latest
+
+  useEffect(() => {
+    if (isDraft)
+      onClick(item)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleClickItem = () => {
+    if (isSelected)
+      return
+    onClick(item)
+  }
+
+  const handleClickMenuItem = useCallback((operation: VersionHistoryContextMenuOptions) => {
+    switch (operation) {
+      case VersionHistoryContextMenuOptions.restore:
+        onClick(item)
+        setRestoreConfirmOpen(true)
+        break
+      case VersionHistoryContextMenuOptions.edit:
+        setEditModalOpen(true)
+        break
+      case VersionHistoryContextMenuOptions.delete:
+        setDeleteConfirmOpen(true)
+        break
+    }
+  }, [onClick, item])
+
+  const handleCancel = useCallback((operation: VersionHistoryContextMenuOptions) => {
+    switch (operation) {
+      case VersionHistoryContextMenuOptions.restore:
+        setRestoreConfirmOpen(false)
+        break
+      case VersionHistoryContextMenuOptions.edit:
+        setEditModalOpen(false)
+        break
+      case VersionHistoryContextMenuOptions.delete:
+        setDeleteConfirmOpen(false)
+        break
+    }
+  }, [])
+
+  const resetWorkflowVersionHistory = useResetWorkflowVersionHistory(appDetail!.id)
+
+  const handleRestore = useCallback(() => {
+    setShowWorkflowVersionHistoryPanel(false)
+    handleRestoreFromPublishedWorkflow(item)
+    workflowStore.setState({ isRestoring: false })
+    workflowStore.setState({ backupDraft: undefined })
+    handleSyncWorkflowDraft(true, false, {
+      onSuccess: () => {
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.restoreSuccess'),
+        })
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.restoreFailure'),
+        })
+      },
+      onSettled: () => {
+        resetWorkflowVersionHistory()
+      },
+    })
+  }, [setShowWorkflowVersionHistoryPanel, handleSyncWorkflowDraft, workflowStore, item, handleRestoreFromPublishedWorkflow, resetWorkflowVersionHistory, t])
+
+  const { mutateAsync: deleteWorkflow } = useDeleteWorkflow(appDetail!.id)
+
+  const handleDelete = useCallback(async () => {
+    await deleteWorkflow(item.id, {
+      onSuccess: () => {
+        setDeleteConfirmOpen(false)
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.deleteSuccess'),
+        })
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.deleteFailure'),
+        })
+      },
+      onSettled: () => {
+        setDeleteConfirmOpen(false)
+      },
+    })
+  }, [item, t, deleteWorkflow])
+
+  const { mutateAsync: updateWorkflow } = useUpdateWorkflow(appDetail!.id)
+
+  const handleUpdateWorkflow = useCallback(async (params: { title: string, releaseNotes: string }) => {
+    await updateWorkflow({
+      workflowId: item.id,
+      ...params,
+    }, {
+      onSuccess: () => {
+        setEditModalOpen(false)
+        Toast.notify({
+          type: 'success',
+          message: t('workflow.versionHistory.action.updateSuccess'),
+        })
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('workflow.versionHistory.action.updateFailure'),
+        })
+      },
+      onSettled: () => {
+        setEditModalOpen(false)
+      },
+    })
+  }, [item, t, updateWorkflow])
+
+  return (
+    <>
+      <div
+        className={cn(
+          'flex gap-x-1 relative p-2 rounded-lg group',
+          isSelected ? 'bg-state-accent-active cursor-not-allowed' : 'hover:bg-state-base-hover cursor-pointer',
+        )}
+        onClick={handleClickItem}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => {
+          setIsHovering(false)
+          setOpen(false)
+        }}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          setOpen(true)
+        }}
+      >
+        {!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
+        <div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
+          <div className={cn(
+            'w-2 h-2 border-[2px] rounded-lg',
+            isSelected ? 'border-text-accent' : 'border-text-quaternary',
+          )}/>
+        </div>
+        <div className='flex flex-col gap-y-0.5 overflow-hidden'>
+          <div className='flex items-center gap-x-1 h-5 mr-6'>
+            <div className={cn(
+              'py-[1px] system-sm-semibold truncate',
+              isSelected ? 'text-text-accent' : 'text-text-secondary',
+            )}>
+              {isDraft ? t('workflow.versionHistory.currentDraft') : item.marked_name || t('workflow.versionHistory.defaultName')}
+            </div>
+            {isLatest && (
+              <div className='flex items-center shrink-0 h-5 px-[5px] rounded-md border border-text-accent-secondary
+            bg-components-badge-bg-dimm text-text-accent-secondary system-2xs-medium-uppercase'>
+                {t('workflow.versionHistory.latest')}
+              </div>
+            )}
+          </div>
+          {
+            !isDraft && (
+              <div className='text-text-secondary system-xs-regular break-words'>
+                {item.marked_comment || ''}
+              </div>
+            )
+          }
+          {
+            !isDraft && (
+              <div className='text-text-tertiary system-xs-regular truncate'>
+                {`${formatTime(item.created_at)} · ${item.created_by.name}`}
+              </div>
+            )
+          }
+        </div>
+        {/* Context Menu */}
+        {!isDraft && isHovering && (
+          <div className='absolute right-1 top-1'>
+            <ContextMenu
+              isShowDelete={!isLatest}
+              isNamedVersion={!!item.marked_name}
+              open={open}
+              setOpen={setOpen}
+              handleClickMenuItem={handleClickMenuItem}
+            />
+          </div>
+        )}
+      </div>
+      {restoreConfirmOpen && (<RestoreConfirmModal
+        isOpen={restoreConfirmOpen}
+        versionInfo={item}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.restore)}
+        onRestore={handleRestore}
+      />)}
+      {deleteConfirmOpen && (<DeleteConfirmModal
+        isOpen={deleteConfirmOpen}
+        versionInfo={item}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.delete)}
+        onDelete={handleDelete}
+      />)}
+      {editModalOpen && (<VersionInfoModal
+        isOpen={editModalOpen}
+        versionInfo={item}
+        onClose={handleCancel.bind(null, VersionHistoryContextMenuOptions.edit)}
+        onPublish={handleUpdateWorkflow}
+      />)}
+    </>
+  )
+}
+
+export default React.memo(VersionHistoryItem)
--- a/web/app/components/workflow/store.ts
+++ b/web/app/components/workflow/store.ts
@ -67,8 +67,8 @@ type Shape = {
  setDraftUpdatedAt: (draftUpdatedAt: number) => void
  publishedAt: number
  setPublishedAt: (publishedAt: number) => void
-  currentVersion: any // TODO version history item type
-  setCurrentVersion: (currentVersion: any) => void // TODO version history item type
+  currentVersion: VersionHistory | null
+  setCurrentVersion: (currentVersion: VersionHistory) => void
  showWorkflowVersionHistoryPanel: boolean
  setShowWorkflowVersionHistoryPanel: (showWorkflowVersionHistoryPanel: boolean) => void
  showInputsPanel: boolean
@ -207,7 +207,7 @@ export const createWorkflowStore = () => {
    setDraftUpdatedAt: draftUpdatedAt => set(() => ({ draftUpdatedAt: draftUpdatedAt ? draftUpdatedAt * 1000 : 0 })),
    publishedAt: 0,
    setPublishedAt: publishedAt => set(() => ({ publishedAt: publishedAt ? publishedAt * 1000 : 0 })),
-    currentVersion: null, // todo version history item type
+    currentVersion: null,
    setCurrentVersion: currentVersion => set(() => ({ currentVersion })),
    showWorkflowVersionHistoryPanel: false,
    setShowWorkflowVersionHistoryPanel: showWorkflowVersionHistoryPanel => set(() => ({ showWorkflowVersionHistoryPanel })),
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@ -403,7 +403,6 @@ export type VisionSetting = {
  detail: Resolution
 }

-// TODO check request params
 export enum WorkflowVersionFilterOptions {
  all = 'all',
  onlyYours = 'onlyYours',
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@ -786,17 +786,29 @@ const translation = {
      all: 'All',
      onlyYours: 'Only yours',
      onlyShowNamedVersions: 'Only show named versions',
-      reset: 'Reset filter',
+      reset: 'Reset Filter',
      empty: 'No matching version history found',
    },
+    defaultName: 'Untitled Version',
    nameThisVersion: 'Name this version',
    editVersionInfo: 'Edit version info',
    editField: {
      title: 'Title',
      releaseNotes: 'Release Notes',
+      titleLengthLimit: 'Title can\'t exceed {{limit}} characters',
+      releaseNotesLengthLimit: 'Release notes can\'t exceed {{limit}} characters',
    },
-    restorationTip: 'After version restoration, the current draft will be overwritten, and a version will be automatically created for the current draft.',
+    releaseNotesPlaceholder: 'Describe what changed',
+    restorationTip: 'After version restoration, the current draft will be overwritten.',
    deletionTip: 'Deletion is irreversible, please confirm.',
+    action: {
+      restoreSuccess: 'Version restored',
+      restoreFailure: 'Failed to restore version',
+      deleteSuccess: 'Version deleted',
+      deleteFailure: 'Failed to delete version',
+      updateSuccess: 'Version updated',
+      updateFailure: 'Failed to update version',
+    },
  },
 }

--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@ -789,14 +789,26 @@ const translation = {
      reset: '重置',
      empty: '没有匹配的版本',
    },
+    defaultName: '未命名',
    nameThisVersion: '命名',
    editVersionInfo: '编辑信息',
    editField: {
      title: '标题',
      releaseNotes: '发布说明',
+      titleLengthLimit: '标题不能超过{{limit}}个字符',
+      releaseNotesLengthLimit: '发布说明不能超过{{limit}}个字符',
    },
-    restorationTip: '版本恢复后，当前草稿将被覆盖，并自动为当前草稿创建副本。',
+    releaseNotesPlaceholder: '请描述变更',
+    restorationTip: '版本回滚后，当前草稿将被覆盖。',
    deletionTip: '删除不可逆，请确认。',
+    action: {
+      restoreSuccess: '回滚成功',
+      restoreFailure: '回滚失败',
+      deleteSuccess: '版本已删除',
+      deleteFailure: '删除失败',
+      updateSuccess: '版本信息已更新',
+      updateFailure: '更新失败',
+    },
  },
 }

--- a/web/service/use-base.ts
+++ b/web/service/use-base.ts
@ -13,3 +13,14 @@ export const useInvalid = (key: QueryKey) => {
    )
  }
 }
+
+export const useReset = (key: QueryKey) => {
+  const queryClient = useQueryClient()
+  return () => {
+    queryClient.resetQueries(
+      {
+        queryKey: key,
+      },
+    )
+  }
+}
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@ -1,6 +1,13 @@
-import { get } from './base'
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
-import type { FetchWorkflowDraftPageResponse, FetchWorkflowDraftResponse, WorkflowConfigResponse } from '@/types/workflow'
+import { del, get, patch } from './base'
+import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query'
+import type {
+  FetchWorkflowDraftPageParams,
+  FetchWorkflowDraftPageResponse,
+  FetchWorkflowDraftResponse,
+  UpdateWorkflowParams,
+  WorkflowConfigResponse,
+} from '@/types/workflow'
+import { useReset } from './use-base'

 const NAME_SPACE = 'workflow'

@ -19,11 +26,44 @@ export const useWorkflowConfig = (appId: string) => {
  })
 }

-export const useWorkflowVersionHistory = (appId: string, initialPage: number, limit: number) => {
+const WorkflowVersionHistoryKey = [NAME_SPACE, 'versionHistory']
+
+export const useWorkflowVersionHistory = (params: FetchWorkflowDraftPageParams) => {
+  const { appId, initialPage, limit, userId, namedOnly } = params
  return useInfiniteQuery({
-    queryKey: [NAME_SPACE, 'versionHistory', appId, initialPage, limit],
-    queryFn: ({ pageParam = 1 }) => get<FetchWorkflowDraftPageResponse>(`/apps/${appId}/workflows?page=${pageParam}&limit=${limit}`),
+    queryKey: [...WorkflowVersionHistoryKey, appId, initialPage, limit, userId, namedOnly],
+    queryFn: ({ pageParam = 1 }) => get<FetchWorkflowDraftPageResponse>(`/apps/${appId}/workflows`, {
+      params: {
+        page: pageParam,
+        limit,
+        user_id: userId || '',
+        named_only: !!namedOnly,
+      },
+    }),
    getNextPageParam: lastPage => lastPage.has_more ? lastPage.page + 1 : null,
    initialPageParam: initialPage,
  })
 }
+
+export const useResetWorkflowVersionHistory = (appId: string) => {
+  return useReset([...WorkflowVersionHistoryKey, appId])
+}
+
+export const useUpdateWorkflow = (appId: string) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'update'],
+    mutationFn: (params: UpdateWorkflowParams) => patch(`/apps/${appId}/workflows/${params.workflowId}`, {
+      body: {
+        marked_name: params.title,
+        marked_comment: params.releaseNotes,
+      },
+    }),
+  })
+}
+
+export const useDeleteWorkflow = (appId: string) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'delete'],
+    mutationFn: (workflowId: string) => del(`/apps/${appId}/workflows/${workflowId}`),
+  })
+}
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@ -108,10 +108,20 @@ export type FetchWorkflowDraftResponse = {
  environment_variables?: EnvironmentVariable[]
  conversation_variables?: ConversationVariable[]
  version: string
+  marked_name: string
+  marked_comment: string
 }

 export type VersionHistory = FetchWorkflowDraftResponse

+export type FetchWorkflowDraftPageParams = {
+  appId: string
+  initialPage: number
+  limit: number
+  userId?: string
+  namedOnly?: boolean
+}
+
 export type FetchWorkflowDraftPageResponse = {
  items: VersionHistory[]
  has_more: boolean
@ -294,3 +304,9 @@ export type IterationDurationMap = Record<string, number>
 export type WorkflowConfigResponse = {
  parallel_depth_limit: number
 }
+
+export type UpdateWorkflowParams = {
+  workflowId: string
+  title: string
+  releaseNotes: string
+}