From 7225419bff779215c12205192b1816cfaa2d18e6 Mon Sep 17 00:00:00 2001
From: Azure <983547216@qq.com>
Date: Wed, 20 Aug 2025 09:59:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/apps/department/app.json             | 18 +++++++++
 src/core/apps/department/main.vue             |  9 +++++
 src/core/apps/fileManage/app.json             | 18 +++++++++
 src/core/apps/fileManage/main.vue             |  9 +++++
 src/core/apps/music/app.json                  | 18 +++++++++
 src/core/apps/music/main.vue                  |  9 +++++
 src/core/apps/personalCenter/app.json         | 18 +++++++++
 src/core/apps/personalCenter/main.vue         |  9 +++++
 src/core/apps/photograph/app.json             | 18 +++++++++
 src/core/apps/photograph/main.vue             |  9 +++++
 src/core/apps/recycleBin/app.json             | 18 +++++++++
 src/core/apps/recycleBin/main.vue             |  9 +++++
 src/core/apps/tv/app.json                     | 18 +++++++++
 src/core/apps/tv/main.vue                     |  9 +++++
 src/core/apps/video/app.json                  | 18 +++++++++
 src/core/apps/video/main.vue                  |  9 +++++
 .../types/{IconType.ts => IDesktopAppIcon.ts} |  4 +-
 src/core/desktop/ui/DesktopComponent.vue      | 14 +++----
 src/core/desktop/ui/useDesktopInit.ts         | 40 ++++++++++++++-----
 19 files changed, 255 insertions(+), 19 deletions(-)
 create mode 100644 src/core/apps/department/app.json
 create mode 100644 src/core/apps/department/main.vue
 create mode 100644 src/core/apps/fileManage/app.json
 create mode 100644 src/core/apps/fileManage/main.vue
 create mode 100644 src/core/apps/music/app.json
 create mode 100644 src/core/apps/music/main.vue
 create mode 100644 src/core/apps/personalCenter/app.json
 create mode 100644 src/core/apps/personalCenter/main.vue
 create mode 100644 src/core/apps/photograph/app.json
 create mode 100644 src/core/apps/photograph/main.vue
 create mode 100644 src/core/apps/recycleBin/app.json
 create mode 100644 src/core/apps/recycleBin/main.vue
 create mode 100644 src/core/apps/tv/app.json
 create mode 100644 src/core/apps/tv/main.vue
 create mode 100644 src/core/apps/video/app.json
 create mode 100644 src/core/apps/video/main.vue
 rename src/core/desktop/types/{IconType.ts => IDesktopAppIcon.ts} (67%)

