保存

src/App.vue

@@ -1,18 +0,0 @@
-<template>
-  <div id="root" ref="root-dom" class="w-100vw h-100vh"></div>
-</template>
-
-<script setup lang="ts">
-import XSystem from '@/core/XSystem.ts'
-import { onMounted, useTemplateRef } from 'vue'
-
-const dom = useTemplateRef<HTMLDivElement>('root-dom')
-
-onMounted(() => {
-  XSystem.instance.initialization(dom.value!);
-})
-</script>
-
-<style scoped>
-
-</style>

src/common/hooks/useClickFocus.ts

@@ -0,0 +1,65 @@
+import { onMounted, onBeforeUnmount, type Ref, watch } from "vue";
+
+interface ClickFocusOptions {
+  once?: boolean; // 点击一次后解绑
+}
+
+/**
+ * Vue3 Hook：点击自身聚焦 / 点击外部失焦
+ * @param targetRef 元素的 ref
+ * @param onFocus 点击自身回调
+ * @param onBlur 点击外部回调
+ * @param options 配置项 { once }
+ */
+export function useClickFocus(
+  targetRef: Ref<HTMLElement | null>,
+  onFocus?: () => void,
+  onBlur?: () => void,
+  options: ClickFocusOptions = {}
+) {
+  let cleanupFn: (() => void) | null = null;
+
+  const bindEvents = (el: HTMLElement) => {
+    if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0");
+
+    const handleClick = (e: MouseEvent) => {
+      if (!el.isConnected) return cleanup();
+
+      if (el.contains(e.target as Node)) {
+        el.focus();
+        onFocus?.();
+      } else {
+        el.blur();
+        onBlur?.();
+      }
+
+      if (options.once) cleanup();
+    };
+
+    document.addEventListener("click", handleClick);
+
+    cleanupFn = () => {
+      document.removeEventListener("click", handleClick);
+      cleanupFn = null;
+    };
+  };
+
+  const cleanup = () => {
+    cleanupFn?.();
+  };
+
+  onMounted(() => {
+    const el = targetRef.value;
+    if (el) bindEvents(el);
+  });
+
+  onBeforeUnmount(() => {
+    cleanup();
+  });
+
+  // 支持动态 ref 变化
+  watch(targetRef, (newEl, oldEl) => {
+    if (oldEl) cleanup();
+    if (newEl) bindEvents(newEl);
+  });
+}

src/common/hooks/useObservableVue.ts

@@ -0,0 +1,87 @@
+import { reactive, onBeforeUnmount, type Reactive } from 'vue'
+import type { IObservable } from '@/core/state/IObservable.ts'
+
+/**
+ * Vue Hook: useObservable
+ * 支持深层解构赋值，直接修改触发 ObservableImpl 通知 + Vue 响应式更新
+ * @example
+ * interface AppState {
+ *   count: number
+ *   user: { name: string; age: number }
+ *   items: number[]
+ * }
+ *
+ * // 创建 ObservableImpl
+ * const obs = new ObservableImpl<AppState>({
+ *   count: 0,
+ *   user: { name: 'Alice', age: 20 },
+ *   items: []
+ * })
+ *
+ * export default defineComponent({
+ *   setup() {
+ *     // 深层解构 Hook
+ *     const { count, user, items } = useObservable(obs)
+ *
+ *     const increment = () => {
+ *       count += 1       // 触发 ObservableImpl 通知 + Vue 更新
+ *     }
+ *
+ *     const changeAge = () => {
+ *       user.age = 30    // 深层对象也能触发通知
+ *     }
+ *
+ *     const addItem = () => {
+ *       items.push(42)   // 数组方法拦截，触发通知
+ *     }
+ *
+ *     return { count, user, items, increment, changeAge, addItem }
+ *   }
+ * })
+ */
+export function useObservable<T extends object>(observable: IObservable<T>): Reactive<T> {
+  // 创建 Vue 响应式对象
+  const state = reactive({} as T)
+
+  /**
+   * 将 ObservableImpl Proxy 映射到 Vue 响应式对象
+   * 递归支持深层对象
+   */
+  function mapKeys(obj: any, proxy: any) {
+    (Object.keys(proxy) as (keyof typeof proxy)[]).forEach(key => {
+      const value = proxy[key]
+      if (typeof value === 'object' && value !== null) {
+        // 递归创建子对象 Proxy
+        obj[key] = reactive({} as typeof value)
+        mapKeys(obj[key], value)
+      } else {
+        // 基本类型通过 getter/setter 同步
+        Object.defineProperty(obj, key, {
+          enumerable: true,
+          configurable: true,
+          get() {
+            return proxy[key]
+          },
+          set(val) {
+            proxy[key] = val
+          },
+        })
+      }
+    })
+  }
+
+  // 获取 ObservableImpl 的 Proxy
+  const refsProxy = observable.toRefsProxy()
+  mapKeys(state, refsProxy)
+
+  // 订阅 ObservableImpl，保持响应式同步
+  const unsubscribe = observable.subscribe(() => {
+    // 空实现即可，getter/setter 已同步
+  })
+
+  onBeforeUnmount(() => {
+    unsubscribe()
+  })
+
+  return state
+}

