diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 8853ea593c3..ef210d90b5a 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -762,6 +762,17 @@ JSON 专用输入框，通过 `v-model` 接收并回传解析后的 JSON 值，
 表单配置加载、字段联动请求与 Tree 懒加载的 loading 由组件在请求前开启，并在 `finally` 中释放；
 不向 API 请求方法传递 loading，动态请求脚本也不再通过 `extra.loading` 获取状态。
 
+动态表单 `Tree` 字段使用 `MkTable` 展示文档与文件夹，复用原生复选列、全选和父子选择联动。
+保留 `text_field`、`value_field`、`childrenField` 映射，选中值仍为原始节点对象数组；
+已导入节点自动选中且不可取消，`disabled` 节点不可选择。懒加载先查询根目录，展开时通过
+原有工具数据源接口提交 `current_node` 查询子节点；非懒加载使用 `option_list`。
+
+动态表单 `LocalFileUpload` 字段复用 `MkDragUpload` 的多文件模式，将
+`file_type_list`、`file_size_limit`、`file_count_limit` 映射为格式、大小和数量限制。
+上传适配兼容上层返回的 Promise 或 `{ request, abort }`，响应支持地址字符串或 `{ data: 地址 }`；
+文件夹选择、进度、失败重试、取消和成功文件删除由 `MkDragUpload` 维护，文件值采用
+`DragUploadFile[]`，失败状态为 `fail`。
+
 `MkDynamicsForm` 根据字段配置渲染动态表单，统一维护字段值、默认值、显隐规则和表单校验；
 `MkDynamicsFormConstructor` 用于新增或编辑单个字段配置。该组件族位于 `components` 直属目录，
 使用方必须从 `@/components/mk-dynamics-form` 手动导入，不安装为 Vue 插件，也不全局注册其内部
diff --git a/ui/src/components/mk-dynamics-form/items/tree/Tree.vue b/ui/src/components/mk-dynamics-form/items/tree/Tree.vue
index d4d0dc45181..1e8b0d28d59 100644
--- a/ui/src/components/mk-dynamics-form/items/tree/Tree.vue
+++ b/ui/src/components/mk-dynamics-form/items/tree/Tree.vue
@@ -1,149 +1,167 @@
 <script setup lang="ts">
-import type { DynamicFormValue } from '../../type'
-import { computed, ref, useAttrs, nextTick, inject } from 'vue'
-import type { FormField } from '@/components/mk-dynamics-form/type'
+import { computed, inject, nextTick, ref, toRaw, useAttrs, useTemplateRef, watch } from 'vue'
+import { cloneDeep, isEqual } from 'lodash'
+import { formItemContextKey, type TableInstance, type TreeNode } from 'element-plus'
+import type { Dict } from '@/api/types'
 import { post } from '@/api/admin/core/request'
-import { cloneDeep } from 'lodash'
-import { formItemContextKey } from 'element-plus'
-import type { LoadFunction } from 'element-plus'
-const getExtra = inject('get_extra') as DynamicFormValue
-const elFormItem = inject(formItemContextKey, void 0)
+import { getFileIconUrl } from '@/utils/icon'
+import type { DynamicFormValue, FormField } from '../../type'
 
-defineOptions({ name: 'DynamicFormTree' })
+defineOptions({ name: 'DynamicFormTree', inheritAttrs: false })
 
