vue-desktop/src/core/desktop/ui/DesktopComponent.vue

<template>
  <n-config-provider
    :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>
      <div class="task-bar"></div>
    </div>
  </n-config-provider>
</template>

<script setup lang="ts">
import type { DesktopProcess } from '@/core/desktop/DesktopProcess.ts'
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')

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')
  const container = document.querySelector<HTMLDivElement>('.desktop-container')!
  icons.forEach((icon: HTMLDivElement) => {
    useIconDrag(icon, container)
  })
}
</script>

<style lang="scss" scoped>
.desktop-root {
  @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;
    }
  }

  .task-bar {
    @apply w-full h-[40px] bg-gray-200;
    flex-shrink: 0;
  }
}
</style>