完成背景音乐

@@ -15,4 +15,12 @@ export const getUseBg = () => {
     url: '/system/bg/getUsedBg',
     url: '/system/bg/getUsedBg',
     method: 'get',
     method: 'get',
   })
   })
+}
+
+// 获取应用背景
+export const getUseBgMusic = () => {
+  return request({
+    url: '/system/bgMusic/getUsedBgMusic',
+    method: 'get',
+  })
 }
 }

@@ -16,6 +16,7 @@
         <!-- 每层的图片 -->
         <!-- 每层的图片 -->
         <img
         <img
           v-for="(childen, number) in item"
           v-for="(childen, number) in item"
+          :key="number + index"
           :src="childen"
           :src="childen"
           alt="图片"
           alt="图片"
           @click.stop="handleClick($event, childen)"
           @click.stop="handleClick($event, childen)"
@@ -46,9 +47,12 @@
 <script setup>
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { ref, onMounted, onUnmounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getSignatureList, getUseBg } from '@/api/signature'
+import { getSignatureList, getUseBg, getUseBgMusic } from '@/api/signature'
 let imgList = import.meta.glob('../assets/img/*.*', { eager: true })
 let imgList = import.meta.glob('../assets/img/*.*', { eager: true })
 let imgArr = Object.values(imgList).map((item) => item.default)
 let imgArr = Object.values(imgList).map((item) => item.default)
+// 导入音乐文件
+let musicList = import.meta.glob('../assets/music/*.*', { eager: true })
+let musicArr = Object.values(musicList).map((item) => item.default)
 let spanBoxList = ref([]) // 图片列表
 let spanBoxList = ref([]) // 图片列表
 let aEls = ref([]) // 图片元素
 let aEls = ref([]) // 图片元素
 let radius = ref(760)
 let radius = ref(760)
@@ -201,6 +205,11 @@ onMounted(async () => {
   if (!localStorage.getItem('crgx_server')) {
   if (!localStorage.getItem('crgx_server')) {
     return openServer(true)
     return openServer(true)
   }
   }
+  document.addEventListener('keydown', (e) => {
+    if (e.key == 'j') {
+      openServer()
+    }
+  })
   getImgList()
   getImgList()
   const bgRes = await getUseBg() // 获取背景图片
   const bgRes = await getUseBg() // 获取背景图片
   bgImgUrl.value = server_base + bgRes.data.path
   bgImgUrl.value = server_base + bgRes.data.path
@@ -214,21 +223,40 @@ onMounted(async () => {
   //鼠标滚动事件
   //鼠标滚动事件
   document.addEventListener('mousewheel', handleMouseWheel)
   document.addEventListener('mousewheel', handleMouseWheel)
   // 监听键盘按下事件
   // 监听键盘按下事件
-  document.addEventListener('keydown', (e) => {
-    if (e.key == 'j') {
-      openServer()
-    }
-  })
   //暂停开始旋转
   //暂停开始旋转
   function playSpin(yes) {
   function playSpin(yes) {
     spinDom1.style.animationPlayState = yes ? 'running' : 'paused'
     spinDom1.style.animationPlayState = yes ? 'running' : 'paused'
   }
   }
 
 
+  // 音频播放逻辑
+  if (musicArr.length > 0) {
+    let currentIndex = 0
+    const audio = new Audio()
+
+    async function playNext() {
+      if (currentIndex >= musicArr.length) {
+        currentIndex = 0
+      }
+      audio.src = musicArr[currentIndex]
+      const resMusic = await getUseBgMusic()
+      if (resMusic.code == 200) {
+        audio.src = server_base + resMusic.data.path
+      }
+      audio.play().catch((err) => {
+        console.error('播放失败:', err)
+      })
+      currentIndex++
+    }
+
+    audio.addEventListener('ended', playNext)
+    playNext()
+  }
+
   //鼠标移动事件
   //鼠标移动事件
   document.onpointerdown = function (e) {
   document.onpointerdown = function (e) {
     //清除惯性定时器
     //清除惯性定时器
     clearInterval(dragBoxDom.value.timer)
     clearInterval(dragBoxDom.value.timer)
-    e = e || ewindow.event
+    e = e || window.event
     //鼠标点击位置
     //鼠标点击位置
     ;(startX.value = e.clientX), (startY.value = e.clientY)
     ;(startX.value = e.clientX), (startY.value = e.clientY)
     this.onpointermove = function (e) {
     this.onpointermove = function (e) {