Pārlūkot izejas kodu

fix:修改思维导图全屏自适应,修改问答中的表格不展示边框问题

hanyang 1 gadu atpakaļ
vecāks
revīzija
39fbadba22

+ 18 - 3
src/modules/conversation-content/DialogContent.vue

@@ -19,12 +19,12 @@
       <a-spin></a-spin>
     </div>
 
-    <div v-if="content.length !== 0 && !is_loading" v-html="content" class="answer-content-text" />
+    <div v-if="content.length !== 0 && !is_loading" v-html="content" class="answer-content-text"></div>
     <div class="mind-map" v-if="mind_map_btn">
       <a-button class="mind-map-btn" @click="toShowMindMap" :loading="loading_mind_map">
         <img width="14px" style="margin-right: 10px" src="../../assets/chat/mind_map1.png" alt="" />
-        <!-- {{ $t('conversation.mindmap_title') }} -->
-        思维导图
+        {{ $t('conversation.mindmap_title') }}
+        <!-- 思维导图 -->
         <span v-if="!loading_mind_map" style="margin-left: 5px"> &gt; </span>
       </a-button>
     </div>
@@ -129,4 +129,19 @@ const toShowMindMap = () => {
 .mind-map-btn {
   border-radius: 8px;
 }
+.answer-content-text table {
+  border-collapse: collapse; /* 确保表格边框合并 */
+}
+
+.answer-content-text table,
+.answer-content-text th,
+.answer-content-text td {
+  border: 1px solid black; /* 设置边框颜色和样式 */
+}
+
+.answer-content-text th,
+.answer-content-text td {
+  padding: 8px; /* 可选,设置单元格内边距 */
+  text-align: left; /* 可选,设置文本对齐方式 */
+}
 </style>

+ 2 - 3
src/modules/conversation-dialog/format-anwser-string.js

@@ -1,5 +1,5 @@
 import marked from '../../3rd-libs/marked';
-import { formatStaticAssetsUrl } from '../../utils/utils';
+import { formatStaticAssetsUrl, handleTable } from '../../utils/utils';
 
 /**
  * 引用标记
@@ -43,8 +43,7 @@ export default function formatAnwserString(string) {
   } else {
     // 已发现 ![] 字符串
   }
-
-  const result = marked.parse(temp_str);
+  const result = handleTable(marked.parse(temp_str));
 
   /**
    * 将链接替换为新窗口打开

+ 41 - 0
src/utils/utils.js

@@ -143,3 +143,44 @@ export const formatStaticAssetsUrl_Dify = (file_href) => {
     return file_href;
   }
 };
+
+/**
+ * 处理marked解析出表格没有边框问题,加入边框
+ * */
+export const handleTable = (html_content) => {
+  // 第一步:处理 <table> 标签
+  let tablePattern = /<table\b([^>]*)>/g;
+  let tableReplacement = '<table border$1 style="border-collapse: collapse;">';
+  let modified_content = html_content.replace(tablePattern, tableReplacement);
+
+  // 第二步:处理 <th> 和 <td> 标签
+  let cellPattern = /<(th|td)\b([^>]*)>/g;
+  let cellReplacement = (match, tag, attributes) => {
+    // 检查是否已经存在 style 属性
+    let stylePattern = /style\s*=\s*["']([^"']*)["']/i;
+    let styleMatch = attributes.match(stylePattern);
+    let newStyle = 'padding: 5px 10px;';
+
+    if (styleMatch) {
+      // 如果 style 属性已存在,追加 padding 样式
+      let existingStyle = styleMatch;
+      // 避免重复添加 padding
+      if (!existingStyle.includes('padding:')) {
+        newStyle = existingStyle + '; ' + newStyle;
+      } else {
+        newStyle = existingStyle; // 如果 padding 已存在,不修改
+      }
+      // 替换原有的 style 属性
+      attributes = attributes.replace(stylePattern, `style="${newStyle}"`);
+    } else {
+      // 如果 style 属性不存在,直接添加
+      attributes = `style="${newStyle}" ${attributes}`;
+    }
+    // 返回修改后的标签
+    return `<${tag} ${attributes}>`;
+  };
+  // 执行替换
+  modified_content = modified_content.replace(cellPattern, cellReplacement);
+
+  return modified_content;
+};

+ 3 - 1
src/views/conversation/ConversationChatContainer.vue

@@ -1637,7 +1637,9 @@ watch(
   () => style_conversation_chat_mind_map.value,
   () => {
     if (mind_map.value) {
-      zoomReset();
+      setTimeout(() => {
+        zoomReset();
+      }, 30);
     }
   },
   {