From a504b914fe0f50b51415069ebcf2346a15d2155c Mon Sep 17 00:00:00 2001
From: algerkong <algerkc@qq.com>
Date: Wed, 27 Dec 2023 21:05:25 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E6=9D=A1=E5=92=8Cmv=E6=92=AD=E6=94=BE=E6=97=B6?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E6=9A=82=E5=81=9C=E9=9F=B3=E4=B9=90=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/AppLayout.vue          | 52 +++++++++++++++++++++++++++++++
 src/layout/components/PlayBar.vue | 38 ++--------------------
 src/utils/index.ts                |  2 +-
 src/views/list/index.vue          |  2 +-
 src/views/mv/index.vue            |  3 +-
 5 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 01d69cc..f1041e0 100644
--- a/src/layout/AppLayout.vue
+++ b/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>
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index 48de63d..8c5b8e8 100644
--- a/src/layout/components/PlayBar.vue
+++ b/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')
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 181a72b..0a315ff 100644
--- a/src/utils/index.ts
+++ b/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'
diff --git a/src/views/list/index.vue b/src/views/list/index.vue
index 1916f57..d62d564 100644
--- a/src/views/list/index.vue
+++ b/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 {
diff --git a/src/views/mv/index.vue b/src/views/mv/index.vue
index 5ffd883..dde8a60 100644
--- a/src/views/mv/index.vue
+++ b/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 {