diff --git a/src/core/apps/department/app.json b/src/core/apps/department/app.json
new file mode 100644
index 0000000..e91b057
--- /dev/null
+++ b/src/core/apps/department/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "department",
+  "title": "部门",
+  "description": "部门",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "部门",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/department/main.vue b/src/core/apps/department/main.vue
new file mode 100644
index 0000000..85a7057
--- /dev/null
+++ b/src/core/apps/department/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    部门页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/apps/fileManage/app.json b/src/core/apps/fileManage/app.json
new file mode 100644
index 0000000..87d6b4f
--- /dev/null
+++ b/src/core/apps/fileManage/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "fileManage",
+  "title": "文件管理",
+  "description": "文件管理",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "文件管理",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/fileManage/main.vue b/src/core/apps/fileManage/main.vue
new file mode 100644
index 0000000..b5a9436
--- /dev/null
+++ b/src/core/apps/fileManage/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    文件管理页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/apps/music/app.json b/src/core/apps/music/app.json
new file mode 100644
index 0000000..a48339d
--- /dev/null
+++ b/src/core/apps/music/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "music",
+  "title": "音乐",
+  "description": "音乐",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "音乐",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/music/main.vue b/src/core/apps/music/main.vue
new file mode 100644
index 0000000..c3eceec
--- /dev/null
+++ b/src/core/apps/music/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    音乐页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/apps/personalCenter/app.json b/src/core/apps/personalCenter/app.json
new file mode 100644
index 0000000..9c2fdc3
--- /dev/null
+++ b/src/core/apps/personalCenter/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "personalCenter",
+  "title": "个人中心",
+  "description": "个人中心",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "个人中心",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/personalCenter/main.vue b/src/core/apps/personalCenter/main.vue
new file mode 100644
index 0000000..9fa9894
--- /dev/null
+++ b/src/core/apps/personalCenter/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    个人中心页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/apps/photograph/app.json b/src/core/apps/photograph/app.json
new file mode 100644
index 0000000..9c8d9ca
--- /dev/null
+++ b/src/core/apps/photograph/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "photograph",
+  "title": "照片",
+  "description": "照片",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "照片",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/photograph/main.vue b/src/core/apps/photograph/main.vue
new file mode 100644
index 0000000..6856d83
--- /dev/null
+++ b/src/core/apps/photograph/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    照片页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/apps/recycleBin/app.json b/src/core/apps/recycleBin/app.json
new file mode 100644
index 0000000..06da9f8
--- /dev/null
+++ b/src/core/apps/recycleBin/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "recycleBin",
+  "title": "回收站",
+  "description": "回收站",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "回收站",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/recycleBin/main.vue b/src/core/apps/recycleBin/main.vue
new file mode 100644
index 0000000..b1d7a5a
--- /dev/null
+++ b/src/core/apps/recycleBin/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    回收站页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/apps/tv/app.json b/src/core/apps/tv/app.json
new file mode 100644
index 0000000..0a24f7c
--- /dev/null
+++ b/src/core/apps/tv/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "tv",
+  "title": "电视",
+  "description": "电视",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "电视",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/tv/main.vue b/src/core/apps/tv/main.vue
new file mode 100644
index 0000000..07b6d59
--- /dev/null
+++ b/src/core/apps/tv/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    电视页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/apps/video/app.json b/src/core/apps/video/app.json
new file mode 100644
index 0000000..22e1777
--- /dev/null
+++ b/src/core/apps/video/app.json
@@ -0,0 +1,18 @@
+{
+  "name": "video",
+  "title": "电影",
+  "description": "电影",
+  "icon": "iconfont icon-setting",
+  "startName": "main",
+  "singleton": true,
+  "isJustProcess": false,
+  "windowFormConfigs": [
+    {
+      "name": "main",
+      "title": "电影",
+      "icon": "iconfont icon-setting",
+      "width": 800,
+      "height": 600
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/core/apps/video/main.vue b/src/core/apps/video/main.vue
new file mode 100644
index 0000000..54f1d78
--- /dev/null
+++ b/src/core/apps/video/main.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    电影页面
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/core/desktop/types/IconType.ts b/src/core/desktop/types/IDesktopAppIcon.ts
similarity index 67%
rename from src/core/desktop/types/IconType.ts
rename to src/core/desktop/types/IDesktopAppIcon.ts
index c2590d0..e3952ab 100644
--- a/src/core/desktop/types/IconType.ts
+++ b/src/core/desktop/types/IDesktopAppIcon.ts
@@ -1,7 +1,7 @@
-export interface IconType {
+export interface IDesktopAppIcon {
   name: string;
   icon: string;
   path: string;
   col: number;
   row: number;
-}
\ No newline at end of file
+}
diff --git a/src/core/desktop/ui/DesktopComponent.vue b/src/core/desktop/ui/DesktopComponent.vue
index c427a23..9308010 100644
--- a/src/core/desktop/ui/DesktopComponent.vue
+++ b/src/core/desktop/ui/DesktopComponent.vue
@@ -5,8 +5,8 @@
   >
     <div ref="desktopRootDom" class="desktop-root">
       <div class="desktop-container">
-        <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 v-for="icon in appIconsRef" class="icon-container"
+             :style="`grid-row: ${icon.row}/${icon.row + 1};grid-column: ${icon.col}/${icon.col + 1}};`">{{ icon.name }}</div>
       </div>
       <div class="task-bar"></div>
     </div>
@@ -20,16 +20,15 @@ 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, ref, useTemplateRef, watchEffect } from 'vue'
-import type { IconType } from '@/core/desktop/types/IconType.ts'
+import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
 import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
 
 const props = defineProps<{ process: DesktopProcess }>()
 // console.log(props.process)
 
-const { colCount, rowCount } = useDesktopInit('.desktop-container')
+const { colCount, rowCount, appIconsRef } = useDesktopInit('.desktop-container')
 
-const iconArr: IconType[] = [
+const iconArr: IDesktopAppIcon[] = [
   {
     name: '文件管理器',
     icon: '🗂',
@@ -96,12 +95,13 @@ $icon-height: 110px;
     .icon-container {
       width: $icon-width;
       height: $icon-height;
-      @apply flex flex-col items-center justify-center rounded text-white bg-gray-200;
+      @apply flex flex-col items-center justify-center rounded  bg-gray-200;
     }
   }
 
   .task-bar {
     @apply w-full h-[40px] bg-gray-200;
+    flex-shrink: 0;
   }
 }
 </style>
diff --git a/src/core/desktop/ui/useDesktopInit.ts b/src/core/desktop/ui/useDesktopInit.ts
index 6ba7bdd..d943853 100644
--- a/src/core/desktop/ui/useDesktopInit.ts
+++ b/src/core/desktop/ui/useDesktopInit.ts
@@ -1,6 +1,15 @@
 import XSystem from '@/core/XSystem.ts'
-import type { IconType } from '@/core/desktop/types/IconType.ts'
-import { nextTick, onMounted, onUnmounted, reactive, toRefs, useTemplateRef } from 'vue'
+import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
+import {
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  toRefs,
+  useTemplateRef,
+  watch,
+  watchEffect,
+} from 'vue'
 import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useDraggable } from '@vueuse/core'
 
@@ -19,11 +28,11 @@ export function useDesktopInit(containerStr: string) {
     const containerRect = entry.contentRect
     gridTemplate.colCount = Math.floor(containerRect.width / gridTemplate.cellWidth);
     gridTemplate.rowCount = Math.floor(containerRect.height / (gridTemplate.cellHeight));
+    console.log('resize', gridTemplate)
   })
 
   onMounted(() => {
     container = document.querySelector(containerStr)!
-    console.log( container)
     ro.observe(container)
   })
   onUnmounted(() => {
@@ -31,12 +40,11 @@ export function useDesktopInit(containerStr: string) {
   })
 
   // 有桌面图标的app
-  const apps = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
-  console.log(apps)
-  const icons: IconType[] = apps.map((processInfo, index) => {
-    // 左上角坐标原点，从上到下从左到右
-    const x = Math.floor(index / gridTemplate.rowCount)
-    const y = index % gridTemplate.rowCount
+  const appInfos = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
+  const appIcons: IDesktopAppIcon[] = appInfos.map((processInfo, index) => {
+    // 左上角坐标原点，从上到下从左到右 索引从1开始
+    const x = Math.floor(index / gridTemplate.rowCount) + 1
+    const y = index % gridTemplate.rowCount + 1
     return {
       name: processInfo.name,
       icon: processInfo.icon,
@@ -45,8 +53,20 @@ export function useDesktopInit(containerStr: string) {
       row: y
     }
   })
+  const appIconsRef = reactive(appIcons)
+
+  watch(() => [gridTemplate.rowCount, gridTemplate.colCount], () => {
+    appIconsRef.forEach((appIcon, index) => {
+      const x = Math.floor(index / gridTemplate.rowCount) + 1
+      const y = index % gridTemplate.rowCount + 1
+      appIcon.col = x
+      appIcon.row = y
+    })
+    console.log(appIconsRef)
+  })
 
   return {
-    ...toRefs(gridTemplate)
+    ...toRefs(gridTemplate),
+    appIconsRef
   }
 }
\ No newline at end of file