From 6f60a25b5a58e2031940eb8a1ec9b654b94b069a Mon Sep 17 00:00:00 2001
From: moon <2623532423@qq.com>
Date: Thu, 18 Sep 2025 18:01:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E6=AE=B5=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=9C=A8=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E5=BA=93=E6=9F=A5=E7=9C=8B=E6=96=87=E4=BB=B6=EF=BC=8C=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E7=9C=8B=E5=88=B0=E5=85=B6=E5=88=86=E6=AE=B5=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E4=B8=8E=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chat-client/src/api/Segment.ts                |   9 +
 .../datasets/components/DocumentList.vue      | 514 +++++++++++-------
 .../controller/DocumentSegmentController.java |  29 +
 .../postgresql/DifyDocumentSegmentMapper.java |  13 +
 .../service/dify/DocumentSegmentService.java  |  10 +
 .../dify/impl/DocumentSegmentServiceImpl.java |  22 +
 .../postgresql/DifyDocumentSegmentMapper.xml  |  15 +
 7 files changed, 414 insertions(+), 198 deletions(-)
 create mode 100644 chat-client/src/api/Segment.ts
 create mode 100644 chat-server/src/main/java/com/bjtds/brichat/controller/DocumentSegmentController.java
 create mode 100644 chat-server/src/main/java/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.java
 create mode 100644 chat-server/src/main/java/com/bjtds/brichat/service/dify/DocumentSegmentService.java
 create mode 100644 chat-server/src/main/java/com/bjtds/brichat/service/dify/impl/DocumentSegmentServiceImpl.java
 create mode 100644 chat-server/src/main/resources/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.xml

diff --git a/chat-client/src/api/Segment.ts b/chat-client/src/api/Segment.ts
new file mode 100644
index 0000000..1eb1fa2
--- /dev/null
+++ b/chat-client/src/api/Segment.ts
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getSegmentList(params: { datasetId: string; documentId: string }) {
+  return request({
+    url: '/brichat-service/documentSegment/selectSegments',
+    method: 'get',
+    params,
+  })
+}
diff --git a/chat-client/src/views/datasets/components/DocumentList.vue b/chat-client/src/views/datasets/components/DocumentList.vue
index 8e0677a..5ff6a8c 100644
--- a/chat-client/src/views/datasets/components/DocumentList.vue
+++ b/chat-client/src/views/datasets/components/DocumentList.vue
@@ -2,9 +2,9 @@
   <div class="main-container">
       <div class="page-header">
           <div class="header-top">
-              <el-button 
-                  type="text" 
-                  :icon="ArrowLeft" 
+              <el-button
+                  type="text"
+                  :icon="ArrowLeft"
                   @click="handleGoBack"
                   class="back-button"
               >
@@ -12,7 +12,7 @@
               </el-button>
               <h2 class="page-title">{{ datasetName }}</h2>
           </div>
-          
+
           <!-- 面包屑导航 -->
           <div class="breadcrumb-container">
               <el-breadcrumb separator="/">
@@ -20,8 +20,8 @@
                       <el-icon><House /></el-icon>
                       <span>{{t('vabI18n.knowledge.document.breadcrumb.root', '根目录')}}</span>
                   </el-breadcrumb-item>
-                  <el-breadcrumb-item 
-                      v-for="(folder, index) in breadcrumbPath" 
+                  <el-breadcrumb-item
+                      v-for="(folder, index) in breadcrumbPath"
                       :key="folder.id"
                       @click="navigateToFolder(folder, index)"
                       :class="{ 'breadcrumb-clickable': index < breadcrumbPath.length - 1 }"
@@ -30,17 +30,17 @@
                   </el-breadcrumb-item>
               </el-breadcrumb>
           </div>
-          
+
           <div class="page-description">