src/common/naive-ui/components.ts

@@ -0,0 +1,10 @@
+import {
+  create,
+  NButton,
+  NCard,
+  NConfigProvider,
+} from 'naive-ui'
+
+export const naiveUi = create({
+  components: [NButton, NCard, NConfigProvider]
+})

src/common/naive-ui/discrete-api.ts

@@ -0,0 +1,21 @@
+import { createDiscreteApi } from 'naive-ui'
+import { configProviderProps } from './theme.ts'
+
+const { message, notification, dialog, loadingBar, modal } = createDiscreteApi(
+  ['message', 'dialog', 'notification', 'loadingBar', 'modal'],
+  {
+    configProviderProps: configProviderProps,
+    notificationProviderProps: {
+      placement: 'bottom-right',
+      max: 3
+    }
+  }
+)
+
+export const { messageApi, notificationApi, dialogApi, loadingBarApi, modalApi } = {
+  messageApi: message,
+  notificationApi: notification,
+  dialogApi: dialog,
+  loadingBarApi: loadingBar,
+  modalApi: modal
+}

src/common/naive-ui/theme.ts

@@ -0,0 +1,15 @@
+import { type ConfigProviderProps, darkTheme, dateZhCN, type GlobalTheme, lightTheme, zhCN } from 'naive-ui'
+
+const lTheme: GlobalTheme = {
+  ...lightTheme,
+  common: {
+    ...lightTheme.common,
+    primaryColor: '#0070f3'
+  }
+}
+
+export const configProviderProps: ConfigProviderProps = {
+  theme: lTheme,
+  dateLocale: dateZhCN,
+  locale: zhCN,
+}

src/common/types/IDestroyable.ts

@@ -0,0 +1,8 @@
+/**
+ * 可销毁接口
+ * 销毁实例,清理副作用,让内存可以被回收
+ */
+export interface IDestroyable {
+  /** 销毁实例,清理副作用,让内存可以被回收 */
+  destroy(): void
+}

src/common/types/IVersion.ts

@@ -0,0 +1,29 @@
+/**
+ * 版本信息
+ */
+export interface IVersion {
+  /**
+   * 公司名称
+   */
+  company: string
+
+  /**
+   * 版本号
+   */
+  major: number
+
+  /**
+   * 子版本号
+   */
+  minor: number
+
+  /**
+   * 修订号
+   */
+  build: number
+
+  /**
+   * 私有版本号
+   */
+  private: number
+}

src/core/XSystem.ts

@@ -1,23 +1,14 @@
 import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
 import { DesktopProcess } from '@/core/desktop/DesktopProcess.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() {
