conflict-nuxt-4/app/components/auto-import/ContextMenu.vue

<template>
  <div v-if="visible" class="context-menu" :style="menuStyle" @click.stop>
    <!-- بخش AI (مشابه Notion AI) -->
    <div class="menu-section ai-section">
      <div class="section-title">
        <span class="ai-icon">✨</span>
        هوش مصنوعی نوشن
      </div>
      <button class="menu-item" @click="handleAction('ai-summarize')">
        <span class="item-icon">📝</span>
        خلاصه‌سازی
        <span class="shortcut">AI</span>
      </button>
      <button class="menu-item" @click="handleAction('ai-improve')">
        <span class="item-icon">✨</span>
        بهبود نوشتار
        <span class="shortcut">AI</span>
      </button>
      <button class="menu-item" @click="handleAction('ai-translate')">
        <span class="item-icon">🌍</span>
        ترجمه
        <span class="shortcut">AI</span>
      </button>
      <button class="menu-item" @click="handleAction('ai-explain')">
        <span class="item-icon">💡</span>
        توضیح
        <span class="shortcut">AI</span>
      </button>
    </div>

    <!-- بخش قالب‌بندی -->
    <div class="menu-section">
      <div class="section-title">قالب‌بندی</div>
      <button class="menu-item" @click="handleAction('format-bold')">
        <span class="item-icon">𝐁</span>
        پررنگ
        <span class="shortcut">Ctrl+B</span>
      </button>
      <button class="menu-item" @click="handleAction('format-italic')">
        <span class="item-icon">𝐼</span>
        کج
        <span class="shortcut">Ctrl+I</span>
      </button>
      <button class="menu-item" @click="handleAction('format-code')">
        <span class="item-icon">{ }</span>
        کد
        <span class="shortcut">Ctrl+E</span>
      </button>
      <button class="menu-item" @click="handleAction('format-link')">
        <span class="item-icon">🔗</span>
        لینک
        <span class="shortcut">Ctrl+K</span>
      </button>
    </div>

    <!-- بخش عملیات متنی -->
    <div class="menu-section">
      <div class="section-title">عملیات</div>
      <button class="menu-item" @click="handleAction('copy')">
        <span class="item-icon">📋</span>
        کپی
        <span class="shortcut">Ctrl+C</span>
      </button>
      <button class="menu-item" @click="handleAction('cut')">
        <span class="item-icon">✂️</span>
        برش
        <span class="shortcut">Ctrl+X</span>
      </button>
      <button class="menu-item" @click="handleAction('paste')">
        <span class="item-icon">📝</span>
        چسباندن
        <span class="shortcut">Ctrl+V</span>
      </button>
      <button class="menu-item text-danger" @click="handleAction('delete')">
        <span class="item-icon">🗑️</span>
        حذف
        <span class="shortcut">Delete</span>
      </button>
    </div>

    <!-- بخش جستجو -->
    <div class="menu-section">
      <button class="menu-item" @click="handleAction('search-web')">
        <span class="item-icon">🔍</span>
        جستجو در وب
      </button>
      <button class="menu-item" @click="handleAction('search-page')">
        <span class="item-icon">📄</span>
        جستجو در صفحه
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

const props = defineProps({
  visible: Boolean,
  position: {
    type: Object,
    default: () => ({ x: 0, y: 0 }),
  },
  selectedText: String,
});

const emit = defineEmits(["close", "action"]);

const menuStyle = computed(() => ({
  top: `${props.position.y}px`,
  left: `${props.position.x}px`,
  display: props.visible ? "block" : "none",
}));

const handleAction = (action) => {
  emit("action", {
    action,
    text: props.selectedText,
  });
  emit("close");
};

// بستن منو با کلیک خارج یا Escape
const closeMenu = () => {
  if (props.visible) {
    emit("close");
  }
};

const handleEscape = (event) => {
  if (event.key === "Escape") {
    closeMenu();
  }
};

const handleClickOutside = (event) => {
  if (!event.target.closest(".context-menu")) {
    closeMenu();
  }
};

onMounted(() => {
  document.addEventListener("click", handleClickOutside);
  document.addEventListener("contextmenu", handleClickOutside);
  document.addEventListener("keydown", handleEscape);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
  document.removeEventListener("contextmenu", handleClickOutside);
  document.removeEventListener("keydown", handleEscape);
});
</script>

<style scoped>
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 300px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 10000;
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-section {
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.menu-section:last-child {
  border-bottom: none;
}

.ai-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px 12px 0 0;
  margin: -1px -1px 0 -1px;
}

.section-title {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-icon {
  color: #8b5cf6;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: right;
  cursor: pointer;
  transition: all 0.2s;
  color: #374151;
  font-size: 14px;
  position: relative;
}

.menu-item:hover {
  background-color: #f9fafb;
}

.item-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  opacity: 0.8;
}

.shortcut {
  font-size: 12px;
  color: #9ca3af;
  font-family: monospace;
  padding: 2px 6px;
  background: #f3f4f6;
  border-radius: 4px;
  margin-right: auto;
}

.menu-item.text-danger {
  color: #ef4444;
}

.menu-item.text-danger:hover {
  background-color: #fef2f2;
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .context-menu {
    width: 280px;
    max-height: 400px;
  }
}
</style>