保存一下

src/core/window/impl/WindowFormImpl.ts

@@ -5,12 +5,13 @@ 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'
 import { processManager } from '@/core/process/ProcessManager.ts'
-import { DraggableResizable } from '@/core/utils/DraggableResizable.ts'
 import { DraggableResizableWindow } from '@/core/utils/DraggableResizableWindow.ts'
 
 export default class WindowFormImpl implements IWindowForm {
   private readonly _id: string = uuidV4();
   private readonly _procId: string;
+  private dom: HTMLElement;
+  private drw: DraggableResizableWindow;
   private pos: WindowFormPos = { x: 0, y: 0 };
   private width: number = 0;
   private height: number = 0;
@@ -38,63 +39,65 @@ export default class WindowFormImpl implements IWindowForm {
     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';
-    const div = document.createElement('div');
-    div.style.width = '100%';
-    div.style.height = '20px';
-    div.style.backgroundColor = 'red';
-    dom.appendChild(div)
+  private createWindowFrom() {
+    this.dom = document.createElement('div');
+    this.dom.style.position = 'absolute';
+    this.dom.style.width = `${this.width}px`;
+    this.dom.style.height = `${this.height}px`;
+    this.dom.style.zIndex = '100';
+    this.dom.style.backgroundColor = 'white';
+    this.dom.classList.add('flex', 'flex-col', 'rd-[4px]')
+    const header = document.createElement('div');
+    header.style.width = '100%';
+    header.style.height = '20px';
+    header.style.backgroundColor = 'red';
+    this.dom.appendChild(header)
     const bt1 = document.createElement('button');
     bt1.innerText = '最小化';
     bt1.addEventListener('click', () => {
-      win.minimize();
+      this.drw.minimize();
       setTimeout(() => {
-        win.restore();
+        this.drw.restore();
       }, 2000)
     })
-    div.appendChild(bt1)
+    header.appendChild(bt1)
     const bt2 = document.createElement('button');
     bt2.innerText = '最大化';
     bt2.addEventListener('click', () => {
-      win.maximize();
+      this.drw.maximize();
     })
-    div.appendChild(bt2)
+    header.appendChild(bt2)
     const bt3 = document.createElement('button');
     bt3.innerText = '关闭';
     bt3.addEventListener('click', () => {
-      this.desktopRootDom.removeChild(dom)
-      win.destroy();
-      this.proc?.windowForms.delete(this.id);
-      processManager.removeProcess(this.proc!)
+      this.closeWindowForm();
     })
-    div.appendChild(bt3)
+    header.appendChild(bt3)
     const bt4 = document.createElement('button');
     bt4.innerText = '恢复';
     bt4.addEventListener('click', (e) => {
       e.preventDefault();
       e.stopPropagation()
-      win.restore();
+      this.drw.restore();
     })
-    div.appendChild(bt4)
+    header.appendChild(bt4)
 
 
-    const win = new DraggableResizableWindow({
-      target: dom,
-      handle: div,
+    this.drw = new DraggableResizableWindow({
+      target: this.dom,
+      handle: header,
       snapAnimation: true,
       snapThreshold: 20,
       boundary: document.body,
       taskbarElementId: '#taskbar',
     })
 
-    this.desktopRootDom.appendChild(dom);
+    this.desktopRootDom.appendChild(this.dom);
+  }
+
+  private closeWindowForm() {
+    this.drw.destroy();
+    this.desktopRootDom.removeChild(this.dom);
+    this.proc?.event.notifyEvent('onProcessWindowFormExit', this.id)
   }
 }