From 9114923541368fdfdfab269402955695fffe0fe8 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 23 Oct 2026 15:24:48 +0800
Subject: [PATCH] fix: tool edit bug

---
 ui/src/components/COMPONENT_README.md         |   2 +-
 .../components/message-list/index.vue         |  38 +++----
 .../main/chat-panel/index.vue                 |   5 +-
 ui/src/views/VIEW_README.md                   |   5 +-
 .../model/create-model/ButtonAddModel.vue     |   4 +-
 .../model/create-model/CreateModelDrawer.vue  |  16 ++-
 .../create-model/SelectProviderDrawer.vue     |   4 +-
 .../resource-management/knowledge/index.vue   |   4 +-
 .../system/shared-resources/tool/index.vue    |  26 ++---
 .../tool/components/ButtonCreateTool.vue      |  73 +++++++++++--
 ui/src/views/tool/index.vue                   |  26 ++---
 .../views/tool/tool-card/ToolStatusSwitch.vue |  16 ++-
 .../action-dropdown/EditToolAction.vue        |  86 +--------------
 ui/src/views/tool/tool-form/EditToolForm.vue  | 100 ++++++++++++++++++
 ui/src/views/workflow/application/index.vue   |   2 +-
 15 files changed, 245 insertions(+), 162 deletions(-)
 create mode 100644 ui/src/views/tool/tool-form/EditToolForm.vue

diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 30657d83045..69dc431bef3 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -865,7 +865,7 @@ Skills 场景传入 `[TOOL_TYPE.SKILL]`，并通过 `title` 指定标题。两
 `prop`（字段名）和 `label`（列名），列宽由表格自动分配。组件不转换接口数据结构，
 旧对象映射由调用页面转换为行数组。用户组直接传入 `user_group_workspace` 数组，
 使用 `workspace`、`user_group_names` 两列；角色映射由用户列表页面转换。
-数组单元格以“、”连接，空数组、空字符串、null 和 undefined 显示 `-`，长文本使用溢出提示。
+数组单元格以“、”连接，空数组、空字符串、null、undefined 及字符串 `"None"`（含单元素数组）显示 `-`，长文本使用溢出提示。
 `data` 为空时禁用关联浮层，保留标签展示；内部 `MkTagGroup` 的标签浮层保持禁用。
 
 ### ResourceAuthorizationDrawer
