refactor: Make menu sorting more intuitive

src/views/interface/MenuList.vue

@@ -88,6 +88,12 @@
                 erroredText="保存失败"
                 :disabled="list.data.length <= 0"
               ></ReactiveButton>
+              <a-button v-if="!menuSort.visible" @click="handleOpenMenuSort()" type="primary" ghost>
+                排序
+              </a-button>
+              <a-button v-else @click="handleCloseMenuSort()" type="default">
+                取消排序
+              </a-button>
               <a-button v-if="!form.visible" @click="handleOpenCreateMenuForm()" type="primary" ghost>
                 新增
               </a-button>
@@ -118,7 +124,12 @@
               @cancel="handleCloseCreateMenuForm()"
             />
             <a-empty v-if="list.data.length === 0 && !list.loading && !form.visible" />
-            <MenuTreeNode v-model="list.data" :excludedTeams="excludedTeams" @reload="handleListMenus" />
+            <MenuTreeNode
+              v-model="list.data"
+              :menuSort="menuSort.visible"
+              :excludedTeams="excludedTeams"
+              @reload="handleListMenus"
+            />
           </a-spin>
         </a-card>
       </a-col>
@@ -152,6 +163,9 @@ export default {
         data: [],
         loading: false
       },
+      menuSort: {
+        visible: false
+      },
       form: {
         visible: false,
         model: {}
@@ -323,6 +337,12 @@ export default {
         }
       })
     },
+    handleOpenMenuSort() {
+      this.menuSort.visible = true
+    },
+    handleCloseMenuSort() {
+      this.menuSort.visible = false
+    },
     handleOpenCreateMenuForm() {
       this.form.visible = true
       this.form.model = {
@@ -363,3 +383,11 @@ export default {
   }
 }
 </script>
+<style>
+@media (max-width: 576px) {
+  .pb-3 .ant-card-head-wrapper {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+</style>

src/views/interface/components/MenuTreeNode.vue

@@ -9,14 +9,15 @@
       @input="emitter"
       @start="isDragging = true"
       @end="isDragging = false"
-      handle=".title"
+      handle=".mover"
     >
       <transition-group>
         <div :key="item.id" v-for="item in realValue">
-          <a-list-item class="cursor-pointer menu-item">
+          <a-list-item class="menu-item">
             <a-list-item-meta>
-              <span slot="title" class="inline-block font-bold cursor-move title"
-                >{{ item.name }}
+              <span slot="title" class="inline-block font-bold title">
+                <a-icon class="cursor-pointer mover" v-if="menuSort" type="bars" />
+                {{ item.name }}
                 <a-tooltip title="外部链接" v-if="item.target === '_blank'">
                   <a-icon type="link" />
                 </a-tooltip>
@@ -71,7 +72,12 @@
             @cancel="handleCloseCreateMenuForm(item)"
           />
           <div class="a-list-nested" style="margin-left: 44px;">
-            <MenuTreeNode :list="item.children" :excludedTeams="excludedTeams" @reload="onReloadEmit" />
+            <MenuTreeNode
+              :list="item.children"
+              :menuSort="menuSort"
+              :excludedTeams="excludedTeams"
+              @reload="onReloadEmit"
+            />
           </div>
         </div>
       </transition-group>
@@ -107,6 +113,11 @@ export default {
       required: false,
       type: Array,
       default: null
+    },
+    menuSort: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   data() {