refactor: improve code base of menu-related (#5957)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

#### What this PR does / why we need it:

优化菜单管理相关的 UI 代码。

1. 使用 vue-draggable-plus 库代替 vuedraggable 库实现拖拽排序。vue-draggable-plus 是在 https://github.com/halo-dev/halo/pull/5914 中引入，替换的原因是 vuedraggable 库已经不再积极维护。
2. 改进菜单和菜单项编辑表单的逻辑，清理无用代码。

#### Special notes for your reviewer:

需要测试：

1. 测试菜单项拖拽排序功能是否表现正常。
2. 测试新增菜单、菜单项和修改菜单、菜单项功能是否表现正常。

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/console-src/modules/interface/menus/Menus.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import {
+  Dialog,
   IconAddCircle,
   IconListSettings,
-  Dialog,
+  Toast,
   VButton,
   VCard,
   VEmpty,
+  VLoading,
   VPageHeader,
   VSpace,
-  VLoading,
-  Toast,
 } from "@halo-dev/components";
 import MenuItemEditingModal from "./components/MenuItemEditingModal.vue";
 import MenuItemListItem from "./components/MenuItemListItem.vue";
@@ -90,6 +90,7 @@ const handleOpenCreateByParentModal = (menuItem: MenuTreeItem) => {
 const onMenuItemEditingModalClose = () => {
   selectedParentMenuItem.value = undefined;
   selectedMenuItem.value = undefined;
+  menuItemEditingModal.value = false;
 };
 
 const onMenuItemSaved = async (menuItem: MenuItem) => {
@@ -115,10 +116,13 @@ const onMenuItemSaved = async (menuItem: MenuItem) => {
   await refetch();
 };
 
+const batchUpdating = ref(false);
+
 const handleUpdateInBatch = useDebounceFn(async () => {
   const menuTreeItemsToUpdate = resetMenuItemsTreePriority(menuTreeItems.value);
   const menuItemsToUpdate = convertTreeToMenuItems(menuTreeItemsToUpdate);
   try {
+    batchUpdating.value = true;
     const promises = menuItemsToUpdate.map((menuItem) =>
       apiClient.extension.menuItem.updatev1alpha1MenuItem({
         name: menuItem.metadata.name,
@@ -131,6 +135,7 @@ const handleUpdateInBatch = useDebounceFn(async () => {
   } finally {
     await queryClient.invalidateQueries({ queryKey: ["menus"] });
     await refetch();
+    batchUpdating.value = false;
   }
 }, 300);
 
@@ -180,7 +185,7 @@ const handleDelete = async (menuItem: MenuTreeItem) => {
 </script>
 <template>
   <MenuItemEditingModal
-    v-model:visible="menuItemEditingModal"
+    v-if="menuItemEditingModal && selectedMenu"
     :menu-item="selectedMenuItem"
     :parent-menu-item="selectedParentMenuItem"
     :menu="selectedMenu"
@@ -194,7 +199,7 @@ const handleDelete = async (menuItem: MenuTreeItem) => {
   </VPageHeader>
   <div class="m-0 md:m-4">
     <div class="flex flex-col gap-4 sm:flex-row">
-      <div class="w-96">
+      <div class="w-96 flex-none">
         <MenuList v-model:selected-menu="selectedMenu" />
       </div>
       <div class="flex-1">
@@ -251,7 +256,10 @@ const handleDelete = async (menuItem: MenuTreeItem) => {
           </Transition>
           <Transition v-else appear name="fade">
             <MenuItemListItem
-              :menu-tree-items="menuTreeItems"
+              v-model="menuTreeItems"
+              :class="{
+                'cursor-progress opacity-60': batchUpdating,
+              }"
               @change="handleUpdateInBatch"
               @delete="handleDelete"
               @open-editing="handleOpenEditingModal"