From 9fc56b739311155e09ae3c9ac3afb2ecda4ac89c Mon Sep 17 00:00:00 2001
From: moon <2623532423@qq.com>
Date: Tue, 14 Oct 2025 09:53:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E9=97=AE=E7=AD=94=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=BA=86=E9=80=9A=E7=94=A8=E9=97=AE=E7=AD=94=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chatweb/commQA/index.vue        | 113 ++++++++++++++----
 .../historicalRecords/components/details.vue  |  43 +++++--
 .../views/chatweb/historicalRecords/index.vue |   2 +-
 3 files changed, 120 insertions(+), 38 deletions(-)

diff --git a/chat-client/src/views/chatweb/commQA/index.vue b/chat-client/src/views/chatweb/commQA/index.vue
index a9ba755..41c92f8 100644
--- a/chat-client/src/views/chatweb/commQA/index.vue
+++ b/chat-client/src/views/chatweb/commQA/index.vue
@@ -18,9 +18,19 @@
           </el-icon>
         </el-badge>
       </el-tooltip>
+
+    </div>
+    <!-- 导出PDF按钮 -->
+    <div class="export-pdf-button " @click="exportChatToPdf">
+      <el-tooltip content="导出为PDF" placement="left">
+          <el-icon :size="20">
+           <Document/>
+          </el-icon>
+      </el-tooltip>
     </div>
 
-    <ChatBox 
+    <ChatBox
+      ref="chatBoxRef"
       v-if="isDataLoaded"
       :chat-type="chatType"
       :user-id="userId"
@@ -61,7 +71,7 @@
         <div v-else class="no-binding-hint">
           <el-empty description="暂未绑定知识库" :image-size="80" />
         </div>
-        
+
         <div class="add-knowledge">
           <div class="section-title">添加知识库</div>
           <el-select
@@ -90,7 +100,7 @@
           </el-select>
         </div>
       </div>
-      
+
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeKnowledgeDialog">取消</el-button>
@@ -110,16 +120,33 @@ import { useAclStore } from '@/store/modules/acl'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useI18n } from 'vue-i18n'
 import { getRecommendations } from '@/api/prologue'
