From 320db12209166db43be7e41ba157a2b05a779734 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sat, 16 May 2026 19:52:31 +0800
Subject: [PATCH] fix: prevent repeated menu activations

---
 .../context-menu/ContextMenuCheckboxItem.vue  | 10 ++
 .../ui/context-menu/ContextMenuItem.vue       | 10 ++
 .../ui/context-menu/ContextMenuRadioItem.vue  | 10 ++
 .../DropdownMenuCheckboxItem.vue              | 10 ++
 .../ui/dropdown-menu/DropdownMenuItem.vue     | 10 ++
 .../dropdown-menu/DropdownMenuRadioItem.vue   | 10 ++
 src/composables/useDataGridExport.ts          | 92 +++++++++++--------
 src/lib/actionActivation.ts                   | 42 +++++++++
 tests/actionActivation.test.ts                | 35 +++++++
 9 files changed, 193 insertions(+), 36 deletions(-)
 create mode 100644 src/lib/actionActivation.ts
 create mode 100644 tests/actionActivation.test.ts

diff --git a/src/components/ui/context-menu/ContextMenuCheckboxItem.vue b/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
index da2174cb85..ab3587e12d 100644
--- a/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -5,6 +5,7 @@ import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { CheckIcon } from "lucide-vue-next";
 import { ContextMenuCheckboxItem, ContextMenuItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { shouldSuppressRepeatedActivation, suppressEvent, type ActionActivationGuard } from "@/lib/actionActivation";
 import { cn } from "@/lib/utils";
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
@@ -13,12 +14,21 @@ const emits = defineEmits<ContextMenuCheckboxItemEmits>();
 const delegatedProps = reactiveOmit(props, "class");
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const activationGuard: ActionActivationGuard = {};
+
+function guardRepeatedClick(event: MouseEvent) {
+  if (props.disabled) return;
+  if (shouldSuppressRepeatedActivation(activationGuard)) {
+    suppressEvent(event);
+  }
+}
 </script>
 
 <template>
   <ContextMenuCheckboxItem
     data-slot="context-menu-checkbox-item"
     v-bind="forwarded"
+    @click.capture="guardRepeatedClick"
     :class="
       cn(
         'focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
diff --git a/src/components/ui/context-menu/ContextMenuItem.vue b/src/components/ui/context-menu/ContextMenuItem.vue
index 57f0afeac5..bfdf838f3e 100644
--- a/src/components/ui/context-menu/ContextMenuItem.vue
+++ b/src/components/ui/context-menu/ContextMenuItem.vue
@@ -3,6 +3,7 @@ import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { ContextMenuItem, useForwardPropsEmits } from "reka-ui";
+import { shouldSuppressRepeatedActivation, suppressEvent, type ActionActivationGuard } from "@/lib/actionActivation";
 import { cn } from "@/lib/utils";
 
 const props = withDefaults(
@@ -22,6 +23,14 @@ const emits = defineEmits<ContextMenuItemEmits>();
 const delegatedProps = reactiveOmit(props, "class");
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const activationGuard: ActionActivationGuard = {};
+
+function guardRepeatedClick(event: MouseEvent) {
+  if (props.disabled) return;
+  if (shouldSuppressRepeatedActivation(activationGuard)) {
+    suppressEvent(event);
+  }
+}
 </script>
 
 <template>
@@ -30,6 +39,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwarded"
+    @click.capture="guardRepeatedClick"
     :class="
       cn(
         'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-md px-2 py-1 text-[13px] data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
diff --git a/src/components/ui/context-menu/ContextMenuRadioItem.vue b/src/components/ui/context-menu/ContextMenuRadioItem.vue
index 77db5208a1..1f7232e6d5 100644
--- a/src/components/ui/context-menu/ContextMenuRadioItem.vue
+++ b/src/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -5,6 +5,7 @@ import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { CheckIcon } from "lucide-vue-next";
 import { ContextMenuItemIndicator, ContextMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+import { shouldSuppressRepeatedActivation, suppressEvent, type ActionActivationGuard } from "@/lib/actionActivation";
 import { cn } from "@/lib/utils";
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
@@ -13,12 +14,21 @@ const emits = defineEmits<ContextMenuRadioItemEmits>();
 const delegatedProps = reactiveOmit(props, "class");
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const activationGuard: ActionActivationGuard = {};
+
+function guardRepeatedClick(event: MouseEvent) {
+  if (props.disabled) return;
+  if (shouldSuppressRepeatedActivation(activationGuard)) {
+    suppressEvent(event);
+  }
+}
 </script>
 
 <template>
   <ContextMenuRadioItem
     data-slot="context-menu-radio-item"
     v-bind="forwarded"
+    @click.capture="guardRepeatedClick"
     :class="
       cn(
         'focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
diff --git a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 37c84710ec..3194445f66 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -5,6 +5,7 @@ import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { CheckIcon } from "lucide-vue-next";
 import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { shouldSuppressRepeatedActivation, suppressEvent, type ActionActivationGuard } from "@/lib/actionActivation";
 import { cn } from "@/lib/utils";
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
@@ -13,12 +14,21 @@ const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 const delegatedProps = reactiveOmit(props, "class");
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const activationGuard: ActionActivationGuard = {};
+
+function guardRepeatedClick(event: MouseEvent) {
+  if (props.disabled) return;
+  if (shouldSuppressRepeatedActivation(activationGuard)) {
+    suppressEvent(event);
+  }
+}
 </script>
 
 <template>
   <DropdownMenuCheckboxItem
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
+    @click.capture="guardRepeatedClick"
     :class="
       cn(
         'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
diff --git a/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index f34f4b4d03..f834496aa3 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -3,6 +3,7 @@ import type { DropdownMenuItemProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { DropdownMenuItem, useForwardProps } from "reka-ui";
+import { shouldSuppressRepeatedActivation, suppressEvent, type ActionActivationGuard } from "@/lib/actionActivation";
 import { cn } from "@/lib/utils";
 
 const props = withDefaults(
@@ -21,6 +22,14 @@ const props = withDefaults(
 const delegatedProps = reactiveOmit(props, "inset", "variant", "class");
 
 const forwardedProps = useForwardProps(delegatedProps);
+const activationGuard: ActionActivationGuard = {};
+
+function guardRepeatedClick(event: MouseEvent) {
+  if (props.disabled) return;
+  if (shouldSuppressRepeatedActivation(activationGuard)) {
+    suppressEvent(event);
+  }
+}
 </script>
 
 <template>
@@ -29,6 +38,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     :data-inset="inset ? '' : undefined"
     :data-variant="variant"
     v-bind="forwardedProps"
+    @click.capture="guardRepeatedClick"
     :class="
       cn(
         'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
diff --git a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 8f001c0d0c..2effd29e86 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -5,6 +5,7 @@ import type { HTMLAttributes } from "vue";
 import { reactiveOmit } from "@vueuse/core";
 import { CheckIcon } from "lucide-vue-next";
 import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+import { shouldSuppressRepeatedActivation, suppressEvent, type ActionActivationGuard } from "@/lib/actionActivation";
 import { cn } from "@/lib/utils";
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
@@ -14,12 +15,21 @@ const emits = defineEmits<DropdownMenuRadioItemEmits>();
 const delegatedProps = reactiveOmit(props, "class");
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const activationGuard: ActionActivationGuard = {};
+
+function guardRepeatedClick(event: MouseEvent) {
+  if (props.disabled) return;
+  if (shouldSuppressRepeatedActivation(activationGuard)) {
+    suppressEvent(event);
+  }
+}
 </script>
 
 <template>
   <DropdownMenuRadioItem
     data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
+    @click.capture="guardRepeatedClick"
     :class="
       cn(
         'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
diff --git a/src/composables/useDataGridExport.ts b/src/composables/useDataGridExport.ts
index 08c5188fff..7476cdfc74 100644
--- a/src/composables/useDataGridExport.ts
+++ b/src/composables/useDataGridExport.ts
@@ -12,6 +12,7 @@ import {
 } from "@/lib/gridSelection";
 import { useToast } from "@/composables/useToast";
 import { displayCellValue, type CellValue } from "@/lib/cellValue";
+import { tryStartExclusiveActivation, type ActionActivationGuard } from "@/lib/actionActivation";
 
 interface RowItem {
   id: number;
@@ -46,6 +47,7 @@ export interface UseDataGridExportOptions {
 export function useDataGridExport(options: UseDataGridExportOptions) {
   const { t } = useI18n();
   const { toast } = useToast();
+  const exportGuard: ActionActivationGuard = {};
 
   const {
     columns,
@@ -239,56 +241,74 @@ export function useDataGridExport(options: UseDataGridExportOptions) {
   }
 
   // --- Export functions ---
-  async function exportCsv(rowIds?: number[]) {
+  async function runExclusiveExport(action: () => Promise<void>) {
+    const finish = tryStartExclusiveActivation(exportGuard);
+    if (!finish) return;
     try {
-      const rows = rowsToExport(rowIds).map((item) => item.data.map((c) => displayCellValue(c)));
-      if (await saveFileContent(formatCsv(columns.value, rows), "export.csv", "CSV", "csv")) {
-        toast(t("grid.exported"));
-      }
-    } catch (e: any) {
-      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
+      await action();
+    } finally {
+      finish();
     }
   }
 
+  async function exportCsv(rowIds?: number[]) {
+    await runExclusiveExport(async () => {
+      try {
+        const rows = rowsToExport(rowIds).map((item) => item.data.map((c) => displayCellValue(c)));
+        if (await saveFileContent(formatCsv(columns.value, rows), "export.csv", "CSV", "csv")) {
+          toast(t("grid.exported"));
+        }
+      } catch (e: any) {
+        toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
+      }
+    });
+  }
+
   async function exportJson(rowIds?: number[]) {
-    try {
-      const rows = rowsToExport(rowIds).map((item) => item.data);
-      if (await saveFileContent(formatJson(columns.value, rows), "export.json", "JSON", "json")) {
-        toast(t("grid.exported"));
+    await runExclusiveExport(async () => {
+      try {
+        const rows = rowsToExport(rowIds).map((item) => item.data);
+        if (await saveFileContent(formatJson(columns.value, rows), "export.json", "JSON", "json")) {
+          toast(t("grid.exported"));
+        }
+      } catch (e: any) {
+        toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
       }
-    } catch (e: any) {
-      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
-    }
+    });
   }
 
   async function exportMarkdown(rowIds?: number[]) {
-    try {
-      const cols = columns.value;
-      const visibleRows = rowsToExport(rowIds).map((item) => item.data);
-      const { formatMarkdownTable } = await import("@/lib/markdownTable");
-      const md = formatMarkdownTable({ columns: cols, rows: visibleRows });
-      if (await saveFileContent(md, "export.md", "Markdown", "md")) {
-        toast(t("grid.exported"));
+    await runExclusiveExport(async () => {
+      try {
+        const cols = columns.value;
+        const visibleRows = rowsToExport(rowIds).map((item) => item.data);
+        const { formatMarkdownTable } = await import("@/lib/markdownTable");
+        const md = formatMarkdownTable({ columns: cols, rows: visibleRows });
+        if (await saveFileContent(md, "export.md", "Markdown", "md")) {
+          toast(t("grid.exported"));
+        }
+      } catch (e: any) {
+        toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
       }
-    } catch (e: any) {
-      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
-    }
+    });
   }
 
   async function exportXlsx(rowIds?: number[]) {
-    try {
-      const { buildXlsxWorkbook } = await import("@/lib/xlsxExport");
-      const workbook = buildXlsxWorkbook({
-        sheetName: tableMeta.value?.tableName || "Export",
-        columns: columns.value,
-        rows: rowsToExport(rowIds).map((item) => item.data),
-      });
-      if (await saveBinaryFileContent(workbook, "export.xlsx", "Excel", "xlsx")) {
-        toast(t("grid.exported"));
+    await runExclusiveExport(async () => {
+      try {
+        const { buildXlsxWorkbook } = await import("@/lib/xlsxExport");
+        const workbook = buildXlsxWorkbook({
+          sheetName: tableMeta.value?.tableName || "Export",
+          columns: columns.value,
+          rows: rowsToExport(rowIds).map((item) => item.data),
+        });
+        if (await saveBinaryFileContent(workbook, "export.xlsx", "Excel", "xlsx")) {
+          toast(t("grid.exported"));
+        }
+      } catch (e: any) {
+        toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
       }
-    } catch (e: any) {
-      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
-    }
+    });
   }
 
   function copySql() {
diff --git a/src/lib/actionActivation.ts b/src/lib/actionActivation.ts
new file mode 100644
index 0000000000..4ba72d1ded
--- /dev/null
+++ b/src/lib/actionActivation.ts
@@ -0,0 +1,42 @@
+export const DEFAULT_REPEATED_ACTIVATION_WINDOW_MS = 500;
+
+export interface ActionActivationGuard {
+  lastActivatedAt?: number;
+  running?: boolean;
+}
+
+function nowMs(): number {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return performance.now();
+  }
+  return Date.now();
+}
+
+export function shouldSuppressRepeatedActivation(
+  guard: ActionActivationGuard,
+  now = nowMs(),
+  windowMs = DEFAULT_REPEATED_ACTIVATION_WINDOW_MS,
+): boolean {
+  if (guard.lastActivatedAt !== undefined && now - guard.lastActivatedAt < windowMs) {
+    return true;
+  }
+  guard.lastActivatedAt = now;
+  return false;
+}
+
+export function suppressEvent(event: Event) {
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation?.();
+}
+
+export function tryStartExclusiveActivation(guard: ActionActivationGuard): (() => void) | null {
+  if (guard.running) return null;
+  guard.running = true;
+  let finished = false;
+  return () => {
+    if (finished) return;
+    finished = true;
+    guard.running = false;
+  };
+}
diff --git a/tests/actionActivation.test.ts b/tests/actionActivation.test.ts
new file mode 100644
index 0000000000..9cddba39a7
--- /dev/null
+++ b/tests/actionActivation.test.ts
@@ -0,0 +1,35 @@
+import { strict as assert } from "node:assert";
+import test from "node:test";
+import { shouldSuppressRepeatedActivation, tryStartExclusiveActivation } from "../src/lib/actionActivation.ts";
+
+test("allows the first activation", () => {
+  const guard = {};
+
+  assert.equal(shouldSuppressRepeatedActivation(guard, 1000), false);
+});
+
+test("suppresses repeated activation inside the guard window", () => {
+  const guard = {};
+
+  assert.equal(shouldSuppressRepeatedActivation(guard, 1000, 500), false);
+  assert.equal(shouldSuppressRepeatedActivation(guard, 1200, 500), true);
+});
+
+test("allows activation after the guard window", () => {
+  const guard = {};
+
+  assert.equal(shouldSuppressRepeatedActivation(guard, 1000, 500), false);
+  assert.equal(shouldSuppressRepeatedActivation(guard, 1600, 500), false);
+});
+
+test("exclusive activation blocks concurrent starts until finished", () => {
+  const guard = {};
+  const finish = tryStartExclusiveActivation(guard);
+
+  assert.equal(typeof finish, "function");
+  assert.equal(tryStartExclusiveActivation(guard), null);
+
+  finish?.();
+
+  assert.equal(typeof tryStartExclusiveActivation(guard), "function");
+});