保存一下

src/core/XSystem.ts

@@ -31,7 +31,6 @@ export default class XSystem {
   public initialization(dom: HTMLDivElement) {
     this.run('basic-system', BasicSystemProcess).then(() => {
       this.run('desktop', DesktopProcess).then((proc) => {
-        console.log(proc)
         proc.mount(dom)
       })
     })

src/core/desktop/DesktopProcess.ts

@@ -72,7 +72,8 @@ export class DesktopProcess extends AppProcess {
   }
 
   public mount(dom: HTMLDivElement) {
-    if (this._isMounted) return;
+    console.log('DesktopProcess: start mount')
+    if (this._isMounted) return
     this._width = window.innerWidth
     this._height = window.innerHeight
     window.addEventListener(
@@ -80,18 +81,18 @@ export class DesktopProcess extends AppProcess {
       debounce(() => {
         this.width = window.innerWidth
         this.height = window.innerHeight
-      }, 300),
+      }, 300)
     )
 
     dom.style.zIndex = '0';
     dom.style.width = `${this._width}px`
     dom.style.height = `${this._height}px`
-    this._desktopRootDom = dom;
+    this._desktopRootDom = dom
 
     const app = createApp(DesktopComponent, { process: this })
     app.use(naiveUi)
     app.mount(dom)
 
-    this._isMounted = true;
+    this._isMounted = true
   }
 }

src/core/desktop/ui/DesktopComponent.vue

@@ -1,8 +1,12 @@
 <template>
-  <n-config-provider :config-provider-props="configProviderProps" class="w-full h-full pos-relative">
+  <n-config-provider
+    :config-provider-props="configProviderProps"
+    class="w-full h-full pos-relative"
+  >
     <div ref="desktopRootDom" class="desktop-root">
       <div class="desktop-container">
-        <div v-for="icon in iconArr" class="icon-container">{{ icon.icon }}</div>
+        <div v-for="icon in iconArr" class="icon-container"
+             :style="`grid-row: ${icon.row}/${icon.row + 1};grid-column: ${icon.col}/${icon.col + 1}};`">{{ icon.icon }}</div>
       </div>
       <div class="task-bar"></div>
     </div>
@@ -16,12 +20,14 @@ import { notificationApi } from '@/core/common/naive-ui/discrete-api.ts'
 import { configProviderProps } from '@/core/common/naive-ui/theme.ts'
 import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useIconDrag } from '@/core/desktop/utils/useIconDrag.ts'
-import { onMounted } from 'vue'
+import { onMounted, ref, useTemplateRef, watchEffect } from 'vue'
 import type { IconType } from '@/core/desktop/types/IconType.ts'
 import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
 
 const props = defineProps<{ process: DesktopProcess }>()
-console.log(props.process)
+// console.log(props.process)
+
+const { colCount, rowCount } = useDesktopInit('.desktop-container')
 
 const iconArr: IconType[] = [
   {
@@ -29,35 +35,42 @@ const iconArr: IconType[] = [
     icon: '🗂',
     path: '/',
     col: 1,
-    row: 1
+    row: 1,
   },
   {
     name: '浏览器',
     icon: '🌐',
     path: '/',
     col: 1,
-    row: 2
+    row: 2,
   },
   {
     name: '记事本',
     icon: '📄',
     path: '/',
     col: 1,
-    row: 3
+    row: 3,
   },
   {
     name: '音乐播放器',
     icon: '🎵',
     path: '/',
     col: 1,
-    row: 4
+    row: 4,
-  }
+  },
 ]
 
