From ae5887a9eac8ea1578817bebfaf57d3cac17c51e Mon Sep 17 00:00:00 2001
From: Li <1103069291@qq.com>
Date: Tue, 24 Nov 2020 11:10:50 +0800
Subject: [PATCH] =?UTF-8?q?fix(menu):=20=E5=AF=B9=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=81=9A=E4=BA=86=E4=B8=80=E4=BA=9B=E8=B0=83=E6=95=B4=E5=92=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=82=20(#267)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(menu): 对菜单做了一些调整和优化。

1. 删除了菜单的动画效果
2. 当拖拽到菜单底部时，会触发滚动效果
3. 现在拖为子节点会方便那么一点（也不是很完美）
4. 当菜单头不在可视区域时，会触发跟随，不需要拖拽完菜单还需要返回顶部再保存了。

* pref: add animation for menu drag.

Co-authored-by: Ryan Wang <i@ryanc.cc>
---
 src/components/global.less                    |  7 ++++++
 src/views/interface/MenuList.vue              | 22 ++++++++++++++++++-
 .../interface/components/MenuTreeNode.vue     |  4 +++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/global.less b/src/components/global.less
index 2f600380..2a98b7e7 100644
--- a/src/components/global.less
+++ b/src/components/global.less
@@ -868,3 +868,10 @@ body {
     left: 0;
   }
 }
+
+.card-header-fixed .ant-card-head {
+  position: fixed;
+  background: white;
+  z-index: 999;
+  top: 0;
+}
diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue
index 41524a18..f7568e65 100644
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@@ -93,7 +93,12 @@
         :xs="24"
         class="pb-3"
       >
-        <a-card :bodyStyle="{ padding: '16px' }">
+        <a-card
+          :bodyStyle="{ padding: '16px' }"
+          ref="mheader"
+          :class="{ 'card-header-fixed': headerIsFixed }"
+          :headStyle="headStyle"
+        >
           <template slot="title">
             <span>
               {{ menuListTitle }}
@@ -220,6 +225,8 @@ export default {
       menuInternalLinkSelector: {
         visible: false,
       },
+      headerIsFixed: false,
+      headStyle: {},
     }
   },
   computed: {
@@ -260,10 +267,16 @@ export default {
     defaultMenuTeam() {
       return this.options.default_menu_team ? this.options.default_menu_team : ''
     },
+    mHeaderFromTopAbs() {
+      return Math.floor(Math.abs(this.mHeaderFromTop))
+    },
   },
   created() {
     this.handleListTeams()
   },
+  mounted() {
+    window.addEventListener('scroll', this.scrollHandle, true)
+  },
   methods: {
     ...mapActions(['refreshOptionsCache']),
     handleListTeams(autoSelectTeam = false) {
@@ -403,6 +416,13 @@ export default {
         this.refreshOptionsCache()
       }
     },
+
+    scrollHandle: function(e) {
+      if (this.$refs.mheader.$el !== undefined) {
+        this.headerIsFixed = this.$refs.mheader.$el.getBoundingClientRect().top < 0
+        this.$set(this.headStyle, 'width', this.$refs.mheader.$el.offsetWidth + 'px')
+      }
+    },
   },
 }
 </script>
diff --git a/src/views/interface/components/MenuTreeNode.vue b/src/views/interface/components/MenuTreeNode.vue
index 01c11d6a..c886f04a 100644
--- a/src/views/interface/components/MenuTreeNode.vue
+++ b/src/views/interface/components/MenuTreeNode.vue
@@ -146,10 +146,12 @@ export default {
   computed: {
     dragOptions() {
       return {
-        animation: 300,
+        animation: 100,
         group: 'description',
         disabled: false,
         ghostClass: 'ghost',
+        forceFallback: true,
+        emptyInsertThreshold: 20,
       }
     },
     realValue() {