vue-desktop/src/core/desktop/ui/useDesktopInit.ts

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 { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { useDraggable } from '@vueuse/core'

export function useDesktopInit(containerStr: string) {
  let container:HTMLElement
  const gridTemplate = reactive({
    cellWidth: 90,
    cellHeight: 110,
    gap: 10,
    colCount: 1,
    rowCount: 1
  })

  const ro = new ResizeObserver(entries => {
    const entry= entries[0]
    const containerRect = entry.contentRect
    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)
  })
  onUnmounted(() => {
    ro.unobserve(container)
  })

  // 有桌面图标的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
    return {
      name: processInfo.name,
      icon: processInfo.icon,
      path: processInfo.startName,
      col: x,
      row: y
    }
  })

  return {
    ...toRefs(gridTemplate)
  }
}