refactor: enhance UI compatibility

src/views/album.vue

@@ -2,13 +2,15 @@
   <div class="album" v-show="show">
     <div class="playlist-info">
       <Cover
-        :url="album.picUrl | resizeImage(1024)"
+        :imageUrl="album.picUrl | resizeImage(1024)"
         :showPlayButton="true"
         :alwaysShowShadow="true"
-        :clickToPlay="true"
-        :size="288"
-        :type="'album'"
+        :clickCoverToPlay="true"
+        :fixedSize="288"
+        type="album"
         :id="album.id"
+        :coverHover="false"
+        :playButtonSize="18"
         @click.right.native="openMenu"
       />
       <div class="info">
@@ -97,7 +99,6 @@
           type="album"
           :items="filteredMoreAlbums"
           subText="albumType+releaseYear"
-          :showPlayButton="true"
         />
       </div>
     </div>
@@ -361,7 +362,7 @@ export default {
     font-weight: 600;
     opacity: 0.88;
     color: var(--color-text);
-    margin-bottom: 8px;
+    margin-bottom: 20px;
   }
 }
 </style>

src/views/artist.vue

@@ -36,16 +36,11 @@
       <div class="release">
         <div class="container">
           <Cover
-            :url="latestRelease.picUrl | resizeImage"
-            :showPlayButton="true"
-            :showBlackShadow="true"
-            :type="`album`"
+            :imageUrl="latestRelease.picUrl | resizeImage"
+            type="album"
             :id="latestRelease.id"
-            :hoverEffect="true"
-            :size="128"
-            :playButtonSize="36"
-            :shadowMargin="8"
-            :radius="8"
+            :fixedSize="128"
+            :playButtonSize="30"
           />
           <div class="info">
             <div class="name">

src/views/library.vue

@@ -33,9 +33,9 @@
         <TrackList
           :tracks="likedSongs"
           :type="'tracklist'"
-          :itemWidth="220"
           :id="likedSongsPlaylist.id"
           dbclickTrackFunc="playPlaylistByID"
+          :columnNumber="3"
         />
       </div>
     </div>
@@ -245,7 +245,7 @@ export default {
     getLikedSongs(getLyric = true) {
       getPlaylistDetail(this.data.likedSongPlaylistID, true).then((data) => {
         this.likedSongsPlaylist = data.playlist;
-        let TrackIDs = data.playlist.trackIds.slice(0, 20).map((t) => t.id);
+        let TrackIDs = data.playlist.trackIds.slice(0, 12).map((t) => t.id);
         this.likedSongIDs = TrackIDs;
         getTrackDetail(this.likedSongIDs.join(",")).then((data) => {
           this.likedSongs = data.songs;
@@ -323,7 +323,6 @@ h1 {
     flex: 7;
     margin-top: 8px;
     margin-left: 36px;
-    height: 216px;
     overflow: hidden;
   }
 }
@@ -332,8 +331,6 @@ h1 {
   flex: 3;
   margin-top: 8px;
   cursor: pointer;
-  height: 216px;
-  width: 300px;
   border-radius: 16px;
   padding: 18px 24px;
   display: flex;
@@ -442,7 +439,7 @@ h1 {
 button.add-playlist {
   color: var(--color-text);
   border-radius: 8px;
-  padding: 0 12px;
+  padding: 0 14px;
   display: flex;
   justify-content: center;
   align-items: center;

src/views/playlist.vue

@@ -5,11 +5,15 @@
       v-if="specialPlaylistInfo === undefined && !isLikeSongsPage"
     >
       <Cover
-        :url="playlist.coverImgUrl | resizeImage(1024)"
+        :imageUrl="playlist.coverImgUrl | resizeImage(1024)"
         :showPlayButton="true"
         :alwaysShowShadow="true"
-        :clickToPlay="true"
-        :size="288"
+        :clickCoverToPlay="true"
+        :fixedSize="288"
+        type="playlist"
+        :id="playlist.id"
+        :coverHover="false"
+        :playButtonSize="18"
         @click.right.native="openMenu"
       />
       <div class="info">
@@ -288,6 +292,7 @@ export default {
     return {
       show: false,
       playlist: {
+        id: 0,
         coverImgUrl: "",
         creator: {
           userId: "",

src/views/search.vue

@@ -14,16 +14,11 @@
               :key="artist.id"
             >
               <Cover
-                :url="artist.img1v1Url | resizeImage"
-                :showBlackShadow="true"
-                :hoverEffect="true"
-                :showPlayButton="true"
-                :type="`artist`"
+                :imageUrl="artist.img1v1Url | resizeImage"
+                type="artist"
                 :id="artist.id"
-                :size="128"
-                :playButtonSize="36"
-                :shadowMargin="8"
-                :radius="100"
+                :fixedSize="128"
+                :playButtonSize="30"
               />
               <div class="name">
                 <router-link :to="`/artist/${artist.id}`">{{
@@ -43,16 +38,11 @@
             >
               <div>
                 <Cover
-                  :url="album.picUrl | resizeImage"
-                  :showBlackShadow="true"
-                  :hoverEffect="true"
-                  :showPlayButton="true"
-                  :type="`album`"
+                  :imageUrl="album.picUrl | resizeImage"
+                  type="album"
                   :id="album.id"
-                  :size="128"
-                  :playButtonSize="36"
-                  :shadowMargin="8"
-                  :radius="8"
+                  :fixedSize="128"
+                  :playButtonSize="30"
                 />
               </div>
               <div class="name">
@@ -72,12 +62,12 @@
 
       <div class="tracks" v-if="result.hasOwnProperty('song')">
         <div class="section-title">{{ $t("search.song") }}</div>
-        <TrackList :tracks="tracks" :type="'tracklist'" />
+        <TrackList :tracks="tracks" type="tracklist" />
       </div>
 
       <div class="mvs" v-if="mvs !== null && mvs.length > 0">
         <div class="section-title">{{ $t("search.mv") }}</div>
-        <MvRow class="mv-row" :mvs="mvs.slice(0, 5)" />
+        <MvRow :mvs="mvs.slice(0, 5)" />
       </div>
 
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
@@ -90,16 +80,11 @@
           >
             <div>
               <Cover
-                :url="playlist.coverImgUrl | resizeImage"
-                :showBlackShadow="true"
-                :hoverEffect="true"
-                :showPlayButton="true"
-                :type="`playlist`"
+                :imageUrl="playlist.coverImgUrl | resizeImage"
+                type="playlist"
                 :id="playlist.id"
-                :size="128"
-                :playButtonSize="36"
-                :shadowMargin="8"
-                :radius="8"
+                :fixedSize="128"
+                :playButtonSize="30"
               />
             </div>
             <div class="name">
@@ -209,6 +194,7 @@ h1 {
 
 .row {
   display: flex;
+  flex-wrap: wrap;
 }
 
 .artists,
@@ -271,11 +257,4 @@ h1 {
   margin-top: 24px;
   font-size: 24px;
 }
-
-.mvs {
-  .mv-row {
-    margin-top: -12px;
-    margin-bottom: -24px;
-  }
-}
 </style>