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

<template>
  <n-config-provider
    :config-provider-props="configProviderProps"
    class="w-full h-full pos-relative"
  >
    <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>
  </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 { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'

const props = defineProps<{ process: DesktopProcess }>()

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 onContextMenu = (e: MouseEvent) => {
  e.preventDefault()
}
</script>

<style lang="scss" scoped>
.desktop-root {
  @apply w-full h-full flex flex-col;

  .desktop-container {
    @apply w-full h-full flex-1 grid grid-auto-flow-col pos-relative;
  }

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