Initial commit

优化
2025-10-21 11:10:09 +08:00 · 2025-10-21 11:09:40 +08:00 · 2025-09-22 13:23:12 +08:00 · 2025-09-19 11:49:04 +08:00 · 2025-09-19 10:35:46 +08:00 · 2025-09-19 09:57:14 +08:00
22 changed files with 380 additions and 428 deletions
--- a/README.md
+++ b/README.md
@@ -1,37 +1,2 @@
 # vue-desktop

-浏览器：Chrome 84+、Edge 84+、Firefox 79+、Safari 14+
-
-Node.js：v14+
-
-不支持IE
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-pnpm dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-pnpm build
-```
--- a/src/core/XSystem.ts
+++ b/src/core/XSystem.ts
@@ -1,27 +1,14 @@
-import ProcessImpl from './process/impl/ProcessImpl.ts'
-import { isUndefined } from 'lodash'
 import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
 import { DesktopProcess } from '@/core/desktop/DesktopProcess.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'
 import { NotificationService } from '@/core/service/services/NotificationService.ts'
 import { SettingsService } from '@/core/service/services/SettingsService.ts'
 import { WindowFormService } from '@/core/service/services/WindowFormService.ts'
 import { UserService } from '@/core/service/services/UserService.ts'
 import { processManager } from '@/core/process/ProcessManager.ts'

-interface IGlobalState {
-  isLogin: boolean
-}
-
 export default class XSystem {
  private static _instance: XSystem = new XSystem()

-  private _globalState: IObservable<IGlobalState> = new ObservableWeakRefImpl<IGlobalState>({
-    isLogin: false
-  })
  private _desktopRootDom: HTMLElement;

  constructor() {
@@ -35,44 +22,13 @@ export default class XSystem {
  public static get instance() {
    return this._instance
  }
-  public get globalState() {
-    return this._globalState
-  }
  public get desktopRootDom() {
    return this._desktopRootDom
  }

-  public initialization(dom: HTMLDivElement) {
+  public async 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'))
-      })
-    })
-  }
-
-  // 运行进程
-  public async run<T extends IProcess = IProcess>(
-    proc: string | IProcessInfo,
-    constructor?: new (info: IProcessInfo) => T,
-  ): Promise<T> {
-    let info = typeof proc === 'string' ? processManager.findProcessInfoByName(proc)! : proc
-    if (isUndefined(info)) {
-      throw new Error(`未找到进程信息：${proc}`)
-    }
-
-    // 是单例应用
-    if (info.singleton) {
-      let process = processManager.findProcessByName(info.name)
-      if (process) {
-        return process as T
-      }
-    }
-
-    // 创建进程
-    let process = isUndefined(constructor) ? new ProcessImpl(info) : new constructor(info)
-
-    return process as T
+    await processManager.runProcess('basic-system', BasicSystemProcess)
+    await processManager.runProcess('desktop', DesktopProcess, dom)
  }
 }
--- a/src/core/common/types/IDestroyable.ts
+++ b/src/core/common/types/IDestroyable.ts
@@ -0,0 +1,8 @@
+/**
+ * 可销毁接口
+ * 销毁实例,清理副作用,让内存可以被回收
+ */
+export interface IDestroyable {
+  /** 销毁实例,清理副作用,让内存可以被回收 */
+  destroy(): void
+}
--- a/src/core/desktop/DesktopProcess.ts
+++ b/src/core/desktop/DesktopProcess.ts
@@ -5,92 +5,78 @@ import DesktopComponent from '@/core/desktop/ui/DesktopComponent.vue'
 import { naiveUi } from '@/core/common/naive-ui/components.ts'
 import { debounce } from 'lodash'
 import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
-import { eventManager } from '@/core/events/EventManager.ts'
 import { processManager } from '@/core/process/ProcessManager.ts'
+import './ui/DesktopElement.ts'
+import { ObservableImpl } from '@/core/state/impl/ObservableImpl.ts'
+
+interface IDesktopDataState {
+  /** 显示器宽度 */
+  monitorWidth: number;
+  /** 显示器高度 */
+  monitorHeight: number;
+}

 export class DesktopProcess extends ProcessImpl {
-  private _desktopRootDom: HTMLElement;
-  private _isMounted: boolean = false;
-  private _width: number = 0;
-  private _height: number = 0;
-  private _pendingResize: boolean = false;
+  /** 桌面根dom，类似显示器 */
+  private readonly _monitorDom: HTMLElement
+  private _isMounted: boolean = false
+  private _data = new ObservableImpl<IDesktopDataState>({
+    monitorWidth: 0,
+    monitorHeight: 0,
+  })

-  public get desktopRootDom() {
-    return this._desktopRootDom;
+  public get monitorDom() {
+    return this._monitorDom
  }
  public get isMounted() {
-    return this._isMounted;
+    return this._isMounted
  }
  public get basicSystemProcess() {
    return processManager.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()
+  get data() {
+    return this._data
  }

-  private scheduleResizeEvent() {
-    if (this._pendingResize) return;
-
-    this._pendingResize = true;
-
-    Promise.resolve().then(() => {
-      if (this._pendingResize) {
-        this._pendingResize = false;
-        console.log('onDesktopRootDomResize')
-        eventManager.notifyEvent('onDesktopRootDomResize', this._width, this._height);
-      }
-    });
-  }
-
-  constructor(info: IProcessInfo) {
+  constructor(info: IProcessInfo, dom: HTMLDivElement) {
    super(info)
    console.log('DesktopProcess')
-  }
-
-  public mount(dom: HTMLDivElement) {
-    console.log('DesktopProcess: start mount')
-    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`
    dom.style.position = 'relative'
    dom.style.overflow = 'hidden'
