feat: 右键菜单组件

Author: ProgramCX

components.d.ts

@@ -8,12 +8,15 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElBadge: typeof import('element-plus/es')['ElBadge']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElText: typeof import('element-plus/es')['ElText']
     FluentCheckBox: typeof import('./src/components/fluent-ui/FluentCheckBox.vue')['default']
     FluentInput: typeof import('./src/components/fluent-ui/FluentInput.vue')['default']
     NavBar: typeof import('./src/components/mainwindow/NavBar.vue')['default']
+    PopMenu: typeof import('./src/components/common/PopMenu/PopMenu.vue')['default']
+    PopMenuItem: typeof import('./src/components/common/PopMenu/PopMenuItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SideBar: typeof import('./src/components/mainwindow/SideBar.vue')['default']

public/assets/svg/esc_16.svg

@@ -0,0 +1,102 @@
+<!--
+description: 右键菜单
+author: 程旭
+date: 2025-04-10
+-->
+<template>
+    <div class="pop-menu flex-column-all-center" ref="popMenuRef" v-if="props.attribute.visible">
+        <PopMenuItem v-for="(item, index) in props.attribute.items" :key="index" :item="item" />
+    </div>
+</template>
+<script setup lang="ts">
+import { watch, ref, nextTick } from 'vue';
+import PopMenuItem from './PopMenuItem.vue';
+
+import { PopMenuAttributeInterface } from '../PopMenu/index';
+
+import { useMouse } from '@vueuse/core'
+
+const { x, y } = useMouse();
+
+const props = defineProps<{
+    attribute: PopMenuAttributeInterface;
+}>();
+
+const emit = defineEmits<{
+    (e: 'close'): void;
+}>();
+
+const popMenuRef = ref<HTMLElement | null>(null);
+
+// 监听点击外部关闭
+const handleClickOutside = (_e: MouseEvent) => {
+    if (popMenuRef.value /*&& !popMenuRef.value.contains(e.target as Node)*/) {
+        emit('close');
+    }
+};
+
+const setPosition = (x: number, y: number) => {
+    const popMenu = popMenuRef.value;
+    // if (!popMenu) {
+    //     return;
+    // }
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const popMenuWidth = popMenu.offsetWidth;
+    const popMenuHeight = popMenu.offsetHeight;
+
+    if (x + popMenuWidth > windowWidth) {
+        popMenu.style.left = `${windowWidth - popMenuWidth -10}px`;
+    } else {
+        popMenu.style.left = `${x}px`;
+
+    }
+
+    if (y + popMenuHeight > windowHeight) {
+        popMenu.style.top = `${windowHeight - popMenuHeight -10}px`;
+    } else {
+        popMenu.style.top = `${y}px`;
+
+    }
+}
+
+
+watch(() => props.attribute.visible, async (newVal) => {
+    console.log('visible', newVal);
+    if (newVal) {
+        await nextTick();
+        if (props.attribute.autoPositioning) {
+            setPosition(x.value, y.value);
+        } else {
+            if (!props.attribute.position) {
+                setPosition(x.value, y.value);
+            } else {
+                setPosition(props.attribute.position.x, props.attribute.position.y);
+            }
+        }
+        setTimeout(() => {
+            document.addEventListener('click', handleClickOutside);
+        }, 100);
+    } else {
+        document.removeEventListener('click', handleClickOutside);
+    }
+}, { deep: true, immediate: true });
+
+
+</script>
+<style lang="scss" scoped>
+.pop-menu {
+    min-width: 180px;
+    border-radius: 10px;
+    background-color: var(--pop-menu-background-color);
+    transition: top 0.15s ease, left 0.15s ease, opacity 0.2s ease;
+    opacity: 1;
+    padding: 5px 5px;
+    box-shadow: var(--pop-menu-box-shadow);
+    backdrop-filter: blur(5px);
+    position: absolute;
+    z-index: 9999;
+    gap:1px;
+    border: 1px solid var(--pop-menu-border-color);
+}
+</style>