fix: 预览

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",

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({
         <Spinner />
       </div>
     )
-  } else if (imageExts.includes(ext)) {
-    contentElement = (
-      <img src={data} alt="预览" className="max-w-full max-h-96" />
-    )
   } else if (videoExts.includes(ext)) {
-    contentElement = (
-      <video src={data} controls className="max-w-full max-h-96" />
-    )
+    contentElement = <video src={data} controls className="max-w-full" />
   } else if (audioExts.includes(ext)) {
     contentElement = <audio src={data} controls className="w-full" />
+  } else {
+    contentElement = (
+      <div className="flex justify-center items-center h-full">
+        <Spinner />
+      </div>
+    )
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside">
+    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside" size="3xl">
       <ModalContent>
         <ModalHeader>文件预览</ModalHeader>
         <ModalBody className="flex justify-center items-center">

napcat.webui/src/components/file_manage/file_table.tsx

@@ -12,15 +12,19 @@ import {
   TableRow
 } from '@heroui/table'
 import path from 'path-browserify'
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { BiRename } from 'react-icons/bi'
 import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi'
+import { PhotoSlider } from 'react-photo-view'
 
 import FileIcon from '@/components/file_icon'
 
 import type { FileInfo } from '@/controllers/file_manager'
 
-interface FileTableProps {
+import { supportedPreviewExts } from './file_preview_modal'
+import ImageNameButton, { PreviewImage, imageExts } from './image_name_button'
+
+export interface FileTableProps {
   files: FileInfo[]
   currentPath: string
   loading: boolean
@@ -62,7 +66,42 @@ export default function FileTable({
   const start = (page - 1) * PAGE_SIZE
   const end = start + PAGE_SIZE
   const displayFiles = files.slice(start, end)
+  const [showImage, setShowImage] = useState(false)
+  const [previewIndex, setPreviewIndex] = useState(0)
+  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([])
+
+  const addPreviewImage = useCallback((image: PreviewImage) => {
+    setPreviewImages((prev) => {
+      const exists = prev.some((p) => p.key === image.key)
+      if (exists) return prev
+      return [...prev, image]
+    })
+  }, [])
+
+  useEffect(() => {
+    setPreviewImages([])
+    setPreviewIndex(0)
+    setShowImage(false)
+  }, [files])
+
+  const onPreviewImage = (name: string, images: PreviewImage[]) => {
+    const index = images.findIndex((image) => image.key === name)
+    if (index === -1) {
+      return
+    }
+    setPreviewIndex(index)
+    setShowImage(true)
+  }
+
   return (
+    <>
+      <PhotoSlider
+        images={previewImages}
+        visible={showImage}
+        onClose={() => setShowImage(false)}
+        index={previewIndex}
+        onIndexChange={setPreviewIndex}
+      />
       <Table
         aria-label="文件列表"
         sortDescriptor={sortDescriptor}
@@ -107,26 +146,23 @@ export default function FileTable({
               <Spinner />
             </div>
           }
-        items={displayFiles}
         >
-        {(file: FileInfo) => {
+          {displayFiles.map((file: FileInfo) => {
             const filePath = path.join(currentPath, file.name)
-          // 判断预览类型
             const ext = path.extname(file.name).toLowerCase()
-          const previewable = [
-            '.png',
-            '.jpg',
-            '.jpeg',
-            '.gif',
-            '.bmp',
-            '.mp4',
-            '.webm',
-            '.mp3',
-            '.wav'
-          ].includes(ext)
+            const previewable = supportedPreviewExts.includes(ext)
+            const images = previewImages
             return (
               <TableRow key={file.name}>
                 <TableCell>
+                  {imageExts.includes(ext) ? (
+                    <ImageNameButton
+                      name={file.name}
+                      filePath={filePath}
+                      onPreview={() => onPreviewImage(file.name, images)}
+                      onAddPreview={addPreviewImage}
+                    />
+                  ) : (
                     <Button
                       variant="light"
                       onPress={() =>
@@ -138,11 +174,15 @@ export default function FileTable({
                       }
                       className="text-left justify-start"
                       startContent={
-                    <FileIcon name={file.name} isDirectory={file.isDirectory} />
+                        <FileIcon
+                          name={file.name}
+                          isDirectory={file.isDirectory}
+                        />
                       }
                     >
                       {file.name}
                     </Button>
+                  )}
                 </TableCell>
                 <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
                 <TableCell>
@@ -197,8 +237,9 @@ export default function FileTable({
                 </TableCell>
               </TableRow>
             )
-        }}
+          })}
         </TableBody>
       </Table>
+    </>
   )
 }

napcat.webui/src/components/file_manage/image_name_button.tsx

@@ -0,0 +1,73 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
+
+import FileManager from '@/controllers/file_manager'
+
+import FileIcon from '../file_icon'
+
+export interface PreviewImage {
+  key: string
+  src: string
+  alt: string
+}
+export const imageExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
+
+export interface ImageNameButtonProps {
+  name: string
+  filePath: string
+  onPreview: () => void
+  onAddPreview: (image: PreviewImage) => void
+}
+
+export default function ImageNameButton({
+  name,
+  filePath,
+  onPreview,
+  onAddPreview
+}: ImageNameButtonProps) {
+  const { data, loading, error, run } = useRequest(
+    async () => FileManager.downloadToURL(filePath),
+    {
+      refreshDeps: [filePath],
+      refreshDepsAction: () => {
+        const ext = path.extname(filePath).toLowerCase()
+        if (!filePath || !imageExts.includes(ext)) {
+          return
+        }
+        run()
+      }
+    }
+  )
+  useEffect(() => {
+    if (data) {
+      onAddPreview({
+        key: name,
+        src: data,
+        alt: name
+      })
+    }
+  }, [data, name, onAddPreview])
+
+  return (
+    <Button
+      variant="light"
+      className="text-left justify-start"
+      onPress={onPreview}
+      startContent={
+        error ? (
+          <FileIcon name={name} isDirectory={false} />
+        ) : loading || !data ? (
+          <Spinner size="sm" />
+        ) : (
+          <Image src={data} alt={name} className="w-8 h-8" radius="sm" />
+        )
+      }
+    >
+      {name}
+    </Button>
+  )
+}

napcat.webui/src/main.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client'
+import 'react-photo-view/dist/react-photo-view.css'
 import { BrowserRouter } from 'react-router-dom'
 
 import App from '@/App.tsx'