-const allCheck = ref<boolean>(false)
-
-const handleAllCheckChange = (checked: boolean) => {
-  if (checked) {
-    const nodes = Object.values(treeRef.value?.store.nodesMap || {}) as DynamicFormValue[]
-    nodes.forEach((node) => {
-      if (!node.disabled) {
-        treeRef.value?.setChecked(node.data, true, false)
-      }
-    })
-  } else {
-    treeRef.value?.setCheckedKeys([])
-  }
+interface DocumentRow extends Dict<DynamicFormValue> {
+  hasChildren: boolean
 }
-const textField = computed(() => {
-  return props.formField.text_field ? props.formField.text_field : 'label'
-})
 
-const valueField = computed(() => {
-  return props.formField.value_field ? props.formField.value_field : 'value'
-})
-const childrenField = computed(() => {
-  return props.formField.childrenField ? props.formField.childrenField : 'children'
-})
-const options = computed(() => {
-  return props.formField.option_list ? props.formField.option_list : []
-})
-const propsData = computed(() => {
-  return {
-    label: textField,
-    children: childrenField,
-    isLeaf: (data: DynamicFormValue) => data.leaf,
-    disabled: (data: DynamicFormValue) => data.disabled,
-  }
+const props = withDefaults(defineProps<{ modelValue?: DynamicFormValue; formField: FormField; otherParams: DynamicFormValue }>(), {
+  modelValue: () => [],
 })
+const emit = defineEmits<{ 'update:modelValue': [value: DynamicFormValue[]]; change: [value: DynamicFormValue[]] }>()
+const attrs = useAttrs()
+const getExtra = inject<() => Dict<DynamicFormValue>>('get_extra')
+const elFormItem = inject(formItemContextKey, undefined)
+
+// 字段映射与表格数据，保留完整节点对象作为选中值。
+const textField = computed(() => props.formField.text_field || 'label')
+const valueField = computed(() => props.formField.value_field || 'value')
+const childrenField = computed(() => props.formField.childrenField || 'children')
+const options = computed(() => props.formField.option_list ?? [])
+const lazy = computed(() => Boolean(props.formField.attrs?.lazy ?? attrs.lazy))
+const documentRows = ref<DocumentRow[]>([])
+const documentTableRef = useTemplateRef<{ tableRef?: TableInstance }>('documentTableRef')
+const tableKey = ref(0)
+const pendingLoads = ref(0)
+const documentNodes = new Map<string | number, DocumentRow>()
+const originalNodes = new WeakMap<DocumentRow, Dict<DynamicFormValue>>()
+let restoringSelection = false
 
-const attrs = useAttrs() as DynamicFormValue
-const treeRef = ref<DynamicFormValue>(null)
-function renderTemplate(template: string, data: DynamicFormValue) {
-  return template.replace(/\$\{(\w+)\}/g, (match, key) => {
-    return data[key] !== undefined ? data[key] : match
+function normalizeDocuments(documents: Dict<DynamicFormValue>[]): DocumentRow[] {
+  return documents.map((document) => {
+    const row: DocumentRow = {
+      ...document,
+      hasChildren: lazy.value && (document.leaf === false || (document.leaf !== true && (document.type === 'folder' || !document.type))),
+    }
+    originalNodes.set(row, document)
+    documentNodes.set(row[valueField.value], row)
+    if (Array.isArray(document[childrenField.value])) {
+      row[childrenField.value] = normalizeDocuments(document[childrenField.value])
+    }
+    return row
   })
 }
 
-const loadNode: LoadFunction = (node, resolve) => {
-  const url = renderTemplate(
-    '/workspace/${current_workspace_id}/knowledge/${current_knowledge_id}/datasource/tool/${current_tool_id}/' + attrs.fetch_list_function,
-    {
-      ...props.otherParams,
-      ...(getExtra ? getExtra() : {}),
-    },
-  )
-  loading.value = true
-  return post<{ current_node: DynamicFormValue }, DynamicFormValue[]>(url, { current_node: node.level === 0 ? undefined : node.data })
-    .then((children) => {
-      resolve(children)
-      children.forEach((childNode) => {
-        if (childNode.is_exist) {
-          treeRef.value?.setChecked(childNode.token, true, false)
-        }
-      })
-    })
+function handleSelectionChange(selection: unknown[]) {
+  if (restoringSelection) return
+  const selectedDocuments = cloneDeep((selection as DocumentRow[]).map((row) => originalNodes.get(toRaw(row)) ?? row))
+  if (isEqual(selectedDocuments, props.modelValue ?? [])) return
+  emit('update:modelValue', selectedDocuments)
+  emit('change', selectedDocuments)
+  nextTick(() => elFormItem?.validate('change').catch(() => {}))
+}
+
+function restoreSelection() {
+  const table = documentTableRef.value?.tableRef
+  if (!table) return
+  const selectedKeys = new Set((props.modelValue ?? []).map((document: Dict<DynamicFormValue>) => document[valueField.value]))
+  restoringSelection = true
+  table.clearSelection()
+  documentNodes.forEach((row, key) => {
+    if (row.is_exist || selectedKeys.has(key)) table.toggleRowSelection(row, true, true)
+  })
+  restoringSelection = false
+  handleSelectionChange(table.getSelectionRows() as DocumentRow[])
+}
+
+// 懒加载沿用工具数据源协议，根目录不传 current_node。
+function renderTemplate(template: string, data: Dict<DynamicFormValue>) {
+  return template.replace(/\$\{(\w+)\}/g, (match, key) => (data[key] !== undefined ? String(data[key]) : match))
+}
+const requestUrl = computed(() =>
+  renderTemplate(
+    '/workspace/${current_workspace_id}/knowledge/${current_knowledge_id}/datasource/tool/${current_tool_id}/' +
+      (props.formField.attrs?.fetch_list_function ?? attrs.fetch_list_function),
+    { ...props.otherParams, ...getExtra?.() },
+  ),
+)
+
+function loadDocuments(currentNode?: Dict<DynamicFormValue>) {
+  pendingLoads.value += 1
+  return post<{ current_node?: Dict<DynamicFormValue> }, Dict<DynamicFormValue>[]>(requestUrl.value, { current_node: currentNode })
+    .then(normalizeDocuments)
     .finally(() => {
-      loading.value = false
+      pendingLoads.value -= 1
     })
 }
-const props = withDefaults(defineProps<{ modelValue?: DynamicFormValue; formField: FormField; otherParams: DynamicFormValue }>(), {
-  modelValue: () => [],
-})
 
-const emit = defineEmits(['update:modelValue', 'change'])
+function loadNode(document: DocumentRow, treeNode: TreeNode, resolve: (documents: DocumentRow[]) => void) {
+  return loadDocuments(originalNodes.get(toRaw(document)) ?? document)
+    .then((documents) => {
+      resolve(documents)
+      return nextTick(restoreSelection)
+    })
+    .catch(() => {
+      // Table 无 reject 回调，恢复加载标记以便再次展开重试。
+      treeNode.loading = false
+    })
+}
 
-const modelValueProxy = computed({
-  get: () => {
-    if (!props.modelValue) {
-      emit('update:modelValue', [])
+watch(
+  [options, lazy, requestUrl],
+  () => {
+    documentNodes.clear()
+    documentRows.value = []
+    tableKey.value += 1
+    if (!lazy.value) {
+      documentRows.value = normalizeDocuments(options.value)
+      return nextTick(restoreSelection)
     }
-    return props.modelValue
-  },
-  set: (v: DynamicFormValue[]) => {
-    emit('update:modelValue', v)
+    return loadDocuments()
+      .then((documents) => {
+        documentRows.value = documents
+        return nextTick(restoreSelection)
+      })
+      .catch(() => {
+        // 请求层统一提示错误。
+      })
   },
-})
-const change = () => {
-  modelValueProxy.value = cloneDeep(treeRef.value?.getCheckedNodes() || [])
-  nextTick(() => {
-    if (elFormItem?.validate) {
-      elFormItem.validate('change')
-    }
-  })
-}
-
-const loading = ref<boolean>(false)
+  { immediate: true, deep: true },
+)
+watch(() => props.modelValue, restoreSelection, { deep: true })
 </script>
 
 <template>
-  <div v-loading="loading" class="w-full">
-    <div class="card-never border-r-6 mb-16">
-      <el-checkbox v-model="allCheck" label="全选" size="large" class="ml-24" @change="handleAllCheckChange" />
-    </div>
-    <div style="height: calc(100vh - 450px)">
-      <el-scrollbar>
-        <el-tree
-          :data="options"
-          @check-change="change"
-          v-loading="loading"
-          style="width: 100%"
-          :props="propsData"
-          :load="loadNode"
-          :lazy="attrs.lazy"
-          show-checkbox
-          :node-key="valueField"
-          ref="treeRef"
-        >
-          <template #default="{ node, data }">
-            <div class="flex align-center lighter">
-              <img :src="data.icon" alt="" height="20" v-if="data.icon" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="20" v-else-if="data.type === 'folder'" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.type === 'docx' || data.name.endsWith('.docx')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.type === 'sheet' || data.name.endsWith('.xlsx')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.name.endsWith('xls')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.name.endsWith('csv')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.name.endsWith('.pdf')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.name.endsWith('.html')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.name.endsWith('.txt')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.name.endsWith('.zip')" />
-              <img src="@/assets/empty/no-data.svg" alt="" height="22" v-else-if="data.name.endsWith('.md')" />
-
-              <span class="ml-4">{{ node.label }}</span>
-            </div>
-          </template>
-        </el-tree>
-      </el-scrollbar>
-    </div>
-  </div>
+  <MkTable
+    :key="tableKey"
+    ref="documentTableRef"
+    v-loading="pendingLoads > 0"
+    :data="documentRows"
+    :row-key="valueField"
+    :tree-props="{ children: childrenField, hasChildren: 'hasChildren', checkStrictly: false }"
+    :load="loadNode"
+    :max-table-height="430"
+    :lazy="lazy"
+    @selection-change="handleSelectionChange"
+  >
+    <!-- 选择文档或文件夹，全选由表格维护 -->
+    <el-table-column type="selection" width="40" reserve-selection :selectable="(row: DocumentRow) => !row.disabled && !row.is_exist" />
+    <el-table-column class-name="expand-name-column" label="全部文档" :prop="textField">
+      <template #default="{ row }: { row: DocumentRow }">
+        <div class="flex-align-center min-w-0 flex-1 gap-2">
+          <img v-if="row.icon" :src="row.icon" alt="" class="w-4.5 shrink-0" />
+          <img v-else-if="row.type === 'folder'" src="@/assets/file-type/file-icon.svg" alt="" class="w-4.5 shrink-0" />
+          <img
+            v-else
+            :src="
+              getFileIconUrl(
+                row.type === 'docx' ? `${row.name}.docx` : row.type === 'sheet' ? `${row.name}.xlsx` : String(row.name ?? row[textField] ?? ''),
+              )
+            "
+            alt=""
+            class="w-4.5 shrink-0"
+          />
+          <span :title="row[textField]" class="min-w-0 truncate">{{ row[textField] }}</span>
+        </div>
+      </template>
+    </el-table-column>
+  </MkTable>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/items/upload/LocalFileUpload.vue b/ui/src/components/mk-dynamics-form/items/upload/LocalFileUpload.vue
index 1c040a881c1..6359644eb23 100644
--- a/ui/src/components/mk-dynamics-form/items/upload/LocalFileUpload.vue
+++ b/ui/src/components/mk-dynamics-form/items/upload/LocalFileUpload.vue
@@ -1,274 +1,57 @@
 <script setup lang="ts">
-import type { DynamicFormValue } from '../../type'
-import { Refresh } from '@element-plus/icons-vue'
-import { computed, useAttrs, nextTick, inject, ref, reactive } from 'vue'
-import type { FormField } from '@/components/mk-dynamics-form/type'
-import { getFileExtension, getFileIconUrl } from '@/utils/icon'
-import { formatFileSize } from '@/utils/number'
-import { MsgError } from '@/utils/message'
-import type { UploadFiles } from 'element-plus'
-const upload = inject('upload') as DynamicFormValue
-const delFile = inject('delFile') as DynamicFormValue
-const attrs = useAttrs() as DynamicFormValue
-withDefaults(defineProps<{ modelValue?: DynamicFormValue; formField: FormField }>(), { modelValue: () => [] })
-const onExceed = () => {
-  MsgError('单次上传最多 ' + fileCountLimit.value + ' 个文件')
-}
-const emit = defineEmits(['update:modelValue'])
-
-const fileArray = ref<DynamicFormValue>([])
-
-const loading = ref(false)
-// 上传成功数量
-const successCount = computed(() => fileArray.value.filter((i: DynamicFormValue) => i.status !== 'uploading').length)
-// 上传失败数量
-const errorCount = computed(() => fileArray.value.filter((i: DynamicFormValue) => i.status === 'error').length)
-// 上传中数量
-const uploadingCount = computed(() => fileArray.value.filter((i: DynamicFormValue) => i.status === 'uploading').length)
-// 可重新上传的失败项（网络错误等）
-const retryList = computed(() => fileArray.value.filter((i: DynamicFormValue) => i.status === 'error' && i.canRetry))
-
-const getFileStatusOrder = (item: DynamicFormValue) => {
-  if (item.status === 'error' && item.canRetry) return 0
-  if (item.status === 'error') return 1
-  if (item.status === 'uploading') return 2
-  return 3
-}
-const sortedFileArray = computed(() =>
-  fileArray.value
-    .map((item: DynamicFormValue, index: number) => ({ item, index }))
-    .sort((a: DynamicFormValue, b: DynamicFormValue) => getFileStatusOrder(a.item) - getFileStatusOrder(b.item) || a.index - b.index)
-    .map(({ item }: DynamicFormValue) => item),
-)
-// 重新上传所有可重试的失败文件
-const retryAll = () => {
-  retryList.value.forEach((i: DynamicFormValue) => uploadFile(i))
-}
-
-// 上传on-change事件
-const fileHandleChange = (file: DynamicFormValue, fileList: UploadFiles) => {
-  // 按文件唯一标识精确定位并移除当前文件
-  // 注意：不能使用 splice(-1, 1) 盲删末尾元素，文件夹上传时会误删正常文件而放走超限文件
-  const removeCurrentFile = () => {
-    const index = fileList.findIndex((item: DynamicFormValue) => item.uid === file.uid)
-    if (index !== -1) {
-      fileList.splice(index, 1)
+import { computed, inject, provide, useAttrs } from 'vue'
+import { useFormDisabled, type UploadRawFile } from 'element-plus'
+import MkDragUpload from '@/components/mk-drag-upload/index.vue'
+import type { DragUploadFile, DragUploadHandler } from '@/components/mk-drag-upload/types'
+import type { FormField } from '../../type'
+
+defineOptions({ name: 'DynamicFormLocalFileUpload', inheritAttrs: false })
+
+type UploadResponse = string | { data: string }
+type UploadResult = (Promise<UploadResponse> & { abort?: () => void }) | { request: Promise<UploadResponse>; abort?: () => void }
+type UploadHandler = (file: UploadRawFile, onProgress: (percent: number) => void) => UploadResult
+
+const props = withDefaults(defineProps<{ modelValue?: DragUploadFile[]; formField: FormField }>(), { modelValue: () => [] })
+const emit = defineEmits<{ 'update:modelValue': [files: DragUploadFile[]] }>()
+const attrs = useAttrs()
+const inputDisabled = useFormDisabled()
+
+// 动态表单上传协议适配，进度、重试与取消由多文件组件维护。
+const upload = inject<UploadHandler>('upload')
+if (upload) {
+  provide<DragUploadHandler>('upload', (file, onProgress) => {
+    const result = upload(file, onProgress)
+    const request = 'request' in result ? result.request : result
+    return {
+      request: request.then((response) => (typeof response === 'string' ? response : response.data)),
+      abort: () => result.abort?.(),
     }
-  }
-  if (fileArray.value.length >= fileCountLimit.value) {
-    onExceed()
-    removeCurrentFile()
-    return false
-  }
-  const item = reactive({
-    uid: file.uid,
-    name: file.name,
-    size: file.size,
-    file_id: '',
-    percentage: 0,
-    status: 'uploading' as 'uploading' | 'success' | 'error',
-    errMsg: '',
-    canRetry: false,
-    raw: file.raw,
-    abort: null as null | (() => void),
-    aborted: false,
   })
-
-  //1、判断文件大小是否合法，文件限制不能大于100M
-  const isLimit = file?.size / 1024 / 1024 < fileSizeLimit.value
-  if (!isLimit) {
-    item.status = 'error'
-    item.errMsg = '大小超限'
-    // MsgError('每个文件最大' + fileSizeLimit.value + 'MB')
-    // fileList.splice(-1, 1) //移除当前超出大小的文件
-    fileArray.value?.push(item)
-    removeCurrentFile()
-    return false
-  }
-  if (!allowedFileTypes.value.includes(getFileExtension(file.name).toUpperCase())) {
-    if (file?.name !== '.DS_Store') {
-      MsgError('文件格式不支持')
-    }
-    removeCurrentFile()
-    return false
-  }
-
-  if (file?.size === 0) {
-    MsgError('文件不能为空')
-    removeCurrentFile()
-    return false
-  }
-
-  fileArray.value?.push(item)
-  removeCurrentFile()
-  uploadFile(item)
-}
-// 执行上传
-const uploadFile = (item: DynamicFormValue) => {
-  item.status = 'uploading'
-  item.percentage = 0
-  item.errMsg = ''
-  item.canRetry = false
-  item.aborted = false
-  const res: DynamicFormValue = upload(
-    item.raw,
-    (percent: number) => {
-      item.percentage = percent
-    },
-    loading,
-  )
-  // provider 返回 { request, abort } 时保存中断方法，删除时可中断上传
-  item.abort = typeof res?.abort === 'function' ? res.abort : null
-  const request: Promise<DynamicFormValue> = res?.then ? res : res?.request
-  request
-    .then((ok: DynamicFormValue) => {
-      const pathSegments = ok.data.split('/')
-      item.file_id = pathSegments[pathSegments.length - 1]
-      item.percentage = 100
-      item.status = 'success'
-      emit('update:modelValue', fileArray.value)
-    })
-    .catch(() => {
-      // 主动中断（删除）导致的失败不再标记错误
-      if (item.aborted) return
-      item.status = 'error'
-      item.errMsg = '网络失败'
-      item.canRetry = true
-    })
-}
-function deleteFile(item: DynamicFormValue) {
-  // 上传过程中删除则中断上传请求
-  if (item?.status === 'uploading' && typeof item.abort === 'function') {
-    item.aborted = true
-    item.abort()
-  } else if (item?.status === 'success' && item?.file_id) {
-    if (delFile) {
-      delFile(item.file_id)
-    }
-  }
-  const index = fileArray.value.indexOf(item)
-  if (index !== -1) {
-    fileArray.value.splice(index, 1)
-  }
-  emit('update:modelValue', fileArray.value)
 }
 
-const handlePreview = (bool: boolean) => {
-  let inputDom: DynamicFormValue = null
-  nextTick(() => {
-    if (document.querySelector('.el-upload__input') !== null) {
-      inputDom = document.querySelector('.el-upload__input')
-      inputDom.webkitdirectory = bool
-    }
-  })
-}
-const accept = computed(() => {
-  return (attrs.file_type_list || []).map((item: DynamicFormValue) => '.' + item.toLowerCase()).join(',')
-})
-const allowedFileTypes = computed(() => {
-  return attrs.file_type_list.map((item: DynamicFormValue) => item.toUpperCase()) || []
-})
-const formats = computed(() => {
-  return allowedFileTypes.value.join('、')
-})
-const fileSizeLimit = computed(() => {
-  return attrs.file_size_limit || 50
-})
-const fileCountLimit = computed(() => {
-  return attrs.file_count_limit || 100
+// 文件列表与字段配置。
+const selectedFiles = computed({
+  get: () => props.modelValue ?? [],
+  set: (files: DragUploadFile[]) => emit('update:modelValue', files),
 })
+const fileTypes = computed<string[]>(() => props.formField.attrs?.file_type_list ?? attrs.file_type_list ?? [])
+const accept = computed(() => fileTypes.value.map((type) => `.${type.toLowerCase()}`).join(','))
+const formats = computed(() => fileTypes.value.map((type) => type.toUpperCase()).join('、'))
+const fileSizeLimit = computed(() => Number(props.formField.attrs?.file_size_limit ?? attrs.file_size_limit) || 50)
+const fileCountLimit = computed(() => Number(props.formField.attrs?.file_count_limit ?? attrs.file_count_limit) || 100)
+const tipText = computed(
+  () => `单次上传最多 ${fileCountLimit.value} 个文件，每个文件最大 ${fileSizeLimit.value} MB${formats.value ? `；支持格式：${formats.value}` : ''}`,
+)
 </script>
 
 <template>
-  <div class="w-full">
-    <el-upload
-      ref="UploadRef"
-      :webkitdirectory="false"
-      class="w-full"
-      drag
-      multiple
-      v-bind:file-list="fileArray"
-      action="#"
-      :auto-upload="false"
-      :show-file-list="false"
-      :accept="accept"
-      :on-exceed="onExceed"
-      :on-change="fileHandleChange"
-      @click.prevent="handlePreview(false)"
-    >
-      <div class="text-center mb-2">
-        <img class="mx-auto" src="@/assets/mk_icon_upload.svg" alt="" />
-      </div>
-
-      <div class="el-upload__text">
-        <p>
-          将文件拖到此处，或
-          <em @click.prevent="handlePreview(false)"> 点击上传 </em>
-          <em class="ml-4" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
-        </p>
-        <div class="text-N600">
-          <p>单次上传最多 {{ fileCountLimit }} 个文件， 每个文件最大 {{ fileSizeLimit }} MB</p>
-          <p>支持格式：{{ formats }}</p>
-        </div>
-      </div>
-    </el-upload>
-    <div v-if="fileArray?.length" class="flex-between w-full mt-16">
-      <span> 已完成 {{ successCount }} / {{ fileArray.length }} 个文件 </span>
-      <span v-if="uploadingCount" class="flex align-center">
-        <el-icon class="is-loading color-primary" size="18"><Loading /></el-icon>
-        <span class="ml-4">上传中</span>
-      </span>
-      <span v-else-if="errorCount" class="flex align-center">
-        <el-icon class="color-danger ml-4" size="18"><WarningFilled /></el-icon>
-        <span class="ml-4"> 失败 {{ errorCount }} 个文件 </span>
-        <el-button v-if="retryList.length" text @click="retryAll">
-          <MkIcon :icon="Refresh"></MkIcon>
-          重试
-        </el-button>
-      </span>
-      <span v-else-if="successCount === fileArray.length" class="flex align-center">
-        <el-icon class="color-success"><WarningFilled /></el-icon>
-        <span class="ml-4">全部成功</span>
-      </span>
-    </div>
-    <el-row :gutter="8" v-if="fileArray?.length" class="mt-8">
-      <template v-for="(item, index) in sortedFileArray" :key="index">
-        <el-col :span="12" class="mb-8">
-          <el-card
-            shadow="never"
-            style="--el-card-padding: 8px 12px; line-height: normal; position: relative; overflow: hidden"
-            :class="item.status === 'error' ? 'border-danger' : ''"
-          >
-            <div class="flex-between">
-              <div class="flex">
-                <img :src="getFileIconUrl(item?.name || '')" alt="" width="40" />
-                <div class="ml-8">
-                  <p :title="item && item?.name">{{ item && item?.name }}</p>
-                  <el-text type="info" size="small">
-                    <template v-if="item.status === 'uploading'">
-                      {{ formatFileSize((item.size * item.percentage) / 100) }} /
-                      {{ formatFileSize(item.size) || '0K' }}
-                    </template>
-                    <template v-else>{{ formatFileSize(item && item?.size) || '0K' }}</template>
-                  </el-text>
-                  <el-text class="ml-8" v-if="item.status === 'error'" type="danger" size="small">
-                    {{ item.errMsg }}
-                  </el-text>
-                </div>
-              </div>
-              <div class="flex align-center">
-                <el-button v-if="item.canRetry" text @click="uploadFile(item)">
-                  <MkIcon :icon="Refresh"></MkIcon>
-                </el-button>
-                <el-button text @click="deleteFile(item)">
-                  <MkIcon name="icon_delete-trash_outlined"></MkIcon>
-                </el-button>
-              </div>
-            </div>
-            <el-progress v-if="item.status === 'uploading'" class="card-progress" :percentage="item.percentage" :stroke-width="4" :show-text="false" />
-          </el-card>
-        </el-col>
-      </template>
-    </el-row>
-  </div>
+  <MkDragUpload
+    v-model="selectedFiles"
+    multiple
+    :disabled="inputDisabled"
+    :accept="accept"
+    :limit="fileCountLimit"
+    :size-limit="fileSizeLimit"
+    :tip-text="tipText"
+  />
 </template>
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index ca89b111b11..267840b44c2 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -1117,7 +1117,8 @@ Web、飞书和工作流知识库的非共享文档页在标题栏组合
 Web 和飞书使用全屏底部 Drawer，分别通过地址表单和飞书 `MkTable` 懒加载目录表格进入文档处理策略；
 策略复用 `DocumentStrategyForm`，使用组件默认策略，不回显知识库策略，上一步保留草稿。
 Web 抽屉只接收完整 Document API 与知识库 ID，地址和选择器初始为空；
-飞书抽屉额外接收文件夹 Token，工作流抽屉只接收知识库 ID 和图数据；所有导入组件均不接收 `KnowledgeDetail`。
+飞书抽屉额外接收文件夹 Token，工作流抽屉只通过 Prop 接收知识库 ID，图数据在打开时通过
+`open(workflow)` 传入并保存在抽屉本地；所有导入组件均不接收 `KnowledgeDetail`。
 Web 地址按行去空白、去重并校验 HTTP/HTTPS；空选择器提交 `body`。
 飞书按 `meta.folder_token` 查询目录并读取全部分页，已导入文档勾选且不可重复导入；
 表格使用原生 `type="selection"` 选择列和名称列，表头全选覆盖当前已加载节点；
diff --git a/ui/src/views/knowledge-detail/library/document/import-document/ButtonImportDocument.vue b/ui/src/views/knowledge-detail/library/document/import-document/ButtonImportDocument.vue
index 60376231f08..09220699cf4 100644
--- a/ui/src/views/knowledge-detail/library/document/import-document/ButtonImportDocument.vue
+++ b/ui/src/views/knowledge-detail/library/document/import-document/ButtonImportDocument.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, useTemplateRef, type Component } from 'vue'
+import { nextTick, ref, useTemplateRef } from 'vue'
 import type DocumentApi from '@/api/admin/workspace/knowledge/document'
 import type LogicFlow from '@logicflow/core'
 import { KNOWLEDGE_TYPE_KEY } from '@/constants/knowledge'
@@ -18,31 +18,26 @@ const props = defineProps<{
 const emit = defineEmits<{ refresh: [] }>()
 
 /* 导入入口：按知识库类型挂载独立抽屉，关闭动画后卸载。 */
-const drawerMounted = ref(false)
-const drawerComponent = computed<Component | undefined>(() => {
+const webDrawerMounted = ref(false)
+const larkDrawerMounted = ref(false)
+const workflowDrawerMounted = ref(false)
+const webDrawerRef = useTemplateRef<InstanceType<typeof WebImportDocumentDrawer>>('webDrawerRef')
+const larkDrawerRef = useTemplateRef<InstanceType<typeof LarkImportDocumentDrawer>>('larkDrawerRef')
+const workflowDrawerRef = useTemplateRef<InstanceType<typeof WorkflowImportDocumentDrawer>>('workflowDrawerRef')
+
+function handleOpenImport() {
+  if (webDrawerMounted.value || larkDrawerMounted.value || workflowDrawerMounted.value) return
   switch (props.knowledgeType) {
     case KNOWLEDGE_TYPE_KEY.WEB:
-      return WebImportDocumentDrawer
+      webDrawerMounted.value = true
+      return nextTick(() => webDrawerRef.value?.open())
     case KNOWLEDGE_TYPE_KEY.LARK:
-      return LarkImportDocumentDrawer
+      larkDrawerMounted.value = true
+      return nextTick(() => larkDrawerRef.value?.open())
     case KNOWLEDGE_TYPE_KEY.WORKFLOW:
-      return WorkflowImportDocumentDrawer
-    default:
-      return undefined
+      workflowDrawerMounted.value = true
+      return nextTick(() => workflowDrawerRef.value?.open(props.workflow))
   }
-})
-const drawerProps = computed(() => {
-  if (props.knowledgeType === KNOWLEDGE_TYPE_KEY.WORKFLOW) return { knowledgeId: props.knowledgeId, workflow: props.workflow }
-  if (props.knowledgeType === KNOWLEDGE_TYPE_KEY.LARK) {
-    return { api: props.api, knowledgeId: props.knowledgeId, folderToken: props.folderToken ?? '' }
-  }
-  return { api: props.api, knowledgeId: props.knowledgeId }
-})
-const drawerRef = useTemplateRef<{ open: () => void }>('drawerRef')
-function handleOpenImport() {
-  if (!drawerComponent.value || drawerMounted.value) return
-  drawerMounted.value = true
-  nextTick(() => drawerRef.value?.open())
 }
 </script>
 
@@ -52,12 +47,28 @@ function handleOpenImport() {
     <MkIcon name="icon_import_outlined" />
     <span>导入文档</span>
   </el-button>
-  <component
-    :is="drawerComponent"
-    v-if="drawerMounted"
-    ref="drawerRef"
-    v-bind="drawerProps"
+  <WebImportDocumentDrawer
+    v-if="webDrawerMounted"
+    ref="webDrawerRef"
+    :api="api"
+    :knowledge-id="knowledgeId"
+    @refresh="emit('refresh')"
+    @closed="webDrawerMounted = false"
+  />
+  <LarkImportDocumentDrawer
+    v-if="larkDrawerMounted"
+    ref="larkDrawerRef"
+    :api="api"
+    :knowledge-id="knowledgeId"
+    :folder-token="folderToken ?? ''"
+    @refresh="emit('refresh')"
+    @closed="larkDrawerMounted = false"
+  />
+  <WorkflowImportDocumentDrawer
+    v-if="workflowDrawerMounted"
+    ref="workflowDrawerRef"
+    :knowledge-id="knowledgeId"
     @refresh="emit('refresh')"
-    @closed="drawerMounted = false"
+    @closed="workflowDrawerMounted = false"
   />
 </template>
diff --git a/ui/src/views/knowledge-detail/library/document/import-document/WorkflowImportDocumentDrawer.vue b/ui/src/views/knowledge-detail/library/document/import-document/WorkflowImportDocumentDrawer.vue
index 4d69488da4f..416005faf21 100644
--- a/ui/src/views/knowledge-detail/library/document/import-document/WorkflowImportDocumentDrawer.vue
+++ b/ui/src/views/knowledge-detail/library/document/import-document/WorkflowImportDocumentDrawer.vue
@@ -14,7 +14,7 @@ import Result from '@/views/workflow/knowledge/debug/action/Result.vue'
 import { MsgWarning } from '@/utils/message'
 
 defineOptions({ name: 'WorkflowImportDocumentDrawer' })
-const props = defineProps<{ knowledgeId: string; workflow?: LogicFlow.GraphConfigData }>()
+const props = defineProps<{ knowledgeId: string }>()
 const emit = defineEmits<{ refresh: []; closed: [] }>()
 
 /* 复用工作流 Action，上传适配保留进度、取消和上传中保护。 */
@@ -43,18 +43,25 @@ provide('delFile', FileApi.deleteFile)
 type ActionStep = 'data_source' | 'knowledge_base' | 'result'
 const actionComponents: Record<ActionStep, Component> = { data_source: DataSource, knowledge_base: KnowledgeBase, result: Result }
 const visible = ref(false)
+const currentWorkflow = ref<LogicFlow.GraphConfigData | null>(null)
 const loading = ref(false)
 const active = ref<ActionStep>('data_source')
+const activeStep = computed(() => ({ data_source: 0, knowledge_base: 1, result: 2 })[active.value])
 const actionKey = ref(0)
 const actionId = ref<string>()
 const formPayload = ref<KnowledgeWorkflowDebugPayload>({ data_source: {}, knowledge_base: {} })
 const actionRef = useTemplateRef<{ validate: () => Promise<unknown>; getData: () => Dict<unknown> }>('actionRef')
-const hasKnowledgeBaseInput = computed(() => {
-  const node = props.workflow?.nodes?.find((node) => node.type === WorkflowNodeType.KnowledgeBase)
-  return ((node?.properties?.user_input_field_list as FormField[] | undefined)?.length ?? 0) > 0
-})
+const knowledgeBaseNode = computed(() => currentWorkflow.value?.nodes?.find((node) => node.type === WorkflowNodeType.KnowledgeBase))
+const hasKnowledgeBaseInput = computed(
+  () => ((knowledgeBaseNode.value?.properties?.user_input_field_list as FormField[] | undefined)?.length ?? 0) > 0,
+)
+const userInputTitle = computed(() => knowledgeBaseNode.value?.properties?.user_input_config?.title || '用户输入')
+const showNext = computed(() => hasKnowledgeBaseInput.value && active.value === 'data_source')
+const showPrev = computed(() => hasKnowledgeBaseInput.value && active.value === 'knowledge_base')
+const showImport = computed(() => (hasKnowledgeBaseInput.value ? active.value === 'knowledge_base' : active.value === 'data_source'))
 const busy = computed(() => loading.value || uploadingCount.value > 0)
-function open() {
+function open(workflow?: LogicFlow.GraphConfigData) {
+  currentWorkflow.value = workflow ?? null
   visible.value = true
 }
 function getActionData() {
@@ -127,22 +134,22 @@ defineExpose({ open })
 
 <template>
   <MkDrawer v-model="visible" direction="btt" @closed="emit('closed')">
-    <!-- <template #header>
+    <template #header>
       <div class="flex w-full">
         <h4>导入文档</h4>
-        <el-steps :active="activeStep" finish-status="success" class="absolute-center w-85!">
-          <el-step title="导入文档" />
-          <el-step title="文档处理策略" />
+        <el-steps v-if="hasKnowledgeBaseInput" :active="activeStep" finish-status="success" class="absolute-center w-85!">
+          <el-step title="选择数据源" />
+          <el-step :title="userInputTitle" />
         </el-steps>
       </div>
-    </template> -->
+    </template>
     <div v-loading="loading" class="h-full">
       <keep-alive :key="actionKey" :include="['DataSource', 'KnowledgeBase']">
         <component
           :is="actionComponents[active]"
           ref="actionRef"
           v-model:loading="loading"
-          :workflow="workflow ?? null"
+          :workflow="currentWorkflow"
           :knowledge-id="knowledgeId"
           :action-id="actionId"
         />
@@ -152,23 +159,15 @@ defineExpose({ open })
       <!-- 取消导入 -->
       <el-button v-if="active !== 'result'" :disabled="busy" @click="visible = false">取消</el-button>
       <!-- 继续导入 -->
-      <el-button v-if="active === 'result'" @click="handleContinueImport">继续导入</el-button>
+      <el-button v-if="active === 'result'" plain @click="handleContinueImport">继续导入</el-button>
       <!-- 返回数据源 -->
-      <el-button v-if="hasKnowledgeBaseInput && active === 'knowledge_base'" :disabled="busy" @click="handlePrevious">上一步</el-button>
-      <!-- 进入知识库输入 -->
-      <el-button v-if="hasKnowledgeBaseInput && active === 'data_source'" :disabled="busy" @click="handleNext">下一步</el-button>
+      <el-button v-if="showPrev" plain :disabled="busy" @click="handlePrevious">上一步</el-button>
+      <!-- 进入用户输入 -->
+      <el-button v-if="showNext" type="primary" :disabled="busy" @click="handleNext">下一步</el-button>
       <!-- 执行工作流导入 -->
-      <el-button
-        v-if="hasKnowledgeBaseInput ? active === 'knowledge_base' : active === 'data_source'"
-        type="primary"
-        :loading="loading"
-        :disabled="uploadingCount > 0"
-        @click="handleSubmit"
-      >
-        导入
-      </el-button>
+      <el-button v-if="showImport" type="primary" :loading="loading" :disabled="uploadingCount > 0" @click="handleSubmit">开始导入</el-button>
       <!-- 完成导入 -->
-      <el-button v-if="active === 'result'" type="primary" @click="handleFinish">完成</el-button>
+      <el-button v-if="active === 'result'" type="primary" @click="handleFinish">前往文档</el-button>
     </template>
   </MkDrawer>
 </template>
diff --git a/ui/src/views/workflow/knowledge/debug/DebugDrawer.vue b/ui/src/views/workflow/knowledge/debug/DebugDrawer.vue
index 7a9bb256797..32218eb7dfb 100644
--- a/ui/src/views/workflow/knowledge/debug/DebugDrawer.vue
+++ b/ui/src/views/workflow/knowledge/debug/DebugDrawer.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { computed, nextTick, provide, ref, useTemplateRef, type Component } from 'vue'
+import { computed, provide, ref, useTemplateRef, type Component } from 'vue'
+import { useRouter } from 'vue-router'
+import type { AxiosProgressEvent } from 'axios'
 import type LogicFlow from '@logicflow/core'
 import KnowledgeWorkflowApi from '@/api/admin/workspace/knowledge/workflow'
 import FileApi from '@/api/admin/file'
 import { FILE_SOURCE_TYPE } from '@/api/enums'
-import type { Dict } from '@/api/types'
+import type { Dict, KnowledgeWorkflowDebugPayload } from '@/api/types'
+import { KNOWLEDGE_TYPE_KEY } from '@/constants/knowledge'
+import { getWorkspaceId } from '@/utils/resource-context'
 import { WorkflowNodeType } from '@/workflow-canvas/types'
 import type { FormField } from '@/components/mk-dynamics-form'
 import DataSource from './action/DataSource.vue'
@@ -14,112 +18,142 @@ import Result from './action/Result.vue'
 defineOptions({ name: 'KnowledgeWorkflowDebugDrawer' })
 
 const props = defineProps<{ knowledgeId: string }>()
+const router = useRouter()
 
 type ActionStep = 'data_source' | 'knowledge_base' | 'result'
 
 const actionComponents: Record<ActionStep, Component> = { data_source: DataSource, knowledge_base: KnowledgeBase, result: Result }
 
 // mk-dynamics-form 的上传项通过 inject('upload') 获取上传函数；返回值的 data 为文件地址（末段即 file_id）。
-provide('upload', (file: File) => FileApi.postUploadFile(file, props.knowledgeId, FILE_SOURCE_TYPE.KNOWLEDGE).request.then((url) => ({ data: url })))
+provide('upload', (file: File, onProgress?: (percent: number, event: AxiosProgressEvent) => void) => {
+  const upload = FileApi.postUploadFile(
+    file,
+    props.knowledgeId,
+    FILE_SOURCE_TYPE.KNOWLEDGE,
+    typeof onProgress === 'function' ? onProgress : undefined,
+  )
+  return Object.assign(
+    upload.request.then((url) => ({ data: url })),
+    { abort: upload.abort },
+  )
+})
 
+// 调试步骤与表单缓存。
 const visible = ref(false)
 const loading = ref(false)
 const active = ref<ActionStep>('data_source')
 const actionKey = ref(0)
 const actionId = ref<string>()
 const currentWorkflow = ref<LogicFlow.GraphConfigData | null>(null)
-const formPayload = ref<{ data_source: Dict<unknown>; knowledge_base: Dict<unknown> }>({ data_source: {}, knowledge_base: {} })
+const formPayload = ref<KnowledgeWorkflowDebugPayload>({ data_source: {}, knowledge_base: {} })
 
 const actionRef = useTemplateRef<{ validate: () => Promise<unknown>; getData: () => Dict<unknown> }>('actionRef')
 
 // 知识库节点存在用户输入字段时，才需要「数据源 → 知识库输入」两步。
-const hasKnowledgeBaseInput = computed(() => {
-  const node = currentWorkflow.value?.nodes?.find((item) => item.type === WorkflowNodeType.KnowledgeBase)
-  return ((node?.properties?.user_input_field_list as FormField[] | undefined)?.length ?? 0) > 0
-})
+const knowledgeBaseNode = computed(() => currentWorkflow.value?.nodes?.find((node) => node.type === WorkflowNodeType.KnowledgeBase))
+const hasKnowledgeBaseInput = computed(
+  () => ((knowledgeBaseNode.value?.properties?.user_input_field_list as FormField[] | undefined)?.length ?? 0) > 0,
+)
+const userInputTitle = computed(() => knowledgeBaseNode.value?.properties?.user_input_config?.title || '用户输入')
+const activeStep = computed(() => ({ data_source: 0, knowledge_base: 1, result: 2 })[active.value])
 
 const showNext = computed(() => hasKnowledgeBaseInput.value && active.value === 'data_source')
 const showPrev = computed(() => hasKnowledgeBaseInput.value && active.value === 'knowledge_base')
 const showImport = computed(() => (hasKnowledgeBaseInput.value ? active.value === 'knowledge_base' : active.value === 'data_source'))
 
 function next() {
-  actionRef.value?.validate().then(() => {
-    formPayload.value.data_source = actionRef.value?.getData() ?? {}
-    active.value = 'knowledge_base'
-  })
+  if (loading.value || !showNext.value) return
+  return actionRef.value
+    ?.validate()
+    .then(() => {
+      formPayload.value.data_source = actionRef.value?.getData() ?? {}
+      active.value = 'knowledge_base'
+    })
+    .catch(() => {
+      // 表单展示校验错误，保留当前步骤。
+    })
 }
 
 function prev() {
+  if (loading.value || !showPrev.value) return
   formPayload.value.knowledge_base = actionRef.value?.getData() ?? {}
   active.value = 'data_source'
 }
 
 function submit() {
-  actionRef.value?.validate().then(() => {
-    formPayload.value[active.value as 'data_source' | 'knowledge_base'] = actionRef.value?.getData() ?? {}
-    loading.value = true
-    return KnowledgeWorkflowApi.postKnowledgeWorkflowDebug(props.knowledgeId, {
-      data_source: formPayload.value.data_source,
-      knowledge_base: formPayload.value.knowledge_base,
-    })
-      .then((action) => {
+  if (loading.value || active.value === 'result' || !actionRef.value) return
+  const step = active.value
+  loading.value = true
+  return actionRef.value
+    .validate()
+    .then(() => {
+      formPayload.value[step] = actionRef.value?.getData() ?? {}
+      return KnowledgeWorkflowApi.postKnowledgeWorkflowDebug(props.knowledgeId, formPayload.value).then((action) => {
         actionId.value = action.id
         active.value = 'result'
       })
-      .finally(() => {
-        loading.value = false
-      })
-  })
+    })
+    .catch(() => {
+      // 校验和请求错误由各自流程提示，保留表单供重试。
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 // 继续导入：重置表单并强制重建动作组件，保留当前工作流。
 function continueImporting() {
-  const workflow = currentWorkflow.value
-  currentWorkflow.value = null
+  if (loading.value) return
   actionId.value = undefined
   formPayload.value = { data_source: {}, knowledge_base: {} }
   active.value = 'data_source'
   actionKey.value += 1
-  nextTick(() => {
-    currentWorkflow.value = workflow
-  })
 }
 
+// 抽屉生命周期与文档导航。
 function open(workflow: LogicFlow.GraphConfigData) {
   currentWorkflow.value = workflow
-  active.value = 'data_source'
-  actionId.value = undefined
-  formPayload.value = { data_source: {}, knowledge_base: {} }
-  actionKey.value += 1
   visible.value = true
 }
 
 function close() {
   visible.value = false
+}
+
+function handleClosed() {
   currentWorkflow.value = null
   active.value = 'data_source'
   actionId.value = undefined
+  formPayload.value = { data_source: {}, knowledge_base: {} }
+}
+
+function handleGoToDocuments() {
+  return router
+    .push({
+      name: 'workspace-knowledge-document-list',
+      params: { workspaceId: getWorkspaceId(), knowledgeId: props.knowledgeId, type: KNOWLEDGE_TYPE_KEY.WORKFLOW },
+    })
+    .then(close)
 }
 
 defineExpose({ open, close })
 </script>
 
 <template>
-  <MkDrawer v-model="visible" direction="btt" @closed="close">
-    <!-- <template #header>
+  <MkDrawer v-model="visible" direction="btt" @closed="handleClosed">
+    <template #header>
       <div class="flex w-full">
         <h4>调试</h4>
-        <el-steps :active="activeStep" finish-status="success" class="absolute-center w-85!">
+        <el-steps v-if="hasKnowledgeBaseInput" :active="activeStep" finish-status="success" class="absolute-center w-85!">
           <el-step title="选择数据源" />
-          <el-step title="文档处理设置" />
+          <el-step :title="userInputTitle" />
         </el-steps>
       </div>
-    </template> -->
-    <div v-loading="loading" class="h-full">
-      <keep-alive :include="['DataSource', 'KnowledgeBase']">
+    </template>
+    <div v-loading="loading" class="mx-auto w-full max-w-200">
+      <keep-alive :key="actionKey" :include="['DataSource', 'KnowledgeBase']">
         <component
           :is="actionComponents[active]"
-          :key="`${actionKey}:${active}`"
           ref="actionRef"
           v-model:loading="loading"
           :workflow="currentWorkflow"
@@ -130,13 +164,18 @@ defineExpose({ open, close })
     </div>
 
     <template #footer>
-      <div class="flex justify-end gap-3">
-        <el-button v-if="active === 'result'" @click="continueImporting">继续导入</el-button>
-        <el-button v-if="showPrev" :disabled="loading" @click="prev">上一步</el-button>
-        <el-button v-if="showNext" :disabled="loading" @click="next">下一步</el-button>
-        <el-button v-if="showImport" type="primary" :loading="loading" @click="submit">导入</el-button>
-        <el-button v-if="active === 'result'" type="primary" @click="close">完成</el-button>
-      </div>
+      <!-- 取消导入 -->
+      <el-button plain v-if="active !== 'result'" :disabled="loading" @click="visible = false">取消</el-button>
+      <!-- 继续导入 -->
+      <el-button v-if="active === 'result'" plain @click="continueImporting">继续导入</el-button>
+      <!-- 返回数据源 -->
+      <el-button v-if="showPrev" plain :disabled="loading" @click="prev">上一步</el-button>
+      <!-- 进入用户输入 -->
+      <el-button v-if="showNext" type="primary" :disabled="loading" @click="next">下一步</el-button>
+      <!-- 开始导入 -->
+      <el-button v-if="showImport" type="primary" :loading="loading" @click="submit">开始导入</el-button>
+      <!-- 前往工作流知识库文档 -->
+      <el-button v-if="active === 'result'" type="primary" @click="handleGoToDocuments">前往文档</el-button>
     </template>
   </MkDrawer>
 </template>
diff --git a/ui/src/views/workflow/knowledge/debug/action/DataSource.vue b/ui/src/views/workflow/knowledge/debug/action/DataSource.vue
index 0606e31bcaf..1cc9fed27c1 100644
--- a/ui/src/views/workflow/knowledge/debug/action/DataSource.vue
+++ b/ui/src/views/workflow/knowledge/debug/action/DataSource.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, provide } from 'vue'
-import type { FormRules } from 'element-plus'
+import { computed, provide, ref, watch } from 'vue'
 import { MkDynamicsForm, type DynamicFormValue, type FormField } from '@/components/mk-dynamics-form'
 import type { Dict } from '@/api/types'
 import KnowledgeWorkflowApi from '@/api/admin/workspace/knowledge/workflow'
@@ -27,6 +26,7 @@ const props = defineProps<{
 
 const loading = defineModel<boolean>('loading', { default: false })
 
+// 数据源选择与动态表单。
 const dynamicsFormRef = ref<InstanceType<typeof MkDynamicsForm>>()
 const baseFormData = ref<{ node_id: string }>({ node_id: '' })
 const dynamicsFormData = ref<Dict<DynamicFormValue>>({})
@@ -39,37 +39,48 @@ const formData = computed<Dict<DynamicFormValue>>({
 })
 
 const sourceNodeList = computed(() => props.workflow?.nodes?.filter((node) => node.properties?.kind === WorkflowKind.DataSource) ?? [])
-
-const baseFormRules: FormRules = {
-  node_id: { required: true, trigger: 'change', message: '请选择数据源' },
-}
+const hasKnowledgeBaseInput = computed(() => {
+  const node = props.workflow?.nodes?.find((node) => node.type === WorkflowNodeType.KnowledgeBase)
+  return ((node?.properties?.user_input_field_list as FormField[] | undefined)?.length ?? 0) > 0
+})
 
 const isLocalSource = (node: WorkflowNode) => [WorkflowNodeType.DataSourceLocalNode, WorkflowNodeType.DataSourceWebNode].includes(node.type)
-const extra = ref<any>({
+const sourceContext = ref<{ current_tool_id?: string }>({
   current_tool_id: undefined,
 })
-const get_extra = () => {
-  return extra.value
-}
-provide('get_extra', get_extra)
+// 动态目录字段沿用 get_extra 注入协议，读取当前工具上下文。
+provide('get_extra', () => sourceContext.value)
 
-function sourceChange(nodeId: string) {
+function handleSourceChange(nodeId: string) {
   baseFormData.value.node_id = nodeId
-  const node = sourceNodeList.value.find((item) => item.id === nodeId)
+  const node = sourceNodeList.value.find((sourceNode) => sourceNode.id === nodeId)
   if (!node) return
-  if (node.properties.node_data && node.properties.node_data.tool_lib_id) {
-    extra.value.current_tool_id = node.properties.node_data.tool_lib_id
+  if (node.properties.node_data?.tool_lib_id) {
+    sourceContext.value.current_tool_id = node.properties.node_data.tool_lib_id
   }
-  const type = isLocalSource(node) ? 'local' : 'tool'
-  const id = isLocalSource(node) ? node.type : (node.properties.node_data?.tool_lib_id ?? node.type)
+  const localSource = isLocalSource(node)
+  const sourceType = localSource ? 'local' : 'tool'
+  const sourceId = localSource ? node.type : (node.properties.node_data?.tool_lib_id ?? node.type)
   loading.value = true
-  return KnowledgeWorkflowApi.getKnowledgeWorkflowFormList(props.knowledgeId, type, id, node as unknown as Dict<unknown>)
+  return KnowledgeWorkflowApi.getKnowledgeWorkflowFormList(props.knowledgeId, sourceType, sourceId, node as unknown as Dict<unknown>)
     .then((fields) => dynamicsFormRef.value?.render(fields as unknown as FormField[]))
     .finally(() => {
       loading.value = false
     })
 }
 
+watch(
+  sourceNodeList,
+  () => {
+    const firstNode = sourceNodeList.value[0]
+    if (!baseFormData.value.node_id && firstNode) {
+      handleSourceChange(firstNode.id)
+    }
+  },
+  { immediate: true },
+)
+
+// 表单校验与调试载荷。
 function validate() {
   return dynamicsFormRef.value?.validate() ?? Promise.resolve()
 }
@@ -84,17 +95,6 @@ function getData() {
   }
 }
 
-watch(
-  sourceNodeList,
-  () => {
-    const firstNode = sourceNodeList.value[0]
-    if (!baseFormData.value.node_id && firstNode) {
-      sourceChange(firstNode.id)
-    }
-  },
-  { immediate: true },
-)
-
 defineExpose({ validate, getData })
 </script>
 
@@ -108,24 +108,23 @@ defineExpose({ validate, getData })
     require-asterisk-position="right"
   >
     <template #default>
-      <h4 class="mb-4 mt-1">选择数据源</h4>
-      <el-form-item label="数据源" prop="node_id" :rules="baseFormRules.node_id">
-        <el-row class="w-full" :gutter="8">
-          <el-col v-for="node in sourceNodeList" :key="node.id" :span="8">
+      <h4 v-if="hasKnowledgeBaseInput" class="mb-4 mk-title-decoration">选择数据源</h4>
+      <el-form-item label="数据源类型">
+        <div class="grid w-full grid-cols-3 gap-2">
+          <template v-for="node in sourceNodeList" :key="node.id">
             <el-card
               shadow="never"
-              class="mb-2 w-full cursor-pointer"
+              class="small min-w-0 cursor-pointer"
               :class="baseFormData.node_id === node.id ? 'border-primary!' : ''"
-              style="--el-card-padding: 4px 12px"
-              @click="sourceChange(node.id)"
+              @click="handleSourceChange(node.id)"
             >
               <div class="flex-align-center gap-2">
-                <component :is="iconComponent(`${node.type}-icon`)" class="size-5" />
+                <component :is="iconComponent(`${node.type}-icon`)" class="size-5!" />
                 <span class="min-w-0 truncate">{{ node.properties.stepName }}</span>
               </div>
             </el-card>
-          </el-col>
-        </el-row>
+          </template>
+        </div>
       </el-form-item>
     </template>
   </MkDynamicsForm>
diff --git a/ui/src/views/workflow/knowledge/debug/action/KnowledgeBase.vue b/ui/src/views/workflow/knowledge/debug/action/KnowledgeBase.vue
index fc4a81b607a..e548d82d94a 100644
--- a/ui/src/views/workflow/knowledge/debug/action/KnowledgeBase.vue
+++ b/ui/src/views/workflow/knowledge/debug/action/KnowledgeBase.vue
@@ -38,7 +38,7 @@ defineExpose({ validate, getData })
 <template>
   <MkDynamicsForm ref="dynamicsFormRef" v-model="formData" :render-data="baseFormList" label-position="top" require-asterisk-position="right">
     <template #default>
-      <h4 class="mb-4 mt-1">{{ chatTitle }}</h4>
+      <h4 class="mb-4 mk-title-decoration">{{ chatTitle }}</h4>
     </template>
   </MkDynamicsForm>
 </template>
diff --git a/ui/src/views/workflow/knowledge/debug/action/Result.vue b/ui/src/views/workflow/knowledge/debug/action/Result.vue
index 08936be67c9..759f083eea9 100644
--- a/ui/src/views/workflow/knowledge/debug/action/Result.vue
+++ b/ui/src/views/workflow/knowledge/debug/action/Result.vue
@@ -15,7 +15,9 @@ const POLL_INTERVAL = 2000
 
 const knowledgeAction = ref<KnowledgeWorkflowAction>()
 const state = computed(() => knowledgeAction.value?.state ?? 'PENDING')
-const detail = computed<ExecutionNodeDetail[]>(() => (knowledgeAction.value ? (Object.values(knowledgeAction.value.details) as ExecutionNodeDetail[]) : []))
+const detail = computed<ExecutionNodeDetail[]>(() =>
+  knowledgeAction.value ? (Object.values(knowledgeAction.value.details) as ExecutionNodeDetail[]) : [],
+)
 
 let pollingTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -53,7 +55,7 @@ onUnmounted(stopPolling)
 
 <template>
   <div>
-    <h4 class="mb-4 mt-1">执行详情</h4>
+    <h4 class="mb-4 mk-title-decoration">执行结果</h4>
     <div class="mb-4">
       <el-alert v-if="state === 'SUCCESS'" title="执行成功" type="success" show-icon :closable="false" />
       <el-alert v-else-if="state === 'FAILURE'" title="执行失败" type="error" show-icon :closable="false" />