From 7abc087d70911e318dc5411994f1ba2f917b10bb Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 18 Sep 2024 17:05:36 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=88=97=E8=A1=A8=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0=E6=92=AD=E6=94=BE=E7=9A=84=E9=82=A3=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/SongItem.vue |  3 +++
 src/layout/components/PlayBar.vue  | 23 ++++++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/common/SongItem.vue b/src/components/common/SongItem.vue
index 8b0cfe2..ec414b3 100644
--- a/src/components/common/SongItem.vue
+++ b/src/components/common/SongItem.vue
@@ -75,6 +75,9 @@ const emits = defineEmits(['play']);
 const songImageRef = useTemplateRef('songImg');
 
 const imageLoad = async () => {
+  if (!songImageRef.value) {
+    return;
+  }
   const background = await getImageBackground((songImageRef.value as any).imageRef as unknown as HTMLImageElement);
   // eslint-disable-next-line vue/no-mutating-props
   props.item.backgroundColor = background;
diff --git a/src/layout/components/PlayBar.vue b/src/layout/components/PlayBar.vue
index f095233..c3fda07 100644
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -73,7 +73,15 @@
         </template>
         歌词
       </n-tooltip>
-      <n-popover trigger="click" :z-index="99999999" content-class="music-play" raw :show-arrow="false" :delay="200">
+      <n-popover
+        trigger="click"
+        :z-index="99999999"
+        content-class="music-play"
+        raw
+        :show-arrow="false"
+        :delay="200"
+        @update-show="scrollToPlayList"
+      >
         <template #trigger>
           <n-tooltip trigger="manual" :z-index="9999999">
             <template #trigger>
@@ -84,7 +92,7 @@
         </template>
         <div class="music-play-list">
           <div class="music-play-list-back"></div>
-          <n-virtual-list :item-size="57" item-resizable :items="playList">
+          <n-virtual-list ref="palyListRef" :item-size="62" item-resizable :items="playList">
             <template #default="{ item }">
               <div class="music-play-list-content">
                 <song-item :key="item.id" :item="item" mini></song-item>
@@ -99,13 +107,13 @@
 </template>
 
 <script lang="ts" setup>
+import { useTemplateRef } from 'vue';
 import { useStore } from 'vuex';
 
 import SongItem from '@/components/common/SongItem.vue';
 import { allTime, isElectron, loadLrc, nowTime, openLyric, sendLyricToWin } from '@/hooks/MusicHook';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
-import { getImageLinearBackground } from '@/utils/linearColor';
 
 import MusicFull from './MusicFull.vue';
 
@@ -227,6 +235,15 @@ const musicFullVisible = ref(false);
 const setMusicFull = () => {
   musicFullVisible.value = !musicFullVisible.value;
 };
+
+const palyListRef = useTemplateRef('palyListRef');
+
+const scrollToPlayList = (val: boolean) => {
+  if (!val) return;
+  setTimeout(() => {
+    palyListRef.value?.scrollTo({ top: store.state.playListIndex * 62 });
+  }, 50);
+};
 </script>
 
 <style lang="scss" scoped>