feat: 更新 Vite 配置，优化资源管理和背景图像处理

src/components/Guide/GuideDragon.vue

@@ -8,7 +8,7 @@
     <!-- 导学小龙UI区域 -->
     <div class="guide-ui absolute left-16 top-1/2 transform -translate-y-1/2">
       <!-- 主UI面板 -->
-      <div class="guide-panel">
+      <div class="guide-panel" :style="{ backgroundImage: getBackgroundImage('components/box') }">
         <!-- 标题区域 -->
 
         <ImgButton
@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { getStaticImage, IMAGE_PATHS } from '@/utils'
+import { getStaticImage, getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
 interface Props {
@@ -119,7 +119,6 @@ const handleContinue = () => {
   width: 1547px;
   height: 279px;
   padding: 75px 30px 30px 120px;
-  background-image: url('../../assets/images/components/box.png');
   background-color: rgba(0, 0, 0, 0); /* 背景完全透明 */
 }
 

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
@@ -29,7 +29,7 @@ const routes: RouteRecordRaw[] = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes
 })
 

src/utils/index.ts

@@ -1,4 +1,9 @@
-//访问静态图片
+// 图片资源映射 - 使用静态导入确保构建时包含所有图片
+const imageModules = import.meta.glob('../assets/images/**/*.{png,jpg,jpeg,gif,svg,webp}', {
+  eager: true
+})
+
+//访问静态图片 - 使用静态导入确保构建后路径正确
 export const getStaticImage = (path: string) => {
   try {
     // 确保路径以正确的格式结尾
@@ -12,6 +17,13 @@ export const getStaticImage = (path: string) => {
         ? `../assets/images/${path}`
         : `../assets/images/${path}.png`
 
+    // 使用静态导入的模块
+    const module = imageModules[imagePath]
+    if (module && typeof module === 'object' && 'default' in module) {
+      return module.default as string
+    }
+
+    // 回退到URL方式
     return new URL(imagePath, import.meta.url).href
   } catch (error) {
     console.error('Failed to load image:', path, error)

src/views/home/action.vue

@@ -63,18 +63,18 @@ onMounted(() => {
   <div class="w-full h-full relative">
     <!-- 背景图片 -->
     <div
-      :class="['absolute inset-0 bg-cover bg-center bg-no-repeat', status ? 'z-0' : 'z-10']"
+      :class="['absolute inset-0 bg-cover bg-center bg-no-repeat']"
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.ACTION_BG) }"
     ></div>
 
     <!-- 选择模块 -->
-    <div class="absolute left-0 top-[-140px] inset-0 z-10">
+    <div :class="['absolute left-0 top-[-140px] inset-0 z-[8]']">
       <ModuleSwitcher v-model="selectedModule" @change="handleModuleChange" />
     </div>
 
     <!-- 电视机 -->
     <div
-      class="absolute w-[765px] h-[768px] right-0 top-0 z-0 transition-opacity duration-200"
+      class="absolute w-[765px] h-[768px] right-0 top-0 z-[5] transition-opacity duration-200"
       :class="{ 'opacity-50': isImageLoading }"
       :style="{ backgroundImage: selectedImage }"
     ></div>

src/views/home/index.vue

@@ -21,7 +21,7 @@ import { ImgButton } from '@/components/Button'
     </div>
     <!-- 操作指引 -->
     <div class="absolute right-0 bottom-0">
-      <ImgButton :image="IMAGE_PATHS.BUTTONS.OPERATE_GUIDE" :path="{ name: 'Guide' }" />
+      <ImgButton :image="IMAGE_PATHS.BUTTONS.OPERATE_GUIDE" />
     </div>
   </div>
 </template>