保存一下

src/core/desktop/ui/useDesktopInit.ts

@@ -1,6 +1,15 @@
 import XSystem from '@/core/XSystem.ts'
-import type { IconType } from '@/core/desktop/types/IconType.ts'
-import { nextTick, onMounted, onUnmounted, reactive, toRefs, useTemplateRef } from 'vue'
+import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
+import {
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  toRefs,
+  useTemplateRef,
+  watch,
+  watchEffect,
+} from 'vue'
 import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useDraggable } from '@vueuse/core'
 
@@ -19,11 +28,11 @@ export function useDesktopInit(containerStr: string) {
     const containerRect = entry.contentRect
     gridTemplate.colCount = Math.floor(containerRect.width / gridTemplate.cellWidth);
     gridTemplate.rowCount = Math.floor(containerRect.height / (gridTemplate.cellHeight));
+    console.log('resize', gridTemplate)
   })
 
   onMounted(() => {
     container = document.querySelector(containerStr)!
-    console.log( container)
     ro.observe(container)
   })
   onUnmounted(() => {
@@ -31,12 +40,11 @@ export function useDesktopInit(containerStr: string) {
   })
 
   // 有桌面图标的app
-  const apps = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
-  console.log(apps)
-  const icons: IconType[] = apps.map((processInfo, index) => {
-    // 左上角坐标原点，从上到下从左到右
-    const x = Math.floor(index / gridTemplate.rowCount)
-    const y = index % gridTemplate.rowCount
+  const appInfos = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
+  const appIcons: IDesktopAppIcon[] = appInfos.map((processInfo, index) => {
+    // 左上角坐标原点，从上到下从左到右 索引从1开始
+    const x = Math.floor(index / gridTemplate.rowCount) + 1
+    const y = index % gridTemplate.rowCount + 1
     return {
       name: processInfo.name,
       icon: processInfo.icon,
@@ -45,8 +53,20 @@ export function useDesktopInit(containerStr: string) {
       row: y
     }
   })
+  const appIconsRef = reactive(appIcons)
+
+  watch(() => [gridTemplate.rowCount, gridTemplate.colCount], () => {
+    appIconsRef.forEach((appIcon, index) => {
+      const x = Math.floor(index / gridTemplate.rowCount) + 1
+      const y = index % gridTemplate.rowCount + 1
+      appIcon.col = x
+      appIcon.row = y
+    })
+    console.log(appIconsRef)
+  })
 
   return {
-    ...toRefs(gridTemplate)
+    ...toRefs(gridTemplate),
+    appIconsRef
   }
 }