@@ -31,19 +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
-    processManager.runProcess('basic-system', BasicSystemProcess).then(() => {
-      processManager.runProcess('desktop', DesktopProcess).then((proc) => {
-        proc.mount(dom)
-      })
-    })
+    await processManager.runProcess('basic-system', BasicSystemProcess)
+    await processManager.runProcess('desktop', DesktopProcess, dom)
   }
 }

src/core/common/types/IDestroyable.ts

@@ -0,0 +1,8 @@
+/**
+ * 可销毁接口
+ * 销毁实例,清理副作用,让内存可以被回收
+ */
+export interface IDestroyable {
+  /** 销毁实例,清理副作用,让内存可以被回收 */
+  destroy(): void
+}

src/core/desktop/DesktopProcess.ts

@@ -5,95 +5,68 @@ 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)
-
-    // this.initDesktop(dom)
-
+    app.mount(this._monitorDom)
     this._isMounted = true
   }
 
@@ -101,4 +74,9 @@ export class DesktopProcess extends ProcessImpl {
     const d = document.createElement('desktop-element')
     dom.appendChild(d)
   }
+
+  override destroy() {
+    super.destroy()
+    window.removeEventListener('resize', this.onResize)
+  }
 }

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>
@@ -32,18 +36,29 @@ 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()
@@ -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});

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 事件名称

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()
+  }
 }

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;
   /** 进程信息 */

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()
+  }
 }

src/core/process/impl/ProcessManagerImpl.ts

@@ -37,9 +37,10 @@ export default class ProcessManagerImpl implements IProcessManager {
     this._processInfos.push(...internalProcessInfos)
   }
 
-  public async runProcess<T extends IProcess = IProcess>(
+  public async runProcess<T extends IProcess = IProcess, A extends any[] = any[]>(
     proc: string | IProcessInfo,
-    constructor?: new (info: IProcessInfo) => T,
+    constructor?: new (info: IProcessInfo, ...args: A) => T,
+    ...args: A
   ): Promise<T> {
     let info = typeof proc === 'string' ? this.findProcessInfoByName(proc) : proc
     if (isUndefined(info)) {
@@ -55,7 +56,7 @@ export default class ProcessManagerImpl implements IProcessManager {
     }
 
     // 创建进程
-    let process = isUndefined(constructor) ? new ProcessImpl(info) : new constructor(info)
+    let process = isUndefined(constructor) ? new ProcessImpl(info) : new constructor(info, ...args)
 
     return process as T
   }

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

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

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) {}
   }
 }

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;
   /** 窗体所属的进程 */

src/core/window/impl/WindowFormImpl.ts

@@ -35,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
@@ -70,7 +70,7 @@ export default class WindowFormImpl implements IWindowForm {
       width: config.width ?? 200,
       height: config.height ?? 100,
       state: 'default',
-      closed: false
+      closed: false,
     })
 
     this.initEvent()
@@ -109,4 +109,6 @@ export default class WindowFormImpl implements IWindowForm {
   public minimize() {}
   public maximize() {}
   public restore() {}
+
+  public destroy() {}
 }

src/events/DesktopEventManager.ts

@@ -0,0 +1,16 @@
+import { EventBuilderImpl } from '@/events/impl/EventBuilderImpl.ts'
+import type { IEventMap } from '@/events/IEventBuilder.ts'
+import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
+
+/**
+ * 桌面相关的事件
+ */
+export interface IDesktopEvent extends IEventMap {
+  /**
+   * 桌面应用位置改变
+   */
+  desktopAppPosChange: (info: IDesktopAppIcon) => void;
+}
+
+/** 窗口事件管理器 */
+export const desktopEM = new EventBuilderImpl<IDesktopEvent>()

src/events/EventManager.ts

