style: new lyrics background

src/assets/css/slider.css

@@ -133,3 +133,12 @@ body[data-theme='dark'] .lyrics-page .vue-slider-process {
 body[data-theme='dark'] .lyrics-page .vue-slider-dot-handle {
   background-color: #fff;
 }
+
+.lyrics-page[data-theme='dark'] .vue-slider-rail {
+  background-color: rgba(255, 255, 255, 0.18);
+}
+
+.lyrics-page[data-theme='dark'] .vue-slider-process,
+.lyrics-page[data-theme='dark'] .vue-slider-dot-handle {
+  background-color: #fff;
+}

src/store/initLocalStorage.js

@@ -19,7 +19,7 @@ let localStorage = {
     cacheLimit: false,
     nyancatStyle: false,
     showLyricsTranslation: true,
-    lyricsBackground: false,
+    lyricsBackground: true,
     minimizeToTray: false,
     enableDiscordRichPresence: false,
     enableGlobalShortcut: true,

src/views/lyrics.vue

@@ -1,8 +1,15 @@
 <template>
   <transition name="slide-up">
-    <div class="lyrics-page" :class="{ 'no-lyric': noLyric }">
+    <div
+      class="lyrics-page"
+      :class="{ 'no-lyric': noLyric }"
+      :data-theme="theme"
+    >
       <div
-        v-if="settings.lyricsBackground !== false"
+        v-if="
+          (settings.lyricsBackground === 'blue') |
+            (settings.lyricsBackground === 'dynamic')
+        "
         class="lyrics-background"
         :class="{
           'dynamic-background': settings.lyricsBackground === 'dynamic',
@@ -17,6 +24,12 @@
           :style="{ backgroundImage: `url(${bgImageUrl})` }"
         />
       </div>
+      <div
+        v-if="settings.lyricsBackground === true"
+        class="gradient-background"
+        :style="{ background }"
+      ></div>
+
       <div class="left-side">
         <div>
           <div class="cover">
@@ -193,6 +206,8 @@ import { getLyric } from '@/api/track';
 import { lyricParser } from '@/utils/lyrics';
 import { disableScrolling, enableScrolling } from '@/utils/ui';
 import ButtonIcon from '@/components/ButtonIcon.vue';
+import * as Vibrant from 'node-vibrant';
+import Color from 'color';
 
 export default {
   name: 'Lyrics',
@@ -207,6 +222,7 @@ export default {
       tlyric: [],
       highlightLyricIndex: -1,
       minimize: true,
+      background: '',
     };
   },
   computed: {
@@ -267,10 +283,14 @@ export default {
     album() {
       return this.currentTrack?.al || { id: 0, name: 'unknown' };
     },
+    theme() {
+      return this.settings.lyricsBackground === true ? 'dark' : 'auto';
+    },
   },
   watch: {
     currentTrack() {
       this.getLyric();
+      this.getCoverColor();
     },
     showLyrics(show) {
       if (show) {
@@ -284,6 +304,7 @@ export default {
   },
   created() {
     this.getLyric();
+    this.getCoverColor();
   },
   destroyed() {
     clearInterval(this.lyricsInterval);
@@ -351,6 +372,24 @@ export default {
     moveToFMTrash() {
       this.player.moveToFMTrash();
     },
+    getCoverColor() {
+      if (this.settings.lyricsBackground !== true) return;
+      const cover = this.currentTrack.al?.picUrl + '?param=1024y1024';
+      Vibrant.from(cover, { colorCount: 1 })
+        .getPalette()
+        .then(palette => {
+          const color = Color.rgb(palette.DarkMuted._rgb)
+            .darken(0.1)
+            .rgb()
+            .string();
+          const color2 = Color.rgb(palette.DarkMuted._rgb)
+            .lighten(0.28)
+            .rotate(-30)
+            .rgb()
+            .string();
+          this.background = `linear-gradient(to top left, ${color}, ${color2})`;
+        });
+    },
   },
 };
 </script>
@@ -421,6 +460,12 @@ export default {
   }
 }
 
+.gradient-background {
+  position: absolute;
+  height: 100vh;
+  width: 100vw;
+}
+
 .left-side {
   flex: 1;
   display: flex;

src/views/settings.vue

@@ -177,6 +177,7 @@
             <option :value="true">
               {{ $t('settings.lyricsBackground.on') }}
             </option>
+            <option value="blur"> 模糊封面 </option>
             <option value="dynamic">
               {{ $t('settings.lyricsBackground.dynamic') }}
             </option>