保存一下

src/core/XSystem.ts

@@ -1,6 +1,5 @@
 import ProcessManageImpl from './process/impl/ProcessManageImpl.ts'
 import ProcessImpl from './process/impl/ProcessImpl.ts'
-import type { ProcessInfoImpl } from '@/core/process/impl/ProcessInfoImpl.ts'
 import { isUndefined } from 'lodash'
 import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
 import { DesktopProcess } from '@/core/desktop/DesktopProcess.ts'
@@ -10,12 +9,22 @@ import { EventBuilderImpl } from '@/core/events/impl/EventBuilderImpl.ts'
 import type { IProcessManage } from '@/core/process/IProcessManage.ts'
 import type { IProcess } from '@/core/process/IProcess.ts'
 import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
+import { ObservableWeakRefImpl } from '@/core/state/impl/ObservableWeakRefImpl.ts'
+import type { IObservable } from '@/core/state/IObservable.ts'
+
+interface IGlobalState {
+  isLogin: boolean
+}
 
 export default class XSystem {
   private static _instance: XSystem = new XSystem()
 
   private _processManage: IProcessManage = new ProcessManageImpl()
   private _eventManage: IEventBuilder<IAllEvent> = new EventBuilderImpl()
+  private _globalState: IObservable<IGlobalState> = new ObservableWeakRefImpl<IGlobalState>({
+    isLogin: false
+  })
+  private _desktopRootDom: HTMLElement;
 
   constructor() {
     console.log('XSystem')
@@ -30,11 +39,19 @@ export default class XSystem {
   public get eventManage() {
     return this._eventManage
   }
+  public get globalState() {
+    return this._globalState
+  }
+  public get desktopRootDom() {
+    return this._desktopRootDom
+  }
 
   public initialization(dom: HTMLDivElement) {
+    this._desktopRootDom = dom
     this.run('basic-system', BasicSystemProcess).then(() => {
       this.run('desktop', DesktopProcess).then((proc) => {
         proc.mount(dom)
+        // console.log(dom.querySelector('.desktop-root'))
       })
     })
   }

src/core/desktop/DesktopProcess.ts

@@ -88,6 +88,7 @@ export class DesktopProcess extends ProcessImpl {
     dom.style.zIndex = '0';
     dom.style.width = `${this._width}px`
     dom.style.height = `${this._height}px`
+    dom.style.position = 'relative'
     this._desktopRootDom = dom
 
     const app = createApp(DesktopComponent, { process: this })

src/core/desktop/ui/DesktopComponent.vue

@@ -5,10 +5,13 @@
   >
     <div class="desktop-root" @contextmenu="onContextMenu">
       <div class="desktop-bg">
-        <div class="desktop-container"
+        <div class="desktop-icons-container"
              :style="gridStyle">
           <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
-                   :iconInfo="appIcon" :gridTemplate="gridTemplate" />
+                   :iconInfo="appIcon" :gridTemplate="gridTemplate"
+                   @dblclick="runApp(appIcon)"
+          />
+          />
         </div>
       </div>
       <div class="task-bar"></div>
@@ -25,10 +28,11 @@ import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useDesktopInit } from '@/core/desktop/ui/hooks/useDesktopInit.ts'
 import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
 import { watch } from 'vue'
+import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
 
 const props = defineProps<{ process: DesktopProcess }>()
 
-const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-container')
+const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-icons-container')
 
 XSystem.instance.eventManage.addEventListener(
   DesktopEventEnum.onDesktopRootDomResize,
@@ -45,6 +49,10 @@ XSystem.instance.eventManage.addEventListener(
 const onContextMenu = (e: MouseEvent) => {
   e.preventDefault()
 }
+
+const runApp = (appIcon: IDesktopAppIcon) => {
+  XSystem.instance.run(appIcon.name)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -60,7 +68,7 @@ $taskBarHeight: 40px;
     height: calc(100% - #{$taskBarHeight});
   }
 
-  .desktop-container {
+  .desktop-icons-container {
     @apply w-full h-full flex-1 grid grid-auto-flow-col pos-relative;
   }
 

src/core/process/IProcess.ts

@@ -1,6 +1,5 @@
-import type { ProcessInfoImpl } from '@/core/process/impl/ProcessInfoImpl.ts'
-import type WindowForm from '@/core/window/WindowForm.ts'
 import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
+import type { IWindowForm } from '@/core/window/IWindowForm.ts'
 
 /**
  * 进程接口
@@ -11,7 +10,7 @@ export interface IProcess {
   /** 进程信息 */
   get processInfo(): IProcessInfo;
   /** 进程的窗体列表 */
-  get windowForms(): Map<string, WindowForm>;
+  get windowForms(): Map<string, IWindowForm>;
   /**
    * 打开窗体
    * @param startName 窗体启动名

src/core/process/impl/ProcessImpl.ts

@@ -1,8 +1,9 @@
 import { v4 as uuidV4 } from 'uuid';
 import XSystem from '../../XSystem.ts'
-import WindowForm from '../../window/WindowForm.ts'
+import WindowFormImpl from '../../window/impl/WindowFormImpl.ts'
 import type { IProcess } from '@/core/process/IProcess.ts'
 import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
+import type { IWindowForm } from '@/core/window/IWindowForm.ts'
 
 /**
  * 进程
@@ -11,7 +12,7 @@ export default class ProcessImpl implements IProcess {
   private readonly _id: string = uuidV4();
   private readonly _processInfo: IProcessInfo;
   // 当前进程的窗体集合
-  private _windowForms: Map<string, WindowForm> = new Map();
+  private _windowForms: Map<string, IWindowForm> = new Map();
 
   public get id() {
     return this._id;
@@ -37,7 +38,9 @@ export default class ProcessImpl implements IProcess {
   }
 
   public openWindowForm(startName: string) {
-    const window = new WindowForm(this, startName);
+    const info = this._processInfo.windowFormConfigs.find(item => item.name === startName);
+    if (!info) throw new Error(`未找到窗体：${startName}`);
+    const window = new WindowFormImpl(this, info);
     this._windowForms.set(window.id, window);
   }
 }

src/core/state/impl/ObservableWeakRefImpl.ts

@@ -74,7 +74,7 @@ import type {
  * // 9️⃣ 销毁 ObservableImpl
  * obs.dispose()
  */
-export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObservable<T> {
+export class ObservableWeakRefImpl<T extends TNonFunctionProperties<T>> implements IObservable<T> {
   /** ObservableImpl 的状态对象，深层 Proxy */
   public readonly state: TObservableState<T>
 

src/core/system/BasicSystemProcess.ts

@@ -5,7 +5,7 @@ import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
 /**
  * 基础系统进程
  */
-export class BasicSystemProcess extends ProcessImpl{
+export class BasicSystemProcess extends ProcessImpl {
   private _isMounted: boolean = false;
 
   public get isMounted() {

src/core/window/IWindowForm.ts

@@ -0,0 +1,6 @@
+import type { IProcess } from '@/core/process/IProcess.ts'
+
+export interface IWindowForm {
+  get id(): string;
+  get proc(): IProcess | undefined;
+}

src/core/window/WindowForm.ts

@@ -1,22 +0,0 @@
-import { v4 as uuidV4 } from 'uuid';
-import type ProcessImpl from '../process/impl/ProcessImpl.ts'
-import XSystem from '../XSystem.ts'
-import type { ProcessInfoImpl } from '../process/impl/ProcessInfoImpl.ts'
-
-export default class WindowForm {
-  private readonly _id: string = uuidV4();
-  private readonly _procId: string;
-
-  public get id() {
-    return this._id;
-  }
-  public get proc() {
-    return XSystem.instance.processManage.findProcessById(this._procId)
-  }
-
-  constructor(proc: ProcessImpl, startName: string) {
-    this._procId = proc.id;
-    console.log('WindowForm')
-  }
-
-}

src/core/window/impl/WindowFormImpl.ts

@@ -0,0 +1,51 @@
+import { v4 as uuidV4 } from 'uuid';
+import XSystem from '../../XSystem.ts'
+import type { IProcess } from '@/core/process/IProcess.ts'
+import type { IWindowForm } from '@/core/window/IWindowForm.ts'
+import type { IWindowFormConfig } from '@/core/window/types/IWindowFormConfig.ts'
+import type { WindowFormPos } from '@/core/window/types/WindowFormTypes.ts'
+
+export default class WindowFormImpl implements IWindowForm {
+  private readonly _id: string = uuidV4();
+  private readonly _procId: string;
+  private pos: WindowFormPos = { x: 0, y: 0 };
+  private width: number = 0;
+  private height: number = 0;
+
+  public get id() {
+    return this._id;
+  }
+  public get proc() {
+    return XSystem.instance.processManage.findProcessById(this._procId)
+  }
+  private get desktopRootDom() {
+    return XSystem.instance.desktopRootDom;
+  }
+
+  constructor(proc: IProcess, config: IWindowFormConfig) {
+    this._procId = proc.id;
+    console.log('WindowForm')
+    this.pos = {
+      x: config.left ?? 0,
+      y: config.top ?? 0
+    }
+    this.width = config.width ?? 0;
+    this.height = config.height ?? 0;
+
+    this.createWindowFrom();
+  }
+
+  public createWindowFrom() {
+    const dom = document.createElement('div');
+    dom.style.position = 'absolute';
+    dom.style.left = `${this.pos.x}px`;
+    dom.style.top = `${this.pos.y}px`;
+    dom.style.width = `${this.width}px`;
+    dom.style.height = `${this.height}px`;
+    dom.style.zIndex = '100';
+    dom.style.backgroundColor = 'white';
+
+    this.desktopRootDom.appendChild(dom);
+  }
+
+}

src/core/window/types/IWindowFormConfig.ts

@@ -1,5 +1,5 @@
 /**
- * 窗体配置
+ * 窗体配置信息
  */
 export interface IWindowFormConfig {
   /**

src/core/window/types/WindowFormTypes.ts

@@ -0,0 +1,7 @@
+/**
+ * 窗体位置坐标 - 左上角
+ */
+export interface WindowFormPos {
+  x: number;
+  y: number;
+}

tsconfig.app.json

@@ -12,6 +12,7 @@
     "target": "es2021",
     "lib": ["es2021", "dom"],
     "module": "ESNext",
+    "strict": true, // 严格模式检查
     "strictPropertyInitialization": false, // 严格属性初始化检查
     "noUnusedLocals": false,      // 检查未使用的局部变量
     "noUnusedParameters": false,  // 检查未使用的参数