From 801514dbe3e3b4d95daa4daaa2fe76fdec549736 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 21 May 2025 11:54:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81pdf=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?(=E5=8E=9F=E7=94=9F=20=E6=B5=8F=E8=A7=88=E5=99=A8=E6=8E=A5?=
 =?UTF-8?q?=E7=AE=A1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-antd/src/views/system/oss/constant.ts |  2 ++
 .../views/system/oss/file-upload-modal.vue    |  6 +++-
 .../views/system/oss/image-upload-modal.vue   |  2 +-
 apps/web-antd/src/views/system/oss/index.vue  | 33 +++++++++++++++++--
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 apps/web-antd/src/views/system/oss/constant.ts

diff --git a/apps/web-antd/src/views/system/oss/constant.ts b/apps/web-antd/src/views/system/oss/constant.ts
new file mode 100644
index 00000000..9025cc09
--- /dev/null
+++ b/apps/web-antd/src/views/system/oss/constant.ts
@@ -0,0 +1,2 @@
+/** 支持的图片列表 */
+export const supportImageList = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
diff --git a/apps/web-antd/src/views/system/oss/file-upload-modal.vue b/apps/web-antd/src/views/system/oss/file-upload-modal.vue
index dd144023..4914289e 100644
--- a/apps/web-antd/src/views/system/oss/file-upload-modal.vue
+++ b/apps/web-antd/src/views/system/oss/file-upload-modal.vue
@@ -31,7 +31,11 @@ const [BasicModal, modalApi] = useVbenModal({
     title="文件上传"
   >
     <div class="flex flex-col gap-4">
-      <FileUpload v-model:value="fileList" :enable-drag-upload="true" />
+      <FileUpload
+        v-model:value="fileList"
+        :enable-drag-upload="true"
+        :max-count="3"
+      />
     </div>
   </BasicModal>
 </template>
diff --git a/apps/web-antd/src/views/system/oss/image-upload-modal.vue b/apps/web-antd/src/views/system/oss/image-upload-modal.vue
index 370d381c..44178372 100644
--- a/apps/web-antd/src/views/system/oss/image-upload-modal.vue
+++ b/apps/web-antd/src/views/system/oss/image-upload-modal.vue
@@ -31,7 +31,7 @@ const [BasicModal, modalApi] = useVbenModal({
     title="图片上传"
   >
     <div class="flex flex-col gap-4">
-      <ImageUpload v-model:value="fileList" />
+      <ImageUpload v-model:value="fileList" :max-count="3" />
     </div>
   </BasicModal>
 </template>
diff --git a/apps/web-antd/src/views/system/oss/index.vue b/apps/web-antd/src/views/system/oss/index.vue
index 06b79a66..18cc20db 100644
--- a/apps/web-antd/src/views/system/oss/index.vue
+++ b/apps/web-antd/src/views/system/oss/index.vue
@@ -33,6 +33,7 @@ import { ossDownload, ossList, ossRemove } from '#/api/system/oss';
 import { calculateFileSize } from '#/utils/file';
 import { downloadByData } from '#/utils/file/download';
 
+import { supportImageList } from './constant';
 import { columns, querySchema } from './data';
 import fallbackImageBase64 from './fallback-image.txt?raw';
 import fileUploadModal from './file-upload-modal.vue';
@@ -164,10 +165,32 @@ onMounted(async () => {
   preview.value = previewStr === 'true';
 });
 
+/**
+ * 根据拓展名判断是否是图片
+ * @param ext 拓展名
+ */
 function isImageFile(ext: string) {
-  const supportList = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
-  return supportList.some((item) => ext.toLocaleLowerCase().includes(item));
+  return supportImageList.some((item) =>
+    ext.toLocaleLowerCase().includes(item),
+  );
 }
+
+/**
+ * 判断是否是pdf文件
+ * @param ext 扩展名
+ */
+function isPdfFile(ext: string) {
+  return ext.toLocaleLowerCase().includes('pdf');
+}
+
+/**
+ * pdf预览 使用浏览器接管
+ * @param url 文件地址
+ */
+function pdfPreview(url: string) {
+  window.open(url);
+}
+
 const [ImageUploadModal, imageUploadApi] = useVbenModal({
   connectedComponent: imageUploadModal,
 });
@@ -231,6 +254,12 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
             </div>
           </template>
         </Image>
+        <!-- pdf预览 使用浏览器开新窗口 -->
+        <span
+          v-else-if="preview && isPdfFile(row.url)"
+          class="icon-[vscode-icons--file-type-pdf2] size-10 cursor-pointer"
+          @click.stop="pdfPreview(row.url)"
+        ></span>
         <span v-else>{{ row.url }}</span>
       </template>
       <template #action="{ row }">