初始化

src/core/desktop/DesktopProcess.ts

@@ -0,0 +1,97 @@
+import AppProcess from '@/core/process/AppProcess.ts'
+import type { AppProcessInfo } from '@/core/process/AppProcessInfo.ts'
+import XSystem from '@/core/XSystem.ts'
+import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
+import { createApp, h } from 'vue'
+import DesktopComponent from '@/core/desktop/ui/DesktopComponent.vue'
+import { naiveUi } from '@/core/common/naive-ui/components.ts'
+import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
+import { debounce } from 'lodash'
+
+export class DesktopProcess extends AppProcess {
+  private _desktopRootDom: HTMLElement;
+  private _isMounted: boolean = false;
+  private _width: number = 0;
+  private _height: number = 0;
+  private _pendingResize: boolean = false;
+
+  public get desktopRootDom() {
+    return this._desktopRootDom;
+  }
+  public get isMounted() {
+    return this._isMounted;
+  }
+  public get basicSystemProcess() {
+    return XSystem.instance.processManages.findProcessByName<BasicSystemProcess>('basic-system')
+  }
+
+  public get width() {
+    return this._width;
+  }
+  public set width(value: number) {
+    if (this._height === value) return;
+    if (!this._isMounted) return;
+    this._width = value;
+    this._desktopRootDom.style.width = value >= 0 ? `${value}px` : '100%';
+
+    this.scheduleResizeEvent()
+  }
+  public get height() {
+    return this._height;
+  }
+  public set height(value: number) {
+    if (this._height === value) return;
+    if (!this._isMounted) return;
+    this._height = value;
+    this._desktopRootDom.style.height = value >= 0 ? `${value}px` : '100%';
+
+    this.scheduleResizeEvent()
+  }
+
+  private scheduleResizeEvent() {
+    if (this._pendingResize) return;
+
+    this._pendingResize = true;
+
+    Promise.resolve().then(() => {
+      if (this._pendingResize) {
+        this._pendingResize = false;
+        console.log('onDesktopRootDomResize')
+        this.eventManages.notifyEvent(DesktopEventEnum.onDesktopRootDomResize, this._width, this._height);
+      }
+    });
+  }
+
+  private get eventManages() {
+    return XSystem.instance.eventManages;
+  }
+
+  constructor(info: AppProcessInfo) {
+    super(info)
+    console.log('DesktopProcess')
+  }
+
+  public mount(dom: HTMLDivElement) {
+    if (this._isMounted) return;
+    this._width = window.innerWidth
+    this._height = window.innerHeight
+    window.addEventListener(
+      'resize',
+      debounce(() => {
+        this.width = window.innerWidth
+        this.height = window.innerHeight
+      }, 300),
+    )
+
+    dom.style.zIndex = '0';
+    dom.style.width = `${this._width}px`
+    dom.style.height = `${this._height}px`
+    this._desktopRootDom = dom;
+
+    const app = createApp(DesktopComponent, { process: this })
+    app.use(naiveUi)
+    app.mount(dom)
+
+    this._isMounted = true;
+  }
+}

src/core/desktop/DesktopProcessInfo.ts

@@ -0,0 +1,15 @@
+import { AppProcessInfo } from '@/core/process/AppProcessInfo.ts'
+
+export const DesktopProcessInfo = new AppProcessInfo({
+  name: 'desktop',
+  title: '桌面',
+  version: {
+    company: 'XZG',
+    major: 1,
+    minor: 0,
+    build: 0,
+    private: 0
+  },
+  singleton: true,
+  isJustProcess: true
+})

src/core/desktop/types/IconType.ts

@@ -0,0 +1,7 @@
+export interface IconType {
+  name: string;
+  icon: string;
+  path: string;
+  col: number;
+  row: number;
+}

src/core/desktop/ui/DesktopComponent.vue

