@mx-sose-front/mx-sose-graph 1.1.8 → 1.1.9

package/src/components/GanttContextMenu/GanttContextMenu.vue

@@ -0,0 +1,304 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="visible"
+      class="gantt-context-menu px-[6px]"
+      :style="dynamicMenuStyle"
+      @contextmenu.prevent
+      @click.stop
+      ref="menuRef"
+    >
+      <!-- 属性配置 -->
+      <div class="menu-item" @click="handlePropertyConfig">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'config')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="属性配置" />
+          <span>属性配置</span>
+        </div>
+      </div>
+
+      <!-- 树上高亮 -->
+      <div class="menu-item" @click="handleTreeHighlight">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'tree')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="树上高亮" />
+          <span>树上高亮</span>
+        </div>
+      </div>
+
+      <!-- 上移 -->
+      <div class="menu-item" :class="{ 'menu-disabled': !canMoveUp }" @click="handleMoveUp">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'up')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="上移" />
+          <span>上移</span>
+        </div>
+      </div>
+
+      <!-- 下移 -->
+      <div class="menu-item" :class="{ 'menu-disabled': !canMoveDown }" @click="handleMoveDown">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'down')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="下移" />
+          <span>下移</span>
+        </div>
+      </div>
+
+      <!-- 删除 -->
+      <div class="menu-item" @click="handleDelete">
+        <div class="flex items-center box-border border-b-[1px] border-solid border-[#DCDFE6]">
+          <img :src="getIcon('createMenu', 'delete')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="删除" />
+          <span>删除</span>
+        </div>
+      </div>
+
+      <!-- 移除 -->
+      <div class="menu-item" @click="handleRemove">
+        <div class="flex items-center">
+          <img :src="getIcon('createMenu', 'remove')" class="w-[18px] h-[18px] mr-[10px] ml-[2px]" alt="移除" />
+          <span>移除</span>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, type CSSProperties } from 'vue'
+import { getIcon } from '../../utils/iconLoader'
+
+interface Props {
+  visible: boolean
+  position: {
+    x: number
+    y: number
+  }
+  canMoveUp: boolean
+  canMoveDown: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'property-config'): void
+  (e: 'tree-highlight'): void
+  (e: 'move-up'): void
+  (e: 'move-down'): void
+  (e: 'delete'): void
+  (e: 'remove'): void
+}>()
+
+const menuRef = ref<HTMLElement | null>(null)
+
+// 菜单尺寸常量
+const MENU_WIDTH = 180
+const MENU_HEIGHT = 240 // 估算菜单高度
+const SAFE_MARGIN = 10
+
+// 动态菜单样式
+const dynamicMenuStyle = ref<CSSProperties>({
+  left: '0px',
+  top: '0px',
+  display: 'none',
+  position: 'fixed',
+  zIndex: '9999',
+  minWidth: `${MENU_WIDTH}px`,
+})
+
+// 计算并更新菜单位置
+const updateMenuPosition = () => {
+  if (!props.visible) {
+    dynamicMenuStyle.value = { ...dynamicMenuStyle.value, display: 'none' }
+    return
+  }
+
+  // 获取视口尺寸
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  // 初始位置
+  let left = props.position.x
+  let top = props.position.y
+
+  // 水平方向调整 - 确保不超出右侧边界
+  if (left + MENU_WIDTH > viewportWidth) {
+    left = viewportWidth - MENU_WIDTH - SAFE_MARGIN
+  }
+  // 确保不小于左侧边界
+  left = Math.max(SAFE_MARGIN, left)
+
+  // 垂直方向调整 - 确保不超出底部边界
+  if (top + MENU_HEIGHT > viewportHeight) {
+    top = viewportHeight - MENU_HEIGHT - SAFE_MARGIN
+  }
+  // 确保不小于顶部边界
+  top = Math.max(SAFE_MARGIN, top)
+
+  dynamicMenuStyle.value = {
+    left: `${left}px`,
+    top: `${top}px`,
+    display: 'block',
+    position: 'fixed',
+    zIndex: '9999',
+    minWidth: `${MENU_WIDTH}px`,
+  }
+}
+
+// 关闭菜单
+const closeMenu = () => {
+  emit('update:visible', false)
+}
+
+// 处理点击外部关闭菜单
+const handleClickOutside = (event: MouseEvent) => {
+  if (!props.visible || !menuRef.value) return
+
+  if (!menuRef.value.contains(event.target as Node)) {
+    closeMenu()
+  }
+}
+
+// 监听 props 变化
+watch(
+  () => [props.visible, props.position],
+  () => {
+    updateMenuPosition()
+    
+    // 当菜单显示时，延迟添加点击外部关闭的监听
+    if (props.visible) {
+      // 使用 setTimeout 确保当前的右键点击事件已经完成
+      setTimeout(() => {
+        document.addEventListener('click', handleClickOutside, { capture: true })
+      }, 0)
+    } else {
+      // 菜单隐藏时移除监听
+      document.removeEventListener('click', handleClickOutside, { capture: true })
+    }
+  },
+  { immediate: true }
+)
+
+// 菜单项处理函数
+const handlePropertyConfig = () => {
+  emit('property-config')
+  closeMenu()
+}
+
+const handleTreeHighlight = () => {
+  emit('tree-highlight')
+  closeMenu()
+}
+
+const handleMoveUp = () => {
+  if (!props.canMoveUp) return
+  emit('move-up')
+  closeMenu()
+}
+
+const handleMoveDown = () => {
+  if (!props.canMoveDown) return
+  emit('move-down')
+  closeMenu()
+}
+
+const handleDelete = () => {
+  emit('delete')
+  closeMenu()
+}
+
+const handleRemove = () => {
+  emit('remove')
+  closeMenu()
+}
+
+// 处理窗口大小变化
+const handleWindowResize = () => {
+  if (props.visible) {
+    updateMenuPosition()
+  }
+}
+
+// 组件挂载时添加事件监听
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize)
+  updateMenuPosition()
+})
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside, { capture: true })
+  window.removeEventListener('resize', handleWindowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.gantt-context-menu {
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 6px 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform-origin: top left;
+}
+
+.gantt-context-menu[style*='display: block'] {
+  animation: fadeIn 0.2s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 滚动条优化 */
+.gantt-context-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.gantt-context-menu::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 3px;
+}
+
+.gantt-context-menu::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+.menu-item {
+  padding: 0 15px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  border-radius: 4px;
+  height: 36px;
+  line-height: 36px;
+  box-sizing: border-box;
+
+  &:hover:not(.menu-disabled) {
+    background-color: #f5f7fa;
+    color: #303133;
+  }
+}
+
+/* 置灰样式 */
+.menu-disabled {
+  color: #c0c4cc !important;
+  cursor: not-allowed !important;
+  pointer-events: none;
+
+  &:hover {
+    background-color: transparent !important;
+  }
+
+  img {
+    opacity: 0.5;
+  }
+}
+</style>