vue-desktop/src/core/desktop/ui/components/AppIcon.vue

<template>
  <div
    class="icon-container"
    :style="`grid-column: ${iconInfo.x}/${iconInfo.x + 1};grid-row: ${iconInfo.y}/${iconInfo.y + 1};`"
    draggable="true"
    @dragstart="onDragStart"
    @dragend="onDragEnd"
  >
    {{ iconInfo.name }}
  </div>
</template>

<script setup lang="ts">
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
import type { IGridTemplateParams } from '@/core/desktop/types/IGridTemplateParams.ts'
import { eventManager } from '@/core/events/EventManager.ts'

const { iconInfo, gridTemplate } = defineProps<{ iconInfo: IDesktopAppIcon, gridTemplate: IGridTemplateParams }>()

const onDragStart = (e: DragEvent) => {}

const onDragEnd = (e: DragEvent) => {
  const el = e.target as HTMLElement | null
  if (!el) return
  // 鼠标所在位置已存在图标元素
  const pointTarget = document.elementFromPoint(e.clientX, e.clientY)
  if (!pointTarget) return
  if (pointTarget.classList.contains('icon-container')) return
  if (!pointTarget.classList.contains('desktop-icons-container')) return

  // 获取容器边界
  const rect = el.parentElement!.getBoundingClientRect()

  // 鼠标相对容器左上角坐标
  const mouseX = e.clientX - rect.left
  const mouseY = e.clientY - rect.top

  // 计算鼠标所在单元格坐标（向上取整，从1开始）
  const gridX = Math.ceil(mouseX / gridTemplate.cellRealWidth)
  const gridY = Math.ceil(mouseY / gridTemplate.cellRealHeight)

  iconInfo.x = gridX
  iconInfo.y = gridY

  eventManager.notifyEvent('onDesktopAppIconPos', iconInfo)
}
</script>

<style scoped lang="scss">
.icon-container {
  width: 100%;
  height: 100%;
  @apply flex flex-col items-center justify-center bg-gray-200;
}
</style>