-XSystem.instance.eventManages.addEventListener(DesktopEventEnum.onDesktopRootDomResize, (width, height) => {
+XSystem.instance.eventManages.addEventListener(
+  DesktopEventEnum.onDesktopRootDomResize,
+  (width, height) => {
     console.log(width, height)
-  notificationApi.create({ title: '桌面通知', content: `桌面尺寸变化${width}x${height}}`, duration: 2000 })
+    notificationApi.create({
+      title: '桌面通知',
+      content: `桌面尺寸变化${width}x${height}}`,
+      duration: 2000,
     })
+  },
+)
 
 const iconsInit = () => {
   const icons = document.querySelectorAll<HTMLDivElement>('div.icon-container')
@@ -66,13 +79,6 @@ const iconsInit = () => {
     useIconDrag(icon, container)
   })
 }
-onMounted(() => {
-  const container = document.querySelector<HTMLDivElement>('.desktop-container')!
-  console.log(container.getBoundingClientRect())
-  // iconsInit()
-  const { col, row } = useDesktopInit(container)
-  console.log(col.value, row.value)
-})
 </script>
 
 <style lang="scss" scoped>

src/core/desktop/ui/useDesktopInit.ts

@@ -1,26 +1,31 @@
 import XSystem from '@/core/XSystem.ts'
 import type { IconType } from '@/core/desktop/types/IconType.ts'
-import { nextTick, onUnmounted, reactive, toRefs } from 'vue'
+import { nextTick, onMounted, onUnmounted, reactive, toRefs, useTemplateRef } from 'vue'
 import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useDraggable } from '@vueuse/core'
 