@@ -0,0 +1,101 @@
+<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 iconArr" class="icon-container">{{ icon.icon }}</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 { onMounted } from 'vue'
+import type { IconType } from '@/core/desktop/types/IconType.ts'
+import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
+
+const props = defineProps<{process: DesktopProcess}>()
+console.log(props.process)
+
+const iconArr: IconType[] = [
+  {
+    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)
+  })
+}
+onMounted(() => {
+  const container = document.querySelector<HTMLDivElement>('.desktop-container')!
+  console.log(container.getBoundingClientRect())
+  // iconsInit()
+  const { col, row } = useDesktopInit(container)
+  console.log(col.value, row.value)
+})
+</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 text-white bg-gray-200;
+    }
+  }
+
+  .task-bar {
+    @apply w-full h-[40px] bg-gray-200;
+  }
+}
+</style>

src/core/desktop/ui/useDesktopInit.ts

@@ -0,0 +1,44 @@
+import XSystem from '@/core/XSystem.ts'
+import type { IconType } from '@/core/desktop/types/IconType.ts'
+import { nextTick, onUnmounted, reactive, toRefs } from 'vue'
+import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
+import { useDraggable } from '@vueuse/core'
+
+export function useDesktopInit(container: HTMLElement) {
+  const gridTemplate = reactive({
+    cellWidth: 90,
+    cellHeight: 110,
+    gap: 10,
+    col: 1,
+    row: 1
+  })
+
+  const ro = new ResizeObserver(entries => {
+    const entry= entries[0]
+    const containerRect = entry.contentRect
+    gridTemplate.col = Math.floor(containerRect.width / gridTemplate.cellWidth);
+    gridTemplate.row = Math.floor(containerRect.height / (gridTemplate.cellHeight));
+    console.log(1111)
+  })
+  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 => {
+    return {
+      name: processInfo.name,
+      icon: processInfo.icon,
+      path: processInfo.startName,
+      col: 0,
+      row: 0
+    }
+  })
+
+  return {
+    ...toRefs(gridTemplate),
+  }
+}

src/core/desktop/utils/useIconDrag.ts

@@ -0,0 +1,64 @@
+import { useDraggable } from '@vueuse/core'
+import { ref } from 'vue'
+
+export function useIconDrag(el: HTMLElement, container: HTMLElement) {
+  let offsetX = 0
+  let offsetY = 0
+  let containerRect = container.getBoundingClientRect()
+
+  el.addEventListener('mousedown', (e) => {
+    el.classList.add('dragging')
+
+    let rect = el.getBoundingClientRect()
+    console.log(rect)
+    offsetX = e.clientX - rect.left
+    offsetY = e.clientY - rect.top
+
+    // 临时脱离 grid，用绝对定位移动
+    el.style.position = "absolute";
+    el.style.left = rect.left - containerRect.left + "px";
+    el.style.top = rect.top - containerRect.top + "px";
+    el.style.gridRow = "auto";
+    el.style.gridColumn = "auto";
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  })
+
+  function onMouseMove(e: MouseEvent) {
+    if (!el) return;
+    el.style.left = e.clientX - containerRect.left - offsetX + "px";
+    el.style.top = e.clientY - containerRect.top - offsetY + "px";
+  }
+
+  function onMouseUp(e: MouseEvent) {
+    if (!el) return;
+
+    const cellWidth = 90 + 16;  // 图标宽度 + gap
+    const cellHeight = 110 + 16;
+
+    // 计算所在行列
+    let col = Math.round((e.clientX - containerRect.left) / cellWidth) + 1;
+    let row = Math.round((e.clientY - containerRect.top) / cellHeight) + 1;
+
+    // 限制在 grid 内
+    const maxCols = Math.floor(containerRect.width / cellWidth);
+    const maxRows = Math.floor(containerRect.height / cellHeight);
+    col = Math.max(1, Math.min(maxCols, col));
+    row = Math.max(1, Math.min(maxRows, row));
+
+    console.log(col, row)
+
+    // 放回 grid
+    el.style.position = "relative";
+    el.style.left = "";
+    el.style.top = "";
+    el.style.gridRow = `${row}`;
+    el.style.gridColumn = `${col}`;
+
+    el.classList.remove("dragging");
+
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  }
+}