From 54c013e60092c7089a16dbe7fb62abbaf835724c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 16 Sep 2026 15:29:56 +0800
Subject: [PATCH] feat: application workflow

---
 ui/src/api/API_README.md                      |   3 +-
 .../components/global/mk-list-item/index.vue  |   2 +-
 ui/src/styles/variables.scss                  |   5 -
 ui/src/views/VIEW_README.md                   |  40 +++---
 .../application/ApplicationWorkflowView.vue   |  50 +++-----
 .../application/ButtonPublishHistory.vue      |  79 ++++++++++++
 .../components/WorkflowViewLayout.vue         |   9 +-
 .../DefaultModelSettingDrawer.vue             |  18 +--
 .../publish-history/ButtonPublishHistory.vue  |  57 ---------
 .../publish-history/DescriptionDialog.vue     |  23 ++++
 .../EditPublishVersionDialog.vue              |  70 +++--------
 .../publish-history/PublishHistory.vue        | 119 ------------------
 .../publish-history/PublishHistoryDrawer.vue  | 115 +++++++++++++++++
 .../UpdateDescriptionDialog.vue               |  29 -----
 14 files changed, 288 insertions(+), 331 deletions(-)
 create mode 100644 ui/src/views/workflow/application/ButtonPublishHistory.vue
 delete mode 100644 ui/src/views/workflow/components/publish-history/ButtonPublishHistory.vue
 create mode 100644 ui/src/views/workflow/components/publish-history/DescriptionDialog.vue
 delete mode 100644 ui/src/views/workflow/components/publish-history/PublishHistory.vue
 create mode 100644 ui/src/views/workflow/components/publish-history/PublishHistoryDrawer.vue
 delete mode 100644 ui/src/views/workflow/components/publish-history/UpdateDescriptionDialog.vue

diff --git a/ui/src/api/API_README.md b/ui/src/api/API_README.md
index cb3154ef57d..ffb73c58b14 100644
--- a/ui/src/api/API_README.md
+++ b/ui/src/api/API_README.md
@@ -101,7 +101,8 @@ Action、Drawer 或 Dialog。复用方直接使用 `typeof XxxApi` 约束完整
 `getWorkflowVersions(applicationId)` 返回按创建时间倒序的完整 `WorkflowVersion[]`；
 `putWorkflowVersion(applicationId, versionId, payload)` 编辑标题与更新说明，返回更新后的版本。
 共用类型 `WorkflowVersion` 和 `WorkflowVersionPayload` 位于 `types/workflow-version.ts`，
-通过 `@/api/types` 导出。页面传入完整 API 对象，发布历史面板不推测其他工作流的接口地址。
+通过 `@/api/types` 导出。`ButtonApplicationPublishHistory` 内部调用智能体版本 API，公共发布历史
+UI 组件只接收数据和事件，不接收 API 或推测其他工作流的接口地址。
 
 v3 编辑表单提交 `{ name, description }`，标题上限 64、更新说明上限 1000。
 当前仓库后端的版本编辑序列化器只处理 `name`，列表和详情也未返回 `description`；
