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">
        <div v-for="icon in appIconsRef" class="icon-container"
             :style="`grid-row: ${icon.row}/${icon.row + 1};grid-column: ${icon.col}/${icon.col + 1}};`">{{ icon.name }}</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 { useIconDrag } from '@/core/desktop/utils/useIconDrag.ts'
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'

const props = defineProps<{ process: DesktopProcess }>()
// console.log(props.process)

const { colCount, rowCount, appIconsRef } = useDesktopInit('.desktop-container')

const iconArr: IDesktopAppIcon[] = [
  {
    name: '文件管理器',
    icon: '🗂',
    path: '/',
    col: 1,
    row: 1,
  },
  {
    name: '浏览器',
    icon: '🌐',
    path: '/',
    col: 1,
    row: 2,
  },
  {
    name: '记事本',
    icon: '📄',
    path: '/',
    col: 1,
    row: 3,
  },
  {
    name: '音乐播放器',
    icon: '🎵',
    path: '/',
    col: 1,
    row: 4,
  },
]

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>
$icon-width: 80px;
$icon-height: 110px;

.desktop-root {
  @apply w-full h-full flex flex-col;

  .desktop-container {
    @apply w-full flex-1 grid gap-4 grid-auto-flow-col p-4 pos-relative;
    grid-template-columns: repeat(auto-fill, minmax($icon-width, 1fr));
    grid-template-rows: repeat(auto-fill, minmax($icon-height, 1fr));

    .icon-container {
      width: $icon-width;
      height: $icon-height;
      @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>