diff --git a/ui/src/api/API_README.md b/ui/src/api/API_README.md
index 11446e7f425..fd40b9a8663 100644
--- a/ui/src/api/API_README.md
+++ b/ui/src/api/API_README.md
@@ -548,7 +548,8 @@ Workspace 共享 Paragraph API 仅 getParagraphPage、getParagraphDetail，不
 Workspace、System 资源管理、System 共享提供完整问题 API：
 `postProblems` 直接提交内容字符串数组，`putProblem` 提交 `{ content }`，单项 DELETE 使用问题 ID，
 `putBatchDeleteProblems` 直接提交问题 ID 数组；单个问题内容最多 256 字符。
-`getProblemDetail` 返回 `ProblemParagraph[]`，包含分段字段及 knowledge_id、document_name。
+`getProblemDetail` 返回 `ProblemParagraph[]`，包含分段字段及 knowledge_id、document_name、knowledge_type、
+document_resource_type、document_image_id；来源元数据由后端补齐，图片详情使用 document_image_id 读取原图。
 取消关联复用 Paragraph API 的 `putUnassociateParagraphProblem`，不调用问题或分段删除接口。
 Workspace 共享仅有 `getProblemsPage`，不补造详情或写接口，不回退其他范围。
 
diff --git a/ui/src/api/types/paragraph.ts b/ui/src/api/types/paragraph.ts
index c84fd35ae1f..2481ef92e80 100644
--- a/ui/src/api/types/paragraph.ts
+++ b/ui/src/api/types/paragraph.ts
@@ -1,4 +1,5 @@
-import type { RelatedQuestionsConfig } from './knowledge'
+import type { KnowledgeType, RelatedQuestionsConfig } from './knowledge'
+import type { DocumentResourceType } from './document'
 
 /** 文档分段的查询响应与新增载荷。 */
 export interface ParagraphItem {
@@ -29,10 +30,13 @@ export interface ProblemItem extends ParagraphProblem {
   update_time: string
 }
 
-/** 从问题详情查询到的关联分段，额外携带所属知识库与文档名称。 */
+/** 从问题详情查询到的关联分段，包含所属知识库、文档及图片来源信息。 */
 export interface ProblemParagraph extends ParagraphItem {
   knowledge_id: string
   document_name: string
+  knowledge_type: KnowledgeType | null
+  document_resource_type: DocumentResourceType
+  document_image_id: string | null
 }
 
 /** 批量将问题关联到文档分段时使用的分段引用。 */
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index 9f82635b22e..06988ec4fa7 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -45,7 +45,7 @@
 | `knowledge-detail/library/document/`、`tags/`                                         | 文档及标签维护                               |
 | `knowledge-detail/library/image/`                                                     | 图片列表，复用文档操作                       |
 | `knowledge-detail/hit-test/`                                                          | 召回测试参数、文本／图片查询及结果展示       |
-| `knowledge-detail/question/`                                                          | 问题管理占位页                               |
+| `knowledge-detail/problem/`                                                          | 问题查询、维护与分段关联                               |
 | `knowledge-detail/termbase/`                                                          | 知识库自定义分词维护                         |
 | `knowledge-detail/chat-user/`、`external-retrieval/`                                  | 对话授权与外部检索配置                       |
 | `knowledge-detail/setting/base/`、`document-strategy/`、`scheduled-sync/`             | 基础设置、文档策略、定时同步与日志           |
@@ -246,14 +246,17 @@ System 资源管理或 System 共享 Knowledge API 的 `postKnowledgeHitTest`；
 
 ### 问题管理
 
-`question/` 使用 `resourceApi.problem`，默认每页 20 条，不提供表头排序，搜索将 content 传给后端。
+`problem/` 使用 `resourceApi.problem`，默认每页 20 条，不提供表头排序，搜索将 content 传给后端。
 `ButtonCreateProblem` 内聚创建按钮和多行输入弹窗；快捷创建使用 `MkQuickCreate`，每个问题最多 256 字符。
 单项与批量删除直接提交，删除后末页为空时回退到最后有效页；名称编辑复用 `MkEditName`。
 点击数据行打开 `ProblemDetailDrawer`，勾选、名称编辑和操作按钮不触发行详情。
 详情支持问题名称快捷编辑、关联分段卡片和跨页上一个／下一个；卡片复用 `.mk-paragraph-card` 样式，
 点击打开已有 `ParagraphDialog`，悬浮取消关联按钮仅解除当前关联，成功刷新卡片与列表计数。
-分段详情关闭后重查关联，保持编辑与解除关联后的数据一致。
-单项、批量、详情的“关联分段”入口暂时禁用，待交互确认后接入，不创建关联弹窗或发送关联请求。
+分段详情关闭后重查关联，保持编辑与解除关联后的数据一致。关联卡片按接口来源字段显示图片、Web 或文件图标，
+图片原图引用同时传给分段详情；加载失败支持重试。抽屉暴露 `refresh()`，由问题页在批量关联成功后刷新当前关联分段。
+单项、批量、详情的“关联分段”入口统一使用 `AssociateParagraphDialog`，勾选仅维护本次选择，
+跨文档、图片类型及搜索保留选择；确认后通过 `putBatchAssociateProblems` 一次提交问题与分段列表，
+成功关闭并刷新问题列表，失败保留选择，取消不提交。弹窗不回填既有关联或执行解除关联，解除关联仍由问题详情维护。
 Workspace 共享只展示和搜索问题列表，不显示维护入口，也不打开缺少查询接口的问题详情。
 
 ## 文档分段
diff --git a/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue b/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue
index 9063d0f9e13..37e9b1dc5ec 100644
--- a/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue
+++ b/ui/src/views/knowledge-detail/problem/components/AssociateParagraphDialog.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import type MkViewLayout from '@/components/global/mk-view-layout/index.vue'
 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'
 import { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
-import ParagraphDialog from '@/views/document-detail/paragraph-dialog/ParagraphDialog.vue'
 
 defineOptions({ name: 'AssociateParagraphDialog' })
 const emit = defineEmits<{ success: [] }>()
@@ -26,12 +26,9 @@ const selectedDocumentId = ref('')
 const paragraphSearchText = ref('')
 const paragraphs = ref<ParagraphItem[]>([])
 const selectedParagraphs = ref<ProblemParagraphReference[]>([])
-const detailParagraph = ref<ParagraphItem>()
 const infiniteScrollRef = useTemplateRef<{ reset: () => Promise<void> }>('infiniteScrollRef')
 const paragraphLayoutRef = useTemplateRef<InstanceType<typeof MkViewLayout>>('paragraphLayoutRef')
-const paragraphDialogRef = useTemplateRef<InstanceType<typeof ParagraphDialog>>('paragraphDialogRef')
 
-const isBatchAssociation = computed(() => problemIds.value.length > 1)
 const selectedDocument = computed(() => documentData.value.find(({ id }) => id === selectedDocumentId.value))
 const selectedParagraphIds = computed(() => new Set(selectedParagraphs.value.map(({ paragraph_id }) => paragraph_id)))
 
@@ -91,85 +88,43 @@ function handleParagraphSearch() {
   return refreshParagraphs()
 }
 
-function removeSelectedParagraph(paragraphId: string) {
-  selectedParagraphs.value = selectedParagraphs.value.filter(({ paragraph_id }) => paragraph_id !== paragraphId)
-}
-
-function addSelectedParagraph(paragraph: ParagraphItem) {
-  selectedParagraphs.value = [...selectedParagraphs.value, { paragraph_id: paragraph.id, document_id: paragraph.document_id }]
+// 勾选仅维护本次批量关联的选择，确认后统一提交。
+function handleToggleParagraph(paragraph: ParagraphItem) {
+  if (operationLoading.value) return
+  if (isSelected(paragraph.id)) {
+    selectedParagraphs.value = selectedParagraphs.value.filter(({ paragraph_id }) => paragraph_id !== paragraph.id)
+  } else {
+    selectedParagraphs.value.push({ paragraph_id: paragraph.id, document_id: paragraph.document_id })
+  }
 }
 
-function updateParagraphAssociation(paragraph: ParagraphItem, unlink: boolean) {
-  if (operationLoading.value) return
-  const problemId = problemIds.value[0]
-  if (!problemId) return
+function handleSubmit() {
+  if (operationLoading.value || documentLoading.value || !problemIds.value.length || !selectedParagraphs.value.length) return
   operationLoading.value = true
-  // TODO(图片联调)：核对图片分段的关联及取消关联是否复用现有 document_id / paragraph_id 协议，成功后重新打开确认回显。
-  const request = unlink
-    ? resourceApi.paragraph.putUnassociateParagraphProblem(knowledgeId.value, paragraph.document_id, paragraph.id, problemId)
-    : resourceApi.problem.putBatchAssociateProblems(knowledgeId.value, {
-        problem_id_list: [...problemIds.value],
-        paragraph_list: [{ paragraph_id: paragraph.id, document_id: paragraph.document_id }],
-      })
-  return request
+  return resourceApi.problem
+    .putBatchAssociateProblems(knowledgeId.value, {
+      problem_id_list: [...problemIds.value],
+      paragraph_list: [...selectedParagraphs.value],
+    })
     .then(() => {
-      if (unlink) {
-        removeSelectedParagraph(paragraph.id)
-      } else {
-        addSelectedParagraph(paragraph)
-      }
-      MsgSuccess(unlink ? '取消关联成功' : '关联成功')
+      MsgSuccess('关联成功')
+      visible.value = false
       emit('success')
     })
     .catch(() => {
-      // 请求层统一提示错误，失败时保留当前选择。
+      // 请求层统一提示错误，失败时保留本次选择以便重试。
     })
     .finally(() => {
       operationLoading.value = false
     })
 }
 
-function handleAssociateParagraph(paragraph: ParagraphItem) {
-  if (isSelected(paragraph.id)) return
-  return updateParagraphAssociation(paragraph, false)
-}
-
-function handleUnassociateParagraph(paragraph: ParagraphItem) {
-  // 批量关联提交后不支持在此弹窗批量解除关联，避免只解除首个问题的关联。
-  if (isBatchAssociation.value || !isSelected(paragraph.id)) return
-  return updateParagraphAssociation(paragraph, true)
-}
-
-async function handleOpenParagraphDetail(paragraph: ParagraphItem) {
-  if (operationLoading.value || detailParagraph.value) return
-  detailParagraph.value = paragraph
-  await nextTick()
-  paragraphDialogRef.value?.open(paragraph)
-}
-
-function handleParagraphDialogClosed() {
-  detailParagraph.value = undefined
-  const problemId = problemIds.value[0]
-  if (isBatchAssociation.value || !problemId) return
-  // 分段详情可修改问题关联，关闭后重新读取当前问题的关联状态。
-  void resourceApi.problem.getProblemDetail(knowledgeId.value, problemId).then((associatedParagraphs) => {
-    selectedParagraphs.value = associatedParagraphs.map(({ id, document_id }) => ({ paragraph_id: id, document_id }))
-  })
-}
-
 function open(targetProblemIds: string[]) {
   if (visible.value || operationLoading.value || !targetProblemIds[0]) return
   problemIds.value = [...targetProblemIds]
   visible.value = true
   documentLoading.value = true
-  return Promise.all([
-    loadDocuments(),
-    // TODO(图片联调)：确认已关联分段查询包含图片分段，并返回 id、document_id，供选中态和关联数量回显。
-    targetProblemIds.length === 1 ? resourceApi.problem.getProblemDetail(knowledgeId.value, targetProblemIds[0]) : [],
-  ])
-    .then(([, problemParagraphs]) => {
-      selectedParagraphs.value = problemParagraphs.map(({ id, document_id }) => ({ paragraph_id: id, document_id }))
-    })
+  return loadDocuments()
     .catch(() => {
       // 请求层统一提示错误，失败时保持空列表。
     })
@@ -186,7 +141,6 @@ function handleClosed() {
   paragraphSearchText.value = ''
   paragraphs.value = []
   selectedParagraphs.value = []
-  detailParagraph.value = undefined
   resourceType.value = DOCUMENT_RESOURCE_TYPE.DOCUMENT
 }
 
@@ -203,6 +157,7 @@ defineExpose({ open })
         <div v-loading="documentLoading" class="flex-column h-full min-h-0 pt-4" :inert="operationLoading">
           <!-- 切换文档或图片资源 -->
           <el-tabs
+            v-if="resourceType === DOCUMENT_RESOURCE_TYPE.IMAGE"
             v-model="resourceType"
             class="mx-4 mb-4"
             :before-leave="() => !documentLoading && !operationLoading"
@@ -212,13 +167,7 @@ defineExpose({ open })
             <el-tab-pane label="图片" :name="DOCUMENT_RESOURCE_TYPE.IMAGE" />
           </el-tabs>
           <!-- 搜索并切换候选分段所在资源 -->
-          <MkSearchList
-            v-model="documentSearchText"
-            :data="documentData"
-            :default-active="selectedDocumentId"
-            :empty-text="resourceType === DOCUMENT_RESOURCE_TYPE.IMAGE ? '暂无图片' : '暂无文档'"
-            @click="handleSelectDocument"
-          >
+          <MkSearchList v-model="documentSearchText" :data="documentData" :default-active="selectedDocumentId" @click="handleSelectDocument">
             <template #default="{ row }">
               <!-- TODO 图片 -->
               <el-image
@@ -228,6 +177,12 @@ 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="mr-2 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="ml-1 flex-center h-4 min-w-4 shrink-0 rounded-full bg-primary px-1 text-xs text-white">
@@ -253,37 +208,29 @@ defineExpose({ open })
           >
             <div class="space-y-2">
               <template v-for="paragraph in paragraphs" :key="paragraph.id">
-                <!-- 查看当前分段详情及其关联状态 -->
+                <!-- 勾选或取消本次批量关联的分段 -->
                 <el-card
                   shadow="never"
                   class="mk-paragraph-card group relative cursor-pointer"
                   :class="{ active: isSelected(paragraph.id), disabled: operationLoading }"
-                  @click="handleOpenParagraphDetail(paragraph)"
+                  @click="handleToggleParagraph(paragraph)"
                 >
-                  <!-- 关联当前问题与分段 -->
-                  <MkTooltip v-if="!isSelected(paragraph.id)" content="关联" placement="top">
-                    <el-button
-                      circle
-                      class="group-hover-visible absolute top-2 right-2 shadow-md"
-                      :disabled="operationLoading"
-                      @click.stop="handleAssociateParagraph(paragraph)"
-                    >
-                      <MkIcon name="icon_link-record_outlined" />
-                    </el-button>
-                  </MkTooltip>
-                  <!-- 取消当前问题与分段的关联 -->
-                  <MkTooltip v-else-if="!isBatchAssociation" content="取消关联" placement="top">
-                    <el-button
-                      circle
-                      class="group-hover-visible absolute top-2 right-2 shadow-md"
-                      :disabled="operationLoading"
-                      @click.stop="handleUnassociateParagraph(paragraph)"
-                    >
-                      <MkIcon name="icon_unlink_outlined" />
-                    </el-button>
-                  </MkTooltip>
-                  <h4 class="mb-2">{{ paragraph.title || '-' }}</h4>
+                  <!-- 勾选当前分段用于批量关联 -->
+                  <el-checkbox
+                    class="absolute! top-4 right-4"
+                    :model-value="isSelected(paragraph.id)"
+                    @click.stop
+                    @change="handleToggleParagraph(paragraph)"
+                  />
 
+                  <el-image
+                    v-if="resourceType === DOCUMENT_RESOURCE_TYPE.IMAGE"
+                    :src="getFileUrl(selectedDocument.meta?.source_file_id as string | undefined)"
+                    class="mr-2 size-6 shrink-0"
+                    :alt="selectedDocument.name"
+                    fit="cover"
+                  />
+                  <h4 class="mb-2">{{ paragraph.title || '-' }}</h4>
                   <MdPreview :model-value="paragraph.content" />
                   <p class="mt-2 text-sm text-N600">{{ paragraph.content.length }} 字符</p>
                 </el-card>
@@ -297,15 +244,15 @@ defineExpose({ open })
       </template>
     </MkViewLayout>
     <template #footer>
-      <div class="text-left text-sm text-N600">已关联 {{ selectedParagraphs.length }}</div>
+      <div class="flex-between">
+        <div class="text-sm text-N600">已选择 {{ selectedParagraphs.length }}</div>
+        <div>
+          <!-- 取消本次批量关联 -->
+          <el-button plain :disabled="operationLoading || documentLoading" @click="visible = false">取消</el-button>
+          <!-- 确认批量关联所选分段 -->
+          <el-button type="primary" :loading="operationLoading" @click="handleSubmit">确认</el-button>
+        </div>
+      </div>
     </template>
   </MkDialog>
-  <ParagraphDialog
-    v-if="detailParagraph"
-    ref="paragraphDialogRef"
-    title="分段详情"
-    :knowledge-id="knowledgeId"
-    :document-id="detailParagraph.document_id"
-    @closed="handleParagraphDialogClosed"
-  />
 </template>
diff --git a/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue b/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue
index a11db64ad10..00a0d70e81c 100644
--- a/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue
+++ b/ui/src/views/knowledge-detail/problem/components/ProblemDetailDrawer.vue
@@ -4,16 +4,18 @@ import type { ProblemItem, ProblemParagraph } from '@/api/types'
 import MkEditName from '@/components/mk-edit-name/index.vue'
 import { MsgSuccess } from '@/utils/message'
 import { useKnowledgeDetailContext } from '@/views/knowledge-detail/context'
-import { useDocumentDetailContext } from '@/views/document-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'
 
 defineOptions({ name: 'ProblemDetailDrawer' })
 const problem = defineModel<ProblemItem>({ required: true })
 defineProps<{ hasPrevious: boolean; hasNext: boolean }>()
 const emit = defineEmits<{ previous: []; next: []; refresh: []; closed: []; associate: [] }>()
-const { knowledgeId, resourceApi } = useKnowledgeDetailContext()
-const { resourceApi: documentResourceApi } = useDocumentDetailContext()
+const { knowledgeId, resourceApi } = useKnowledgeDetailContext({ resourceScopes: ['workspace', 'system-resource', 'system-shared'] as const })
 const visible = ref(true)
 const loading = ref(false)
 const loadFailed = ref(false)
@@ -21,50 +23,53 @@ const paragraphs = ref<ProblemParagraph[]>([])
 const selectedParagraph = ref<ProblemParagraph>()
 const paragraphDialogRef = ref<InstanceType<typeof ParagraphDialog>>()
 
+// 关联分段查询：同步数量，失败时保留当前内容并支持重试。
 function loadParagraphs() {
   loadFailed.value = false
-  return (
-    resourceApi.problem.getProblemDetail?.(knowledgeId.value, problem.value.id).then((records) => {
+  return resourceApi.problem
+    .getProblemDetail(knowledgeId.value, problem.value.id)
+    .then((records) => {
       paragraphs.value = records
       problem.value.paragraph_count = records.length
-    }) ?? Promise.resolve()
-  ).catch(() => {
-    loadFailed.value = true
-  })
+    })
+    .catch(() => {
+      loadFailed.value = true
+    })
 }
 
 function handleLoadParagraphs() {
+  if (loading.value) return
   loading.value = true
   return loadParagraphs().finally(() => {
     loading.value = false
   })
 }
 
+// 问题维护：编辑内容与解除关联后通知列表刷新。
 function handleSaveProblem(content: string): Promise<string> {
   loading.value = true
-  return (
-    resourceApi.problem.putProblem?.(knowledgeId.value, problem.value.id, content).then(() => {
+  return resourceApi.problem
+    .putProblem(knowledgeId.value, problem.value.id, content)
+    .then(() => {
       MsgSuccess('修改成功')
       emit('refresh')
       return content
-    }) ?? Promise.reject(new Error('Problem editing is unavailable'))
-  ).finally(() => {
-    loading.value = false
-  })
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 function handleUnlinkParagraph(paragraph: ProblemParagraph) {
   if (loading.value) return
   loading.value = true
-  return (
-    documentResourceApi.paragraph
-      .putUnassociateParagraphProblem?.(knowledgeId.value, paragraph.document_id, paragraph.id, problem.value.id)
-      .then(() => {
-        MsgSuccess('取消关联成功')
-        emit('refresh')
-        return loadParagraphs()
-      }) ?? Promise.resolve()
-  )
+  return resourceApi.paragraph
+    .putUnassociateParagraphProblem(knowledgeId.value, paragraph.document_id, paragraph.id, problem.value.id)
+    .then(() => {
+      MsgSuccess('取消关联成功')
+      emit('refresh')
+      return loadParagraphs()
+    })
     .catch(() => {
       // 请求层提示错误，失败时保留当前关联。
     })
@@ -73,8 +78,9 @@ function handleUnlinkParagraph(paragraph: ProblemParagraph) {
     })
 }
 
+// 分段详情按需挂载，关闭后重新读取当前关联。
 async function handleOpenParagraph(paragraph: ProblemParagraph) {
-  if (loading.value) return
+  if (loading.value || selectedParagraph.value) return
   selectedParagraph.value = paragraph
   // 先挂载带有当前文档 ID 的详情弹窗，再调用其已有打开方法。
   await nextTick()
@@ -100,6 +106,8 @@ watch(
   },
   { immediate: true },
 )
+
+defineExpose({ refresh: handleLoadParagraphs })
 </script>
 
 <template>
@@ -126,18 +134,38 @@ watch(
               </el-button>
             </MkTooltip>
 
+            <!-- 图片文档显示图片 -->
+            <el-image
+              v-if="paragraph.document_resource_type === DOCUMENT_RESOURCE_TYPE.IMAGE && paragraph.document_image_id"
+              :src="getFileUrl(paragraph.document_image_id)"
+              :alt="paragraph.title || ''"
+              fit="contain"
+              class="mb-2"
+            />
+
             <h4 class="mb-2">{{ paragraph.title || '-' }}</h4>
             <MdPreview :model-value="paragraph.content" />
             <div class="flex-align-center gap-2 text-sm text-N600">
               <span class="shrink-0">{{ paragraph.content.length }} 字符</span>
               <el-divider direction="vertical" />
-              <img :src="getFileIconUrl(paragraph.document_name)" class="size-4 shrink-0" alt="" />
+              <el-image 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"
+                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>
         </template>
       </div>
-      <MkEmpty v-else-if="!loading" description="暂无关联分段" />
+      <MkEmpty v-else-if="!loading && !loadFailed" description="暂无关联分段" />
+      <MkEmpty v-if="loadFailed" description="关联分段加载失败">
+        <!-- 重新加载当前问题的关联分段 -->
+        <el-button type="primary" :loading="loading" @click="handleLoadParagraphs">重新加载</el-button>
+      </MkEmpty>
     </div>
     <template #footer>
       <!-- 关联当前问题的分段 -->
@@ -154,6 +182,7 @@ watch(
     title="分段详情"
     :knowledge-id="knowledgeId"
     :document-id="selectedParagraph.document_id"
+    :source-file-id="selectedParagraph.document_image_id ?? undefined"
     @closed="handleParagraphClosed"
   />
 </template>
diff --git a/ui/src/views/knowledge-detail/problem/index.vue b/ui/src/views/knowledge-detail/problem/index.vue
index af473d1ca1c..b53cf2d4094 100644
--- a/ui/src/views/knowledge-detail/problem/index.vue
+++ b/ui/src/views/knowledge-detail/problem/index.vue
@@ -28,6 +28,7 @@ const selectedProblems = ref<ProblemItem[]>([])
 const problemTableRef = ref<{ clearSelection: () => void }>()
 const quickCreateRef = ref<InstanceType<typeof MkQuickCreate>>()
 const associateParagraphDialogRef = ref<InstanceType<typeof AssociateParagraphDialog>>()
+const problemDetailDrawerRef = ref<InstanceType<typeof ProblemDetailDrawer>>()
 const detailProblem = ref<ProblemItem>()
 const currentIndex = computed(() => problems.value.findIndex(({ id }) => id === detailProblem.value?.id))
 const hasPrevious = computed(() => currentIndex.value > 0 || (currentIndex.value === 0 && paginationConfig.value.currentPage > 1))
@@ -154,7 +155,7 @@ function handleOpenAssociateParagraphs(problemIds: string[]) {
 
 function handleAssociateParagraphsSuccess() {
   clearSelection()
-  return loadProblems()
+  return Promise.all([loadProblems(), problemDetailDrawerRef.value?.refresh()])
 }
 
 function handleOpenProblem(problem: ProblemItem, column: TableColumnCtx<ProblemItem> | null) {
@@ -264,6 +265,7 @@ onMounted(() => loadProblems())
   </MkTable>
   <ProblemDetailDrawer
     v-if="detailProblem"
+    ref="problemDetailDrawerRef"
     v-model="detailProblem"
     :has-previous="hasPrevious"
     :has-next="hasNext"