diff --git a/ui/src/conversation-panel/components/message-list/index.vue b/ui/src/conversation-panel/components/message-list/index.vue
index fbf09917687..6995d6954d9 100644
--- a/ui/src/conversation-panel/components/message-list/index.vue
+++ b/ui/src/conversation-panel/components/message-list/index.vue
@@ -83,25 +83,25 @@ const onScroll = () => {
 //   color: var(--t3, #909399);
 // }
 
-// .welcome {
-//   flex: 1;
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   justify-content: center;
-//   text-align: center;
-//   padding: 32px 16px;
-// }
-// .welcome-title {
-//   font-size: 18px;
-//   font-weight: 600;
-//   color: var(--t1, #303133);
-//   margin-bottom: 8px;
-// }
-// .welcome-sub {
-//   font-size: 14px;
-//   color: var(--t3, #909399);
-// }
+.welcome {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 32px 16px;
+}
+.welcome-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--t1, #303133);
+  margin-bottom: 8px;
+}
+.welcome-sub {
+  font-size: 14px;
+  color: var(--t3, #909399);
+}
 
 // .msg-row {
 //   display: flex;
diff --git a/ui/src/conversation-panel/main/chat-panel/index.vue b/ui/src/conversation-panel/main/chat-panel/index.vue
index 97e879c5500..3ceeac3b9c3 100644
--- a/ui/src/conversation-panel/main/chat-panel/index.vue
+++ b/ui/src/conversation-panel/main/chat-panel/index.vue
@@ -16,7 +16,10 @@ const handleDrop = (e: DragEvent) => input.addFiles(e.dataTransfer?.files)
   <main class="mk-conversation-main" @drop.prevent="handleDrop" @dragover.prevent>
     <!-- 头部可被替换(如 debug 用 debug header);默认普通 chat header -->
     <slot name="header"><ChatHeader /></slot>
-    <MessageList :app-name="list.appInfo.value?.name || 'AI 助手'" />
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      <MessageList :app-name="list.appInfo.value?.name || 'AI 助手'" />
+    </div>
+
     <footer class="flex-center shrink-0 p-4"><MessageInput /></footer>
   </main>
 </template>
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index a853b52e99e..bb1c42b07d5 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -83,9 +83,12 @@
   不包含 Workspace 共享或 System 共享，不将缺失方法回退到 Workspace。
   切换二级菜单不重复挂载详情容器。
 - 创建模型入口接收完整 Model API；创建成功刷新基础资料后通知调用方刷新选项。
+  选择供应商时将模型类型同步到创建抽屉的供应商筛选；未传类型时默认“全部模型”。
 - 工具表单按类型放在 `tool-form/`，共用参数及 Python 设置放在 `tool-form/component/`。
   创建和编辑复用同一表单，不把不同类型字段合并成通用表单。
-- `ToolCard` 点击工作流进入画布，其他类型调用编辑 Action 的同一表单实例；编辑、启停成功局部更新。
+- `ToolCard` 点击工作流进入画布，其他类型与编辑菜单共用页面级 `EditToolForm` 实例，
+  不依赖下拉菜单挂载或维护逐卡片 Action Ref；`EditToolAction` 复用相同表单调度组件。
+  表单按类型打开，关闭动画后卸载具体表单；编辑、启停成功局部更新。
 - 智能体的 Workspace 卡片与 System 资源列表复用门户上下架和导出 Action；门户入口按 `is_portal`
   显示“上架到门户／从门户下架”，当前通过 mock 接口更新列表局部状态，刷新后恢复服务端状态。
   导出使用二级菜单，包含“导出为 Skills”和“导出智能体”；Skills 当前调用 mock 接口并明确提示
diff --git a/ui/src/views/model/create-model/ButtonAddModel.vue b/ui/src/views/model/create-model/ButtonAddModel.vue
index 76afb535646..c15c88b08e3 100644
--- a/ui/src/views/model/create-model/ButtonAddModel.vue
+++ b/ui/src/views/model/create-model/ButtonAddModel.vue
@@ -30,8 +30,8 @@ function handleOpenCreateModel() {
   selectProviderDrawerRef.value?.open()
 }
 
-function handleCreateProviderSelect(provider: ModelProviderItem) {
-  createModelDrawerRef.value?.open(provider)
+function handleCreateProviderSelect(provider: ModelProviderItem, modelType: string) {
+  createModelDrawerRef.value?.open(provider, modelType)
 }
 
 function handleBackToProviderSelect() {
diff --git a/ui/src/views/model/create-model/CreateModelDrawer.vue b/ui/src/views/model/create-model/CreateModelDrawer.vue
index 1de8945bc4c..bed148f6a71 100644
--- a/ui/src/views/model/create-model/CreateModelDrawer.vue
+++ b/ui/src/views/model/create-model/CreateModelDrawer.vue
@@ -5,6 +5,7 @@ import type ModelApi from '@/api/admin/workspace/model'
 import type SystemModelApi from '@/api/admin/system/resource-management/model'
 import type SystemSharedModelApi from '@/api/admin/system/shared-resources/model'
 import ProviderApi from '@/api/admin/model-provider'
+import { MODEL_TYPE_LABELS } from '@/constants/model'
 import { MkDynamicsForm, type DynamicFormValue, type FormField } from '@/components/mk-dynamics-form'
 import { useStore } from '@/stores'
 import { MsgSuccess } from '@/utils/message'
@@ -25,9 +26,10 @@ const emit = defineEmits<{ back: []; refresh: [] }>()
 const visible = ref(false)
 const loading = ref(false)
 const providersLoading = ref(false)
+const modelType = ref('all')
 const currentProvider = ref<ModelProviderItem>()
 const loadedProviders = ref<ModelProviderItem[]>([])
-const providerOptions = computed(() => (props.providers.length ? props.providers : loadedProviders.value))
+const providerOptions = computed(() => (modelType.value === 'all' && props.providers.length ? props.providers : loadedProviders.value))
 
 const modelForm = reactive<ModelPayload>({ credential: {}, model_name: '', model_type: '', name: '', provider: '' })
 
@@ -65,7 +67,7 @@ function handleProviderSelect(provider: ModelProviderItem) {
 
 function loadModelProviders() {
   providersLoading.value = true
-  return ProviderApi.getProviderList()
+  return ProviderApi.getProviderList(modelType.value === 'all' ? undefined : { model_type: modelType.value })
     .then((providers) => {
       loadedProviders.value = [...providers].sort((left, right) => left.name.localeCompare(right.name))
     })
@@ -147,8 +149,9 @@ function handleSubmit() {
   })
 }
 
-function open(provider: ModelProviderItem) {
-  if (!props.providers.length) loadModelProviders()
+function open(provider: ModelProviderItem, selectedModelType = 'all') {
+  modelType.value = selectedModelType
+  if (modelType.value !== 'all' || !props.providers.length) loadModelProviders()
   loadModelTypes(provider)
   visible.value = true
 }
@@ -165,6 +168,7 @@ function resetModelSelection() {
 }
 
 function resetData() {
+  modelType.value = 'all'
   currentProvider.value = undefined
   loadedProviders.value = []
   modelForm.name = ''
@@ -193,8 +197,10 @@ defineExpose({ open })
     <MkViewLayout :loading="loading || providersLoading" :title="currentProvider?.name ?? ''">
       <template #aside="{ Header }">
         <component :is="Header">
-          <el-select model-value="all" class="w-full">
+          <!-- 选择模型类型 -->
+          <el-select v-model="modelType" class="w-full" @change="loadModelProviders">
             <el-option label="全部模型" value="all" />
+            <el-option v-for="(label, value) in MODEL_TYPE_LABELS" :key="value" :label="label" :value="value" />
           </el-select>
         </component>
 
diff --git a/ui/src/views/model/create-model/SelectProviderDrawer.vue b/ui/src/views/model/create-model/SelectProviderDrawer.vue
index 3429f43c89d..5fa4d8b82a8 100644
--- a/ui/src/views/model/create-model/SelectProviderDrawer.vue
+++ b/ui/src/views/model/create-model/SelectProviderDrawer.vue
@@ -6,7 +6,7 @@ import { MODEL_TYPE_LABELS } from '@/constants'
 
 defineOptions({ name: 'SelectProviderDrawer' })
 
-const emit = defineEmits<{ select: [provider: ModelProviderItem] }>()
+const emit = defineEmits<{ select: [provider: ModelProviderItem, modelType: string] }>()
 
 const visible = ref(false)
 const modelType = ref('all')
@@ -38,7 +38,7 @@ function loadModelProviders() {
 
 function handleProviderSelect(provider: ModelProviderItem) {
   visible.value = false
-  emit('select', provider)
+  emit('select', provider, modelType.value)
 }
 
 function handleModelTypeChange(value: string) {
diff --git a/ui/src/views/system/resource-management/knowledge/index.vue b/ui/src/views/system/resource-management/knowledge/index.vue
index c7b0fec9db9..a7c0ef0eab1 100644
--- a/ui/src/views/system/resource-management/knowledge/index.vue
+++ b/ui/src/views/system/resource-management/knowledge/index.vue
@@ -151,7 +151,7 @@ onMounted(() => {
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="type" label="类型" width="180">
+        <el-table-column prop="type" label="类型" width="150">
           <template #header>
             <MkTableFilter mode="single" v-model="selectedType" label="类型" :options="typeOptions" @change="handleFilterChange" />
           </template>
@@ -171,7 +171,7 @@ onMounted(() => {
         <el-table-column prop="create_time" label="创建时间" width="180" sortable>
           <template #default="{ row }">{{ datetimeFormat(row.create_time) }}</template>
         </el-table-column>
-        <el-table-column label="操作" width="150" fixed="right">
+        <el-table-column label="操作" width="120" fixed="right">
           <template #default="{ row }">
             <div class="flex-align-center">
               <!-- 进入知识库详情 -->
diff --git a/ui/src/views/system/shared-resources/tool/index.vue b/ui/src/views/system/shared-resources/tool/index.vue
index f0431904de0..ca845c0e032 100644
--- a/ui/src/views/system/shared-resources/tool/index.vue
+++ b/ui/src/views/system/shared-resources/tool/index.vue
@@ -16,7 +16,6 @@ import ButtonCreateTool from '@/views/tool/components/ButtonCreateTool.vue'
 import {
   RelatedResourcesToolAction,
   DeleteToolAction,
-  EditToolAction,
   ExportToolAction,
   ExecutionRecordToolAction,
   InitParamAction,
@@ -24,6 +23,7 @@ import {
   CopyToolAction,
 } from '@/views/tool/tool-card/action-dropdown'
 import ButtonToolStore from '@/views/tool/components/ButtonToolStore.vue'
+import EditToolForm from '@/views/tool/tool-form/EditToolForm.vue'
 import perm from '@/permission'
 
 const router = useRouter()
@@ -68,7 +68,12 @@ function handleSearchChange(query?: Dict<unknown>) {
 
 /* 共享工具维护 */
 const toolOperationLoading = ref(false)
-const editToolActionRefs: Record<string, InstanceType<typeof EditToolAction> | null> = {}
+const editToolFormRef = useTemplateRef<InstanceType<typeof EditToolForm>>('editToolFormRef')
+
+function handleOpenEditTool(tool: ToolItem) {
+  if (!perm.tool.share.edit()) return
+  return editToolFormRef.value?.open(tool)
+}
 
 function handleOpenTool(tool: ToolItem, event: MouseEvent) {
   if (tool.tool_type === TOOL_TYPE.WORKFLOW) {
@@ -79,7 +84,7 @@ function handleOpenTool(tool: ToolItem, event: MouseEvent) {
     }
     return router.push(target)
   }
-  editToolActionRefs[tool.id]?.handleOpenToolForm()
+  handleOpenEditTool(tool)
 }
 
 function handleToolUpdate(tool: ToolItem) {
@@ -141,19 +146,7 @@ function handleOpenWorkflow(tool: ToolItem, event: MouseEvent) {
                 </template>
                 <template #action-dropdown>
                   <!-- 编辑共享工具 -->
-                  <EditToolAction
-                    v-if="perm.tool.share.edit()"
-                    :ref="
-                      (instance) => {
-                        if (instance) editToolActionRefs[tool.id] = instance as InstanceType<typeof EditToolAction>
-                        else delete editToolActionRefs[tool.id]
-                      }
-                    "
-                    label="编辑"
-                    :api="SystemSharedToolApi"
-                    :tool="tool"
-                    @update="handleToolUpdate"
-                  />
+                  <MkAction v-if="perm.tool.share.edit()" label="编辑" icon="icon_edit_outlined" @click="handleOpenEditTool(tool)" />
                   <!-- 复制 -->
                   <CopyToolAction
                     v-if="perm.tool.share.copy()"
@@ -228,4 +221,5 @@ function handleOpenWorkflow(tool: ToolItem, event: MouseEvent) {
       </div>
     </template>
   </MkViewLayout>
+  <EditToolForm ref="editToolFormRef" :api="SystemSharedToolApi" @update="handleToolUpdate" />
 </template>
diff --git a/ui/src/views/tool/components/ButtonCreateTool.vue b/ui/src/views/tool/components/ButtonCreateTool.vue
index 831a9f3cf0f..1aab48845cc 100644
--- a/ui/src/views/tool/components/ButtonCreateTool.vue
+++ b/ui/src/views/tool/components/ButtonCreateTool.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, useTemplateRef, type CSSProperties } from 'vue'
+import { computed, nextTick, ref, useTemplateRef, type CSSProperties } from 'vue'
 import type { UploadFile, UploadInstance } from 'element-plus'
 import ToolApi from '@/api/admin/workspace/tool/tool'
 import type SystemSharedToolApi from '@/api/admin/system/shared-resources/tool/tool'
 import { TOOL_TYPE } from '@/api/enums'
+import type { ToolType } from '@/api/types'
 import { useStore } from '@/stores'
 import { MsgSuccess } from '@/utils/message'
 import ToolFormDrawer from '../tool-form/tool-custom/ToolFormDrawer.vue'
@@ -51,6 +52,7 @@ function handleVisibleChange(visible: boolean) {
 }
 
 /* 工具创建表单 */
+const activeFormType = ref<ToolType | null>(null)
 const toolFormDrawerRef = useTemplateRef<InstanceType<typeof ToolFormDrawer>>('toolFormDrawerRef')
 const workflowFormDialogRef = useTemplateRef<InstanceType<typeof WorkflowFormDialog>>('workflowFormDialogRef')
 const skillToolFormDrawerRef = useTemplateRef<InstanceType<typeof SkillToolFormDrawer>>('skillToolFormDrawerRef')
@@ -58,23 +60,32 @@ const mcpFormDrawerRef = useTemplateRef<InstanceType<typeof McpFormDrawer>>('mcp
 const dataSourceFormDrawerRef = useTemplateRef<InstanceType<typeof DataSourceFormDrawer>>('dataSourceFormDrawerRef')
 
 function handleOpenToolForm() {
-  toolFormDrawerRef.value?.open()
+  activeFormType.value = TOOL_TYPE.CUSTOM
+  return nextTick(() => toolFormDrawerRef.value?.open())
 }
 
 function handleOpenWorkflowForm() {
-  workflowFormDialogRef.value?.open()
+  activeFormType.value = TOOL_TYPE.WORKFLOW
+  return nextTick(() => workflowFormDialogRef.value?.open())
 }
 
 function handleOpenSkillForm() {
-  skillToolFormDrawerRef.value?.open()
+  activeFormType.value = TOOL_TYPE.SKILL
+  return nextTick(() => skillToolFormDrawerRef.value?.open())
 }
 
 function handleOpenMcpForm() {
-  mcpFormDrawerRef.value?.open()
+  activeFormType.value = TOOL_TYPE.MCP
+  return nextTick(() => mcpFormDrawerRef.value?.open())
 }
 
 function handleOpenDataSourceForm() {
-  dataSourceFormDrawerRef.value?.open()
+  activeFormType.value = TOOL_TYPE.DATA_SOURCE
+  return nextTick(() => dataSourceFormDrawerRef.value?.open())
+}
+
+function handleFormClosed() {
+  activeFormType.value = null
 }
 
 /* 导入创建 */
@@ -168,9 +179,49 @@ function handleRefresh() {
       </MkDropdownMenu>
     </template>
   </MkDropdown>
-  <ToolFormDrawer ref="toolFormDrawerRef" title="创建工具" :api="api" :folder-id="folderId" @refresh="handleRefresh" />
-  <WorkflowFormDialog ref="workflowFormDialogRef" title="创建工作流" :api="api" :folder-id="folderId" @refresh="handleRefresh" />
-  <SkillToolFormDrawer ref="skillToolFormDrawerRef" title="创建 Skill" :api="api" :folder-id="folderId" @refresh="handleRefresh" />
-  <McpFormDrawer ref="mcpFormDrawerRef" title="创建 MCP" :api="api" :folder-id="folderId" @refresh="handleRefresh" />
-  <DataSourceFormDrawer ref="dataSourceFormDrawerRef" title="创建数据源" :api="api" :folder-id="folderId" @refresh="handleRefresh" />
+  <ToolFormDrawer
+    v-if="activeFormType === TOOL_TYPE.CUSTOM"
+    ref="toolFormDrawerRef"
+    title="创建工具"
+    :api="api"
+    :folder-id="folderId"
+    @refresh="handleRefresh"
+    @closed="handleFormClosed"
+  />
+  <WorkflowFormDialog
+    v-if="activeFormType === TOOL_TYPE.WORKFLOW"
+    ref="workflowFormDialogRef"
+    title="创建工作流"
+    :api="api"
+    :folder-id="folderId"
+    @refresh="handleRefresh"
+    @closed="handleFormClosed"
+  />
+  <SkillToolFormDrawer
+    v-if="activeFormType === TOOL_TYPE.SKILL"
+    ref="skillToolFormDrawerRef"
+    title="创建 Skill"
+    :api="api"
+    :folder-id="folderId"
+    @refresh="handleRefresh"
+    @closed="handleFormClosed"
+  />
+  <McpFormDrawer
+    v-if="activeFormType === TOOL_TYPE.MCP"
+    ref="mcpFormDrawerRef"
+    title="创建 MCP"
+    :api="api"
+    :folder-id="folderId"
+    @refresh="handleRefresh"
+    @closed="handleFormClosed"
+  />
+  <DataSourceFormDrawer
+    v-if="activeFormType === TOOL_TYPE.DATA_SOURCE"
+    ref="dataSourceFormDrawerRef"
+    title="创建数据源"
+    :api="api"
+    :folder-id="folderId"
+    @refresh="handleRefresh"
+    @closed="handleFormClosed"
+  />
 </template>
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index 4f970f77c4d..077fe75395a 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -22,7 +22,6 @@ import {
   RelatedResourcesToolAction,
   CopyToolAction,
   DeleteToolAction,
-  EditToolAction,
   ExportToolAction,
   ExecutionRecordToolAction,
   InitParamAction,
@@ -33,6 +32,7 @@ import {
 } from './tool-card/action-dropdown'
 import ButtonCreateTool from './components/ButtonCreateTool.vue'
 import ButtonToolStore from './components/ButtonToolStore.vue'
+import EditToolForm from '@/views/tool/tool-form/EditToolForm.vue'
 import perm from '@/permission/index.ts'
 
 /* 当前文件夹 */
@@ -103,11 +103,16 @@ function loadStoreTools() {
 /* 卡片打开工具 */
 const route = useRoute()
 const router = useRouter()
-const editToolActionRefs: Record<string, InstanceType<typeof EditToolAction> | null> = {}
+const editToolFormRef = useTemplateRef<InstanceType<typeof EditToolForm>>('editToolFormRef')
+
+function handleOpenEditTool(tool: ToolItem) {
+  if (!perm.tool.workspace.edit(tool.id)) return
+  return editToolFormRef.value?.open(tool)
+}
 
 function handleOpenTool(tool: ToolItem, event: MouseEvent) {
   if (isShared.value || batchSelectionMode.value) return
-  if (tool.tool_type !== TOOL_TYPE.WORKFLOW) return editToolActionRefs[tool.id]?.handleOpenToolForm()
+  if (tool.tool_type !== TOOL_TYPE.WORKFLOW) return handleOpenEditTool(tool)
 
   const workflowRoute = {
     name: 'workflow-tool',
@@ -291,19 +296,7 @@ onMounted(() => {
                 </template>
                 <template #action-dropdown>
                   <!-- 编辑工具 -->
-                  <EditToolAction
-                    v-if="perm.tool.workspace.edit(tool.id)"
-                    :ref="
-                      (instance) => {
-                        if (instance) editToolActionRefs[tool.id] = instance as InstanceType<typeof EditToolAction>
-                        else delete editToolActionRefs[tool.id]
-                      }
-                    "
-                    label="编辑"
-                    :api="ToolApi"
-                    :tool="tool"
-                    @update="handleToolUpdate"
-                  />
+                  <MkAction v-if="perm.tool.workspace.edit(tool.id)" label="编辑" icon="icon_edit_outlined" @click="handleOpenEditTool(tool)" />
                   <ToolWorkflowAction v-if="tool.tool_type === TOOL_TYPE.WORKFLOW" label="工作流" :tool="tool" />
                   <!-- 复制 -->
                   <CopyToolAction
@@ -410,4 +403,5 @@ onMounted(() => {
   </MkViewLayout>
 
   <MoveToDialog ref="batchMoveToDialogRef" :loading="toolOperationLoading" :source="RESOURCE_TYPE.TOOL" @submit="handleBatchMove" />
+  <EditToolForm ref="editToolFormRef" :api="ToolApi" @update="handleToolUpdate" />
 </template>
diff --git a/ui/src/views/tool/tool-card/ToolStatusSwitch.vue b/ui/src/views/tool/tool-card/ToolStatusSwitch.vue
index d6834c4e983..71f03aed432 100644
--- a/ui/src/views/tool/tool-card/ToolStatusSwitch.vue
+++ b/ui/src/views/tool/tool-card/ToolStatusSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { nextTick, ref, useTemplateRef } from 'vue'
 import type ToolApi from '@/api/admin/workspace/tool/tool'
 import type SystemResourceToolApi from '@/api/admin/system/resource-management/tool/tool'
 import type SystemSharedToolApi from '@/api/admin/system/shared-resources/tool/tool'
@@ -16,6 +16,7 @@ const loading = defineModel<boolean>('loading', { default: false })
 
 const emit = defineEmits<{ update: [tool: ToolItem] }>()
 
+const initParamMounted = ref(false)
 const initParamDrawerRef = useTemplateRef<InstanceType<typeof InitParamDrawer>>('initParamDrawerRef')
 
 function handleToolStatusChange() {
@@ -36,8 +37,11 @@ function handleToolStatusChange() {
       }
 
       if (hasMissingInitParams(toolDetail)) {
-        initParamDrawerRef.value?.open(toolDetail, true, true)
-        return false
+        initParamMounted.value = true
+        return nextTick(() => {
+          initParamDrawerRef.value?.open(toolDetail, true, true)
+          return false
+        })
       }
 
       return updateToolStatus(true)
@@ -48,6 +52,10 @@ function handleToolStatusChange() {
     })
 }
 
+function handleInitParamClosed() {
+  initParamMounted.value = false
+}
+
 function hasMissingInitParams(tool: ToolItem) {
   const initFields = tool.init_field_list ?? []
   const initParams = typeof tool.init_params === 'object' && tool.init_params ? tool.init_params : {}
@@ -75,5 +83,5 @@ function updateToolStatus(active: boolean) {
 <template>
   <el-switch :disabled="loading" :model-value="tool.is_active" size="small" :before-change="handleToolStatusChange" v-bind="$attrs" />
 
-  <InitParamDrawer ref="initParamDrawerRef" :api="api" @update="emit('update', $event)" />
+  <InitParamDrawer v-if="initParamMounted" ref="initParamDrawerRef" :api="api" @closed="handleInitParamClosed" @update="emit('update', $event)" />
 </template>
diff --git a/ui/src/views/tool/tool-card/action-dropdown/EditToolAction.vue b/ui/src/views/tool/tool-card/action-dropdown/EditToolAction.vue
index 70c515b3f71..5b1a8310169 100644
--- a/ui/src/views/tool/tool-card/action-dropdown/EditToolAction.vue
+++ b/ui/src/views/tool/tool-card/action-dropdown/EditToolAction.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import { nextTick, ref, useTemplateRef } from 'vue'
+import { useTemplateRef } from 'vue'
 import type ToolApi from '@/api/admin/workspace/tool/tool'
 import type SystemResourceToolApi from '@/api/admin/system/resource-management/tool/tool'
 import type SystemSharedToolApi from '@/api/admin/system/shared-resources/tool/tool'
 import type { ToolItem } from '@/api/types'
-import { TOOL_TYPE } from '@/api/enums'
-import ToolFormDrawer from '@/views/tool/tool-form/tool-custom/ToolFormDrawer.vue'
-import DataSourceFormDrawer from '@/views/tool/tool-form/DataSourceFormDrawer.vue'
-import McpFormDrawer from '@/views/tool/tool-form/McpFormDrawer.vue'
-import SkillToolFormDrawer from '@/views/tool/tool-form/SkillToolFormDrawer.vue'
-import WorkflowFormDialog from '@/views/tool/tool-form/WorkflowFormDialog.vue'
+import EditToolForm from '@/views/tool/tool-form/EditToolForm.vue'
 
 defineOptions({ name: 'EditToolAction' })
 
@@ -21,86 +16,15 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{ update: [tool: ToolItem] }>()
-
-const formMounted = ref(false)
-const toolFormDrawerRef = useTemplateRef<InstanceType<typeof ToolFormDrawer>>('toolFormDrawerRef')
-const dataSourceFormDrawerRef = useTemplateRef<InstanceType<typeof DataSourceFormDrawer>>('dataSourceFormDrawerRef')
-const mcpFormDrawerRef = useTemplateRef<InstanceType<typeof McpFormDrawer>>('mcpFormDrawerRef')
-const skillToolFormDrawerRef = useTemplateRef<InstanceType<typeof SkillToolFormDrawer>>('skillToolFormDrawerRef')
-const workflowFormDialogRef = useTemplateRef<InstanceType<typeof WorkflowFormDialog>>('workflowFormDialogRef')
+const editToolFormRef = useTemplateRef<InstanceType<typeof EditToolForm>>('editToolFormRef')
 
 function handleOpenToolForm() {
-  formMounted.value = true
-  return nextTick(() => {
-    if (props.tool.tool_type === TOOL_TYPE.DATA_SOURCE) {
-      dataSourceFormDrawerRef.value?.open(props.tool)
-    } else if (props.tool.tool_type === TOOL_TYPE.MCP) {
-      mcpFormDrawerRef.value?.open(props.tool)
-    } else if (props.tool.tool_type === TOOL_TYPE.SKILL) {
-      skillToolFormDrawerRef.value?.open(props.tool)
-    } else if (props.tool.tool_type === TOOL_TYPE.WORKFLOW) {
-      workflowFormDialogRef.value?.open(props.tool)
-    } else {
-      toolFormDrawerRef.value?.open(props.tool)
-    }
-  })
-}
-
-function handleFormClosed() {
-  formMounted.value = false
+  return editToolFormRef.value?.open(props.tool)
 }
-defineExpose({ handleOpenToolForm })
 </script>
 
 <template>
   <!-- 编辑工具 -->
   <MkAction :display="display" :label="label" icon="icon_edit_outlined" @click="handleOpenToolForm" />
-
-  <template v-if="formMounted">
-    <DataSourceFormDrawer
-      v-if="tool.tool_type === TOOL_TYPE.DATA_SOURCE"
-      ref="dataSourceFormDrawerRef"
-      title="编辑数据源"
-      :api="api"
-      :folder-id="tool.folder_id ?? ''"
-      @closed="handleFormClosed"
-      @update="emit('update', $event)"
-    />
-    <McpFormDrawer
-      v-else-if="tool.tool_type === TOOL_TYPE.MCP"
-      ref="mcpFormDrawerRef"
-      title="编辑 MCP"
-      :api="api"
-      :folder-id="tool.folder_id ?? ''"
-      @closed="handleFormClosed"
-      @update="emit('update', $event)"
-    />
-    <SkillToolFormDrawer
-      v-else-if="tool.tool_type === TOOL_TYPE.SKILL"
-      ref="skillToolFormDrawerRef"
-      title="编辑 Skill"
-      :api="api"
-      :folder-id="tool.folder_id ?? ''"
-      @closed="handleFormClosed"
-      @update="emit('update', $event)"
-    />
-    <WorkflowFormDialog
-      v-else-if="tool.tool_type === TOOL_TYPE.WORKFLOW"
-      ref="workflowFormDialogRef"
-      title="编辑工作流"
-      :api="api"
-      :folder-id="tool.folder_id ?? ''"
-      @closed="handleFormClosed"
-      @update="emit('update', $event)"
-    />
-    <ToolFormDrawer
-      v-else
-      ref="toolFormDrawerRef"
-      title="编辑工具"
-      :api="api"
-      :folder-id="tool.folder_id ?? ''"
-      @closed="handleFormClosed"
-      @update="emit('update', $event)"
-    />
-  </template>
+  <EditToolForm ref="editToolFormRef" :api="api" @update="emit('update', $event)" />
 </template>
diff --git a/ui/src/views/tool/tool-form/EditToolForm.vue b/ui/src/views/tool/tool-form/EditToolForm.vue
new file mode 100644
index 00000000000..9669f8e139d
--- /dev/null
+++ b/ui/src/views/tool/tool-form/EditToolForm.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { nextTick, ref, useTemplateRef } from 'vue'
+import type ToolApi from '@/api/admin/workspace/tool/tool'
+import type SystemResourceToolApi from '@/api/admin/system/resource-management/tool/tool'
+import type SystemSharedToolApi from '@/api/admin/system/shared-resources/tool/tool'
+import type { ToolItem } from '@/api/types'
+import { TOOL_TYPE } from '@/api/enums'
+import ToolFormDrawer from '@/views/tool/tool-form/tool-custom/ToolFormDrawer.vue'
+import DataSourceFormDrawer from '@/views/tool/tool-form/DataSourceFormDrawer.vue'
+import McpFormDrawer from '@/views/tool/tool-form/McpFormDrawer.vue'
+import SkillToolFormDrawer from '@/views/tool/tool-form/SkillToolFormDrawer.vue'
+import WorkflowFormDialog from '@/views/tool/tool-form/WorkflowFormDialog.vue'
+
+defineOptions({ name: 'EditToolForm' })
+
+defineProps<{
+  api: typeof ToolApi | typeof SystemSharedToolApi | typeof SystemResourceToolApi
+}>()
+
+const emit = defineEmits<{ update: [tool: ToolItem] }>()
+
+const tool = ref<ToolItem | null>(null)
+const toolFormDrawerRef = useTemplateRef<InstanceType<typeof ToolFormDrawer>>('toolFormDrawerRef')
+const dataSourceFormDrawerRef = useTemplateRef<InstanceType<typeof DataSourceFormDrawer>>('dataSourceFormDrawerRef')
+const mcpFormDrawerRef = useTemplateRef<InstanceType<typeof McpFormDrawer>>('mcpFormDrawerRef')
+const skillToolFormDrawerRef = useTemplateRef<InstanceType<typeof SkillToolFormDrawer>>('skillToolFormDrawerRef')
+const workflowFormDialogRef = useTemplateRef<InstanceType<typeof WorkflowFormDialog>>('workflowFormDialogRef')
+
+function open(toolData: ToolItem) {
+  tool.value = toolData
+  return nextTick(() => {
+    if (toolData.tool_type === TOOL_TYPE.DATA_SOURCE) {
+      dataSourceFormDrawerRef.value?.open(toolData)
+    } else if (toolData.tool_type === TOOL_TYPE.MCP) {
+      mcpFormDrawerRef.value?.open(toolData)
+    } else if (toolData.tool_type === TOOL_TYPE.SKILL) {
+      skillToolFormDrawerRef.value?.open(toolData)
+    } else if (toolData.tool_type === TOOL_TYPE.WORKFLOW) {
+      workflowFormDialogRef.value?.open(toolData)
+    } else {
+      toolFormDrawerRef.value?.open(toolData)
+    }
+  })
+}
+
+function handleFormClosed() {
+  tool.value = null
+}
+defineExpose({ open })
+</script>
+
+<template>
+  <template v-if="tool">
+    <DataSourceFormDrawer
+      v-if="tool.tool_type === TOOL_TYPE.DATA_SOURCE"
+      ref="dataSourceFormDrawerRef"
+      title="编辑数据源"
+      :api="api"
+      :folder-id="tool.folder_id ?? ''"
+      @closed="handleFormClosed"
+      @update="emit('update', $event)"
+    />
+    <McpFormDrawer
+      v-else-if="tool.tool_type === TOOL_TYPE.MCP"
+      ref="mcpFormDrawerRef"
+      title="编辑 MCP"
+      :api="api"
+      :folder-id="tool.folder_id ?? ''"
+      @closed="handleFormClosed"
+      @update="emit('update', $event)"
+    />
+    <SkillToolFormDrawer
+      v-else-if="tool.tool_type === TOOL_TYPE.SKILL"
+      ref="skillToolFormDrawerRef"
+      title="编辑 Skill"
+      :api="api"
+      :folder-id="tool.folder_id ?? ''"
+      @closed="handleFormClosed"
+      @update="emit('update', $event)"
+    />
+    <WorkflowFormDialog
+      v-else-if="tool.tool_type === TOOL_TYPE.WORKFLOW"
+      ref="workflowFormDialogRef"
+      title="编辑工作流"
+      :api="api"
+      :folder-id="tool.folder_id ?? ''"
+      @closed="handleFormClosed"
+      @update="emit('update', $event)"
+    />
+    <ToolFormDrawer
+      v-else
+      ref="toolFormDrawerRef"
+      title="编辑工具"
+      :api="api"
+      :folder-id="tool.folder_id ?? ''"
+      @closed="handleFormClosed"
+      @update="emit('update', $event)"
+    />
+  </template>
+</template>
diff --git a/ui/src/views/workflow/application/index.vue b/ui/src/views/workflow/application/index.vue
index c73e5ba2e08..24cd3e6d40d 100644
--- a/ui/src/views/workflow/application/index.vue
+++ b/ui/src/views/workflow/application/index.vue
@@ -408,7 +408,7 @@ onBeforeUnmount(() => stopAutoSave())
       </MkDropdown>
     </template>
     <!-- 主画布 -->
-    <div class="relative min-h-0 min-w-0 flex-1" :inert="!!previewVersion">
+    <div class="relative min-h-0 min-w-0 flex-1">
       <WorkflowCanvas
         ref="workflowRef"
         class="h-full"