From 9cb77adf49380b9ed954764898587178c9771617 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 26 Oct 2023 11:50:01 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/9505

---
 app/src/assets/scss/base.scss             | 18 ++++++++++++++++++
 app/src/assets/scss/business/_av.scss     |  6 +++++-
 app/src/assets/scss/business/_drag.scss   |  3 ++-
 app/src/assets/scss/protyle/_wysiwyg.scss | 10 ++++++++++
 app/src/layout/dock/Files.ts              |  1 +
 5 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 11040eee5..f7bf45126 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -195,6 +195,7 @@ html {
       margin: 0;
       height: 31.5px;
       border-radius: 0;
+
       svg {
         width: 10px !important;
       }
@@ -323,6 +324,23 @@ html {
     opacity: .38;
   }
 
+  .dragover__top:after,
+  .dragover__bottom:after {
+    content: "";
+    width: var(--file-toggle-width);
+    height: 4px;
+    background-color: var(--b3-theme-surface);
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    z-index: 1;
+  }
+
+  .dragover__top:after {
+    top: -3px;
+    bottom: auto;
+  }
+
   &__close {
     min-height: auto;
     transition: var(--b3-transition);
diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index b2b472268..f7d23bb1e 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -86,10 +86,14 @@
     position: relative;
     font-size: 87.5%;
 
-    &.dragover__bottom, {
+    &.dragover__bottom {
       border-bottom-color: var(--b3-theme-primary-lighter);
     }
 
+    &.dragover__top {
+      box-shadow: 0 -3px 0 var(--b3-theme-primary-lighter), inset 0 2px 0 var(--b3-theme-primary-lighter) !important;
+    }
+
     &:hover {
       [data-type="block-ref"],
       [data-type="block-more"] {
diff --git a/app/src/assets/scss/business/_drag.scss b/app/src/assets/scss/business/_drag.scss
index 2406132d2..58a6cce10 100644
--- a/app/src/assets/scss/business/_drag.scss
+++ b/app/src/assets/scss/business/_drag.scss
@@ -1,9 +1,10 @@
 .dragover {
   background-color: var(--b3-theme-primary-lightest);
 
+  // 需要 !important，否则拖拽到闪卡无效果
   &__top {
     border-radius: 0 !important;
-    box-shadow: 0 -2px 0 var(--b3-theme-primary-lighter), inset 0 2px 0 var(--b3-theme-primary-lighter) !important;
+    box-shadow: 0 -3px 0 var(--b3-theme-primary-lighter), inset 0 1px 0 var(--b3-theme-primary-lighter) !important;
   }
 
   &__bottom {
diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index ece0cfade..dac7c8689 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -439,6 +439,16 @@
     background-color: var(--b3-protyle-code-linenumber-hl) !important;
   }
 
+  .dragover {
+    &__top:not(.av__row) {
+      box-shadow: 0 -4px 0 0px var(--b3-theme-primary-lighter) !important;
+    }
+
+    &__bottom:not(.av__row) {
+      box-shadow: 0 4px 0 0px var(--b3-theme-primary-lighter) !important
+    }
+  }
+
   &--attr .protyle-attr {
     opacity: 1;
 
diff --git a/app/src/layout/dock/Files.ts b/app/src/layout/dock/Files.ts
index b6684ba43..84ee1592b 100644
--- a/app/src/layout/dock/Files.ts
+++ b/app/src/layout/dock/Files.ts
@@ -1036,6 +1036,7 @@ export class Files extends Model {
         const ariaLabel = `${getDisplayName(item.name, true, true)} ${item.hSize}${item.bookmark ? "<br>" + window.siyuan.languages.bookmark + " " + item.bookmark : ""}${item.name1 ? "<br>" + window.siyuan.languages.name + " " + item.name1 : ""}${item.alias ? "<br>" + window.siyuan.languages.alias + " " + item.alias : ""}${item.memo ? "<br>" + window.siyuan.languages.memo + " " + item.memo : ""}${item.subFileCount !== 0 ? window.siyuan.languages.includeSubFile.replace("x", item.subFileCount) : ""}<br>${window.siyuan.languages.modifiedAt} ${item.hMtime}<br>${window.siyuan.languages.createdAt} ${item.hCtime}`;
         return `<li data-node-id="${item.id}" data-name="${Lute.EscapeHTMLStr(item.name)}" draggable="true" data-count="${item.subFileCount}" 
 data-type="navigation-file" 
+style="--file-toggle-width:${(item.path.split("/").length - 2) * 18 + 40}px" 
 class="b3-list-item b3-list-item--hide-action" data-path="${item.path}">
     <span style="padding-left: ${(item.path.split("/").length - 2) * 18 + 22}px" class="b3-list-item__toggle b3-list-item__toggle--hl${item.subFileCount === 0 ? " fn__hidden" : ""}">
         <svg class="b3-list-item__arrow"><use xlink:href="#iconRight"></use></svg>