保存一下

src/core/desktop/ui/DesktopComponent.vue

@@ -3,11 +3,13 @@
     :config-provider-props="configProviderProps"
     class="w-full h-full pos-relative"
   >
-    <div ref="desktopRootDom" class="desktop-root">
-      <div class="desktop-container"
-           :style="gridStyle">
-        <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
-                 :icon="appIcon" :gridTemplate="gridTemplate" />
+    <div class="desktop-root" @contextmenu="onContextMenu">
+      <div class="w-full h-full flex-1 p-2 pos-relative">
+        <div class="desktop-container"
+             :style="gridStyle">
+          <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
+                   :icon="appIcon" :gridTemplate="gridTemplate" />
+        </div>
       </div>
       <div class="task-bar"></div>
     </div>
@@ -20,13 +22,10 @@ import XSystem from '@/core/XSystem.ts'
 import { notificationApi } from '@/core/common/naive-ui/discrete-api.ts'
 import { configProviderProps } from '@/core/common/naive-ui/theme.ts'
 import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
-import { useIconDrag } from '@/core/desktop/utils/useIconDrag.ts'
-import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
 import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
 import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
 
 const props = defineProps<{ process: DesktopProcess }>()
-// console.log(props.process)
 
 const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-container')
 
@@ -42,12 +41,8 @@ XSystem.instance.eventManages.addEventListener(
   },
 )
 
-const iconsInit = () => {
-  const icons = document.querySelectorAll<HTMLDivElement>('div.icon-container')
-  const container = document.querySelector<HTMLDivElement>('.desktop-container')!
-  icons.forEach((icon: HTMLDivElement) => {
-    useIconDrag(icon, container)
-  })
+const onContextMenu = (e: MouseEvent) => {
+  e.preventDefault()
 }
 </script>
 
@@ -56,13 +51,7 @@ const iconsInit = () => {
   @apply w-full h-full flex flex-col;
 
   .desktop-container {
-    @apply w-full flex-1 grid grid-auto-flow-col pos-relative;
-
-    .icon-container {
-      width: 100%;
-      height: 100%;
-      @apply flex flex-col items-center justify-center rounded  bg-gray-200;
-    }
+    @apply w-full h-full flex-1 grid grid-auto-flow-col pos-relative;
   }
 
   .task-bar {

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

@@ -21,6 +21,12 @@ 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-container')) return
+
   // 获取容器边界
   const rect = el.parentElement!.getBoundingClientRect()
 
@@ -31,7 +37,7 @@ const onDragEnd = (e: DragEvent) => {
   // 计算鼠标所在单元格坐标（向上取整，从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
 }