<!-- 表格右键菜单悬浮提示组件 -->
<template>
  <div
    v-show="visible"
    class="table-context-menu-hint"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    {{ text }}
  </div>
</template>

<script setup lang="ts">
  interface Props {
    visible: boolean
    position: { x: number; y: number }
    text?: string
  }

  withDefaults(defineProps<Props>(), {
    text: '右键查看更多操作'
  })
</script>

<style scoped lang="scss">
  .table-context-menu-hint {
    position: fixed;
    z-index: 9999;
    padding: 4px 10px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    background-color: rgb(0 0 0 / 80%);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    transition: opacity 0.2s ease;
  }
</style>
