fix: 修复和完善文档预览功能

src/3rd-libs/docx-preview.js

@@ -1,8 +1,9 @@
 /**
+ * 使用此组件，依赖 jszip 库
+ * 在使用时，需要先安装 jszip
  * @see https://www.npmjs.com/package/docx-preview
  * @see https://www.npmjs.com/package/jszip
  */
-// import './docx-preview/jszip.min.js';
 import { renderAsync } from './docx-preview/docx-preview.mjs';
 
 /**

src/modules/answer-refference/RefferenceDocDetail.vue

@@ -45,15 +45,27 @@
     </div>
 
     <div class="right" ref="pdfFather">
-      <ViewerPDFFromUrl
-        v-if="showPdfViewer"
-        ref="pdfViewer"
-        class="pdf-viewer"
-        :url="pdf_url"
-        :doc_width="DOC_WIDTH"
-        :positions="positions"
-      >
-      </ViewerPDFFromUrl>
+      <template v-if="showPdfViewer">
+        <ViewerPDFFromUrl
+          v-if="target_doc_type === 'pdf'"
+          ref="pdfViewer"
+          class="pdf-viewer"
+          :url="target_doc_url"
+          :doc_width="DOC_WIDTH"
+          :positions="positions"
+        >
+        </ViewerPDFFromUrl>
+
+        <ViewerDocxFromUrl
+          v-if="target_doc_type === 'doc'"
+          ref="pdfViewer"
+          class="pdf-viewer"
+          :url="target_doc_url"
+          :doc_width="DOC_WIDTH"
+          :positions="positions"
+        >
+        </ViewerDocxFromUrl>
+      </template>
     </div>
   </main>
 </template>
@@ -61,6 +73,7 @@
 import { onMounted, ref } from 'vue';
 
 import ViewerPDFFromUrl from '../viewer-pdf/ViewerPDFFromUrl.vue';
+import ViewerDocxFromUrl from '../viewer-docx/ViewerDocxFromUrl.vue';
 
 import { getDocumentUrl } from './document';
 
@@ -68,6 +81,29 @@ const props = defineProps({
   targetDocument: Object
 });
 
+/**
+ * 文档类别：doc/pdf
+ */
+const getDocType = (doc_name) => {
+  if (!doc_name) {
+    return '';
+  }
+
+  const arr = doc_name.split('.');
+  const len = arr.length;
+  const end_fix = arr[len - 1];
+
+  if (end_fix === 'pdf') {
+    return 'pdf';
+  }
+
+  if (end_fix === 'docx' || end_fix === 'doc') {
+    return 'doc';
+  }
+
+  return '';
+};
+
 const emit = defineEmits(['back']);
 
 const userName = ref('当前登录的用户名');
@@ -77,12 +113,15 @@ const showPdfViewer = ref(false);
 const positions = ref([]);
 const pdfFather = ref(null);
 const DOC_WIDTH = ref(1100);
-const pdf_url = ref('');
+
+const target_doc_url = ref('');
+const target_doc_type = ref('');
 
 let target_doc_id = ref(props.targetDocument.id);
 let target_chunk_id = ref('');
 
-pdf_url.value = getDocumentUrl(target_doc_id.value);
+target_doc_url.value = getDocumentUrl(props.targetDocument.id);
+target_doc_type.value = getDocType(props.targetDocument.doc_name);
 
 const pdfViewer = ref(null);
 const docData = props.targetDocument;
