保存一下

src/core/desktop/ui/DesktopComponent.vue

@@ -1,8 +1,12 @@
 <template>
-  <n-config-provider :config-provider-props="configProviderProps" class="w-full h-full pos-relative">
+  <n-config-provider
+    :config-provider-props="configProviderProps"
+    class="w-full h-full pos-relative"
+  >
     <div ref="desktopRootDom" class="desktop-root">
       <div class="desktop-container">
-        <div v-for="icon in iconArr" class="icon-container">{{ icon.icon }}</div>
+        <div v-for="icon in iconArr" class="icon-container"
+             :style="`grid-row: ${icon.row}/${icon.row + 1};grid-column: ${icon.col}/${icon.col + 1}};`">{{ icon.icon }}</div>
       </div>
       <div class="task-bar"></div>
     </div>
@@ -16,12 +20,14 @@ 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 { onMounted } from 'vue'
+import { onMounted, ref, useTemplateRef, watchEffect } from 'vue'
 import type { IconType } from '@/core/desktop/types/IconType.ts'
 import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
 
-const props = defineProps<{process: DesktopProcess}>()
-console.log(props.process)
+const props = defineProps<{ process: DesktopProcess }>()
+// console.log(props.process)
+
+const { colCount, rowCount } = useDesktopInit('.desktop-container')
 
 const iconArr: IconType[] = [
   {
@@ -29,35 +35,42 @@ const iconArr: IconType[] = [
     icon: '🗂',
     path: '/',
     col: 1,
-    row: 1
+    row: 1,
   },
   {
     name: '浏览器',
     icon: '🌐',
     path: '/',
     col: 1,
-    row: 2
+    row: 2,
   },
   {
     name: '记事本',
     icon: '📄',
     path: '/',
     col: 1,
-    row: 3
+    row: 3,
   },
   {
     name: '音乐播放器',
     icon: '🎵',
     path: '/',
     col: 1,
-    row: 4
-  }
+    row: 4,
+  },
 ]
 
-XSystem.instance.eventManages.addEventListener(DesktopEventEnum.onDesktopRootDomResize, (width, height) => {
-  console.log(width, height)
-  notificationApi.create({ title: '桌面通知', content: `桌面尺寸变化${width}x${height}}`, duration: 2000 })
-})
+XSystem.instance.eventManages.addEventListener(
+  DesktopEventEnum.onDesktopRootDomResize,
+  (width, height) => {
+    console.log(width, height)
+    notificationApi.create({
+      title: '桌面通知',
+      content: `桌面尺寸变化${width}x${height}}`,
+      duration: 2000,
+    })
+  },
+)
 
 const iconsInit = () => {
   const icons = document.querySelectorAll<HTMLDivElement>('div.icon-container')
@@ -66,13 +79,6 @@ const iconsInit = () => {
     useIconDrag(icon, container)
   })
 }
-onMounted(() => {
-  const container = document.querySelector<HTMLDivElement>('.desktop-container')!
-  console.log(container.getBoundingClientRect())
-  // iconsInit()
-  const { col, row } = useDesktopInit(container)
-  console.log(col.value, row.value)
-})
 </script>
 
 <style lang="scss" scoped>

src/core/desktop/ui/useDesktopInit.ts

@@ -1,26 +1,31 @@
 import XSystem from '@/core/XSystem.ts'
 import type { IconType } from '@/core/desktop/types/IconType.ts'
-import { nextTick, onUnmounted, reactive, toRefs } from 'vue'
+import { nextTick, onMounted, onUnmounted, reactive, toRefs, useTemplateRef } from 'vue'
 import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useDraggable } from '@vueuse/core'
 
-export function useDesktopInit(container: HTMLElement) {
+export function useDesktopInit(containerStr: string) {
+  let container:HTMLElement
   const gridTemplate = reactive({
     cellWidth: 90,
     cellHeight: 110,
     gap: 10,
-    col: 1,
-    row: 1
+    colCount: 1,
+    rowCount: 1
   })
 
   const ro = new ResizeObserver(entries => {
     const entry= entries[0]
     const containerRect = entry.contentRect
-    gridTemplate.col = Math.floor(containerRect.width / gridTemplate.cellWidth);
-    gridTemplate.row = Math.floor(containerRect.height / (gridTemplate.cellHeight));
-    console.log(1111)
+    gridTemplate.colCount = Math.floor(containerRect.width / gridTemplate.cellWidth);
+    gridTemplate.rowCount = Math.floor(containerRect.height / (gridTemplate.cellHeight));
+  })
+
+  onMounted(() => {
+    container = document.querySelector(containerStr)!
+    console.log( container)
+    ro.observe(container)
   })
-  ro.observe(container)
   onUnmounted(() => {
     ro.unobserve(container)
   })
@@ -28,17 +33,20 @@ export function useDesktopInit(container: HTMLElement) {
   // 有桌面图标的app
   const apps = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
   console.log(apps)
-  const icons: IconType[] = apps.map(processInfo => {
+  const icons: IconType[] = apps.map((processInfo, index) => {
+    // 左上角坐标原点，从上到下从左到右
+    const x = Math.floor(index / gridTemplate.rowCount)
+    const y = index % gridTemplate.rowCount
     return {
       name: processInfo.name,
       icon: processInfo.icon,
       path: processInfo.startName,
-      col: 0,
-      row: 0
+      col: x,
+      row: y
     }
   })
 
   return {
-    ...toRefs(gridTemplate),
+    ...toRefs(gridTemplate)
   }
 }