From cf1054968f5db274b1b2e402f5a76761d76e0e6e Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Fri, 24 Dec 2021 15:21:54 +0800
Subject: [PATCH 01/35] Add Volumebar Tooptip

---
 src/components/DraggableBar.vue | 24 +++++++++++++++++++++---
 src/components/Volumebar.vue    |  1 +
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/DraggableBar.vue b/src/components/DraggableBar.vue
index aeab4677..3c3c5ef2 100644
--- a/src/components/DraggableBar.vue
+++ b/src/components/DraggableBar.vue
@@ -2,7 +2,7 @@
   <div :id="id" class="playbar-clickable cursor-pointer h-3 pt-1" @mousedown="onMyMouseDown">
     <div class="barbg h-1 bg-draggable-bar">
       <div class="cur bg-draggable-bar-current relative h-full" :style="{ width: changingProgress ? cprogress * 100 + '%' : progress + '%' }">
-        <span :class="'btn absolute rounded-full ' + (btnClass ? btnClass : '')">
+        <span class="btn absolute rounded-full" :class="btnClass ? btnClass : ''" :tooltips="tooltips">
           <i />
         </span>
       </div>
@@ -10,10 +10,11 @@
   </div>
 </template>
 <script setup lang="ts">
-const { id, progress, btnClass } = defineProps<{
+const { id, progress, btnClass, tooltips } = defineProps<{
   id: string;
   progress: number;
   btnClass?: string;
+  tooltips?: string;
 }>();
 
 const emits = defineEmits(['update-progress', 'commit-progress']);
@@ -68,4 +69,21 @@ const onMyMouseDown = (event: MouseEvent) => {
 };
 </script>
 
-<style></style>
+<script lang="ts">
+export default {};
+</script>
+
+<style>
+[tooltips]:hover:after {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  content: attr(tooltips);
+  color: #fff;
+  background: #1b2735;
+  max-width: 100vw;
+  padding: 0.3rem 0.5rem;
+  border-radius: 1rem;
+}
+</style>
diff --git a/src/components/Volumebar.vue b/src/components/Volumebar.vue
index d0db2e96..cfaf076d 100644
--- a/src/components/Volumebar.vue
+++ b/src/components/Volumebar.vue
@@ -6,6 +6,7 @@
         id="volumebar"
         :progress="volume * 100"
         btn-class="h-4 w-4 bg-white border border-gray-200"
+        :tooltips="(volume * 100).toFixed(0)"
         @update-progress="changeVolume"
         @commit-progress="commitVolume"></DraggableBar>
     </div>

From 51974157cdfc1f1b3e20de93c02094720916c50b Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:38:22 +0800
Subject: [PATCH 02/35] Add Number to List

---
 src/components/TrackRow.vue | 6 +++++-
 src/views/Playlist.vue      | 5 ++++-
 src/views/Search.vue        | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/TrackRow.vue b/src/components/TrackRow.vue
index c8dd20c1..7bb899d4 100644
--- a/src/components/TrackRow.vue
+++ b/src/components/TrackRow.vue
@@ -1,4 +1,7 @@
 <template>
+  <div class="flex-none w-8 text-cneter">
+    <span>{{ index + 1 }}</span>
+  </div>
   <div class="title flex-2 flex overflow-hidden items-center max-h-12">
     <!-- <a class="disabled" ng-if="song.disabled" ng-click="copyrightNotice()"> song.title </a> -->
     <vue-feather
@@ -48,11 +51,12 @@
   </div>
 </template>
 <script setup lang="ts">
-const { song, isMine, isLocal, listId } = defineProps<{
+const { song, isMine, isLocal, listId, index } = defineProps<{
   song: any;
   isMine?: boolean | string;
   isLocal?: boolean;
   listId?: string;
+  index?: string;
 }>();
 import { inject, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/src/views/Playlist.vue b/src/views/Playlist.vue
index 6b292175..7be1f950 100644
--- a/src/views/Playlist.vue
+++ b/src/views/Playlist.vue
@@ -55,6 +55,9 @@
           <input class="playlist-search-input" type="text" ng-model="playlistFilter.key" :placeholder="$t('_SEARCH_PLAYLIST')" />
         </div>-->
         <li class="head border-t-2 border-b-2 border-transparent text-inactive -mb-2px group flex relative items-center px-6 h-12">
+          <div class="flex-none w-8">
+            <span> No. </span>
+          </div>
           <div class="title flex-2 truncate flex">
             <a>{{ t('_SONGS') + '(' + songs.length + ')' }}</a>
           </div>
@@ -79,7 +82,7 @@
           @drop="onPlaylistSongDrop(listId, song, $event)"
           @mouseenter="song.options = true"
           @mouseleave="song.options = undefined">
-          <TrackRow :song="song" :is-local="is_local" :is-mine="is_mine" :list-id="listId"></TrackRow>
+          <TrackRow :index="index" :song="song" :is-local="is_local" :is-mine="is_mine" :list-id="listId"></TrackRow>
         </DragDropZone>
       </ul>
     </div>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 71ac586b..134c7879 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -60,7 +60,7 @@
                 class="flex relative items-center px-6 h-12 hover:bg-row-hover"
                 @mouseenter="song.options = true"
                 @mouseleave="song.options = undefined">
-                <TrackRow :song="song"></TrackRow>
+                <TrackRow :index="index" :song="song"></TrackRow>
               </li>
             </template>
             <template v-if="condition.searchType === 1">

From 4406c938daed844fbbe9baf4b88b9b8357831aec Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:38:52 +0800
Subject: [PATCH 03/35] Fix Modal minor issue

---
 src/components/Modal.vue            | 2 +-
 src/components/modals/OpenLogin.vue | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 29682171..24bada94 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -23,7 +23,7 @@ let show = $ref(false);
 let modalType = $ref(DefaultModal);
 let options = $ref({});
 
-const components: Record<string, any> = {
+const components: Record<string, typeof DefaultModal> = {
   DefaultModal,
   CreatePlaylist,
   AddToPlaylist,
diff --git a/src/components/modals/OpenLogin.vue b/src/components/modals/OpenLogin.vue
index cd6575bd..d2fff1b2 100644
--- a/src/components/modals/OpenLogin.vue
+++ b/src/components/modals/OpenLogin.vue
@@ -32,3 +32,6 @@ const { openLogin, refreshAuthStatus } = useAuth();
 
 const { t } = useI18n();
 </script>
+<script lang="ts">
+export default {}
+</script>

From 4e21a77e2f99119bf84073a206f44d3a8c197dec Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:39:27 +0800
Subject: [PATCH 04/35] Replace flex with grid for playlist list view

---
 src/components/PlaylistGrid.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/PlaylistGrid.vue b/src/components/PlaylistGrid.vue
index f71428ca..73e98628 100644
--- a/src/components/PlaylistGrid.vue
+++ b/src/components/PlaylistGrid.vue
@@ -1,8 +1,10 @@
 <template>
-  <ul class="playlist-covers m-0 py-0 flex relative flex-wrap">
-    <li v-for="i in playlists" :key="i.id" class="group w-1/3 md:w-1/5 min-h-40 px-4 sm:w-1/4 mb-3">
-      <div class="u-cover flex relative">
-        <img :src="i.cover_img_url" class="m-auto border border-default cursor-pointer w-full object-cover" @click="showPlaylist(i.id)" />
+  <ul class="playlist-covers m-0 py-0 relative grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-5">
+    <li v-for="i in playlists" :key="i.id" class="group min-h-40">
+      <div class="relative">
+        <div class="aspect-square bg-cover" style="background-image: url('/images/mycover.jpg')">
+          <img :src="i.cover_img_url" class="m-auto border border-default cursor-pointer object-cover" @click="showPlaylist(i.id)" />
+        </div>
         <div
           class="bottom opacity-0 group-hover:opacity-100 cursor-pointer absolute w-8 h-8 bottom-3 right-3 ease-linear duration-200"
           @click="directplaylist(i.id)">
@@ -10,7 +12,7 @@
         </div>
       </div>
       <div class="desc cursor-pointer">
-        <span class="title flex min-h-8 mt-1" @click="showPlaylist(i.id)">{{ i.title }}</span>
+        <div class="min-h-8 mt-1 px-2" @click="showPlaylist(i.id)">{{ i.title }}</div>
       </div>
     </li>
     <!-- <div class="loading_bottom">

From 269a1ee3502444ea77c43c5402f1c9be71f6ed82 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:39:56 +0800
Subject: [PATCH 05/35] Add Number to current playing list

---
 src/components/PlayerbarPopup.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/PlayerbarPopup.vue b/src/components/PlayerbarPopup.vue
index 98f6627f..cc7ea91c 100644
--- a/src/components/PlayerbarPopup.vue
+++ b/src/components/PlayerbarPopup.vue
@@ -18,7 +18,7 @@
         <vue-feather size="1.25rem" type="x"></vue-feather>
       </a>
     </div>
-    <ul class="menu-list overflow-y-scroll text-sm">
+    <ul class="menu-list overflow-y-scroll text-sm align-middle">
       <DragDropZone
         v-for="(song, index) in playlist"
         :id="'song_' + song.id"
@@ -32,6 +32,9 @@
         @mouseenter="song.highlight = true"
         @mouseleave="song.highlight = undefined"
         @drop="onCurrentPlayingSongDrop(song, $event)">
+        <div class="w-8">
+          <span> {{ index + 1 }}</span>
+        </div>
         <div class="song-status-icon w-8">
           <vue-feather v-show="currentPlaying.id == song.id" size="1rem" type="play"></vue-feather>
         </div>

From 997f854d7a05c14a2cbb05780d5f99bda9b051e6 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:40:09 +0800
Subject: [PATCH 06/35] Improve Player bar layouts

---
 src/components/Playerbar.vue | 43 +++++++++++++++---------------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index 10737539..49bfeb24 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="footer flex relative z-20 h-20 border-t border-default">
-    <div class="flex flex-none items-center w-80">
-      <span class="icon text-3xl ml-12 li-previous text-prevnext" @click="prevTrack()" />
+  <div class="footer flex flex-wrap gap-y-4 relative z-20 border-t border-default">
+    <div class="flex flex-none justify-center gap-4 items-center w-screen md:w-80 h-20 text-4xl">
+      <span class="li-previous text-prevnext" @click="prevTrack()" />
       <span
-        class="icon text-3xl ml-6 mr-6 li-play play text-play hover:text-play-hover"
+        class="li-play play text-play hover:text-play-hover"
         :class="isPlaying ? 'li-pause' : 'li-play'"
         @click="playPauseToggle()" />
-      <span class="icon text-3xl mr-4 li-next text-prevnext" @click="nextTrack()" />
+      <span class="li-next text-prevnext" @click="nextTrack()" />
     </div>
-    <div class="main-info flex flex-1 overflow-hidden bg-footer-main z-30">
+    <div class="main-info w-screen md:flex-1 flex overflow-hidden bg-footer-main z-30">
       <div v-if="playlist.length == 0" class="logo-banner text-center flex-1 flex items-center h-20 w-20">
         <svg
           class="logo h-12 w-12"
@@ -25,29 +25,21 @@
           <polygon points="13 4 13 13 16 13 16 4" />
         </svg>
       </div>
-      <div v-if="playlist.length > 0" class="cover flex-none cursor-pointer h-20 w-20 relative group" @click="toggleNowPlaying()">
-        <img class="object-cover h-20 w-20" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
+      <div v-if="playlist.length > 0" class="cover flex-none cursor-pointer h-24 w-24 relative group" @click="toggleNowPlaying()">
+        <img class="object-cover h-24 w-24" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
         <div class="mask items-center justify-center absolute inset-0 hidden group-hover:bg-black group-hover:bg-opacity-60 group-hover:flex">
           <vue-feather type="chevrons-up" stroke="#cccccc" />
         </div>
       </div>
       <div v-if="playlist.length > 0" class="detail flex-1 relative overflow-hidden">
-        <div class="ctrl absolute top-1 right-2">
+        <div class="ctrl absolute top-2 right-2">
           <vue-feather
-            v-if="!isRedHeart(currentPlaying?.id)"
-            class="icon opacity-50 hover:opacity-100 cursor-pointer"
+            class="opacity-50 hover:opacity-100 cursor-pointer"
             type="heart"
-            size="1.125rem"
-            stroke-width="1.5"
-            @click="setRedHeart(toRaw(currentPlaying), true)" />
-          <vue-feather
-            v-if="isRedHeart(currentPlaying?.id)"
-            class="heart cursor-pointer"
-            type="heart"
-            fill="red"
-            stroke="red"
-            size="1.125rem"
-            @click="setRedHeart(toRaw(currentPlaying), false)" />
+            :fill="isRedHearted ? 'red' : 'transparent'"
+            :stroke="isRedHearted ? 'red' : 'white'"
+            size="16px"
+            @click="setRedHeart(toRaw(currentPlaying), !isRedHearted)" />
           <a :title="t('_ADD_TO_PLAYLIST')" @click="showModal('AddToPlaylist', { tracks: [currentPlaying] })">
             <span class="icon opacity-50 hover:opacity-100 li-songlist ml-3" />
           </a>
@@ -58,11 +50,11 @@
           </a>
         </div>
 
-        <div class="title text-center truncate h-8 flex items-end justify-center text-lg">
+        <div class="title text-center truncate flex items-end justify-center text-xl my-2">
           <span v-if="currentPlaying?.source === 'xiami'" style="color: orange; font-size: medium">⚠️</span>
           {{ currentPlaying?.title }}
         </div>
-        <div class="more-info h-6 text-sm flex text-subtitle px-3">
+        <div class="more-info text-sm flex text-subtitle px-3 my-2">
           <div class="current">{{ formatTime(currentPosition) }}</div>
           <div class="singer flex-1 tuncate text-center">
             <a class="cursor-pointer" @click="showPlaylist(currentPlaying?.artist_id)">{{ currentPlaying?.artist }}</a>
@@ -81,7 +73,7 @@
         </div>
       </div>
     </div>
-    <div class="right-control flex flex-none items-center w-80">
+    <div class="right-control flex flex-none items-center w-screen md:w-80 h-20">
       <div class="playlist-toggle cursor-pointer ml-8">
         <span class="icon li-list" @click="togglePlaylist()" />
       </div>
@@ -208,6 +200,7 @@ let myProgress = $computed(() => player.myProgress);
 let currentDuration = $computed(() => player.currentDuration);
 let currentPosition = $computed(() => player.currentPosition);
 let currentPlaying = $computed(() => player.currentPlaying);
+let isRedHearted = $computed(() => isRedHeart(currentPlaying?.id));
 
 if (isElectron()) {
   window.api?.onLyricWindow((arg: string) => {

From 0a7b2e5eec628270e255eee5a5a5dbd28d89fddc Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:53:20 +0800
Subject: [PATCH 07/35] minor fixes

---
 src/components/Playerbar.vue | 4 ++--
 src/views/NowPlaying.vue     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index 49bfeb24..95cbd23a 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="footer flex flex-wrap gap-y-4 relative z-20 border-t border-default">
-    <div class="flex flex-none justify-center gap-4 items-center w-screen md:w-80 h-20 text-4xl">
+    <div class="flex flex-none justify-center gap-4 items-center w-screen md:w-80 h-24 text-4xl">
       <span class="li-previous text-prevnext" @click="prevTrack()" />
       <span
         class="li-play play text-play hover:text-play-hover"
@@ -73,7 +73,7 @@
         </div>
       </div>
     </div>
-    <div class="right-control flex flex-none items-center w-screen md:w-80 h-20">
+    <div class="right-control flex flex-none items-center w-screen md:w-80 h-24">
       <div class="playlist-toggle cursor-pointer ml-8">
         <span class="icon li-list" @click="togglePlaylist()" />
       </div>
diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index db15823f..54b5120c 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div
-      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-20 duration-300 app-region-nodrag bg-now-playing"
+      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-24 duration-300 app-region-nodrag bg-now-playing"
       :class="{
         'overflow-y-scroll': commentActive,
         'overflow-hidden': !commentActive,

From b7fdf60908ac4d6ac04130073700fc597cf3496d Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:56:27 +0800
Subject: [PATCH 08/35] Add back cursor

---
 src/components/Playerbar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index 95cbd23a..97ca0eb5 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="footer flex flex-wrap gap-y-4 relative z-20 border-t border-default">
     <div class="flex flex-none justify-center gap-4 items-center w-screen md:w-80 h-24 text-4xl">
-      <span class="li-previous text-prevnext" @click="prevTrack()" />
+      <span class="li-previous text-prevnext cursor-pointer" @click="prevTrack()" />
       <span
-        class="li-play play text-play hover:text-play-hover"
+        class="li-play play text-play hover:text-play-hover cursor-pointer"
         :class="isPlaying ? 'li-pause' : 'li-play'"
         @click="playPauseToggle()" />
-      <span class="li-next text-prevnext" @click="nextTrack()" />
+      <span class="li-next text-prevnext cursor-pointer" @click="nextTrack()" />
     </div>
     <div class="main-info w-screen md:flex-1 flex overflow-hidden bg-footer-main z-30">
       <div v-if="playlist.length == 0" class="logo-banner text-center flex-1 flex items-center h-20 w-20">

From a190ae2cb348cbd7de6a0d568d2c52ca9003d914 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 17:59:42 +0800
Subject: [PATCH 09/35] Fix netease playlist cover issue

---
 src/components/PlaylistGrid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PlaylistGrid.vue b/src/components/PlaylistGrid.vue
index 73e98628..6b7243ad 100644
--- a/src/components/PlaylistGrid.vue
+++ b/src/components/PlaylistGrid.vue
@@ -3,7 +3,7 @@
     <li v-for="i in playlists" :key="i.id" class="group min-h-40">
       <div class="relative">
         <div class="aspect-square bg-cover" style="background-image: url('/images/mycover.jpg')">
-          <img :src="i.cover_img_url" class="m-auto border border-default cursor-pointer object-cover" @click="showPlaylist(i.id)" />
+          <img :src="i.cover_img_url" class="m-auto border border-default cursor-pointer object-cover w-full" @click="showPlaylist(i.id)" />
         </div>
         <div
           class="bottom opacity-0 group-hover:opacity-100 cursor-pointer absolute w-8 h-8 bottom-3 right-3 ease-linear duration-200"

From 4df8ebbd3f8c31eb0f8be828f41d126dc1852268 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Mon, 27 Dec 2021 19:32:12 +0800
Subject: [PATCH 10/35] Add Platform label

---
 src/views/Search.vue | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/views/Search.vue b/src/views/Search.vue
index 134c7879..317795b1 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -4,7 +4,7 @@
     <div class="site-wrapper-innerd">
       <div class="cover-container">
         <div class="searchbox">
-          <SourceTab :tab="condition.tab" :sources="sourceList" :loading="result.loading" @click="changeSourceTab">
+          <SourceTab class="px-10" :tab="condition.tab" :sources="sourceList" :loading="result.loading" @click="changeSourceTab">
             <template #right>
               <div class="search-type float-right">
                 <li
@@ -74,7 +74,7 @@
                     <img class="h-16 w-16 block mr-3" :src="playlist.img_url" err-src="https://y.gtimg.cn/mediastyle/global/img/playlist_300.png" />
                     <div>
                       {{ playlist.title }}
-                      <!-- <span ng-if="isActiveTab('allmusic')" class="source playlist">{{playlist.sourceName}}</span> -->
+                      <span v-if="isAllMusic" class="w-6 px-1 mr-3 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">{{playlist.source}}</span>
                     </div>
                   </a>
                 </div>
@@ -118,22 +118,8 @@ const changeSearchPage = (offset: number) => {
 };
 
 const sourceList = computed(() => [{ name: 'allmusic', displayId: '_ALL_MUSIC' }, ...MediaService.getSourceList().filter((source) => source.searchable)]);
+const isAllMusic = computed(() => condition.tab === 'allmusic');
 </script>
 
 <style>
-ul.detail-songlist li a span.source {
-  border: solid 1px #ccc;
-  border-radius: 4px;
-  margin-right: 10px;
-  display: inline-block;
-  padding: 0 4px;
-  color: #ccc;
-  font-size: 12px;
-  width: 24px;
-  text-align: center;
-}
-ul.detail-songlist li a span.source.playlist {
-  margin-left: 10px;
-  margin-right: 0;
-}
 </style>

From c34d53adec869aa7d6a786f20fe45f83dbd142e3 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 28 Dec 2021 14:05:30 +0800
Subject: [PATCH 11/35] Make Playerbar more responsive

---
 src/components/Playerbar.vue      |  2 +-
 src/components/PlayerbarPopup.vue | 25 +++++++++++--------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index 97ca0eb5..81c09a5a 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -38,7 +38,7 @@
             type="heart"
             :fill="isRedHearted ? 'red' : 'transparent'"
             :stroke="isRedHearted ? 'red' : 'white'"
-            size="16px"
+            size="1rem"
             @click="setRedHeart(toRaw(currentPlaying), !isRedHearted)" />
           <a :title="t('_ADD_TO_PLAYLIST')" @click="showModal('AddToPlaylist', { tracks: [currentPlaying] })">
             <span class="icon opacity-50 hover:opacity-100 li-songlist ml-3" />
diff --git a/src/components/PlayerbarPopup.vue b/src/components/PlayerbarPopup.vue
index cc7ea91c..b95f5840 100644
--- a/src/components/PlayerbarPopup.vue
+++ b/src/components/PlayerbarPopup.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="menu-modal fixed top-0 right-0 left-0 bg-white bg-opacity-20" :class="{ 'bottom-20': !hidden }" @click="close()" />
+  <div class="menu-modal fixed top-0 right-0 left-0 bg-white bg-opacity-20" :class="{ 'bottom-24': !hidden }" @click="close()" />
   <div
     class="menu bg-theme fixed overflow-hidden border-default rounded-t-lg h-96"
-    :class="{ 'bottom-20 opacity-100': !hidden, '-bottom-80 opacity-0': hidden }">
+    :class="{ 'bottom-24 opacity-100': !hidden, '-bottom-80 opacity-0': hidden }">
     <div class="menu-header text-sm h-10 border-b border-default flex items-center bg-menu">
       <span class="menu-title flex-1 px-4 border-default border-r">{{ t('_TOTAL_SONG_PREFIX') }} {{ playlist.length }} {{ t('_TOTAL_SONG_POSTFIX') }}</span>
       <a class="add-all pr-4 flex items-center cursor-pointer" @click="showModal('AddToPlaylist', { tracks: playlist })">
@@ -18,7 +18,7 @@
         <vue-feather size="1.25rem" type="x"></vue-feather>
       </a>
     </div>
-    <ul class="menu-list overflow-y-scroll text-sm align-middle">
+    <ul class="menu-list overflow-y-auto text-sm align-middle h-80">
       <DragDropZone
         v-for="(song, index) in playlist"
         :id="'song_' + song.id"
@@ -32,15 +32,14 @@
         @mouseenter="song.highlight = true"
         @mouseleave="song.highlight = undefined"
         @drop="onCurrentPlayingSongDrop(song, $event)">
-        <div class="w-8">
-          <span> {{ index + 1 }}</span>
+        <div class="w-8 flex justify-end">
+          <span>{{ index + 1 }}</span>
         </div>
-        <div class="song-status-icon w-8">
+        <div class="song-status-icon w-8 flex justify-center">
           <vue-feather v-show="currentPlaying.id == song.id" size="1rem" type="play"></vue-feather>
         </div>
         <div class="song-title flex-2" :class="song.disabled ? 'text-disabled' : ''">
           <a class="cursor-pointer" @click="playFromPlaylist(song)">
-            <span v-if="song.source === 'xiami'" style="color: orange; border-radius: 12px; border: solid 1px; padding: 0 4px">⚠️ 🦐</span>
             {{ song.title }}
           </a>
         </div>
@@ -112,16 +111,14 @@ let playlist: any = $computed(() => player.playlist.value);
 let currentPlaying: any = $computed(() => player.currentPlaying || {});
 </script>
 <style>
-.footer .menu ul.menu-list {
-  height: 21.5rem;
-}
-.footer .menu {
-  left: 300px;
-  right: 300px;
+.menu {
+  --menu-width: 60rem;
+  width: var(--menu-width);
+  left: calc((100% - var(--menu-width)) / 2);
   -webkit-app-region: no-drag;
 }
 
-.footer .menu ul.menu-list li .song-status-icon svg {
+.song-status-icon svg {
   fill: var(--important-color);
   stroke: var(--important-color);
 }

From 8f64cadac259dacb0a7d19de574e60693a38565f Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 28 Dec 2021 14:05:43 +0800
Subject: [PATCH 12/35] Make settings page more responsive

---
 src/views/Home.vue     |  8 ++++----
 src/views/Settings.vue | 23 ++++-------------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8b01a781..68d6c541 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -333,10 +333,10 @@ button {
   color: var(--text-default-color);
   /* border: solid 1px var(--button-background-color); */
   border: none;
-  border-radius: 4px;
-  padding: 5px;
-  min-width: 80px;
-  min-height: 32px;
+  border-radius: 0.25rem;
+  padding: 0.3rem;
+  min-width: 5rem;
+  min-height: 2rem;
 }
 button:hover {
   background-color: var(--button-hover-background-color);
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index e0415aa7..09010fc1 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -477,12 +477,12 @@ EventService.on('github:status', updateGithubStatus);
 </script>
 <style>
 .settings-input {
-  margin-left: 10px;
+  margin-left: 0.5rem;
   text-align: left;
   background-color: var(--content-background-color);
   border: 1px solid var(--search-input-background-color);
-  border-radius: 4px;
-  margin-right: 4px;
+  border-radius: 0.25rem;
+  margin-right: 0.25rem;
   color: var(--text-default-color);
   transition: background-color 0.2s;
 }
@@ -493,25 +493,10 @@ EventService.on('github:status', updateGithubStatus);
   color: var(--lyric-default-color);
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 2.5rem;
   overflow: hidden;
 }
 
-/* .page .settings-content {
-  margin: 0 25px 25px 25px;
-} */
-/* .page .settings-content label.upload-button {
-  padding: 5px;
-  background: var(--button-background-color);
-  margin-right: 4px;
-  color: var(--text-default-color);
-  cursor: pointer;
-}
-
-.page .settings-content label.upload-button:hover {
-  background: var(--button-hover-background-color);
-} */
-
 /* .page .settings-content .shortcut {
   display: flex;
   margin-top: 10px;

From 609a32281fcdf3bb5685c61885b1c591a55bc636 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 28 Dec 2021 14:24:42 +0800
Subject: [PATCH 13/35] format and code issue fix

---
 src/components/Playerbar.vue        | 5 +----
 src/components/PlaylistGrid.vue     | 4 ++--
 src/components/TrackRow.vue         | 4 ++--
 src/components/modals/OpenLogin.vue | 2 +-
 src/views/Playlist.vue              | 2 +-
 src/views/Search.vue                | 7 ++++---
 6 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index 81c09a5a..6e36a34f 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -2,10 +2,7 @@
   <div class="footer flex flex-wrap gap-y-4 relative z-20 border-t border-default">
     <div class="flex flex-none justify-center gap-4 items-center w-screen md:w-80 h-24 text-4xl">
       <span class="li-previous text-prevnext cursor-pointer" @click="prevTrack()" />
-      <span
-        class="li-play play text-play hover:text-play-hover cursor-pointer"
-        :class="isPlaying ? 'li-pause' : 'li-play'"
-        @click="playPauseToggle()" />
+      <span class="li-play play text-play hover:text-play-hover cursor-pointer" :class="isPlaying ? 'li-pause' : 'li-play'" @click="playPauseToggle()" />
       <span class="li-next text-prevnext cursor-pointer" @click="nextTrack()" />
     </div>
     <div class="main-info w-screen md:flex-1 flex overflow-hidden bg-footer-main z-30">
diff --git a/src/components/PlaylistGrid.vue b/src/components/PlaylistGrid.vue
index 6b7243ad..1824086d 100644
--- a/src/components/PlaylistGrid.vue
+++ b/src/components/PlaylistGrid.vue
@@ -1,9 +1,9 @@
 <template>
   <ul class="playlist-covers m-0 py-0 relative grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-5">
     <li v-for="i in playlists" :key="i.id" class="group min-h-40">
-      <div class="relative">
+      <div class="relative shadow-lg">
         <div class="aspect-square bg-cover" style="background-image: url('/images/mycover.jpg')">
-          <img :src="i.cover_img_url" class="m-auto border border-default cursor-pointer object-cover w-full" @click="showPlaylist(i.id)" />
+          <img :src="i.cover_img_url" class="m-auto cursor-pointer rounded object-cover w-full" @click="showPlaylist(i.id)" />
         </div>
         <div
           class="bottom opacity-0 group-hover:opacity-100 cursor-pointer absolute w-8 h-8 bottom-3 right-3 ease-linear duration-200"
diff --git a/src/components/TrackRow.vue b/src/components/TrackRow.vue
index 7bb899d4..ce2e119d 100644
--- a/src/components/TrackRow.vue
+++ b/src/components/TrackRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-none w-8 text-cneter">
+  <div v-if="index !== undefined" class="flex-none w-8 text-cneter">
     <span>{{ index + 1 }}</span>
   </div>
   <div class="title flex-2 flex overflow-hidden items-center max-h-12">
@@ -56,7 +56,7 @@ const { song, isMine, isLocal, listId, index } = defineProps<{
   isMine?: boolean | string;
   isLocal?: boolean;
   listId?: string;
-  index?: string;
+  index?: number;
 }>();
 import { inject, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/src/components/modals/OpenLogin.vue b/src/components/modals/OpenLogin.vue
index d2fff1b2..8531c44a 100644
--- a/src/components/modals/OpenLogin.vue
+++ b/src/components/modals/OpenLogin.vue
@@ -33,5 +33,5 @@ const { openLogin, refreshAuthStatus } = useAuth();
 const { t } = useI18n();
 </script>
 <script lang="ts">
-export default {}
+export default {};
 </script>
diff --git a/src/views/Playlist.vue b/src/views/Playlist.vue
index 3ba71e66..18e44b20 100644
--- a/src/views/Playlist.vue
+++ b/src/views/Playlist.vue
@@ -56,7 +56,7 @@
         </div>-->
         <li class="head border-t-2 border-b-2 border-transparent text-inactive -mb-2px group flex relative items-center px-6 h-12">
           <div class="flex-none w-8">
-            <span> No. </span>
+            <span>No.</span>
           </div>
           <div class="title flex-2 truncate flex">
             <a>{{ t('_SONGS') + '(' + songs.length + ')' }}</a>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 317795b1..37a956a8 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -74,7 +74,9 @@
                     <img class="h-16 w-16 block mr-3" :src="playlist.img_url" err-src="https://y.gtimg.cn/mediastyle/global/img/playlist_300.png" />
                     <div>
                       {{ playlist.title }}
-                      <span v-if="isAllMusic" class="w-6 px-1 mr-3 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">{{playlist.source}}</span>
+                      <span v-if="isAllMusic" class="w-6 px-1 mr-3 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">
+                        {{ playlist.source }}
+                      </span>
                     </div>
                   </a>
                 </div>
@@ -121,5 +123,4 @@ const sourceList = computed(() => [{ name: 'allmusic', displayId: '_ALL_MUSIC' }
 const isAllMusic = computed(() => condition.tab === 'allmusic');
 </script>
 
-<style>
-</style>
+<style></style>

From c1d6507206ebbeac8337368321d65d3845dbc95c Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 28 Dec 2021 20:08:50 +0800
Subject: [PATCH 14/35] Update the path of static assests

---
 src/components/PlaylistGrid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PlaylistGrid.vue b/src/components/PlaylistGrid.vue
index 1824086d..2467fea6 100644
--- a/src/components/PlaylistGrid.vue
+++ b/src/components/PlaylistGrid.vue
@@ -2,7 +2,7 @@
   <ul class="playlist-covers m-0 py-0 relative grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-5">
     <li v-for="i in playlists" :key="i.id" class="group min-h-40">
       <div class="relative shadow-lg">
-        <div class="aspect-square bg-cover" style="background-image: url('/images/mycover.jpg')">
+        <div class="aspect-square bg-cover" style="background-image: url('/assets/mycover.jpg')">
           <img :src="i.cover_img_url" class="m-auto cursor-pointer rounded object-cover w-full" @click="showPlaylist(i.id)" />
         </div>
         <div

From 47834a4a2251561dcb29961921b9f7777c10725d Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 28 Dec 2021 20:09:17 +0800
Subject: [PATCH 15/35] Implement Toggle Button Group

---
 src/components/SettingButton.vue |  5 +++-
 src/components/ToggleButtons.vue | 24 ++++++++++++++++
 src/views/Settings.vue           | 47 +++++++++++++++++++++++++-------
 3 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ToggleButtons.vue

diff --git a/src/components/SettingButton.vue b/src/components/SettingButton.vue
index e13e8921..0fb42fe8 100644
--- a/src/components/SettingButton.vue
+++ b/src/components/SettingButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="setting-button p-[5px] mr-1 rounded cursor-pointer leading-[1.4]" @click="emit('click')">{{ text }}</button>
+  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4]" @click="emit('click')">{{ text }}</button>
 </template>
 <script setup lang="ts">
 const emit = defineEmits(['click']);
@@ -7,6 +7,9 @@ const { text } = defineProps<{
   text: string;
 }>();
 </script>
+<script lang="ts">
+export default {};
+</script>
 <style>
 .setting-button {
   background: var(--button-background-color);
diff --git a/src/components/ToggleButtons.vue b/src/components/ToggleButtons.vue
new file mode 100644
index 00000000..d3de20fa
--- /dev/null
+++ b/src/components/ToggleButtons.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="toggle overflow-hidden grid grid-flow-col w-fit divide-x divide-y-0 divide-solid rounded-lg">
+    <SettingButton v-for="(button, index) in options" :key="index" class="rounded-none mr-auto" :text="button.text" @click="emit('change', button.value)" />
+    <!-- <SettingButton text="No" /> -->
+  </div>
+</template>
+<script setup lang="ts">
+import SettingButton from './SettingButton.vue';
+const emit = defineEmits(['change']);
+const { options } = defineProps<{
+  options: {
+    text: string;
+    value?: any;
+  }[];
+}>();
+</script>
+<script lang="ts">
+export default {};
+</script>
+<style>
+.toggle {
+  border-color: var(--text-default-color);
+}
+</style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 09010fc1..6dde3748 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -5,10 +5,7 @@
       <div class="cover-container leading-normal">
         <SettingTitle :text="t('_LANGUAGE')" />
         <div class="settings-content mx-7 mb-7 leading-8">
-          <SettingButton text="简体中文" @click="setLocale('zh-CN')" />
-          <SettingButton text="繁体中文" @click="setLocale('zh-TC')" />
-          <SettingButton text="English" @click="setLocale('en-US')" />
-          <SettingButton text="French" @click="setLocale('fr-FR')" />
+          <ToggleButtons :options="locales" @change="setLocale($event)"/>
         </div>
         <SettingTitle :text="t('_BACKUP_PLAYLIST')" />
         <div class="settings-content mx-7 mb-7 leading-8">
@@ -87,12 +84,7 @@
         </div>
         <SettingTitle :text="t('_THEME')" />
         <div class="settings-content mx-7 mb-7 leading-8">
-          <SettingButton :text="t('_THEME_WHITE')" @click="setTheme('white')" />
-          <SettingButton :text="t('_THEME_BLACK')" @click="setTheme('black')" />
-          <!-- <SettingButton :text="t('_THEME_WHITE_TRANSPARENT')" @click="setTheme('white_transparent')" />
-          <SettingButton :text="t('_THEME_BLACK_TRANSPARENT')" @click="setTheme('black_transparent')" /> -->
-          <SettingButton :text="t('_THEME_INFINITE_GRID')" @click="setTheme('infinite_grid')" />
-          <SettingButton :text="t('_THEME_GRIDIENT')" @click="setTheme('gridient')" />
+          <ToggleButtons :options="themes" @change="setTheme($event)"/>
         </div>
         <SettingTitle :text="t('_STYLE')" />
         <div class="settings-content mx-7 mb-7 leading-8">
@@ -355,6 +347,7 @@ import { useI18n } from 'vue-i18n';
 import { version } from '../../package.json';
 import Href from '../components/Href.vue';
 import SettingButton from '../components/SettingButton.vue';
+import ToggleButtons from '../components/ToggleButtons.vue';
 import SettingTitle from '../components/SettingTitle.vue';
 import useSettings from '../composition/settings';
 import { setLocale } from '../i18n';
@@ -473,6 +466,40 @@ const sourceList = [
   }
 ];
 
+const locales = [{
+  text: '简体中文',
+  value: 'zh-CN',
+},{
+  text: '繁体中文',
+  value: 'zh-TC',
+},{
+  text: 'English',
+  value: 'en-US',
+},{
+  text: 'French',
+  value: 'fr-FR',
+}];
+
+const themes = [{
+  text: t('_THEME_WHITE'),
+  value: 'white',
+},{
+  text: t('_THEME_BLACK'),
+  value: 'black',
+},{
+//   text: t('_THEME_WHITE_TRANSPARENT'),
+//   value: 'white_transparent',
+// },{
+//   text: t('_THEME_BLACK_TRANSPARENT'),
+//   value: 'black_transparent',
+// },{
+  text: t('_THEME_INFINITE_GRID'),
+  value: 'infinite_grid',
+},{
+  text: t('_THEME_GRIDIENT'),
+  value: 'gridient',
+}];
+
 EventService.on('github:status', updateGithubStatus);
 </script>
 <style>

From bbbfb33239e0a2d72f0982d35f53613bcf2e702d Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 28 Dec 2021 20:35:50 +0800
Subject: [PATCH 16/35] Add active indictor

---
 src/components/ToggleButtons.vue | 12 ++++-
 src/views/Settings.vue           | 78 ++++++++++++++++++--------------
 2 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/components/ToggleButtons.vue b/src/components/ToggleButtons.vue
index d3de20fa..471ab0f5 100644
--- a/src/components/ToggleButtons.vue
+++ b/src/components/ToggleButtons.vue
@@ -1,17 +1,24 @@
 <template>
   <div class="toggle overflow-hidden grid grid-flow-col w-fit divide-x divide-y-0 divide-solid rounded-lg">
-    <SettingButton v-for="(button, index) in options" :key="index" class="rounded-none mr-auto" :text="button.text" @click="emit('change', button.value)" />
+    <SettingButton
+      v-for="(button, index) in options"
+      :key="index"
+      class="rounded-none mr-auto decoration-2 underline-offset-4"
+      :class="{ underline: selected === index }"
+      :text="button.text"
+      @click="emit('change', button.value)" />
     <!-- <SettingButton text="No" /> -->
   </div>
 </template>
 <script setup lang="ts">
 import SettingButton from './SettingButton.vue';
 const emit = defineEmits(['change']);
-const { options } = defineProps<{
+const { options, selected } = defineProps<{
   options: {
     text: string;
     value?: any;
   }[];
+  selected?: number;
 }>();
 </script>
 <script lang="ts">
@@ -20,5 +27,6 @@ export default {};
 <style>
 .toggle {
   border-color: var(--text-default-color);
+  text-decoration-color: var(--text-default-color);
 }
 </style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 6dde3748..9e743161 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -5,7 +5,7 @@
       <div class="cover-container leading-normal">
         <SettingTitle :text="t('_LANGUAGE')" />
         <div class="settings-content mx-7 mb-7 leading-8">
-          <ToggleButtons :options="locales" @change="setLocale($event)"/>
+          <ToggleButtons :options="locales" :selected="locales.findIndex((i) => i.value === settings.language)" @change="setLocale($event)" />
         </div>
         <SettingTitle :text="t('_BACKUP_PLAYLIST')" />
         <div class="settings-content mx-7 mb-7 leading-8">
@@ -84,7 +84,7 @@
         </div>
         <SettingTitle :text="t('_THEME')" />
         <div class="settings-content mx-7 mb-7 leading-8">
-          <ToggleButtons :options="themes" @change="setTheme($event)"/>
+          <ToggleButtons :options="themes" :selected="themes.findIndex((i) => i.value === settings.theme)" @change="setTheme($event)" />
         </div>
         <SettingTitle :text="t('_STYLE')" />
         <div class="settings-content mx-7 mb-7 leading-8">
@@ -466,39 +466,49 @@ const sourceList = [
   }
 ];
 
-const locales = [{
-  text: '简体中文',
-  value: 'zh-CN',
-},{
-  text: '繁体中文',
-  value: 'zh-TC',
-},{
-  text: 'English',
-  value: 'en-US',
-},{
-  text: 'French',
-  value: 'fr-FR',
-}];
+const locales = [
+  {
+    text: '简体中文',
+    value: 'zh-CN'
+  },
+  {
+    text: '繁体中文',
+    value: 'zh-TC'
+  },
+  {
+    text: 'English',
+    value: 'en-US'
+  },
+  {
+    text: 'French',
+    value: 'fr-FR'
+  }
+];
 
-const themes = [{
-  text: t('_THEME_WHITE'),
-  value: 'white',
-},{
-  text: t('_THEME_BLACK'),
-  value: 'black',
-},{
-//   text: t('_THEME_WHITE_TRANSPARENT'),
-//   value: 'white_transparent',
-// },{
-//   text: t('_THEME_BLACK_TRANSPARENT'),
-//   value: 'black_transparent',
-// },{
-  text: t('_THEME_INFINITE_GRID'),
-  value: 'infinite_grid',
-},{
-  text: t('_THEME_GRIDIENT'),
-  value: 'gridient',
-}];
+const themes = [
+  {
+    text: t('_THEME_WHITE'),
+    value: 'white'
+  },
+  {
+    text: t('_THEME_BLACK'),
+    value: 'black'
+  },
+  {
+    //   text: t('_THEME_WHITE_TRANSPARENT'),
+    //   value: 'white_transparent',
+    // },{
+    //   text: t('_THEME_BLACK_TRANSPARENT'),
+    //   value: 'black_transparent',
+    // },{
+    text: t('_THEME_INFINITE_GRID'),
+    value: 'infinite_grid'
+  },
+  {
+    text: t('_THEME_GRIDIENT'),
+    value: 'gridient'
+  }
+];
 
 EventService.on('github:status', updateGithubStatus);
 </script>

From 1e40dc514a3a9298a5f72127856372d56086a38b Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 15:56:00 +0800
Subject: [PATCH 17/35] Replace checkout with binary toggle button

---
 src/components/ToggleButtons.vue |   4 +-
 src/views/Settings.vue           | 135 ++++++++++++-------------------
 2 files changed, 52 insertions(+), 87 deletions(-)

diff --git a/src/components/ToggleButtons.vue b/src/components/ToggleButtons.vue
index 471ab0f5..f3ebbe08 100644
--- a/src/components/ToggleButtons.vue
+++ b/src/components/ToggleButtons.vue
@@ -3,8 +3,8 @@
     <SettingButton
       v-for="(button, index) in options"
       :key="index"
-      class="rounded-none mr-auto decoration-2 underline-offset-4"
-      :class="{ underline: selected === index }"
+      class="rounded-none mr-auto decoration-2 underline-offset-4 whitespace-pre"
+      :class="{ 'underline': selected === index }"
       :text="button.text"
       @click="emit('change', button.value)" />
     <!-- <SettingButton text="No" /> -->
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 9e743161..fa71235c 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -21,66 +21,36 @@
         </div>
         <SettingTitle :text="t('_NOWPLAYING_DISPLAY')" />
         <div class="settings-content mx-7 mb-7 leading-8">
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingCoverBackground"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="toggleCoverBackground"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingCoverBackground"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="toggleCoverBackground"></vue-feather>
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_COVER_BACKGROUND_NOTICE') }}
-          </div>
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingBitrate"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="toggleBitrate"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingBitrate"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="toggleBitrate"></vue-feather>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingCoverBackground)"
+            @change="setSettings({ enableNowplayingCoverBackground: $event })" />
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_BITRATE_NOTICE') }}
-          </div>
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingPlatform"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="togglePlayingPlatform"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingPlatform"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="togglePlayingPlatform"></vue-feather>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingBitrate)"
+            @change="setSettings({ enableNowplayingBitrate: $event })" />
+
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_PLATFORM_NOTICE') }}
-          </div>
-          <div class="shortcut flex items-center">
-            <vue-feather
-              v-show="!settings.enableNowplayingComment"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="togglePlayingComment"></vue-feather>
-            <vue-feather
-              v-show="settings.enableNowplayingComment"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="togglePlayingComment"></vue-feather>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingPlatform)"
+            @change="setSettings({ enableNowplayingPlatform: $event })" />
+
+          <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_COMMENT') }}
-          </div>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingComment)"
+            @change="setSettings({ enableNowplayingComment: $event })" />
         </div>
         <SettingTitle :text="t('_THEME')" />
         <div class="settings-content mx-7 mb-7 leading-8">
@@ -107,37 +77,21 @@
         </div>
         <SettingTitle :text="t('_AUTO_CHOOSE_SOURCE')" />
         <div class="settings-content mx-7 mb-7 leading-8">
-          <div class="shortcut btn btn-primary confirm-button flex items-center">
-            <vue-feather
-              v-show="!settings.enableAutoChooseSource"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="square"
-              @click="setAutoChooseSource(true)"></vue-feather>
-            <vue-feather
-              v-show="settings.enableAutoChooseSource"
-              class="cursor-pointer mr-2"
-              size="1.25rem"
-              type="check-square"
-              @click="setAutoChooseSource(false)"></vue-feather>
+          <label class="shortcut btn btn-primary confirm-button flex items-center">
             {{ t('_AUTO_CHOOSE_SOURCE_NOTICE') }}
-          </div>
+          </label>
+          <ToggleButtons
+            :options="singleSwitch"
+            :selected="singleSwitch.findIndex((i) => i.value === settings.enableAutoChooseSource)"
+            @change="setAutoChooseSource($event)" />
           <div v-show="settings.enableAutoChooseSource" class="search-description mt-8">{{ t('_AUTO_CHOOSE_SOURCE_LIST') }}</div>
-          <div v-show="settings.enableAutoChooseSource" class="search-source-list flex items-center flex-wrap leading-10">
-            <div v-for="item in sourceList" :key="item.name" class="search-source w-32 flex items-center">
-              <vue-feather
-                v-show="settings.autoChooseSourceList.indexOf(item.name) === -1"
-                type="square"
-                class="cursor-pointer mr-2"
-                size="1.25rem"
-                @click="enableSource(item.name)"></vue-feather>
-              <vue-feather
-                v-show="settings.autoChooseSourceList.indexOf(item.name) > -1"
-                type="check-square"
-                class="cursor-pointer mr-2"
-                size="1.25rem"
-                @click="disableSource(item.name)"></vue-feather>
-              {{ t(item.displayId) }}
+          <div v-show="settings.enableAutoChooseSource" class="search-source-list flex items-center flex-wrap leading-10 gap-4">
+            <div v-for="item in sourceList" :key="item.name" class="search-source flex">
+              <label class="w-32 text-center">{{ t(item.displayId) }}</label>
+              <ToggleButtons
+                :options="singleSwitch"
+                :selected="settings.autoChooseSourceList.includes(item.name) ? 0 : 1"
+                @change="($event ? enableSource : disableSource)(item.name)" />
             </div>
           </div>
         </div>
@@ -510,6 +464,17 @@ const themes = [
   }
 ];
 
+const singleSwitch = [
+  {
+    text: '  ✔  ',
+    value: true
+  },
+  {
+    text: '  ✖  ',
+    value: false
+  }
+];
+
 EventService.on('github:status', updateGithubStatus);
 </script>
 <style>

From 1ea78610b7b529b816e888befd07f4fe770a79ac Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 15:57:43 +0800
Subject: [PATCH 18/35] format

---
 src/components/ToggleButtons.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ToggleButtons.vue b/src/components/ToggleButtons.vue
index f3ebbe08..909e5ba7 100644
--- a/src/components/ToggleButtons.vue
+++ b/src/components/ToggleButtons.vue
@@ -4,7 +4,7 @@
       v-for="(button, index) in options"
       :key="index"
       class="rounded-none mr-auto decoration-2 underline-offset-4 whitespace-pre"
-      :class="{ 'underline': selected === index }"
+      :class="{ underline: selected === index }"
       :text="button.text"
       @click="emit('change', button.value)" />
     <!-- <SettingButton text="No" /> -->

From 080441250b08250b28e8a4d39df5566a98ca17fd Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 16:47:30 +0800
Subject: [PATCH 19/35] Add blur effect for lyrics

---
 src/views/NowPlaying.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index 54b5120c..a271538d 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -94,9 +94,13 @@
               v-for="line in lyricArray"
               :key="line.lineNumber"
               :data-line="line.lineNumber"
-              :style="{ fontWeight: lyricFontWeight, fontSize: `${lyricFontSize}px` }"
+              :style="{
+                fontWeight: lyricFontWeight,
+                fontSize: `${lyricFontSize * (isHighlighted(line.lineNumber, line.translationFlag) ? 1.2 : 1)}px`,
+                filter: `blur(${Math.min(Math.abs(line.lineNumber - (line.translationFlag ? lyricLineNumberTrans : lyricLineNumber)) * 0.25, 1)}px)`
+              }"
               :class="{
-                highlight: (!line.translationFlag && line.lineNumber == lyricLineNumber) || (line.translationFlag && line.lineNumber == lyricLineNumberTrans),
+                highlight: isHighlighted(line.lineNumber, line.translationFlag),
                 hidden: line.translationFlag && !settings.enableLyricTranslation,
                 'mt-1': line.translationFlag,
                 'mt-4': !line.translationFlag
@@ -175,6 +179,7 @@ const showPlaylist = (playlistId?: string) => {
 };
 
 const toggleLyricTranslation = () => setSettings({ enableLyricTranslation: !settings.enableLyricTranslation });
+const isHighlighted = (n: number, flag: boolean) => n == (flag ? lyricLineNumberTrans : lyricLineNumber);
 
 const showImage = (e: any, url: any) => {
   e.target.src = url;

From 199661dd37afc8c9e6b830e760cd76f4da2dc258 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 16:47:44 +0800
Subject: [PATCH 20/35] Fix nowplaying layout

---
 src/views/NowPlaying.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index a271538d..7010efe2 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div
-      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-24 duration-300 app-region-nodrag bg-now-playing"
+      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-24 duration-300 app-region-nodrag bg-now-playing justify-center"
       :class="{
         'overflow-y-scroll': commentActive,
         'overflow-hidden': !commentActive,
@@ -17,7 +17,22 @@
         :style="{ backgroundImage: `url(${currentPlaying?.img_url}` }" />
 
       <div
-        class="translate-switch app-region-nodrag h-6 w-6 border flex items-center justify-center absolute bottom-10 right-10 cursor-pointer text-neutral-400 hover:text-default"
+        class="
+          translate-switch
+          app-region-nodrag
+          h-6
+          w-6
+          border
+          flex
+          items-center
+          justify-center
+          absolute
+          bottom-10
+          right-10
+          cursor-pointer
+          text-neutral-400
+          hover:text-default
+        "
         :class="{ 'text-default': settings.enableLyricTranslation }"
         @click="toggleLyricTranslation()">
         译
@@ -38,9 +53,9 @@
                 </svg>
       </div>-->
 
-      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10">
+      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10 justify-center">
         <div class="detail-head overflow-hidden flex-none w-[30rem] 2xl:w-[500px] flex justify-center">
-          <div class="detail-head-cover w-72 2xl:w-96 mt-32 2xl:mr-28 transition-all ease-in-out">
+          <div class="detail-head-cover w-72 2xl:w-96 2xl:mr-28 transition-all ease-in-out">
             <img class="w-full aspect-square object-cover rounded" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
           </div>
           <div class="detail-head-title">
@@ -48,7 +63,7 @@
             <a open-url="currentPlaying.source_url" title="原始链接" class="link">原始链接</a>-->
           </div>
         </div>
-        <div class="detail-songinfo flex app-region-nodrag overflow-hidden mt-28 flex-col flex-1">
+        <div class="detail-songinfo flex app-region-nodrag overflow-hidden flex-col flex-1">
           <div class="title flex items-start">
             <h2 class="font-normal text-3xl mr-4 mb-4">{{ currentPlaying?.title }}</h2>
             <span

From 4f786f5814d685df2107068a5eb3c252eca74ddb Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 16:48:15 +0800
Subject: [PATCH 21/35] format

---
 src/views/NowPlaying.vue | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index 7010efe2..4703cf6b 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -17,22 +17,7 @@
         :style="{ backgroundImage: `url(${currentPlaying?.img_url}` }" />
 
       <div
-        class="
-          translate-switch
-          app-region-nodrag
-          h-6
-          w-6
-          border
-          flex
-          items-center
-          justify-center
-          absolute
-          bottom-10
-          right-10
-          cursor-pointer
-          text-neutral-400
-          hover:text-default
-        "
+        class="translate-switch app-region-nodrag h-6 w-6 border flex items-center justify-center absolute bottom-10 right-10 cursor-pointer text-neutral-400 hover:text-default"
         :class="{ 'text-default': settings.enableLyricTranslation }"
         @click="toggleLyricTranslation()">
         译

From af60f38e6059b3e880538752a714e6c6f573427b Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 19:17:31 +0800
Subject: [PATCH 22/35] Make Settings page responsive

---
 src/components/SettingBlock.vue | 28 ++++++++++++
 src/components/SettingTitle.vue | 23 ----------
 src/views/Settings.vue          | 77 +++++++++++++++------------------
 3 files changed, 64 insertions(+), 64 deletions(-)
 create mode 100644 src/components/SettingBlock.vue
 delete mode 100644 src/components/SettingTitle.vue

diff --git a/src/components/SettingBlock.vue b/src/components/SettingBlock.vue
new file mode 100644
index 00000000..10cfa00c
--- /dev/null
+++ b/src/components/SettingBlock.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="m-2">
+    <div class="settings-title pb-2 mb-2 mx-8">
+      <span>{{ title }}</span>
+    </div>
+    <div class="settings-content mx-7 mb-7 leading-8">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const { title } = defineProps<{
+  title: string;
+}>();
+</script>
+<style>
+.settings-title {
+  border-bottom: solid 1px var(--line-default-color);
+  font-size: 1.25rem;
+  max-width: 48rem;
+}
+.settings-title:first-of-type {
+  margin-top: 1.25rem;
+}
+.settings-content {
+  max-width: 48rem;
+}
+</style>
diff --git a/src/components/SettingTitle.vue b/src/components/SettingTitle.vue
deleted file mode 100644
index 66c910a0..00000000
--- a/src/components/SettingTitle.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="settings-title">
-    <span>{{ text }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-const { text } = defineProps<{
-  text: string;
-}>();
-</script>
-<style>
-.settings-title {
-  border-bottom: solid 1px var(--line-default-color);
-  padding-bottom: 10px;
-  max-width: 800px;
-  margin: 0 25px;
-  margin-bottom: 10px;
-  font-size: 20px;
-}
-.settings-title:first-of-type {
-  margin-top: 20px;
-}
-</style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index fa71235c..aa19ad22 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,25 +2,23 @@
   <!-- content page: 设置 -->
   <div class="page" ng-init="lastfm.updateStatus()">
     <div class="site-wrapper-innerd">
-      <div class="cover-container leading-normal">
-        <SettingTitle :text="t('_LANGUAGE')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+      <div class="cover-container leading-normal flex flex-col flex-wrap content-evenly	 2xl:h-[calc(100vh-10rem)]">
+        <SettingBlock :title="t('_LANGUAGE')">
           <ToggleButtons :options="locales" :selected="locales.findIndex((i) => i.value === settings.language)" @change="setLocale($event)" />
-        </div>
-        <SettingTitle :text="t('_BACKUP_PLAYLIST')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        </SettingBlock>
+        <SettingBlock :title="t('_BACKUP_PLAYLIST')">
           <p>{{ t('_BACKUP_WARNING') }}</p>
           <div>
             <SettingButton :text="t('_BACKUP_PLAYLIST')" @click="showModal('GistExport')" />
           </div>
-        </div>
-        <SettingTitle :text="t('_RECOVER_PLAYLIST')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        </SettingBlock>
+
+        <SettingBlock :title="t('_RECOVER_PLAYLIST')">
           <p>{{ t('_RECOVER_WARNING') }}</p>
           <SettingButton :text="t('_RECOVER_PLAYLIST')" @click="showModal('GistImport')" />
-        </div>
-        <SettingTitle :text="t('_NOWPLAYING_DISPLAY')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        </SettingBlock>
+
+        <SettingBlock :title="t('_NOWPLAYING_DISPLAY')">
           <label class="shortcut flex items-center mt-4">
             {{ t('_NOWPLAYING_COVER_BACKGROUND_NOTICE') }}
           </label>
@@ -51,13 +49,13 @@
             :options="singleSwitch"
             :selected="singleSwitch.findIndex((i) => i.value === settings.enableNowplayingComment)"
             @change="setSettings({ enableNowplayingComment: $event })" />
-        </div>
-        <SettingTitle :text="t('_THEME')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        </SettingBlock>
+
+        <SettingBlock :title="t('_THEME')">
           <ToggleButtons :options="themes" :selected="themes.findIndex((i) => i.value === settings.theme)" @change="setTheme($event)" />
-        </div>
-        <SettingTitle :text="t('_STYLE')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        </SettingBlock>
+
+        <SettingBlock :title="t('_STYLE')">
           <p>
             {{ `${t('_LYRIC_SIZE')}` }}
             <input v-model.lazy="settings.lyricFontSize" class="settings-input w-16 pl-[6px] py-0" type="number" min="10" max="40" />
@@ -74,9 +72,9 @@
           <div class="setting-font-preview">
             <p :style="{ fontWeight: settings.lyricFontWeight, fontSize: `${settings.lyricFontSize}px` }">Listen1，自由的享受音乐的乐趣</p>
           </div>
-        </div>
-        <SettingTitle :text="t('_AUTO_CHOOSE_SOURCE')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        </SettingBlock>
+
+        <SettingBlock :title="t('_AUTO_CHOOSE_SOURCE')">
           <label class="shortcut btn btn-primary confirm-button flex items-center">
             {{ t('_AUTO_CHOOSE_SOURCE_NOTICE') }}
           </label>
@@ -94,20 +92,18 @@
                 @change="($event ? enableSource : disableSource)(item.name)" />
             </div>
           </div>
-        </div>
-        <SettingTitle :text="t('_CONNECT_TO_GITHUB')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
-          <div>
-            <p>{{ t('_STATUS') }}: {{ githubStatusText }}</p>
-            <SettingButton v-show="githubStatus == 0" :text="t('_CONNECT_TO_GITHUB')" @click="openGithubAuth()" />
-            <SettingButton v-show="githubStatus == 1" :text="t('_RECONNECT')" @click="showModal('GithubAuth')" />
-            <SettingButton v-show="githubStatus == 2" :text="t('_CANCEL_CONNECT')" @click="logoutGithub()" />
-          </div>
-        </div>
+        </SettingBlock>
+
+        <SettingBlock :title="t('_CONNECT_TO_GITHUB')">
+          <p>{{ t('_STATUS') }}: {{ githubStatusText }}</p>
+          <SettingButton v-show="githubStatus == 0" :text="t('_CONNECT_TO_GITHUB')" @click="openGithubAuth()" />
+          <SettingButton v-show="githubStatus == 1" :text="t('_RECONNECT')" @click="showModal('GithubAuth')" />
+          <SettingButton v-show="githubStatus == 2" :text="t('_CANCEL_CONNECT')" @click="logoutGithub()" />
+        </SettingBlock>
         <!-- <div ng-if="isChrome" class="settings-title">
           <span>{{ $t('_CLOSE_TAB_ACTION') }}({{ $t('_VALID_AFTER_RESTART') }})</span>
         </div>
-        <div ng-if="isChrome" class="settings-content mx-7 mb-7 leading-8">
+        <div ng-if="isChrome" class="settings-content">
           <div class="shortcut flex items-center">
             <vue-feather v-show="!enableStopWhenClose" type="square" ng-click="setStopWhenClose(true)"></vue-feather>
             <vue-feather v-show="enableStopWhenClose" type="check-square" ng-click="setStopWhenClose(false)"></vue-feather>
@@ -120,7 +116,7 @@
         <div class="settings-title">
           <span>{{ $t('_NOWPLAYING_DISPLAY') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div class="shortcut flex items-center">
             <vue-feather v-show="!enableNowplayingCoverBackground" type="square" ng-click="setNowplayingCoverBackground(true)"></vue-feather>
             <vue-feather v-show="enableNowplayingCoverBackground" type="check-square" ng-click="setNowplayingCoverBackground(true)"></vue-feather>
@@ -140,7 +136,7 @@
         <div class="settings-title">
           <span>{{ $t('_LYRIC_DISPLAY') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div class="shortcut flex items-center" ng-if="!isChrome">
             <vue-feather v-show="!enableLyricFloatingWindow" type="square" ng-click="openLyricFloatingWindow(true)"></vue-feather>
             <vue-feather v-show="enableLyricFloatingWindow" type="check-square" ng-click="openLyricFloatingWindow(true)"></vue-feather>
@@ -164,7 +160,7 @@
         <div class="settings-title">
           <span>{{ $t('_CONNECT_TO_LASTFM') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div>
             <p>{{ $t('_STATUS') }}： lastfm.getStatusText()</p>
             <button class="btn btn-primary confirm-button" ng-show="!lastfm.isAuthRequested()" ng-click="lastfm.getAuth(); showDialog(4);">
@@ -185,7 +181,7 @@
         <div class="settings-title">
           <span>{{ $t('_SHORTCUTS') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <div class="settings-content">
           <div class="shortcut_table">
             <div class="shortcut_table-header">
               <div class="shortcut_table-function">{{ $t('_SHORTCUTS_FUNCTION') }}</div>
@@ -264,14 +260,13 @@
         <div class="settings-title" ng-if="!isChrome">
           <span>{{ $t('_PROXY_CONFIG') }}</span>
         </div>
-        <div class="settings-content mx-7 mb-7 leading-8" ng-if="!isChrome">
+        <div class="settings-content" ng-if="!isChrome">
           <span>{{ $t('_PROXY_CONFIG') }}:</span>
           proxyMode.displayText
           <span v-show="proxyMode_name == 'custom'">proxyRules</span>
           <button ng-click="showDialog(12)">{{ $t('_MODIFY') }}</button>
         </div>-->
-        <SettingTitle :text="t('_ABOUT')" />
-        <div class="settings-content mx-7 mb-7 leading-8">
+        <SettingBlock :title="t('_ABOUT')">
           <p>
             Listen 1 {{ t('_HOMEPAGE') }}:
             <Href to="https://listen1.github.io/listen1/" />
@@ -289,7 +284,7 @@
           <p>{{ `${t('_VERSION')}: v${version}` }} (DEVELOPER VERSION)</p>
           <p>LICENSE: {{ t('_LICENSE_NOTICE') }}</p>
           <!-- <p v-show="lastestVersion != ''">{{ $t('_LATEST_VERSION') }}: lastestVersion</p> -->
-        </div>
+        </SettingBlock>
       </div>
     </div>
   </div>
@@ -302,7 +297,7 @@ import { version } from '../../package.json';
 import Href from '../components/Href.vue';
 import SettingButton from '../components/SettingButton.vue';
 import ToggleButtons from '../components/ToggleButtons.vue';
-import SettingTitle from '../components/SettingTitle.vue';
+import SettingBlock from '../components/SettingBlock.vue';
 import useSettings from '../composition/settings';
 import { setLocale } from '../i18n';
 import EventService from '../services/EventService';

From cc41bc7e6595f2d2be96c5f95415166df49e0684 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 19:23:46 +0800
Subject: [PATCH 23/35] format

---
 src/views/Settings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index aa19ad22..2b17c969 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,7 +2,7 @@
   <!-- content page: 设置 -->
   <div class="page" ng-init="lastfm.updateStatus()">
     <div class="site-wrapper-innerd">
-      <div class="cover-container leading-normal flex flex-col flex-wrap content-evenly	 2xl:h-[calc(100vh-10rem)]">
+      <div class="cover-container leading-normal flex flex-col flex-wrap content-evenly 2xl:h-[calc(100vh-10rem)]">
         <SettingBlock :title="t('_LANGUAGE')">
           <ToggleButtons :options="locales" :selected="locales.findIndex((i) => i.value === settings.language)" @change="setLocale($event)" />
         </SettingBlock>

From 8116385ad668786324ba25d0bf3e58b012901f92 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Wed, 29 Dec 2021 20:14:21 +0800
Subject: [PATCH 24/35] Dynamic import images

---
 src/components/Playerbar.vue         | 5 +++--
 src/components/PlaylistGrid.vue      | 3 ++-
 src/components/SettingBlock.vue      | 4 ++--
 src/components/modals/GistExport.vue | 8 ++++----
 src/components/modals/GistImport.vue | 4 ++--
 src/manifest.ts                      | 2 +-
 src/views/NowPlaying.vue             | 4 +++-
 src/views/Playlist.vue               | 3 ++-
 vite.config.ts                       | 2 +-
 9 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index 6e36a34f..beca3612 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -23,7 +23,7 @@
         </svg>
       </div>
       <div v-if="playlist.length > 0" class="cover flex-none cursor-pointer h-24 w-24 relative group" @click="toggleNowPlaying()">
-        <img class="object-cover h-24 w-24" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
+        <img class="object-cover h-24 w-24" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
         <div class="mask items-center justify-center absolute inset-0 hidden group-hover:bg-black group-hover:bg-opacity-60 group-hover:flex">
           <vue-feather type="chevrons-up" stroke="#cccccc" />
         </div>
@@ -84,7 +84,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ImgHTMLAttributes, inject, toRaw } from 'vue';
+import { inject, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import DraggableBar from '../components/DraggableBar.vue';
@@ -96,6 +96,7 @@ import useRedHeart from '../composition/redheart';
 import useSettings from '../composition/settings';
 import { l1Player } from '../services/l1_player';
 import { formatTime, isElectron } from '../utils';
+import coverImg from '../images/mycover.jpg';
 
 const { t } = useI18n();
 const { player } = usePlayer();
diff --git a/src/components/PlaylistGrid.vue b/src/components/PlaylistGrid.vue
index 2467fea6..e10d9781 100644
--- a/src/components/PlaylistGrid.vue
+++ b/src/components/PlaylistGrid.vue
@@ -2,7 +2,7 @@
   <ul class="playlist-covers m-0 py-0 relative grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-5">
     <li v-for="i in playlists" :key="i.id" class="group min-h-40">
       <div class="relative shadow-lg">
-        <div class="aspect-square bg-cover" style="background-image: url('/assets/mycover.jpg')">
+        <div class="aspect-square bg-cover" :style="`background-image: url('${bgImage}')`">
           <img :src="i.cover_img_url" class="m-auto cursor-pointer rounded object-cover w-full" @click="showPlaylist(i.id)" />
         </div>
         <div
@@ -24,6 +24,7 @@
 import { useRouter } from 'vue-router';
 import { l1Player } from '../services/l1_player';
 import MediaService from '../services/MediaService';
+import bgImage from '../images/placeholder.png';
 
 const router = useRouter();
 
diff --git a/src/components/SettingBlock.vue b/src/components/SettingBlock.vue
index 10cfa00c..ac437db6 100644
--- a/src/components/SettingBlock.vue
+++ b/src/components/SettingBlock.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="m-2">
     <div class="settings-title pb-2 mb-2 mx-8">
-      <span>{{ title }}</span>
+      <span>{{ titleText }}</span>
     </div>
     <div class="settings-content mx-7 mb-7 leading-8">
       <slot></slot>
@@ -9,7 +9,7 @@
   </div>
 </template>
 <script setup lang="ts">
-const { title } = defineProps<{
+const { title: titleText } = defineProps<{
   title: string;
 }>();
 </script>
diff --git a/src/components/modals/GistExport.vue b/src/components/modals/GistExport.vue
index 76c16514..985cb283 100644
--- a/src/components/modals/GistExport.vue
+++ b/src/components/modals/GistExport.vue
@@ -6,20 +6,20 @@
     <template #body>
       <ul class="text-left">
         <li class="cursor-pointer h-24 p-2 hover:bg-dialog-hover" @click="download()">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2>{{ t('_EXPORT_TO_LOCAL_FILE') }}</h2>
         </li>
         <p v-show="githubStatus == 2">{{ t('_EXPORT_TO_GITHUB_GIST') }}</p>
         <li v-show="githubStatus == 2" class="cursor-pointer h-24 p-2 hover:bg-dialog-hover" @click="backup('', true)">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2>{{ t('_CREATE_PUBLIC_BACKUP') }}</h2>
         </li>
         <li v-show="githubStatus == 2" class="cursor-pointer h-24 p-2 hover:bg-dialog-hover" @click="backup('', false)">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2>{{ t('_CREATE_PRIVATE_BACKUP') }}</h2>
         </li>
         <li v-for="(backup, index) in myBackup" :key="index" class="cursor-pointer h-24 p-2 hover:bg-dialog-hover" @click="backup(backup.id, backup.public)">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2 class="flex">{{ backup.id + '\n' + new Date(backup.updated_at).toLocaleString() }}</h2>
         </li>
       </ul>
diff --git a/src/components/modals/GistImport.vue b/src/components/modals/GistImport.vue
index 03e60c3c..12bc00bf 100644
--- a/src/components/modals/GistImport.vue
+++ b/src/components/modals/GistImport.vue
@@ -7,12 +7,12 @@
       <ul class="text-left">
         <input ref="uploadInput" type="file" style="display: none" @change="upload" />
         <li class="cursor-pointer h-24 p-2 hover:bg-dialog-hover" @click="uploadInput.click()">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2>{{ t('_RECOVER_FROM_LOCAL_FILE') }}</h2>
         </li>
         <p>{{ t('_RECOVER_FROM_GITHUB_GIST') }}</p>
         <li v-for="(backup, index) in myBackup" :key="index" class="cursor-pointer h-24 p-2 hover:bg-dialog-hover" @click="recover(backup.id)">
-          <img class="float-left h-20 w-20 mr-4" src="/images/mycover.jpg" />
+          <img class="float-left h-20 w-20 mr-4" src="../../images/mycover.jpg" />
           <h2 class="flex">{{ backup.id + '\n' + new Date(backup.updated_at).toLocaleString() }}</h2>
         </li>
       </ul>
diff --git a/src/manifest.ts b/src/manifest.ts
index bb3b7b6b..cb43a255 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -43,6 +43,6 @@ const mv2: ManifestV2 = {
       js: ['oauth_callback.ts']
     }
   ],
-  web_accessible_resources: ['assets/fonts/*', 'images/*', 'index.html']
+  web_accessible_resources: ['assets/fonts/*', 'index.html']
 };
 export default mv2;
diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index 4703cf6b..9c25cddc 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -41,7 +41,7 @@
       <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10 justify-center">
         <div class="detail-head overflow-hidden flex-none w-[30rem] 2xl:w-[500px] flex justify-center">
           <div class="detail-head-cover w-72 2xl:w-96 2xl:mr-28 transition-all ease-in-out">
-            <img class="w-full aspect-square object-cover rounded" :src="currentPlaying?.img_url" @error="showImage($event, 'images/mycover.jpg')" />
+            <img class="w-full aspect-square object-cover rounded" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
           </div>
           <div class="detail-head-title">
             <!--<a title="加入收藏" class="clone" ng-click="showDialog(0, currentPlaying)">收藏</a>
@@ -154,6 +154,8 @@ import useSettings from '../composition/settings';
 import { datetimeFormats } from '../i18n/index';
 import MediaService from '../services/MediaService';
 import type { Comment } from '../provider/types';
+import coverImg from '../images/mycover.jpg';
+
 const { t, d } = useI18n({
   //@ts-ignore mismatch arg num
   datetimeFormats
diff --git a/src/views/Playlist.vue b/src/views/Playlist.vue
index 18e44b20..279d944f 100644
--- a/src/views/Playlist.vue
+++ b/src/views/Playlist.vue
@@ -101,6 +101,7 @@ import $event from '../services/EventService';
 import { l1Player } from '../services/l1_player';
 import MediaService from '../services/MediaService';
 import notyf from '../services/notyf';
+import coverImg from '../images/loading.svg';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -111,7 +112,7 @@ let is_mine = computed(() => listId && listId.slice(0, 2) === 'my');
 let is_local = computed(() => listId && listId.slice(0, 2) === 'lm');
 
 let songs = $ref([]);
-let cover_img_url = $ref('images/loading.svg');
+let cover_img_url = $ref(coverImg);
 let playlist_title = $ref('');
 let playlist_source_url = $ref('');
 let is_favorite = $ref(false);
diff --git a/vite.config.ts b/vite.config.ts
index 6b156c7c..5d40ebd5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,7 @@ import vueI18n from '@intlify/vite-plugin-vue-i18n';
 import vue from '@vitejs/plugin-vue';
 import { chromeExtension, simpleReloader } from 'rollup-plugin-chrome-extension';
 import zip from 'rollup-plugin-zip';
-import { defineConfig, build } from 'vite';
+import { defineConfig } from 'vite';
 
 const { NODE_ENV, BUILD_ELECTRON } = process.env;
 const production = NODE_ENV === 'production';

From 7a7e42aa65d374f6b0d3e51320f95db8ce90e9f7 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Thu, 30 Dec 2021 13:56:43 +0800
Subject: [PATCH 25/35] Adjust line number layout

---
 src/components/TrackRow.vue | 20 ++++++--------------
 src/views/Playlist.vue      |  3 ++-
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/TrackRow.vue b/src/components/TrackRow.vue
index ce2e119d..a7c8972a 100644
--- a/src/components/TrackRow.vue
+++ b/src/components/TrackRow.vue
@@ -1,27 +1,19 @@
 <template>
-  <div v-if="index !== undefined" class="flex-none w-8 text-cneter">
+  <div v-if="index !== undefined" class="flex w-8 justify-end">
     <span>{{ index + 1 }}</span>
   </div>
   <div class="title flex-2 flex overflow-hidden items-center max-h-12">
     <!-- <a class="disabled" ng-if="song.disabled" ng-click="copyrightNotice()"> song.title </a> -->
     <vue-feather
-      v-if="!isRedHeart(song.id)"
-      class="cursor-pointer flex-none"
+      class="cursor-pointer flex-none mx-4"
       type="heart"
       size="18"
       stroke-width="1"
-      stroke="#666666"
-      @click="setRedHeart(toRaw(song), true)" />
-    <vue-feather
-      v-if="isRedHeart(song.id)"
-      class="cursor-pointer flex-none"
-      type="heart"
-      fill="red"
-      stroke="red"
-      size="18"
-      @click="setRedHeart(toRaw(song), false)" />
+      :stroke="isRedHeart(song.id) ? 'red' : '#666666'"
+      :fill="isRedHeart(song.id) ? 'red' : 'none'"
+      @click="setRedHeart(toRaw(song), !isRedHeart(song.id))" />
 
-    <a class="cursor-pointer ml-3 truncate min-w-0" @click="play(song)">{{ song.title }}</a>
+    <a class="cursor-pointer truncate min-w-0" @click="play(song)">{{ song.title }}</a>
   </div>
   <div class="artist flex-1 truncate">
     <a class="cursor-pointer" @click="$router.push(`/playlist/${song.artist_id}`)">{{ song.artist }}</a>
diff --git a/src/views/Playlist.vue b/src/views/Playlist.vue
index 279d944f..7d33d477 100644
--- a/src/views/Playlist.vue
+++ b/src/views/Playlist.vue
@@ -55,10 +55,11 @@
           <input class="playlist-search-input" type="text" ng-model="playlistFilter.key" :placeholder="$t('_SEARCH_PLAYLIST')" />
         </div>-->
         <li class="head border-t-2 border-b-2 border-transparent text-inactive -mb-2px group flex relative items-center px-6 h-12">
-          <div class="flex-none w-8">
+          <div class="flex w-8 justify-end">
             <span>No.</span>
           </div>
           <div class="title flex-2 truncate flex">
+            <div class="flex-none w-5 mx-4"></div>
             <a>{{ t('_SONGS') + '(' + songs.length + ')' }}</a>
           </div>
           <div class="artist flex-1 truncate">

From 4196a8f7fb64ab3edb524506ac33eefcf4cb195b Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Thu, 30 Dec 2021 13:57:49 +0800
Subject: [PATCH 26/35] Adjust toggle button group style

---
 src/components/SettingButton.vue | 3 ++-
 src/components/ToggleButtons.vue | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/SettingButton.vue b/src/components/SettingButton.vue
index 9782ce89..092ffcfe 100644
--- a/src/components/SettingButton.vue
+++ b/src/components/SettingButton.vue
@@ -1,10 +1,11 @@
 <template>
-  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4]" @click="emit('click')">{{ text }}</button>
+  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4]" :class="{ invert: selected }" @click="emit('click')">{{ text }}</button>
 </template>
 <script setup lang="ts">
 const emit = defineEmits(['click']);
 defineProps<{
   text: string;
+  selected?: boolean;
 }>();
 </script>
 <script lang="ts">
diff --git a/src/components/ToggleButtons.vue b/src/components/ToggleButtons.vue
index 909e5ba7..7465f1c6 100644
--- a/src/components/ToggleButtons.vue
+++ b/src/components/ToggleButtons.vue
@@ -6,6 +6,7 @@
       class="rounded-none mr-auto decoration-2 underline-offset-4 whitespace-pre"
       :class="{ underline: selected === index }"
       :text="button.text"
+      :selected="selected === index"
       @click="emit('change', button.value)" />
     <!-- <SettingButton text="No" /> -->
   </div>

From 51f7cdb5285efa1719b46282d5333b37368ce1d7 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Thu, 30 Dec 2021 13:58:21 +0800
Subject: [PATCH 27/35] Fix the right controller is cover on small devices

---
 src/components/Playerbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Playerbar.vue b/src/components/Playerbar.vue
index beca3612..d40d4402 100644
--- a/src/components/Playerbar.vue
+++ b/src/components/Playerbar.vue
@@ -70,7 +70,7 @@
         </div>
       </div>
     </div>
-    <div class="right-control flex flex-none items-center w-screen md:w-80 h-24">
+    <div class="right-control flex flex-none items-center w-screen md:w-80 h-24 z-30">
       <div class="playlist-toggle cursor-pointer ml-8">
         <span class="icon li-list" @click="togglePlaylist()" />
       </div>

From 899161a19ac122c2d819f63c393db624f4f538e4 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Thu, 30 Dec 2021 17:21:08 +0800
Subject: [PATCH 28/35] fix overflow issue on settings page

---
 src/views/Settings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 7ef51049..379e86d7 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,7 +2,7 @@
   <!-- content page: 设置 -->
   <div class="page" ng-init="lastfm.updateStatus()">
     <div class="site-wrapper-innerd">
-      <div class="cover-container leading-normal flex flex-col flex-wrap content-evenly 2xl:h-[calc(100vh-10rem)]">
+      <div class="cover-container leading-normal flex content-left flex-col flex-wrap gap-4 2xl:h-[calc(100vh-10rem)]">
         <SettingBlock :title="t('_LANGUAGE')">
           <ToggleButtons :options="locales" :selected="locales.findIndex((i) => i.value === settings.language)" @change="setLocale($event)" />
         </SettingBlock>

From beb6d0808896c9b375c9ad94ce45c2059f0a7990 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Thu, 30 Dec 2021 17:54:02 +0800
Subject: [PATCH 29/35] Fix missing platform label

---
 src/components/TrackRow.vue |  3 +++
 src/views/Search.vue        | 12 +++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/TrackRow.vue b/src/components/TrackRow.vue
index a7c8972a..88178c25 100644
--- a/src/components/TrackRow.vue
+++ b/src/components/TrackRow.vue
@@ -14,6 +14,9 @@
       @click="setRedHeart(toRaw(song), !isRedHeart(song.id))" />
 
     <a class="cursor-pointer truncate min-w-0" @click="play(song)">{{ song.title }}</a>
+    <span v-if="showSource" class="px-1 mx-4 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">
+      {{ song.source }}
+    </span>
   </div>
   <div class="artist flex-1 truncate">
     <a class="cursor-pointer" @click="$router.push(`/playlist/${song.artist_id}`)">{{ song.artist }}</a>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 37a956a8..396cd004 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -56,25 +56,23 @@
               <li
                 v-for="(song, index) in result.tracks"
                 :key="song.id"
-                :class="{ 'bg-even': index % 2 === 0, 'bg-odd': index % 2 !== 0 }"
-                class="flex relative items-center px-6 h-12 hover:bg-row-hover"
+                class="flex relative items-center px-6 h-12 hover:bg-row-hover even:bg-even odd:bg-odd"
                 @mouseenter="song.options = true"
                 @mouseleave="song.options = undefined">
-                <TrackRow :index="index" :song="song"></TrackRow>
+                <TrackRow :index="index" :song="song" :show-source="isAllMusic"></TrackRow>
               </li>
             </template>
             <template v-if="condition.searchType === 1">
               <li
-                v-for="(playlist, index) in result.tracks"
+                v-for="playlist in result.tracks"
                 :key="playlist.id"
-                :class="{ 'bg-even': index % 2 === 0, 'bg-odd': index % 2 !== 0 }"
-                class="playlist-result flex relative items-center px-10 h-20 hover:bg-row-hover">
+                class="playlist-result flex relative items-center px-10 h-20 hover:bg-row-hover even:bg-even odd:bg-odd">
                 <div class="title flex-2 truncate">
                   <a class="cursor-pointer flex" @click="$router.push(`/playlist/${playlist.id}`)">
                     <img class="h-16 w-16 block mr-3" :src="playlist.img_url" err-src="https://y.gtimg.cn/mediastyle/global/img/playlist_300.png" />
                     <div>
                       {{ playlist.title }}
-                      <span v-if="isAllMusic" class="w-6 px-1 mr-3 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">
+                      <span v-if="isAllMusic" class="px-1 mx-4 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">
                         {{ playlist.source }}
                       </span>
                     </div>

From c91a82c7ef64fffd9db6f18f79664212a2fd94c8 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Thu, 30 Dec 2021 17:54:38 +0800
Subject: [PATCH 30/35] remove legacy static path

---
 src/components/modals/AddToPlaylist.vue  | 3 ++-
 src/components/modals/ImportPlaylist.vue | 3 ++-
 src/provider/myplaylist.ts               | 2 +-
 src/services/DBService.ts                | 8 ++++----
 src/views/Playlist.vue                   | 7 ++++---
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/modals/AddToPlaylist.vue b/src/components/modals/AddToPlaylist.vue
index 0c6163e2..cfd0685b 100644
--- a/src/components/modals/AddToPlaylist.vue
+++ b/src/components/modals/AddToPlaylist.vue
@@ -10,7 +10,7 @@
           <h2>{{ t('_CREATE_PLAYLIST') }}</h2>
         </li>
         <li v-for="(playlist, index) in myplaylist" :key="index" class="cursor-pointer h-14 p-2 hover:bg-dialog-hover" @click="addToPlaylist(playlist.id)">
-          <img class="float-left h-10 w-10 mr-4" :src="playlist.cover_img_url" />
+          <img class="float-left h-10 w-10 mr-4" :src="playlist.cover_img_url || coverImg" />
           <h2>{{ playlist.title }}</h2>
         </li>
       </ul>
@@ -26,6 +26,7 @@ import useRedHeart from '../../composition/redheart';
 import MediaService from '../../services/MediaService';
 import notyf from '../../services/notyf';
 import DefaultModal from './DefaultModal.vue';
+import coverImg from '../../images/mycover.jpg';
 
 const { t } = useI18n();
 let myplaylist: any = $ref<unknown[]>([]);
diff --git a/src/components/modals/ImportPlaylist.vue b/src/components/modals/ImportPlaylist.vue
index ccfa3acc..79b7b8db 100644
--- a/src/components/modals/ImportPlaylist.vue
+++ b/src/components/modals/ImportPlaylist.vue
@@ -10,7 +10,7 @@
           :key="index"
           class="cursor-pointer h-14 p-2 rounded hover:bg-dialog-hover"
           @click="mergePlaylist(playlist.id)">
-          <img class="float-left h-10 w-10 mr-4 rounded" :src="playlist.cover_img_url" />
+          <img class="float-left h-10 w-10 mr-4 rounded" :src="playlist.cover_img_url || coverImg" />
           <h2>{{ playlist.title }}</h2>
         </li>
       </ul>
@@ -25,6 +25,7 @@ import { useI18n } from 'vue-i18n';
 import useRedHeart from '../../composition/redheart';
 import MediaService from '../../services/MediaService';
 import DefaultModal from './DefaultModal.vue';
+import coverImg from '../../images/mycover.jpg';
 
 const { t } = useI18n();
 let myplaylist: any[] = $ref<unknown[]>([]);
diff --git a/src/provider/myplaylist.ts b/src/provider/myplaylist.ts
index d244e523..220215dd 100644
--- a/src/provider/myplaylist.ts
+++ b/src/provider/myplaylist.ts
@@ -193,7 +193,7 @@ const provider = class MyPlaylist extends MusicResource {
   static createMyplaylist(playlist_title: string, tracks: any[]) {
     const playlist = {
       info: {
-        cover_img_url: 'images/mycover.jpg',
+        cover_img_url: '',
         title: playlist_title,
         id: '',
         source_url: ''
diff --git a/src/services/DBService.ts b/src/services/DBService.ts
index b5c238c2..c96b9df2 100644
--- a/src/services/DBService.ts
+++ b/src/services/DBService.ts
@@ -87,21 +87,21 @@ const defaultPlaylists: { [key: string]: any } = {
   current: {
     id: 'current',
     title: 'current',
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: 'current',
     order: []
   },
   lmplaylist_reserve: {
     id: 'lmplaylist_reserve',
     title: '本地音乐',
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: 'local',
     order: []
   },
   myplaylist_redheart: {
     id: 'myplaylist_redheart',
     title: '我喜欢的音乐',
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: 'my',
     order: []
   }
@@ -148,7 +148,7 @@ function migratePlaylist(tracks: any, newId: string, newTitle: string, newType:
   iDB.Playlists.put({
     id: newId,
     title: newTitle,
-    cover_img_url: 'images/mycover.jpg',
+    cover_img_url: '',
     type: newType,
     order: tracks.map((i: Record<string, unknown>) => i.id)
   });
diff --git a/src/views/Playlist.vue b/src/views/Playlist.vue
index 7d33d477..9c02fda0 100644
--- a/src/views/Playlist.vue
+++ b/src/views/Playlist.vue
@@ -3,7 +3,7 @@
     <div class="playlist-detail">
       <div class="detail-head flex">
         <div class="detail-head-cover w-48 mx-8 mt-8 mb-1">
-          <img :src="cover_img_url" class="h-48 aspect-square rounded" err-src="https://y.gtimg.cn/mediastyle/global/img/singer_300.png" />
+          <img :src="cover_img_url || coverImg" class="h-48 aspect-square rounded" err-src="https://y.gtimg.cn/mediastyle/global/img/singer_300.png" />
         </div>
         <div class="detail-head-title flex-1">
           <h2 class="h-10 my-7 text-3xl font-semibold">{{ playlist_title }}</h2>
@@ -102,7 +102,8 @@ import $event from '../services/EventService';
 import { l1Player } from '../services/l1_player';
 import MediaService from '../services/MediaService';
 import notyf from '../services/notyf';
-import coverImg from '../images/loading.svg';
+import loadingImg from '../images/loading.svg';
+import coverImg from '../images/mycover.jpg';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -113,7 +114,7 @@ let is_mine = computed(() => listId && listId.slice(0, 2) === 'my');
 let is_local = computed(() => listId && listId.slice(0, 2) === 'lm');
 
 let songs = $ref([]);
-let cover_img_url = $ref(coverImg);
+let cover_img_url = $ref(loadingImg);
 let playlist_title = $ref('');
 let playlist_source_url = $ref('');
 let is_favorite = $ref(false);

From e127d8d3ba8c9989bd8c722b9eb0a208c8e1462a Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 4 Jan 2022 13:35:12 +0800
Subject: [PATCH 31/35] Fix Nowplaying page issue

Fix tsc error

Fix Nowplaying page layout

Add the new blur effect
---
 src/components/SettingButton.vue |  2 +-
 src/components/TrackRow.vue      |  3 ++-
 src/views/NowPlaying.vue         | 25 +++++++++++++++----------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/SettingButton.vue b/src/components/SettingButton.vue
index 092ffcfe..6680c49f 100644
--- a/src/components/SettingButton.vue
+++ b/src/components/SettingButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4]" :class="{ invert: selected }" @click="emit('click')">{{ text }}</button>
+  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4] transition duration-500" :class="{ invert: selected }" @click="emit('click')">{{ text }}</button>
 </template>
 <script setup lang="ts">
 const emit = defineEmits(['click']);
diff --git a/src/components/TrackRow.vue b/src/components/TrackRow.vue
index 88178c25..2fa13b9c 100644
--- a/src/components/TrackRow.vue
+++ b/src/components/TrackRow.vue
@@ -46,12 +46,13 @@
   </div>
 </template>
 <script setup lang="ts">
-const { song, isMine, isLocal, listId, index } = defineProps<{
+const { song, isMine, isLocal, listId, index, showSource } = defineProps<{
   song: any;
   isMine?: boolean | string;
   isLocal?: boolean;
   listId?: string;
   index?: number;
+  showSource?: boolean;
 }>();
 import { inject, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index 9c25cddc..021b023f 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="page">
     <div
-      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-24 duration-300 app-region-nodrag bg-now-playing justify-center"
+      class="songdetail-wrapper absolute flex flex-col top-0 left-0 right-0 bottom-24 duration-500 app-region-nodrag bg-now-playing"
       :class="{
         'overflow-y-scroll': commentActive,
-        'overflow-hidden': !commentActive,
-        slidedown: overlay.type !== 'track',
+        'overflow-hidden justify-center': !commentActive,
+        'slidedown': overlay.type !== 'track',
         coverbg: settings.enableNowplayingCoverBackground
       }">
       <div
@@ -13,7 +13,7 @@
         class="absolute top-0 left-0 right-0 h-24" />
       <div
         v-if="settings.enableNowplayingCoverBackground"
-        class="bg absolute opacity-50 h-full text-center w-full brightness-[0.8] blur-[90px] duration-1000 ease-in-out"
+        class="bg absolute opacity-50 h-full w-full text-center brightness-[0.8] blur-[90px] duration-1000 ease-in-out"
         :style="{ backgroundImage: `url(${currentPlaying?.img_url}` }" />
 
       <div
@@ -38,7 +38,7 @@
                 </svg>
       </div>-->
 
-      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10 justify-center">
+      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10 justify-center" :class="{'mt-48': commentActive}">
         <div class="detail-head overflow-hidden flex-none w-[30rem] 2xl:w-[500px] flex justify-center">
           <div class="detail-head-cover w-72 2xl:w-96 2xl:mr-28 transition-all ease-in-out">
             <img class="w-full aspect-square object-cover rounded" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
@@ -88,8 +88,8 @@
               </a>
             </div>
           </div>
-          <div class="lyric relative flex-none h-96 overflow-y-scroll">
-            <div class="placeholder" />
+          <div class="lyric blur-mask relative flex-none h-96 overflow-y-scroll">
+            <div class="placeholder h-1/2" />
             <p
               v-for="line in lyricArray"
               :key="line.lineNumber"
@@ -97,7 +97,7 @@
               :style="{
                 fontWeight: lyricFontWeight,
                 fontSize: `${lyricFontSize * (isHighlighted(line.lineNumber, line.translationFlag) ? 1.2 : 1)}px`,
-                filter: `blur(${Math.min(Math.abs(line.lineNumber - (line.translationFlag ? lyricLineNumberTrans : lyricLineNumber)) * 0.25, 1)}px)`
+                filter: `blur(${line.lineNumber === (line.translationFlag ? lyricLineNumberTrans : lyricLineNumber) ? 0.25 : 0}px)`
               }"
               :class="{
                 highlight: isHighlighted(line.lineNumber, line.translationFlag),
@@ -107,7 +107,7 @@
               }">
               {{ line.content }}
             </p>
-            <div class="placeholder" />
+            <div class="placeholder h-1/2" />
           </div>
         </div>
       </div>
@@ -213,7 +213,7 @@ watchEffect(async () => {
 </script>
 <style>
 .page .songdetail-wrapper.slidedown {
-  top: calc(100% - 5rem);
+  top: calc(100% - 6rem);
 }
 .page .bg {
   background-repeat: no-repeat;
@@ -260,4 +260,9 @@ watchEffect(async () => {
 .page .songdetail-wrapper .close svg {
   stroke: var(--now-playing-close-icon-color);
 } */
+
+.blur-mask {
+  mask: linear-gradient(transparent 5%, black 20%, black 80% , transparent 95%);
+  -webkit-mask: linear-gradient(transparent 5%, black 20%, black 80% , transparent 95%);
+}
 </style>

From a3ac8f0c87cc05ec8f4faec3ed8eda246a0ce640 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Tue, 4 Jan 2022 16:54:11 +0800
Subject: [PATCH 32/35] format

---
 src/components/SettingButton.vue | 4 +++-
 src/views/NowPlaying.vue         | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/SettingButton.vue b/src/components/SettingButton.vue
index 6680c49f..96ca920e 100644
--- a/src/components/SettingButton.vue
+++ b/src/components/SettingButton.vue
@@ -1,5 +1,7 @@
 <template>
-  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4] transition duration-500" :class="{ invert: selected }" @click="emit('click')">{{ text }}</button>
+  <button class="setting-button p-2 mr-1 rounded cursor-pointer leading-[1.4] transition duration-500" :class="{ invert: selected }" @click="emit('click')">
+    {{ text }}
+  </button>
 </template>
 <script setup lang="ts">
 const emit = defineEmits(['click']);
diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index 021b023f..57b401d3 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -5,7 +5,7 @@
       :class="{
         'overflow-y-scroll': commentActive,
         'overflow-hidden justify-center': !commentActive,
-        'slidedown': overlay.type !== 'track',
+        slidedown: overlay.type !== 'track',
         coverbg: settings.enableNowplayingCoverBackground
       }">
       <div
@@ -38,7 +38,7 @@
                 </svg>
       </div>-->
 
-      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10 justify-center" :class="{'mt-48': commentActive}">
+      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10 justify-center" :class="{ 'mt-48': commentActive }">
         <div class="detail-head overflow-hidden flex-none w-[30rem] 2xl:w-[500px] flex justify-center">
           <div class="detail-head-cover w-72 2xl:w-96 2xl:mr-28 transition-all ease-in-out">
             <img class="w-full aspect-square object-cover rounded" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
@@ -262,7 +262,7 @@ watchEffect(async () => {
 } */
 
 .blur-mask {
-  mask: linear-gradient(transparent 5%, black 20%, black 80% , transparent 95%);
-  -webkit-mask: linear-gradient(transparent 5%, black 20%, black 80% , transparent 95%);
+  mask: linear-gradient(transparent 5%, black 20%, black 80%, transparent 95%);
+  -webkit-mask: linear-gradient(transparent 5%, black 20%, black 80%, transparent 95%);
 }
 </style>

From cb4481a2b52d998bebac41d915d0aa4692ce644c Mon Sep 17 00:00:00 2001
From: A <alphanow@gmail.com>
Date: Thu, 6 Jan 2022 11:19:21 +0800
Subject: [PATCH 33/35] Update src/components/TrackRow.vue

Co-authored-by: MikeLxk <mike.lxk@gmail.com>
---
 src/components/TrackRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TrackRow.vue b/src/components/TrackRow.vue
index 2fa13b9c..95fea2ef 100644
--- a/src/components/TrackRow.vue
+++ b/src/components/TrackRow.vue
@@ -15,7 +15,7 @@
 
     <a class="cursor-pointer truncate min-w-0" @click="play(song)">{{ song.title }}</a>
     <span v-if="showSource" class="px-1 mx-4 text-gray-500 text-ms text-center border border-solid rounded border-gray-500">
-      {{ song.source }}
+      {{ t(song.source) }}
     </span>
   </div>
   <div class="artist flex-1 truncate">

From ea0f4e48274b4bdab14647d1a605611216a350f1 Mon Sep 17 00:00:00 2001
From: Dumeng <alphanow@gmail.com>
Date: Thu, 6 Jan 2022 14:55:02 +0800
Subject: [PATCH 34/35] Update Nowplaying Flex layout

---
 src/views/NowPlaying.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/NowPlaying.vue b/src/views/NowPlaying.vue
index 9733d151..444bdf4a 100644
--- a/src/views/NowPlaying.vue
+++ b/src/views/NowPlaying.vue
@@ -38,17 +38,17 @@
                 </svg>
       </div>-->
 
-      <div class="playsong-detail my-0 mx-auto flex w-[60rem] z-10 justify-center" :class="{ 'mt-48': commentActive }">
-        <div class="detail-head overflow-hidden flex-none w-[30rem] 2xl:w-[500px] flex justify-center">
-          <div class="detail-head-cover w-72 2xl:w-96 mt-32 2xl:mr-28 transition-all ease-in-out">
-            <img class="w-full aspect-square object-cover rounded shadow-2xl" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
+      <div class="playsong-detail flex self-center place-content-between w-[60rem] z-10" :class="{ 'mt-48': commentActive }">
+        <div class="detail-head overflow-hiddene flex items-center">
+          <div class="detail-head-cover w-72 2xl:w-96 transition-all ease-in-out">
+            <img class="w-full aspect-square object-cover rounded-lg shadow-2xl" :src="currentPlaying?.img_url" @error="showImage($event, coverImg)" />
           </div>
           <div class="detail-head-title">
             <!--<a title="加入收藏" class="clone" ng-click="showDialog(0, currentPlaying)">收藏</a>
             <a open-url="currentPlaying.source_url" title="原始链接" class="link">原始链接</a>-->
           </div>
         </div>
-        <div class="detail-songinfo flex app-region-nodrag overflow-hidden flex-col flex-1">
+        <div class="detail-songinfo flex w-96 app-region-nodrag overflow-hidden flex-col">
           <div class="title flex items-start">
             <h2 class="font-normal text-3xl mr-4 mb-4">{{ currentPlaying?.title }}</h2>
             <span
@@ -111,7 +111,7 @@
           </div>
         </div>
       </div>
-      <div v-if="commentActive" class="mt-20 mb-8 mx-auto w-[42rem] z-10">
+      <div v-if="commentActive" class="mt-20 mb-8 self-center w-[42rem] z-10">
         <div>热门评论</div>
         <ul>
           <li v-for="comment in commentList" :key="comment.id" class="flex py-4 border-b border-default">

From f8c8708cfc4e6046e835894bdfcfcd44aac22152 Mon Sep 17 00:00:00 2001
From: A <alphanow@gmail.com>
Date: Tue, 11 Jan 2022 14:37:08 +0800
Subject: [PATCH 35/35] Update src/views/Settings.vue

Didn't figure out any obvious effect. Can you explain more?

Co-authored-by: MikeLxk <mike.lxk@gmail.com>
---
 src/views/Settings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 379e86d7..6acf500d 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -2,7 +2,7 @@
   <!-- content page: 设置 -->
   <div class="page" ng-init="lastfm.updateStatus()">
     <div class="site-wrapper-innerd">
-      <div class="cover-container leading-normal flex content-left flex-col flex-wrap gap-4 2xl:h-[calc(100vh-10rem)]">
+      <div class="cover-container leading-normal flex content-left flex-col flex-wrap gap-4 2xl:h-[calc(100vh-10rem)] 2xl:overflow-y-hidden">
         <SettingBlock :title="t('_LANGUAGE')">
           <ToggleButtons :options="locales" :selected="locales.findIndex((i) => i.value === settings.language)" @change="setLocale($event)" />
         </SettingBlock>