-import { FullScreen, Close, Collection } from '@element-plus/icons-vue'
-import { 
-  getWorkflowAndDatasetTableData, 
-  getAllUserDatasets, 
-  addDatasetsToWorkflow, 
-  removeDatasetsFromWorkflow 
+import {FullScreen, Close, Collection, Download, Document} from '@element-plus/icons-vue'
+import {
+  getWorkflowAndDatasetTableData,
+  getAllUserDatasets,
+  addDatasetsToWorkflow,
+  removeDatasetsFromWorkflow
 } from '@/api/functionKnowledgeConfig'
+import { exportElementToPdf } from '@/utils/exportPdf.ts'
 
 const { t, locale } = useI18n()
 const aclStore = useAclStore()
+const chatBoxRef = ref<InstanceType<typeof ChatBox>|null>(null)
+
+const exportChatToPdf = async () => {
+  if (chatBoxRef.value) {
+    if (chatBoxRef.value.messagesQuantity === 0) {
+      ElMessage.error('当前没有消息可导出,请开始聊天吧')
+      return
+    }
+    await exportElementToPdf(chatBoxRef.value.messagesContainer, 'chat-history.pdf')
+    ElMessage.success('导出成功')
+  }
+  else {
+    ElMessage.error('导出失败')
+  }
+}
+
 
 // 状态管理
 const placeholder = ref('给AI助手发送消息')
@@ -154,10 +181,10 @@ const fetchAllKnowledgeBases = async () => {
   try {
     isLoadingKnowledgeBases.value = true
     const response: any = await getAllUserDatasets()
-    
+
     if (response && response.code === 200 && response.data) {
       const userDatasets = response.data
-      
+
       // 提取所有唯一的知识库
       const knowledgeBasesMap = new Map()
       userDatasets.forEach((item: any) => {
@@ -186,17 +213,17 @@ const fetchAllKnowledgeBases = async () => {
 const fetchBoundKnowledgeBases = async () => {
   try {
     const response: any = await getWorkflowAndDatasetTableData()
-    
+
     if (response && response.code === 200 && response.data) {
       // 查找当前 APP_ID 对应的数据
       const currentApp = response.data.find((item: any) => item.appId === APP_ID)
-      
+
       if (currentApp && currentApp.datasetIds && currentApp.datasetIds.length > 0) {
         boundKnowledgeBases.value = []
         for (let i = 0; i < currentApp.datasetIds.length; i++) {
           const datasetId = currentApp.datasetIds[i]
           const datasetName = currentApp.datasetNames[i] || datasetId
-          
+
           boundKnowledgeBases.value.push({
             id: datasetId,
             name: datasetName
@@ -217,7 +244,7 @@ const fetchBoundKnowledgeBases = async () => {
 const openKnowledgeDialog = async () => {
   knowledgeDialogVisible.value = true
   selectedKnowledgeBaseIds.value = []
-  
+
   // 如果还没有加载过知识库列表，则加载
   if (allKnowledgeBases.value.length === 0) {
     await fetchAllKnowledgeBases()
@@ -236,16 +263,16 @@ const confirmBindKnowledgeBases = async () => {
     ElMessage.warning('请选择要绑定的知识库')
     return
   }
-  
+
   try {
     isBinding.value = true
-    
+
     // 调用API绑定知识库
     const response: any = await addDatasetsToWorkflow({
       appId: APP_ID,
       datasetIds: selectedKnowledgeBaseIds.value
     })
-    
+
     if (response.code === 200) {
       // 更新本地数据
       selectedKnowledgeBaseIds.value.forEach(id => {
@@ -254,7 +281,7 @@ const confirmBindKnowledgeBases = async () => {
           boundKnowledgeBases.value.push(kb)
         }
       })
-      
+
       ElMessage.success(`成功绑定 ${selectedKnowledgeBaseIds.value.length} 个知识库`)
       selectedKnowledgeBaseIds.value = []
       closeKnowledgeDialog()
@@ -277,7 +304,7 @@ const removeKnowledgeBase = async (knowledgeBaseId: string) => {
       appId: APP_ID,
       datasetIds: [knowledgeBaseId]
     })
-    
+
     if (response.code === 200) {
       // 更新本地数据
       const index = boundKnowledgeBases.value.findIndex(kb => kb.id === knowledgeBaseId)
@@ -348,7 +375,7 @@ const handleChatSwitched = (chatIndex: number) => {
 // 全屏功能
 const toggleFullscreen = () => {
   isFullscreen.value = !isFullscreen.value
-  
+
   // 隐藏或显示布局的其他部分
   const layoutWrapper = document.querySelector('.vue-admin-better-wrapper') as HTMLElement
   if (layoutWrapper) {
@@ -375,13 +402,13 @@ const handleEscKey = (event: KeyboardEvent) => {
 onMounted(async () => {
   console.log('组件已挂载，开始加载数据...')
   // await fetchRecommendations()
-  
+
   // 加载已绑定的知识库
   await fetchBoundKnowledgeBases()
-  
+
   isDataLoaded.value = true
   console.log('数据加载完成')
-  
+
   // 添加键盘事件监听
   window.addEventListener('keydown', handleEscKey)
 })
@@ -389,7 +416,7 @@ onMounted(async () => {
 // 组件卸载时清理
 onUnmounted(() => {
   window.removeEventListener('keydown', handleEscKey)
-  
+
   // 确保退出全屏状态
   if (isFullscreen.value) {
     const layoutWrapper = document.querySelector('.vue-admin-better-wrapper') as HTMLElement
@@ -587,4 +614,40 @@ onUnmounted(() => {
 .main-container.fullscreen-mode ~ .v-modal {
   z-index: 19999 !important;
 }
+.export-pdf-button {
+  position: absolute;
+  top: 16px;
+  right: 110px;
+  z-index: 100;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.export-pdf-button:hover {
+  background: var(--el-color-primary);
+  color: white;
+  border-color: var(--el-color-primary);
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.export-pdf-button :deep(.el-icon) {
+  transition: color 0.3s ease;
+}
+
+.export-pdf-button:hover :deep(.el-icon) {
+  color: white;
+}
+
+.export-pdf-button :deep(.el-badge__content) {
+  border: none;
+}
 </style>
diff --git a/chat-client/src/views/chatweb/historicalRecords/components/details.vue b/chat-client/src/views/chatweb/historicalRecords/components/details.vue
index abaa87f..53cb43e 100644
--- a/chat-client/src/views/chatweb/historicalRecords/components/details.vue
+++ b/chat-client/src/views/chatweb/historicalRecords/components/details.vue
@@ -289,7 +289,7 @@
 
 <style scoped>
   .conversation-detail {
-    max-width: 800px;
+    max-width: 1000px;
     margin: 0 auto;
     padding: 0;
     background: #fff;
@@ -547,23 +547,42 @@
     font-style: italic;
   }
 
-  /* 滚动条样式 */
-  .timeline-container::-webkit-scrollbar {
-    width: 6px;
+  /* 表格样式 */
+  .message-content :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
   }
 
-  .timeline-container::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 3px;
+  .message-content :deep(th),
+  .message-content :deep(td) {
+    padding: 8px 12px;
+    border: 1px solid #eaecef;
+    text-align: left;
   }
 
-  .timeline-container::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 3px;
+  .message-content :deep(th) {
+    background-color: #f6f8fa;
+    font-weight: 600;
   }
 
-  .timeline-container::-webkit-scrollbar-thumb:hover {
-    background: #a8a8a8;
+  .message-content :deep(tr:nth-child(even)) {
+    background-color: #fafbfc;
+  }
+
+  /* 超过3列的表格特殊处理 */
+  .message-content :deep(table) {
+    max-width: 100%;
+    table-layout: fixed;
+  }
+
+  .message-content :deep(th),
+  .message-content :deep(td) {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .export-btn {
diff --git a/chat-client/src/views/chatweb/historicalRecords/index.vue b/chat-client/src/views/chatweb/historicalRecords/index.vue
index 327de3b..7332119 100644
--- a/chat-client/src/views/chatweb/historicalRecords/index.vue
+++ b/chat-client/src/views/chatweb/historicalRecords/index.vue
@@ -463,6 +463,6 @@
   .rounded-devlog {
     border-radius: 8px; /* 调整圆角大小 */
     overflow: hidden; /* 确保内部内容也被圆角裁剪 */
-    width: 46%;
+    width:52%;
   }
 </style>