feat(LayerManage): enhance file upload UI

- Replace upload button with a drag-and-drop upload area - Add drag overlay with visual feedback when dragging files - Support both click-to-upload and drag-and-drop - Add file type hints (.tif, .tiff) - Optimize upload area styles for better user experience
hongfaqiu · Nov 15, 2024 · 448c741 · 448c741
1 parent 629a05b
commit 448c741
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 8 deletions.
diff --git a/example/src/components/LayerManage/index.module.scss b/example/src/components/LayerManage/index.module.scss
@@ -1,13 +1,51 @@
 .layerMangeContainer {
   overflow: auto;
   height: 100%;
+  position: relative;
+
+  &.dragging {
+    background-color: var(--semi-color-fill-0);
+  }
+
+  .dragOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(var(--semi-blue-0), 0.8);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    z-index: 100;
+    border: 2px dashed var(--semi-color-primary);
+    pointer-events: none;
+
+    span {
+      color: var(--semi-color-text-0);
+      font-size: 16px;
+    }
+
+    :global(.semi-icon) {
+      color: var(--semi-color-primary);
+    }
+  }
+
   .addLayer {
     display: flex;
     margin-bottom: 10px;
     >button {
       margin: 0 10px;
     }
   }
+  &:global {
+    &.drag-over {
+      border: 2px dashed var(--semi-color-primary);
+      background-color: var(--semi-color-fill-0);
+    }
+  }
 }
 .layerItemControl {
   width: 100%;
@@ -158,4 +196,61 @@
       margin-bottom: 10px;
     }
   }
+}
+
+.uploadBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  background-color: transparent;
+  border: 1px dashed var(--semi-color-border);
+  border-radius: 4px;
+  transition: all 0.2s;
+  cursor: pointer;
+  gap: 8px;
+
+  &:hover {
+    border-color: var(--semi-color-primary);
+  }
+
+  :global(.semi-icon) {
+    color: var(--semi-color-text-2);
+    margin: 0;
+  }
+}
+
+.uploadText {
+  margin: 0;
+  text-align: left;
+
+  .mainText {
+    display: block;
+    color: var(--semi-color-text-0);
+    font-size: 14px;
+    margin-bottom: 2px;
+  }
+
+  .subText {
+    display: block;
+    color: var(--semi-color-text-2);
+    font-size: 12px;
+  }
+}
+
+.uploadArea {
+  margin: 0 0 12px 0;
+  width: 100%;
+
+  :global {
+    .semi-upload-drag {
+      width: 100%;
+    }
+
+    // 移除 Semi UI 上传组件的默认背景色
+    .semi-upload-drag-area-legal {
+      background-color: transparent !important;
+    }
+  }
 }
diff --git a/example/src/components/LayerManage/index.tsx b/example/src/components/LayerManage/index.tsx
@@ -4,12 +4,14 @@ import { useCallback, useState } from 'react';
 import DragableLayerItems from './DragableLayerItems';
 import styles from './index.module.scss'
 import { FileItem } from '@douyinfe/semi-ui/lib/es/upload';
+import { IconUpload } from '@douyinfe/semi-icons';
 
 const LayerManage = () => {
   const { allLayers, addLayer, moveLayer } = LayerHook.useHook();
   const [url, setUrl] = useState('')
   const [loading, setLoading] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
 
   const addCogLayer = useCallback(
     async () => {
@@ -47,20 +49,72 @@ const LayerManage = () => {
     return false
   }
 
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    const tiffFiles = files.filter(file => 
+      file.name.endsWith('.tif') || file.name.endsWith('.tiff')
+    );
+
+    tiffFiles.forEach(file => {
+      uploadFile({
+        name: file.name,
+        fileInstance: file,
+        status: 'success',
+        uid: file.name,
+        size: String(file.size),
+      });
+    });
+  };
+
   return (
-    <div className={styles.layerMangeContainer}>
+    <div 
+      className={`${styles.layerMangeContainer} ${isDragging ? styles.dragging : ''}`}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <div className={styles.dragOverlay} style={{ display: isDragging ? 'flex' : 'none' }}>
+        <IconUpload size="extra-large" />
+        <span>拖拽 TIFF 文件到此处</span>
+      </div>
+
       <div className={styles.addLayer}>
         <Input value={url} onChange={setUrl} placeholder={'输入url添加图层'} showClear />
         <Button loading={loading} onClick={addCogLayer}>添加</Button>
-        <Upload
-          beforeUpload={({ file }) => uploadFile(file)}
-          accept='.tif,.tiff'
-          showUploadList={false}
-        >
-          <Button loading={uploading}>上传文件</Button>
-        </Upload>
       </div>
 
+      <Upload
+        className={styles.uploadArea}
+        beforeUpload={({ file }) => uploadFile(file)}
+        accept='.tif,.tiff'
+        showUploadList={false}
+        draggable
+      >
+        <div className={styles.uploadBox}>
+          <IconUpload size="large" />
+          <p className={styles.uploadText}>
+            <span className={styles.mainText}>点击或拖拽文件到此处</span>
+            <span className={styles.subText}>支持 .tif, .tiff 格式</span>
+          </p>
+        </div>
+      </Upload>
+
       <DragableLayerItems
         layers={allLayers}
         onDrop={(startIndex, endIndex) => moveLayer('2d', startIndex, endIndex)}