@@ -0,0 +1,35 @@
+import { EventBuilderImpl } from '@/core/events/impl/EventBuilderImpl.ts'
+import type { IEventMap } from '@/core/events/IEventBuilder.ts'
+import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
+
+export const eventManager = new EventBuilderImpl<IAllEvent>()
+
+/**
+ * 系统进程的事件
+ * @description
+ * <p>onAuthChange - 认证状态改变</p>
+ * <p>onThemeChange - 主题改变</p>
+ */
+export interface IBasicSystemEvent extends IEventMap {
+  /** 认证状态改变 */
+  onAuthChange: () => {},
+  /** 主题改变 */
+  onThemeChange: (theme: string) => void
+}
+
+/**
+ * 桌面进程的事件
+ * @description
+ * <p>onDesktopRootDomResize - 桌面根dom尺寸改变</p>
+ * <p>onDesktopProcessInitialize - 桌面进程初始化完成</p>
+ */
+export interface IDesktopEvent extends IEventMap {
+  /** 桌面根dom尺寸改变 */
+  onDesktopRootDomResize: (width: number, height: number) => void
+  /** 桌面进程初始化完成 */
+  onDesktopProcessInitialize: () => void
+  /** 桌面应用图标位置改变 */
+  onDesktopAppIconPos: (iconInfo: IDesktopAppIcon) => void
+}
+
+export interface IAllEvent extends IDesktopEvent, IBasicSystemEvent {}

src/events/IEventBuilder.ts

@@ -0,0 +1,47 @@
+import type { IDestroyable } from '@/core/common/types/IDestroyable.ts'
+
+/**
+ * 事件定义
+ * @interface IEventMap 事件定义 键是事件名称，值是事件处理函数
+ */
+export interface IEventMap {
+  [key: string]: (...args: any[]) => void
+}
+
+/**
+ * 事件管理器接口定义
+ */
+export interface IEventBuilder<Events extends IEventMap> extends IDestroyable {
+  /**
+   * 添加事件监听
+   * @param eventName 事件名称
+   * @param handler 事件处理函数
+   * @param options 配置项 { immediate: 立即执行一次 immediateArgs: 立即执行的参数 once: 只监听一次 }
+   * @returns void
+   */
+  addEventListener<E extends keyof Events, F extends Events[E]>(
+    eventName: E,
+    handler: F,
+    options?: {
+      immediate?: boolean
+      immediateArgs?: Parameters<F>
+      once?: boolean
+    },
+  ): void
+
+  /**
+   * 移除事件监听
+   * @param eventName 事件名称
+   * @param handler 事件处理函数
+   * @returns void
+   */
+  removeEventListener<E extends keyof Events, F extends Events[E]>(eventName: E, handler: F): void
+
+  /**
+   * 触发事件
+   * @param eventName 事件名称
+   * @param args 参数
+   * @returns void
+   */
+  notifyEvent<E extends keyof Events, F extends Events[E]>(eventName: E, ...args: Parameters<F>): void
+}

src/events/WindowFormEventManager.ts

@@ -0,0 +1,61 @@
+import { EventBuilderImpl } from '@/events/impl/EventBuilderImpl.ts'
+import type { IEventMap } from '@/events/IEventBuilder.ts'
+import type { TWindowFormState } from '@/ui/types/WindowFormTypes.ts'
+
+/**
+ * 窗口的事件
+ */
+export interface IWindowFormEvent extends IEventMap {
+  /**
+   * 窗口最小化
+   * @param id 窗口id
+   */
+  windowFormMinimize: (id: string) => void;
+  /**
+   * 窗口最大化
+   * @param id 窗口id
+   */
+  windowFormMaximize: (id: string) => void;
+  /**
+   * 窗口还原
+   * @param id 窗口id
+   */
+  windowFormRestore: (id: string) => void;
+  /**
+   * 窗口关闭
+   * @param id 窗口id
+   */
+  windowFormClose: (id: string) => void;
+  /**
+   * 窗口聚焦
+   * @param id 窗口id
+   */
+  windowFormFocus: (id: string) => void;
+  /**
+   * 窗口数据更新
+   * @param data 窗口数据
+   */
+  windowFormDataUpdate: (data: IWindowFormDataUpdateParams) => void;
+  /**
+   * 窗口创建完成
+   */
+  windowFormCreated: () => void;
+}
+
+interface IWindowFormDataUpdateParams {
+  /** 窗口id */
+  id: string;
+  /** 窗口状态 */
+  state: TWindowFormState,
+  /** 窗口宽度 */
+  width: number,
+  /** 窗口高度 */
+  height: number,
+  /** 窗口x坐标(左上角) */
+  x: number,
+  /** 窗口y坐标(左上角) */
+  y: number
+}
+
+/** 窗口事件管理器 */
+export const wfem = new EventBuilderImpl<IWindowFormEvent>()

