初始化

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;
+  }
+}