From b3848697635048546c83f194ed05eed4fbfd3a16 Mon Sep 17 00:00:00 2001
From: Chenx221 <chenx221@yandex.com>
Date: Mon, 12 Feb 2024 15:27:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=89=8D=E7=AB=AF=E5=87=86?=
 =?UTF-8?q?=E5=A4=87(2)=20=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/css/home_style.css | 34 +++++++++++++++++++++++++-
 web/js/home_script.js  | 54 +++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 2 deletions(-)

diff --git a/web/css/home_style.css b/web/css/home_style.css
index 0165856..4dcb1ac 100644
--- a/web/css/home_style.css
+++ b/web/css/home_style.css
@@ -16,7 +16,7 @@ table a {
     line-height: 2;
 }
 
-.file_info{
+.file_info {
     font-size: large;
     line-height: 2;
 }
@@ -35,4 +35,36 @@ table a {
 
 .action-col {
     width: 18%;
+}
+
+.breadcrumb {
+    border-radius: 0.375rem;
+}
+
+.breadcrumb .breadcrumb-item {
+    text-decoration: none;
+}
+
+.dropdown-menu {
+    --bs-dropdown-min-width: auto !important;
+}
+
+#drop-area.dragging {
+    border: 2px dashed #999;
+    background: #f8f8f8;
+    z-index: 1000;
+    opacity: 0.7;
+    /*position: relative;*/
+}
+
+#drop-area.dragging::after {
+    content: "⇧\A拖拽文件到这里";
+    white-space: pre;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 40px;
+    color: #000000;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/web/js/home_script.js b/web/js/home_script.js
index 95823ba..062c7ac 100644
--- a/web/js/home_script.js
+++ b/web/js/home_script.js
@@ -16,4 +16,56 @@ $(document).on('click', '.delete-btn', function () {
     var relativePath = $(this).attr('value');
     $('#deleteRelativePath').val(relativePath);
     $('#deleteModal').modal('show');
-});
\ No newline at end of file
+});
+$(document).on('click', '.file-upload-btn', function () {
+    console.log('你点击了上传文件，但功能尚未实现');
+});
+$(document).on('click', '.folder-upload-btn', function () {
+    console.log('你点击了上传文件夹，但功能尚未实现');
+});
+$(document).on('click', '.offline-download-btn', function () {
+    console.log('你点击了离线下载，但功能尚未实现');
+});
+
+var dropArea = document.getElementById('drop-area');
+dropArea.addEventListener('dragover', function (event) {
+    // 阻止浏览器的默认行为
+    event.preventDefault();
+});
+dropArea.addEventListener('drop', function (event) {
+    // 阻止浏览器的默认行为
+    event.preventDefault();
+
+    // 获取用户拖拽的文件或文件夹
+    var items = event.dataTransfer.items;
+
+    // 遍历项目
+    for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        uploadFile(item.getAsFile());
+        dropArea.classList.remove('dragging');
+    }
+});
+dropArea.addEventListener('dragenter', function (event) {
+    // 阻止浏览器的默认行为
+    event.preventDefault();
+
+    // 添加 dragging 类
+    dropArea.classList.add('dragging');
+});
+
+dropArea.addEventListener('dragleave', function (event) {
+    // 阻止浏览器的默认行为
+    event.preventDefault();
+
+    // 如果相关目标是拖拽区域或其子元素，那么就不移除 dragging 类
+    if (!dropArea.contains(event.relatedTarget)) {
+        // 移除 dragging 类
+        dropArea.classList.remove('dragging');
+    }
+});
+
+function uploadFile(file) {
+    console.log('准备上传，但功能尚未实现');
+}
+