feat: 添加上下文菜单演示，添加菜单项隐藏性 (#7057)

Co-authored-by: luoqiz <851092732@qq.com>

packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue

@@ -73,6 +73,7 @@ function handleClick(menu: IContextMenuItem) {
     >
       <template v-for="menu in menusView" :key="menu.key">
         <ContextMenuItem
+          v-if="!menu.hidden"
           :class="itemClass"
           :disabled="menu.disabled"
           :inset="menu.inset || !menu.icon"

packages/@core/ui-kit/shadcn-ui/src/components/context-menu/interface.ts

@@ -10,6 +10,10 @@ interface IContextMenuItem {
    * @param data
    */
   handler?: (data: any) => void;
+  /**
+   * @zh_CN 是否隐藏
+   */
+  hidden?: boolean;
   /**
    * @zh_CN 图标
    */

packages/effects/common-ui/src/components/index.ts

@@ -20,6 +20,7 @@ export {
   VbenButtonGroup,
   VbenCheckbox,
   VbenCheckButtonGroup,
+  VbenContextMenu,
   VbenCountToAnimator,
   VbenFullScreen,
   VbenInputPassword,

playground/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@tanstack/vue-query": "catalog:",
     "@vben-core/menu-ui": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",

playground/src/locales/langs/en-US/examples.json

@@ -72,5 +72,8 @@
   },
   "button-group": {
     "title": "Button Group"
+  },
+  "function": {
+    "contentMenu": "Content Menu"
   }
 }

playground/src/locales/langs/zh-CN/examples.json

@@ -72,5 +72,8 @@
   },
   "button-group": {
     "title": "按钮组"
+  },
+  "function": {
+    "contentMenu": "上下文菜单"
   }
 }

playground/src/router/routes/modules/examples.ts

@@ -328,6 +328,15 @@ const routes: RouteRecordRaw[] = [
           title: $t('examples.button-group.title'),
         },
       },
+      {
+        name: 'ContextMenu',
+        path: '/examples/context-menu',
+        component: () => import('#/views/examples/context-menu/index.vue'),
+        meta: {
+          icon: 'mdi:menu',
+          title: $t('examples.function.contentMenu'),
+        },
+      },
     ],
   },
 ];

playground/src/views/examples/context-menu/index.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+
+import { VbenContextMenu } from '@vben-core/shadcn-ui';
+
+import { Button, Card, message } from 'ant-design-vue';
+
+const needHidden = (role: string) => {
+  return role === 'user';
+};
+
+const contextMenus = () => {
+  return [
+    {
+      text: '刷新',
+      key: 'refresh',
+      handler: (data: any) => {
+        message.success('刷新成功', data);
+      },
+      hidden: needHidden('admin'),
+    },
+    {
+      text: '关闭当前',
+      key: 'close-current',
+      handler: (data: any) => {
+        message.success('关闭当前', data);
+      },
+      hidden: needHidden('user'),
+    },
+    {
+      text: '关闭其他',
+      key: 'close-other',
+      handler: (data: any) => {
+        message.success('关闭其他', data);
+      },
+    },
+    {
+      text: '关闭所有',
+      key: 'close-all',
+      handler: (data: any) => {
+        message.success('关闭所有', data);
+      },
+    },
+  ];
+};
+
+</script>
+
+<template>
+  <Page title="Context Menu 上下文菜单">
+    <Card title="基本使用">
+      <div>一共四个菜单（刷新、关闭当前、关闭其他、关闭所有）</div>
+      <br/>
+      <br/>
+      <VbenContextMenu :menus="contextMenus" :modal="true" item-class="pr-6">
+        <Button> 右键点击我打开上下文菜单(有隐藏项) </Button>
+      </VbenContextMenu>
+    </Card>
+  </Page>
+</template>