-              {{t('vabI18n.knowledge.document.header.description')}} {{ pagination.total }} {{ $t(pagination.total > 1 
-    ? 'vabI18n.knowledge.document.header.descriptionEnds' 
+              {{t('vabI18n.knowledge.document.header.description')}} {{ pagination.total }} {{ $t(pagination.total > 1
+    ? 'vabI18n.knowledge.document.header.descriptionEnds'
     : 'vabI18n.knowledge.document.header.descriptionEnd') }}
           </div>
       </div>
 
       <!-- 主要内容区域 -->
       <div class="content-layout">
-          <div 
+          <div
               class="file-manager-container"
               @contextmenu.prevent="handleRightClick"
               @click="hideContextMenu"
@@ -62,17 +62,17 @@
               </div>
 
               <div class="right-group">
-                  <el-button 
-                      v-if="selectedRows.length > 0" 
-                      type="danger" 
-                      :icon="Delete" 
+                  <el-button
+                      v-if="selectedRows.length > 0"
+                      type="danger"
+                      :icon="Delete"
                       @click="handleBatchDelete"
                       class="batch-delete-btn"
                   >
                       {{t('vabI18n.knowledge.document.buttons.batchDelete', { count: selectedRows.length })}}
                   </el-button>
                   <el-button :icon="Refresh" @click="handleRefresh">{{t('vabI18n.knowledge.document.buttons.refresh')}}</el-button>
-                  
+
                   <el-button type="primary" :icon="Upload" @click="triggerFileInput">{{t('vabI18n.knowledge.document.buttons.upload')}}</el-button>
               </div>
           </div>
@@ -90,9 +90,9 @@
               @row-dblclick="handleRowDoubleClick"
           >
               <el-table-column type="selection" width="55" />
-              <el-table-column 
-                  :label="$t('vabI18n.knowledge.document.table.index')" 
-                  width="80" 
+              <el-table-column
+                  :label="$t('vabI18n.knowledge.document.table.index')"
+                  width="80"
                   align="center"
                   type="index"
                   :index="indexMethod"
@@ -100,10 +100,10 @@
               <el-table-column prop="fileName" :label="t('vabI18n.knowledge.document.table.fileName')" min-width="250">
                   <template #default="{ row }">
                       <div class="file-name-cell">
-                          <img 
+                          <img
                               v-if="row.type === 'file'"
-                              :src="getFileTypeIcon(row.fileType)" 
-                              alt="文件图标" 
+                              :src="getFileTypeIcon(row.fileType)"
+                              alt="文件图标"
                               class="file-icon"
                           />
                           <el-icon v-else class="folder-icon" size="20" color="#409eff">
@@ -117,11 +117,11 @@
                   <template #default="{ row }">
                       <!-- 文件夹不显示状态 -->
                       <template v-if="row.type === 'file'">
-                          <el-tag 
+                          <el-tag
                               :type="getStatusTagType(row.status)"
                               :class="{ 'rotating-tag': ['preprocessing', 'indexing', 'waiting', 'queued'].includes(row.status) }"
                           >
-                              <el-icon 
+                              <el-icon
                                   :class="{ 'is-loading': ['preprocessing', 'indexing', 'waiting', 'queued'].includes(row.status) }"
                               >
                                   <component :is="getStatusIcon(row.status)" />
@@ -144,22 +144,22 @@
                       <div class="action-buttons">
                           <!-- 文件操作 -->
                           <template v-if="row.type === 'file'">
-                              <el-button 
-                                  :type="row.status === 'completed' ? 'primary' : 'info'" 
-                                  :icon="View" 
-                                  text 
-                                  class="action-btn"  
+                              <el-button
+                                  :type="row.status === 'completed' ? 'primary' : 'info'"
+                                  :icon="View"
+                                  text
+                                  class="action-btn"
                                   :disabled="row.status !== 'completed'"
                                   :class="{ 'disabled-btn': row.status !== 'completed' }"
                                   @click="row.status === 'completed' ? handlePreview(row) : null"
                               >
                                   {{t('vabI18n.knowledge.document.buttons.preview')}}
                               </el-button>
-                              <el-button 
-                                  :type="row.status === 'completed' ? 'success' : 'info'" 
-                                  :icon="Download" 
-                                  text 
-                                  class="action-btn" 
+                              <el-button
+                                  :type="row.status === 'completed' ? 'success' : 'info'"
+                                  :icon="Download"
+                                  text
+                                  class="action-btn"
                                   :disabled="row.status !== 'completed'"
                                   :class="{ 'disabled-btn': row.status !== 'completed' }"
                                   @click="row.status === 'completed' ? handleDownload(row) : null"
@@ -169,31 +169,31 @@
                           </template>
                           <!-- 文件夹操作 -->
                           <template v-else>
-                              <el-button 
-                                  type="primary" 
-                                  :icon="View" 
-                                  text 
-                                  class="action-btn"  
+                              <el-button
+                                  type="primary"
+                                  :icon="View"
+                                  text
+                                  class="action-btn"
                                   @click="handleOpenFolder(row)"
                               >
                                   {{t('vabI18n.knowledge.document.buttons.open', '打开')}}
                               </el-button>
                           </template>
                           <!-- 共同操作 -->
-                          <el-button 
-                              type="warning" 
-                              :icon="Edit" 
-                              text 
-                              class="action-btn" 
+                          <el-button
+                              type="warning"
+                              :icon="Edit"
+                              text
+                              class="action-btn"
                               @click="handleRename(row)"
                           >
                               {{t('vabI18n.knowledge.document.buttons.rename')}}
                           </el-button>
-                          <el-button 
-                              type="danger" 
-                              :icon="Delete" 
-                              text 
-                              class="action-btn" 
+                          <el-button
+                              type="danger"
+                              :icon="Delete"
+                              text
+                              class="action-btn"
                               @click="handleDelete(row)"
                           >
                               {{t('vabI18n.knowledge.document.buttons.delete')}}
@@ -217,16 +217,16 @@
           </div>
       </div>
       </div>
-      
+
       <!-- 上传文件对话框 - 使用新的DocUpload组件 -->
-      <el-dialog 
-          v-model="uploadDialogVisible" 
-          :title="t('vabI18n.knowledge.document.buttons.upload')" 
-          width="900px" 
+      <el-dialog
+          v-model="uploadDialogVisible"
+          :title="t('vabI18n.knowledge.document.buttons.upload')"
+          width="900px"
           :close-on-click-modal="false"
           class="upload-dialog"
       >
-          <DocUpload 
+          <DocUpload
               :visible="uploadDialogVisible"
               :dataset-id="datasetId"
               :parent-id="currentParentId"
@@ -234,56 +234,81 @@
               @success="handleUploadSuccess"
           />
       </el-dialog>
-      
+
       <!-- 预览抽屉 -->
-      <el-drawer
-          v-model="previewDrawerVisible"
-          :title="t('vabI18n.knowledge.document.preview.title')"
-          :direction="'rtl'"
-          size="60%"
-          class="preview-drawer"
-          :close-on-click-modal="false"
-      >
-          <div v-loading="previewLoading">  
-              <!-- TXT 文件预览 -->
-              <div v-if="previewFileType === 'txt'" class="text-preview-container">
-                  <pre class="text-preview">{{ previewTextContent }}</pre>
-              </div>
 
-              <!-- Markdown 文件预览 -->
-              <div v-if="['md', 'markdown', 'mdx'].includes(previewFileType.toLowerCase())" 
-                   class="markdown-preview-container">
-                  <div class="markdown-preview" v-html="previewMarkdownContent"></div>
-              </div>
+    <el-drawer
+      v-model="previewDrawerVisible"
+      :title="t('vabI18n.knowledge.document.preview.title')"
+      :direction="'rtl'"
+      size="80%"
+    class="preview-drawer"
+    :close-on-click-modal="false"
+      @close="handleClose"
+    >
+    <div v-loading="previewLoading" class="drawer-content-container" style="display: flex; height: 100%;">
 
-              <vue-office-pdf
-                  v-if="previewFileType === 'pdf'"
-                  :src="previewFileUrl"
-                  @rendered="renderedHandler"
-                  @error="errorHandler"
-              />
+      <!-- 左侧分段数据容器 -->
+      <div class="segment-list-container" style="width: 30%; border-right: 1px solid #ebeef5; overflow-y: auto; padding: 10px;">
+        <h3>分段数据</h3>
+        <el-form v-if="segmentList.length > 0">
+          <el-form-item
+            v-for="(segment) in segmentList"
+            :key="segment.id"
+            style="cursor: pointer; margin-bottom: 5px;"
+          >
+            <span>分段{{segment.position}}：</span>
+            <h4>{{segment.content}}</h4>
+          </el-form-item>
+        </el-form>
+        <div v-else>
+          暂无分段数据
+        </div>
+      </div>
 
-              <vue-office-docx
-                  v-if="previewFileType == 'doc' || previewFileType == 'docx'"
-                  :src="previewFileUrl"
-                  @rendered="renderedHandler"
-                  @error="errorHandler"
-              />
+      <!-- 右侧原预览内容 -->
+      <div class="preview-content-container" style="flex: 1; padding: 10px; overflow-y: auto;">
+        <!-- TXT 文件预览 -->
+        <div v-if="previewFileType === 'txt'" class="text-preview-container">
+          <pre class="text-preview">{{ previewTextContent }}</pre>
+        </div>
 
-              <vue-office-excel
-                  v-if="previewFileType == 'xlsx' || previewFileType == 'xls' || previewFileType == 'csv'"
-                  :src="previewFileUrl"
-                  style="height: 100vh;"
-                  @rendered="renderedHandler"
-                  @error="errorHandler"
-              />
-          </div>
-      </el-drawer>
+        <!-- Markdown 文件预览 -->
+        <div v-if="['md', 'markdown', 'mdx'].includes(previewFileType.toLowerCase())"
+             class="markdown-preview-container">
+          <div class="markdown-preview" v-html="previewMarkdownContent"></div>
+        </div>
 
-      <!-- 重命名对话框 -->
-      <el-dialog 
-          v-model="renameDialogVisible" 
-          :title="t('vabI18n.knowledge.document.renameDialog.title')" 
+        <vue-office-pdf
+          v-if="previewFileType === 'pdf'"
+          :src="previewFileUrl"
+          @rendered="renderedHandler"
+          @error="errorHandler"
+        />
+
+        <vue-office-docx
+          v-if="previewFileType == 'doc' || previewFileType == 'docx'"
+          :src="previewFileUrl"
+          @rendered="renderedHandler"
+          @error="errorHandler"
+        />
+
+        <vue-office-excel
+          v-if="previewFileType == 'xlsx' || previewFileType == 'xls' || previewFileType == 'csv'"
+          :src="previewFileUrl"
+          style="height: 100vh;"
+          @rendered="renderedHandler"
+          @error="errorHandler"
+        />
+      </div>
+    </div>
+    </el-drawer>
+
+
+    <!-- 重命名对话框 -->
+      <el-dialog
+          v-model="renameDialogVisible"
+          :title="t('vabI18n.knowledge.document.renameDialog.title')"
           width="480px"
           class="rename-dialog"
           :close-on-click-modal="false"
@@ -296,8 +321,8 @@
               <el-form :model="renameForm" label-width="0px" class="rename-form">
                   <el-form-item>
                       <div class="form-label">{{t('vabI18n.knowledge.document.renameDialog.label')}}</div>
-                      <el-input 
-                          v-model="renameForm.newName" 
+                      <el-input
+                          v-model="renameForm.newName"
                           :placeholder="t('vabI18n.knowledge.document.renameDialog.placeholder')"
                           size="large"
                           class="rename-input"
@@ -324,9 +349,9 @@
       </el-dialog>
 
       <!-- 创建文件夹对话框 -->
-      <el-dialog 
-          v-model="createFolderDialogVisible" 
-          :title="t('vabI18n.knowledge.document.createFolderDialog.title', '创建文件夹')" 
+      <el-dialog
+          v-model="createFolderDialogVisible"
+          :title="t('vabI18n.knowledge.document.createFolderDialog.title', '创建文件夹')"
           width="520px"
           class="create-folder-dialog"
           :close-on-click-modal="false"
@@ -339,8 +364,8 @@
               <el-form :model="createFolderForm" :rules="createFolderRules" ref="createFolderFormRef" label-width="0px" class="create-folder-form">
                   <el-form-item prop="folderName">
                       <div class="form-label">{{t('vabI18n.knowledge.document.createFolderDialog.label', '文件夹名称')}}</div>
-                  <el-input 
-                      v-model="createFolderForm.folderName" 
+                  <el-input
+                      v-model="createFolderForm.folderName"
                       :placeholder="t('vabI18n.knowledge.document.createFolderDialog.placeholder', '请输入文件夹名称')"
                           size="large"
                           class="folder-name-input"
@@ -358,10 +383,10 @@
                   <el-button size="large" @click="createFolderDialogVisible = false">
                       {{t('vabI18n.knowledge.document.createFolderDialog.cancel', '取消')}}
                   </el-button>
-                  <el-button 
-                      type="primary" 
-                      size="large" 
-                      @click="handleCreateFolderConfirm" 
+                  <el-button
+                      type="primary"
+                      size="large"
+                      @click="handleCreateFolderConfirm"
                       :loading="createFolderLoading"
                   >
                       <el-icon><Plus /></el-icon>
@@ -373,9 +398,9 @@
 
       <!-- 右键菜单 -->
       <transition name="context-menu-fade">
-      <div 
-          v-if="contextMenuVisible" 
-          class="context-menu" 
+      <div
+          v-if="contextMenuVisible"
+          class="context-menu"
           :style="{ left: contextMenuPosition.x + 'px', top: contextMenuPosition.y + 'px' }"
           @click.stop
       >
@@ -410,7 +435,8 @@
 import { useRoute, useRouter } from 'vue-router'
 import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import VueOfficePdf from '@vue-office/pdf'
-import { getDatasetDocPage, uploadDocument, deleteDocument, downloadDocument, previewDocumentUrl, renameDocument, createFolder, CreateFolderReq } from '@/api/dataset'
+import { getDatasetDocPage, uploadDocument, deleteDocument, downloadDocument, previewDocumentUrl, renameDocument, createFolder, CreateFolderReq} from '@/api/dataset'
+import {getSegmentList} from "@/api/Segment"
 import DocUpload from './DocUpload.vue'
 //引入VueOfficeDocx组件
 import VueOfficeDocx from '@vue-office/docx'
@@ -421,6 +447,7 @@ import VueOfficeExcel from '@vue-office/excel'
 //引入相关样式
 import '@vue-office/excel/lib/index.css'
 
+
 import VueOfficePptx from '@vue-office/pptx'
 
 // 引入 markdown 解析器和代码高亮
@@ -491,7 +518,7 @@ folderName: [
   { pattern: /^[^<>:"/\\|?*]+$/, message: t('vabI18n.knowledge.document.createFolderDialog.rules.namePattern', '文件夹名称不能包含特殊字符'), trigger: 'blur' }
 ]
 }
-
+const segmentList= ref([])
 // 右键菜单相关
 const contextMenuVisible = ref(false)
 const contextMenuPosition = reactive({
@@ -511,7 +538,10 @@ name: string;
 
 
 
-
+const handleClose = () => {
+  uploadDialogVisible.value = false
+  segmentList.value = []
+}
 
 
 // 组件卸载时清理
@@ -625,8 +655,8 @@ if (selectedRows.value.length === 0) {
 
 try {
   await ElMessageBox.confirm(
-  t('vabI18n.knowledge.document.messages.batchDeleteConfirm', { 
-    count: selectedRows.value.length 
+  t('vabI18n.knowledge.document.messages.batchDeleteConfirm', {
+    count: selectedRows.value.length
   }),
   t('vabI18n.knowledge.document.messages.deleteConfirmTitle'),
   {
@@ -636,6 +666,10 @@ try {
   }
 )
 
+  const handleClose = () => {
+    previewDrawerVisible.value = false,
+      segmentList.value = []
+  }
   const loading = ElLoading.service({
     lock: true,
     text: t('vabI18n.knowledge.document.messages.deleteing'),
@@ -709,7 +743,7 @@ try {
     message: t('vabI18n.knowledge.document.messages.renameSuccess'),
     type: 'success'
   })
-  
+
   renameDialogVisible.value = false
   await fetchDocuments()
 } catch (error) {
@@ -788,10 +822,10 @@ const handleDownload = async (row: FileItem) => {
 try {
     // 使用新的API下载方式，传入fileId（数字类型）
     const response = await downloadDocument(parseInt(row.id))
-    
+
     // 创建 Blob 对象
     const blob = new Blob([response.data], { type: 'application/octet-stream' })
-    
+
     // 创建下载链接
     const url = window.URL.createObjectURL(blob)
     const link = document.createElement('a')
@@ -800,11 +834,11 @@ try {
     link.style.display = 'none'
     document.body.appendChild(link)
     link.click()
-    
+
     // 清理
     document.body.removeChild(link)
     window.URL.revokeObjectURL(url)
-  
+
 } catch (error) {
   ElNotification({
     title: t('vabI18n.knowledge.document.errors.downloadFailed'),
@@ -827,7 +861,7 @@ try {
   // 对于txt和markdown文件，我们需要获取原始文本内容
   // 这里可以通过下载接口获取文件内容，然后转为文本
   const response = await downloadDocument(fileId)
-  
+
   // 将响应数据转为文本
   if (response.data instanceof Blob) {
     const text = await response.data.text()
@@ -847,26 +881,32 @@ const handlePreview = async (row: FileItem) => {
   // 显示抽屉
   previewDrawerVisible.value = true
   previewLoading.value = true
-  
-  console.log("row",row)
+
   previewFileType.value = row.fileType;
 
   try {
       // 对于txt和markdown文件，获取文本内容
       if (['txt', 'md', 'markdown', 'mdx'].includes(row.fileType.toLowerCase())) {
           const content = await fetchFileContent(parseInt(row.id), row.fileType)
-          
+
           if (row.fileType.toLowerCase() === 'txt') {
               previewTextContent.value = content
           } else if (['md', 'markdown', 'mdx'].includes(row.fileType.toLowerCase())) {
               // 配置并解析 markdown
               const renderer = new marked.Renderer()
-              
+
               marked.setOptions({
                   breaks: true,
                   gfm: true
               })
-              
+            const resp = await getSegmentList({
+              datasetId:datasetId.value,
+              documentId: row.difyDocId
+            })
+            if (resp.data?.length) {
+              segmentList.value = resp.data
+            }
+
               previewMarkdownContent.value = marked.parse(content) as string
           }
       } else {
@@ -911,7 +951,7 @@ try {
   }
 
   const { data } = await getDatasetDocPage(params)
-  
+
   // 映射API数据到表格结构，适配新的TDatasetFiles字段
   fileList.value = data.content.map((item: any) => ({
     id: item.id,
@@ -986,7 +1026,7 @@ return statusMap[status] || '未知状态'
 const getStatusTagType = (status: string): 'success' | 'primary' | 'warning' | 'info' | 'danger' => {
 const typeMap: Record<string, 'success' | 'primary' | 'warning' | 'info' | 'danger'> = {
   'preprocessing': 'info',
-  'indexing': 'warning', 
+  'indexing': 'warning',
   'waiting': 'info',
   'queued': 'primary',
   'failed': 'danger',
@@ -1149,7 +1189,7 @@ try {
   }
 
   await createFolder(folderData)
-  
+
   ElNotification({
     title: t('vabI18n.knowledge.document.messages.createFolderSuccess', '创建成功'),
     message: t('vabI18n.knowledge.document.messages.createFolderSuccessMessage', `文件夹"${createFolderForm.folderName}"创建成功`),
@@ -1158,7 +1198,7 @@ try {
 
   createFolderDialogVisible.value = false
   createFolderForm.folderName = ''
-  
+
   // 刷新文件列表
   await fetchDocuments()
 } catch (error) {
@@ -1189,12 +1229,12 @@ margin-bottom: 24px;
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
-  
+
   .back-button {
     color: #409eff;
     font-size: 14px;
     padding: 8px 12px;
-    
+
     &:hover {
       background-color: #ecf5ff;
       color: #337ecc;
@@ -1217,25 +1257,25 @@ margin-bottom: 24px;
 
 .breadcrumb-container {
   margin: 12px 0;
-  
+
   .breadcrumb-clickable {
     cursor: pointer;
-    
+
     &:hover {
       color: #409eff;
     }
   }
-  
+
   ::v-deep .el-breadcrumb__inner {
     display: flex;
     align-items: center;
     gap: 4px;
-    
+
     &.is-link:hover {
       color: #409eff;
     }
   }
-  
+
   ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
     color: #303133;
     font-weight: 500;
@@ -1330,7 +1370,7 @@ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
 
 ::v-deep .el-table__body tr {
   transition: all 0.2s ease;
-  
+
   &:hover {
     background: #f5f7fa !important;
   }
@@ -1387,18 +1427,18 @@ flex-wrap: nowrap;
   transition: all 0.2s ease;
   white-space: nowrap;
   flex-shrink: 0;
-  
+
   &:hover:not(.disabled-btn) {
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
-  
+
   &.disabled-btn {
     color: #c0c4cc !important;
     cursor: not-allowed !important;
     background: transparent !important;
     border-color: transparent !important;
-    
+
     &:hover {
       transform: none !important;
       box-shadow: none !important;
@@ -1441,7 +1481,7 @@ border-top: 1px solid #ebeef5;
 ::v-deep .el-dialog__close {
   color: white;
   font-size: 20px;
-  
+
   &:hover {
     color: rgba(255, 255, 255, 0.8);
     transform: scale(1.1);
@@ -1487,7 +1527,7 @@ border-top: 1px solid #ebeef5;
 ::v-deep .el-dialog__close {
   color: white;
   font-size: 20px;
-  
+
   &:hover {
     color: rgba(255, 255, 255, 0.8);
     transform: scale(1.1) rotate(90deg);
@@ -1502,12 +1542,12 @@ border-top: 1px solid #ebeef5;
 
 .dialog-content {
   text-align: center;
-  
+
   .dialog-icon {
     margin-bottom: 24px;
     animation: pulse 2s infinite;
   }
-  
+
   .rename-form {
     .form-label {
       font-size: 16px;
@@ -1516,18 +1556,18 @@ border-top: 1px solid #ebeef5;
       margin-bottom: 16px;
       text-align: left;
     }
-    
+
     .rename-input {
       ::v-deep .el-input__wrapper {
         border-radius: 12px;
         box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
         border: 2px solid transparent;
         transition: all 0.3s ease;
-        
+
         &:hover {
           box-shadow: 0 6px 16px rgba(64, 158, 255, 0.15);
         }
-        
+
         &.is-focus {
           border-color: #409eff;
           box-shadow: 0 8px 20px rgba(64, 158, 255, 0.2);
@@ -1543,22 +1583,22 @@ border-top: 1px solid #ebeef5;
   gap: 16px;
   padding: 20px 0;
   background: linear-gradient(135deg, #f8fbff 0%, #f0f9ff 100%);
-  
+
   .el-button {
     border-radius: 12px;
     padding: 12px 24px;
     font-weight: 600;
     transition: all 0.3s ease;
-    
+
     &:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     }
-    
+
     &.el-button--primary {
       background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
       border: none;
-      
+
       &:hover {
         background: linear-gradient(135deg, #337ecc 0%, #2bb0a8 100%);
       }
@@ -1594,7 +1634,7 @@ border-top: 1px solid #ebeef5;
 ::v-deep .el-dialog__close {
   color: white;
   font-size: 20px;
-  
+
   &:hover {
     color: rgba(255, 255, 255, 0.8);
     transform: scale(1.1) rotate(90deg);
@@ -1609,12 +1649,12 @@ border-top: 1px solid #ebeef5;
 
 .dialog-content {
   text-align: center;
-  
+
   .dialog-icon {
     margin-bottom: 24px;
     animation: bounce 2s infinite;
   }
-  
+
   .create-folder-form {
     .form-label {
       font-size: 16px;
@@ -1623,18 +1663,18 @@ border-top: 1px solid #ebeef5;
       margin-bottom: 16px;
       text-align: left;
     }
-    
+
     .folder-name-input {
       ::v-deep .el-input__wrapper {
         border-radius: 12px;
         box-shadow: 0 4px 12px rgba(103, 194, 58, 0.1);
         border: 2px solid transparent;
         transition: all 0.3s ease;
-        
+
         &:hover {
           box-shadow: 0 6px 16px rgba(103, 194, 58, 0.15);
         }
-        
+
         &.is-focus {
           border-color: #67c23a;
           box-shadow: 0 8px 20px rgba(103, 194, 58, 0.2);
@@ -1650,22 +1690,22 @@ border-top: 1px solid #ebeef5;
   gap: 16px;
   padding: 20px 0;
   background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
-  
+
   .el-button {
     border-radius: 12px;
     padding: 12px 24px;
     font-weight: 600;
     transition: all 0.3s ease;
-    
+
     &:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     }
-    
+
     &.el-button--primary {
       background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
       border: none;
-      
+
       &:hover {
         background: linear-gradient(135deg, #529e2b 0%, #6cb33f 100%);
       }
@@ -1686,18 +1726,18 @@ border-top: 1px solid #ebeef5;
   padding: 24px 32px;
   color: white;
   box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
-  
+
   .el-drawer__title {
     font-weight: 700;
     color: white;
     font-size: 18px;
     letter-spacing: 0.5px;
   }
-  
+
   .el-drawer__close-btn {
     color: white;
     font-size: 20px;
-    
+
     &:hover {
       color: rgba(255, 255, 255, 0.8);
       transform: scale(1.1);
@@ -1747,7 +1787,7 @@ background: #fafafa;
   border-radius: 4px;
   padding: 24px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  
+
   // Markdown 内容样式
   h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
@@ -1756,45 +1796,45 @@ background: #fafafa;
     line-height: 1.25;
     color: #24292e;
   }
-  
+
   h1 {
     font-size: 2em;
     border-bottom: 1px solid #eaecef;
     padding-bottom: 0.3em;
   }
-  
+
   h2 {
     font-size: 1.5em;
     border-bottom: 1px solid #eaecef;
     padding-bottom: 0.3em;
   }
-  
+
   h3 {
     font-size: 1.25em;
   }
-  
+
   p {
     margin-bottom: 16px;
     line-height: 1.6;
     color: #24292e;
   }
-  
+
   ul, ol {
     padding-left: 2em;
     margin-bottom: 16px;
   }
-  
+
   li {
     margin-bottom: 0.25em;
   }
-  
+
   blockquote {
     padding: 0 1em;
     color: #6a737d;
     border-left: 0.25em solid #dfe2e5;
     margin: 0 0 16px 0;
   }
-  
+
   code {
     padding: 0.2em 0.4em;
     margin: 0;
@@ -1803,7 +1843,7 @@ background: #fafafa;
     border-radius: 3px;
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   }
-  
+
   pre {
     padding: 16px;
     overflow: auto;
@@ -1812,7 +1852,7 @@ background: #fafafa;
     background-color: #f6f8fa;
     border-radius: 6px;
     margin-bottom: 16px;
-    
+
     code {
       display: inline;
       max-width: auto;
@@ -1825,45 +1865,45 @@ background: #fafafa;
       border: 0;
     }
   }
-  
+
   table {
     border-spacing: 0;
     border-collapse: collapse;
     margin-bottom: 16px;
     width: 100%;
     overflow: auto;
-    
+
     th, td {
       padding: 6px 13px;
       border: 1px solid #dfe2e5;
     }
-    
+
     th {
       font-weight: 600;
       background-color: #f6f8fa;
     }
-    
+
     tr:nth-child(2n) {
       background-color: #f6f8fa;
     }
   }
-  
+
   img {
     max-width: 100%;
     height: auto;
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
-  
+
   a {
     color: #0366d6;
     text-decoration: none;
-    
+
     &:hover {
       text-decoration: underline;
     }
   }
-  
+
   hr {
     height: 0.25em;
     padding: 0;
@@ -1939,14 +1979,14 @@ margin-bottom: 20px;
   background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
   border-radius: 8px;
   border: 1px solid #e1e8f0;
-  
+
   .stat-number {
     font-size: 24px;
     font-weight: 700;
     color: #409eff;
     margin-bottom: 4px;
   }
-  
+
   .stat-label {
     font-size: 12px;
     color: #666;
@@ -2022,7 +2062,7 @@ flex: 0 0 220px;
 .progress-status {
   margin-top: 8px;
   text-align: center;
-  
+
   .status-tag {
     font-weight: 600;
   }
@@ -2051,7 +2091,7 @@ overflow: hidden;
   color: white;
   padding: 16px 20px 12px;
   border-bottom: none;
-  
+
   .menu-title {
     font-size: 14px;
     font-weight: 600;
@@ -2067,16 +2107,16 @@ overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
   border-bottom: 1px solid #f0f2f5;
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   &:hover {
     background: linear-gradient(135deg, #f8fbff 0%, #e8f4fd 100%);
     transform: translateX(4px);
   }
-  
+
   .item-icon {
     width: 40px;
     height: 40px;
@@ -2090,11 +2130,11 @@ overflow: hidden;
     flex-shrink: 0;
     transition: all 0.3s ease;
   }
-  
+
   .item-content {
     flex: 1;
     padding-top: 2px;
-    
+
     .item-title {
       font-size: 15px;
       font-weight: 600;
@@ -2102,14 +2142,14 @@ overflow: hidden;
       margin-bottom: 4px;
       line-height: 1.4;
     }
-    
+
     .item-desc {
       font-size: 12px;
       color: #909399;
       line-height: 1.3;
     }
   }
-  
+
   &:hover .item-icon {
     transform: scale(1.1);
     box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3);
@@ -2163,4 +2203,82 @@ transform: scale(0.9) translateY(-5px);
   gap: 4px;
 }
 }
-</style>
\ No newline at end of file
+.segment-list-container {
+  width: 30%;
+  border-right: 1px solid #ebeef5;
+  overflow-y: auto;
+  padding: 16px;
+  background: #f9fafc;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  h3 {
+    margin-bottom: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .el-form-item {
+    cursor: pointer;
+    padding: 16px;            // 内边距增加
+    border-radius: 8px;
+    background: white;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+    min-height: 100px;        // 增加最小高度，让卡片更高
+    display: flex;
+    flex-direction: column;
+    justify-content: center;  // 让内容垂直居中
+
+    &:hover {
+      background: #f0f4ff;
+      transform: translateX(2px);
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+    }
+
+    span {
+      font-size: 14px;
+      font-weight: 500;
+      color: #606266;
+      margin-top: 4px;
+      word-break: break-word; // 防止长文本溢出
+    }
+
+    h4 {
+      font-family: "Microsoft YaHei", "微软雅黑", sans-serif; // 设置微软雅黑字体
+      font-size: 14px;
+      font-weight: 600;
+      color: #4a4a4a;
+      margin: 0;
+      line-height: 1.6;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-word;
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    color: #909399;
+    font-size: 14px;
+    margin-top: 20px;
+  }
+}
+
+/* 右侧预览内容保持原有样式 */
+.preview-content-container {
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+  background: #ffffff;
+  border-radius: 0 8px 8px 0;
+}
+
+
+
+</style>
diff --git a/chat-server/src/main/java/com/bjtds/brichat/controller/DocumentSegmentController.java b/chat-server/src/main/java/com/bjtds/brichat/controller/DocumentSegmentController.java
new file mode 100644
index 0000000..34b91f4
--- /dev/null
+++ b/chat-server/src/main/java/com/bjtds/brichat/controller/DocumentSegmentController.java
@@ -0,0 +1,29 @@
+package com.bjtds.brichat.controller;
+
+import com.bjtds.brichat.entity.dto.SegmentDto;
+import com.bjtds.brichat.service.dify.DocumentSegmentService;
+import com.bjtds.brichat.util.ResultUtils;
+import lombok.extern.slf4j.Slf4j;
+import org.checkerframework.checker.units.qual.C;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Comparator;
+import java.util.List;
+
+@RestController
+@Slf4j
+@CrossOrigin(value = "*", maxAge = 3600)
+@RequestMapping("/documentSegment")
+public class DocumentSegmentController {
+    @Autowired
+    private DocumentSegmentService documentSegmentService;
+
+    @GetMapping("/selectSegments")
+    public ResultUtils SelectSegments(@RequestParam("documentId") String documentId, @RequestParam("datasetId") String datasetId) {
+        List<SegmentDto> segments = documentSegmentService.SelectSegments(documentId, datasetId);
+        segments.sort(Comparator.comparing(SegmentDto::getPosition));
+        return ResultUtils.success(segments);
+    }
+}
diff --git a/chat-server/src/main/java/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.java b/chat-server/src/main/java/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.java
new file mode 100644
index 0000000..3691b78
--- /dev/null
+++ b/chat-server/src/main/java/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.java
@@ -0,0 +1,13 @@
+package com.bjtds.brichat.mapper.postgresql;
+
+
+import com.bjtds.brichat.entity.dto.SegmentDto;
+import org.apache.ibatis.annotations.Mapper;
+
+import java.util.List;
+
+@Mapper
+public interface DifyDocumentSegmentMapper {
+
+    List<SegmentDto> SelectSegmentsByDocumentIdAndDatasetId(String documentId, String datasetId);
+}
diff --git a/chat-server/src/main/java/com/bjtds/brichat/service/dify/DocumentSegmentService.java b/chat-server/src/main/java/com/bjtds/brichat/service/dify/DocumentSegmentService.java
new file mode 100644
index 0000000..46f6f45
--- /dev/null
+++ b/chat-server/src/main/java/com/bjtds/brichat/service/dify/DocumentSegmentService.java
@@ -0,0 +1,10 @@
+package com.bjtds.brichat.service.dify;
+
+import com.bjtds.brichat.entity.dto.SegmentDto;
+
+import java.util.List;
+
+public interface DocumentSegmentService {
+
+    List<SegmentDto> SelectSegments(String documentId, String datasetId);
+}
diff --git a/chat-server/src/main/java/com/bjtds/brichat/service/dify/impl/DocumentSegmentServiceImpl.java b/chat-server/src/main/java/com/bjtds/brichat/service/dify/impl/DocumentSegmentServiceImpl.java
new file mode 100644
index 0000000..39a5035
--- /dev/null
+++ b/chat-server/src/main/java/com/bjtds/brichat/service/dify/impl/DocumentSegmentServiceImpl.java
@@ -0,0 +1,22 @@
+package com.bjtds.brichat.service.dify.impl;
+
+import com.bjtds.brichat.entity.dto.SegmentDto;
+import com.bjtds.brichat.mapper.postgresql.DifyDocumentSegmentMapper;
+import com.bjtds.brichat.service.dify.DocumentSegmentService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.Collections;
+import java.util.List;
+
+@Service
+public class DocumentSegmentServiceImpl implements DocumentSegmentService {
+
+    @Autowired
+    private DifyDocumentSegmentMapper difyDocumentSegmentMapper;
+
+    @Override
+    public List<SegmentDto> SelectSegments(String documentId, String datasetId) {
+        return difyDocumentSegmentMapper.SelectSegmentsByDocumentIdAndDatasetId(documentId, datasetId);
+    }
+}
diff --git a/chat-server/src/main/resources/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.xml b/chat-server/src/main/resources/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.xml
new file mode 100644
index 0000000..b6b0efa
--- /dev/null
+++ b/chat-server/src/main/resources/com/bjtds/brichat/mapper/postgresql/DifyDocumentSegmentMapper.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.bjtds.brichat.mapper.postgresql.DifyDocumentSegmentMapper">
+    <select id="SelectSegmentsByDocumentIdAndDatasetId" resultType="com.bjtds.brichat.entity.dto.SegmentDto">
+        select *
+        from document_segments
+                 where
+                <if test="documentId != null">
+                    document_id = CAST(#{documentId} as uuid) and
+                </if>
+                 <if test="datasetId != null">
+                        dataset_id = CAST(#{datasetId} as uuid)
+                 </if>
+    </select>
+</mapper>