perf: 优化引用效果

src/modules/answer-refference/RefferenceDocDetail.vue

@@ -4,10 +4,10 @@
       <header>
         <div @click="goBack"><icon-left style="margin-right: 5px" />返回知识问答</div>
       </header>
-      <div>
+      <!-- <div>
         <div style="background-color: rgb(255, 110, 110)">{{ userName?.slice(0, 1) }}</div>
         <p>{{ targetDocument.question }}</p>
-      </div>
+      </div> -->
 
       <p>
         <span>以下是根据您的提问搜索到的相关文档</span>
@@ -68,6 +68,8 @@ const props = defineProps({
   targetDocument: Object
 });
 
+const emit = defineEmits(['back']);
+
 const userName = ref('当前登录的用户名');
 
 const list = ref([]);
@@ -94,7 +96,7 @@ list.value = docData.doc_aggs.map((item) => {
 });
 
 const goBack = () => {
-  emit('go-back');
+  emit('back');
 };
 
 const handelChangePdf = (item) => {

src/modules/answer-refference/RefferenceFileBlocks.vue

@@ -2,10 +2,10 @@
   <div>
     <header class="client-formated-markdown-element-item client-formated-markdown-refference-header">
       <div>来源</div>
-      <div>查看全部关联</div>
+      <div class="btn-show-related-all" @click="showAllRelated">查看全部关联 <icon-double-right /></div>
     </header>
 
-    <RefferenceFileNameList :doc_aggs="doc_aggs" @showDocDetail="handleShowDocDetail" />
+    <RefferenceFileNameList :doc_aggs="doc_aggs" :chunks="chunks" @showDocDetail="handleShowDocDetail" />
 
     <a-drawer
       :width="'90%'"
@@ -19,7 +19,7 @@
       <template #title> 文档详情 </template>
 
       <div>
-        <RefferenceDocDetail :targetDocument="targetDocument" />
+        <RefferenceDocDetail :targetDocument="targetDocument" @back="handleBackQA" />
       </div>
     </a-drawer>
   </div>
@@ -64,86 +64,23 @@ const handleShowDocDetail = (doc_item) => {
   // 展示文档详情
   handleClick();
 };
-</script>
-
-<style scoped>
-.knowledge-detail {
-  width: 320px;
-  padding-top: 20px;
-}
-
-.knowledge-content {
-  height: 300px;
-  overflow-y: auto;
-  line-height: 30px;
-}
-
-.knowledge-footer {
-  border-top: 1px solid rgba(229, 229, 229, 1);
-  margin-top: 20px;
-  padding-top: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  /*
-  p {
-    &:nth-child(1) {
-      opacity: 0.8;
-    }
-
-    &:nth-child(2) {
-      flex: 1;
-      display: flex;
-      justify-content: left;
-      margin: 0 30px;
-
-      > span {
-        margin: 0 5px;
-        cursor: pointer;
-
-        &:hover,
-        &.active {
-          color: #00aea3;
-        }
-      }
-    }
-
-    &:nth-child(3) {
-      font-weight: bold;
-      cursor: pointer;
-
-      &:hover {
-        color: #00aea3;
-      }
-    }
-  } */
-}
-
-.doc-ref-container {
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-}
 
-.doc-ref-index {
-  display: inline-block;
-  background-color: #00aea333;
-  color: #00aea3;
-  padding: 1px 5px;
-  border-radius: 2px;
-  margin-right: 5px;
-  font-size: 12px;
+const showAllRelated = () => {
+  handleClick();
+};
 
-  /* margin: 0 5px; */
-  cursor: pointer;
-}
+// 返回
+const handleBackQA = () => {
+  handleCancel();
+};
+</script>
 
-.doc-ref-label {
-  /* margin: 0 5px; */
+<style scoped>
+.btn-show-related-all {
   cursor: pointer;
 }
 
-.doc-ref-label:hover {
+.btn-show-related-all:hover {
   color: #00aea3;
 }
 </style>

src/modules/answer-refference/RefferenceFileNameContentLinks.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="knowledge-detail">
+    <div class="knowledge-content">
+      <div v-for="(content, index) in content_ltks" :key="content">
+        <div v-if="active_index === index">{{ content }}</div>
+      </div>
+    </div>
+
+    <div class="knowledge-footer">
+      <p>检索片段</p>
+
+      <p>
+        <span
+          v-for="(content, contentIndex) in content_ltks"
+          class="knowledge-page-item"
+          :key="contentIndex"
+          :class="{ active: active_index === contentIndex }"
+          @click="handleActive(contentIndex)"
+        >
+          {{ contentIndex + 1 }}
+        </span>
+      </p>
+
+      <div class="show-detail-btn" @click="goKnowledge(knowledge)">查看详情></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineComponent, ref, onBeforeUnmount, onMounted, reactive, nextTick, inject } from 'vue';
+import { defineEmits } from 'vue';
+
+const props = defineProps({
+  // page: Number,
+  content_ltks: Array
+});
+
+const active_index = ref(0);
+const handleActive = (index) => {
+  active_index.value = index;
+};
+
+const emit = defineEmits(['showDocument']);
+
+const goKnowledge = (knowledge) => {
+  emit('showDocument', knowledge);
+};
+</script>
+
+<style scoped>
+.knowledge-detail {
+}
+
+.knowledge-content {
+  height: 300px;
+  overflow-y: auto;
+  line-height: 30px;
+}
+
+.knowledge-footer {
+  border-top: 1px solid rgba(229, 229, 229, 1);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.knowledge-page-item {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-left: 2px;
+  margin-right: 2px;
+  cursor: pointer;
+  /* background-color: #ccc; */
+  background-color: #00aea333;
+  color: #00aea3;
+  border-radius: 3px;
+  text-align: center;
+  line-height: 18px;
+  font-size: 12px;
+}
+
+.show-detail-btn {
+  cursor: pointer;
+}
+.show-detail-btn:hover {
+  color: #00aea3;
+}
+</style>

src/modules/answer-refference/RefferenceFileNameItem.vue

@@ -1,16 +1,23 @@
 <template>
   <div>
-    <a-popover :title="knowledge.doc_name" position="left">
+    <a-popover :title="knowledge.doc_name" position="left" :content-style="{ width: '400px', maxWidth: '400px' }">
       <div class="doc-ref-container" @click="goKnowledge(knowledge.doc_name)">
         <span class="doc-ref-index">{{ knowledgeIndex + 1 }}</span>
         <span class="doc-ref-label">{{ knowledge.doc_name }}</span>
       </div>
 
       <template #content>
-        <div class="knowledge-detail">
+        <RefferenceFileNameContentLinks
+          :content_ltks="knowledge.content_ltks"
+          :page="knowledge.page"
+          @showDocument="goKnowledge"
+        />
+
+        <!-- <div class="knowledge-detail">
           <div class="knowledge-content">
             {{ knowledge.content_ltks }}
           </div>
+
           <div class="knowledge-footer">
             <p>检索片段</p>
             <p>
@@ -26,10 +33,9 @@
                 >{{ contentIndex + 1 }}</span
               >
             </p>
-            <!-- TODO详情暂时注释 -->
             <p @click="goKnowledge(knowledge)">查看详情></p>
           </div>
-        </div>
+        </div> -->
       </template>
     </a-popover>
   </div>
@@ -39,6 +45,7 @@
 import { defineComponent, ref, onBeforeUnmount, onMounted, reactive, nextTick, inject } from 'vue';
 import { defineEmits } from 'vue';
 import { getDocumentUrl } from './document';
+import RefferenceFileNameContentLinks from './RefferenceFileNameContentLinks.vue';
 
 const props = defineProps({
   knowledge: Object,
@@ -55,8 +62,8 @@ const goKnowledge = (knowledge) => {
 
 <style scoped>
 .knowledge-detail {
-  width: 320px;
-  padding-top: 20px;
+  /* width: 320px; */
+  /* padding-top: 20px; */
 }
 
 .knowledge-content {
@@ -67,8 +74,8 @@ const goKnowledge = (knowledge) => {
 
 .knowledge-footer {
   border-top: 1px solid rgba(229, 229, 229, 1);
-  margin-top: 20px;
-  padding-top: 20px;
+  /* margin-top: 20px;
+  padding-top: 20px; */
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -107,7 +114,7 @@ const goKnowledge = (knowledge) => {
 }
 
 .doc-ref-container {
-  height: 40px;
+  height: 32px;
   display: inline-flex;
   align-items: center;
 }

src/modules/answer-refference/RefferenceFileNameList.vue

@@ -1,6 +1,6 @@
 <template>
   <RefferenceFileNameItem
-    v-for="(item, index) of doc_aggs"
+    v-for="(item, index) of document_list"
     :knowledge="item"
     :key="index"
     :knowledgeIndex="index"
@@ -9,14 +9,54 @@
 </template>
 
 <script setup>
+import { onMounted, computed } from 'vue';
 import RefferenceFileNameItem from './RefferenceFileNameItem.vue';
 
 const props = defineProps({
-  doc_aggs: Array
+  doc_aggs: Array,
+  chunks: Array
 });
 
 const emit = defineEmits(['showDocDetail']);
 
+const document_list = computed(() => {
+  const doc_list = props.doc_aggs;
+  const chunks = props.chunks;
+
+  const res_list = [];
+
+  const len = doc_list.length;
+  for (let i = 0; i < len; i++) {
+    const doc = doc_list[i];
+
+    const res_doc = {
+      doc_id: doc.doc_id,
+      doc_name: doc.doc_name,
+      count: doc.count,
+      page: i
+    };
+
+    const cur_doc_id = doc.doc_id;
+
+    const cur_doc_peaces = [];
+    if (chunks && Array.isArray(chunks)) {
+      chunks.forEach((item, index) => {
+        const chunk_doc_id = item.doc_id;
+
+        if (cur_doc_id === chunk_doc_id) {
+          cur_doc_peaces.push(item.content_ltks);
+        }
+      });
+    }
+
+    res_doc.content_ltks = cur_doc_peaces;
+
+    res_list.push(res_doc);
+  }
+
+  return res_list;
+});
+
 /**
  * 展示文档详情
  * @param item
@@ -24,4 +64,19 @@ const emit = defineEmits(['showDocDetail']);
 const handleShowDocument = (item) => {
   emit('showDocDetail', item);
 };
+
+onMounted(() => {
+  // console.log(props.doc_aggs, '文档信息');
+  // console.log(props.chunks, '文档碎片');
+  // const cur_doc_id = props.doc_aggs.doc_id;
+  // const cur_doc_peaces = [];
+  // if (props.chunks && Array.isArray(props.chunks)) {
+  //   props.chunks.forEach((item, index) => {
+  //     const chunk_doc_id = item.doc_id;
+  //     if (cur_doc_id === chunk_doc_id) {
+  //       cur_doc_peaces.push(item);
+  //     }
+  //   });
+  // }
+});
 </script>

src/modules/answer-refference/RefferenceFlag.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="refference-container">
-    <a-popover>
+    <a-popover :content-style="{ width: '500px', maxWidth: '500px' }">
       <span class="refference-flag-circle"></span>
 
       <template #title></template>

src/modules/file-name/FileNameDisplay.vue

@@ -40,6 +40,12 @@ const img_src = icon_map[file_endfix];
   display: flex;
   justify-content: flex-start;
   align-items: center;
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; /* 这里设置显示的行数 */
+  line-clamp: 1;
+  overflow: hidden;
 }
 .file-name-pdf {
   cursor: pointer;