diff --git a/ui/src/components/global/mk-list-item/index.vue b/ui/src/components/global/mk-list-item/index.vue
index 5771f32e017..172aa10f293 100644
--- a/ui/src/components/global/mk-list-item/index.vue
+++ b/ui/src/components/global/mk-list-item/index.vue
@@ -39,7 +39,7 @@ const hasActionDropdown = computed(() => hasRenderableSlotContent(slots['action-
     <!-- 操作区保留布局宽度，hover/focus 时显示，并阻止触发行点击。 -->
     <div v-if="$slots.action || hasActionDropdown" class="group-hover-visible ml-auto flex shrink-0 items-center font-normal text-N900" @click.stop @keydown.stop>
       <MkDropdown v-if="hasActionDropdown" trigger="click" :teleported="false">
-        <el-button class="-mr-1" text>
+        <el-button text>
           <MkIcon name="icon_more_outlined" />
         </el-button>
         <template #dropdown>
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 31637bc82b1..97249607c52 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -11,11 +11,6 @@
   --mk-success-rgb: 52 199 36;
   --mk-warning: #ff8800;
   --mk-warning-rgb: 255 136 0;
-  // --mk-layout-gradient: linear-gradient(
-  //   187.61deg,
-  //   rgba(235, 241, 255, 0.35) 39.6%,
-  //   rgba(231, 249, 255, 0.35) 94.3%
-  // );
 
   --mk-purple: #7f3bf5;
   --mk-blue: #14c0ff;
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index a17eef1df30..0666880eb93 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -410,23 +410,29 @@ Dialog。新增或重命名文件时，应同步更新所有导入和页面功
 
 ## 工作流发布历史
 
-`workflow/components/publish-history/ButtonPublishHistory.vue` 封装发布历史菜单入口与面板挂载，
-通过 `v-model:visible` 与页面共享显隐状态，接收 `resourceId`、完整版本 `api`、`selectedId` 和
-`disabled`，转发 `preview`、`restore`、`update`、`close`，打开时发出 `open`。
-面板通过 Teleport 展示在页面右侧、头部下方，页面无需再单独引用 `PublishHistory`。
-所在的 `MkDropdown` 必须设置 `persistent`，避免菜单收起后销毁面板入口。
-
-`workflow/components/publish-history/PublishHistory.vue` 为工作流页面共用的发布历史面板，
-接收 `resourceId`、完整版本 `api`、`selectedId` 和 `disabled`。挂载时查询列表，保留服务端
-发布时间倒序，首项标记“最近发布”；显示标题、发布人和创建时间。面板绝对定位在父级右侧，
-调用方提供相对定位容器。通过 `preview(version)`、`restore(version)`、`update(version)` 和
-`close` 将画布与页面动作交给 View，不读取路由或操作画布。
-
-同目录 `EditPublishVersionDialog.vue` 使用 `open(version)` 回填副本：标题必填、最多 64 字，
-更新说明可选、最多 1000 字；确认按钮沿设计显示“发布”，调用版本编辑接口，不创建新发布。
-成功后更新列表及预览标题，失败保留弹窗与草稿，提交期间禁止重复提交和关闭。
-`UpdateDescriptionDialog.vue` 通过 `open(content)` 展示纯文本更新说明，保留换行，无内容时显示
-“暂无更新说明”；两者复用 `MkDialog` 的延迟挂载与关闭销毁能力。
+`workflow/application/ButtonPublishHistory.vue` 封装智能体发布历史菜单入口、
+面板显隐、列表查询以及版本编辑请求。内部直接调用 application 的版本 API；页面仅传
+`applicationId`、`selectedId`、`disabled` 和 `v-model:visible`，接收 `open`、`preview`、
+`restore` 事件。每次打开重新查询，编辑成功后关闭弹窗并重新调用 `getWorkflowVersions` 刷新列表，
+不向页面发送更新事件；保存失败保留弹窗与草稿。所在 `MkDropdown` 设置 `persistent`，避免收起菜单时销毁面板入口。
+
+`workflow/components/publish-history/PublishHistoryDrawer.vue` 为纯 UI 面板，接收 `versions`、`loading`、
+`saving`、`selectedId`，保留传入顺序并将首项标为“最近发布”，显示标题、发布人及创建时间。
+内部管理编辑与更新说明弹窗，通过 `submit(payload, versionId)` 交给业务组件保存，成功后由业务组件
+调用 `closeEdit()` 关闭编辑弹窗。通过 `preview`、`restore` 通知业务组件，不接收 API、不查询数据，
+也不操作路由或画布。面板复用 `MkDrawer`，通过 `v-model` 控制显隐，宽度 320，使用
+`top-header`、`h-layout-content` 留出页面头部，不显示遮罩、不锁定滚动，内部复用 Drawer 的滚动区。
+抽屉实例保留，由 `MkDrawer` 延迟渲染并在关闭动画结束后销毁内容，不再额外维护挂载状态或转发
+`close` / `closed` 事件。页面监听 `historyVisible`，关闭抽屉与头部返回统一恢复草稿并清理预览；
+恢复版本时先清空草稿快照再关闭，保留已恢复的版本。编辑弹窗的 `closeEdit()` 仅用于保存成功后关闭表单。
+
+同目录 `EditPublishVersionDialog.vue` 只维护表单副本与校验，通过 `open(version)` 回填、
+`submit(payload)` 提交、`close()` 关闭，外部传入 `saving`。标题必填且最多 64 字，更新说明最多
+1000 字；按钮沿设计显示“发布”，实际编辑请求由业务组件执行，不创建新发布。
+`DescriptionDialog.vue` 通过 `open(content)` 展示纯文本更新说明并保留换行，空内容显示
+“暂无更新说明”。两个弹窗均不依赖业务 API，复用 `MkDialog` 的延迟挂载和关闭销毁能力。
+
+后续 knowledge、tool 在各自目录实现业务入口，复用 `PublishHistoryDrawer`（内部包含两个弹窗），不引入通用 API 适配层。
 
 `ApplicationWorkflowView` 已接入更多菜单中的发布历史。打开时关闭调试，面板打开期间跳过
 自动保存；首次预览保留当前画布草稿，切换版本不覆盖草稿，关闭预览恢复原草稿。
diff --git a/ui/src/views/workflow/application/ApplicationWorkflowView.vue b/ui/src/views/workflow/application/ApplicationWorkflowView.vue
index 545687b9333..0fc31a8c925 100644
--- a/ui/src/views/workflow/application/ApplicationWorkflowView.vue
+++ b/ui/src/views/workflow/application/ApplicationWorkflowView.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, provide, ref, useTemplateRef } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, provide, ref, useTemplateRef, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type LogicFlow from '@logicflow/core'
 import type { Action } from 'element-plus'
 import { cloneDeep } from 'lodash'
 import ApplicationApi from '@/api/admin/workspace/application/application.ts'
-import WorkflowVersionApi from '@/api/admin/workspace/application/workflow-version'
 import ModelApi from '@/api/admin/workspace/model/model'
 import type { ApplicationDetail, ApplicationStoreTemplate, DefaultModelSettingPayload, WorkflowVersion } from '@/api/types'
 import { MsgConfirm, MsgError, MsgSuccess } from '@/utils/message'
@@ -14,7 +13,7 @@ import { defaultApplicationNodes } from '@/workflow-canvas/config/node-mapping'
 import { WorkflowMode } from '@/workflow-canvas/types'
 import ButtonDefaultModelSetting from '../components/default-model-setting/ButtonDefaultModelSetting.vue'
 import WorkflowViewLayout from '../components/WorkflowViewLayout.vue'
-import ButtonPublishHistory from '../components/publish-history/ButtonPublishHistory.vue'
+import ButtonPublishHistory from './ButtonPublishHistory.vue'
 import TemplateStoreDialog from '@/views/application/template-store/TemplateStoreDialog.vue'
 import DebugPanel from './debug/DebugPanel.vue'
 import { getResourceScope } from '@/utils/resource-context.ts'
@@ -151,26 +150,22 @@ function handlePreviewVersion(version: WorkflowVersion) {
   nextTick(() => workflowRef.value?.fitView())
 }
 
-function handleCloseHistory() {
+// 所有退出入口统一通过显隐状态清理预览；恢复版本时提前清空草稿快照。
+watch(historyVisible, (visible) => {
+  if (visible) return
   if (workflowBeforePreview) workflowRef.value?.render(cloneDeep(workflowBeforePreview))
   workflowBeforePreview = undefined
   previewVersion.value = undefined
-  historyVisible.value = false
-}
+})
 
 function handleRestoreVersion(version = previewVersion.value) {
   if (!version || loading.value || saving.value || publishing.value) return
   workflowRef.value?.render(cloneDeep(version.work_flow))
   workflowBeforePreview = undefined
-  previewVersion.value = undefined
   historyVisible.value = false
   nextTick(() => workflowRef.value?.fitView())
 }
 
-function handleUpdateVersion(version: WorkflowVersion) {
-  if (previewVersion.value?.id === version.id) previewVersion.value = version
-}
-
 /* 模板中心 */
 const templateStoreDialogRef = useTemplateRef<InstanceType<typeof TemplateStoreDialog>>('templateStoreDialogRef')
 
@@ -219,17 +214,17 @@ function handleSaveDefaultModelSetting(settings: DefaultModelSettingPayload) {
 /* 发布工作流 */
 function handlePublish() {
   workflowRef.value?.validate().then(() => {
-    // publishing.value = true
-    // return saveApplication(undefined, false)
-    //   .then(() => ApplicationApi.putApplicationPublish(applicationId))
-    //   .then((application) => {
-    //     applicationDetail.value = application
-    //     saveTime.value = application.update_time || saveTime.value
-    //     MsgSuccess('发布成功')
-    //   })
-    //   .finally(() => {
-    //     publishing.value = false
-    //   })
+    publishing.value = true
+    return saveApplication(undefined, false)
+      .then(() => ApplicationApi.putApplicationPublish(applicationId))
+      .then((application) => {
+        applicationDetail.value = application
+        saveTime.value = application.update_time || saveTime.value
+        MsgSuccess('发布成功')
+      })
+      .finally(() => {
+        publishing.value = false
+      })
   })
 }
 
@@ -237,8 +232,7 @@ function handlePublish() {
 function handleBack() {
   if (loading.value || saving.value || confirmingExit.value) return
   if (historyVisible.value) {
-    handleCloseHistory()
-    return
+    historyVisible.value = false
   }
   if (!hasUnsavedChanges()) {
     goBack(applicationId)
@@ -301,7 +295,7 @@ onBeforeUnmount(() => stopAutoSave())
     :title="applicationDetail?.name"
     :save-time="saveTime"
     :history-visible="historyVisible"
-    :can-restore-version="!!previewVersion && !loading && !saving && !publishing"
+    :can-restore-version="!!previewVersion"
     @back="handleBack"
     @restore-version="handleRestoreVersion()"
   >
@@ -355,15 +349,11 @@ onBeforeUnmount(() => stopAutoSave())
             <!-- 发布历史 -->
             <ButtonPublishHistory
               v-model:visible="historyVisible"
-              :resource-id="applicationId"
-              :api="WorkflowVersionApi"
+              :application-id="applicationId"
               :selected-id="previewVersion?.id"
-              :disabled="loading || saving || publishing"
               @open="closeDebug"
               @preview="handlePreviewVersion"
               @restore="handleRestoreVersion"
-              @update="handleUpdateVersion"
-              @close="handleCloseHistory"
             />
             <!-- 自动保存 -->
             <MkDropdownItem @click.stop>
diff --git a/ui/src/views/workflow/application/ButtonPublishHistory.vue b/ui/src/views/workflow/application/ButtonPublishHistory.vue
new file mode 100644
index 00000000000..1c82114c201
--- /dev/null
+++ b/ui/src/views/workflow/application/ButtonPublishHistory.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import WorkflowVersionApi from '@/api/admin/workspace/application/workflow-version'
+import type { WorkflowVersion, WorkflowVersionPayload } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+import PublishHistoryDrawer from '@/views/workflow/components/publish-history/PublishHistoryDrawer.vue'
+
+defineOptions({ name: 'ButtonApplicationPublishHistory' })
+
+const props = defineProps<{ applicationId: string; selectedId?: string; disabled?: boolean }>()
+const visible = defineModel<boolean>('visible', { default: false })
+const emit = defineEmits<{
+  open: []
+  preview: [version: WorkflowVersion]
+  restore: [version: WorkflowVersion]
+}>()
+
+/* 智能体发布历史查询 */
+const versions = ref<WorkflowVersion[]>([])
+const loading = ref(false)
+
+function handleOpen() {
+  visible.value = true
+  emit('open')
+  versions.value = []
+  return loadWorkflowVersions()
+}
+
+function loadWorkflowVersions() {
+  loading.value = true
+  return WorkflowVersionApi.getWorkflowVersions(props.applicationId)
+    .then((result) => {
+      versions.value = result
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/* 版本编辑：成功后重新查询列表，保存失败保留弹窗草稿。 */
+const saving = ref(false)
+const publishHistoryDrawerRef = useTemplateRef<InstanceType<typeof PublishHistoryDrawer>>('publishHistoryDrawerRef')
+
+function handleSubmit(payload: WorkflowVersionPayload, versionId?: string) {
+  saving.value = true
+  if (versionId) {
+    return WorkflowVersionApi.putWorkflowVersion(props.applicationId, versionId, payload)
+      .then(() => {
+        publishHistoryDrawerRef.value?.closeEdit()
+        MsgSuccess('修改成功')
+        return loadWorkflowVersions()
+      })
+      .finally(() => {
+        saving.value = false
+      })
+  } else {
+    return
+  }
+}
+</script>
+
+<template>
+  <!-- 打开智能体发布历史 -->
+  <MkDropdownItem :disabled="disabled || loading || saving" @click="handleOpen">
+    <template #icon><MkIcon name="icon_history_outlined" /></template>
+    <span>发布历史</span>
+  </MkDropdownItem>
+  <!-- 发布历史抽屉：由 MkDrawer 按需渲染内容。 -->
+  <PublishHistoryDrawer
+    ref="publishHistoryDrawerRef"
+    v-model="visible"
+    :versions="versions"
+    :loading="loading"
+    :selected-id="selectedId"
+    @preview="emit('preview', $event)"
+    @restore="emit('restore', $event)"
+    @submit="handleSubmit"
+  />
+</template>
diff --git a/ui/src/views/workflow/components/WorkflowViewLayout.vue b/ui/src/views/workflow/components/WorkflowViewLayout.vue
index 5f5c25dd946..b0fb3fee090 100644
--- a/ui/src/views/workflow/components/WorkflowViewLayout.vue
+++ b/ui/src/views/workflow/components/WorkflowViewLayout.vue
@@ -41,14 +41,7 @@ defineSlots<{
 
       <div class="flex shrink-0 items-center">
         <!-- 恢复选中的历史版本 -->
-        <el-button
-          v-if="historyVisible"
-          :type="canRestoreVersion ? 'primary' : 'info'"
-          :disabled="!canRestoreVersion"
-          @click="emit('restoreVersion')"
-        >
-          恢复此版本
-        </el-button>
+        <el-button v-if="historyVisible" type="primary" :disabled="!canRestoreVersion" @click="emit('restoreVersion')"> 恢复此版本 </el-button>
         <!-- 保留操作入口实例，避免切换头部时卸载其发布历史面板。 -->
         <div v-show="!historyVisible" class="flex items-center">
           <slot name="actions" />
diff --git a/ui/src/views/workflow/components/default-model-setting/DefaultModelSettingDrawer.vue b/ui/src/views/workflow/components/default-model-setting/DefaultModelSettingDrawer.vue
index 16a2d9c6a82..d10ccf5b040 100644
--- a/ui/src/views/workflow/components/default-model-setting/DefaultModelSettingDrawer.vue
+++ b/ui/src/views/workflow/components/default-model-setting/DefaultModelSettingDrawer.vue
@@ -176,15 +176,6 @@ function handleClosed() {
   emit('closed')
 }
 
-function resetData() {
-  savedSettings.value = {}
-  modelSettings.value = normalizeSettings({})
-  models.value = []
-  providerOptions.value = []
-  loading.value = false
-  applying.value = false
-}
-
 function handleBeforeClose(
   done = () => {
     visible.value = false
@@ -207,6 +198,14 @@ function handleBeforeClose(
       if (action === 'cancel') done()
     })
 }
+function resetData() {
+  savedSettings.value = {}
+  modelSettings.value = normalizeSettings({})
+  models.value = []
+  providerOptions.value = []
+  loading.value = false
+  applying.value = false
+}
 defineExpose({ open })
 </script>
 
@@ -217,6 +216,7 @@ defineExpose({ open })
     size="420"
     class="top-header! h-layout-content! max-w-full rounded-tl-xl!"
     :modal="false"
+    modal-penetrable
     :lock-scroll="false"
     :before-close="handleBeforeClose"
     @closed="handleClosed"
diff --git a/ui/src/views/workflow/components/publish-history/ButtonPublishHistory.vue b/ui/src/views/workflow/components/publish-history/ButtonPublishHistory.vue
deleted file mode 100644
index 53ecf46450f..00000000000
--- a/ui/src/views/workflow/components/publish-history/ButtonPublishHistory.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type WorkflowVersionApi from '@/api/admin/workspace/application/workflow-version'
-import type { WorkflowVersion } from '@/api/types'
-import PublishHistory from './PublishHistory.vue'
-
-defineOptions({ name: 'ButtonPublishHistory' })
-
-const props = defineProps<{
-  resourceId: string
-  api: typeof WorkflowVersionApi
-  selectedId?: string
-  disabled?: boolean
-}>()
-const visible = defineModel<boolean>('visible', { default: false })
-const emit = defineEmits<{
-  open: []
-  close: []
-  preview: [version: WorkflowVersion]
-  restore: [version: WorkflowVersion]
-  update: [version: WorkflowVersion]
-}>()
-
-function handleOpen() {
-  if (props.disabled) return
-  visible.value = true
-  emit('open')
-}
-
-function handleClose() {
-  if (props.disabled) return
-  visible.value = false
-  emit('close')
-}
-</script>
-
-<template>
-  <!-- 打开发布历史 -->
-  <MkDropdownItem :disabled="disabled" @click="handleOpen">
-    <template #icon><MkIcon name="icon_history_outlined" /></template>
-    <span>发布历史</span>
-  </MkDropdownItem>
-  <!-- 面板脱离下拉菜单定位，关闭菜单后仍保持展示。 -->
-  <Teleport to="body">
-    <div v-if="visible" class="fixed right-0 bottom-0 z-20 h-layout-content w-80 max-w-full">
-      <PublishHistory
-        :resource-id="resourceId"
-        :api="api"
-        :selected-id="selectedId"
-        :disabled="disabled"
-        @preview="emit('preview', $event)"
-        @restore="emit('restore', $event)"
-        @update="emit('update', $event)"
-        @close="handleClose"
-      />
-    </div>
-  </Teleport>
-</template>
diff --git a/ui/src/views/workflow/components/publish-history/DescriptionDialog.vue b/ui/src/views/workflow/components/publish-history/DescriptionDialog.vue
new file mode 100644
index 00000000000..6062c2f4e56
--- /dev/null
+++ b/ui/src/views/workflow/components/publish-history/DescriptionDialog.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineOptions({ name: 'DescriptionDialog' })
+
+const visible = ref(false)
+const description = ref('')
+
+function open(content: string) {
+  description.value = content
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDialog v-model="visible" title="更新说明" align-center @closed="description = ''">
+    {{ description || '暂无更新说明' }}
+  </MkDialog>
+</template>
+
+<style scoped></style>
diff --git a/ui/src/views/workflow/components/publish-history/EditPublishVersionDialog.vue b/ui/src/views/workflow/components/publish-history/EditPublishVersionDialog.vue
index f034304f237..a8a995c488c 100644
--- a/ui/src/views/workflow/components/publish-history/EditPublishVersionDialog.vue
+++ b/ui/src/views/workflow/components/publish-history/EditPublishVersionDialog.vue
@@ -2,95 +2,61 @@
 import { reactive, ref, useTemplateRef } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { WorkflowVersion, WorkflowVersionPayload } from '@/api/types'
-import type WorkflowVersionApi from '@/api/admin/workspace/application/workflow-version'
 import { datetimeFormat } from '@/utils/time'
-import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'EditPublishVersionDialog' })
 
-const props = defineProps<{ resourceId: string; api: typeof WorkflowVersionApi }>()
-const emit = defineEmits<{ saved: [version: WorkflowVersion] }>()
+const props = defineProps<{ saving?: boolean }>()
+const emit = defineEmits<{ submit: [payload: WorkflowVersionPayload] }>()
 const visible = ref(false)
-const saving = ref(false)
-const versionId = ref('')
 const versionForm = reactive<WorkflowVersionPayload>({ name: '', description: '' })
 const formRef = useTemplateRef<FormInstance>('formRef')
 const rules: FormRules<WorkflowVersionPayload> = {
-  name: [
-    { required: true, whitespace: true, message: '请输入标题', trigger: 'blur' },
-    { max: 64, message: '标题最多 64 个字符', trigger: 'blur' },
-  ],
-  description: [{ max: 1000, message: '更新说明最多 1000 个字符', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
 }
 
-/* 版本编辑：只保存副本，接口成功后通知历史列表更新。 */
+/* 编辑副本并校验，接口提交和成功关闭由业务组件处理。 */
 function open(version: WorkflowVersion) {
-  versionId.value = version.id
   versionForm.name = version.name || datetimeFormat(version.create_time)
   versionForm.description = version.description ?? ''
   visible.value = true
 }
 
 function handleSubmit() {
-  if (saving.value) return
+  if (props.saving) return
   formRef.value?.validate((valid) => {
-    if (!valid) return
-    saving.value = true
-    return props.api
-      .putWorkflowVersion(props.resourceId, versionId.value, {
-        name: versionForm.name.trim(),
-        description: versionForm.description,
-      })
-      .then((version) => {
-        emit('saved', version)
-        visible.value = false
-        MsgSuccess('修改成功')
-      })
-      .finally(() => {
-        saving.value = false
-      })
+    if (!valid || props.saving) return
+    emit('submit', { name: versionForm.name.trim(), description: versionForm.description })
   })
 }
 
-function handleClose(done: () => void) {
-  if (!saving.value) done()
+function close() {
+  visible.value = false
 }
 
 function resetForm() {
-  versionId.value = ''
   versionForm.name = ''
   versionForm.description = ''
   formRef.value?.clearValidate()
 }
 
-defineExpose({ open })
+defineExpose({ open, close })
 </script>
 
 <template>
-  <MkDialog
-    v-model="visible"
-    class="workflow-version-edit-dialog"
-    title="编辑"
-    width="600"
-    align-center
-    :before-close="handleClose"
-    :show-close="!saving"
-    @closed="resetForm"
-  >
+  <MkDialog v-model="visible" title="编辑" align-center @closed="resetForm">
     <el-form ref="formRef" :model="versionForm" :rules="rules" label-position="top" require-asterisk-position="right" @submit.prevent="handleSubmit">
       <el-form-item label="标题" prop="name">
-        <el-input v-model="versionForm.name" placeholder="请输入标题" :maxlength="64" show-word-limit :disabled="saving" />
+        <el-input v-model="versionForm.name" placeholder="请输入标题" :maxlength="64" show-word-limit />
       </el-form-item>
-      <el-form-item label="更新说明" prop="description" class="mb-0!">
+      <el-form-item label="更新说明" prop="description">
         <el-input
           v-model="versionForm.description"
           type="textarea"
           placeholder="请输入"
-          :rows="4"
+          :autosize="{ minRows: 4, maxRows: 8 }"
           :maxlength="1000"
           show-word-limit
-          resize="none"
-          :disabled="saving"
         />
       </el-form-item>
     </el-form>
@@ -103,10 +69,4 @@ defineExpose({ open })
   </MkDialog>
 </template>
 
-<style scoped>
-/* 内容较短时按表单高度展示，避免滚动容器继承视口高度。 */
-:global(.workflow-version-edit-dialog .el-dialog__body > .el-scrollbar),
-:global(.workflow-version-edit-dialog .el-dialog__body > .el-scrollbar > .el-scrollbar__wrap) {
-  height: auto;
-}
-</style>
+<style scoped></style>
diff --git a/ui/src/views/workflow/components/publish-history/PublishHistory.vue b/ui/src/views/workflow/components/publish-history/PublishHistory.vue
deleted file mode 100644
index b71be5619ee..00000000000
--- a/ui/src/views/workflow/components/publish-history/PublishHistory.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue'
-import { Close, Document, Edit, RefreshLeft, UserFilled } from '@element-plus/icons-vue'
-import type WorkflowVersionApi from '@/api/admin/workspace/application/workflow-version'
-import type { WorkflowVersion } from '@/api/types'
-import { datetimeFormat } from '@/utils/time'
-import EditPublishVersionDialog from './EditPublishVersionDialog.vue'
-import UpdateDescriptionDialog from './UpdateDescriptionDialog.vue'
-
-defineOptions({ name: 'PublishHistory' })
-
-const props = defineProps<{
-  resourceId: string
-  api: typeof WorkflowVersionApi
-  selectedId?: string
-  disabled?: boolean
-}>()
-const emit = defineEmits<{
-  preview: [version: WorkflowVersion]
-  restore: [version: WorkflowVersion]
-  update: [version: WorkflowVersion]
-  close: []
-}>()
-
-/* 发布历史查询：保留服务端按发布时间倒序返回的顺序。 */
-const loading = ref(false)
-const versions = ref<WorkflowVersion[]>([])
-
-function loadVersions() {
-  loading.value = true
-  return props.api
-    .getWorkflowVersions(props.resourceId)
-    .then((result) => {
-      versions.value = result
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-function handlePreview(version: WorkflowVersion) {
-  if (loading.value || props.disabled) return
-  emit('preview', version)
-}
-
-function handleRestore(version: WorkflowVersion) {
-  if (loading.value || props.disabled) return
-  emit('restore', version)
-}
-
-/* 编辑版本与更新说明 */
-const editDialogRef = useTemplateRef<InstanceType<typeof EditPublishVersionDialog>>('editDialogRef')
-const descriptionDialogRef = useTemplateRef<InstanceType<typeof UpdateDescriptionDialog>>('descriptionDialogRef')
-
-function handleEdit(version: WorkflowVersion) {
-  if (props.disabled) return
-  editDialogRef.value?.open(version)
-}
-
-function handleShowDescription(version: WorkflowVersion) {
-  descriptionDialogRef.value?.open(version.description ?? '')
-}
-
-function handleVersionSaved(version: WorkflowVersion) {
-  versions.value = versions.value.map((entry) => (entry.id === version.id ? version : entry))
-  emit('update', version)
-}
-
-onMounted(loadVersions)
-</script>
-
-<template>
-  <aside class="absolute right-0 top-0 z-20 flex h-full w-80 max-w-full flex-col rounded-tl-xl bg-white shadow-lg">
-    <div class="flex-between shrink-0 border-b px-6 py-4">
-      <h4>发布历史</h4>
-      <!-- 关闭发布历史 -->
-      <el-button text :disabled="disabled" @click="emit('close')"><MkIcon :icon="Close" :size="20" /></el-button>
-    </div>
-    <el-scrollbar v-loading="loading" class="min-h-0 flex-1">
-      <div class="space-y-4 p-2 pt-4">
-        <MkListItem
-          v-for="(version, index) in versions"
-          :key="version.id"
-          :active="selectedId === version.id"
-          class="rounded-xl! px-4! py-3! text-N900!"
-          @click="handlePreview(version)"
-        >
-          <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-2">
-              <h6 class="truncate" :title="version.name || datetimeFormat(version.create_time)">
-                {{ version.name || datetimeFormat(version.create_time) }}
-              </h6>
-              <el-tag v-if="index === 0" size="small" class="shrink-0">最近发布</el-tag>
-            </div>
-            <div class="mt-1 flex items-center gap-1 text-sm font-normal text-N600">
-              <el-avatar :size="18" class="shrink-0 bg-primary-gradient! text-white!"><MkIcon :icon="UserFilled" :size="12" /></el-avatar>
-              <span class="truncate" :title="`${version.publish_user_name || '-'} 发布于 ${datetimeFormat(version.create_time)}`"
-                >{{ version.publish_user_name || '-' }} 发布于 {{ datetimeFormat(version.create_time) }}</span
-              >
-            </div>
-          </div>
-          <template #action-dropdown>
-            <!-- 编辑版本 -->
-            <MkDropdownItem :icon="Edit" :disabled="disabled" @click="handleEdit(version)">编辑</MkDropdownItem>
-            <!-- 查看更新说明 -->
-            <MkDropdownItem :icon="Document" @click="handleShowDescription(version)">更新说明</MkDropdownItem>
-            <!-- 恢复此版本 -->
-            <MkDropdownItem :icon="RefreshLeft" :disabled="disabled" @click="handleRestore(version)">恢复此版本</MkDropdownItem>
-          </template>
-        </MkListItem>
-        <MkEmpty v-if="!loading && !versions.length" description="暂无发布历史" />
-      </div>
-    </el-scrollbar>
-    <!-- 编辑发布版本 -->
-    <EditPublishVersionDialog ref="editDialogRef" :resource-id="resourceId" :api="api" @saved="handleVersionSaved" />
-    <!-- 查看更新说明 -->
-    <UpdateDescriptionDialog ref="descriptionDialogRef" />
-  </aside>
-</template>
diff --git a/ui/src/views/workflow/components/publish-history/PublishHistoryDrawer.vue b/ui/src/views/workflow/components/publish-history/PublishHistoryDrawer.vue
new file mode 100644
index 00000000000..a36b63b9e40
--- /dev/null
+++ b/ui/src/views/workflow/components/publish-history/PublishHistoryDrawer.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import type { WorkflowVersion, WorkflowVersionPayload } from '@/api/types'
+import { datetimeFormat } from '@/utils/time'
+import EditPublishVersionDialog from './EditPublishVersionDialog.vue'
+import DescriptionDialog from './DescriptionDialog.vue'
+
+defineOptions({ name: 'PublishHistoryDrawer' })
+
+const visible = defineModel<boolean>({ default: false })
+
+defineProps<{
+  versions: WorkflowVersion[]
+  loading?: boolean
+  saving?: boolean
+  selectedId?: string
+}>()
+const emit = defineEmits<{
+  preview: [version: WorkflowVersion]
+  restore: [version: WorkflowVersion]
+  submit: [payload: WorkflowVersionPayload, versionId: string]
+}>()
+
+/* 弹窗展示由公共 UI 管理，编辑请求交给业务组件。 */
+const editingVersionId = ref('')
+const editDialogRef = useTemplateRef<InstanceType<typeof EditPublishVersionDialog>>('editDialogRef')
+const descriptionDialogRef = useTemplateRef<InstanceType<typeof DescriptionDialog>>('descriptionDialogRef')
+
+function handleEdit(version: WorkflowVersion) {
+  editingVersionId.value = version.id
+  editDialogRef.value?.open(version)
+}
+
+function handleSubmit(payload: WorkflowVersionPayload) {
+  emit('submit', payload, editingVersionId.value)
+}
+
+function handleShowDescription(version: WorkflowVersion) {
+  descriptionDialogRef.value?.open(version.description ?? '')
+}
+
+function closeEdit() {
+  editDialogRef.value?.close()
+}
+
+function handlePreview(version: WorkflowVersion) {
+  emit('preview', version)
+}
+
+function handleRestore(version: WorkflowVersion) {
+  emit('restore', version)
+}
+
+defineExpose({ closeEdit })
+</script>
+
+<template>
+  <MkDrawer
+    v-model="visible"
+    title="发布历史"
+    size="320"
+    class="top-header! h-layout-content! max-w-full rounded-tl-xl!"
+    content-class="px-2 py-4"
+    :modal="false"
+    modal-penetrable
+    :lock-scroll="false"
+  >
+    <div v-loading="loading" class="space-y-4">
+      <template v-for="(version, index) in versions" :key="version.id">
+        <MkListItem :active="selectedId === version.id" @click="handlePreview(version)">
+          <div class="min-w-0 flex-1 pl-2">
+            <div class="flex items-center gap-2">
+              <h6 class="text-N900! truncate" :title="version.name || datetimeFormat(version.create_time)">
+                {{ version.name || datetimeFormat(version.create_time) }}
+              </h6>
+              <el-tag v-if="index === 0" size="small" class="shrink-0">最近发布</el-tag>
+            </div>
+            <div class="mt-1 flex items-center gap-1">
+              <el-avatar :size="18" class="bg-primary-gradient!">
+                <img src="@/assets/mk_icon_user_gradient.svg" alt="" style="width: 54%" />
+              </el-avatar>
+              <span
+                class="truncate text-N600! text-sm font-normal!"
+                :title="`${version.publish_user_name || '-'} 发布于 ${datetimeFormat(version.create_time)}`"
+                >{{ version.publish_user_name || '-' }} 发布于 {{ datetimeFormat(version.create_time) }}</span
+              >
+            </div>
+          </div>
+          <template #action-dropdown>
+            <!-- 编辑版本 -->
+            <MkDropdownItem @click="handleEdit(version)">
+              <template #icon><MkIcon name="icon_edit_outlined" /></template>
+              <span>编辑</span>
+            </MkDropdownItem>
+            <!-- 恢复此版本 -->
+            <MkDropdownItem @click="handleRestore(version)">
+              <template #icon><MkIcon name="icon_reset_outlined" /></template>
+              <span>恢复此版本</span>
+            </MkDropdownItem>
+            <!-- 查看更新说明 -->
+            <MkDropdownItem @click="handleShowDescription(version)">
+              <template #icon><MkIcon name="icon_info_outlined" /></template>
+              <span>更新说明</span>
+            </MkDropdownItem>
+          </template>
+        </MkListItem>
+      </template>
+      <MkEmpty v-if="!loading && !versions.length" />
+    </div>
+  </MkDrawer>
+  <!-- 编辑版本 -->
+  <EditPublishVersionDialog ref="editDialogRef" :saving="saving" @submit="handleSubmit" />
+  <!-- 查看更新说明 -->
+  <DescriptionDialog ref="descriptionDialogRef" />
+</template>
diff --git a/ui/src/views/workflow/components/publish-history/UpdateDescriptionDialog.vue b/ui/src/views/workflow/components/publish-history/UpdateDescriptionDialog.vue
deleted file mode 100644
index f6eee3df48e..00000000000
--- a/ui/src/views/workflow/components/publish-history/UpdateDescriptionDialog.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineOptions({ name: 'UpdateDescriptionDialog' })
-
-const visible = ref(false)
-const description = ref('')
-
-function open(content: string) {
-  description.value = content
-  visible.value = true
-}
-
-defineExpose({ open })
-</script>
-
-<template>
-  <MkDialog v-model="visible" class="workflow-version-description-dialog" title="更新说明" width="600" align-center @closed="description = ''">
-    <p class="whitespace-pre-wrap break-words leading-[30px]">{{ description || '暂无更新说明' }}</p>
-  </MkDialog>
-</template>
-
-<style scoped>
-/* 更新说明按内容撑开，长文本由 Dialog 的滚动区承接。 */
-:global(.workflow-version-description-dialog .el-dialog__body > .el-scrollbar),
-:global(.workflow-version-description-dialog .el-dialog__body > .el-scrollbar > .el-scrollbar__wrap) {
-  height: auto;
-}
-</style>