✨ feat: 优化播放条和mv播放时没有暂停音乐的问题

src/layout/AppLayout.vue

@@ -42,7 +42,59 @@ const store = useStore();
 
 const isPlay = computed(() => store.state.isPlay as boolean)
 const menus = store.state.menus;
+const play = computed(() => store.state.play as boolean)
 
+const audio = {
+  value: document.querySelector('#MusicAudio') as HTMLAudioElement
+}
+
+onMounted(() => {
+  // 监听音乐是否播放
+  watch(
+    () => play.value,
+    value => {
+      if (value && audio.value) {
+        audioPlay()
+      } else {
+        audioPause()
+      }
+    }
+  )
+
+  document.onkeyup = (e) => {
+    switch (e.code) {
+      case 'Space':
+        playMusicEvent()
+    }
+  }
+  // 按下键盘按钮监听
+  document.onkeydown = (e) => {
+    switch (e.code) {
+      case 'Space':
+        return false
+    }
+  }
+})
+
+const audioPlay = () => {
+  if (audio.value) {
+    audio.value.play()
+  }
+}
+
+const audioPause = () => {
+  if (audio.value) {
+    audio.value.pause()
+  }
+}
+
+const playMusicEvent = async () => {
+  if (play.value) {
+    store.commit('setPlayMusic', false)
+  } else {
+    store.commit('setPlayMusic', true)
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/layout/components/PlayBar.vue

@@ -131,41 +131,6 @@ watch(
   },
   { immediate: true }
 )
-// 获取音乐播放Dom
-
-
-
-onMounted(() => {
-  // 监听音乐是否播放
-  watch(
-    () => play.value,
-    (value, oldValue) => {
-      if (value && audio.value) {
-        audioPlay()
-        onAudio()
-      } else {
-        audioPause()
-      }
-    }
-  )
-  // 抬起键盘按钮监听
-  document.onkeyup = (e) => {
-    switch (e.code) {
-      case 'Space':
-        playMusicEvent()
-    }
-  }
-
-  // 按下键盘按钮监听
-  document.onkeydown = (e) => {
-    switch (e.code) {
-      case 'Space':
-        return false
-    }
-  }
-})
-
-
 
 const audioPlay = () => {
   if (audio.value) {
@@ -179,7 +144,6 @@ const audioPause = () => {
   }
 }
 
-
 // 计算属性  获取当前播放时间的进度
 const timeSlider = computed({
   get: () => (nowTime.value / allTime.value) * 100,
@@ -227,6 +191,8 @@ const onAudio = () => {
   }
 }
 
+onAudio()
+
 function handleEnded() {
   store.commit('nextPlay')
 }

src/utils/index.ts

@@ -38,7 +38,7 @@ export const formatNumber = (num: any) => {
 }
 
 export const getIsMc = () => {
-  return true
+  return false
 }
 const ProxyUrl =
   import.meta.env.VITE_API_PROXY + '' || 'http://110.42.251.190:9856'

src/views/list/index.vue

@@ -106,7 +106,7 @@ watch(
 
   &-list {
     @apply grid gap-6 pb-28 pr-3;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
   }
   &-item {
     &-img {

src/views/mv/index.vue

@@ -54,6 +54,7 @@ onMounted(async () => {
 
 const handleShowMv = async (item: IMvItem) => {
   store.commit('setIsPlay', false)
+  store.commit('setPlayMusic', false)
   showMv.value = true
   const res = await getMvUrl(item.id)
   playMvItem.value = item;
@@ -75,7 +76,7 @@ const close = () => {
 
   &-content {
     @apply grid gap-6 pb-28 pr-3;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
   }
 
   .mv-item {