From 24d2936224f216590300fa4619c83eec3b698c05 Mon Sep 17 00:00:00 2001
From: sbx0 <jsonsnownothing@gmail.com>
Date: Fri, 12 Jan 2024 18:13:50 +0800
Subject: [PATCH] better image ui

---
 .../todo/business/file/FileController.java    |  4 ++
 .../main/java/cn/sbx0/todo/utils/JSON.java    |  7 +++-
 todo-web/app/file/components/image/image.jsx  | 13 ++++---
 .../app/file/components/upload/upload.jsx     | 39 +++++--------------
 4 files changed, 27 insertions(+), 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
index a8d613e..9db0a06 100644
--- 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
index c397d26..44ac19a 100644
--- 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
index bdbafad..4547ad1 100644
--- 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
index 0bae2c9..ca09523 100644
--- 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>
     );
 }