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

6 months ago · 5ea4eefdee
3 changed files with 125 additions and 25 deletions
--- a/apps/vben5/packages/@abp/platform/src/api/useMyFavoriteMenusApi.ts
+++ b/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,
  };
 }
--- a/apps/vben5/packages/@abp/platform/src/components/workbench/components/WorkbenchQuickNav.vue
+++ b/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">
-        <div
-          :class="{
-            'border-r-0': index % 3 === 2,
-            'border-b-0': index < 3,
-            'pb-4': index > 2,
-            'rounded-bl-xl': index === items.length - 3,
-            'rounded-br-xl': index === items.length - 1,
-          }"
-          class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
-        >
-          <VbenIcon
-            :color="item.color"
-            :icon="item.icon"
-            class="size-7 transition-all duration-300 group-hover:scale-125"
-            @click="$emit('click', item)"
-          />
-          <span class="text-md mt-2 truncate">{{ item.displayName }}</span>
-        </div>
+      <template
+        v-for="(item, index) in getFavoriteMenus"
+        :key="item.displayName"
+      >
+        <Dropdown :trigger="['contextmenu']">
+          <div
+            :class="{
+              'border-r-0': index % 3 === 2,
+              'border-b-0': index < 3,
+              'pb-4': index > 2,
+              'rounded-bl-xl': index === items.length - 3,
+              'rounded-br-xl': index === items.length - 1,
+            }"
+            class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
+            @click="onClick(item)"
+          >
+            <VbenIcon
+              :color="item.color"
+              :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>
--- a/apps/vben5/packages/@abp/platform/src/components/workbench/index.vue
+++ b/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>