✨ feat: 优化歌词背景色 加载问题

src/layout/AppLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="layout-page">
-    <div class="layout-main">
+    <div class="layout-main" :style="{ background: backgroundColor }">
       <title-bar v-if="isElectron" />
       <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
         <!-- 侧边菜单栏 -->
@@ -9,7 +9,7 @@
           <!-- 搜索栏 -->
           <search-bar />
           <!-- 主页面路由 -->
-          <div class="main-content bg-black" :native-scrollbar="false">
+          <div class="main-content" :native-scrollbar="false">
             <n-message-provider>
               <router-view
                 v-slot="{ Component }"
@@ -70,6 +70,18 @@ const audio = {
   value: document.querySelector('#MusicAudio') as HTMLAudioElement,
 };
 
+const backgroundColor = ref('#000');
+// watch(
+//   () => store.state.playMusic,
+//   () => {
+//     backgroundColor.value = store.state.playMusic.backgroundColor;
+//     console.log('backgroundColor.value', backgroundColor.value);
+//   },
+//   {
+//     immediate: true,
+//     deep: true,
+//   },
+// );
 onMounted(() => {
   // 监听音乐是否播放
   watch(
@@ -118,11 +130,11 @@ const playMusicEvent = async () => {
 .layout-page {
   width: 100vw;
   height: 100vh;
-  @apply flex justify-center items-center overflow-hidden;
+  @apply flex justify-center items-center overflow-hidden bg-black;
 }
 
 .layout-main {
-  @apply bg-black  text-white shadow-xl flex flex-col relative;
+  @apply text-white shadow-xl flex flex-col relative transition-all;
   height: 100%;
   width: 100%;
   overflow: hidden;

src/layout/components/MusicFull.vue

@@ -112,7 +112,7 @@ defineExpose({
 }
 .drawer-back {
   @apply absolute bg-cover bg-center;
-  filter: brightness(80%);
+  // filter: brightness(80%);
   z-index: -1;
   width: 200%;
   height: 200%;

src/layout/components/PlayBar.vue

@@ -127,7 +127,7 @@ watch(
   () => store.state.playMusic,
   async () => {
     loadLrc(playMusic.value.id);
-    background.value = await getImageLinearBackground(getImgUrl(playMusic.value?.picUrl, '300y300'));
+    background.value = playMusic.value.backgroundColor as string;
   },
   { immediate: true, deep: true },
 );