保存一下

src/core/desktop/ui/DesktopComponent.vue

@@ -4,11 +4,11 @@
     class="w-full h-full pos-relative"
   >
     <div class="desktop-root" @contextmenu="onContextMenu">
-      <div class="w-full h-full flex-1 p-2 pos-relative">
+      <div class="desktop-bg">
         <div class="desktop-container"
              :style="gridStyle">
           <AppIcon v-for="(appIcon, i) in appIconsRef" :key="i"
-                   :icon="appIcon" :gridTemplate="gridTemplate" />
+                   :iconInfo="appIcon" :gridTemplate="gridTemplate" />
         </div>
       </div>
       <div class="task-bar"></div>
@@ -22,8 +22,9 @@ import XSystem from '@/core/XSystem.ts'
 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 { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'
+import { useDesktopInit } from '@/core/desktop/ui/hooks/useDesktopInit.ts'
 import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
+import { watch } from 'vue'
 
 const props = defineProps<{ process: DesktopProcess }>()
 
@@ -47,15 +48,25 @@ const onContextMenu = (e: MouseEvent) => {
 </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-container {
     @apply w-full h-full flex-1 grid grid-auto-flow-col pos-relative;
   }
 
   .task-bar {
-    @apply w-full h-[40px] bg-gray-200;
+    @apply w-full bg-gray-200;
+    height: $taskBarHeight;
     flex-shrink: 0;
   }
 }