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="desktop-bg">
        <div class="desktop-icons-container"
             :style="gridStyle">
          <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
                   :iconInfo="appIcon" :gridTemplate="gridTemplate"
                   @dblclick="runApp(appIcon)"
          />
        </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 { useDesktopInit } from '@/core/desktop/ui/hooks/useDesktopInit.ts'
import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
import { eventManager } from '@/core/events/EventManager.ts'

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

const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-icons-container')

eventManager.addEventListener('onDesktopRootDomResize',
  (width, height) => {
    console.log(width, height)
    notificationApi.create({
      title: '桌面通知',
      content: `桌面尺寸变化${width}x${height}}`,
      duration: 2000,
    })
  },
)

const onContextMenu = (e: MouseEvent) => {
  e.preventDefault()
}

const runApp = (appIcon: IDesktopAppIcon) => {
  XSystem.instance.run(appIcon.name)
}
</script>

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

  .desktop-bg {
    @apply w-full h-full flex-1 p-2 pos-relative;
    background-image: url("imgs/desktop-bg-2.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100% - #{$taskBarHeight});
  }

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

  .task-bar {
    @apply w-full bg-gray-200;
    height: $taskBarHeight;
    flex-shrink: 0;
  }
}
</style>