refactor: 使用 vue-office 重构文件预览（移除KKFileView）

移除 KKFileView
使用 vue-office 重构文件预览
移除依赖  editor,md-editor-v3,editor-for-vue

src/views/system/file/main/FileMain/FilePreview.vue

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <a-modal
-        v-model:visible="visible"
-        :title="title"
-        :mask-closable="false"
-        :esc-to-close="false"
-        width="90%"
-        draggable
-    >
-      <div class="modal-content">
-        <div class="modal-header">
-          <!--          <a-button type="primary" @click="onPrintFile"> -->
-          <!--            <template #icon> -->
-          <!--              <icon-printer /> -->
-          <!--            </template> -->
-          <!--            <template #default> -->
-          <!--              打印 -->
-          <!--            </template> -->
-          <!--          </a-button> -->
-          <a-button type="primary" status="success" @click="onDownloadFile">
-            <template #icon>
-              <icon-download />
-            </template>
-            下载
-          </a-button>
-        </div>
-        <div class="iframe-container">
-          <iframe :src="previewUrl" />
-        </div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { FileItem } from '@/apis/system'
-import { encodeByBase64 } from '@/utils/encrypt'
-
-const emit = defineEmits(['download'])
-
-const visible = ref(false)
-const title = ref('文件预览')
-const fileObject = ref<FileItem>()
-const isLoading = ref(false)
-const error = ref('')
-const previewUrl = ref('')
-
-// 显示弹窗
-function show(fileItem: FileItem) {
-  fileObject.value = fileItem
-  visible.value = true
-  title.value = `${fileItem.name}.${fileItem.extension}`
-  isLoading.value = true
-  error.value = ''
-
-  previewUrl.value = `${import.meta.env.FILE_VIEW_SERVER_URL}/onlinePreview?url=${encodeURIComponent(encodeByBase64(fileItem.url))}`
-}
-
-// 打印文件
-// const onPrintFile = () => {
-// }
-// 下载文件
-const onDownloadFile = () => {
-  emit('download', fileObject.value)
-}
-defineExpose({
-  show
-})
-</script>
-
-<style scoped lang="scss">
-.modal-content {
-  display: flex;
-  flex-direction: column;
-  height: 80vh;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px;
-  background: #f5f5f5;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.iframe-container {
-  overflow: hidden;
-  flex: 1;
-  height: calc(80vh - 50px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-iframe {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/system/file/main/FileMain/index.vue

@@ -68,7 +68,7 @@
 
       <a-empty v-if="!fileList.length" />
     </a-spin>
-    <FilePreview ref="filePreviewRef" @download="args => onDownload(args)" />
+    <FilePreview ref="filePreviewRef" />
     <div class="pagination">
       <a-pagination v-bind="pagination" />
     </div>
@@ -88,10 +88,11 @@ import FileGrid from './FileGrid.vue'
 import useFileManage from './useFileManage'
 import { useTable } from '@/hooks'
 import { type FileItem, type FileQuery, deleteFile, listFile, uploadFile } from '@/apis'
-import { ImageTypes } from '@/constant/file'
+import { ImageTypes, OfficeTypes } from '@/constant/file'
 import 'viewerjs/dist/viewer.css'
 import { downloadByUrl } from '@/utils/downloadFile'
-import FilePreview from '@/views/system/file/main/FileMain/FilePreview.vue'
+import FilePreview from '@/components/FilePreview/index.vue'
+import type { ExcelConfig } from '@/components/FilePreview/type'
 
 const FileList = defineAsyncComponent(() => import('./FileList.vue'))
 const route = useRoute()
@@ -116,29 +117,44 @@ const {
 const filePreviewRef = ref()
 // 点击文件
 const handleClickFile = (item: FileItem) => {
-  if (JSON.parse(import.meta.env.FILE_OPEN_PREVIEW)) {
-    filePreviewRef.value.show(item)
-  } else {
-    if (ImageTypes.includes(item.extension)) {
-      if (item.url) {
-        const imgList: string[] = fileList.value.filter((i) => ImageTypes.includes(i.extension)).map((a) => a.url || '')
-        const index = imgList.findIndex((i) => i === item.url)
-        if (imgList.length) {
-          viewerApi({
-            options: {
-              initialViewIndex: index
-            },
-            images: imgList
-          })
-        }
+  if (ImageTypes.includes(item.extension)) {
+    if (item.url) {
+      const imgList: string[] = fileList.value.filter((i) => ImageTypes.includes(i.extension)).map((a) => a.url || '')
+      const index = imgList.findIndex((i) => i === item.url)
+      if (imgList.length) {
+        viewerApi({
+          options: {
+            initialViewIndex: index
+          },
+          images: imgList
+        })
       }
     }
-    if (item.extension === 'mp4') {
-      previewFileVideoModal(item)
-    }
-    if (item.extension === 'mp3') {
-      previewFileAudioModal(item)
+  }
+  if (OfficeTypes.includes(item.extension)) {
+    const excelConfig: ExcelConfig = {
+      xls: item.extension === 'xls',
+      minColLength: 0,
+      minRowLength: 0,
+      widthOffset: 10,
+      heightOffset: 10,
+      beforeTransformData: (workbookData) => {
+        return workbookData
+      },
+      transformData: (workbookData) => {
+        return workbookData
+      }
     }
+    filePreviewRef.value.onPreview({
+      fileInfo: { data: item.url, fileName: item.name, fileType: item.extension },
+      excelConfig
+    })
+  }
+  if (item.extension === 'mp4') {
+    previewFileVideoModal(item)
+  }
+  if (item.extension === 'mp3') {
+    previewFileAudioModal(item)
   }
 }
 // 下载文件