保存一下

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

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="icon-container"
+    :style="`grid-column: ${icon.col}/${icon.col + 1};grid-row: ${icon.row}/${icon.row + 1};`"
+    draggable="true"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
+  >
+    {{ icon.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'
+
+const { icon, gridTemplate } = defineProps<{ icon: IDesktopAppIcon, gridTemplate: IGridTemplateParams }>()
+
+const onDragStart = (e: DragEvent) => {}
+
+const onDragEnd = (e: DragEvent) => {
+  const el = e.target as HTMLElement | null
+  if (!el) 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)
+  console.log(gridX, gridY)
+  icon.col = gridX
+  icon.row = gridY
+}
+</script>
+
+<style scoped lang="scss">
+.icon-container {
+  width: 100%;
+  height: 100%;
+  @apply flex flex-col items-center justify-center rounded  bg-gray-200;
+}
+</style>