@@ -101,7 +140,9 @@ const goBack = () => {
 
 const handelChangePdf = (item) => {
   if (item.doc_id !== target_doc_id.value) {
-    pdf_url.value = getDocumentUrl(item.doc_id);
+    target_doc_url.value = getDocumentUrl(item.doc_id);
+    target_doc_type.value = getDocType(item.doc_name);
+
     target_doc_id.value = item.doc_id;
     target_chunk_id.value = '';
     readLoadPdf();
@@ -111,13 +152,19 @@ const handelChangePdf = (item) => {
 const handlerClickFragment = (frag) => {
   target_chunk_id.value = frag.chunk_id;
   if (frag.doc_id !== target_doc_id.value) {
-    pdf_url.value = getDocumentUrl(frag.doc_id);
+    target_doc_url.value = getDocumentUrl(frag.doc_id);
+    target_doc_type.value = getDocType(frag.doc_name);
+
     target_doc_id.value = frag.doc_id;
     readLoadPdf();
   }
+
   positions.value = [...frag.positions] || [];
-  if (frag.positions && frag.positions.length) {
-    pdfViewer.value.toPageIndex(positions.value[0][0], positions.value);
+
+  if (target_doc_type.value === 'pdf') {
+    if (frag.positions && frag.positions.length) {
+      pdfViewer.value.toPageIndex(positions.value[0][0], positions.value);
+    }
   }
 };
 
@@ -133,8 +180,14 @@ const readLoadPdf = () => {
 onMounted(() => {
   DOC_WIDTH.value = pdfFather.value.getBoundingClientRect().width;
 
-  const doc_id = props.targetDocument.doc_id;
-  pdf_url.value = getDocumentUrl(doc_id);
+  const target_doc = props.targetDocument;
+  const doc_id = target_doc.doc_id;
+  const doc_name = target_doc.doc_name;
+
+  // const doc_id = props.targetDocument.doc_id;
+  target_doc_url.value = getDocumentUrl(doc_id);
+  target_doc_type.value = getDocType(doc_name);
+
   showPdfViewer.value = true;
 });
 </script>
@@ -161,6 +214,8 @@ main > div.left {
   background: #e2e4eb;
   display: flex;
   flex-direction: column;
+  /* height: calc(100vh - 48px - 65px); */
+  height: calc(100vh - 48px - 117px);
 }
 main > div.left > header {
   padding-right: 20px;
@@ -282,4 +337,8 @@ main .activeBox {
 main .activeLink {
   color: #00aea3 !important;
 }
+
+.right {
+  height: calc(100vh - 48px - 65px);
+}
 </style>

src/modules/answer-refference/RefferenceFileBlocks.vue

@@ -12,6 +12,7 @@
       :height="340"
       :visible="visible"
       :placement="position"
+      data-flag="reffernce-file-block-drawer"
       @ok="handleOk"
       @cancel="handleCancel"
       unmountOnClose
@@ -97,8 +98,6 @@ const handleCancel = () => {
 };
 
 const handleShowDocDetail = (item) => {
-  console.log(item, '查看文档详情');
-
   // TODO：组装参数数据
   const cur_tar = targetDocument.value;
 
@@ -123,8 +122,6 @@ const handleShowDocDetail = (item) => {
 const showAllRelated = () => {
   const item = document_list.value[0];
 
-  console.log('显示第一个');
-
   const cur_tar = targetDocument.value;
 
   const obj = {
@@ -156,3 +153,10 @@ const handleBackQA = () => {
   color: #00aea3;
 }
 </style>
+
+<style>
+div.arco-drawer-container[data-flag='reffernce-file-block-drawer'] .arco-drawer-body {
+  height: calc(100vh - 48px - 65px);
+  overflow: hidden;
+}
+</style>

src/modules/answer-refference/RefferenceFlag.vue

@@ -21,7 +21,7 @@
 
     <a-drawer
       ref="drawer"
-      :width="DOC_WIDTH"
+      :width="DOC_WIDTH + 20"
       :visible="visible"
       @ok="handleOk"
       @cancel="handleCancel"
@@ -141,5 +141,6 @@ onMounted(() => {
 <style>
 .arco-drawer-container[data-flag='doc-ref-effect-contaienr'] .arco-drawer-body {
   overflow: hidden;
+  padding: 0;
 }
 </style>

src/modules/answer-refference/document.js

@@ -12,6 +12,10 @@ import { getConfigField } from '../../config';
  * @returns
  */
 export const getDocumentUrl = (doc_id) => {
+  if (!doc_id) {
+    return '';
+  }
+
   const server_url = getConfigField('REFFERENCE_ASSETS_FILE_URL');
 
   return `${server_url}/v1/document/get/${doc_id}`;
@@ -24,6 +28,10 @@ export const getDocumentUrl = (doc_id) => {
  * @returns
  */
 export const getImageUrl = (image_id) => {
+  if (!image_id) {
+    return '';
+  }
+
   const server_url = getConfigField('REFFERENCE_ASSETS_FILE_URL');
 
   return `${server_url}/v1/document/image/${image_id}`;

src/modules/file-name/FileNameDisplay.vue

@@ -40,12 +40,6 @@ 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;
@@ -58,7 +52,8 @@ const img_src = icon_map[file_endfix];
   display: inline-block;
   margin-right: 3px;
   /* height: 22px; */
-  width: 22px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .file-name-icon img {
@@ -67,5 +62,10 @@ const img_src = icon_map[file_endfix];
 
 .file-name-label {
   color: blue;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; /* 这里设置显示的行数 */
+  line-clamp: 1;
+  overflow: hidden;
 }
 </style>

src/modules/file-preview/FileItemDocPreview.vue

@@ -14,7 +14,7 @@
 
     <a-drawer
       ref="drawer"
-      :width="DOC_WIDTH"
+      :width="DOC_WIDTH + 20"
       :visible="visible"
       @ok="handleOk"
       @cancel="handleCancel"

src/modules/viewer-docx/ViewerDocxFromFile.vue

@@ -67,13 +67,15 @@ onMounted(() => {
 <style scoped>
 .doc-container {
   text-align: center;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   overflow-y: auto;
 }
 
 .loading-doc-box {
   width: 100%;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   display: flex;
   text-align: center;
   justify-content: center;

src/modules/viewer-docx/ViewerDocxFromUrl.vue

@@ -52,7 +52,7 @@ onMounted(() => {
     .then((blob) => {
       renderDocxByBlob(box.value, blob)
         .then((res) => {
-          console.log(res);
+          // console.log(res);
 
           // 所有页面都加载完毕，结束加载状态
           load_status.value = 3; // 加载成功
@@ -73,13 +73,15 @@ onMounted(() => {
 <style scoped>
 .doc-container {
   text-align: center;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   overflow-y: auto;
 }
 
 .loading-doc-box {
   width: 100%;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   display: flex;
   text-align: center;
   justify-content: center;

src/modules/viewer-pdf/ViewerPDFFromFile.vue

@@ -309,13 +309,15 @@ defineExpose({
 <style scoped>
 .pdf-container {
   text-align: center;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   overflow-y: auto;
 }
 
 .loading-pdf-box {
   width: 100%;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   display: flex;
   text-align: center;
   justify-content: center;

src/modules/viewer-pdf/ViewerPDFFromUrl.vue

@@ -308,13 +308,15 @@ defineExpose({
 <style scoped>
 .pdf-container {
   text-align: center;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   overflow-y: auto;
 }
 
 .loading-pdf-box {
   width: 100%;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   display: flex;
   text-align: center;
   justify-content: center;