-export function useDesktopInit(container: HTMLElement) {
+export function useDesktopInit(containerStr: string) {
+  let container:HTMLElement
   const gridTemplate = reactive({
     cellWidth: 90,
     cellHeight: 110,
     gap: 10,
-    col: 1,
+    colCount: 1,
-    row: 1
+    rowCount: 1
   })
 
   const ro = new ResizeObserver(entries => {
     const entry= entries[0]
     const containerRect = entry.contentRect
-    gridTemplate.col = Math.floor(containerRect.width / gridTemplate.cellWidth);
+    gridTemplate.colCount = Math.floor(containerRect.width / gridTemplate.cellWidth);
-    gridTemplate.row = Math.floor(containerRect.height / (gridTemplate.cellHeight));
+    gridTemplate.rowCount = Math.floor(containerRect.height / (gridTemplate.cellHeight));
-    console.log(1111)
   })
+
+  onMounted(() => {
+    container = document.querySelector(containerStr)!
+    console.log( container)
     ro.observe(container)
+  })
   onUnmounted(() => {
     ro.unobserve(container)
   })
@@ -28,17 +33,20 @@ export function useDesktopInit(container: HTMLElement) {
   // 有桌面图标的app
   const apps = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
   console.log(apps)
-  const icons: IconType[] = apps.map(processInfo => {
+  const icons: IconType[] = apps.map((processInfo, index) => {
+    // 左上角坐标原点，从上到下从左到右
+    const x = Math.floor(index / gridTemplate.rowCount)
+    const y = index % gridTemplate.rowCount
     return {
       name: processInfo.name,
       icon: processInfo.icon,
       path: processInfo.startName,
-      col: 0,
+      col: x,
-      row: 0
+      row: y
     }
   })
 
   return {
-    ...toRefs(gridTemplate),
+    ...toRefs(gridTemplate)
   }
 }

src/core/events/EventTypes.ts

@@ -1,31 +1,56 @@
 import type { IEventMap } from '@/core/events/IEventBuilder.ts'
 
+/**
+ * 桌面进程事件枚举
+ * @description
+ * <p>onDesktopRootDomResize - 桌面根dom尺寸改变</p>
+ * <p>onDesktopProcessInitialize - 桌面进程初始化完成</p>
+ */
 export enum DesktopEventEnum {
-  onDesktopRootDomResize = 'onDesktopRootDomResize'
+  /** 桌面进程初始化完成 */
-}
+  onDesktopRootDomResize = 'onDesktopRootDomResize',
-
+  /** 桌面进程初始化完成 */
-export type DesktopEventParams = {
+  onDesktopProcessInitialize = 'onDesktopProcessInitialize'
-  [DesktopEventEnum.onDesktopRootDomResize]: (width: number, height: number) => void
 }
 
+/**
+ * 基础系统进程事件枚举
+ * @description
+ * <p>onAuthenticationChange - 认证状态改变</p>
+ * <p>onBasicSystemProcessInitialize - 主题改变</p>
+ */
 export enum BasicSystemEventEnum {
+  /** 基础系统进程初始化完成 */
+  onBasicSystemProcessInitialize = 'onBasicSystemProcessInitialize',
+  /** 认证状态改变 */
   onAuthChange = 'onAuthChange',
+  /** 主题改变 */
   onThemeChange = 'onThemeChange'
 }
 
-export type BasicSystemEventParams =  {
+/**
-  [BasicSystemEventEnum.onAuthChange]: () => {},
+ * 桌面进程的事件
-  [BasicSystemEventEnum.onThemeChange]: (theme: string) => void
+ * @description
-}
+ * <p>onDesktopRootDomResize - 桌面根dom尺寸改变</p>
-
+ * <p>onDesktopProcessInitialize - 桌面进程初始化完成</p>
-export type AllEventParams = BasicSystemEventParams & DesktopEventParams
+ */
-
 export interface IDesktopEvent extends IEventMap {
+  /** 桌面根dom尺寸改变 */
   [DesktopEventEnum.onDesktopRootDomResize]: (width: number, height: number) => void
+  /** 桌面进程初始化完成 */
+  [DesktopEventEnum.onDesktopProcessInitialize]: () => void
 }
 
+/**
+ * 系统进程的事件
+ * @description
+ * <p>onAuthChange - 认证状态改变</p>
+ * <p>onThemeChange - 主题改变</p>
+ */
 export interface IBasicSystemEvent extends IEventMap {
+  /** 认证状态改变 */
   [BasicSystemEventEnum.onAuthChange]: () => {},
+  /** 主题改变 */
   [BasicSystemEventEnum.onThemeChange]: (theme: string) => void
 }
 

src/core/process/AppProcessInfo.ts

@@ -1,5 +1,5 @@
 import type { Version } from '../common/types/Version.ts'
-import type { AppProcessInfoParams } from '../process/types/AppProcessInfoParams.ts'
+import type { IAppProcessInfoParams } from './types/IAppProcessInfoParams.ts'
 import type { WindowFormConfig } from '../window/types/WindowFormConfig.ts'
 
 export class AppProcessInfo {
@@ -58,7 +58,7 @@ export class AppProcessInfo {
    */
   private readonly _windowFormConfigs: Array<WindowFormConfig>;
 
-  constructor(info: AppProcessInfoParams) {
+  constructor(info: IAppProcessInfoParams) {
     this._name = info.name;
     this._title = info.title || '';
     this._description = info.description || '';

src/core/process/ProcessManages.ts

@@ -2,7 +2,7 @@ import type AppProcess from './AppProcess.ts'
 import { AppProcessInfo } from '@/core/process/AppProcessInfo.ts'
 import { BasicSystemProcessInfo } from '@/core/system/BasicSystemProcessInfo.ts'
 import { DesktopProcessInfo } from '@/core/desktop/DesktopProcessInfo.ts'
-import type { AppProcessInfoParams } from '@/core/process/types/AppProcessInfoParams.ts'
+import type { IAppProcessInfoParams } from '@/core/process/types/IAppProcessInfoParams.ts'
 
 /**
  * 进程管理
@@ -23,7 +23,7 @@ export default class ProcessManages {
   public loadAppProcessInfos() {
     console.log('加载所有进程信息')
     // 添加内置进程
-    const apps = import.meta.glob<AppProcessInfoParams>('../apps/**/*.json', { eager: true })
+    const apps = import.meta.glob<IAppProcessInfoParams>('../apps/**/*.json', { eager: true })
     const internalProcessInfos: AppProcessInfo[] = Object.values(apps).map(data => new AppProcessInfo(data))
 
     this._processInfos.push(BasicSystemProcessInfo)

src/core/process/types/IAppProcessInfoParams.ts

@@ -4,7 +4,7 @@ import type { WindowFormConfig } from '../../window/types/WindowFormConfig.ts'
 /**
  * 应用进程入参信息
  */
-export interface AppProcessInfoParams {
+export interface IAppProcessInfoParams {
   /** 应用进程名称 */
   name: string;
   /** 应用进程标题 */