diff --git a/napcat.webui/package.json b/napcat.webui/package.json index a5efece0..373b98ba 100644 --- a/napcat.webui/package.json +++ b/napcat.webui/package.json @@ -70,6 +70,7 @@ "react-hot-toast": "^2.4.1", "react-icons": "^5.4.0", "react-markdown": "^9.0.3", + "react-photo-view": "^1.2.7", "react-redux": "^9.2.0", "react-responsive": "^10.0.0", "react-router-dom": "^7.1.4", diff --git a/napcat.webui/src/components/file_manage/file_preview_modal.tsx b/napcat.webui/src/components/file_manage/file_preview_modal.tsx index be18f696..792c127f 100644 --- a/napcat.webui/src/components/file_manage/file_preview_modal.tsx +++ b/napcat.webui/src/components/file_manage/file_preview_modal.tsx @@ -18,11 +18,10 @@ interface FilePreviewModalProps { onClose: () => void } -const imageExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp'] -const videoExts = ['.mp4', '.webm'] -const audioExts = ['.mp3', '.wav'] +export const videoExts = ['.mp4', '.webm'] +export const audioExts = ['.mp3', '.wav'] -const supportedPreviewExts = [...imageExts, ...videoExts, ...audioExts] +export const supportedPreviewExts = [...videoExts, ...audioExts] export default function FilePreviewModal({ isOpen, @@ -31,7 +30,7 @@ export default function FilePreviewModal({ }: FilePreviewModalProps) { const ext = path.extname(filePath).toLowerCase() const { data, loading, error, run } = useRequest( - async (path: string) => FileManager.downloadToURL(path), + async () => FileManager.downloadToURL(filePath), { refreshDeps: [filePath], refreshDepsAction: () => { @@ -39,7 +38,7 @@ export default function FilePreviewModal({ if (!filePath || !supportedPreviewExts.includes(ext)) { return } - run(filePath) + run() } } ) @@ -55,20 +54,20 @@ export default function FilePreviewModal({ ) - } else if (imageExts.includes(ext)) { - contentElement = ( - 预览 - ) } else if (videoExts.includes(ext)) { - contentElement = ( -