From 64914421928ddc9310840b806568bd2488e515fc Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Thu, 28 May 2026 13:23:54 +0800
Subject: [PATCH] feat: add submenu support to CustomContextMenu

Add children support for nested menu items with hover-triggered
submenus, auto-flip positioning near viewport edges, and smart
close timing to prevent flicker.
---
 .../src/components/ui/CustomContextMenu.vue   | 230 +++++++++++++++---
 1 file changed, 196 insertions(+), 34 deletions(-)

diff --git a/apps/desktop/src/components/ui/CustomContextMenu.vue b/apps/desktop/src/components/ui/CustomContextMenu.vue
index fd28eb3225..40c5b0012b 100644
--- a/apps/desktop/src/components/ui/CustomContextMenu.vue
+++ b/apps/desktop/src/components/ui/CustomContextMenu.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, onBeforeUnmount, nextTick, type Component } from "vue";
+import { ChevronRight } from "lucide-vue-next";
 
 export interface ContextMenuItem {
   label: string;
@@ -7,47 +8,56 @@ export interface ContextMenuItem {
   disabled?: boolean;
   separator?: boolean;
   icon?: Component;
+  iconClass?: string;
+  variant?: "default" | "destructive";
+  visible?: boolean;
+  children?: ContextMenuItem[];
 }
 
 const props = defineProps<{
   items: ContextMenuItem[];
 }>();
 
+// ---- module-level singleton state ----
+const openMenus = new Set<() => void>();
+let globalSetup = false;
+
+function ensureGlobalListeners() {
+  if (globalSetup) return;
+  globalSetup = true;
+  const closeAll = () => {
+    for (const c of openMenus) c();
+    openMenus.clear();
+  };
+  document.addEventListener("contextmenu", closeAll, true);
+  document.addEventListener("scroll", closeAll, true);
+  window.addEventListener("resize", closeAll);
+}
+ensureGlobalListeners();
+// -------------------------------------
+
 const show = ref(false);
 const x = ref(0);
 const y = ref(0);
 const menuRef = ref<HTMLElement>();
 
-function onContextMenu(event: MouseEvent) {
-  if (props.items.length === 0) return;
-  event.preventDefault();
-  event.stopPropagation();
-  x.value = event.clientX;
-  y.value = event.clientY;
-  show.value = true;
-  nextTick(() => adjustPosition());
-}
+// Submenu state
+const activeSubIndex = ref<number | null>(null);
+const subRef = ref<HTMLElement>();
+const subX = ref(0);
+const subY = ref(0);
+let subCloseTimer: ReturnType<typeof setTimeout> | null = null;
 
 function close() {
+  activeSubIndex.value = null;
   show.value = false;
 }
 
-function adjustPosition() {
-  if (!menuRef.value) return;
-  const rect = menuRef.value.getBoundingClientRect();
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-
-  if (rect.right > vw) {
-    x.value = Math.max(0, vw - rect.width - 8);
-  }
-  if (rect.bottom > vh) {
-    y.value = Math.max(0, vh - rect.height - 8);
-  }
-}
-
 function onClickOutside(e: MouseEvent) {
-  if (menuRef.value && !menuRef.value.contains(e.target as Node)) {
+  const target = e.target as Node;
+  const inMenu = menuRef.value?.contains(target);
+  const inSub = subRef.value?.contains(target);
+  if (!inMenu && !inSub) {
     close();
   }
 }
@@ -66,11 +76,13 @@ function onResize() {
 
 watch(show, (val) => {
   if (val) {
+    openMenus.add(close);
     document.addEventListener("click", onClickOutside, true);
     document.addEventListener("keydown", onKeydown);
     document.addEventListener("scroll", onScroll, true);
     window.addEventListener("resize", onResize);
   } else {
+    openMenus.delete(close);
     document.removeEventListener("click", onClickOutside, true);
     document.removeEventListener("keydown", onKeydown);
     document.removeEventListener("scroll", onScroll, true);
@@ -80,11 +92,126 @@ watch(show, (val) => {
 
 function handleItemClick(item: ContextMenuItem) {
   if (item.disabled) return;
+  if (item.children?.length) return; // submenu trigger — do nothing on click
   close();
   item.action?.();
 }
 
+function handleSubItemClick(item: ContextMenuItem) {
+  if (item.disabled) return;
+  close();
+  item.action?.();
+}
+
+function onContextMenu(event: MouseEvent) {
+  if (props.items.length === 0) return;
+  event.preventDefault();
+  event.stopPropagation();
+  x.value = event.clientX;
+  y.value = event.clientY;
+  show.value = true;
+  nextTick(() => {
+    if (!menuRef.value) return;
+    const rect = menuRef.value.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (rect.right > vw) x.value = Math.max(0, vw - rect.width - 8);
+    if (rect.bottom > vh) y.value = Math.max(0, vh - rect.height - 8);
+  });
+}
+
+// ---- submenu ----
+
+function onItemMouseEnter(index: number, event: MouseEvent) {
+  lastMouseX = event.clientX;
+  lastMouseY = event.clientY;
+  const item = props.items[index];
+  if (!item?.children?.length || item.disabled) {
+    // Moving to an item without children — close submenu immediately, no delay needed
+    activeSubIndex.value = null;
+    return;
+  }
+  if (subCloseTimer) {
+    clearTimeout(subCloseTimer);
+    subCloseTimer = null;
+  }
+  const trigger = event.currentTarget as HTMLElement;
+  const rect = trigger.getBoundingClientRect();
+  subX.value = rect.right + 4;
+  subY.value = rect.top;
+  activeSubIndex.value = index;
+  nextTick(() => adjustSubPosition());
+}
+
+function onItemMouseLeave() {
+  if (activeSubIndex.value !== null) {
+    scheduleSubClose();
+  }
+}
+
+// Last known mouse position (from hover events, without a global mousemove listener)
+let lastMouseX = 0;
+let lastMouseY = 0;
+
+function isMouseOverSub(): boolean {
+  if (!subRef.value) return false;
+  const rect = subRef.value.getBoundingClientRect();
+  return lastMouseX >= rect.left && lastMouseX <= rect.right && lastMouseY >= rect.top && lastMouseY <= rect.bottom;
+}
+
+function scheduleSubClose() {
+  if (subCloseTimer) clearTimeout(subCloseTimer);
+  subCloseTimer = setTimeout(() => {
+    if (!isMouseOverSub()) {
+      activeSubIndex.value = null;
+    }
+  }, 150);
+}
+
+function onSubMouseEnter() {
+  if (subCloseTimer) {
+    clearTimeout(subCloseTimer);
+    subCloseTimer = null;
+  }
+}
+
+function onSubMouseLeave() {
+  activeSubIndex.value = null;
+}
+
+function adjustSubPosition() {
+  if (!subRef.value) return;
+  const rect = subRef.value.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (rect.right > vw) {
+    subX.value = Math.max(0, vw - rect.width - 8);
+  }
+  if (rect.bottom > vh) {
+    subY.value = Math.max(0, vh - rect.height - 8);
+  }
+  // When the submenu flips left due to right-edge overflow, it may land
+  // under the mouse cursor. Since the mouse didn't move, mouseenter won't
+  // fire — cancel any pending close to prevent the submenu from flashing.
+  nextTick(() => {
+    if (isMouseOverSub() && subCloseTimer) {
+      clearTimeout(subCloseTimer);
+      subCloseTimer = null;
+    }
+  });
+}
+
+function itemButtonClass(variant?: "default" | "destructive") {
+  return [
+    "w-full gap-2 rounded-md px-2 py-1 text-[13px] outline-hidden select-none text-left cursor-default flex items-center disabled:pointer-events-none disabled:opacity-50",
+    variant === "destructive"
+      ? "text-destructive hover:bg-destructive/10 hover:text-destructive"
+      : "hover:bg-accent hover:text-accent-foreground",
+  ];
+}
+
 onBeforeUnmount(() => {
+  openMenus.delete(close);
   document.removeEventListener("click", onClickOutside, true);
   document.removeEventListener("keydown", onKeydown);
   document.removeEventListener("scroll", onScroll, true);
@@ -94,6 +221,7 @@ onBeforeUnmount(() => {
 
 <template>
   <slot :on-context-menu="onContextMenu" />
+  <!-- Main menu -->
   <Teleport to="body">
     <div
       v-if="show"
@@ -102,16 +230,50 @@ onBeforeUnmount(() => {
       class="text-popover-foreground min-w-36 rounded-xl p-1 cn-menu-translucent overflow-x-hidden overflow-y-auto"
     >
       <template v-for="(item, index) in items" :key="index">
-        <div v-if="item.separator" class="bg-foreground/6 -mx-1 my-0.5 h-px" />
-        <button
-          v-else
-          :disabled="item.disabled"
-          class="w-full gap-2 rounded-md px-2 py-1 text-[13px] outline-hidden select-none text-left cursor-default flex items-center hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-          @click="handleItemClick(item)"
-        >
-          <component :is="item.icon" v-if="item.icon" class="size-4 shrink-0" />
-          {{ item.label }}
-        </button>
+        <template v-if="item.visible !== false">
+          <div v-if="item.separator" class="bg-foreground/6 -mx-1 my-0.5 h-px" />
+          <button
+            v-else
+            :disabled="item.disabled"
+            :class="[
+              ...itemButtonClass(item.variant),
+              activeSubIndex === index ? 'bg-accent text-accent-foreground' : '',
+            ]"
+            @click="handleItemClick(item)"
+            @mouseenter="(e) => onItemMouseEnter(index, e)"
+            @mouseleave="onItemMouseLeave"
+          >
+            <component :is="item.icon" v-if="item.icon" :class="['size-4 shrink-0', item.iconClass]" />
+            {{ item.label }}
+            <ChevronRight v-if="item.children?.length" class="ml-auto size-4" />
+          </button>
+        </template>
+      </template>
+    </div>
+  </Teleport>
+  <!-- Submenu -->
+  <Teleport to="body">
+    <div
+      v-if="show && activeSubIndex !== null && items[activeSubIndex]?.children?.length"
+      ref="subRef"
+      :style="{ position: 'fixed', left: subX + 'px', top: subY + 'px', zIndex: 10000 }"
+      class="text-popover-foreground min-w-36 rounded-xl p-1 cn-menu-translucent overflow-x-hidden overflow-y-auto"
+      @mouseenter="onSubMouseEnter"
+      @mouseleave="onSubMouseLeave"
+    >
+      <template v-for="(child, ci) in items[activeSubIndex]!.children!" :key="ci">
+        <template v-if="child.visible !== false">
+          <div v-if="child.separator" class="bg-foreground/6 -mx-1 my-0.5 h-px" />
+          <button
+            v-else
+            :disabled="child.disabled"
+            :class="itemButtonClass(child.variant)"
+            @click="handleSubItemClick(child)"
+          >
+            <component :is="child.icon" v-if="child.icon" :class="['size-4 shrink-0', child.iconClass]" />
+            {{ child.label }}
+          </button>
+        </template>
       </template>
     </div>
   </Teleport>