优化进入、离开播放详情页的性能

src/renderer/components/core/Player.vue

@@ -5,7 +5,7 @@ div(:class="$style.player")
     svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
       use(:xlink:href='`#${$style.iconPic}`')
   div(:class="$style.middle")
-    div(:class="$style.middleContainer" v-if="!isShowPlayerDetail")
+    div(:class="$style.middleContainer")
       div(:class="$style.column1")
         div(:class="$style.container")
           div(:class="$style.title" @click="handleCopy(title)" :tips="title + $t('core.player.copy_title')") {{title}}
@@ -64,7 +64,7 @@ div(:class="$style.player")
   //- transition(enter-active-class="animated lightSpeedIn"
   transition(enter-active-class="animated lightSpeedIn"
       leave-active-class="animated slideOutDown")
-    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
+    core-player-detail(v-if="isShowPlayerDetail" :visible.sync="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
                       :lyric="lyric" :list="list" :listId="listId"
                       :playInfo="{ nowPlayTimeStr, maxPlayTimeStr, progress, nowPlayTime, status }"
                       :isPlay="isPlay" @action="handlePlayDetailAction"
@@ -141,11 +141,12 @@ export default {
         playTime: 0,
       },
       isShowAddMusicTo: false,
+      isShowPlayerDetail: false,
     }
   },
   computed: {
     ...mapGetters(['setting']),
-    ...mapGetters('player', ['list', 'changePlay', 'playMusicInfo', 'isShowPlayerDetail', 'playInfo', 'playedList']),
+    ...mapGetters('player', ['list', 'changePlay', 'playMusicInfo', 'playInfo', 'playedList']),
     // pic() {
     //   return this.musicInfo.img ? this.musicInfo.img : ''
     // },
@@ -340,7 +341,6 @@ export default {
       'setPlayMusicInfo',
       'setPlayIndex',
       'resetChangePlay',
-      'visiblePlayerDetail',
       'clearPlayedList',
       'setPlayedList',
     ]),
@@ -769,7 +769,7 @@ export default {
     },
     showPlayerDetail() {
       if (!this.targetSong) return
-      this.visiblePlayerDetail(true)
+      this.isShowPlayerDetail = true
     },
     handleTransitionEnd(e) {
       // console.log(e)

src/renderer/components/core/PlayerDetail.vue

@@ -4,7 +4,7 @@
     //- div(:class="$style.bg2")
     div(:class="$style.header")
       div(:class="$style.controBtn")
-        button(type="button" :class="$style.hide" :tips="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
+        button(type="button" :class="$style.hide" :tips="$t('core.player.hide_detail')" @click="hide")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
             use(xlink:href='#icon-window-hide')
         button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
@@ -96,7 +96,7 @@
 
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters } from 'vuex'
 import { base as eventBaseName } from '../../event/names'
 import { clipboardWriteText, scrollTo } from '../../utils'
 
@@ -104,6 +104,10 @@ let cancelScrollFn = null
 
 export default {
   props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
     musicInfo: {
       type: Object,
       default() {
@@ -260,12 +264,11 @@ export default {
   },
   computed: {
     ...mapGetters(['setting']),
-    ...mapGetters('player', ['isShowPlayerDetail']),
   },
   methods: {
-    ...mapMutations('player', [
+    hide() {
-      'visiblePlayerDetail',
+      this.$emit('update:visible', false)
-    ]),
+    },
     listenEvent() {
       document.addEventListener('mousemove', this.handleMouseMsMove)
       document.addEventListener('mouseup', this.handleMouseMsUp)
@@ -316,7 +319,7 @@ export default {
         return
       }
       this.clickTime = 0
-      this.visiblePlayerDetail(false)
+      this.hide()
     },
     handleLyricMouseDown(e) {
       // console.log(e)

src/renderer/store/modules/player.js

@@ -18,7 +18,6 @@ const state = {
   },
   playIndex: -1,
   changePlay: false,
-  isShowPlayerDetail: false,
   playedList: [],
 
   playMusicInfo: null,
@@ -197,7 +196,6 @@ const getters = {
       musicInfo: state.playMusicInfo.musicInfo,
     }
   },
-  isShowPlayerDetail: state => state.isShowPlayerDetail,
   playMusicInfo: state => state.playMusicInfo,
   playedList: state => state.playedList,
   tempPlayList: state => state.tempPlayList,
@@ -457,9 +455,6 @@ const mutations = {
   clearPlayedList(state) {
     state.playedList.splice(0, state.playedList.length)
   },
-  visiblePlayerDetail(state, visible) {
-    state.isShowPlayerDetail = visible
-  },
   setTempPlayList(state, list) {
     state.tempPlayList.push(...list.map(({ musicInfo, listId }) => ({ musicInfo, listId, isTempPlay: true })))
     if (!state.playMusicInfo) this.commit('player/playNext')