feat: 新增支持 KKFileView 文件预览功能，需要自行部署文件预览服务器

.env.development

@@ -12,3 +12,9 @@ VITE_BASE = '/'
 
 # 是否开启开发者工具
 VITE_OPEN_DEVTOOLS = false
+
+# 是否开启KKFileView
+FILE_OPEN_PREVIEW = true
+
+# KKFileView服务器地址
+FILE_VIEW_SERVER_URL = 'http://192.168.122.209:8012'

.env.production

@@ -8,4 +8,10 @@ VITE_API_BASE_URL = 'https://api.continew.top'
 VITE_API_WS_URL = 'wss://api.continew.top'
 
 # 地址前缀
-VITE_BASE = '/'
+VITE_BASE = '/'
+
+# 是否开启KKFileView
+FILE_OPEN_PREVIEW = false
+
+# KKFileView服务器地址
+FILE_VIEW_SERVER_URL = 'http://localhost:8012'

.env.test

@@ -14,3 +14,9 @@ VITE_BASE = '/test'
 
 # 是否开启开发者工具
 VITE_OPEN_DEVTOOLS = true
+
+# 是否开启KKFileView
+FILE_OPEN_PREVIEW = false
+
+# KKFileView服务器地址
+FILE_VIEW_SERVER_URL = 'http://localhost:8012'

src/types/env.d.ts

@@ -5,6 +5,8 @@ interface ImportMetaEnv {
   readonly VITE_API_PREFIX: string
   readonly VITE_API_BASE_URL: string
   readonly VITE_BASE: string
+  readonly FILE_OPEN_PREVIEW: string
+  readonly FILE_VIEW_SERVER_URL: string
 }
 
 interface ImportMeta {

src/utils/downloadFile.ts

@@ -22,7 +22,6 @@ export function downloadByUrl({
   url: string
   target?: '_self' | '_blank'
   fileName?: string
-  isSameHost: boolean
 }): Promise<boolean> {
   // 是否同源
   const isSameHost = new URL(url).host === location.host

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

@@ -0,0 +1,101 @@
+<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'
+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

@@ -17,7 +17,8 @@
         </a-dropdown>
 
         <a-input-group>
-          <a-input v-model="queryForm.name" placeholder="请输入文件名" allow-clear style="width: 200px" @change="search" />
+          <a-input v-model="queryForm.name" placeholder="请输入文件名" allow-clear style="width: 200px"
+                   @change="search" />
           <a-button type="primary" @click="search">
             <template #icon>
               <icon-search />
@@ -30,7 +31,7 @@
       <!-- 右侧区域 -->
       <a-space wrap>
         <a-button v-if="isBatchMode" :disabled="!selectedFileIds.length" type="primary" status="danger"
-          @click="handleMulDelete">
+                  @click="handleMulDelete">
           <template #icon>
             <icon-delete />
           </template>
@@ -57,16 +58,17 @@
     <!-- 文件列表-宫格模式 -->
     <a-spin id="fileMain" class="file-main__list" :loading="loading">
       <FileGrid v-show="fileList.length && mode === 'grid'" :data="fileList" :is-batch-mode="isBatchMode"
-        :selected-file-ids="selectedFileIds" @click="handleClickFile" @select="handleSelectFile"
-        @right-menu-click="handleRightMenuClick"></FileGrid>
+                :selected-file-ids="selectedFileIds" @click="handleClickFile" @select="handleSelectFile"
+                @right-menu-click="handleRightMenuClick"></FileGrid>
 
       <!-- 文件列表-列表模式 -->
       <FileList v-show="fileList.length && mode === 'list'" :data="fileList" :is-batch-mode="isBatchMode"
-        :selected-file-ids="selectedFileIds" @click="handleClickFile" @select="handleSelectFile"
-        @right-menu-click="handleRightMenuClick"></FileList>
+                :selected-file-ids="selectedFileIds" @click="handleClickFile" @select="handleSelectFile"
+                @right-menu-click="handleRightMenuClick"></FileList>
 
       <a-empty v-if="!fileList.length" />
     </a-spin>
+    <FilePreview ref="filePreviewRef" @download="args => onDownload(args)" />
     <div class="pagination">
       <a-pagination v-bind="pagination" />
     </div>
@@ -89,6 +91,7 @@ import { type FileItem, type FileQuery, deleteFile, listFile, uploadFile } from
 import { ImageTypes } from '@/constant/file'
 import 'viewerjs/dist/viewer.css'
 import { downloadByUrl } from '@/utils/downloadFile'
+import FilePreview from '@/views/system/file/main/FileMain/FilePreview.vue'
 
 const FileList = defineAsyncComponent(() => import('./FileList.vue'))
 const route = useRoute()
@@ -110,29 +113,43 @@ const {
   pagination,
   search
 } = useTable((page) => listFile({ ...queryForm, ...page }), { immediate: false, paginationOption })
-
+const filePreviewRef = ref()
 // 点击文件
 const handleClickFile = (item: FileItem) => {
-  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 (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 (item.extension === 'mp4') {
+      previewFileVideoModal(item)
+    }
+    if (item.extension === 'mp3') {
+      previewFileAudioModal(item)
+    }
   }
-  if (item.extension === 'mp4') {
-    previewFileVideoModal(item)
-  }
-  if (item.extension === 'mp3') {
-    previewFileAudioModal(item)
-  }
+}
+// 下载文件
+const onDownload = async (fileInfo: FileItem) => {
+  const res = await downloadByUrl({
+    url: fileInfo.url,
+    target: '_self',
+    fileName: `${fileInfo.name}.${fileInfo.extension}`
+  })
+  res ? Message.success('下载成功') : Message.error('下载失败')
+  search()
 }
 
 // 右键菜单
@@ -154,13 +171,7 @@ const handleRightMenuClick = async (mode: string, fileInfo: FileItem) => {
   } else if (mode === 'detail') {
     openFileDetailModal(fileInfo)
   } else if (mode === 'download') {
-    const res = await downloadByUrl({
-      url: fileInfo.url,
-      target: '_self',
-      fileName: `${fileInfo.name}.${fileInfo.extension}`
-    })
-    res ? Message.success('下载成功') : Message.error('下载失败')
-    search()
+    await onDownload(fileInfo)
   }
 }
 
@@ -186,7 +197,7 @@ const handleMulDelete = () => {
 // 上传
 const handleUpload = (options: RequestOption) => {
   const controller = new AbortController()
-    ; (async function requestWrap() {
+  ;(async function requestWrap() {
     const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
     onProgress(20)
     const formData = new FormData()

vite.config.ts

@@ -60,6 +60,8 @@ export default defineConfig(({ command, mode }) => {
           assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
         }
       }
-    }
+    },
+    // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。
+    envPrefix: ['VITE', 'FILE']
   }
 })