优化PreviewImg和PreviewPdf

src/components/PreviewImg/index.d.ts

@@ -2,7 +2,7 @@ import type { FC } from "react";
 
 export interface PreviewImgProps {
   /** 图片列表 */
-  files: any[];
+  files: string[] | { filePath?: string; [key: string]: string }[];
   /** 图片地址的key，默认 filePath */
   fileUrlKey?: string;
 }

src/components/PreviewPdf/index.d.ts

@@ -2,7 +2,7 @@ import type { FC } from "react";
 
 export interface PreviewPdfProps {
   /** 文件列表，和 name、url 冲突 */
-  files?: Record<string, any>[];
+  files?: { filePath?: string; fileName?: string; name?: string; [key: string]: string }[];
   /** 文件名字段名，传入 files 时会优先查找是否存在 name、fileName  */
   nameKey?: string;
   /** 文件路径字段名，传入 files 时会优先查找是否存在 filePath */

src/components/PreviewPdf/index.js

@@ -1,5 +1,6 @@
 import { Button, Space } from "antd";
 import { useState } from "react";
+import { getFileName } from "../../utils";
 import Pdf from "../Pdf";
 
 /**
@@ -30,6 +31,10 @@ const PreviewPdf = (props) => {
     setCurrentName("");
   };
 
+  const extractFileName = (item) => {
+    return item.name || item.fileName || item[nameKey] || getFileName(item.filePath || item[urlKey]);
+  };
+
   // 单个文件预览模式
   if (files.length === 0 && name && url) {
     return (
@@ -57,11 +62,11 @@ const PreviewPdf = (props) => {
         {files.map(item => (
           <div key={item.filePath || item[urlKey]} style={{ marginTop: 5 }}>
             <Space>
-              <span>{item.name || item.fileName || item[nameKey]}</span>
+              <span>{ extractFileName(item)}</span>
               <Button
                 type="primary"
                 size="small"
-                onClick={() => previewPdf(item.filePath || item[urlKey], item.name || item.fileName || item[nameKey])}
+                onClick={() => previewPdf(item.filePath || item[urlKey], extractFileName(item))}
               >
                 预览
               </Button>