fix: the issue that the menu is not updated after the menu item is deleted (halo-dev/console#725)

#### What type of PR is this?

/kind bug
/milestone 2.0.0-rc.2

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

修复当菜单项被删除时，没有更新菜单的问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2561

#### Special notes for your reviewer:

测试方式：

1. 创建一个菜单，添加若干个菜单项。
2. 删除部分菜单项，检查菜单下的菜单项个数是否正确。

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

```release-note
修复 Console 端当菜单项被删除时，没有更新菜单的问题。
```

src/modules/interface/menus/Menus.vue

@@ -70,6 +70,8 @@ const handleFetchMenuItems = async (options?: { mute?: boolean }) => {
         handleFetchMenuItems({ mute: true });
       }, 3000);
     }
+
+    await handleResetMenuItems();
   } catch (e) {
     console.error("Failed to fetch menu items", e);
   } finally {
@@ -86,8 +88,14 @@ onBeforeRouteLeave(() => {
 });
 
 const handleOpenEditingModal = (menuItem: MenuTreeItem) => {
-  selectedMenuItem.value = convertMenuTreeItemToMenuItem(menuItem);
+  apiClient.extension.menuItem
-  menuItemEditingModal.value = true;
+    .getv1alpha1MenuItem({
+      name: menuItem.metadata.name,
+    })
+    .then((response) => {
+      selectedMenuItem.value = response.data;
+      menuItemEditingModal.value = true;
+    });
 };
 
 const handleOpenCreateByParentModal = (menuItem: MenuTreeItem) => {
@@ -103,11 +111,17 @@ const onMenuItemEditingModalClose = () => {
 const onMenuItemSaved = async (menuItem: MenuItem) => {
   const menuToUpdate = cloneDeep(selectedMenu.value);
 
-  if (menuToUpdate) {
+  // update menu items
-    const menuItemsToUpdate = cloneDeep(menuToUpdate.spec.menuItems) || [];
+  if (
-    menuItemsToUpdate.push(menuItem.metadata.name);
+    menuToUpdate &&
+    !menuToUpdate.spec.menuItems?.includes(menuItem.metadata.name)
+  ) {
+    if (menuToUpdate.spec.menuItems) {
+      menuToUpdate.spec.menuItems.push(menuItem.metadata.name);
+    } else {
+      menuToUpdate.spec.menuItems = [menuItem.metadata.name];
+    }
 
-    menuToUpdate.spec.menuItems = menuItemsToUpdate;
     await apiClient.extension.menu.updatev1alpha1Menu({
       name: menuToUpdate.metadata.name,
       menu: menuToUpdate,
@@ -135,12 +149,12 @@ const handleUpdateInBatch = useDebounceFn(async () => {
     await menuListRef.value.handleFetchMenus();
     await handleFetchMenuItems({ mute: true });
   }
-}, 500);
+}, 300);
 
 const handleDelete = async (menuItem: MenuTreeItem) => {
   Dialog.info({
-    title: "是否确定删除该菜单？",
+    title: "确定要删除该菜单项吗？",
-    description: "删除后将无法恢复",
+    description: "将同时删除所有子菜单项，删除后将无法恢复",
     confirmType: "danger",
     onConfirm: async () => {
       await apiClient.extension.menuItem.deletev1alpha1MenuItem({
@@ -150,28 +164,39 @@ const handleDelete = async (menuItem: MenuTreeItem) => {
       const childrenNames = getChildrenNames(menuItem);
 
       if (childrenNames.length) {
-        setTimeout(() => {
+        const deleteChildrenRequests = childrenNames.map((name) =>
-          Dialog.info({
+          apiClient.extension.menuItem.deletev1alpha1MenuItem({
-            title: "检查到当前菜单下包含子菜单，是否删除？",
+            name,
-            description: "如果选择否，那么所有子菜单将转移到一级菜单",
+          })
-            confirmType: "danger",
+        );
-            onConfirm: async () => {
+        await Promise.all(deleteChildrenRequests);
-              const promises = childrenNames.map((name) =>
-                apiClient.extension.menuItem.deletev1alpha1MenuItem({
-                  name,
-                })
-              );
-              await Promise.all(promises);
-            },
-          });
-        }, 200);
       }
 
-      await menuListRef.value.handleFetchMenus();
       await handleFetchMenuItems();
     },
   });
 };
+
+const handleResetMenuItems = async () => {
+  if (!selectedMenu.value) {
+    return;
+  }
+
+  const menuToUpdate = cloneDeep(selectedMenu.value);
+
+  const menuItemNames = menuItems.value.map((menuItem) => {
+    return menuItem.metadata.name;
+  });
+
+  menuToUpdate.spec.menuItems = menuItemNames;
+
+  await apiClient.extension.menu.updatev1alpha1Menu({
+    name: menuToUpdate.metadata.name,
+    menu: menuToUpdate,
+  });
+
+  await menuListRef.value.handleFetchMenus({ mute: true });
+};
 </script>
 <template>
   <MenuItemEditingModal

src/modules/interface/menus/components/MenuEditingModal.vue

@@ -128,6 +128,7 @@ watch(
       <VSpace>
         <SubmitButton
           v-if="visible"
+          :loading="saving"
           type="secondary"
           @submit="$formkit.submit('menu-form')"
         >

src/modules/interface/menus/components/MenuItemEditingModal.vue

@@ -77,6 +77,7 @@ const handleSaveMenuItem = async () => {
           name: formState.value.metadata.name,
           menuItem: formState.value,
         });
+
       onVisibleChange(false);
       emit("saved", data);
     } else {
@@ -242,7 +243,7 @@ const onMenuItemSourceChange = () => {
       @submit="handleSaveMenuItem"
     >
       <FormKit
-        v-if="!isUpdateMode && menu"
+        v-if="!isUpdateMode && menu && visible"
         v-model="selectedParentMenuItem"
         label="上级菜单项"
         placeholder="选择上级菜单项"
@@ -317,6 +318,7 @@ const onMenuItemSourceChange = () => {
       <VSpace>
         <SubmitButton
           v-if="visible"
+          :loading="saving"
           type="secondary"
           @submit="$formkit.submit('menuitem-form')"
         >