diff --git a/ui/src/api/API_README.md b/ui/src/api/API_README.md
index b9350227aff..be626f439bc 100644
--- a/ui/src/api/API_README.md
+++ b/ui/src/api/API_README.md
@@ -432,6 +432,17 @@ System 不读取 workspaceId；飞书在知识库前缀追加 lark/<knowledgeId>
 System／飞书扩展及文件 ID 导入、策略协议需对应部署支持，不能因前端接口存在认定已联调。
 
 文档分页使用 ParamsPage／ResponsePage<DocumentItem>，名称／创建者／任务／启用／命中／标签筛选支持组合。
+图片与文档共用 Document API 的 `getDocumentPage` 列表接口及响应结构，图片列表额外传入查询参数
+`resource_type: 'image'`，不单独封装图片列表接口。
+Workspace 与 System 资源管理的 `knowledge/image.ts` 提供图片专属接口，通过上下文 `resourceApi.image` 读取。
+`postUploadImagePreview` 通过 POST `image/preview` 按策略生成图片预览，
+FormData 重复提交 `file` 并附带 JSON 字符串 `doc_strategy`，返回 ImageDocumentPreview[]；
+图片预览结果沿用 DocumentSplitResult 的分段结构，额外包含 preview_id；页面直接展示 content，不进行结构转换。
+`putBatchCreateImageDocuments` 通过 PUT `image/batch_create` 提交 `{ preview_ids }`，返回 DocumentItem[]。
+未生成预览时，`preview_ids` 直接使用上一步上传成功的图片文件 ID；已预览时使用生成结果的预览 ID。
+图片支持 JPG、JPEG、PNG、WEBP、BMP；共享范围尚未装配图片上传和导入接口，不回退到 Workspace。
+System 资源管理接口前缀为 `/system/resource/knowledge/<knowledgeId>/document/image`；
+生成预览 POST `preview`，批量添加 PUT `batch_create`。
 is_active 为 false 时保留，“全部”省略；tags 传叶子 ID 数组或 NO_TAG，按 tags[] 序列化。
 状态使用 DOCUMENT_TASK_STATE 与 DOCUMENT_TASK_TYPE，不用通用 STATE_TYPES；非任务状态省略 task_type。
 status_meta 可空，aggs 为 `{ status, count }[]`，state_time 按任务和状态索引；null 聚合状态按忽略处理。
diff --git a/ui/src/api/admin/system/resource-management/knowledge/image.ts b/ui/src/api/admin/system/resource-management/knowledge/image.ts
new file mode 100644
index 00000000000..f16546d418a
--- /dev/null
+++ b/ui/src/api/admin/system/resource-management/knowledge/image.ts
@@ -0,0 +1,21 @@
+import { post, put } from '@/api/admin/core/request'
+import type { DocumentItem, DocumentStrategy, ImageDocumentPreview } from '@/api/types'
+
+const getPrefix = (knowledgeId: string) => `/system/resource/knowledge/${knowledgeId}/document/image`
+
+/** 按图片处理策略上传图片并生成预览。 */
+const postUploadImagePreview = (knowledgeId: string, files: File[], strategy: DocumentStrategy) => {
+  const data = new FormData()
+  files.forEach((file) => data.append('file', file))
+  data.append('doc_strategy', JSON.stringify(strategy))
+  return post<FormData, ImageDocumentPreview[]>(`${getPrefix(knowledgeId)}/preview`, data)
+}
+
+/** 将已上传的图片预览导入知识库。 */
+const putBatchCreateImageDocuments = (knowledgeId: string, previewIds: string[]) =>
+  put<{ preview_ids: string[] }, DocumentItem[]>(`${getPrefix(knowledgeId)}/batch_create`, { preview_ids: previewIds })
+
+export default {
+  postUploadImagePreview,
+  putBatchCreateImageDocuments,
+}
diff --git a/ui/src/api/admin/system/resource-management/knowledge/termbase.ts b/ui/src/api/admin/system/resource-management/knowledge/termbase.ts
index 02952f12acb..0a95d8ed3f9 100644
--- a/ui/src/api/admin/system/resource-management/knowledge/termbase.ts
+++ b/ui/src/api/admin/system/resource-management/knowledge/termbase.ts
@@ -11,10 +11,6 @@ const postTermbases = (knowledgeId: string, contents: string[]) => post<string[]
 const getTermbasePage = (knowledgeId: string, page: ParamsPage, query?: { content?: string }) =>
   get<ResponsePage<TermbaseItem>>(`${getPrefix(knowledgeId)}/${page.currentPage}/${page.pageSize}`, query)
 
-/** 编辑单个知识库自定义分词条目。 */
-const putTermbase = (knowledgeId: string, termbaseId: string, payload: TermbaseUpdatePayload) =>
-  put<TermbaseUpdatePayload, void>(`${getPrefix(knowledgeId)}/${termbaseId}`, payload)
-
 /** 删除单个知识库自定义分词条目。 */
 const deleteTermbase = (knowledgeId: string, termbaseId: string) => del<undefined, boolean>(`${getPrefix(knowledgeId)}/${termbaseId}`)
 