-    this._desktopRootDom = dom
+    dom.style.width = `${window.innerWidth}px`
+    dom.style.height = `${window.innerHeight}px`

+    this._monitorDom = dom
+    this._data.state.monitorWidth = window.innerWidth
+    this._data.state.monitorHeight = window.innerHeight
+    window.addEventListener('resize', this.onResize)
+
+    this.createDesktopUI()
+  }
+
+  private onResize = debounce(() => {
+    this._monitorDom.style.width = `${window.innerWidth}px`
+    this._monitorDom.style.height = `${window.innerHeight}px`
+    this._data.state.monitorWidth = window.innerWidth
+    this._data.state.monitorHeight = window.innerHeight
+  }, 300)
+
+  private createDesktopUI() {
+    if (this._isMounted) return
    const app = createApp(DesktopComponent, { process: this })
    app.use(naiveUi)
-    app.mount(dom)
-
+    app.mount(this._monitorDom)
    this._isMounted = true
  }
+
+  private initDesktop(dom: HTMLDivElement) {
+    const d = document.createElement('desktop-element')
+    dom.appendChild(d)
+  }
+
+  override destroy() {
+    super.destroy()
+    window.removeEventListener('resize', this.onResize)
+  }
 }
--- a/src/core/desktop/ui/DesktopComponent.vue
+++ b/src/core/desktop/ui/DesktopComponent.vue
@@ -5,16 +5,20 @@
  >
    <div class="desktop-root" @contextmenu="onContextMenu">
      <div class="desktop-bg">
-        <div class="desktop-icons-container"
-             :style="gridStyle">
-          <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
-                   :iconInfo="appIcon" :gridTemplate="gridTemplate"
-                   @dblclick="runApp(appIcon)"
+        <div class="desktop-icons-container" :style="gridStyle">
+          <AppIcon
+            v-for="(appIcon, i) in appIconsRef"
+            :key="i"
+            :iconInfo="appIcon"
+            :gridTemplate="gridTemplate"
+            @dblclick="runApp(appIcon)"
          />
        </div>
      </div>
      <div class="task-bar">
-        <div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">测试</div>
+        <div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">
+          测试
+        </div>
      </div>
    </div>
  </n-config-provider>
@@ -22,35 +26,46 @@

 <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 { useDesktopInit } from '@/core/desktop/ui/hooks/useDesktopInit.ts'
 import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
 import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
 import { eventManager } from '@/core/events/EventManager.ts'
+import { processManager } from '@/core/process/ProcessManager.ts'

 const props = defineProps<{ process: DesktopProcess }>()

+props.process.data.subscribeKey(['monitorWidth', 'monitorHeight'], ({monitorWidth, monitorHeight}) => {
+  console.log('onDesktopRootDomResize', monitorWidth, monitorHeight)
+  notificationApi.create({
+    title: '桌面通知',
+    content: `桌面尺寸变化${monitorWidth}x${monitorHeight}}`,
+    duration: 2000,
+  })
+})
+
+// props.process.data.subscribe((data) => {
+//   console.log('desktopData', data.monitorWidth)
+// })
+
 const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-icons-container')

-eventManager.addEventListener('onDesktopRootDomResize',
-  (width, height) => {
-    console.log(width, height)
-    notificationApi.create({
-      title: '桌面通知',
-      content: `桌面尺寸变化${width}x${height}}`,
-      duration: 2000,
-    })
-  },
-)
+// eventManager.addEventListener('onDesktopRootDomResize', (width, height) => {
+//   console.log(width, height)
+//   notificationApi.create({
+//     title: '桌面通知',
+//     content: `桌面尺寸变化${width}x${height}}`,
+//     duration: 2000,
+//   })
+// })

 const onContextMenu = (e: MouseEvent) => {
  e.preventDefault()
 }

 const runApp = (appIcon: IDesktopAppIcon) => {
-  XSystem.instance.run(appIcon.name)
+  processManager.runProcess(appIcon.name)
 }
 </script>

