feat(file-detail): 重构文件详情组件，添加Markdown内容预览功能

web/src/components/FileDetailModal.vue

@@ -4,38 +4,13 @@
     :title="file?.filename || '文件详情'"
     width="1200px"
     :footer="null"
+    wrap-class-name="file-detail"
     @after-open-change="afterOpenChange"
+    :bodyStyle="{ height: '80vh', padding: '0' }"
   >
     <div class="file-detail-content" v-if="file">
-      <div class="file-info-grid">
-        <div class="info-item">
-          <label>文件ID:</label>
-          <span>{{ file.file_id }}</span>
-        </div>
-        <div class="info-item">
-          <label>上传时间:</label>
-          <span>{{ formatStandardTime(Math.round(file.created_at*1000)) }}</span>
-        </div>
-        <div class="info-item">
-          <label>处理状态:</label>
-          <span class="status-badge" :class="file.status">
-            {{ getStatusText(file.status) }} - {{ file.lines?.length || 0 }} 行
-          </span>
-        </div>
-      </div>
-
       <div class="file-content-section" v-if="file.lines && file.lines.length > 0">
-        <h4>文件内容预览</h4>
+        <MarkdownContentViewer :chunks="file.lines" />
-        <div class="content-lines">
-          <div
-            v-for="(line, index) in file.lines"
-            :key="index"
-            class="content-line"
-          >
-            <span class="line-number">{{ index + 1 }}</span>
-            <span class="line-text">{{ line.text || line }}</span>
-          </div>
-        </div>
       </div>
 
       <div v-else-if="loading" class="loading-container">
