feat(vben5-platform): Add deleting the favorites menu

apps/vben5/packages/@abp/platform/src/api/useMyFavoriteMenusApi.ts

@@ -15,7 +15,9 @@ export function useMyFavoriteMenusApi() {
    * @param input 参数
    * @returns 常用菜单
    */
-  function createApi(input: UserFavoriteMenuCreateDto) {
+  function createApi(
+    input: UserFavoriteMenuCreateDto,
+  ): Promise<UserFavoriteMenuDto> {
     return request<UserFavoriteMenuDto>(
       `/api/platform/menus/favorites/my-favorite-menus`,
       {
@@ -25,6 +27,16 @@ export function useMyFavoriteMenusApi() {
     );
   }
 
+  /**
+   * 删除常用菜单
+   * @param id 菜单Id
+   */
+  function deleteApi(id: string): Promise<void> {
+    return request(`/api/platform/menus/favorites/my-favorite-menus/${id}`, {
+      method: 'DELETE',
+    });
+  }
+
   /**
    * 获取常用菜单列表
    * @param framework ui框架
@@ -44,6 +56,7 @@ export function useMyFavoriteMenusApi() {
   return {
     cancel,
     createApi,
+    deleteApi,
     getListApi,
   };
 }

apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchQuickNav.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import type { FavoriteMenu } from '../types';
 
+import { computed, h } from 'vue';
+
+import { $t } from '@vben/locales';
+
 import {
   Card,
   CardContent,
@@ -9,6 +13,9 @@ import {
   VbenIcon,
 } from '@vben-core/shadcn-ui';
 
+import { DeleteOutlined } from '@ant-design/icons-vue';
+import { Dropdown, Menu, Modal } from 'ant-design-vue';
+
 interface Props {
   items?: FavoriteMenu[];
   title: string;
@@ -18,13 +25,53 @@ defineOptions({
   name: 'WorkbenchQuickNav',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   items: () => [],
 });
 
-defineEmits<{
+const emits = defineEmits<{
   (event: 'click', menu: FavoriteMenu): void;
+  (event: 'delete', menu: FavoriteMenu): void;
+  (event: 'add'): void;
 }>();
+
+const MenuItem = Menu.Item;
+
+const getFavoriteMenus = computed(() => {
+  const addMenu: FavoriteMenu = {
+    id: 'addMenu',
+    displayName: $t('workbench.content.favoriteMenu.create'),
+    icon: 'ion:add-outline',
+    color: '#00bfff',
+    isDefault: true,
+  };
+  return [...props.items, addMenu];
+});
+
+function onClick(menu: FavoriteMenu) {
+  if (menu.id === 'addMenu') {
+    emits('add');
+    return;
+  }
+  emits('click', menu);
+}
+
+function onMenuClick(key: string, menu: FavoriteMenu) {
+  switch (key) {
+    case 'delete': {
+      Modal.confirm({
+        centered: true,
+        iconType: 'warning',
+        title: $t('AbpUi.AreYouSure'),
+        content: $t('AbpUi.ItemWillBeDeletedMessage'),
+        okCancel: true,
+        onOk: () => {
+          emits('delete', menu);
+        },
+      });
+    }
+  }
+}
 </script>
 
 <template>
@@ -33,25 +80,42 @@ defineEmits<{
       <CardTitle class="text-lg">{{ title }}</CardTitle>
     </CardHeader>
     <CardContent class="flex flex-wrap p-0">
-      <template v-for="(item, index) in items" :key="item.displayName">
+      <template
-        <div
+        v-for="(item, index) in getFavoriteMenus"
-          :class="{
+        :key="item.displayName"
-            'border-r-0': index % 3 === 2,
+      >
-            'border-b-0': index < 3,
+        <Dropdown :trigger="['contextmenu']">
-            'pb-4': index > 2,
+          <div
-            'rounded-bl-xl': index === items.length - 3,
+            :class="{
-            'rounded-br-xl': index === items.length - 1,
+              'border-r-0': index % 3 === 2,
-          }"
+              'border-b-0': index < 3,
-          class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
+              'pb-4': index > 2,
-        >
+              'rounded-bl-xl': index === items.length - 3,
-          <VbenIcon
+              'rounded-br-xl': index === items.length - 1,
-            :color="item.color"
+            }"
-            :icon="item.icon"
+            class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
-            class="size-7 transition-all duration-300 group-hover:scale-125"
+            @click="onClick(item)"
-            @click="$emit('click', item)"
+          >
-          />
+            <VbenIcon
-          <span class="text-md mt-2 truncate">{{ item.displayName }}</span>
+              :color="item.color"
-        </div>
+              :icon="item.icon"
+              class="size-7 transition-all duration-300 group-hover:scale-125"
+            />
+            <span class="text-md mt-2 truncate">{{ item.displayName }}</span>
+          </div>
+          <template #overlay>
+            <Menu
+              v-if="!item.isDefault"
+              @click="
+                ({ key: menuKey }) => onMenuClick(menuKey.toString(), item)
+              "
+            >
+              <MenuItem key="delete" :icon="h(DeleteOutlined)">
+                {{ $t('workbench.content.favoriteMenu.delete') }}
+              </MenuItem>
+            </Menu>
+          </template>
+        </Dropdown>
       </template>
     </CardContent>
   </Card>

apps/vben5/packages/@abp/platform/src/components/workbench/index.vue

@@ -3,8 +3,9 @@ import type { WorkbenchTodoItem, WorkbenchTrendItem } from '@vben/common-ui';
 
 import type { FavoriteMenu } from './types';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { useAppConfig } from '@vben/hooks';
 import { $t } from '@vben/locales';
 import { preferences } from '@vben/preferences';
@@ -16,7 +17,7 @@ import {
   useMyNotifilersApi,
   useNotificationSerializer,
 } from '@abp/notifications';
-import { Empty } from 'ant-design-vue';
+import { Empty, message } from 'ant-design-vue';
 
 import { useMyFavoriteMenusApi } from '../../api/useMyFavoriteMenusApi';
 import WorkbenchHeader from './components/WorkbenchHeader.vue';
@@ -30,7 +31,8 @@ defineEmits<{
 
 const userStore = useUserStore();
 const { getMyNotifilersApi } = useMyNotifilersApi();
-const { getListApi: getFavoriteMenusApi } = useMyFavoriteMenusApi();
+const { getListApi: getFavoriteMenusApi, deleteApi: deleteFavoriteMenuApi } =
+  useMyFavoriteMenusApi();
 const { deserialize } = useNotificationSerializer();
 const { uiFramework } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
@@ -107,6 +109,13 @@ const getWelcomeTitle = computed(() => {
   }
   return '';
 });
+
+const [WorkbenchQuickNavModal, quickNavModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./components/WorkbenchQuickNavModal.vue'),
+  ),
+});
+
 async function onInit() {
   await Promise.all([
     onInitFavoriteMenus(),
@@ -119,6 +128,7 @@ async function onInitFavoriteMenus() {
   favoriteMenus.value = items.map((item) => {
     return {
       ...item,
+      id: item.menuId,
       isDefault: false,
     };
   });
@@ -144,6 +154,16 @@ async function onInitTodoList() {
   todoList.value = [];
 }
 
+function onCreatingFavoriteMenu() {
+  quickNavModalApi.open();
+}
+
+async function onDeleteFavoriteMenu(menu: FavoriteMenu) {
+  await deleteFavoriteMenuApi(menu.id);
+  await onInitFavoriteMenus();
+  message.success($t('AbpUi.SuccessfullyDeleted'));
+}
+
 onMounted(onInit);
 </script>
 
@@ -166,6 +186,8 @@ onMounted(onInit);
           :items="getFavoriteMenus"
           class="mt-5 lg:mt-0"
           :title="$t('workbench.content.favoriteMenu.title')"
+          @add="onCreatingFavoriteMenu"
+          @delete="onDeleteFavoriteMenu"
           @click="(menu: FavoriteMenu) => $emit('navTo', menu)"
         />
         <WorkbenchTodo
@@ -189,6 +211,7 @@ onMounted(onInit);
         </WorkbenchTrends>
       </div>
     </div>
+    <WorkbenchQuickNavModal @change="onInitFavoriteMenus" />
   </div>
 </template>