From 9f950db8622a81878b9bc97cf3bd1a97185ea331 Mon Sep 17 00:00:00 2001
From: wenjinbo <599483010@qq.com>
Date: Mon, 29 Sep 2025 17:42:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E5=BA=93=E6=96=87=E6=A1=A3=E5=88=97=E8=A1=A8=E5=8F=8A=E9=97=AE?=
 =?UTF-8?q?=E7=AD=94=E6=B6=88=E6=81=AF=E6=B0=94=E6=B3=A1markdown=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/chatweb/components/MessageItem.vue  |  24 +-
 .../chatweb/composables/useMessageHandlers.ts |   2 +-
 .../views/chatweb/intelRetrieval/index.vue    | 450 +++++++++++++++---
 .../datasets/components/DocumentList.vue      |   9 +-
 4 files changed, 417 insertions(+), 68 deletions(-)

diff --git a/chat-client/src/views/chatweb/components/MessageItem.vue b/chat-client/src/views/chatweb/components/MessageItem.vue
index e1a9176..a4888f5 100644
--- a/chat-client/src/views/chatweb/components/MessageItem.vue
+++ b/chat-client/src/views/chatweb/components/MessageItem.vue
@@ -944,9 +944,10 @@ const hasAnySources = (sources: TraceData | null | undefined) => {
   overflow: auto;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   background: white;
-  font-size: 0.83rem; /* 比正文(0.95rem)小2px，约为0.83rem */
-  line-height: 1.4;
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.3;
   border: 1px solid #e5e7eb;
+  table-layout: auto; /* 允许列宽根据内容自适应 */
 }
 
 ::v-deep .table-wrapper summary {
@@ -971,15 +972,15 @@ const hasAnySources = (sources: TraceData | null | undefined) => {
 
 .answer-content :deep(th),
 .answer-content :deep(td) {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem; /* 减少内边距，使表格更紧凑 */
   border: 1px solid #e5e7eb;
   text-align: left;
   vertical-align: top;
   word-wrap: break-word;
-  max-width: 200px;
+  max-width: none; /* 移除最大宽度限制，允许列宽自适应 */
   word-break: break-word;
   white-space: normal;
-  font-size: 0.83rem; /* 确保表格单元格字体也比正文小2px */
+  font-size: 0.75rem; /* 12px */
 }
 
 .answer-content :deep(th) {
@@ -987,7 +988,7 @@ const hasAnySources = (sources: TraceData | null | undefined) => {
   background: #f8fafc;
   font-weight: 600;
   color: #374151;
-  font-size: 0.83rem; /* 与表格整体字体大小保持一致，比正文小2px */
+  font-size: 0.8125rem; /* 13px */
   text-transform: uppercase;
   letter-spacing: 0.025em;
   position: sticky;
@@ -1043,21 +1044,22 @@ const hasAnySources = (sources: TraceData | null | undefined) => {
 @media (max-width: 768px) {
   .answer-content :deep(table) {
     min-width: 600px;
-    font-size: 0.75rem; /* 移动端保持比正文小的比例 */
+    font-size: 0.6875rem; /* 11px 移动端 */
     margin: 1rem 0;
     border: 1px solid #e5e7eb;
+    line-height: 1.2; /* 移动端更紧凑的行高 */
   }
   
   .answer-content :deep(th),
   .answer-content :deep(td) {
-    padding: 0.5rem 0.75rem;
-    max-width: 150px;
+    padding: 0.375rem 0.5rem; /* 移动端更紧凑的内边距 */
+    max-width: none; /* 移动端也允许列宽自适应 */
     border: 1px solid #e5e7eb;
-    font-size: 0.75rem; /* 移动端表格单元格字体 */
+    font-size: 0.6875rem; /* 11px 移动端表格内容 */
   }
   
   .answer-content :deep(th) {
-    font-size: 0.75rem; /* 移动端表头字体 */
+    font-size: 0.75rem; /* 12px 移动端表头 */
     border-bottom: 2px solid #e5e7eb;
   }
 }
diff --git a/chat-client/src/views/chatweb/composables/useMessageHandlers.ts b/chat-client/src/views/chatweb/composables/useMessageHandlers.ts
index 0dcdaa7..364db84 100644
--- a/chat-client/src/views/chatweb/composables/useMessageHandlers.ts
+++ b/chat-client/src/views/chatweb/composables/useMessageHandlers.ts
@@ -77,7 +77,7 @@ export function useMessageHandlers() {
         /<table>/g, 
         `<details class="table-wrapper" open>
         <summary>
-            Expand / Collapse table
+            展开 / 折叠表格
         </summary>
         <div class="table-container"><table class="excel-table" border="1" width="auto" cellspacing="0" cellpadding="0">`
       ).replace(
diff --git a/chat-client/src/views/chatweb/intelRetrieval/index.vue b/chat-client/src/views/chatweb/intelRetrieval/index.vue
index 0383f81..8f29d8e 100644
--- a/chat-client/src/views/chatweb/intelRetrieval/index.vue
+++ b/chat-client/src/views/chatweb/intelRetrieval/index.vue
@@ -1,14 +1,27 @@
 <template>
   <div class="main-container">
     <!-- 搜索头部 -->
-    <div class="search-header">
+    <div class="search-header" :class="{ 'collapsed': headerCollapsed }">
       <div class="search-logo">
         <h1>智能检索</h1>
+        <!-- 折叠/展开按钮 -->
+        <button 
+          v-if="hasSearched" 
+          class="collapse-toggle-btn" 
+          @click="toggleHeaderCollapse"
+          :class="{ 'collapsed': headerCollapsed }"
+        >
+          <svg v-if="!headerCollapsed" viewBox="0 0 24 24" width="20" height="20">
+            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
+          </svg>
+          <svg v-else viewBox="0 0 24 24" width="20" height="20">
+            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
+          </svg>
+        </button>
       </div>
 
-
       <!-- 搜索框 -->
-      <div class="search-box-container">
+      <div class="search-box-container" v-show="!headerCollapsed">
         <div class="search-box-wrapper">
           <div class="search-box">
             <input
@@ -79,12 +92,15 @@
         找到约 {{ totalResults }} 条结果 (用时 {{ searchTime }}秒)
       </div>
 
-      <!-- 结果列表 -->
-      <div class="results-list">
-        <div
-          v-for="(result, index) in paginatedResults"
-          :key="index"
+      <!-- 结果容器 -->
+      <div class="results-container" :class="{ 'preview-mode': previewDrawerVisible }">
+        <!-- 左侧结果列表 -->
+        <div class="results-list-left">
+          <div
+            v-for="(result, index) in leftColumnResults"
+            :key="`left-${index}`"
           class="result-item"
+            :class="{ 'preview-selected': selectedPreviewIndex === getGlobalIndex(index) }"
         >
           <!-- 文件名和置信度 -->
           <div class="result-header">
@@ -151,51 +167,93 @@
         </div>
       </div>
 
-      <!-- 分页组件 -->
-      <div class="pagination-container" v-if="totalResults > pageSize">
-        <el-pagination
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :page-sizes="[5, 10, 20, 50]"
-          :total="totalResults"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+        <!-- 右侧结果列表 -->
+        <div class="results-list-right" v-if="!previewDrawerVisible">
+          <div
+            v-for="(result, index) in rightColumnResults"
+            :key="`right-${index}`"
+            class="result-item"
+          >
+            <!-- 文件名和置信度 -->
+            <div class="result-header">
+              <div class="file-info">
+                <img
+                  :src="getFileTypeIcon(getFileExtension(result.retrievalDto?.name || ''))"
+                  :alt="getFileExtension(result.retrievalDto?.name || '')"
+                  class="file-type-icon"
+                />
+                <h3 class="result-title" @click="handleTitleClick(result)">
+                  {{ result.retrievalDto?.name || "未知文档" }}
+                </h3>
+              </div>
+              <div class="confidence-score">
+                <span class="confidence-label">置信度:</span>
+                <span class="confidence-value" :class="getConfidenceClass(result.score)">
+                  {{ (parseFloat(result.score) * 100).toFixed(1) }}%
+                </span>
       </div>
     </div>
 
-    <!-- 空状态 -->
-    <div class="empty-state" v-if="!hasSearched">
-      <div class="empty-icon">
-        <svg viewBox="0 0 24 24">
-          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+            <!-- 文档内容摘要 -->
+            <div class="result-content">
+              <p class="content-snippet" v-html="getHighlightedContent(result.retrievalDto?.content || '暂无内容', getGlobalIndex(index + leftColumnResults.length))">
+              </p>
+              <div v-if="(result.retrievalDto?.content || '').length > 200" class="expand-btn" @click="toggleExpand(getGlobalIndex(index + leftColumnResults.length))">
+                {{ expandedItems.includes(getGlobalIndex(index + leftColumnResults.length)) ? '收起' : '展开更多' }}
+      </div>
+    </div>
+
+            <!-- 文档信息 -->
+            <div class="result-meta">
+              <span class="meta-item">
+                <svg class="meta-icon" viewBox="0 0 24 24">
+                  <path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z" />
         </svg>
+                知识库: {{ result.retrievalDto?.datasetName || '未知知识库' }}
+              </span>
       </div>
-      <h3>开始您的智能检索</h3>
-      <p>输入关键词，从海量文档中快速找到您需要的信息</p>
+
+            <!-- 操作按钮 -->
+            <div class="result-actions">
+              <el-button
+                type="info"
+                :icon="View"
+                text
+                class="action-btn preview-btn"
+                @click="handlePreview(result)"
+                v-if="result.retrievalDto?.sourceUrl && canPreview(result.retrievalDto?.name)"
+              >
+                预览
+              </el-button>
+              <el-button
+                type="success"
+                :icon="Download"
+                text
+                class="action-btn"
+                @click="handleDownload(result)"
+                v-if="result.retrievalDto?.sourceUrl"
+              >
+                下载
+              </el-button>
+            </div>
+          </div>
     </div>
 
-    <!-- 无结果状态 -->
-    <div class="no-results" v-if="hasSearched && allResults.length === 0 && !loading">
-      <div class="no-results-icon">
-        <svg viewBox="0 0 24 24">
-          <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
-        </svg>
-      </div>
-      <h3>未找到相关结果</h3>
-      <p>请尝试使用不同的关键词或搜索方法</p>
-    </div>
-
-    <!-- 预览抽屉 -->
-    <el-drawer
-      v-model="previewDrawerVisible"
-      title="文件预览"
-      :direction="'rtl'"
-      size="50%"
-      class="preview-drawer"
-    >
-      <div v-loading="previewLoading">
+        <!-- 右侧预览窗口 -->
+        <div class="preview-panel" v-if="previewDrawerVisible">
+          <div class="preview-header">
+            <h3>文件预览</h3>
+            <el-button 
+              type="text" 
+              @click="closePreview"
+              class="close-preview-btn"
+            >
+              <svg viewBox="0 0 24 24" width="16" height="16">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+              </svg>
+            </el-button>
+          </div>
+          <div class="preview-content" v-loading="previewLoading">
         <!-- TXT 文件预览 -->
         <div v-if="previewFileType === 'txt'" class="text-preview-container">
           <pre class="text-preview">{{ previewTextContent }}</pre>
@@ -297,7 +355,45 @@
           <p>您可以下载文件后使用相应的应用程序打开</p>
         </div>
       </div>
-    </el-drawer>
+        </div>
+      </div>
+
+      <!-- 分页组件 -->
+      <div class="pagination-container" v-if="totalResults > pageSize">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[5, 10, 20, 50]"
+          :total="totalResults"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div class="empty-state" v-if="!hasSearched">
+      <div class="empty-icon">
+        <svg viewBox="0 0 24 24">
+          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+        </svg>
+      </div>
+      <h3>开始您的智能检索</h3>
+      <p>输入关键词，从海量文档中快速找到您需要的信息</p>
+    </div>
+
+    <!-- 无结果状态 -->
+    <div class="no-results" v-if="hasSearched && allResults.length === 0 && !loading">
+      <div class="no-results-icon">
+        <svg viewBox="0 0 24 24">
+          <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
+        </svg>
+      </div>
+      <h3>未找到相关结果</h3>
+      <p>请尝试使用不同的关键词或搜索方法</p>
+    </div>
+
     <div>
 
 
@@ -378,6 +474,8 @@ const previewFileUrl = ref('')
 const previewTextContent = ref('')
 const previewMarkdownContent = ref('')
 const dialogVisible = ref(false)
+const selectedPreviewIndex = ref(-1) // 当前预览的索引
+const headerCollapsed = ref(false) // 头部折叠状态
 
 const knowledgeList = ref([])
 
@@ -423,6 +521,11 @@ const removeKnowledge = (kbId: string) => {
 const handleSelectKnowledge = () => {
   dialogVisible.value = true
 }
+
+// 切换头部折叠状态
+const toggleHeaderCollapse = () => {
+  headerCollapsed.value = !headerCollapsed.value
+}
 // 搜索处理函数
 const handleSearch = async () => {
   if (!searchQuery.value.trim()) {
@@ -457,6 +560,13 @@ const handleSearch = async () => {
     totalResults.value = allResults.value.length
     currentPage.value = 1 // 重置到第一页
     searchTime.value = ((Date.now() - startTime) / 1000).toFixed(2)
+    
+    // 搜索成功后自动折叠头部
+    if (allResults.value.length > 0) {
+      setTimeout(() => {
+        headerCollapsed.value = true
+      }, 500) // 延迟500ms后折叠，让用户看到搜索结果
+    }
   } catch (error) {
     console.error('搜索失败:', error)
     ElMessage.error('搜索失败，请稍后重试')
@@ -572,6 +682,24 @@ const paginatedResults = computed(() => {
   return allResults.value.slice(start, end)
 })
 
+// 计算左列结果（当预览模式时，所有结果都在左列）
+const leftColumnResults = computed(() => {
+  if (previewDrawerVisible.value) {
+    return paginatedResults.value
+  }
+  // 正常模式：左列显示奇数索引的结果（1,3,5...）
+  return paginatedResults.value.filter((_, index) => index % 2 === 0)
+})
+
+// 计算右列结果（仅在非预览模式时显示）
+const rightColumnResults = computed(() => {
+  if (previewDrawerVisible.value) {
+    return []
+  }
+  // 正常模式：右列显示偶数索引的结果（2,4,6...）
+  return paginatedResults.value.filter((_, index) => index % 2 === 1)
+})
+
 // 分页大小改变处理
 const handleSizeChange = (newSize: number) => {
   pageSize.value = newSize
@@ -657,8 +785,13 @@ const handlePreview = async (result: any) => {
     return
   }
 
+  // 设置预览模式
   previewDrawerVisible.value = true
   previewLoading.value = true
+  
+  // 记录当前预览的索引
+  const resultIndex = paginatedResults.value.findIndex(r => r === result)
+  selectedPreviewIndex.value = getGlobalIndex(resultIndex)
 
   // 重置 Excel 预览状态
   excelRowLimited.value = false
@@ -725,6 +858,17 @@ const handlePreview = async (result: any) => {
   }
 }
 
+// 关闭预览
+const closePreview = () => {
+  previewDrawerVisible.value = false
+  selectedPreviewIndex.value = -1
+  previewLoading.value = false
+  previewFileType.value = ''
+  previewFileUrl.value = ''
+  previewTextContent.value = ''
+  previewMarkdownContent.value = ''
+}
+
 // 从预览中下载文件
 const handleDownloadFromPreview = async () => {
   // 在智能检索中，我们可以通过当前预览的文件URL直接下载
@@ -829,6 +973,16 @@ onMounted(() => {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   position: relative;
   z-index: 2;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.search-header.collapsed {
+  padding: 15px 20px;
+}
+
+.search-header.collapsed .search-logo h1 {
+  font-size: 24px;
+  margin-bottom: 0;
 }
 
 .search-logo h1 {
@@ -856,6 +1010,41 @@ onMounted(() => {
   border-radius: 2px;
 }
 
+/* 折叠按钮样式 */
+.collapse-toggle-btn {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(102, 126, 234, 0.3);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
+  color: #667eea;
+}
+
+.collapse-toggle-btn:hover {
+  background: rgba(102, 126, 234, 0.1);
+  border-color: rgba(102, 126, 234, 0.5);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
+  transform: translateY(-50%) scale(1.05);
+}
+
+.collapse-toggle-btn svg {
+  transition: transform 0.3s ease;
+}
+
+.collapse-toggle-btn.collapsed svg {
+  transform: rotate(180deg);
+}
+
 /* 搜索框容器 */
 .search-box-container {
   max-width: 600px;
@@ -1005,7 +1194,7 @@ onMounted(() => {
 .search-results {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 20px 0;
   position: relative;
   z-index: 1;
   background: rgba(255, 255, 255, 0.05);
@@ -1016,12 +1205,99 @@ onMounted(() => {
   color: #70757a;
   font-size: 14px;
   margin-bottom: 20px;
-  padding-left: 8px;
+  padding: 0 20px;
 }
 
-.results-list {
-  max-width: 800px;
-  margin-bottom: 20px;
+/* 结果容器 */
+.results-container {
+  display: flex;
+  gap: 20px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 100%;
+  padding: 0 20px;
+}
+
+.results-container.preview-mode {
+  gap: 10px;
+  padding: 0 10px;
+}
+
+/* 左侧结果列表 */
+.results-list-left {
+  flex: 1;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.results-container.preview-mode .results-list-left {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+/* 右侧结果列表 */
+.results-list-right {
+  flex: 1;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.results-container.preview-mode .results-list-right {
+  opacity: 0;
+  transform: translateX(100%);
+  pointer-events: none;
+}
+
+/* 预览面板 */
+.preview-panel {
+  flex: 0 0 50%;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.results-container.preview-mode .preview-panel {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
+}
+
+.preview-header h3 {
+  margin: 0;
+  color: #667eea;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.close-preview-btn {
+  color: #909399;
+  transition: all 0.2s ease;
+}
+
+.close-preview-btn:hover {
+  color: #667eea;
+  background-color: rgba(102, 126, 234, 0.1);
+}
+
+.preview-content {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
 }
 
 /* 结果项 */
@@ -1058,6 +1334,19 @@ onMounted(() => {
   border-color: rgba(102, 126, 234, 0.3);
 }
 
+/* 预览选中状态 */
+.result-item.preview-selected {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+  border-color: rgba(102, 126, 234, 0.5);
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
+  transform: translateY(-2px);
+}
+
+.result-item.preview-selected::before {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  height: 4px;
+}
+
 @keyframes slideInUp {
   from {
     opacity: 0;
@@ -1257,7 +1546,7 @@ onMounted(() => {
 .pagination-container {
   display: flex;
   justify-content: center;
-  padding: 20px 0;
+  padding: 20px;
   border-top: 1px solid #e8eaed;
   margin-top: 20px;
 }
@@ -1302,6 +1591,21 @@ onMounted(() => {
 }
 
 /* 响应式设计 */
+@media (max-width: 1200px) {
+  .results-container {
+    padding: 0 15px;
+  }
+  
+  .results-container.preview-mode {
+    padding: 0 8px;
+  }
+  
+  .results-container.preview-mode .results-list-left,
+  .results-container.preview-mode .preview-panel {
+    flex: 0 0 50%;
+  }
+}
+
 @media (max-width: 768px) {
   .search-header {
     padding: 16px;
@@ -1311,6 +1615,16 @@ onMounted(() => {
     font-size: 24px;
   }
 
+  .collapse-toggle-btn {
+    right: 10px;
+    width: 36px;
+    height: 36px;
+  }
+
+  .search-header.collapsed .search-logo h1 {
+    font-size: 20px;
+  }
+
   .search-box-container {
     max-width: 100%;
   }
@@ -1319,6 +1633,28 @@ onMounted(() => {
     gap: 12px;
   }
 
+  .results-container {
+    flex-direction: column;
+    gap: 16px;
+    padding: 0 10px;
+  }
+
+  .results-container.preview-mode {
+    flex-direction: column;
+    padding: 0 5px;
+  }
+
+  .results-container.preview-mode .results-list-left {
+    flex: 1;
+    max-width: 100%;
+  }
+
+  .results-container.preview-mode .preview-panel {
+    flex: 1;
+    max-width: 100%;
+    margin-top: 16px;
+  }
+
   .result-header {
     flex-direction: column;
     align-items: flex-start;
@@ -1354,6 +1690,14 @@ onMounted(() => {
   .pagination-container :deep(.el-pagination .el-pagination__jump) {
     display: none;
   }
+
+  .preview-header {
+    padding: 16px 20px;
+  }
+
+  .preview-header h3 {
+    font-size: 16px;
+  }
 }
 
 /* 操作按钮样式 */
diff --git a/chat-client/src/views/datasets/components/DocumentList.vue b/chat-client/src/views/datasets/components/DocumentList.vue
index 5328e32..b68f4f5 100644
--- a/chat-client/src/views/datasets/components/DocumentList.vue
+++ b/chat-client/src/views/datasets/components/DocumentList.vue
@@ -98,7 +98,7 @@
             type="index"
             :index="indexMethod"
           />
-          <el-table-column prop="fileName" :label="t('vabI18n.knowledge.document.table.fileName')" min-width="250" sortable="custom" :sort-orders="['ascending', 'descending']">
+          <el-table-column prop="fileName" :label="t('vabI18n.knowledge.document.table.fileName')" min-width="200" sortable="custom" :sort-orders="['ascending', 'descending']">
             <template #default="{ row }">
               <div class="file-name-cell">
                 <img
@@ -134,13 +134,13 @@
             </template>
           </el-table-column>
           <el-table-column prop="createDate" :label="t('vabI18n.knowledge.document.table.createDate')" width="180" sortable="custom" :sort-orders="['ascending', 'descending']" />
-          <el-table-column prop="charCount" :label="t('vabI18n.knowledge.document.table.charCount')" width="120" align="right" sortable="custom" :sort-orders="['ascending', 'descending']">
+          <el-table-column prop="charCount" :label="t('vabI18n.knowledge.document.table.fileSize', '文件大小')" width="120" align="right" sortable="custom" :sort-orders="['ascending', 'descending']">
             <template #default="{ row }">
               <span class="char-count" v-if="row.type === 'file'">{{ formatFileSize(row.charCount) }}</span>
               <span v-else class="folder-indicator">--</span>
             </template>
           </el-table-column>
-          <el-table-column :label="t('vabI18n.knowledge.document.table.actions')" width="380" fixed="right">
+          <el-table-column :label="t('vabI18n.knowledge.document.table.actions')" width="320" fixed="right">
             <template #default="{ row }">
               <div class="action-buttons">
                 <!-- 文件操作 -->
@@ -1594,6 +1594,7 @@ const handleClosePreviewDialog = () => {
   gap: 20px;
   position: relative;
   transition: all 0.3s ease;
+  width: 100%;
 }
 
 
@@ -1603,6 +1604,8 @@ const handleClosePreviewDialog = () => {
   border-radius: 8px;
   padding: 24px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  flex: 1;
 }
 
 .action-bar {