@@ -71,68 +46,15 @@ const afterOpenChange = (open) => {
 
 // 导入工具函数
 import { getStatusText, formatStandardTime } from '@/utils/file_utils';
+import MarkdownContentViewer from './MarkdownContentViewer.vue';
 </script>
 
 <style scoped>
 .file-detail-content {
-  max-height: 70vh;
+  height: 100%;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  height: 100%;
-}
-
-.file-info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.info-item label {
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.info-item span {
-  font-size: 14px;
-}
-
-.status-badge {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.status-badge.done {
-  background-color: #f6ffed;
-  color: #52c41a;
-  border: 1px solid #b7eb8f;
-}
-
-.status-badge.failed {
-  background-color: #fff2f0;
-  color: #ff4d4f;
-  border: 1px solid #ffccc7;
-}
-
-.status-badge.processing {
-  background-color: #e6f7ff;
-  color: #1890ff;
-  border: 1px solid #91d5ff;
-}
-
-.status-badge.waiting {
-  background-color: #fffbe6;
-  color: #faad14;
-  border: 1px solid #ffe58f;
 }
 
 .file-content-section h4 {
@@ -141,36 +63,6 @@ import { getStatusText, formatStandardTime } from '@/utils/file_utils';
   font-weight: 600;
 }
 
-.content-lines {
-  max-height: 400px;
-  overflow-y: auto;
-  border: 1px solid #f0f0f0;
-  border-radius: 4px;
-  padding: 8px;
-}
-
-.content-line {
-  display: flex;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.line-number {
-  width: 40px;
-  color: #ccc;
-  text-align: right;
-  padding-right: 8px;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.line-text {
-  flex: 1;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
 .loading-container {
   display: flex;
   justify-content: center;
@@ -184,3 +76,11 @@ import { getStatusText, formatStandardTime } from '@/utils/file_utils';
   color: #999;
 }
 </style>
+
+<style lang="less">
+.file-detail {
+  .ant-modal {
+    top: 20px;
+  }
+}
+</style>

web/src/components/MarkdownContentViewer.vue

@@ -0,0 +1,404 @@
+<template>
+  <div class="markdown-content-viewer">
+    <div class="viewer-header">
+      <h4>文件内容</h4>
+      <div class="header-controls">
+        <div class="header-info">
+          <span>共 {{ mappedChunks.length }} 个片段</span>
+          <span>总长度 {{ formatTextLength(mergedContent.length) }}</span>
+        </div>
+        <button
+          class="toggle-btn"
+          @click="toggleChunkPanel"
+          :title="chunkPanelVisible ? '隐藏片段列表' : '显示片段列表'"
+        >
+          {{ chunkPanelVisible ? '«' : '»' }}
+        </button>
+      </div>
+    </div>
+
+    <div class="viewer-container">
+      <!-- 左侧：Markdown内容 -->
+      <div class="content-panel">
+        <MdPreview
+          :modelValue="mergedContent"
+          :theme="theme"
+          :previewTheme="previewTheme"
+          :codeTheme="codeTheme"
+          class="markdown-content"
+        />
+      </div>
+
+      <!-- 右侧：Chunk信息 -->
+      <div
+        class="chunk-panel"
+        v-show="chunkPanelVisible"
+      >
+        <div class="chunk-list">
+          <div
+            v-for="(chunk, index) in mappedChunks"
+            :key="chunk.id"
+            class="chunk-item"
+            :class="{
+              'active': activeChunkIndex === index,
+              'highlighted': highlightedChunkIndex === index
+            }"
+            @click="handleChunkClick(index)"
+            @mouseenter="highlightChunk(index)"
+            @mouseleave="unhighlightChunk()"
+          >
+            <div class="chunk-header">
+              <span class="chunk-order">#{{ chunk.chunk_order_index }}</span>
+              <span class="chunk-id">{{ chunk.id }}</span>
+            </div>
+            <div class="chunk-meta">
+              <span class="chunk-length">{{ formatTextLength(chunk.content.length) }}</span>
+              <span class="chunk-range">{{ chunk.startOffset }}-{{ chunk.endOffset }}</span>
+            </div>
+            <div class="chunk-preview">{{ getChunkPreview(chunk.content) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 悬浮提示 -->
+    <div
+      v-if="showTooltip && currentChunk"
+      class="chunk-tooltip"
+      :style="tooltipStyle"
+    >
+      <div class="tooltip-header">
+        <strong>片段信息</strong>
+      </div>
+      <div class="tooltip-content">
+        <div class="tooltip-row">
+          <span class="label">ID:</span>
+          <span class="value">{{ currentChunk.id }}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="label">序号:</span>
+          <span class="value">{{ currentChunk.chunk_order_index }}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="label">位置:</span>
+          <span class="value">{{ currentChunk.startOffset }} - {{ currentChunk.endOffset }}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="label">长度:</span>
+          <span class="value">{{ formatTextLength(currentChunk.content.length) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { MdPreview } from 'md-editor-v3';
+import 'md-editor-v3/lib/preview.css';
+import { mergeChunks, getChunkPreview } from '@/utils/chunkUtils';
+
+const props = defineProps({
+  chunks: {
+    type: Array,
+    default: () => []
+  }
+});
+
+// 响应式引用
+const showTooltip = ref(false);
+const currentChunk = ref(null);
+const tooltipStyle = ref({ top: '0px', left: '0px' });
+const activeChunkIndex = ref(null);
+const highlightedChunkIndex = ref(null);
+const chunkPanelVisible = ref(true);
+
+// 主题设置
+const theme = ref('light');
+const previewTheme = ref('github');
+const codeTheme = ref('atom');
+
+// 合并chunks
+const mergeResult = computed(() => mergeChunks(props.chunks));
+const mergedContent = computed(() => mergeResult.value.content);
+const mappedChunks = computed(() => mergeResult.value.chunks);
+
+// 格式化文本长度
+function formatTextLength(length) {
+  if (!length && length !== 0) return '0 字符';
+
+  if (length < 1000) {
+    return `${length} 字符`;
+  } else {
+    return `${(length / 1000).toFixed(1)}k 字符`;
+  }
+}
+
+// 高亮chunk
+function highlightChunk(index) {
+  if (!mappedChunks.value?.[index]) return;
+  highlightedChunkIndex.value = index;
+  currentChunk.value = mappedChunks.value[index];
+}
+
+function unhighlightChunk() {
+  highlightedChunkIndex.value = null;
+  currentChunk.value = null;
+}
+
+// 处理chunk点击
+function handleChunkClick(index) {
+  if (!mappedChunks.value?.[index]) return;
+  activeChunkIndex.value = index;
+}
+
+// 切换chunk面板显示
+function toggleChunkPanel() {
+  chunkPanelVisible.value = !chunkPanelVisible.value;
+}
+
+// 处理鼠标移动显示tooltip
+function handleMouseMove(event) {
+  if (!currentChunk.value) return;
+
+  tooltipStyle.value = {
+    top: event.clientY + 10 + 'px',
+    left: event.clientX + 10 + 'px'
+  };
+}
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('mousemove', handleMouseMove);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove);
+});
+</script>
+
+<style scoped>
+.markdown-content-viewer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.viewer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 16px;
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.toggle-btn {
+  /* background: var(--main-color); */
+  /* color: white; */
+  border: none;
+  border-radius: 4px;
+  width: 28px;
+  height: 24px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: bold;
+  transition: all 0.2s ease;
+}
+
+.toggle-btn:hover {
+  background: var(--gray-200);
+}
+
+.viewer-header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.header-info {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #666;
+}
+
+.viewer-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.content-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: white;
+  border-right: 1px solid #e8e8e8;
+  min-height: 0; /* 关键：确保flex项目可以缩小 */
+}
+
+.markdown-content {
+  min-height: 100%;
+  overflow: visible;
+}
+
+/* MdPreview 组件样式覆盖 */
+.markdown-content :deep(.md-editor) {
+  /* height: auto !important; */
+  min-height: 100%;
+}
+
+.markdown-content :deep(.md-editor-preview) {
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  /* height: auto !important; */
+  font-size: small;
+  min-height: 100%;
+}
+
+.markdown-content :deep(.md-editor-preview-wrapper) {
+  padding: 0;
+  /* height: auto !important; */
+  min-height: 100%;
+}
+
+.chunk-panel {
+  width: 300px;
+  overflow-y: auto;
+  background: #fafafa;
+  padding: 16px;
+  min-height: 0; /* 确保flex项目可以缩小 */
+}
+
+.chunk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chunk-item {
+  background: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  padding: 12px;
+  /* cursor: pointer; */
+  /* transition: all 0.2s ease; */
+  /* user-select: none; */
+}
+
+.chunk-item:hover {
+  border-color: var(--main-color);
+  box-shadow: 0 2px 8px rgba(1, 97, 121, 0.1);
+}
+
+/* .chunk-item.active {
+  border-color: var(--main-color);
+  background: var(--main-50);
+  box-shadow: 0 2px 8px rgba(1, 97, 121, 0.2);
+} */
+/*
+.chunk-item.highlighted {
+  border-color: var(--color-success);
+  background: var(--main-50);
+} */
+
+.chunk-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.chunk-order {
+  font-weight: 600;
+  color: var(--main-color);
+  font-size: 12px;
+}
+
+.chunk-id {
+  font-size: 11px;
+  color: var(--gray-500);
+  font-family: monospace;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chunk-meta {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 11px;
+  color: var(--gray-600);
+}
+
+.chunk-preview {
+  font-size: 11px;
+  color: var(--gray-500);
+  line-height: 1.4;
+  /* max-height: 40px; */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  line-clamp: 4;
+}
+
+.chunk-tooltip {
+  position: fixed;
+  background: white;
+  border: 1px solid var(--gray-300);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 12px;
+  z-index: 1000;
+  min-width: 250px;
+  max-width: 350px;
+  pointer-events: none;
+}
+
+.tooltip-header {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.tooltip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tooltip-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.tooltip-row .label {
+  font-weight: 500;
+  color: var(--gray-600);
+  min-width: 50px;
+  flex-shrink: 0;
+}
+
+.tooltip-row .value {
+  color: var(--gray-1000);
+  flex: 1;
+  word-break: break-all;
+}
+</style>

web/src/utils/chunkUtils.js

@@ -0,0 +1,134 @@
+/**
+ * Chunk合并工具函数
+ * 用于合并多个chunk并处理重叠内容
+ */
+
+/**
+ * 查找两个字符串的重叠部分
+ * @param {string} str1 - 第一个字符串
+ * @param {string} str2 - 第二个字符串
+ * @returns {string} - 重叠部分的内容
+ */
+export function findOverlap(str1, str2) {
+  if (!str1 || !str2) return '';
+
+  const maxOverlap = Math.min(str1.length, str2.length);
+  let overlap = '';
+
+  // 从最长可能的重叠开始检查
+  for (let i = maxOverlap; i > 0; i--) {
+    const endStr1 = str1.slice(-i);
+    const startStr2 = str2.slice(0, i);
+
+    if (endStr1 === startStr2) {
+      overlap = endStr1;
+      break;
+    }
+  }
+
+  return overlap;
+}
+
+/**
+ * 合并chunks并处理重叠内容
+ * @param {Array} chunks - chunk数组，每个chunk包含id, content, chunk_order_index
+ * @returns {Object} - 合并结果，包含content和chunks数组
+ */
+export function mergeChunks(chunks) {
+  if (!chunks || chunks.length === 0) {
+    return { content: '', chunks: [] };
+  }
+
+  // 按order排序
+  const sorted = [...chunks].sort((a, b) => a.chunk_order_index - b.chunk_order_index);
+  const merged = [];
+  let currentContent = '';
+
+  for (let i = 0; i < sorted.length; i++) {
+    const chunk = sorted[i];
+    const content = chunk.content;
+
+    if (i === 0) {
+      // 第一个chunk直接添加
+      currentContent = content;
+      merged.push({
+        ...chunk,
+        startOffset: 0,
+        endOffset: content.length
+      });
+    } else {
+      // 查找重叠部分
+      const overlap = findOverlap(currentContent, content);
+      const newContent = content.slice(overlap.length);
+
+      if (newContent.length > 0) {
+        const startOffset = currentContent.length;
+        currentContent += newContent;
+        merged.push({
+          ...chunk,
+          startOffset,
+          endOffset: currentContent.length
+        });
+      }
+    }
+  }
+
+  return { content: currentContent, chunks: merged };
+}
+
+/**
+ * 将文本分割成段落
+ * @param {string} content - 文本内容
+ * @returns {Array} - 段落数组
+ */
+export function splitIntoParagraphs(content) {
+  if (!content) return [];
+
+  // 按换行符分割，保留空段落
+  return content.split(/\n\n+/).filter(para => para.trim() !== '');
+}
+
+/**
+ * 为每个段落找到对应的chunk
+ * @param {Array} paragraphs - 段落数组
+ * @param {Array} mappedChunks - 映射后的chunks
+ * @returns {Array} - 包含chunk信息的段落
+ */
+export function mapParagraphsToChunks(paragraphs, mappedChunks) {
+  if (!paragraphs || !mappedChunks) return [];
+
+  let currentOffset = 0;
+  return paragraphs.map(paragraph => {
+    const paragraphLength = paragraph.length + 2; // +2 for the \n\n
+
+    // 找到包含此位置的chunk
+    const chunk = mappedChunks.find(chunk =>
+      currentOffset >= chunk.startOffset && currentOffset < chunk.endOffset
+    ) || mappedChunks[0];
+
+    const result = {
+      content: paragraph,
+      chunk,
+      startOffset: currentOffset,
+      endOffset: currentOffset + paragraphLength
+    };
+
+    currentOffset += paragraphLength;
+    return result;
+  });
+}
+
+/**
+ * 获取chunk的预览文本
+ * @param {string} content - chunk内容
+ * @param {number} maxLength - 最大长度
+ * @returns {string} - 预览文本
+ */
+export function getChunkPreview(content, maxLength = 100) {
+  if (!content) return '';
+
+  const text = content.replace(/\n+/g, ' ').trim();
+  if (text.length <= maxLength) return text;
+
+  return text.slice(0, maxLength) + '...';
+}