保存一下

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>