better image ui

sbx0 · Jan 12, 2024 · 24d2936 · 24d2936
1 parent e7649a3
commit 24d2936
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 36 deletions.
diff --git a/todo-service/src/main/java/cn/sbx0/todo/business/file/FileController.java b/todo-service/src/main/java/cn/sbx0/todo/business/file/FileController.java
@@ -53,6 +53,10 @@ public ResponseEntity<FileSystemResource> downloadFile(@PathVariable String file
         String jsonFilePath = filePath + JSON_TYPE;
         // 读取文件原始信息
         FileInfoEntity fileInfo = JSON.readFromFile(jsonFilePath, FileInfoEntity.class);
+        if (fileInfo == null) {
+            return ResponseEntity.ok()
+                    .body(null);
+        }
 
         FileSystemResource fileSystemResource = new FileSystemResource(filePath);
 

diff --git a/todo-service/src/main/java/cn/sbx0/todo/utils/JSON.java b/todo-service/src/main/java/cn/sbx0/todo/utils/JSON.java
@@ -42,7 +42,12 @@ public static <T> T format(String content, Class<T> valueType) {
     }
 
     public static <T> T readFromFile(String filePath,Class<T> valueType) throws IOException {
-        return OBJECT_MAPPER.readValue(new File(filePath), valueType);
+        File file = new File(filePath);
+        if (file.exists()) {
+            return OBJECT_MAPPER.readValue(file, valueType);
+        } else {
+            return null;
+        }
     }
 
     public static JavaType getCollectionType(Class<?> collectionClass, Class<?>... elementClasses) {

diff --git a/todo-web/app/file/components/image/image.jsx b/todo-web/app/file/components/image/image.jsx
@@ -10,13 +10,14 @@ function ImageClickFull({src}) {
     };
 
     return (
-        <div className={`${isFullScreen ? 'w-screen h-screen fixed top-0 left-0 bg-black' : ''}`}
+        <div className={`select-none ${isFullScreen ? 'w-screen h-screen fixed top-0 left-0 bg-black p-1' : 'inline-block ml-1 mt-1 w-32 h-32 md:w-52 md:h-52 lg:w-64 lg:h-64 border border-solid border-gray-200 overflow-hidden'}`}
              onClick={toggleFullScreen}>
-            <img src={src}
-                className={`${isFullScreen ? 'w-full h-full object-contain mx-auto' : ''}`}
-                alt=""
-                loading="lazy"
-            />
+            <div className={`w-full h-full flex items-center`} >
+                <img src={src}
+                     className={`${isFullScreen ? 'w-max h-max object-contain mx-auto' : 'w-max h-max object-cover'}`}
+                     alt=""
+                     loading="lazy"/>
+            </div>
         </div>
     );
 }

diff --git a/todo-web/app/file/components/upload/upload.jsx b/todo-web/app/file/components/upload/upload.jsx
@@ -66,7 +66,7 @@ function DragAndDropUpload() {
                 if (json.success) {
                     let newFiles = files.slice(0);
                     let file = json.data.name;
-                    newFiles.push(file);
+                    newFiles.push({name: file});
                     setFiles(newFiles);
                 } else {
                     console.error('Upload failed:', json.message);
@@ -94,34 +94,15 @@ function DragAndDropUpload() {
     }
 
     return (
-        <div>
-            <div
-                className={`flex items-center justify-center h-screen bg-gray-100 ${dragging ? 'border-4 border-dashed border-blue-500' : ''}`}
-                onDragEnter={handleDragEnter}
-                onDragLeave={handleDragLeave}
-                onDragOver={handleDragOver}
-                onDrop={handleDrop}
-                onPaste={handlePaste}
-            >
-                <div className="bg-white rounded-lg shadow-lg p-6">
-                    <h1 className="text-3xl font-bold mb-4">拖拽/粘贴上传</h1>
-                    <p className="text-gray-700 mb-4">
-                        拖拽/粘贴文件到此区域进行上传
-                    </p>
-                    <div className="border-2 border-dashed border-gray-400 p-4">
-                        {dragging ? '放开以上传文件' : '拖拽文件到此区域'}
-                    </div>
-                </div>
-            </div>
-            <div className="p-1 gap-1 grid grid-cols-3 grid-rows-1">
-                {
-                    files.map((one => {
-                        return <div key={one.name}>
-                            <ImageClickFull src={'/api/file/download/' + one.name}/>
-                        </div>;
-                    }))
-                }
-            </div>
+        <div className="w-screen h-screen"
+             onDragEnter={handleDragEnter}
+             onDragLeave={handleDragLeave}
+             onDragOver={handleDragOver}
+             onDrop={handleDrop}
+             onPaste={handlePaste}>
+            {
+                files.map((one => <ImageClickFull key={one.name} src={'/api/file/download/' + one.name}/>))
+            }
         </div>
     );
 }