@@ -61,7 +76,7 @@ $taskBarHeight: 40px;

  .desktop-bg {
    @apply w-full h-full flex-1 p-2 pos-relative;
-    background-image: url("imgs/desktop-bg-2.jpeg");
+    background-image: url('imgs/desktop-bg-2.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100% - #{$taskBarHeight});
--- a/src/core/desktop/ui/DesktopElement.ts
+++ b/src/core/desktop/ui/DesktopElement.ts
@@ -0,0 +1,35 @@
+import { css, html, LitElement, unsafeCSS } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import desktopStyle from './css/desktop.scss?inline'
+
+@customElement('desktop-element')
+export class DesktopElement extends LitElement {
+  static override styles = css`
+    ${unsafeCSS(desktopStyle)}
+  `
+
+  private onContextMenu = (e: MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    console.log('contextmenu')
+  }
+
+  override render() {
+    return html`
+      <div class="desktop-root" @contextmenu=${this.onContextMenu}>
+        <div class="desktop-container">
+          <div class="desktop-icons-container"
+               :style="gridStyle">
+            <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
+                     :iconInfo="appIcon" :gridTemplate="gridTemplate"
+                     @dblclick="runApp(appIcon)"
+            />
+          </div>
+        </div>
+        <div class="task-bar">
+          <div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">测试</div>
+        </div>
+      </div>
+    `
+  }
+}
--- a/src/core/desktop/ui/components/DesktopAppIconElement.ts
+++ b/src/core/desktop/ui/components/DesktopAppIconElement.ts
@@ -0,0 +1,17 @@
+import { css, html, LitElement } from 'lit'
+
+export class DesktopAppIconElement extends LitElement {
+  static override styles = css`
+    :host {
+      width: 100%;
+      height: 100%;
+      @apply flex flex-col items-center justify-center bg-gray-200;
+    }
+  `
+
+  override render() {
+    return html`<div class="desktop-app-icon">
+      <slot></slot>
+    </div>`
+  }
+}
--- a/src/core/desktop/ui/css/desktop.scss
+++ b/src/core/desktop/ui/css/desktop.scss
@@ -0,0 +1,31 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box; /* 使用更直观的盒模型 */
+  margin: 0;
+  padding: 0;
+}
+
+$taskBarHeight: 40px;
+
+.desktop-root {
+  @apply w-full h-full flex flex-col;
+
+  .desktop-container {
+    @apply w-full h-full flex-1 p-2 pos-relative;
+    background-image: url("../imgs/desktop-bg-2.jpeg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: calc(100% - #{$taskBarHeight});
+  }
+
+  .desktop-icons-container {
+    @apply w-full h-full flex-1 grid grid-auto-flow-col pos-relative;
+  }
+
+  .task-bar {
+    @apply w-full bg-gray-200 flex justify-center items-center;
+    height: $taskBarHeight;
+    flex-shrink: 0;
+  }
+}
--- a/src/core/events/IEventBuilder.ts
+++ b/src/core/events/IEventBuilder.ts
@@ -1,3 +1,5 @@
+import type { IDestroyable } from '@/core/common/types/IDestroyable.ts'
+
 /**
 * 事件定义
 * @interface IEventMap 事件定义 键是事件名称，值是事件处理函数
@@ -9,7 +11,7 @@ export interface IEventMap {
 /**
 * 事件管理器接口定义
 */
-export interface IEventBuilder<Events extends IEventMap> {
+export interface IEventBuilder<Events extends IEventMap> extends IDestroyable {
  /**
   * 添加事件监听
   * @param eventName 事件名称
--- a/src/core/events/WindowFormEventManager.ts
+++ b/src/core/events/WindowFormEventManager.ts
@@ -36,6 +36,10 @@ export interface WindowFormEvent extends IEventMap {
   * @param data 窗口数据
   */
  windowFormDataUpdate: (data: IWindowFormDataUpdateParams) => void;
+  /**
+   * 窗口创建完成
+   */
+  windowFormCreated: () => void;
 }

 interface IWindowFormDataUpdateParams {
--- a/src/core/events/impl/EventBuilderImpl.ts
+++ b/src/core/events/impl/EventBuilderImpl.ts
@@ -5,9 +5,7 @@ interface HandlerWrapper<T extends (...args: any[]) => any> {
  once: boolean
 }

-export class EventBuilderImpl<Events extends IEventMap>
-  implements IEventBuilder<Events>
-{
+export class EventBuilderImpl<Events extends IEventMap> implements IEventBuilder<Events> {
  private _eventHandlers = new Map<keyof Events, Set<HandlerWrapper<Events[keyof Events]>>>()

  /**
@@ -24,9 +22,9 @@ export class EventBuilderImpl<Events extends IEventMap>
    eventName: E,
    handler: F,
    options?: {
-      immediate?: boolean;
-      immediateArgs?: Parameters<F>;
-      once?: boolean;
+      immediate?: boolean
+      immediateArgs?: Parameters<F>
+      once?: boolean
    },
  ) {
    if (!handler) return
@@ -91,4 +89,8 @@ export class EventBuilderImpl<Events extends IEventMap>
      }
    }
  }
+
+  destroy() {
+    this._eventHandlers.clear()
+  }
 }
--- a/src/core/process/IProcess.ts
+++ b/src/core/process/IProcess.ts
@@ -2,11 +2,12 @@ import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
 import type { IWindowForm } from '@/core/window/IWindowForm.ts'
 import type { IEventBuilder } from '@/core/events/IEventBuilder.ts'
 import type { IProcessEvent } from '@/core/process/types/ProcessEventTypes.ts'
+import type { IDestroyable } from '@/core/common/types/IDestroyable.ts'

 /**
 * 进程接口
 */
-export interface IProcess {
+export interface IProcess extends IDestroyable {
  /** 进程id */
  get id(): string;
  /** 进程信息 */
--- a/src/core/process/impl/ProcessImpl.ts
+++ b/src/core/process/impl/ProcessImpl.ts
@@ -66,12 +66,18 @@ export default class ProcessImpl implements IProcess {
    try {
      const wf = this._windowForms.get(id);
      if (!wf) throw new Error(`未找到窗体：${id}`);
+      wf.destroy();
      this.windowForms.delete(id)
      if(this.windowForms.size === 0) {
+        this.destroy()
        processManager.removeProcess(this)
      }
    } catch (e) {
      console.log('关闭窗体失败', e)
    }
  }
+
+  public destroy() {
+    this._event.destroy()
+  }
 }
--- a/src/core/process/impl/ProcessManagerImpl.ts
+++ b/src/core/process/impl/ProcessManagerImpl.ts
@@ -1,4 +1,4 @@
-import type ProcessImpl from './ProcessImpl.ts'
+import ProcessImpl from './ProcessImpl.ts'
 import { ProcessInfoImpl } from '@/core/process/impl/ProcessInfoImpl.ts'
 import { BasicSystemProcessInfo } from '@/core/system/BasicSystemProcessInfo.ts'
 import { DesktopProcessInfo } from '@/core/desktop/DesktopProcessInfo.ts'
@@ -6,6 +6,8 @@ import type { IAppProcessInfoParams } from '@/core/process/types/IAppProcessInfo
 import type { IProcessManager } from '@/core/process/IProcessManager.ts'
 import type { IProcess } from '@/core/process/IProcess.ts'
 import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
+import { processManager } from '@/core/process/ProcessManager.ts'
+import { isUndefined } from 'lodash'

 /**
 * 进程管理
@@ -35,6 +37,30 @@ export default class ProcessManagerImpl implements IProcessManager {
    this._processInfos.push(...internalProcessInfos)
  }

+  public async runProcess<T extends IProcess = IProcess, A extends any[] = any[]>(
+    proc: string | IProcessInfo,
+    constructor?: new (info: IProcessInfo, ...args: A) => T,
+    ...args: A
+  ): Promise<T> {
+    let info = typeof proc === 'string' ? this.findProcessInfoByName(proc) : proc
+    if (isUndefined(info)) {
+      throw new Error(`未找到进程信息：${proc}`)
+    }
+
+    // 是单例应用
+    if (info.singleton) {
+      let process = this.findProcessByName(info.name)
+      if (process) {
+        return process as T
+      }
+    }
+
+    // 创建进程
+    let process = isUndefined(constructor) ? new ProcessImpl(info) : new constructor(info, ...args)
+
+    return process as T
+  }
+
  // 添加进程
  public registerProcess(process: ProcessImpl) {
    this._processPool.set(process.id, process);
--- a/src/core/state/impl/ObservableImpl.ts
+++ b/src/core/state/impl/ObservableImpl.ts
@@ -81,8 +81,13 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
  /** 全量订阅函数集合 */
  private listeners: Set<TObservableListener<T>> = new Set()

-  /** 字段订阅函数集合 */
-  private keyListeners: Map<keyof T, Set<TObservableKeyListener<T, keyof T>>> = new Map()
+  /**
+   * 字段订阅函数集合
+   * 新结构：
+   * Map<TObservableKeyListener, Array<keyof T>>
+   * 记录每个回调订阅的字段数组，保证多字段订阅 always 返回所有订阅字段值
+   */
+  private keyListeners: Map<TObservableKeyListener<T, keyof T>, Array<keyof T>> = new Map()

  /** 待通知的字段集合 */
  private pendingKeys: Set<keyof T> = new Set()
@@ -161,7 +166,7 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs

  /** 安排下一次通知（微任务合并） */
  private scheduleNotify(): void {
-    if (!this.notifyScheduled && !this.disposed) {
+    if (!this.notifyScheduled && !this.disposed && this.pendingKeys.size > 0) {
      this.notifyScheduled = true
      Promise.resolve().then(() => this.flushNotify())
    }
@@ -171,7 +176,6 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
  private flushNotify(): void {
    if (this.disposed) return

-    const keys = Array.from(this.pendingKeys)
    this.pendingKeys.clear()
    this.notifyScheduled = false

@@ -180,30 +184,13 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
      try {
        fn(this.state as unknown as T)
      } catch (err) {
-        // 可以根据需要把错误上报或自定义处理
-        // 这里简单打印以便调试
-        // eslint-disable-next-line no-console
        console.error("Observable listener error:", err)
      }
    }

-    // 字段订阅：把同一个回调的多个 key 聚合到一次调用里
-    const fnMap: Map<TObservableKeyListener<T, keyof T>, Array<keyof T>> = new Map()
-    for (const key of keys) {
-      const set = this.keyListeners.get(key)
-      if (!set) continue
-      for (const fn of set) {
-        const existing = fnMap.get(fn)
-        if (existing === undefined) {
-          fnMap.set(fn, [key])
-        } else {
-          existing.push(key)
-        }
-      }
-    }
-
-    // 调用每个字段订阅回调
-    fnMap.forEach((subKeys, fn) => {
+    // ================== 字段订阅 ==================
+    // 遍历所有回调，每个回调都返回它订阅的字段（即使只有部分字段变化）
+    this.keyListeners.forEach((subKeys, fn) => {
      try {
        // 构造 Pick<T, K> 风格的结果对象：结果类型为 Pick<T, (typeof subKeys)[number]>
        const result = {} as Pick<T, (typeof subKeys)[number]>
@@ -214,7 +201,6 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
        // 调用时类型上兼容 TObservableKeyListener<T, K>，因为我们传的是对应 key 的 Pick
        fn(result as Pick<T, (typeof subKeys)[number]>)
      } catch (err) {
-        // eslint-disable-next-line no-console
        console.error("Observable keyListener error:", err)
      }
    })
@@ -227,7 +213,6 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
      try {
        fn(this.state as unknown as T)
      } catch (err) {
-        // eslint-disable-next-line no-console
        console.error("Observable subscribe immediate error:", err)
      }
    }
@@ -236,19 +221,18 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
    }
  }

-  /** 订阅指定字段变化 */
+  /** 订阅指定字段变化（多字段订阅 always 返回所有字段值） */
  public subscribeKey<K extends keyof T>(
    keys: K | K[],
    fn: TObservableKeyListener<T, K>,
    options: { immediate?: boolean } = {}
  ): () => void {
    const keyArray = Array.isArray(keys) ? keys : [keys]
-    for (const key of keyArray) {
-      if (!this.keyListeners.has(key)) this.keyListeners.set(key, new Set())
-      // 存储为 Set<TObservableKeyListener<T, keyof T>>
-      this.keyListeners.get(key)!.add(fn as TObservableKeyListener<T, keyof T>)
-    }

+    // ================== 存储回调和它订阅的字段数组 ==================
+    this.keyListeners.set(fn as TObservableKeyListener<T, keyof T>, keyArray as (keyof T)[])
+
+    // ================== 立即调用 ==================
    if (options.immediate) {
      const result = {} as Pick<T, K>
      keyArray.forEach(k => {
@@ -257,30 +241,26 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
      try {
        fn(result)
      } catch (err) {
-        // eslint-disable-next-line no-console
        console.error("Observable subscribeKey immediate error:", err)
      }
    }

+    // ================== 返回取消订阅函数 ==================
    return () => {
-      for (const key of keyArray) {
-        this.keyListeners.get(key)?.delete(fn as TObservableKeyListener<T, keyof T>)
-      }
+      this.keyListeners.delete(fn as TObservableKeyListener<T, keyof T>)
    }
  }

  /** 批量更新状态（避免重复 schedule） */
  public patch(values: Partial<T>): void {
    let changed = false
-    // 用 for..in 保持和对象字面量兼容（跳过原型链）
    for (const key in values) {
      if (Object.prototype.hasOwnProperty.call(values, key)) {
        const typedKey = key as keyof T
        const oldValue = (this.state as Record<keyof T, unknown>)[typedKey]
        const newValue = values[typedKey] as unknown
        if (oldValue !== newValue) {
-          // 直接写入 state，会被 Proxy 的 set 捕获并安排通知
-          ;(this.state as Record<keyof T, unknown>)[typedKey] = newValue
+          (this.state as Record<keyof T, unknown>)[typedKey] = newValue
          changed = true
        }
      }
@@ -322,3 +302,4 @@ export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObs
  }
 }

+
--- a/src/core/state/store/GlobalStore.ts
+++ b/src/core/state/store/GlobalStore.ts
@@ -0,0 +1,14 @@
+import { ObservableImpl } from '@/core/state/impl/ObservableImpl.ts'
+
+interface IGlobalStoreParams {
+  /** 桌面根dom ID，类似显示器 */
+  monitorDomId: string;
+  monitorWidth: number;
+  monitorHeight: number;
+}
+
+export const globalStore = new ObservableImpl<IGlobalStoreParams>({
+  monitorDomId: '#app',
+  monitorWidth: 0,
+  monitorHeight: 0
+})
--- a/src/core/utils/DraggableResizableWindow.ts
+++ b/src/core/utils/DraggableResizableWindow.ts
@@ -734,17 +734,19 @@ export class DraggableResizableWindow {
   * 销毁实例
   */
  public destroy() {
-    if (this.handle) this.handle.removeEventListener('mousedown', this.onMouseDownDrag);
-    this.target.removeEventListener('mousedown', this.onMouseDownResize);
-    document.removeEventListener('mousemove', this.onMouseMoveDragRAF);
-    document.removeEventListener('mouseup', this.onMouseUpDrag);
-    document.removeEventListener('mousemove', this.onResizeDragRAF);
-    document.removeEventListener('mouseup', this.onResizeEndHandler);
-    document.removeEventListener('mousemove', this.onDocumentMouseMoveCursor);
-    document.removeEventListener('mousemove', this.checkDragStart);
-    document.removeEventListener('mouseup', this.cancelPendingDrag);
-    this.resizeObserver?.disconnect();
-    this.mutationObserver.disconnect();
-    cancelAnimationFrame(this.animationFrame ?? 0);
+    try {
+      if (this.handle) this.handle.removeEventListener('mousedown', this.onMouseDownDrag);
+      this.target.removeEventListener('mousedown', this.onMouseDownResize);
+      document.removeEventListener('mousemove', this.onMouseMoveDragRAF);
+      document.removeEventListener('mouseup', this.onMouseUpDrag);
+      document.removeEventListener('mousemove', this.onResizeDragRAF);
+      document.removeEventListener('mouseup', this.onResizeEndHandler);
+      document.removeEventListener('mousemove', this.onDocumentMouseMoveCursor);
+      document.removeEventListener('mousemove', this.checkDragStart);
+      document.removeEventListener('mouseup', this.cancelPendingDrag);
+      this.resizeObserver?.disconnect();
+      this.mutationObserver.disconnect();
+      cancelAnimationFrame(this.animationFrame ?? 0);
+    } catch (e) {}
  }
 }
--- a/src/core/window/IWindowForm.ts
+++ b/src/core/window/IWindowForm.ts
@@ -1,7 +1,8 @@
 import type { IProcess } from '@/core/process/IProcess.ts'
 import type { TWindowFormState } from '@/core/window/types/WindowFormTypes.ts'
+import type { IDestroyable } from '@/core/common/types/IDestroyable.ts'

-export interface IWindowForm {
+export interface IWindowForm extends IDestroyable {
  /** 窗体id */
  get id(): string;
  /** 窗体所属的进程 */
--- a/src/core/window/css/window-form.scss
+++ b/src/core/window/css/window-form.scss
@@ -1,63 +0,0 @@
-$titleBarHeight: 40px;
-
-/* 窗体容器 */
-.window {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #666;
-  box-shadow: 0 0 10px rgba(0,0,0,0.5);
-  background-color: #ffffff;
-  overflow: hidden;
-  border-radius: 5px;
-}
-
-/* 标题栏 */
-.title-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  user-select: none;
-  width: 100%;
-  height: $titleBarHeight;
-
-  .title {
-    display: block;
-    padding: 0 5px;
-    flex-grow: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 18px;
-    line-height: $titleBarHeight;
-  }
-
-  .window-controls {
-    display: flex;
-    gap: 2px;
-    flex-shrink: 0;
-
-    .btn {
-      width: 40px;
-      height: 40px;
-      padding: 0;
-      cursor: pointer;
-      font-size: 24px;
-      color: black;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background-color 0.3s ease;
-
-      &:hover {
-        @apply bg-gray-200;
-      }
-    }
-  }
-}
-
-/* 窗体内容 */
-.window-content {
-  width: 100%;
-  height: calc(100% - #{$titleBarHeight});
-  background-color: #e0e0e0;
-}
--- a/src/core/window/impl/WindowFormImpl.ts
+++ b/src/core/window/impl/WindowFormImpl.ts
@@ -4,10 +4,7 @@ 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 { TWindowFormState, WindowFormPos } from '@/core/window/types/WindowFormTypes.ts'
-import { processManager } from '@/core/process/ProcessManager.ts'
 import { DraggableResizableWindow } from '@/core/utils/DraggableResizableWindow.ts'
-import '../css/window-form.scss'
-import { serviceManager } from '@/core/service/kernel/ServiceManager.ts'
 import '../ui/WindowFormElement.ts'
 import { wfem } from '@/core/events/WindowFormEventManager.ts'
 import type { IObservable } from '@/core/state/IObservable.ts'
@@ -20,6 +17,8 @@ export interface IWindowFormDataState {
  procId: string;
  /** 进程名称唯一 */
  name: string;
+  /** 窗体标题 */
+  title: string;
  /** 窗体位置x (左上角) */
  x: number;
  /** 窗体位置y (左上角) */
@@ -36,10 +35,10 @@ export interface IWindowFormDataState {

 export default class WindowFormImpl implements IWindowForm {
  private readonly _id: string = uuidV4()
-  private readonly _proc: IProcess;
+  private readonly _proc: IProcess
+  private readonly _data: IObservable<IWindowFormDataState>
  private dom: HTMLElement
  private drw: DraggableResizableWindow
-  private _data: IObservable<IWindowFormDataState>;

  public get id() {
    return this._id
@@ -65,12 +64,13 @@ export default class WindowFormImpl implements IWindowForm {
      id: this.id,
      procId: proc.id,
      name: proc.processInfo.name,
+      title: config.title ?? '未命名',
      x: config.left ?? 0,
      y: config.top ?? 0,
      width: config.width ?? 200,
      height: config.height ?? 100,
      state: 'default',
-      closed: false
+      closed: false,
    })

    this.initEvent()
@@ -83,106 +83,32 @@ export default class WindowFormImpl implements IWindowForm {
      this.closeWindowForm()
      this._proc.closeWindowForm(this.id)
    })
-
-    // this._data.subscribeKey(['x', 'y'], (state) => {
-    //   console.log('x,y', state)
-    // })
  }

  private createWindowFrom() {
-    // this.dom = this.createWindowFormEle();
-    // this.dom.style.position = 'absolute';
-    // this.dom.style.width = `${this.width}px`;
-    // this.dom.style.height = `${this.height}px`;
-    // this.dom.style.zIndex = '10';
-    //
-    // const header = this.dom.querySelector('.title-bar') as HTMLElement;
-    // const content = this.dom.querySelector('.window-content') as HTMLElement;
-    // this.drw = new DraggableResizableWindow({
-    //   target: this.dom,
-    //   handle: header,
-    //   snapAnimation: true,
-    //   snapThreshold: 20,
-    //   boundaryElement: document.body,
-    //   taskbarElementId: '#taskbar',
-    //   onWindowStateChange: (state) => {
-    //     if (state === 'maximized') {
-    //       this.dom.style.borderRadius = '0px';
-    //     } else {
-    //       this.dom.style.borderRadius = '5px';
-    //     }
-    //   },
-    // })
-
-    // this.desktopRootDom.appendChild(this.dom);
    const wf = document.createElement('window-form-element')
    wf.wid = this.id
    wf.wfData = this._data
+    wf.title = this._data.state.title
    wf.dragContainer = document.body
    wf.snapDistance = 20
    wf.taskbarElementId = '#taskbar'
-    wf.addManagedEventListener('windowForm:stateChange:minimize', (e) => {
-      console.log('windowForm:stateChange:minimize', e)
-    })
-    wf.addManagedEventListener('windowForm:stateChange:maximize', (e) => {
-      console.log('windowForm:stateChange:maximize', e)
-    })
-    wf.addManagedEventListener('windowForm:stateChange:restore', (e) => {
-      console.log('windowForm:stateChange:restore', e)
-    })
-    wf.addManagedEventListener('windowForm:close', () => {
-      // this.closeWindowForm()
-    })
    this.dom = wf
    this.desktopRootDom.appendChild(this.dom)
-    wfem.notifyEvent('windowFormFocus', this.id)
+    Promise.resolve().then(() => {
+      wfem.notifyEvent('windowFormCreated')
+      wfem.notifyEvent('windowFormFocus', this.id)
+    })
  }

  private closeWindowForm() {
-    // this.drw.destroy();
    this.desktopRootDom.removeChild(this.dom)
    this._data.dispose()
-    // wfem.notifyEvent('windowFormClose', this.id)
  }

  public minimize() {}
  public maximize() {}
  public restore() {}

-  private createWindowFormEle() {
-    const template = document.createElement('template')
-    template.innerHTML = `
-      <div class="window">
-        <div class="title-bar">
-          <div class="title">我的窗口</div>
-          <div class="window-controls">
-            <div class="minimize btn" title="最小化"">-</div>
-            <div class="maximize btn" title="最大化">□</div>
-            <div class="close btn" title="关闭">×</div>
-          </div>
-        </div>
-       <div class="window-content"></div>
-      </div>
-    `
-    const fragment = template.content.cloneNode(true) as DocumentFragment
-    const windowElement = fragment.firstElementChild as HTMLElement
-
-    windowElement
-      .querySelector('.btn.minimize')
-      ?.addEventListener('click', () => this.drw.minimize())
-
-    windowElement.querySelector('.btn.maximize')?.addEventListener('click', () => {
-      if (this.drw.windowFormState === 'maximized') {
-        this.drw.restore()
-      } else {
-        this.drw.maximize()
-      }
-    })
-
-    windowElement
-      .querySelector('.btn.close')
-      ?.addEventListener('click', () => this.closeWindowForm())
-
-    return windowElement
-  }
+  public destroy() {}
 }
--- a/src/core/window/ui/WindowFormElement.ts
+++ b/src/core/window/ui/WindowFormElement.ts
@@ -1,6 +1,6 @@
 import { LitElement, html, css, unsafeCSS } from 'lit'
 import { customElement, property } from 'lit/decorators.js';
-import wfStyle from './wf.scss?inline'
+import wfStyle from './css/wf.scss?inline'
 import type { TWindowFormState } from '@/core/window/types/WindowFormTypes.ts'
 import { wfem } from '@/core/events/WindowFormEventManager.ts'
 import type { IObservable } from '@/core/state/IObservable.ts'
@@ -50,7 +50,7 @@ interface IElementRect {
  left: number;
 }

-export interface WindowFormEventMap {
+export interface WindowFormEventMap extends HTMLElementEventMap {
  'windowForm:dragStart': CustomEvent<TDragStartCallback>;
  'windowForm:dragMove': CustomEvent<TDragMoveCallback>;
  'windowForm:dragEnd': CustomEvent<TDragEndCallback>;
@@ -80,14 +80,14 @@ export class WindowFormElement extends LitElement {
  @property({ type: Number }) snapDistance = 0 // 吸附距离
  @property({ type: Boolean }) snapAnimation = true // 吸附动画
  @property({ type: Number }) snapAnimationDuration = 300 // 吸附动画时长 ms
-  @property({ type: Number }) maxWidth?: number
-  @property({ type: Number }) minWidth?: number
-  @property({ type: Number }) maxHeight?: number
-  @property({ type: Number }) minHeight?: number
+  @property({ type: Number }) maxWidth?: number = Infinity
+  @property({ type: Number }) minWidth?: number = 0
+  @property({ type: Number }) maxHeight?: number = Infinity
+  @property({ type: Number }) minHeight?: number = 0
  @property({ type: String }) taskbarElementId?: string
  @property({ type: Object }) wfData: IObservable<IWindowFormDataState>;

-  private _listeners: Array<{ type: string; handler: EventListener }> = []
+  private _listeners: Array<{ type: string; original: Function; wrapped: EventListener }> = []

  // ==== 拖拽/缩放状态（内部变量，不触发渲染） ====
  private dragging = false
@@ -141,22 +141,58 @@ export class WindowFormElement extends LitElement {
    return root
  }

+  public addManagedEventListener<K extends keyof WindowFormEventMap>(
+    type: K,
+    handler: (this: WindowFormElement, ev: WindowFormEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void
+  public addManagedEventListener<K extends keyof WindowFormEventMap>(
+    type: K,
+    handler: (ev: WindowFormEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void
  /**
   * 添加受管理的事件监听
   * @param type 事件类型
   * @param handler 事件处理函数
   */
-  public addManagedEventListener(type: string, handler: EventListener) {
-    this.addEventListener(type, handler)
-    this._listeners.push({ type, handler })
+  public addManagedEventListener<K extends keyof WindowFormEventMap>(
+    type: K,
+    handler:
+      | ((this: WindowFormElement, ev: WindowFormEventMap[K]) => any)
+      | ((ev: WindowFormEventMap[K]) => any),
+    options?: boolean | AddEventListenerOptions
+  ) {
+    const wrapped: EventListener = (ev: Event) => {
+      (handler as any).call(this, ev as WindowFormEventMap[K])
+    }
+
+    this.addEventListener(type, wrapped, options)
+    this._listeners.push({ type, original: handler, wrapped })
+  }
+
+  public removeManagedEventListener<K extends keyof WindowFormEventMap>(
+    type: K,
+    handler:
+      | ((this: WindowFormElement, ev: WindowFormEventMap[K]) => any)
+      | ((ev: WindowFormEventMap[K]) => any)
+  ) {
+    const index = this._listeners.findIndex(
+      l => l.type === type && l.original === handler
+    )
+    if (index !== -1) {
+      const { type: t, wrapped } = this._listeners[index]
+      this.removeEventListener(t, wrapped)
+      this._listeners.splice(index, 1)
+    }
  }

  /**
   * 移除所有受管理事件监听
   */
  public removeAllManagedListeners() {
-    for (const { type, handler } of this._listeners) {
-      this.removeEventListener(type, handler)
+    for (const { type, wrapped } of this._listeners) {
+      this.removeEventListener(type, wrapped)
    }
    this._listeners = []
  }
@@ -863,4 +899,6 @@ declare global {
  interface HTMLElementTagNameMap {
    'window-form-element': WindowFormElement;
  }
+
+  interface WindowFormElementEventMap extends WindowFormEventMap {}
 }
--- a/src/core/window/ui/css/wf.scss
+++ b/src/core/window/ui/css/wf.scss
@@ -1,3 +1,11 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box; /* 使用更直观的盒模型 */
+  margin: 0;
+  padding: 0;
+}
+
 :host {
  position: absolute;
  top: 0;
@@ -42,40 +50,44 @@
 }

 .titlebar {
-  height: var(--titlebar-height, 32px);
+  height: var(--titlebar-height);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
  background: linear-gradient(#f2f2f2, #e9e9e9);
  border-bottom: 1px solid rgba(0,0,0,0.06);
+
+  .title {
+    font-size: 13px;
+    font-weight: 600;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #111;
+  }
+
+  .controls {
+    display: flex; gap: 6px;
+
+    button.ctrl {
+      width: 34px;
+      height: 24px;
+      border: none;
+      background: transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 600;
+      font-size: 12px;
+
+      &:hover {
+        background: rgba(0,0,0,0.06);
+      }
+    }
+  }
 }

-.title {
-  font-size: 13px;
-  font-weight: 600;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #111;
-}
-
-.controls { display: flex; gap: 6px; }
-
-button.ctrl {
-  width: 34px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 12px;
-}
-
-button.ctrl:hover { background: rgba(0,0,0,0.06); }
-
 .content { flex: 1; overflow: auto; padding: 12px; background: transparent; }

 .resizer { position: absolute; z-index: 20; }
@@ -87,16 +99,3 @@ button.ctrl:hover { background: rgba(0,0,0,0.06); }
 .resizer.tl { width: 12px; height: 12px; left: -6px; top: -6px; cursor: nwse-resize; }
 .resizer.br { width: 12px; height: 12px; right: -6px; bottom: -6px; cursor: nwse-resize; }
 .resizer.bl { width: 12px; height: 12px; left: -6px; bottom: -6px; cursor: nesw-resize; }
-
-.minimized {
-  height: var(--titlebar-height, 32px);
-  width: 200px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 8px;
-  border-radius: 4px;
-  background: linear-gradient(#f6f6f6,#efefef);
-  border: 1px solid rgba(0,0,0,0.06);
-  cursor: pointer;
-}
Author	SHA1	Message	Date
azure	f80c1863b9	Initial commit	2025-10-21 11:10:09 +08:00
Azure	ff4791922e	Initial commit	2025-10-21 11:09:40 +08:00
Azure	16b4b27352	优化	2025-09-22 13:23:12 +08:00
Azure	e3ff2045ea	优化	2025-09-19 11:49:04 +08:00
Azure	fd4f9aa66b	WindowFormElement	2025-09-19 10:35:46 +08:00
Azure	62b4ae7379	WindowFormImpl	2025-09-19 09:57:14 +08:00