From baad5a936762a056dcdf469d5ff8acff0881c21b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=B0=8F=E6=B0=91?=
 <DesignHhuang@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:54:25 +0800
Subject: [PATCH] feat:  add context-menu demo (#324)

---
 .../src/pages/demo/feat/context-menu.vue      | 72 +++++++++++++++++++
 packages/locale/src/lang/en/routes.ts         |  1 +
 packages/locale/src/lang/zh-CN/routes.ts      |  1 +
 .../router/src/routes/modules/demo/feat.ts    |  8 +++
 4 files changed, 82 insertions(+)
 create mode 100644 apps/admin/src/pages/demo/feat/context-menu.vue

diff --git a/apps/admin/src/pages/demo/feat/context-menu.vue b/apps/admin/src/pages/demo/feat/context-menu.vue
new file mode 100644
index 00000000..a8bd75d0
--- /dev/null
+++ b/apps/admin/src/pages/demo/feat/context-menu.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { h, nextTick, ref } from 'vue'
+import { Icon } from '@vben/components/index'
+import { useMsg } from '@vben/vbencomponents'
+
+const msg = useMsg()
+
+const renderIcon = (icon: string) => {
+  return () => h(Icon, { class: 'mr-2', icon })
+}
+
+const x = ref(0)
+const y = ref(0)
+const showDropdown = ref(false)
+const options = [
+  {
+    key: 'New',
+    label: 'New',
+    icon: renderIcon('bi:plus'),
+    children: [
+      {
+        key: 'New1-1',
+        label: 'New1-1',
+        icon: renderIcon('bi:plus'),
+        children: [
+          { key: 'New1-1-1', label: 'New1-1-1' },
+          { key: 'New1-2-1', label: 'New1-2-1', disabled: true },
+        ],
+      },
+      { key: 'New1-2', label: 'New1-2', icon: renderIcon('bi:plus') },
+    ],
+  },
+]
+
+const handleSelect = (key: string | number) => {
+  showDropdown.value = false
+  msg.info(String(key))
+}
+const handleContextMenu = (e: MouseEvent) => {
+  e.preventDefault()
+  showDropdown.value = false
+  nextTick().then(() => {
+    showDropdown.value = true
+    x.value = e.clientX
+    y.value = e.clientY
+  })
+}
+const onClickoutside = () => {
+  msg.info('clickoutside')
+  showDropdown.value = false
+}
+</script>
+
+<template>
+  <VbenCard title="右键菜单示例">
+    <VbenCard title="Simple">
+      <VbenButton type="primary" @contextmenu="handleContextMenu">
+        Right Click on me
+      </VbenButton>
+      <VbenDropdown
+        placement="bottom-start"
+        trigger="manual"
+        :x="x"
+        :y="y"
+        :options="options"
+        :show="showDropdown"
+        :on-clickoutside="onClickoutside"
+        @select="handleSelect"
+      />
+    </VbenCard>
+  </VbenCard>
+</template>
diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts
index dca05f7e..d5cabe67 100644
--- a/packages/locale/src/lang/en/routes.ts
+++ b/packages/locale/src/lang/en/routes.ts
@@ -76,6 +76,7 @@ export default {
       requestDemo: 'Retry request demo',
       sessionTimeout: 'Session Timeout',
       icon: 'Icon',
+      contextMenu: 'Context Menu',
     },
     page: {
       page: 'Page',
diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts
index 99a9e13a..cc3d436b 100644
--- a/packages/locale/src/lang/zh-CN/routes.ts
+++ b/packages/locale/src/lang/zh-CN/routes.ts
@@ -77,6 +77,7 @@ export default {
       requestDemo: '测试请求重试',
       sessionTimeout: '登录过期',
       icon: '图标',
+      contextMenu: '右键菜单',
     },
     page: {
       page: '页面',
diff --git a/packages/router/src/routes/modules/demo/feat.ts b/packages/router/src/routes/modules/demo/feat.ts
index 7c0f10df..f578edad 100644
--- a/packages/router/src/routes/modules/demo/feat.ts
+++ b/packages/router/src/routes/modules/demo/feat.ts
@@ -108,6 +108,14 @@ const feat: RouteRecordItem = {
         title: 'routes.demo.feat.icon',
       },
     },
+    {
+      path: 'context-menu',
+      name: 'ContextMenuDemo',
+      component: () => import('@/pages/demo/feat/context-menu.vue'),
+      meta: {
+        title: 'routes.demo.feat.contextMenu',
+      },
+    },
   ],
 }