保存一下

src/core/desktop/ui/DesktopComponent.vue

@@ -4,9 +4,10 @@
     class="w-full h-full pos-relative"
   >
     <div ref="desktopRootDom" class="desktop-root">
-      <div class="desktop-container">
-        <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 class="desktop-container"
+           :style="gridStyle">
+        <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
+                 :icon="appIcon" :gridTemplate="gridTemplate" />
       </div>
       <div class="task-bar"></div>
     </div>
@@ -22,42 +23,12 @@ import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
 import { useIconDrag } from '@/core/desktop/utils/useIconDrag.ts'
 import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
 import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
+import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
 
 const props = defineProps<{ process: DesktopProcess }>()
 // console.log(props.process)
 
-const { colCount, rowCount, appIconsRef } = useDesktopInit('.desktop-container')
-
-const iconArr: IDesktopAppIcon[] = [
-  {
-    name: '文件管理器',
-    icon: '🗂',
-    path: '/',
-    col: 1,
-    row: 1,
-  },
-  {
-    name: '浏览器',
-    icon: '🌐',
-    path: '/',
-    col: 1,
-    row: 2,
-  },
-  {
-    name: '记事本',
-    icon: '📄',
-    path: '/',
-    col: 1,
-    row: 3,
-  },
-  {
-    name: '音乐播放器',
-    icon: '🎵',
-    path: '/',
-    col: 1,
-    row: 4,
-  },
-]
+const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-container')
 
 XSystem.instance.eventManages.addEventListener(
   DesktopEventEnum.onDesktopRootDomResize,
@@ -81,20 +52,15 @@ const iconsInit = () => {
 </script>
 
 <style lang="scss" scoped>
-$icon-width: 80px;
-$icon-height: 110px;
-
 .desktop-root {
   @apply w-full h-full flex flex-col;
 
   .desktop-container {
-    @apply w-full flex-1 grid gap-4 grid-auto-flow-col p-4 pos-relative;
-    grid-template-columns: repeat(auto-fill, minmax($icon-width, 1fr));
-    grid-template-rows: repeat(auto-fill, minmax($icon-height, 1fr));
+    @apply w-full flex-1 grid grid-auto-flow-col pos-relative;
 
     .icon-container {
-      width: $icon-width;
-      height: $icon-height;
+      width: 100%;
+      height: 100%;
       @apply flex flex-col items-center justify-center rounded  bg-gray-200;
     }
   }