src/events/impl/EventBuilderImpl.ts

@@ -0,0 +1,96 @@
+import type { IEventBuilder, IEventMap } from '@/core/events/IEventBuilder.ts'
+
+interface HandlerWrapper<T extends (...args: any[]) => any> {
+  fn: T
+  once: boolean
+}
+
+export class EventBuilderImpl<Events extends IEventMap> implements IEventBuilder<Events> {
+  private _eventHandlers = new Map<keyof Events, Set<HandlerWrapper<Events[keyof Events]>>>()
+
+  /**
+   * 添加事件监听器
+   * @param eventName 事件名称
+   * @param handler 监听器
+   * @param options { immediate: 立即执行一次 immediateArgs: 立即执行的参数 once: 只监听一次 }
+   * @example
+   * eventBus.addEventListener('noArgs', () => {})
+   * eventBus.addEventListener('greet', name => {}, { immediate: true, immediateArgs: ['abc'] })
+   * eventBus.addEventListener('onResize', (w, h) => {}, { immediate: true, immediateArgs: [1, 2] })
+   */
+  addEventListener<E extends keyof Events, F extends Events[E]>(
+    eventName: E,
+    handler: F,
+    options?: {
+      immediate?: boolean
+      immediateArgs?: Parameters<F>
+      once?: boolean
+    },
+  ) {
+    if (!handler) return
+    if (!this._eventHandlers.has(eventName)) {
+      this._eventHandlers.set(eventName, new Set<HandlerWrapper<F>>())
+    }
+
+    const set = this._eventHandlers.get(eventName)!
+    if (![...set].some((wrapper) => wrapper.fn === handler)) {
+      set.add({ fn: handler, once: options?.once ?? false })
+    }
+
+    if (options?.immediate) {
+      try {
+        handler(...(options.immediateArgs ?? []))
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+
+  /**
+   * 移除事件监听器
+   * @param eventName 事件名称
+   * @param handler 监听器
+   * @example
+   * eventBus.removeEventListener('noArgs', () => {})
+   */
+  removeEventListener<E extends keyof Events, F extends Events[E]>(eventName: E, handler: F) {
+    const set = this._eventHandlers.get(eventName)
+    if (!set) return
+
+    for (const wrapper of set) {
+      if (wrapper.fn === handler) {
+        set.delete(wrapper)
+      }
+    }
+  }
+
+  /**
+   * 通知事件
+   * @param eventName 事件名称
+   * @param args 参数
+   * @example
+   * eventBus.notifyEvent('noArgs')
+   * eventBus.notifyEvent('greet', 'Alice')
+   * eventBus.notifyEvent('onResize', 1, 2)
+   */
+  notifyEvent<E extends keyof Events, F extends Events[E]>(eventName: E, ...args: Parameters<F>) {
+    if (!this._eventHandlers.has(eventName)) return
+
+    const set = this._eventHandlers.get(eventName)!
+    for (const wrapper of set) {
+      try {
+        wrapper.fn(...args)
+      } catch (e) {
+        console.error(e)
+      }
+
+      if (wrapper.once) {
+        set.delete(wrapper)
+      }
+    }
+  }
+
+  destroy() {
+    this._eventHandlers.clear()
+  }
+}

src/main.ts

@@ -1,16 +1,15 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { naiveUi } from '@/common/naive-ui/components.ts'
 
 import 'virtual:uno.css'
 import './css/basic.css'
 
-// import App from './App.vue'
+import App from './ui/App.vue'
 
-// const app = createApp(App)
-//
-// app.use(createPinia())
-//
-// app.mount('#app')
+const app = createApp(App)
 
-import XSystem from '@/core/XSystem.ts'
-XSystem.instance.initialization(document.querySelector('#app')!);
+app.use(createPinia())
+app.use(naiveUi)
+
+app.mount('#app')

src/ui/App.vue

@@ -0,0 +1,53 @@
+<template>
+  <n-config-provider
+    :config-provider-props="configProviderProps"
+    class="pos-relative w-screen h-vh"
+  >
+    <div class="desktop-root" @contextmenu="onContextMenu">
+      <div class="desktop-bg">
+        <DesktopContainer/>
+      </div>
+      <div class="task-bar">
+        <div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">
+          测试
+        </div>
+      </div>
+    </div>
+  </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import { configProviderProps } from '@/core/common/naive-ui/theme.ts'
+import DesktopContainer from '@/ui/desktop-container/DesktopContainer.vue'
+
+const onContextMenu = (e: MouseEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+  console.log(e)
+}
+</script>
+
+<style lang="scss" scoped>
+$taskBarHeight: 40px;
+.desktop-root {
+  @apply w-full h-full flex flex-col;
+
+  .desktop-bg {
+    @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;
+  }
+}
+</style>

src/ui/desktop-container/AppIcon.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="icon-container"
+    :style="`grid-column: ${iconInfo.x}/${iconInfo.x + 1};grid-row: ${iconInfo.y}/${iconInfo.y + 1};`"
+    draggable="true"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
+  >
+    {{ iconInfo.name }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
+import type { IGridTemplateParams } from '@/ui/types/IGridTemplateParams.ts'
+
+const { iconInfo, gridTemplate } = defineProps<{ iconInfo: IDesktopAppIcon, gridTemplate: IGridTemplateParams }>()
+
+const onDragStart = (e: DragEvent) => {}
+
+const onDragEnd = (e: DragEvent) => {
+  const el = e.target as HTMLElement | null
+  if (!el) return
+  // 鼠标所在位置已存在图标元素
+  const pointTarget = document.elementFromPoint(e.clientX, e.clientY)
+  if (!pointTarget) return
+  if (pointTarget.classList.contains('icon-container')) return
+  if (!pointTarget.classList.contains('desktop-icons-container')) return
+
+  // 获取容器边界
+  const rect = el.parentElement!.getBoundingClientRect()
+
+  // 鼠标相对容器左上角坐标
+  const mouseX = e.clientX - rect.left
+  const mouseY = e.clientY - rect.top
+
+  // 计算鼠标所在单元格坐标（向上取整，从1开始）
+  const gridX = Math.ceil(mouseX / gridTemplate.cellRealWidth)
+  const gridY = Math.ceil(mouseY / gridTemplate.cellRealHeight)
+
+  iconInfo.x = gridX
+  iconInfo.y = gridY
+}
+</script>
+
+<style scoped lang="scss">
+.icon-container {
+  width: 100%;
+  height: 100%;
+  @apply flex flex-col items-center justify-center bg-gray-200;
+}
+</style>

src/ui/desktop-container/DesktopContainer.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="desktop-icons-container" :style="gridStyle">
+    <AppIcon
+      v-for="(appIcon, i) in appIconsRef"
+      :key="i"
+      :iconInfo="appIcon"
+      :gridTemplate="gridTemplate"
+      @dblclick="runApp(appIcon)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppIcon from '@/ui/desktop-container/AppIcon.vue'
+import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
+import { useDesktopContainerInit } from '@/ui/desktop-container/useDesktopContainerInit.ts'
+
+const { appIconsRef, gridStyle, gridTemplate } = useDesktopContainerInit('.desktop-icons-container')
+
+const runApp = (appIcon: IDesktopAppIcon) => {}
+</script>
+
+<style scoped></style>

src/ui/desktop-container/useDesktopContainerInit.ts

@@ -0,0 +1,164 @@
+import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  toRaw,
+  toValue,
+  watch,
+} from 'vue'
+import type { IGridTemplateParams } from '@/ui/types/IGridTemplateParams.ts'
+import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
+
+export function useDesktopContainerInit(containerStr: string) {
+  let container:HTMLElement
+  // 初始值
+  const gridTemplate = reactive<IGridTemplateParams>({
+    cellExpectWidth: 90,
+    cellExpectHeight: 110,
+    cellRealWidth: 90,
+    cellRealHeight: 110,
+    gapX: 4,
+    gapY: 4,
+    colCount: 1,
+    rowCount: 1
+  })
+
+  const gridStyle = computed(() => ({
+    gridTemplateColumns: `repeat(${gridTemplate.colCount}, minmax(${gridTemplate.cellExpectWidth}px, 1fr))`,
+    gridTemplateRows: `repeat(${gridTemplate.rowCount}, minmax(${gridTemplate.cellExpectHeight}px, 1fr))`,
+    gap: `${gridTemplate.gapX}px ${gridTemplate.gapY}px`
+  }))
+
+  const ro = new ResizeObserver(entries => {
+    const containerRect = container.getBoundingClientRect()
+    gridTemplate.colCount = Math.floor((containerRect.width + gridTemplate.gapX) / (gridTemplate.cellExpectWidth + gridTemplate.gapX));
+    gridTemplate.rowCount = Math.floor((containerRect.height + gridTemplate.gapY) / (gridTemplate.cellExpectHeight + gridTemplate.gapY));
+
+    const w = containerRect.width - (gridTemplate.gapX * (gridTemplate.colCount - 1))
+    const h = containerRect.height - (gridTemplate.gapY * (gridTemplate.rowCount - 1))
+    gridTemplate.cellRealWidth = Number((w / gridTemplate.colCount).toFixed(2))
+    gridTemplate.cellRealHeight = Number((h / gridTemplate.rowCount).toFixed(2))
+  })
+
+  onMounted(() => {
+    container = document.querySelector(containerStr)!
+    ro.observe(container)
+  })
+  onUnmounted(() => {
+    ro.unobserve(container)
+    ro.disconnect()
+  })
+
+  // 有桌面图标的app
+  // const appInfos = processManager.processInfos.filter(processInfo => !processInfo.isJustProcess)
+  const appInfos: IProcessInfo[] = []
+  const oldAppIcons: IDesktopAppIcon[] = JSON.parse(localStorage.getItem('desktopAppIconInfo') || '[]')
+  const appIcons: IDesktopAppIcon[] = appInfos.map((processInfo, index) => {
+    const oldAppIcon = oldAppIcons.find(oldAppIcon => oldAppIcon.name === processInfo.name)
+
+    // 左上角坐标原点，从上到下从左到右 索引从1开始
+    const x = index % gridTemplate.rowCount + 1
+    const y = Math.floor(index / gridTemplate.rowCount) + 1
+
+    return {
+      name: processInfo.name,
+      icon: processInfo.icon,
+      path: processInfo.startName,
+      x: oldAppIcon ? oldAppIcon.x : x,
+      y: oldAppIcon ? oldAppIcon.y : y
+    }
+  })
+
+  const appIconsRef = ref(appIcons)
+  const exceedApp = ref<IDesktopAppIcon[]>([])
+
+  watch(() => [gridTemplate.colCount, gridTemplate.rowCount], ([nCols, nRows], [oCols, oRows]) => {
+    // if (oCols == 1 && oRows == 1) return
+    if (oCols === nCols && oRows === nRows)  return
+    const { appIcons, hideAppIcons } = rearrangeIcons(toRaw(appIconsRef.value), nCols, nRows)
+    appIconsRef.value = appIcons
+    exceedApp.value = hideAppIcons
+  })
+
+  watch(() => appIconsRef.value, (appIcons) => {
+    localStorage.setItem('desktopAppIconInfo', JSON.stringify(appIcons))
+  })
+
+  return {
+    gridTemplate,
+    appIconsRef,
+    gridStyle
+  }
+}
+
+/**
+ * 重新安排图标位置
+ * @param appIconInfos 图标信息
+ * @param maxCol 列数
+ * @param maxRow 行数
+ */
+function rearrangeIcons(
+  appIconInfos: IDesktopAppIcon[],
+  maxCol: number,
+  maxRow: number
+): IRearrangeInfo {
+  const occupied = new Set<string>();
+
+  function key(x: number, y: number) {
+    return `${x},${y}`;
+  }
+
+  const appIcons: IDesktopAppIcon[] = []
+  const hideAppIcons: IDesktopAppIcon[] = []
+  const temp: IDesktopAppIcon[] = []
+
+  for (const appIcon of appIconInfos) {
+    const { x, y } = appIcon;
+
+    if (x <= maxCol && y <= maxRow) {
+      if (!occupied.has(key(x, y))) {
+        occupied.add(key(x, y))
+        appIcons.push({ ...appIcon, x, y })
+      }
+    } else {
+      temp.push(appIcon)
+    }
+  }
+
+  const max = maxCol * maxRow
+  for (const appIcon of temp) {
+    if (appIcons.length < max) {
+      // 最后格子也被占 → 从 (1,1) 开始找空位
+      let placed = false;
+      for (let c = 1; c <= maxCol; c++) {
+        for (let r = 1; r <= maxRow; r++) {
+          if (!occupied.has(key(c, r))) {
+            occupied.add(key(c, r));
+            appIcons.push({ ...appIcon, x: c, y: r });
+            placed = true;
+            break;
+          }
+        }
+        if (placed) break;
+      }
+    } else {
+      // 放不下了
+      hideAppIcons.push(appIcon)
+    }
+  }
+
+  return {
+    appIcons,
+    hideAppIcons
+  };
+}
+
+interface IRearrangeInfo {
+  /** 正常的桌面图标信息 */
+  appIcons: IDesktopAppIcon[];
+  /** 隐藏的桌面图标信息(超出屏幕显示的) */
+  hideAppIcons: IDesktopAppIcon[];
+}

src/ui/types/IDesktopAppIcon.ts

@@ -0,0 +1,15 @@
+/**
+ * 桌面应用图标信息
+ */
+export interface IDesktopAppIcon {
+  /** 图标name */
+  name: string;
+  /** 图标 */
+  icon: string;
+  /** 图标路径 */
+  path: string;
+  /** 图标在grid布局中的列 */
+  x: number;
+  /** 图标在grid布局中的行 */
+  y: number;
+}

src/ui/types/IGridTemplateParams.ts

@@ -0,0 +1,21 @@
+/**
+ * 桌面网格模板参数
+ */
+export interface IGridTemplateParams {
+  /** 单元格预设宽度 */
+  readonly cellExpectWidth: number
+  /** 单元格预设高度 */
+  readonly cellExpectHeight: number
+  /** 单元格实际宽度 */
+  cellRealWidth: number
+  /** 单元格实际高度 */
+  cellRealHeight: number
+  /** 列间距 */
+  gapX: number
+  /** 行间距 */
+  gapY: number
+  /** 总列数 */
+  colCount: number
+  /** 总行数 */
+  rowCount: number
+}

src/ui/types/WindowFormTypes.ts

@@ -0,0 +1,10 @@
+/**
+ * 窗体位置坐标 - 左上角
+ */
+export interface WindowFormPos {
+  x: number;
+  y: number;
+}
+
+/** 窗口状态 */
+export type TWindowFormState = 'default' | 'minimized' | 'maximized';