diff --git a/ui/src/api/API_README.md b/ui/src/api/API_README.md
index 7f18b849b99..9251c9675f6 100644
--- a/ui/src/api/API_README.md
+++ b/ui/src/api/API_README.md
@@ -280,7 +280,7 @@ Workspace、System 资源管理和 System 共享资源均在各自 `knowledge/kn
 `postKnowledgeHitTest(knowledgeId, payload)`，向知识库的 `/hit_test` 提交 POST，直接返回命中分段数组。
 请求使用 `KnowledgeHitTestPayload`，包含 `query_text`、`image_list`、`top_number`、`similarity` 和
 `search_mode`；检索模式复用 `KNOWLEDGE_SEARCH_MODE`。文本和图片至少提供一项，图片仅支持向量或混合检索。
-结果使用 `KnowledgeHitTestResult`，保留分段、得分及图片命中信息。Workspace 共享暂无对应接口，不回退其他范围。
+结果使用 `KnowledgeHitTestResult`，保留分段、得分及图片命中信息；可选 `knowledge_type` 使用 `KnowledgeType` 数字枚举，用于来源图标匹配。Workspace 共享暂无对应接口，不回退其他范围。
 向量标签依据 `hit_unit_type`（`KNOWLEDGE_HIT_UNIT_TYPE`）：`image` 显示“图片向量”，`text` 显示“文本向量”，图片描述命中也属于文本向量。
 `document_resource_type` 表示来源文档类型，`document_image_id` 用于展示图片文档原图，不用于判断命中向量类型。
 `query_unit_type` 表示产生该命中的查询输入类型，与 `hit_unit_type` 分别描述查询端和命中端。
@@ -509,6 +509,7 @@ Chat 协议及认证接口见 [chat/README.md](chat/README.md)。
 `ChatLogRecord.question` 与 `messages` 使用该内容项类型，扩展字段保留为 `unknown`。
 `paragraph_list` 为 `ChatParagraphSource[]`，后端仅在开启「显示知识来源」或调试、日志时返回；
 其 `meta` 在历史快照中可能是 JSON 字符串，使用方需兼容字符串与对象。
+分段的 `knowledge_type` 使用可选的 `KnowledgeType` 数字枚举，展示类型映射前先判断字段是否存在。
 Chat、Workspace 调试和 System 调试的记录分页及详情均声明 `ChatLogRecord` 返回类型，
 消息列表依赖从 `ConversationApiAdapter` 选取对应接口约定。
 `conversation-panel/core/stream.ts` 的 `ConversationStream<Chunk>` 通过回调推断分片类型，
diff --git a/ui/src/api/types/chat-log.ts b/ui/src/api/types/chat-log.ts
index fa059c8dbc9..ea6da585359 100644
--- a/ui/src/api/types/chat-log.ts
+++ b/ui/src/api/types/chat-log.ts
@@ -1,7 +1,7 @@
 import type { CHAT_LOG_SOURCE } from '@/api/enums'
 import type { Dict } from './common'
 import type { DocumentResourceType } from './document'
-import type { KnowledgeHitTestAsset } from './knowledge'
+import type { KnowledgeHitTestAsset, KnowledgeType } from './knowledge'
 
 export type ChatLogSource = (typeof CHAT_LOG_SOURCE)[keyof typeof CHAT_LOG_SOURCE]
 
@@ -77,7 +77,7 @@ export interface ChatParagraphSource {
   hit_asset?: KnowledgeHitTestAsset | null
   knowledge_id?: string
   knowledge_name?: string
-  knowledge_type?: string
+  knowledge_type?: KnowledgeType
   /** 历史快照中可能为 JSON 字符串 */
   meta?: ChatParagraphSourceMeta | string | null
 }
diff --git a/ui/src/api/types/knowledge.ts b/ui/src/api/types/knowledge.ts
index bdacd9b0db3..ee451dad42f 100644
--- a/ui/src/api/types/knowledge.ts
+++ b/ui/src/api/types/knowledge.ts
@@ -197,6 +197,7 @@ export interface KnowledgeHitTestAsset {
 
 /** 召回测试返回的分段与命中得分。 */
 export interface KnowledgeHitTestResult extends ParagraphItem {
+  knowledge_type?: KnowledgeType | null
   document_image_id?: string | null
   document_resource_type?: DocumentResourceType | null
   knowledge_id: string
diff --git a/ui/src/conversation-panel/right-sidebar/knowledge-source/index.ts b/ui/src/conversation-panel/right-sidebar/knowledge-source/index.ts
index 2573dfff9b2..0856136126c 100644
--- a/ui/src/conversation-panel/right-sidebar/knowledge-source/index.ts
+++ b/ui/src/conversation-panel/right-sidebar/knowledge-source/index.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue'
 import { DOCUMENT_RESOURCE_TYPE } from '@/api/enums'
-import type { ChatParagraphSource, ChatParagraphSourceMeta } from '@/api/types'
+import type { ChatParagraphSource, ChatParagraphSourceMeta, DocumentResourceType, KnowledgeType } from '@/api/types'
 import { downloadByURL, getFileUrl } from '@/utils/common'
 import { MsgInfo } from '@/utils/message'
 import { isPdfDocument, type PreviewDocument } from './document-preview/index'
@@ -28,12 +28,13 @@ export interface KnowledgeSourceParagraph {
   vectorLabel: string
   imageUrl: string
   documentName: string
+  documentResourceType?: DocumentResourceType | null
   documentAction: SourceDocumentAction
   /** 来源文档地址，UNAVAILABLE 时为空字符串 */
   documentUrl: string
   allowDownload: boolean
   knowledgeName: string
-  knowledgeType?: string
+  knowledgeType?: KnowledgeType
 }
 
 // 历史快照中 meta 可能是 JSON 字符串，解析失败按无元数据处理
@@ -79,6 +80,7 @@ function toSourceParagraph(paragraph: ChatParagraphSource, index: number): Knowl
     vectorLabel: paragraph.document_resource_type === DOCUMENT_RESOURCE_TYPE.IMAGE || paragraph.hit_asset ? '图片向量' : '文本向量',
     imageUrl: getImageUrl(paragraph),
     documentName,
+    documentResourceType: paragraph.document_resource_type,
     documentAction: documentTarget.action,
     documentUrl: documentTarget.url,
     allowDownload: meta.allow_download !== false,
diff --git a/ui/src/conversation-panel/right-sidebar/knowledge-source/index.vue b/ui/src/conversation-panel/right-sidebar/knowledge-source/index.vue
index 1733c279006..ea7db29578f 100644
--- a/ui/src/conversation-panel/right-sidebar/knowledge-source/index.vue
+++ b/ui/src/conversation-panel/right-sidebar/knowledge-source/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getFileIconUrl } from '@/utils/icon'
+import { DOCUMENT_RESOURCE_TYPE } from '@/api/enums'
 import { useRightSidebarStore } from '../index'
 import DocumentPreview from './document-preview/index.vue'
 
@@ -39,23 +40,29 @@ const { previewDocument, sourceParagraphs, count, openDocument } = knowledgeSour
                 </div>
               </template>
 
-              <MdPreview :model-value="paragraph.content" no-img-zoom-in />
-
               <!-- 放大预览召回图片 -->
               <el-image
                 v-if="paragraph.imageUrl"
                 :src="paragraph.imageUrl"
                 :alt="paragraph.title"
-                fit="cover"
-                class="mt-2 w-full rounded-lg"
+                fit="contain"
+                class="mb-2"
                 :preview-src-list="[paragraph.imageUrl]"
                 preview-teleported
               />
 
+              <MdPreview :model-value="paragraph.content" no-img-zoom-in />
+
               <!-- 打开来源文档：PDF 在知识来源内预览，其他文件下载，网页来源打开原网址 -->
               <el-card v-if="paragraph.documentName" shadow="never" class="small mt-2 cursor-pointer" @click="openDocument(paragraph)">
                 <div class="flex-align-center gap-2">
-                  <img :src="getFileIconUrl(paragraph.documentName)" alt="" width="24" />
+                  <img
+                    :src="
+                      getFileIconUrl(paragraph.documentName, paragraph.knowledgeType, paragraph.documentResourceType === DOCUMENT_RESOURCE_TYPE.IMAGE)
+                    "
+                    alt=""
+                    class="size-6 shrink-0"
+                  />
                   <span class="min-w-0 truncate" :title="paragraph.documentName">{{ paragraph.documentName }}</span>
                 </div>
               </el-card>
diff --git a/ui/src/utils/UTILS_README.md b/ui/src/utils/UTILS_README.md
index cc9b5a0e5fa..9bc75c21508 100644
--- a/ui/src/utils/UTILS_README.md
+++ b/ui/src/utils/UTILS_README.md
@@ -108,6 +108,8 @@ warning 类型；输入和普通警告弹窗继续直接使用 `ElMessageBox`。
 
 `icon.ts` 的 `getFileExtension()` 返回不含点号的大写后缀，无有效后缀时返回空字符串。
 `isImage()`、`isDocument()`、`isAudio()`、`isVideo()` 统一复用 `constants/file-type.ts` 的四组常量。
-`getFileIconUrl()` 为文档返回对应后缀图标，为音视频分别返回 `file-audio-icon.svg`、
+`getFileIconUrl(fileName, knowledgeType?, isImageType?)` 支持可选的知识库类型和图片标记。
+`isImageType` 为 `true` 时优先返回 `file-image-icon.svg`，其次 Web 知识库返回 `web-link-icon.svg`；
+未命中时按文件后缀匹配：为文档返回对应后缀图标，为音视频分别返回 `file-audio-icon.svg`、
 `file-video-icon.svg`，其他类型回退到 `unknown-icon.svg`；图片预览由调用方单独处理。
 DOC、ZIP 保留历史图标兼容，但不加入消息附件的文档类型白名单。
diff --git a/ui/src/utils/icon.ts b/ui/src/utils/icon.ts
index 575bd37b71b..8997c16a55b 100644
--- a/ui/src/utils/icon.ts
+++ b/ui/src/utils/icon.ts
@@ -1,5 +1,9 @@
 /** 提供跨页面复用的文件后缀识别、类型校验和图标匹配函数。 */
 
+import type { KnowledgeType } from '@/api/types'
+import { KNOWLEDGE_TYPE_KEY, KNOWLEDGE_TYPE_MAP } from '@/constants/knowledge'
+import fileImageIcon from '@/assets/file-type/file-image-icon.svg'
+import webLinkIcon from '@/assets/file-type/web-link-icon.svg'
 import { IMAGE_EXTENSIONS, DOCUMENT_EXTENSIONS, VIDEO_EXTENSIONS, AUDIO_EXTENSIONS } from '@/constants/file-type'
 
 /** 获取文件名中不含点号的大写后缀；无有效后缀时返回空字符串。 */
@@ -31,8 +35,11 @@ export function isVideo(fileName: string): boolean {
   return VIDEO_EXTENSIONS.includes(getFileExtension(fileName))
 }
 
-/** 返回文档或音视频图标 URL；图片由调用方预览，其他类型回退到 unknown 图标。 */
-export function getFileIconUrl(fileName: string): string {
+/** 返回文件图标 URL；图片标记优先于 Web 知识库类型，未传时按后缀匹配。 */
+export function getFileIconUrl(fileName: string, knowledgeType?: KnowledgeType | null, isImageType?: boolean): string {
+  if (isImageType) return fileImageIcon
+  if (knowledgeType != null && KNOWLEDGE_TYPE_MAP[knowledgeType] === KNOWLEDGE_TYPE_KEY.WEB) return webLinkIcon
+
   const extension = getFileExtension(fileName)
   let iconName = 'unknown'
 
diff --git a/ui/src/views/document-detail/index.vue b/ui/src/views/document-detail/index.vue
index 8594295e644..2854a76b414 100644
--- a/ui/src/views/document-detail/index.vue
+++ b/ui/src/views/document-detail/index.vue
@@ -6,7 +6,6 @@ import { provideDocumentDetailContext } from './context'
 import type { ParamsPage } from '@/api/admin/core/types'
 import type { DocumentItem, ParagraphItem, ParagraphQuery } from '@/api/types'
 import { getFileIconUrl } from '@/utils/icon'
-import { KNOWLEDGE_TYPE_KEY } from '@/constants/knowledge'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import { useParagraphSort } from './action-dropdown/move/useParagraphSort'
 import CreateParagraphDialog from './paragraph-dialog/CreateParagraphDialog.vue'
@@ -271,8 +270,7 @@ onMounted(() => {
           <!-- 返回文档列表 -->
           <el-button text @click="handleBack"><MkIcon name="icon_arrow-left_outlined" :size="20" /></el-button>
           <template v-if="documentDetail">
-            <img v-if="route.params.type === KNOWLEDGE_TYPE_KEY.WEB" src="@/assets/file-type/web-link-icon.svg" alt="" class="size-6 shrink-0" />
-            <img v-else :src="getFileIconUrl(documentDetail.name)" alt="" class="size-6 shrink-0" />
+            <img :src="getFileIconUrl(documentDetail.name, documentDetail.type)" alt="" class="size-6 shrink-0" />
           </template>
           <h4 class="truncate" :title="documentDetail?.name">{{ documentDetail?.name ?? '-' }}</h4>
         </div>
diff --git a/ui/src/views/knowledge-detail/hit-test/index.vue b/ui/src/views/knowledge-detail/hit-test/index.vue
index 31db424e5cd..444c080ac89 100644
--- a/ui/src/views/knowledge-detail/hit-test/index.vue
+++ b/ui/src/views/knowledge-detail/hit-test/index.vue
@@ -10,7 +10,6 @@ import type { KnowledgeHitTestPayload, KnowledgeHitTestResult, ParagraphItem } f
 import { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
 import ParagraphDialog from '@/views/document-detail/paragraph-dialog/ParagraphDialog.vue'
 import emptyHitTestImage from '@/assets/empty/hit-test.png'
-import fileImageIcon from '@/assets/file-type/file-image-icon.svg'
 import HitTestInput from './components/HitTestInput.vue'
 import { getFileUrl } from '@/utils/common'
 import { getFileIconUrl } from '@/utils/icon'
@@ -228,7 +227,11 @@ function testKnowledge(query: Required<Pick<KnowledgeHitTestPayload, 'query_text
 
                 <template #footer>
                   <div class="flex-align-center min-w-0 gap-2 text-sm text-N600">
-                    <img :src="paragraph.isImgaeDoc ? fileImageIcon : getFileIconUrl(paragraph.document_name)" alt="" class="size-4 shrink-0" />
+                    <img
+                      :src="getFileIconUrl(paragraph.document_name, paragraph.knowledge_type, paragraph.isImgaeDoc)"
+                      alt=""
+                      class="size-4 shrink-0"
+                    />
                     <span class="truncate" :title="paragraph.document_name">{{ paragraph.document_name }}</span>
                   </div>
                 </template>
diff --git a/ui/src/views/knowledge-detail/library/document/index.vue b/ui/src/views/knowledge-detail/library/document/index.vue
index 9ccdd02d114..d0ba95788d8 100644
--- a/ui/src/views/knowledge-detail/library/document/index.vue
+++ b/ui/src/views/knowledge-detail/library/document/index.vue
@@ -402,8 +402,7 @@ onBeforeUnmount(() => {
           :disabled="isWorkspaceSharedResource() || !knowledgeDocPermission('docEdit')"
         >
           <template #prefix>
-            <img v-if="knowledgeType === KNOWLEDGE_TYPE_KEY.WEB" src="@/assets/file-type/web-link-icon.svg" alt="" class="size-5" />
-            <img v-else :src="getFileIconUrl(row.name)" alt="" class="size-5" />
+            <img :src="getFileIconUrl(row.name, row.type)" alt="" class="size-5" />
           </template>
         </MkEditName>
       </template>
diff --git a/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue b/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue
index 346d444767d..8322b1105b6 100644
--- a/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue
+++ b/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue
@@ -6,13 +6,13 @@ import type { Dict, DocumentItem, KnowledgeTagUpdatePayload } from '@/api/types'
 import { getFileIconUrl } from '@/utils/icon'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess } from '@/utils/message'
-import { isWorkspaceSharedResource,isSystemResource, isSystemSharedResource } from '@/utils/resource-context'
+import { isWorkspaceSharedResource, isSystemResource, isSystemSharedResource } from '@/utils/resource-context'
 import { perm } from '@/permission'
 
 /**
  * 知识库「文档」权限判断
  */
-type KnowledgeDocPermissionMethod = | 'docRead' | 'docEdit'
+type KnowledgeDocPermissionMethod = 'docRead' | 'docEdit'
 
 function knowledgeDocPermission(method: KnowledgeDocPermissionMethod): boolean {
   if (isSystemResource()) return Boolean(perm.knowledge.system[method]())
@@ -156,7 +156,7 @@ defineExpose({ open })
       </el-tabs>
       <div class="flex-between gap-3">
         <!-- 批量关联或取消关联文档 -->
-        <el-button plain :disabled="!selectedDocuments.length || loading && !knowledgeDocPermission('docEdit')" @click="handleBatchLinkDocuments">
+        <el-button plain :disabled="!selectedDocuments.length || (loading && !knowledgeDocPermission('docEdit'))" @click="handleBatchLinkDocuments">
           <MkIcon :name="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'" />
           <span>{{ activeTab === 'linked' ? '取消关联' : '关联' }}</span>
         </el-button>
diff --git a/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue b/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue
index 1b4cfd67851..fe3eb86d0e2 100644
--- a/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue
+++ b/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue
@@ -5,7 +5,6 @@ import MkSearchList from '@/components/mk-search-list/index.vue'
 import type { ParamsPage } from '@/api/admin/core/types'
 import { DOCUMENT_RESOURCE_TYPE } from '@/api/enums'
 import type { DocumentItem, DocumentResourceType, ParagraphItem, ProblemParagraphReference } from '@/api/types'
-import { KNOWLEDGE_TYPE_KEY, KNOWLEDGE_TYPE_MAP } from '@/constants/knowledge'
 import { getFileUrl } from '@/utils/common'
 import { getFileIconUrl } from '@/utils/icon'
 import { MsgSuccess } from '@/utils/message'
@@ -203,13 +202,7 @@ defineExpose({ open })
                   :alt="row.name"
                   fit="cover"
                 />
-                <img
-                  v-else-if="KNOWLEDGE_TYPE_MAP[row.type] === KNOWLEDGE_TYPE_KEY.WEB"
-                  src="@/assets/file-type/web-link-icon.svg"
-                  alt=""
-                  class="size-4"
-                />
-                <img v-else :src="getFileIconUrl(row.name)" class="size-4 shrink-0" alt="" />
+                <img v-else :src="getFileIconUrl(row.name, row.type)" class="size-4 shrink-0" alt="" />
                 <span class="min-w-0 flex-1 truncate" :title="row.name">{{ row.name }}</span>
                 <!-- 关联数字 -->
                 <span v-if="getSelectedCount(row.id)" class="mk-badge">
diff --git a/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue b/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue
index 1daca97ac36..31da618f576 100644
--- a/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue
+++ b/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue
@@ -5,12 +5,10 @@ import MkEditName from '@/components/mk-edit-name/index.vue'
 import { MsgSuccess } from '@/utils/message'
 import { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
 import ParagraphDialog from '@/views/document-detail/paragraph-dialog/ParagraphDialog.vue'
-import fileImageIcon from '@/assets/file-type/file-image-icon.svg'
 import { getFileIconUrl } from '@/utils/icon'
 import { getFileUrl } from '@/utils/common'
 import { DOCUMENT_RESOURCE_TYPE } from '@/api/enums'
-import { KNOWLEDGE_TYPE_KEY, KNOWLEDGE_TYPE_MAP } from '@/constants/knowledge'
-import { isWorkspaceSharedResource,isSystemResource, isSystemSharedResource } from '@/utils/resource-context'
+import { isWorkspaceSharedResource, isSystemResource, isSystemSharedResource } from '@/utils/resource-context'
 import { perm } from '@/permission'
 
 /**
@@ -158,14 +156,13 @@ defineExpose({ refresh: handleLoadParagraphs })
             <div class="flex-align-center gap-2 text-sm text-N600">
               <span class="shrink-0">{{ paragraph.content.length }} 字符</span>
               <el-divider direction="vertical" />
-              <img v-if="paragraph.document_resource_type === DOCUMENT_RESOURCE_TYPE.IMAGE" :src="fileImageIcon" class="size-4 shrink-0" />
               <img
-                v-else-if="paragraph.knowledge_type != null && KNOWLEDGE_TYPE_MAP[paragraph.knowledge_type] === KNOWLEDGE_TYPE_KEY.WEB"
-                src="@/assets/file-type/web-link-icon.svg"
+                :src="
+                  getFileIconUrl(paragraph.document_name, paragraph.knowledge_type, paragraph.document_resource_type === DOCUMENT_RESOURCE_TYPE.IMAGE)
+                "
                 alt=""
                 class="size-4 shrink-0"
               />
-              <img v-else :src="getFileIconUrl(paragraph.document_name)" class="size-4 shrink-0" alt="" />
               <span class="truncate" :title="paragraph.document_name">{{ paragraph.document_name }}</span>
             </div>
           </el-card>
@@ -175,7 +172,7 @@ defineExpose({ refresh: handleLoadParagraphs })
     </div>
     <template #footer>
       <!-- 关联当前问题的分段 -->
-      <el-button plain :disabled="loading" v-if="knowledgeProblemPermission('problemRelate')"  @click="emit('associate')">关联分段</el-button>
+      <el-button plain :disabled="loading" v-if="knowledgeProblemPermission('problemRelate')" @click="emit('associate')">关联分段</el-button>
       <!-- 查看上一个问题 -->
       <el-button plain :disabled="loading || !hasPrevious" @click="emit('previous')">上一个</el-button>
       <!-- 查看下一个问题 -->
diff --git a/ui/src/workflow-canvas/nodes/data-source-web-node/details/index.vue b/ui/src/workflow-canvas/nodes/data-source-web-node/details/index.vue
index 144d6564e4c..ef6a705b19d 100644
--- a/ui/src/workflow-canvas/nodes/data-source-web-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/data-source-web-node/details/index.vue
@@ -4,6 +4,7 @@ import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
 import { getFileIconUrl } from '@/utils/icon'
+import { KNOWLEDGE_TYPE } from '@/api/enums'
 
 defineOptions({ name: 'DataSourceWebNodeDetail' })
 
@@ -63,8 +64,7 @@ watch(documents, () => {
             @click="selectedDocumentIndex = index"
           >
             <div class="flex-align-center gap-2">
-              <img v-if="file.meta?.source_type === 'web'" src="@/assets/file-type/web-link-icon.svg" alt="" width="24" />
-              <img v-else :src="getFileIconUrl(file.name || '')" alt="" width="24" />
+              <img :src="getFileIconUrl(file.name || '', file.meta?.source_type === 'web' ? KNOWLEDGE_TYPE.WEB : undefined)" alt="" width="24" />
               <span class="min-w-0 truncate" :title="file.name">{{ file.name || '-' }}</span>
             </div>
           </el-card>
diff --git a/ui/src/workflow-canvas/nodes/document-extract-node/details/index.vue b/ui/src/workflow-canvas/nodes/document-extract-node/details/index.vue
index d143a602247..3a6b386fcb8 100644
--- a/ui/src/workflow-canvas/nodes/document-extract-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/document-extract-node/details/index.vue
@@ -4,6 +4,7 @@ import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
 import { getFileIconUrl } from '@/utils/icon'
+import { KNOWLEDGE_TYPE } from '@/api/enums'
 
 defineOptions({ name: 'DocumentExtractNodeDetail' })
 
@@ -56,8 +57,7 @@ watch(documents, () => {
             @click="selectedDocumentIndex = index"
           >
             <div class="flex-align-center gap-2">
-              <img v-if="file.meta?.source_type === 'web'" src="@/assets/file-type/web-link-icon.svg" alt="" width="24" />
-              <img v-else :src="getFileIconUrl(file.name || '')" alt="" width="24" />
+              <img :src="getFileIconUrl(file.name || '', file.meta?.source_type === 'web' ? KNOWLEDGE_TYPE.WEB : undefined)" alt="" width="24" />
               <span class="min-w-0 truncate" :title="file.name">{{ file.name || '-' }}</span>
             </div>
           </el-card>
diff --git a/ui/src/workflow-canvas/nodes/document-split-node/details/index.vue b/ui/src/workflow-canvas/nodes/document-split-node/details/index.vue
index f2080300d5e..85dd4116465 100644
--- a/ui/src/workflow-canvas/nodes/document-split-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/document-split-node/details/index.vue
@@ -4,6 +4,7 @@ import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
 import { getFileIconUrl } from '@/utils/icon'
+import { KNOWLEDGE_TYPE } from '@/api/enums'
 import { DOCUMENT_SPLIT_STRATEGY_LABELS } from '../constant'
 
 defineOptions({ name: 'DocumentSplitNodeDetail' })
@@ -94,8 +95,7 @@ watch(paragraphList, () => {
             @click="selectedDocumentIndex = index"
           >
             <div class="flex-align-center gap-2">
-              <img v-if="file.meta?.source_type === 'web'" src="@/assets/file-type/web-link-icon.svg" alt="" width="24" />
-              <img v-else :src="getFileIconUrl(file.name || '')" alt="" width="24" />
+              <img :src="getFileIconUrl(file.name || '', file.meta?.source_type === 'web' ? KNOWLEDGE_TYPE.WEB : undefined)" alt="" width="24" />
               <span class="min-w-0 truncate" :title="file.name">{{ file.name || '-' }}</span>
             </div>
           </el-card>
diff --git a/ui/src/workflow-canvas/nodes/knowledge-write-node/details/index.vue b/ui/src/workflow-canvas/nodes/knowledge-write-node/details/index.vue
index 91e461742af..988ffb028b2 100644
--- a/ui/src/workflow-canvas/nodes/knowledge-write-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/knowledge-write-node/details/index.vue
@@ -4,6 +4,7 @@ import DetailContainer from '@/workflow-canvas/execution-details/DetailContainer
 import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
 import { getFileIconUrl } from '@/utils/icon'
+import { KNOWLEDGE_TYPE } from '@/api/enums'
 
 defineOptions({ name: 'KnowledgeWriteNodeDetail' })
 
@@ -52,8 +53,7 @@ watch(writeContent, () => {
             @click="selectedDocumentIndex = index"
           >
             <div class="flex-align-center gap-2">
-              <img v-if="file.meta?.source_type === 'web'" src="@/assets/file-type/web-link-icon.svg" alt="" width="24" />
-              <img v-else :src="getFileIconUrl(file.name || '')" alt="" width="24" />
+              <img :src="getFileIconUrl(file.name || '', file.meta?.source_type === 'web' ? KNOWLEDGE_TYPE.WEB : undefined)" alt="" width="24" />
               <span class="min-w-0 truncate" :title="file.name">{{ file.name || '-' }}</span>
             </div>
           </el-card>
diff --git a/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue b/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
index c48e3205b82..ea9643f52d4 100644
--- a/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/reranker-node/details/index.vue
@@ -60,7 +60,7 @@ defineProps<{
             >
               <el-card shadow="never" class="small cursor-pointer">
                 <div class="flex-align-center gap-2">
-                  <img :src="getFileIconUrl(paragraph.metadata.document_name.trim())" alt="" width="24" />
+                  <img :src="getFileIconUrl(paragraph.metadata.document_name.trim(), paragraph.metadata.knowledge_type)" alt="" width="24" />
                   <span class="min-w-0 truncate" :title="paragraph.metadata.document_name.trim()">{{ paragraph.metadata.document_name.trim() }}</span>
                 </div>
               </el-card>
@@ -114,7 +114,7 @@ defineProps<{
             >
               <el-card shadow="never" class="small cursor-pointer">
                 <div class="flex-align-center gap-2">
-                  <img :src="getFileIconUrl(paragraph.metadata.document_name.trim())" alt="" width="24" />
+                  <img :src="getFileIconUrl(paragraph.metadata.document_name.trim(), paragraph.metadata.knowledge_type)" alt="" width="24" />
                   <span class="min-w-0 truncate" :title="paragraph.metadata.document_name.trim()">{{ paragraph.metadata.document_name.trim() }}</span>
                 </div>
               </el-card>
diff --git a/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue b/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
index f5226ffeefb..0b84ee10f36 100644
--- a/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
+++ b/ui/src/workflow-canvas/nodes/search-knowledge-node/details/index.vue
@@ -6,7 +6,7 @@ import BaseHeader from '@/workflow-canvas/execution-details/BaseHeader.vue'
 import { getFileUrl } from '@/utils/common'
 import { getFileIconUrl } from '@/utils/icon'
 import { DOCUMENT_RESOURCE_TYPE, KNOWLEDGE_HIT_UNIT_TYPE } from '@/api/enums'
-import type { DocumentResourceType, KnowledgeHitTestAsset } from '@/api/types'
+import type { DocumentResourceType, KnowledgeHitTestAsset, KnowledgeType } from '@/api/types'
 import type { ExecutionNodeDetail } from '@/workflow-canvas/execution-details/types'
 
 defineOptions({ name: 'SearchKnowledgeNodeDetail' })
@@ -22,7 +22,7 @@ interface SearchParagraph {
   document_image_id?: string | null
   hit_asset?: KnowledgeHitTestAsset | null
   knowledge_name?: string
-  knowledge_type?: string
+  knowledge_type?: KnowledgeType
   meta?: {
     source_file_id?: string
     source_url?: string
@@ -131,7 +131,17 @@ function getParagraphImageUrl(paragraph: SearchParagraph) {
             >
               <el-card shadow="never" class="small cursor-pointer">
                 <div class="flex-align-center gap-2">
-                  <img :src="getFileIconUrl(paragraph.document_name.trim())" alt="" width="24" />
+                  <img
+                    :src="
+                      getFileIconUrl(
+                        paragraph.document_name.trim(),
+                        paragraph.knowledge_type,
+                        paragraph.document_resource_type === DOCUMENT_RESOURCE_TYPE.IMAGE,
+                      )
+                    "
+                    alt=""
+                    class="size-6 shrink-0"
+                  />
                   <span class="min-w-0 truncate" :title="paragraph.document_name.trim()">{{ paragraph.document_name.trim() }}</span>
                 </div>
               </el-card>