@@ -29,7 +25,6 @@ const postExportTermbases = (knowledgeId: string, termbaseIds: string[]) =>
 export default {
   postTermbases,
   getTermbasePage,
-  putTermbase,
   deleteTermbase,
   putBatchDeleteTermbases,
   postExportTermbases,
diff --git a/ui/src/api/admin/system/shared-resources/knowledge/termbase.ts b/ui/src/api/admin/system/shared-resources/knowledge/termbase.ts
index f0ed9c38ab7..f5a8e28802a 100644
--- a/ui/src/api/admin/system/shared-resources/knowledge/termbase.ts
+++ b/ui/src/api/admin/system/shared-resources/knowledge/termbase.ts
@@ -11,10 +11,6 @@ const postTermbases = (knowledgeId: string, contents: string[]) => post<string[]
 const getTermbasePage = (knowledgeId: string, page: ParamsPage, query?: { content?: string }) =>
   get<ResponsePage<TermbaseItem>>(`${getPrefix(knowledgeId)}/${page.currentPage}/${page.pageSize}`, query)
 
-/** 编辑单个知识库自定义分词条目。 */
-const putTermbase = (knowledgeId: string, termbaseId: string, payload: TermbaseUpdatePayload) =>
-  put<TermbaseUpdatePayload, void>(`${getPrefix(knowledgeId)}/${termbaseId}`, payload)
-
 /** 删除单个知识库自定义分词条目。 */
 const deleteTermbase = (knowledgeId: string, termbaseId: string) => del<undefined, boolean>(`${getPrefix(knowledgeId)}/${termbaseId}`)
 
@@ -29,7 +25,6 @@ const postExportTermbases = (knowledgeId: string, termbaseIds: string[]) =>
 export default {
   postTermbases,
   getTermbasePage,
-  putTermbase,
   deleteTermbase,
   putBatchDeleteTermbases,
   postExportTermbases,
diff --git a/ui/src/api/admin/workspace/knowledge/image.ts b/ui/src/api/admin/workspace/knowledge/image.ts
new file mode 100644
index 00000000000..4d3fc183f81
--- /dev/null
+++ b/ui/src/api/admin/workspace/knowledge/image.ts
@@ -0,0 +1,22 @@
+import { post, put } from '@/api/admin/core/request'
+import type { DocumentItem, DocumentStrategy, ImageDocumentPreview } from '@/api/types'
+import { getWorkspaceId } from '@/utils/resource-context'
+
+const getPrefix = (knowledgeId: string) => `/workspace/${getWorkspaceId()}/knowledge/${knowledgeId}/document/image`
+
+/** 按图片处理策略上传图片并生成预览。 */
+const postUploadImagePreview = (knowledgeId: string, files: File[], strategy: DocumentStrategy) => {
+  const data = new FormData()
+  files.forEach((file) => data.append('file', file))
+  data.append('doc_strategy', JSON.stringify(strategy))
+  return post<FormData, ImageDocumentPreview[]>(`${getPrefix(knowledgeId)}/preview`, data)
+}
+
+/** 将已上传的图片预览导入知识库。 */
+const putBatchCreateImageDocuments = (knowledgeId: string, previewIds: string[]) =>
+  put<{ preview_ids: string[] }, DocumentItem[]>(`${getPrefix(knowledgeId)}/batch_create`, { preview_ids: previewIds })
+
+export default {
+  postUploadImagePreview,
+  putBatchCreateImageDocuments,
+}
diff --git a/ui/src/api/admin/workspace/knowledge/termbase.ts b/ui/src/api/admin/workspace/knowledge/termbase.ts
index 480706b2266..d859f34959a 100644
--- a/ui/src/api/admin/workspace/knowledge/termbase.ts
+++ b/ui/src/api/admin/workspace/knowledge/termbase.ts
@@ -12,10 +12,6 @@ const postTermbases = (knowledgeId: string, contents: string[]) => post<string[]
 const getTermbasePage = (knowledgeId: string, page: ParamsPage, query?: { content?: string }) =>
   get<ResponsePage<TermbaseItem>>(`${getPrefix(knowledgeId)}/${page.currentPage}/${page.pageSize}`, query)
 
-/** 编辑单个知识库自定义分词条目。 */
-const putTermbase = (knowledgeId: string, termbaseId: string, payload: TermbaseUpdatePayload) =>
-  put<TermbaseUpdatePayload, void>(`${getPrefix(knowledgeId)}/${termbaseId}`, payload)
-
 /** 删除单个知识库自定义分词条目。 */
 const deleteTermbase = (knowledgeId: string, termbaseId: string) => del<undefined, boolean>(`${getPrefix(knowledgeId)}/${termbaseId}`)
 
@@ -30,7 +26,6 @@ const postExportTermbases = (knowledgeId: string, termbaseIds: string[]) =>
 export default {
   postTermbases,
   getTermbasePage,
-  putTermbase,
   deleteTermbase,
   putBatchDeleteTermbases,
   postExportTermbases,
diff --git a/ui/src/api/enums/document.ts b/ui/src/api/enums/document.ts
index 0b1f5d8b4ec..e507ed683b6 100644
--- a/ui/src/api/enums/document.ts
+++ b/ui/src/api/enums/document.ts
@@ -6,3 +6,6 @@ export const DOCUMENT_TASK_STATE = { PENDING: '0', STARTED: '1', SUCCESS: '2', F
 
 /** 文档状态字符串中各任务的位置。 */
 export const DOCUMENT_TASK_TYPE = { EMBEDDING: 1, GENERATE_PROBLEM: 2, SYNC: 3, TOKENIZE: 4 } as const
+
+/** 独立图片视觉增强的处理状态。 */
+export const IMAGE_PROCESS_STATUS = { PENDING: 'pending', SUCCESS: 'success', FAILURE: 'failure', SKIPPED: 'skipped' } as const
diff --git a/ui/src/api/types/document.ts b/ui/src/api/types/document.ts
index c14681eddd2..29aab5420b5 100644
--- a/ui/src/api/types/document.ts
+++ b/ui/src/api/types/document.ts
@@ -1,4 +1,4 @@
-import type { DOCUMENT_HIT_HANDLING, DOCUMENT_TASK_STATE, DOCUMENT_TASK_TYPE } from '@/api/enums'
+import type { DOCUMENT_HIT_HANDLING, DOCUMENT_TASK_STATE, DOCUMENT_TASK_TYPE, IMAGE_PROCESS_STATUS } from '@/api/enums'
 import type { DocumentStrategy, KnowledgeGeneratePayload, KnowledgeType } from './knowledge'
 export type DocumentHitHandling = (typeof DOCUMENT_HIT_HANDLING)[keyof typeof DOCUMENT_HIT_HANDLING]
 export type DocumentTaskState = (typeof DOCUMENT_TASK_STATE)[keyof typeof DOCUMENT_TASK_STATE]
@@ -102,3 +102,15 @@ export interface LarkDocumentList {
 export interface LarkDocumentImportPayload extends Pick<LarkDocumentNode, 'name' | 'token' | 'type'> {
   doc_strategy: DocumentStrategy
 }
+
+/** 独立图片上传后的处理预览。 */
+export interface ImageDocumentPreview extends DocumentSplitResult {
+  preview_id: string
+  name: string
+  url: string
+  caption: string
+  ocr_text: string
+  description: string
+  process_status: (typeof IMAGE_PROCESS_STATUS)[keyof typeof IMAGE_PROCESS_STATUS]
+  process_error: string
+}
diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 457c0cc06a0..a14e49a8120 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -73,7 +73,7 @@ Element Plus 已在 Admin、Chat 入口注册。使用前先检查原生 API，
   - `close()` 只发起关闭，表单清理放在 `closed`，避免关闭动画中内容跳变；依赖本次参数的默认值、
     编辑快照、动态字段及每次打开必须重新查询的数据仍在 `open()` 初始化。
     父级负责校验或请求时，子组件提交数据后由父级成功调用 `close()`，失败保持打开。
-- 仅登录表单支持回车提交；其他业务表单使用 `@submit.prevent`，保存、添加由按钮触发。
+- 仅登录表单及 `MkQuickCreate` 行内快捷创建支持回车提交；其他业务表单使用 `@submit.prevent`，保存、添加由按钮触发。
   自定义 `submit` 事件不等于原生表单提交。
 
 ## 全局 UI 组件
@@ -281,6 +281,7 @@ Element Plus `append`，仅在传入该插槽时将直属表体滚动容器设
 由页面管理请求、`loading`、成功提示及列表刷新；成功后通过组件 ref 调用 `close()` 清空并收起，失败保留输入。
 `text` 默认为“快速创建”，`placeholder` 默认为“请输入名称”，`maxlength` 默认为 256。
 组件不使用 Form 或表单校验；空名称、纯空白及提交期间禁用创建按钮，提交前 trim。
+输入框按 Enter 触发同一创建流程，输入法选词时不提交。
 Esc 或取消清理草稿；`loading` 默认为 false，为 true 时禁止创建和取消。组件不等待 Promise，不自动收起。
 
 `paginationConfig` 包含 `currentPage`、`pageSize`、`total` 和可选 `pageSizes`；不传则隐藏分页器，
@@ -541,8 +542,15 @@ Logo 数据统一从 Theme Store 获取。
 兼容 UploadUserFile，支持 file_id、errMsg、canRetry；类型从组件 `types.ts` 导入。
 
 - `multiple` 默认 false；单文件展示卡片和更换入口，多文件保留拖拽区、文件夹选择与列表。
+- 多文件 `mode` 默认 `file`，使用文件图标和上传进度；`mode="image"` 按选择顺序展示 104×104 的
+  `el-image` 方块，不使用 Card，不展示汇总、文件名或状态文案。等待时中央显示空进度条，上传时显示实际进度，
+  成功或失败后隐藏进度条。右上角提供删除，未上传成功时
+  在原图上叠加灰色遮罩，成功后移除；网络失败和大小超限使用红框，仅网络失败在中央提供重试。
+  失败且有错误信息时通过 MkTooltip 展示文件名及失败原因，其他情况禁用提示。内部仍维护上传状态与 uploadingCount，本地缩略图 URL 在文件移除
+  和组件卸载时释放。单文件不使用 mode。
 - `accept`、`limit` 控制格式／数量，多文件 `sizeLimit` 默认 100MB；格式、空文件、重复选择移除，
-  大小超限保留不可重试 fail 卡片，网络失败可重试。超量发出 exceed，DS_Store 格式不支持时静默移除。
+  大小超限保留不可重试 fail 文件，图片模式保留原图和红框；网络失败可重试。
+  超量发出 exceed，DS_Store 格式不支持时静默移除。
 - `dragText`、`selectText`、`tipText`、`replaceText` 覆盖文案；download 作用域插槽提供下载操作。
 - 多文件通过 `inject('upload')` 获取 `DragUploadHandler`，返回 `{ request: Promise<string>, abort }`。
   change 后等待调用方回写和校验，再上传 ready 文件；响应成功才标记 success 并提取 file_id，100% 仅表示传输完成。
@@ -773,6 +781,9 @@ Skills 场景传入 `[TOOL_TYPE.SKILL]`，并通过 `title` 指定标题。两
 
 ### SelectModel
 
+`loading` 默认为 `false`，透传给 `el-select` 展示列表加载状态；模型选项加载使用 `loading`，不因此禁用选择器。
+`disabled` 继续表示只读或业务禁用。
+
 `teleported` 默认为 `false`，画布节点内保留此默认值，使下拉浮层跟随画布。
 画布外的表单、Dialog 和 Drawer 显式传入 `teleported`（即 `true`），将下拉浮层挂载到 body，
 避免被滚动容器裁剪。动态表单 Model 字段可通过透传属性配置该值。
diff --git a/ui/src/components/business/select-model/index.vue b/ui/src/components/business/select-model/index.vue
index e741b04ae9f..c29a1269710 100644
--- a/ui/src/components/business/select-model/index.vue
+++ b/ui/src/components/business/select-model/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="Multiple extends boolean = false">
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import type { SelectInstance } from 'element-plus'
 import { MODEL_STATUS } from '@/api/enums'
 import type { ModelProviderItem, ModelItem } from '@/api/types'
@@ -29,6 +29,7 @@ const props = withDefaults(
     canEditParams?: boolean
     canAdd?: boolean
     modelParams?: Record<string, unknown>
+    loading?: boolean
     disabled?: boolean
     teleported?: boolean
     multiple?: Multiple
@@ -39,6 +40,7 @@ const props = withDefaults(
     canEditParams: false,
     canAdd: false,
     modelParams: () => ({}),
+    loading: false,
     disabled: false,
     teleported: false,
   },
@@ -69,7 +71,6 @@ const _options = computed(() => {
   return groupBy(props.options, 'provider')
 })
 
-const loading = ref(false)
 const canEditModelParams = computed(() => props.canEditParams && !props.multiple)
 
 const selectedModelValue = computed<SelectModelValue>({
diff --git a/ui/src/components/global/mk-table/MkQuickCreate.vue b/ui/src/components/global/mk-table/MkQuickCreate.vue
index d1adc16a3ab..cbf2b8ab4ec 100644
--- a/ui/src/components/global/mk-table/MkQuickCreate.vue
+++ b/ui/src/components/global/mk-table/MkQuickCreate.vue
@@ -42,6 +42,12 @@ function handleCreate() {
   emit('create', createName.value.trim())
 }
 
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter' || event.isComposing || event.keyCode === 229) return
+  event.preventDefault()
+  handleCreate()
+}
+
 defineExpose({ close: resetDraft })
 </script>
 
@@ -54,6 +60,7 @@ defineExpose({ close: resetDraft })
         class="mr-3 w-80!"
         :placeholder="props.placeholder"
         :maxlength="props.maxlength"
+        @keydown="handleKeydown"
         show-word-limit
         clearable
       />
diff --git a/ui/src/components/mk-drag-upload/MultipleFileUpload.vue b/ui/src/components/mk-drag-upload/MultipleFileUpload.vue
index 31238bdd077..a77d197845e 100644
--- a/ui/src/components/mk-drag-upload/MultipleFileUpload.vue
+++ b/ui/src/components/mk-drag-upload/MultipleFileUpload.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, useTemplateRef } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import type { UploadFile, UploadFiles, UploadInstance, UploadRawFile, UploadUserFile } from 'element-plus'
-import type { DragUploadFile, DragUploadHandler } from './types'
+import type { DragUploadFile, DragUploadHandler, DragUploadMode } from './types'
 import FileApi from '@/api/admin/file'
 import uploadImage from '@/assets/mk_icon_upload.svg'
 import { getFileIconUrl } from '@/utils/icon'
@@ -12,6 +12,7 @@ defineOptions({ name: 'MultipleFileUpload' })
 
 const props = withDefaults(
   defineProps<{
+    mode?: DragUploadMode
     accept?: string
     disabled?: boolean
     limit?: number
@@ -21,6 +22,7 @@ const props = withDefaults(
     tipText?: string
   }>(),
   {
+    mode: 'file',
     accept: '',
     disabled: false,
     sizeLimit: 100,
@@ -45,6 +47,21 @@ const folderInputRef = useTemplateRef<HTMLInputElement>('folderInputRef')
 
 const uploadRequests = new Map<number, () => void>()
 
+/* 图片缩略图只保留当前文件的本地 URL，移除或卸载时释放。 */
+const imagePreviewUrls = ref(new Map<File, string>())
+watch(
+  () => (props.mode === 'image' ? fileList.value.flatMap((file) => (file.raw ? [file.raw] : [])) : []),
+  (files) => {
+    const nextUrls = new Map<File, string>()
+    for (const file of files) nextUrls.set(file, imagePreviewUrls.value.get(file) ?? URL.createObjectURL(file))
+    for (const [file, url] of imagePreviewUrls.value) {
+      if (!nextUrls.has(file)) URL.revokeObjectURL(url)
+    }
+    imagePreviewUrls.value = nextUrls
+  },
+  { immediate: true },
+)
+
 async function handleFileChange(file: UploadFile, files: UploadFiles) {
   emit('change', file, files)
   // 等待调用方完成校验与列表回写，仅上传保留的有效文件。
@@ -146,6 +163,7 @@ function cancelUpload(file: DragUploadFile) {
 
 onBeforeUnmount(() => {
   for (const file of fileList.value) cancelUpload(file)
+  for (const url of imagePreviewUrls.value.values()) URL.revokeObjectURL(url)
 })
 
 function handleExceed(files: File[], selectedFiles: UploadUserFile[]) {
@@ -270,7 +288,7 @@ defineExpose({ clearFiles, handleRemove })
         <p>已完成 {{ uploadSummary.completed }}/{{ fileList.length }}</p>
 
         <div class="flex-align-center gap-4">
-          <MkStatusLabel v-if="uploadSummary.uploading" type="loading" label="上传中" />
+          <MkStatusLabel v-if="mode === 'file' && uploadSummary.uploading" type="loading" label="上传中" />
           <template v-else-if="uploadSummary.error">
             <MkStatusLabel type="failure" :label="`失败 ${uploadSummary.error} 个`" />
             <!-- 重试所有可重试的失败文件 -->
@@ -282,7 +300,34 @@ defineExpose({ clearFiles, handleRemove })
           <MkStatusLabel v-else-if="uploadSummary.success === fileList.length" type="success" label="全部成功" />
         </div>
       </div>
-      <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+      <div v-if="mode === 'image'" class="mt-4 flex flex-wrap gap-3">
+        <template v-for="file in fileList" :key="file.uid ?? file.name">
+          <MkTooltip :content="`${file.name}：${file.errMsg}`" :disabled="file.status !== 'fail' || !file.errMsg" placement="top">
+            <div class="group relative shrink-0 overflow-hidden rounded-md">
+              <el-image
+                :src="(file.raw ? imagePreviewUrls.get(file.raw) : undefined) ?? file.url"
+                fit="cover"
+                class="h-26! w-26!"
+                :class="{ 'border-danger!': file.status === 'fail' }"
+              ></el-image>
+
+              <div v-if="file.status !== 'success'" class="pointer-events-none absolute inset-0 bg-N900/30" />
+              <div v-if="file.status === 'ready' || file.status === 'uploading'" class="absolute-center w-16">
+                <el-progress :percentage="file.status === 'uploading' ? (file.percentage ?? 0) : 0" :stroke-width="4" :show-text="false" />
+              </div>
+              <!-- 重试网络失败的图片 -->
+              <div v-if="file.status === 'fail' && file.canRetry" class="absolute-center cursor-pointer" @click="handleRetry(file)">
+                <MkIcon name="icon_refresh_outlined" class="text-white!" />
+              </div>
+              <!-- 删除已选图片 -->
+              <div class="group-hover-visible mk-remove-button" @click="handleRemove(file)">
+                <MkIcon name="icon_close_bold_outlined" class="text-white!" :size="6" />
+              </div>
+            </div>
+          </MkTooltip>
+        </template>
+      </div>
+      <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
         <template v-for="file in sortedFiles" :key="file.uid ?? file.name">
           <el-card class="small relative" shadow="never" :class="{ 'border-danger!': file.status === 'fail' }">
             <div class="flex-align-center gap-3">
diff --git a/ui/src/components/mk-drag-upload/index.vue b/ui/src/components/mk-drag-upload/index.vue
index 2934299c5d9..2688b5e2833 100644
--- a/ui/src/components/mk-drag-upload/index.vue
+++ b/ui/src/components/mk-drag-upload/index.vue
@@ -3,7 +3,7 @@ import { computed, useTemplateRef } from 'vue'
 import type { UploadFile, UploadFiles, UploadUserFile } from 'element-plus'
 import SingleFileUpload from './SingleFileUpload.vue'
 import MultipleFileUpload from './MultipleFileUpload.vue'
-import type { DragUploadFile } from './types'
+import type { DragUploadFile, DragUploadMode } from './types'
 
 defineOptions({ name: 'MkDragUpload' })
 
@@ -11,6 +11,7 @@ defineProps<{
   accept?: string
   disabled?: boolean
   multiple?: boolean
+  mode?: DragUploadMode
   limit?: number
   sizeLimit?: number
   dragText?: string
@@ -65,6 +66,7 @@ defineExpose({ clearFiles, handleRemove, uploadingCount })
 <template>
   <component
     :is="multiple ? MultipleFileUpload : SingleFileUpload"
+    v-bind="multiple ? { mode } : {}"
     ref="uploadRef"
     v-model="fileList"
     :accept="accept"
diff --git a/ui/src/components/mk-drag-upload/types.ts b/ui/src/components/mk-drag-upload/types.ts
index 41383989013..74ccb5e8b1d 100644
--- a/ui/src/components/mk-drag-upload/types.ts
+++ b/ui/src/components/mk-drag-upload/types.ts
@@ -9,3 +9,6 @@ export interface DragUploadFile extends UploadUserFile {
 
 /** 由调用方提供具体上传接口，组件管理进度、完成状态和取消。 */
 export type DragUploadHandler = (file: UploadRawFile, onProgress: (percent: number) => void) => { request: Promise<string>; abort: () => void }
+
+/** 多文件列表的展示模式。 */
+export type DragUploadMode = 'file' | 'image'
diff --git a/ui/src/conversation-panel/components/message-input/index.vue b/ui/src/conversation-panel/components/message-input/index.vue
index b3d2b0aba26..6a34977f7b8 100644
--- a/ui/src/conversation-panel/components/message-input/index.vue
+++ b/ui/src/conversation-panel/components/message-input/index.vue
@@ -81,7 +81,7 @@ const handleKeydown = (event: KeyboardEvent) => {
             <div class="h-full bg-primary/15 transition-[width] duration-200" :style="{ width: `${file.progress ?? 0}%` }" />
           </div>
           <!-- 移除附件 -->
-          <div class="group-hover-visible attachment-remove" @click="removeFile(index)">
+          <div class="group-hover-visible mk-remove-button" @click="removeFile(index)">
             <MkIcon name="icon_close_bold_outlined" class="text-white!" :size="6" />
           </div>
         </div>
diff --git a/ui/src/conversation-panel/index.scss b/ui/src/conversation-panel/index.scss
index 929c9429640..33eddb13ed3 100644
--- a/ui/src/conversation-panel/index.scss
+++ b/ui/src/conversation-panel/index.scss
@@ -108,17 +108,4 @@
   &:focus-within {
     border-color: rgb(var(--mk-primary-rgb) / 60%);
   }
-  /* 移除附件 */
-  .attachment-remove {
-    background: rgb(var(--mk-N900-rgb) / 60%);
-    border-radius: 9999px;
-    padding: var(--spacing);
-    position: absolute;
-    right: var(--spacing);
-    top: var(--spacing);
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-  }
 }
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index b5b0ab8349b..8ac119037b1 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -69,6 +69,12 @@ Admin 和 Chat 共用。组件不单独恢复焦点 `outline`，包括通过隐
 单元格最小宽度为 120px、最大宽度为 400px，正文正常换行并允许长链接折行；表头不换行，
 避免多列时标题和正文被压缩成逐字纵向排列。滚动条沿用 Markdown 主题已有样式。
 
+## 右上角移除按钮
+
+`app.scss` 的 button 分组提供 `.mk-remove-button`，用于图片、附件等内容的右上角移除入口。
+父容器设置 `position: relative`；按钮统一使用 N900 的 60% 透明度背景、圆角、内边距及右上角定位，
+内部图标大小和颜色由调用方指定。悬停显示按需组合 `group-hover-visible`，禁用状态由使用方控制。
+
 ## 默认字号
 
 项目正文和大部分界面文字默认使用 `14px / 22px`（字号/行高），统一由 `variables.scss` 中的 `--mk-font-size-base` 和 `--mk-line-height-base` 提供，`body` 直接使用这两个变量。
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 073172deb16..5304e7f57ed 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -92,6 +92,21 @@ h6 {
   color: var(--mk-N500);
 }
 
+// 图片、附件等内容的右上角移除按钮
+.mk-remove-button {
+  align-items: center;
+  background: rgb(var(--mk-N900-rgb) / 60%);
+  border-radius: 9999px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing);
+  position: absolute;
+  right: var(--spacing);
+  top: var(--spacing);
+  z-index: 1;
+}
+
 /* dot */
 // 状态圆点
 .mk-dot-danger {
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 11321778501..3e012cd1708 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -53,7 +53,7 @@
     margin-right: 8px !important;
     width: 16px !important;
     font-size: 16px !important;
-    margin-top: 4px;
+    margin-top: 3px;
   }
   &--error {
     --el-alert-bg-color: var(--el-color-danger-light-8);
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index a71687d9136..8230fcfadff 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -43,7 +43,7 @@
 | `application-detail/integration/`                                                     | 接入第三方占位页                             |
 | `knowledge-detail/`                                                                   | 四范围知识库详情、菜单与上下文               |
 | `knowledge-detail/library/document/`、`tags/`                                         | 文档及标签维护                               |
-| `knowledge-detail/library/image/`                                                     | 图片占位页                                   |
+| `knowledge-detail/library/image/`                                                     | 图片列表，复用文档操作                       |
 | `knowledge-detail/recall-test/`、`question/`                                          | 检索优化占位页                               |
 | `knowledge-detail/termbase/`                                                          | 知识库自定义分词维护                         |
 | `knowledge-detail/chat-user/`、`external-retrieval/`                                  | 对话授权与外部检索配置                       |
@@ -100,7 +100,7 @@
 
 `knowledge-detail/context.ts` 仅通过 `provideKnowledgeDetailContext` 和
 `useKnowledgeDetailContext` 公开详情、更新能力、ID、来源导航及完整 API。
-`resourceApi.knowledge / scheduledSync / document / tags / termbase / chatUser / externalRetrieval` 按当前范围响应式读取，无需 `.value`，
+`resourceApi.knowledge / scheduledSync / document / image / tags / termbase / chatUser / externalRetrieval` 按当前范围响应式读取，无需 `.value`，
 不要在 setup 时解构具体 API。`workflow` 当前仅普通 Workspace 提供，其他范围不回退。
 共有查询方法必填，部分范围缺失的方法可选调用；未发请求时不提示成功、不关闭、不刷新或修改快照，loading 正常清理。
 不增加查询／维护双入口、接口别名或专属 Context hook，也不以方法存在性新增操作显隐规则。
@@ -130,6 +130,16 @@
 ### 文档列表与导入
 
 `library/document/index.vue` 管理查询、分页、选择、启停及刷新；Action 管理各自请求和浮层。
+`library/image/index.vue` 使用独立列表入口，复用 `document/` 的状态、展示组件及 Action，
+查询与操作沿用 Document API；图片列表的查询参数差异见 [API 文档](../api/API_README.md#文档与分段)。
+图片上传独立放在 `image/upload-image/`，`ButtonUploadImage` 管理入口与按需挂载，
+`UploadImageDrawer` 分为上传图片、图片处理两步，复用 `MkDragUpload` 的多文件图片模式暂存文件；
+`ImageProcessingForm` 管理视觉增强策略及模型／工具选项，不展示文档分段与索引设置。
+生成预览时按当前策略提交原图，预览直接展示生成接口返回的数据，不单独查询或轮询。
+开始导入以 `previewVisible` 区分：已预览提交生成结果的预览 ID，未预览校验处理策略后直接提交上传成功的图片 ID，
+不自动请求生成预览；成功通知列表刷新，失败保留文件和策略供重试。
+图片上传入口接收 `resourceApi.image`；Workspace 和 System 资源管理提供生成预览及批量添加，
+共享范围不回退到 Workspace。
 类型统一读取路由 `type`，使用 `KNOWLEDGE_TYPE_KEY`，不逐层传递类型 Prop。
 挂载时查询并启动 6 秒轮询，请求结束后安排下一次；静默刷新保留筛选、页码和当前页选择，
 操作中推迟轮询，卸载后停止。创建者选项打开或远程搜索时加载，不在页面进入时预查。
@@ -154,6 +164,10 @@
 通用上传由 `upload-document/` 管理，Web／飞书／工作流导入由 `import-document/` 管理独立 Drawer。
 复用 `MkDragUpload` 和 `DocumentStrategyForm`，传完整 Document API；使用成功文件 ID，不二次上传。
 文本直接导入提交文件 ID 与策略；生成预览才请求 split，预览可本地编辑／删除，最终创建使用编辑后结果。
+`document/components/DocumentImportPreview.vue` 提供文档与图片导入的左右预览布局；
+组件统一使用 DocumentSplitResult 的文档列表与分段页面，不按图片类型区分展示。
+图片生成结果直接传入预览组件，正文按接口返回的 content 展示，不转换或拼接；图片导入仍提交原始预览 ID，
+预览内本地编辑不会写回图片生成结果。文档分段编辑与删除保留原有行为。
 预览编辑复用 `ParagraphForm`、`ParagraphQuestions`，不传已有分段 ID，不即时写入问题关联。
 表格／QA 支持模板下载；飞书懒加载仅展开时查子目录，已导入项不可取消，不在前端递归展开文件夹。
 工作流导入执行已发布版本，复用知识库调试的 DataSource、KnowledgeBase、Result 三步流程。
diff --git a/ui/src/views/knowledge-detail/context.ts b/ui/src/views/knowledge-detail/context.ts
index 9bd6c047b69..e584f7cdd79 100644
--- a/ui/src/views/knowledge-detail/context.ts
+++ b/ui/src/views/knowledge-detail/context.ts
@@ -7,6 +7,8 @@ import KnowledgeApi from '@/api/admin/workspace/knowledge/knowledge'
 import SharedKnowledgeApi from '@/api/admin/workspace/shared/knowledge/knowledge'
 import SystemResourceKnowledgeApi from '@/api/admin/system/resource-management/knowledge/knowledge'
 import SystemSharedKnowledgeApi from '@/api/admin/system/shared-resources/knowledge/knowledge'
+import ImageApi from '@/api/admin/workspace/knowledge/image'
+import SystemResourceImageApi from '@/api/admin/system/resource-management/knowledge/image'
 import DocumentApi from '@/api/admin/workspace/knowledge/document'
 import SharedDocumentApi from '@/api/admin/workspace/shared/knowledge/document'
 import SystemResourceDocumentApi from '@/api/admin/system/resource-management/knowledge/document'
@@ -45,6 +47,7 @@ interface KnowledgeResourceApi {
   readonly chatUser: OptionalApiMethods<
     typeof ChatUserApi | typeof SharedChatUserApi | typeof SystemResourceChatUserApi | typeof SystemSharedChatUserApi
   >
+  readonly image?: OptionalApiMethods<typeof ImageApi | typeof SystemResourceImageApi>
   readonly workflow?: typeof WorkflowApi
   readonly document: OptionalApiMethods<
     typeof DocumentApi | typeof SharedDocumentApi | typeof SystemResourceDocumentApi | typeof SystemSharedDocumentApi
@@ -79,6 +82,7 @@ const resourceConfigs = {
       scheduledSync: ScheduledSyncApi,
       externalRetrieval: ExternalRetrievalApi,
       document: DocumentApi,
+      image: ImageApi,
       tags: TagsApi,
       termbase: TermbaseApi,
       workflow: WorkflowApi,
@@ -104,6 +108,7 @@ const resourceConfigs = {
       scheduledSync: SystemResourceScheduledSyncApi,
       externalRetrieval: SystemResourceExternalRetrievalApi,
       document: SystemResourceDocumentApi,
+      image: SystemResourceImageApi,
       tags: SystemResourceTagsApi,
       termbase: SystemResourceTermbaseApi,
     },
@@ -152,6 +157,9 @@ function createKnowledgeDetailContext(state: KnowledgeDetailState): KnowledgeDet
     get workflow() {
       return resourceConfig.value.resourceApi.workflow
     },
+    get image() {
+      return resourceConfig.value.resourceApi.image
+    },
     get document() {
       return resourceConfig.value.resourceApi.document
     },
@@ -215,7 +223,8 @@ type ScopedResourceApi<Scope extends ResourceScope> = {
 }
 
 type ScopedKnowledgeDetailContext<Scope extends ResourceScope> = Omit<KnowledgeDetailContext, 'resourceApi'> & {
-  resourceApi: Omit<ScopedResourceApi<Scope>, 'scheduledSync' | 'tags' | 'termbase' | 'document' | 'chatUser' | 'externalRetrieval'> & {
+  resourceApi: Omit<ScopedResourceApi<Scope>, 'scheduledSync' | 'tags' | 'termbase' | 'document' | 'chatUser' | 'externalRetrieval' | 'image'> & {
+    readonly image: KnowledgeResourceApi['image']
     readonly chatUser: OptionalApiMethods<(typeof resourceConfigs)[Scope]['resourceApi']['chatUser']>
     readonly scheduledSync: OptionalApiMethods<(typeof resourceConfigs)[Scope]['resourceApi']['scheduledSync']>
     readonly tags: OptionalApiMethods<(typeof resourceConfigs)[Scope]['resourceApi']['tags']>
diff --git a/ui/src/views/knowledge-detail/library/document/upload-document/DocumentImportPreview.vue b/ui/src/views/knowledge-detail/library/document/components/DocumentImportPreview.vue
similarity index 98%
rename from ui/src/views/knowledge-detail/library/document/upload-document/DocumentImportPreview.vue
rename to ui/src/views/knowledge-detail/library/document/components/DocumentImportPreview.vue
index cb688ab60c8..595aa71cf17 100644
--- a/ui/src/views/knowledge-detail/library/document/upload-document/DocumentImportPreview.vue
+++ b/ui/src/views/knowledge-detail/library/document/components/DocumentImportPreview.vue
@@ -3,7 +3,7 @@ import { computed, nextTick, ref } from 'vue'
 import type { DocumentImportParagraph, DocumentSplitResult } from '@/api/types'
 import { getFileIconUrl } from '@/utils/icon'
 import { MsgWarning } from '@/utils/message'
-import EditParagraphDialog from './EditParagraphDialog.vue'
+import EditParagraphDialog from '../upload-document/EditParagraphDialog.vue'
 
 defineOptions({ name: 'DocumentImportPreview' })
 defineProps<{ knowledgeId: string }>()
diff --git a/ui/src/views/knowledge-detail/library/document/index.vue b/ui/src/views/knowledge-detail/library/document/index.vue
index 2f373c2a14a..b4fc8bfcdc0 100644
--- a/ui/src/views/knowledge-detail/library/document/index.vue
+++ b/ui/src/views/knowledge-detail/library/document/index.vue
@@ -14,7 +14,7 @@ import { DOCUMENT_STATUS_FILTER_OPTIONS } from './status'
 import type { Dict, DocumentHitHandling, DocumentItem, OptionItem } from '@/api/types'
 import { datetimeFormat } from '@/utils/time'
 import { numberFormat } from '@/utils/number'
-import { MsgSuccess } from '@/utils/message'
+import { MsgSuccess, MsgWarning } from '@/utils/message'
 import { getFileIconUrl } from '@/utils/icon'
 import { isWorkspaceResource, isWorkspaceSharedResource } from '@/utils/resource-context'
 import ButtonUploadDocument from './upload-document/ButtonUploadDocument.vue'
@@ -65,11 +65,37 @@ function handleOpenParagraph(document: DocumentItem, column?: TableColumnCtx<Doc
   })
 }
 
+/* 文档名称编辑 */
+function validateDocumentName(name: string): string | undefined {
+  if (/[:\\/?*\[\]]/.test(name)) {
+    return '文件名称不能包含以下特殊字符：: \\ / ? * [ ]'
+  }
+}
+
+function saveDocumentName(documentId: string, name: string): Promise<string> {
+  return (
+    resourceApi.document.putDocument?.(knowledgeId.value, documentId, { name }).then((document) => {
+      // 轮询可能已替换行对象，按 ID 更新当前列表中的名称与更新时间。
+      const currentDocument = documentData.value.find(({ id }) => id === documentId)
+      if (currentDocument) {
+        currentDocument.name = document.name
+        currentDocument.update_time = document.update_time
+      }
+      return document.name
+    }) ?? Promise.resolve(documentData.value.find(({ id }) => id === documentId)?.name ?? '')
+  )
+}
+
 /* 快速创建 */
 const showQuickCreate = computed(() => knowledgeType.value === KNOWLEDGE_TYPE_KEY.BASE)
 const quickCreateRef = ref<InstanceType<typeof MkQuickCreate>>()
 
 function handleCreateDocument(name: string) {
+  const validationMessage = validateDocumentName(name)
+  if (validationMessage) {
+    MsgWarning(validationMessage)
+    return
+  }
   loading.value = true
   return (
     resourceApi.document
@@ -90,27 +116,6 @@ function handleCreateDocument(name: string) {
   })
 }
 
-/* 文档名称编辑 */
-function validateDocumentName(name: string): string | undefined {
-  if (/[:\\/?*\[\]]/.test(name)) {
-    return '文件名称不能包含以下特殊字符：: \\ / ? * [ ]'
-  }
-}
-
-function saveDocumentName(documentId: string, name: string): Promise<string> {
-  return (
-    resourceApi.document.putDocument?.(knowledgeId.value, documentId, { name }).then((document) => {
-      // 轮询可能已替换行对象，按 ID 更新当前列表中的名称与更新时间。
-      const currentDocument = documentData.value.find(({ id }) => id === documentId)
-      if (currentDocument) {
-        currentDocument.name = document.name
-        currentDocument.update_time = document.update_time
-      }
-      return document.name
-    }) ?? Promise.resolve(documentData.value.find(({ id }) => id === documentId)?.name ?? '')
-  )
-}
-
 /* 文档筛选与分页查询 */
 const loading = ref(false)
 const documentData = ref<DocumentItem[]>([])
@@ -335,7 +340,6 @@ onBeforeUnmount(() => {
     v-loading="loading || operationLoading"
     :data="documentData"
     v-model:pagination-config="paginationConfig"
-    :max-table-height="240"
     @current-change="loadDocuments()"
     @size-change="loadDocuments()"
     @selection-change="handleSelectionChange"
diff --git a/ui/src/views/knowledge-detail/library/document/upload-document/UploadDocumentDrawer.vue b/ui/src/views/knowledge-detail/library/document/upload-document/UploadDocumentDrawer.vue
index 6e2916a24f0..359ae3089f3 100644
--- a/ui/src/views/knowledge-detail/library/document/upload-document/UploadDocumentDrawer.vue
+++ b/ui/src/views/knowledge-detail/library/document/upload-document/UploadDocumentDrawer.vue
@@ -6,7 +6,7 @@ import type { DragUploadFile, DragUploadHandler } from '@/components/mk-drag-upl
 import { getUploadValidationMessage } from '@/components/mk-drag-upload/validation'
 import type { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
 import type { DocumentSplitResult } from '@/api/types'
-import DocumentImportPreview from './DocumentImportPreview.vue'
+import DocumentImportPreview from '../components/DocumentImportPreview.vue'
 import DocumentStrategyForm from '@/views/knowledge/create-knowledge/components/DocumentStrategyForm.vue'
 import MkDragUpload from '@/components/mk-drag-upload/index.vue'
 import { MsgSuccess, MsgWarning } from '@/utils/message'
@@ -97,54 +97,42 @@ function handlePrevious() {
 }
 
 /* 文档导入 */
-function handleSubmit() {
-  if (!validateImportFiles()) return
-  if (previewVisible.value && !previewRef.value?.validate()) return
+async function handleSubmit() {
+  if (!validateImportFiles() || (previewVisible.value && !previewRef.value?.validate())) return
   const fileIds = successfulFiles.value.flatMap((file) => (file.file_id ? [file.file_id] : []))
   if (!previewVisible.value && fileIds.length !== successfulFiles.value.length) {
-    MsgWarning('文件上传结果缺少文件 ID，请重新上传')
+    MsgWarning('没有上传成功的文件，请重新上传')
     return
   }
+
   loading.value = true
-  let importRequest: Promise<boolean | undefined> | undefined
-  if (props.mode === 'table') {
-    // 复用已上传表格，由服务端解析并创建文档。
-    importRequest = props.api.postImportTableDocumentsByFileIds?.(props.knowledgeId, fileIds).then(() => true)
-  } else if (props.mode === 'qa') {
-    // 复用已上传 QA 文件，由服务端解析并创建文档。
-    importRequest = props.api.postImportQADocumentsByFileIds?.(props.knowledgeId, fileIds).then(() => true)
-  } else if (previewVisible.value) {
-    if (previewDocuments.value.every((document) => !document.content.length)) {
-      MsgWarning('没有可导入的分段，请重新生成预览')
-      loading.value = false
-      return
-    }
-    importRequest = props.api
-      .putBatchCreateDocuments?.(
+  try {
+    let importRequest: Promise<unknown> | undefined
+    if (props.mode === 'table') {
+      importRequest = props.api.postImportTableDocumentsByFileIds?.(props.knowledgeId, fileIds)
+    } else if (props.mode === 'qa') {
+      importRequest = props.api.postImportQADocumentsByFileIds?.(props.knowledgeId, fileIds)
+    } else if (previewVisible.value) {
+      importRequest = props.api.putBatchCreateDocuments?.(
         props.knowledgeId,
         previewDocuments.value.map(({ content, ...document }) => ({ ...document, paragraphs: content })),
       )
-      .then(() => true)
-  } else {
-    // 文本校验处理策略，由单次请求在服务端完成解析与入库。
-    importRequest = Promise.resolve(strategyRef.value?.validate()).then((valid) => {
-      if (!valid || !strategyRef.value) return false
-      return props.api.postImportTextDocuments?.(props.knowledgeId, fileIds, strategyRef.value.getStrategy()).then(() => true)
-    })
+    } else {
+      const valid = await strategyRef.value?.validate()
+      if (!valid || !strategyRef.value) return
+      importRequest = props.api.postImportTextDocuments?.(props.knowledgeId, fileIds, strategyRef.value.getStrategy())
+    }
+    // 当前范围未提供接口时不提示成功，也不关闭或刷新。
+    if (!importRequest) return
+    await importRequest
+    MsgSuccess('导入成功')
+    visible.value = false
+    emit('refresh')
+  } catch {
+    // 请求层统一提示错误，失败保留文件与策略供重试。
+  } finally {
+    loading.value = false
   }
-  return (importRequest ?? Promise.resolve())
-    .then((success) => {
-      if (!success) return
-      MsgSuccess('导入成功')
-      visible.value = false
-      emit('refresh')
-    })
-    .catch(() => {
-      // 请求层统一提示错误，失败保留文件与策略供重试。
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
 defineExpose({ open })
diff --git a/ui/src/views/knowledge-detail/library/image/index.vue b/ui/src/views/knowledge-detail/library/image/index.vue
index f6a0efeae82..f5a48289824 100644
--- a/ui/src/views/knowledge-detail/library/image/index.vue
+++ b/ui/src/views/knowledge-detail/library/image/index.vue
@@ -1,10 +1,579 @@
 <script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { CascaderOption, TableColumnCtx } from 'element-plus'
+import MkEditName from '@/components/mk-edit-name/index.vue'
 import type { ResourceDetailPageProps } from '@/layout/ResourceDetailLayout.vue'
-defineOptions({ name: 'ImageListView' })
+import CommonApi from '@/api/admin/workspace/common'
+import CommonSystemApi from '@/api/admin/system/common'
+import { DOCUMENT_TASK_TYPE } from '@/api/enums'
+import { DOCUMENT_HIT_HANDLING_LABELS } from '@/constants/document'
+import { DOCUMENT_STATUS_FILTER_OPTIONS } from '../document/status'
+import type { Dict, DocumentHitHandling, DocumentItem, OptionItem } from '@/api/types'
+import { datetimeFormat } from '@/utils/time'
+import { numberFormat } from '@/utils/number'
+import { MsgSuccess } from '@/utils/message'
+import { isWorkspaceResource, isWorkspaceSharedResource } from '@/utils/resource-context'
+import ButtonUploadImage from './upload-image/ButtonUploadImage.vue'
+import { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
+import DocumentStatus from '../document/components/DocumentStatus.vue'
+import DocumentTags from '../document/components/DocumentTags.vue'
+import {
+  BatchEmbeddingAction,
+  BatchCancelTaskAction,
+  DeleteDocumentAction,
+  DocumentTagsAction,
+  BatchDocumentTagsAction,
+  EmbeddingDocumentAction,
+  GenerateQuestionsAction,
+  BatchGenerateQuestionsAction,
+  DownloadDocumentAction,
+  MigrateDocumentAction,
+  SettingDocumentAction,
+  BatchSettingDocumentAction,
+  TokenizeDocumentAction,
+  BatchTokenizeAction,
+} from '../document/action-dropdown'
 
+defineOptions({ name: 'ImageListView' })
 defineProps<ResourceDetailPageProps>()
+defineExpose({ customHeader: true })
+
+const route = useRoute()
+const knowledgeId = computed(() => String(route.params.knowledgeId ?? ''))
+const { knowledge, resourceApi } = useKnowledgeDetailContext()
+
+/* 文档分段入口：选择列与行内操作继续处理自身交互。 */
+function handleOpenParagraph(document: DocumentItem, column?: TableColumnCtx<DocumentItem> | null) {
+  if (loading.value || operationLoading.value || column?.type === 'selection') return
+  // void router.push({
+  //   name: routeNames.value.paragraph,
+  //   params: { ...routeParams.value, type: knowledgeType.value, documentId: document.id },
+  //   query: route.query,
+  // })
+}
+
+/* 文档名称编辑 */
+function validateDocumentName(name: string): string | undefined {
+  if (/[:\\/?*\[\]]/.test(name)) {
+    return '文件名称不能包含以下特殊字符：: \\ / ? * [ ]'
+  }
+}
+
+function saveDocumentName(documentId: string, name: string): Promise<string> {
+  return (
+    resourceApi.document.putDocument?.(knowledgeId.value, documentId, { name }).then((document) => {
+      // 轮询可能已替换行对象，按 ID 更新当前列表中的名称与更新时间。
+      const currentDocument = documentData.value.find(({ id }) => id === documentId)
+      if (currentDocument) {
+        currentDocument.name = document.name
+        currentDocument.update_time = document.update_time
+      }
+      return document.name
+    }) ?? Promise.resolve(documentData.value.find(({ id }) => id === documentId)?.name ?? '')
+  )
+}
+
+/* 文档筛选与分页查询 */
+const loading = ref(false)
+const documentData = ref<DocumentItem[]>([])
+const paginationConfig = ref({ currentPage: 1, pageSize: 20, total: 0 })
+const documentQuery = ref<Dict<unknown>>({})
+const creatorOptions = ref<OptionItem<string>[]>([])
+const searchFields = computed(() => [
+  { label: '名称', value: 'name' },
+  { label: '创建者', value: 'create_user', options: creatorOptions.value, remoteMethod: loadCreatorOptions },
+])
+
+function loadCreatorOptions(keyword: string) {
+  const requestCommonApi = isWorkspaceResource() ? CommonApi : CommonSystemApi
+  return requestCommonApi.getAllUsers(keyword ? { nick_name: keyword } : undefined).then((users) => {
+    creatorOptions.value = users.map(({ id, nick_name }) => ({ label: nick_name, value: id }))
+  })
+}
+
+/* 过滤项 */
+// 文档状态
+const selectedDocumentStatus = ref<string | null>(null)
+const documentStatusFilter = computed(() => DOCUMENT_STATUS_FILTER_OPTIONS.find(({ value }) => value === selectedDocumentStatus.value))
+
+// 启用状态
+const documentActiveOptions = [
+  { label: '已启用', value: true },
+  { label: '已禁用', value: false },
+]
+const selectedDocumentActive = ref<boolean | null>(null)
+
+// 召回处理
+const documentHitHandlingOptions = Object.entries(DOCUMENT_HIT_HANDLING_LABELS).map(([value, label]) => ({ value, label }))
+const selectedDocumentHitHandling = ref<DocumentHitHandling | null>(null)
+
+// 标签
+const selectedDocumentTags = ref<string[]>([])
+const documentTagOptions = ref<CascaderOption[]>([])
+const documentTagLoading = ref(false)
+
+function loadDocumentTagOptions() {
+  if (documentTagLoading.value) return
+  documentTagLoading.value = true
+  return resourceApi.tags
+    .getKnowledgeTags(knowledgeId.value)
+    .then((groups) => {
+      documentTagOptions.value = [
+        ...groups.map((group) => ({
+          label: group.key,
+          value: `key:${group.key}`,
+          children: group.values.map((tag) => ({ label: tag.value, value: tag.id })),
+        })),
+        { label: '无标签', value: 'NO_TAG' },
+      ]
+    })
+    .finally(() => {
+      documentTagLoading.value = false
+    })
+}
+
+function handleDocumentFilterChange() {
+  clearDocumentSelection()
+  paginationConfig.value.currentPage = 1
+  return loadDocuments()
+}
+
+/* 文档列表轮询：后台刷新保留筛选、分页和选择。 */
+let pollingTimer: ReturnType<typeof setTimeout> | undefined
+let pollingActive = false
+
+function stopPolling() {
+  clearTimeout(pollingTimer)
+  pollingTimer = undefined
+}
+
+function schedulePolling() {
+  stopPolling()
+  if (!pollingActive) return
+  pollingTimer = setTimeout(() => {
+    if (loading.value || operationLoading.value) {
+      schedulePolling()
+      return
+    }
+    void loadDocuments(false).catch(() => {
+      // 请求层统一提示错误，失败后仍由 finally 安排下一次轮询。
+    })
+  }, 6000)
+}
+
+// 图片列表通过 resource_type: 'image' 区分，其余查询参数及响应结构与文本文档一致。
+function loadDocuments(showLoading = true): Promise<void> {
+  stopPolling()
+  if (showLoading) loading.value = true
+  return resourceApi.document
+    .getDocumentPage(knowledgeId.value, paginationConfig.value, {
+      resource_type: 'image',
+      ...documentQuery.value,
+      status: documentStatusFilter.value?.status,
+      task_type: documentStatusFilter.value?.task_type,
+      is_active: selectedDocumentActive.value ?? undefined,
+      hit_handling_method: selectedDocumentHitHandling.value ?? undefined,
+      tags: selectedDocumentTags.value.length ? selectedDocumentTags.value : undefined,
+    })
+    .then((page) => {
+      if (!pollingActive) return
+      documentData.value = page.records
+      paginationConfig.value.total = page.total
+      // 删除或迁移最后一页文档后，回到仍有数据的最后一页。
+      const lastPage = Math.max(1, Math.ceil(page.total / paginationConfig.value.pageSize))
+      if (paginationConfig.value.currentPage > lastPage) {
+        clearDocumentSelection()
+        paginationConfig.value.currentPage = lastPage
+        return loadDocuments(showLoading)
+      }
+    })
+    .finally(() => {
+      if (showLoading) loading.value = false
+      schedulePolling()
+    })
+}
+
+function handleSearchChange(query?: Dict<unknown>) {
+  clearDocumentSelection()
+  documentQuery.value = query ?? {}
+  paginationConfig.value.currentPage = 1
+  return loadDocuments()
+}
+
+/* 批量操作 */
+const documentTableRef = ref<{ clearSelection: () => void }>()
+const selectedDocuments = ref<DocumentItem[]>([])
+const selectedDocumentIds = computed(() => selectedDocuments.value.map(({ id }) => id))
+
+function handleSelectionChange(documents: unknown[]) {
+  selectedDocuments.value = documents as DocumentItem[]
+}
+
+function clearDocumentSelection() {
+  documentTableRef.value?.clearSelection()
+  selectedDocuments.value = []
+}
+
+/* 单项与批量文档操作 */
+// 共用操作状态，防止重复提交。
+const operationLoading = ref(false)
+
+// 文档启停由服务端结果与列表刷新回显，避免开关提前修改状态。
+function handleChangeActive(document: DocumentItem) {
+  operationLoading.value = true
+  return (
+    resourceApi.document
+      .putDocument?.(knowledgeId.value, document.id, { is_active: !document.is_active })
+      .then(() => {
+        MsgSuccess('操作成功')
+        return refreshAfterOperation().then(() => false)
+      })
+      .catch(() => false) ?? Promise.resolve(false)
+  ).finally(() => {
+    operationLoading.value = false
+  })
+}
+
+// 操作成功后清空勾选并刷新文档列表。
+function refreshAfterOperation() {
+  // 清空勾选会卸载批量 Action，先释放操作状态，避免其 finally 无法回写 loading。
+  operationLoading.value = false
+  clearDocumentSelection()
+  return loadDocuments()
+}
+
+onMounted(() => {
+  pollingActive = true
+  void loadDocuments().catch(() => {})
+})
+
+onBeforeUnmount(() => {
+  pollingActive = false
+  stopPolling()
+})
 </script>
 
 <template>
-  <div class="flex-center min-h-0 flex-1 text-N500">图片功能待接入</div>
+  <Teleport v-if="headerTarget" :to="headerTarget">
+    <div class="flex-between w-full gap-4">
+      <h4>{{ title }}</h4>
+      <div class="flex-align-center gap-3">
+        <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
+
+        <template v-if="!isWorkspaceSharedResource()">
+          <!-- 上传图片 -->
+          <ButtonUploadImage
+            :api="resourceApi.image"
+            :knowledge-id="knowledgeId"
+            :file-count-limit="knowledge?.file_count_limit"
+            :file-size-limit="knowledge?.file_size_limit"
+            @refresh="handleSearchChange()"
+          />
+        </template>
+      </div>
+    </div>
+  </Teleport>
+  <MkTable
+    ref="documentTableRef"
+    v-loading="loading || operationLoading"
+    :data="documentData"
+    v-model:pagination-config="paginationConfig"
+    @current-change="loadDocuments()"
+    @size-change="loadDocuments()"
+    @selection-change="handleSelectionChange"
+    @row-click="handleOpenParagraph"
+    row-class-name="cursor-pointer"
+    resizable
+  >
+    <el-table-column type="selection" width="40" reserve-selection v-if="!isWorkspaceSharedResource()" />
+
+    <el-table-column prop="name" label="图片名称" min-width="220" show-overflow-tooltip>
+      <template #default="{ row }: { row: DocumentItem }">
+        <!-- 编辑文档名称 -->
+        <MkEditName
+          :key="row.id"
+          v-model="row.name"
+          :maxlength="128"
+          :validate="validateDocumentName"
+          :save="(name) => saveDocumentName(row.id, name)"
+          :disabled="isWorkspaceSharedResource()"
+        >
+          <template #prefix>
+            <!-- 图片 -->
+            <!-- <el-image :src="file.url || file.previewUrl" :alt="file.name" :title="file.name" fit="cover" /> -->
+          </template>
+        </MkEditName>
+      </template>
+    </el-table-column>
+
+    <el-table-column width="140">
+      <template #header>
+        <MkTableFilter
+          v-model="selectedDocumentStatus"
+          mode="single"
+          label="文件状态"
+          :options="DOCUMENT_STATUS_FILTER_OPTIONS"
+          @change="handleDocumentFilterChange"
+        />
+      </template>
+      <template #default="{ row }: { row: DocumentItem }">
+        <DocumentStatus :status="row.status" :status-meta="row.status_meta" />
+      </template>
+    </el-table-column>
+    <el-table-column width="120">
+      <template #header>
+        <MkTableFilter
+          v-model="selectedDocumentActive"
+          mode="single"
+          label="启用状态"
+          :options="documentActiveOptions"
+          @change="handleDocumentFilterChange"
+        />
+      </template>
+      <template #default="{ row }"><MkStatusLabel :active="row.is_active" /></template>
+    </el-table-column>
+    <el-table-column prop="char_length" label="字符数">
+      <template #default="{ row }">
+        {{ numberFormat(row.char_length) }}
+      </template>
+    </el-table-column>
+    <!-- 标签 -->
+    <el-table-column min-width="150">
+      <template #header>
+        <MkTableFilter
+          v-model="selectedDocumentTags"
+          mode="cascader"
+          label="标签"
+          :options="documentTagOptions"
+          @open="loadDocumentTagOptions"
+          @change="handleDocumentFilterChange"
+        />
+      </template>
+      <template #default="{ row }: { row: DocumentItem }">
+        <!-- 标签快捷操作 -->
+        <DocumentTags
+          :api="resourceApi.tags"
+          :knowledge-id="knowledgeId"
+          :document="row"
+          v-model:loading="operationLoading"
+          @refresh="refreshAfterOperation"
+          :disabled="isWorkspaceSharedResource()"
+        />
+      </template>
+    </el-table-column>
+
+    <el-table-column width="130">
+      <template #header>
+        <MkTableFilter
+          v-model="selectedDocumentHitHandling"
+          mode="single"
+          label="召回处理"
+          :options="documentHitHandlingOptions"
+          @change="handleDocumentFilterChange"
+        />
+      </template>
+      <template #default="{ row }: { row: DocumentItem }">
+        {{ DOCUMENT_HIT_HANDLING_LABELS[row.hit_handling_method] }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="hit_num" label="召回次数">
+      <template #default="{ row }">
+        {{ numberFormat(row.hit_num) }}
+      </template>
+    </el-table-column>
+    <el-table-column label="最后一次召回时间" width="180">
+      <template #default="{ row }">{{ datetimeFormat(row.last_hit_time) }}</template>
+    </el-table-column>
+    <el-table-column prop="nick_name" label="创建者" show-overflow-tooltip />
+    <el-table-column label="更新时间" width="180">
+      <template #default="{ row }">{{ datetimeFormat(row.update_time) }}</template>
+    </el-table-column>
+    <el-table-column label="创建时间" width="180">
+      <template #default="{ row }">{{ datetimeFormat(row.create_time) }}</template>
+    </el-table-column>
+    <el-table-column label="操作" width="160" fixed="right" v-if="!isWorkspaceSharedResource()">
+      <template #default="{ row }: { row: DocumentItem }">
+        <div class="flex-align-center" @click.stop>
+          <!-- 启用或禁用文档 -->
+          <el-switch :model-value="row.is_active" size="small" :disabled="operationLoading" :before-change="() => handleChangeActive(row)" />
+
+          <el-divider direction="vertical" class="ml-3! mr-2!" />
+
+          <div class="flex">
+            <!-- 向量化或取消向量化 -->
+            <EmbeddingDocumentAction
+              :api="resourceApi.document"
+              :knowledge-id="knowledgeId"
+              :document="row"
+              v-model:loading="operationLoading"
+              @refresh="refreshAfterOperation"
+            />
+            <!-- 分词索引或取消分词索引 -->
+            <TokenizeDocumentAction
+              :api="resourceApi.document"
+              :knowledge-id="knowledgeId"
+              v-model:loading="operationLoading"
+              :document="row"
+              @refresh="refreshAfterOperation"
+            />
+            <!-- 更多文档操作 -->
+            <MkTableMoreDropdown>
+              <!-- 生成或取消生成问题 -->
+              <GenerateQuestionsAction
+                :api="resourceApi.document"
+                v-model:loading="operationLoading"
+                :knowledge-id="knowledgeId"
+                :document="row"
+                @refresh="refreshAfterOperation"
+              />
+              <!-- 设置当前文档的标签 -->
+              <DocumentTagsAction
+                label="标签设置"
+                icon="icon_tag"
+                :api="resourceApi.tags"
+                :knowledge-id="knowledgeId"
+                :document="row"
+                v-model:loading="operationLoading"
+                @refresh="refreshAfterOperation"
+              />
+
+              <!-- 文档设置 -->
+              <SettingDocumentAction
+                label="设置"
+                icon="icon_setting"
+                :api="resourceApi.document"
+                :knowledge-id="knowledgeId"
+                :document="row"
+                v-model:loading="operationLoading"
+                @refresh="refreshAfterOperation"
+              />
+
+              <!-- 迁移文档 -->
+              <MigrateDocumentAction
+                label="迁移"
+                icon="icon_move2_outlined"
+                :api="resourceApi.document"
+                :knowledge-id="knowledgeId"
+                :document-ids="[row.id]"
+                :disabled="operationLoading"
+                @refresh="refreshAfterOperation"
+              />
+
+              <!-- 下载原文档 -->
+              <DownloadDocumentAction :api="resourceApi.document" :knowledge-id="knowledgeId" v-model:loading="operationLoading" :document="row" />
+
+              <!-- 删除文档 -->
+              <DeleteDocumentAction
+                divided
+                icon="icon_delete-trash_outlined"
+                :api="resourceApi.document"
+                :knowledge-id="knowledgeId"
+                v-model:loading="operationLoading"
+                :document="row"
+                @refresh="refreshAfterOperation"
+              />
+            </MkTableMoreDropdown>
+          </div>
+        </div>
+      </template>
+    </el-table-column>
+    <template #footer-batch-actions>
+      <!-- 批量向量化 -->
+      <BatchEmbeddingAction
+        :api="resourceApi.document"
+        :knowledge-id="knowledgeId"
+        :document-ids="selectedDocumentIds"
+        v-model:loading="operationLoading"
+        @refresh="refreshAfterOperation"
+      />
+      <!-- 批量分词索引 -->
+      <BatchTokenizeAction
+        :api="resourceApi.document"
+        :knowledge-id="knowledgeId"
+        v-model:loading="operationLoading"
+        :document-ids="selectedDocumentIds"
+        @refresh="refreshAfterOperation"
+      />
+      <!-- 批量生成问题 -->
+      <BatchGenerateQuestionsAction
+        :api="resourceApi.document"
+        v-model:loading="operationLoading"
+        :knowledge-id="knowledgeId"
+        :document-ids="selectedDocumentIds"
+        :disabled="operationLoading"
+        @refresh="refreshAfterOperation"
+      />
+      <!-- 批量文档设置 -->
+      <BatchSettingDocumentAction
+        label="设置"
+        :api="resourceApi.document"
+        :knowledge-id="knowledgeId"
+        :document-ids="selectedDocumentIds"
+        v-model:loading="operationLoading"
+        @refresh="refreshAfterOperation"
+      />
+      <!-- 为选中文档批量添加标签 -->
+      <BatchDocumentTagsAction
+        label="标签设置"
+        :api="resourceApi.tags"
+        :knowledge-id="knowledgeId"
+        :document-ids="selectedDocumentIds"
+        v-model:loading="operationLoading"
+        @refresh="refreshAfterOperation"
+      />
+
+      <!-- 更多批量操作 -->
+      <MkDropdown class="ml-3" trigger="click" placement="bottom-end" hide-when-empty persistent>
+        <!-- 展开更多批量操作 -->
+        <el-button plain type="primary" class="min-w-0! w-8!">
+          <MkIcon name="icon_more_outlined" />
+        </el-button>
+        <template #dropdown>
+          <MkDropdownMenu>
+            <!-- 批量迁移文档 -->
+            <MigrateDocumentAction
+              label="迁移至"
+              :api="resourceApi.document"
+              :knowledge-id="knowledgeId"
+              :document-ids="selectedDocumentIds"
+              :disabled="operationLoading"
+              @refresh="refreshAfterOperation"
+            />
+
+            <!-- 批量取消向量化 -->
+            <BatchCancelTaskAction
+              :api="resourceApi.document"
+              :knowledge-id="knowledgeId"
+              v-model:loading="operationLoading"
+              :document-ids="selectedDocumentIds"
+              :task-type="DOCUMENT_TASK_TYPE.EMBEDDING"
+              label="取消向量化"
+              divided
+              @refresh="refreshAfterOperation"
+            />
+            <!-- 批量取消生成问题 -->
+            <BatchCancelTaskAction
+              :api="resourceApi.document"
+              :knowledge-id="knowledgeId"
+              v-model:loading="operationLoading"
+              :document-ids="selectedDocumentIds"
+              :task-type="DOCUMENT_TASK_TYPE.GENERATE_PROBLEM"
+              label="取消生成"
+              @refresh="refreshAfterOperation"
+            />
+            <!-- 批量删除文档 -->
+            <DeleteDocumentAction
+              :api="resourceApi.document"
+              :knowledge-id="knowledgeId"
+              v-model:loading="operationLoading"
+              :document-ids="selectedDocumentIds"
+              batch
+              @refresh="refreshAfterOperation"
+            />
+          </MkDropdownMenu>
+        </template>
+      </MkDropdown>
+    </template>
+  </MkTable>
 </template>
diff --git a/ui/src/views/knowledge-detail/library/image/upload-image/ButtonUploadImage.vue b/ui/src/views/knowledge-detail/library/image/upload-image/ButtonUploadImage.vue
new file mode 100644
index 00000000000..899ddf77aed
--- /dev/null
+++ b/ui/src/views/knowledge-detail/library/image/upload-image/ButtonUploadImage.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { nextTick, ref, useTemplateRef } from 'vue'
+import UploadImageDrawer from './UploadImageDrawer.vue'
+import type { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
+
+defineOptions({ name: 'ButtonUploadImage' })
+defineProps<{
+  api: ReturnType<typeof useKnowledgeDetailContext>['resourceApi']['image']
+  knowledgeId: string
+  fileCountLimit?: number
+  fileSizeLimit?: number
+}>()
+const emit = defineEmits<{ refresh: [] }>()
+
+/* 上传入口与抽屉生命周期 */
+const drawerMounted = ref(false)
+const drawerRef = useTemplateRef<InstanceType<typeof UploadImageDrawer>>('drawerRef')
+function handleOpenUpload() {
+  drawerMounted.value = true
+  nextTick(() => drawerRef.value?.open())
+}
+</script>
+
+<template>
+  <!-- 上传图片 -->
+  <el-button type="primary" @click="handleOpenUpload">
+    <MkIcon name="icon_upload_outlined" />
+    <span>上传图片</span>
+  </el-button>
+  <UploadImageDrawer
+    v-if="drawerMounted"
+    ref="drawerRef"
+    :api="api"
+    :knowledge-id="knowledgeId"
+    :file-count-limit="fileCountLimit"
+    :file-size-limit="fileSizeLimit"
+    @refresh="emit('refresh')"
+    @closed="drawerMounted = false"
+  />
+</template>
diff --git a/ui/src/views/knowledge-detail/library/image/upload-image/ImageProcessingForm.vue b/ui/src/views/knowledge-detail/library/image/upload-image/ImageProcessingForm.vue
new file mode 100644
index 00000000000..511983fc5ec
--- /dev/null
+++ b/ui/src/views/knowledge-detail/library/image/upload-image/ImageProcessingForm.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type { FormInstance } from 'element-plus'
+import type { DocumentStrategy, ModelItem, ModelProviderItem, ToolItem } from '@/api/types'
+import ModelApi from '@/api/admin/workspace/model'
+import SystemResourceModelApi from '@/api/admin/system/resource-management/model'
+import SystemSharedModelApi from '@/api/admin/system/shared-resources/model'
+import ProviderApi from '@/api/admin/model-provider'
+import ToolApi from '@/api/admin/workspace/tool/tool'
+import SystemResourceToolApi from '@/api/admin/system/resource-management/tool/tool'
+import SystemSharedToolApi from '@/api/admin/system/shared-resources/tool/tool'
+import SelectModel from '@/components/business/select-model/index.vue'
+import { isSystemResource, isSystemSharedResource } from '@/utils/resource-context'
+
+defineOptions({ name: 'ImageProcessingForm' })
+
+/* 文档处理策略 */
+const formRef = ref<FormInstance>()
+const strategy = reactive<DocumentStrategy>({
+  split: { mode: 'smart', patterns: null, limit: 4096, child_length: 256, auto_clean: true },
+  visual: { enabled: false, strategy: 'model', model_id: null, tool_id: null },
+  index: { title_as_question: false },
+})
+const visualModelId = computed({
+  get: () => strategy.visual.model_id ?? '',
+  set: (value: string) => {
+    strategy.visual.model_id = value || null
+  },
+})
+
+function validate() {
+  return formRef.value?.validate().catch(() => false) ?? Promise.resolve(false)
+}
+function getStrategy(): DocumentStrategy {
+  return {
+    split: { ...strategy.split },
+    visual: {
+      ...strategy.visual,
+      model_id: strategy.visual.strategy === 'model' ? strategy.visual.model_id : null,
+      tool_id: strategy.visual.strategy === 'tool' ? strategy.visual.tool_id : null,
+    },
+    index: { ...strategy.index },
+  }
+}
+
+/* 视觉模型与工具选项 */
+const requestModelApi = computed(() => {
+  if (isSystemResource()) return SystemResourceModelApi
+  if (isSystemSharedResource()) return SystemSharedModelApi
+  return ModelApi
+})
+const requestToolApi = computed(() => {
+  if (isSystemResource()) return SystemResourceToolApi
+  if (isSystemSharedResource()) return SystemSharedToolApi
+  return ToolApi
+})
+const modelOptionsLoading = ref(false)
+const toolOptionsLoading = ref(false)
+const modelOptions = ref<ModelItem[]>([])
+const providerOptions = ref<ModelProviderItem[]>([])
+const toolOptions = ref<ToolItem[]>([])
+const selectedVisualTool = computed(() => toolOptions.value.find((tool) => tool.id === strategy.visual.tool_id))
+function loadModelOptions() {
+  if (!strategy.visual.enabled || strategy.visual.strategy !== 'model' || modelOptionsLoading.value) return
+  modelOptionsLoading.value = true
+  return Promise.all([requestModelApi.value.getModelListWithShared({ model_type: 'IMAGE' }), ProviderApi.getProviderList({ model_type: 'IMAGE' })])
+    .then(([models, providers]) => {
+      modelOptions.value = models
+      providerOptions.value = providers
+    })
+    .catch(() => {
+      // 请求层统一提示错误，保留已有选项供再次加载。
+    })
+    .finally(() => {
+      modelOptionsLoading.value = false
+    })
+}
+
+function loadToolOptions() {
+  if (!strategy.visual.enabled || strategy.visual.strategy !== 'tool' || toolOptionsLoading.value) return
+  toolOptionsLoading.value = true
+  return requestToolApi.value
+    .getToolListWithShared()
+    .then((tools) => {
+      toolOptions.value = tools
+    })
+    .catch(() => {
+      // 请求层统一提示错误，保留已有选项供再次加载。
+    })
+    .finally(() => {
+      toolOptionsLoading.value = false
+    })
+}
+
+function handleVisualChange() {
+  if (!strategy.visual.enabled) return
+  return strategy.visual.strategy === 'model' ? loadModelOptions() : loadToolOptions()
+}
+defineExpose({ validate, getStrategy })
+</script>
+
+<template>
+  <el-form ref="formRef" :model="strategy" label-position="top" require-asterisk-position="right" @submit.prevent>
+    <el-card shadow="never" class="w-full">
+      <div class="flex-between gap-4">
+        <div>
+          <h6>视觉增强</h6>
+          <p class="mt-1 text-N600 text-sm">识别文档中图片，将图片按照策略发给模型或工具处理，并将返回内容写入图片的描述中</p>
+        </div>
+        <!-- 启用图片视觉增强 -->
+        <el-switch v-model="strategy.visual.enabled" @change="handleVisualChange" />
+      </div>
+      <div v-if="strategy.visual.enabled" class="mk-gray-card-lg mt-4">
+        <el-form-item label="增强策略" required>
+          <el-radio-group v-model="strategy.visual.strategy" @change="handleVisualChange">
+            <el-radio value="model">模型增强</el-radio>
+            <el-radio value="tool">工具增强</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="strategy.visual.strategy === 'model'"
+          label="视觉模型"
+          prop="visual.model_id"
+          :rules="{ required: true, message: '请选择视觉模型', trigger: 'change' }"
+          class="mb-0! mt-4"
+        >
+          <SelectModel
+            v-model="visualModelId"
+            :options="modelOptions"
+            :provider-options="providerOptions"
+            :loading="modelOptionsLoading"
+            placeholder="请选择视觉模型"
+            teleported
+            can-add
+            @refresh="loadModelOptions"
+          />
+        </el-form-item>
+        <el-form-item
+          v-else
+          label="增强工具"
+          prop="visual.tool_id"
+          :rules="{ required: true, message: '请选择增强工具', trigger: 'change' }"
+          class="mb-0! mt-4"
+        >
+          <el-select v-model="strategy.visual.tool_id" :loading="toolOptionsLoading" placeholder="请选择增强工具" filterable class="w-full">
+            <template #label="{ label }">
+              <div class="flex-align-center gap-2">
+                <ToolIcon
+                  v-if="selectedVisualTool"
+                  :icon="selectedVisualTool.icon"
+                  :type="selectedVisualTool.tool_type"
+                  :size="20"
+                  class="shrink-0"
+                />
+                <span class="truncate" :title="label">{{ label }}</span>
+              </div>
+            </template>
+            <template v-for="tool in toolOptions" :key="tool.id">
+              <el-option :label="tool.name" :value="tool.id">
+                <div class="flex-align-center gap-2">
+                  <ToolIcon :icon="tool.icon" :type="tool.tool_type" :size="20" class="shrink-0" />
+                  <span class="truncate" :title="tool.name">{{ tool.name }}</span>
+                </div>
+              </el-option>
+            </template>
+          </el-select>
+        </el-form-item>
+      </div>
+    </el-card>
+  </el-form>
+</template>
diff --git a/ui/src/views/knowledge-detail/library/image/upload-image/UploadImageDrawer.vue b/ui/src/views/knowledge-detail/library/image/upload-image/UploadImageDrawer.vue
new file mode 100644
index 00000000000..b275d8c956d
--- /dev/null
+++ b/ui/src/views/knowledge-detail/library/image/upload-image/UploadImageDrawer.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed, provide, ref, useTemplateRef } from 'vue'
+import FileApi from '@/api/admin/file'
+import { FILE_SOURCE_TYPE } from '@/api/enums'
+import type { DocumentSplitResult, ImageDocumentPreview } from '@/api/types'
+import MkDragUpload from '@/components/mk-drag-upload/index.vue'
+import type { DragUploadFile, DragUploadHandler } from '@/components/mk-drag-upload/types'
+import { getUploadValidationMessage } from '@/components/mk-drag-upload/validation'
+import type { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
+import ImageProcessingForm from './ImageProcessingForm.vue'
+import DocumentImportPreview from '../../document/components/DocumentImportPreview.vue'
+import { MsgSuccess, MsgWarning } from '@/utils/message'
+
+defineOptions({ name: 'UploadImageDrawer' })
+const props = defineProps<{
+  api: ReturnType<typeof useKnowledgeDetailContext>['resourceApi']['image']
+  knowledgeId: string
+  fileCountLimit?: number
+  fileSizeLimit?: number
+}>()
+const emit = defineEmits<{ refresh: []; closed: [] }>()
+
+/* 上传步骤暂存文件，处理步骤再按当前策略生成图片预览。 */
+provide<DragUploadHandler>('upload', (file, onProgress) => FileApi.postUploadFile(file, undefined, FILE_SOURCE_TYPE.TEMPORARY_120_MINUTE, onProgress))
+const visible = ref(false)
+const loading = ref(false)
+const activeStep = ref(0)
+const processingMounted = ref(false)
+const previewVisible = ref(false)
+const previewDocuments = ref<(ImageDocumentPreview & DocumentSplitResult)[]>([])
+const selectedFiles = ref<DragUploadFile[]>([])
+const successfulFiles = computed(() => selectedFiles.value.filter((file) => file.status === 'success'))
+const countLimit = computed(() => Math.min(50, props.fileCountLimit ?? 50))
+const sizeLimit = computed(() => props.fileSizeLimit ?? 100)
+const uploadRef = useTemplateRef<InstanceType<typeof MkDragUpload>>('uploadRef')
+const processingRef = useTemplateRef<InstanceType<typeof ImageProcessingForm>>('processingRef')
+const previewRef = useTemplateRef<InstanceType<typeof DocumentImportPreview>>('previewRef')
+const uploading = computed(() => (uploadRef.value?.uploadingCount ?? 0) > 0)
+
+function open() {
+  visible.value = true
+}
+
+function validateFiles() {
+  if (loading.value) return false
+  const message = getUploadValidationMessage(selectedFiles.value)
+  if (message) {
+    MsgWarning(message)
+    return false
+  }
+  return true
+}
+
+/* 步骤切换保留文件和处理策略；离开预览后重新生成，避免导入旧配置。 */
+function handleNext() {
+  if (!validateFiles()) return
+  processingMounted.value = true
+  activeStep.value = 1
+}
+function handlePrevious() {
+  if (loading.value) return
+  if (previewVisible.value) previewVisible.value = false
+  else activeStep.value = 0
+}
+
+/* 图片预览：校验处理策略后请求预览，保留返回结果供导入。 */
+function handleGeneratePreview() {
+  if (!validateFiles() || !processingRef.value) return
+  loading.value = true
+  return processingRef.value
+    .validate()
+    .then((valid) => {
+      if (!valid || !processingRef.value) return
+      const files = successfulFiles.value.flatMap((file) => (file.raw ? [file.raw] : []))
+      return props.api?.postUploadImagePreview(props.knowledgeId, files, processingRef.value.getStrategy()).then((results) => {
+        previewDocuments.value = results
+        previewVisible.value = true
+      })
+    })
+    .catch(() => {
+      // 请求层统一提示错误，失败保留文件与策略。
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/* 图片导入：预览后提交预览 ID，未预览直接提交上传成功的图片 ID。 */
+async function handleSubmit() {
+  if (!validateFiles() || (previewVisible.value && !previewRef.value?.validate())) return
+  const fileIds = successfulFiles.value.flatMap((file) => (file.file_id ? [file.file_id] : []))
+  if (!previewVisible.value && fileIds.length !== successfulFiles.value.length) {
+    MsgWarning('没有上传成功的文件，请重新上传')
+    return
+  }
+
+  loading.value = true
+  try {
+    if (!previewVisible.value) {
+      const valid = await processingRef.value?.validate()
+      if (!valid || !processingRef.value) return
+    }
+    const previewIds = previewVisible.value ? previewDocuments.value.map((preview) => preview.preview_id) : fileIds
+    const importRequest = props.api?.putBatchCreateImageDocuments(props.knowledgeId, previewIds)
+    if (!importRequest) return
+    await importRequest
+    MsgSuccess('导入成功')
+    visible.value = false
+    emit('refresh')
+  } catch {
+    // 请求层统一提示错误，失败保留文件、策略和预览供重试。
+  } finally {
+    loading.value = false
+  }
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDrawer v-model="visible" direction="btt" size="100%" :content-class="previewVisible ? 'h-full p-0!' : undefined" @closed="emit('closed')">
+    <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>
+      </div>
+    </template>
+    <div class="h-full" v-loading="loading">
+      <DocumentImportPreview v-if="previewVisible" ref="previewRef" v-model="previewDocuments" :knowledge-id="knowledgeId" />
+      <div v-show="!previewVisible" class="mx-auto w-full max-w-200">
+        <section v-show="activeStep === 0">
+          <h4 class="mb-4 mk-title-decoration">上传图片</h4>
+          <el-alert type="primary" :closable="false" show-icon class="mb-4!">
+            <template #icon><MkIcon name="icon_info_filled" /></template>
+            <ol class="list-inside list-decimal">
+              <li>每次最多上传 {{ countLimit }} 个文件，每个文件不超过 {{ sizeLimit }} MB</li>
+            </ol>
+          </el-alert>
+          <MkDragUpload
+            ref="uploadRef"
+            v-model="selectedFiles"
+            multiple
+            mode="image"
+            accept=".jpg,.jpeg,.png,.webp,.bmp"
+            :limit="countLimit"
+            :size-limit="sizeLimit"
+            tip-text="支持格式：JPG、JPEG、PNG、WEBP、BMP"
+          />
+        </section>
+        <section v-if="processingMounted" v-show="activeStep === 1 && !previewVisible">
+          <h4 class="mb-4 mk-title-decoration">图片处理</h4>
+          <ImageProcessingForm ref="processingRef" />
+        </section>
+      </div>
+    </div>
+    <template #footer>
+      <!-- 取消上传图片 -->
+      <el-button plain :disabled="loading" @click="visible = false">取消</el-button>
+      <!-- 返回上传步骤或图片处理设置 -->
+      <el-button v-if="activeStep === 1" plain :disabled="loading" @click="handlePrevious">上一步</el-button>
+      <!-- 进入图片处理步骤 -->
+      <el-button v-if="activeStep === 0" type="primary" :disabled="loading || uploading" @click="handleNext">下一步</el-button>
+      <!-- 按图片处理策略生成预览 -->
+      <el-button v-if="activeStep === 1 && !previewVisible" plain :loading="loading" @click="handleGeneratePreview">生成预览</el-button>
+      <!-- 导入处理后的图片 -->
+      <el-button v-if="activeStep === 1" type="primary" :loading="loading" @click="handleSubmit">开始导入</el-button>
+    </template>
+  </MkDrawer>
+</template>
diff --git a/ui/src/views/knowledge-detail/library/tags/index.vue b/ui/src/views/knowledge-detail/library/tags/index.vue
index 904c0f4ace4..be20334a9e4 100644
--- a/ui/src/views/knowledge-detail/library/tags/index.vue
+++ b/ui/src/views/knowledge-detail/library/tags/index.vue
@@ -185,7 +185,6 @@ onMounted(() => {
     :data="tagRows"
     selection-group-key="key"
     :span-method="spanMethod"
-    :max-table-height="210"
     @selection-change="handleSelectionChange"
     @current-change="clearSelection"
     @size-change="clearSelection"
diff --git a/ui/src/views/knowledge-detail/setting/scheduled-sync/components/SyncLogTable.vue b/ui/src/views/knowledge-detail/setting/scheduled-sync/components/SyncLogTable.vue
index e5778cb2f57..43cd516ed35 100644
--- a/ui/src/views/knowledge-detail/setting/scheduled-sync/components/SyncLogTable.vue
+++ b/ui/src/views/knowledge-detail/setting/scheduled-sync/components/SyncLogTable.vue
@@ -72,7 +72,7 @@ watch(
       v-model:pagination-config="paginationConfig"
       v-loading="loading"
       :data="syncLogs"
-      :max-table-height="260"
+      :max-table-height="200"
       @current-change="loadSyncLogs"
       @size-change="loadSyncLogs"
     >
diff --git a/ui/src/views/knowledge-detail/termbase/index.vue b/ui/src/views/knowledge-detail/termbase/index.vue
index 927a3fc3df2..073a8741c65 100644
--- a/ui/src/views/knowledge-detail/termbase/index.vue
+++ b/ui/src/views/knowledge-detail/termbase/index.vue
@@ -170,7 +170,6 @@ onMounted(() => {
     v-model:pagination-config="paginationConfig"
     v-loading="loading || operationLoading"
     :data="termbases"
-    :max-table-height="210"
     @current-change="loadTermbases"
     @size-change="loadTermbases"
     @selection-change="handleSelectionChange"
diff --git a/ui/src/views/knowledge/create-knowledge/components/DocumentStrategyForm.vue b/ui/src/views/knowledge/create-knowledge/components/DocumentStrategyForm.vue
index 440a86b2155..965e836ce8f 100644
--- a/ui/src/views/knowledge/create-knowledge/components/DocumentStrategyForm.vue
+++ b/ui/src/views/knowledge/create-knowledge/components/DocumentStrategyForm.vue
@@ -224,7 +224,7 @@ defineExpose({ validate, getStrategy, setStrategy })
             v-model="visualModelId"
             :options="modelOptions"
             :provider-options="providerOptions"
-            :disabled="modelOptionsLoading"
+            :loading="modelOptionsLoading"
             placeholder="请选择视觉模型"
             teleported
             can-add