fix: bugs

src/components/ButtonTwoTone.vue

@@ -73,6 +73,7 @@ button {
   color: var(--color-primary);
   margin-right: 12px;
   transition: 0.2s;
+  user-select: none;
   .svg-icon {
     width: 16px;
     height: 16px;

src/components/ContextMenu.vue

@@ -60,6 +60,7 @@ export default {
 .context-menu {
   width: 100%;
   height: 100%;
+  user-select: none;
 }
 
 .menu {

src/components/DailyTracksCard.vue

@@ -1,9 +1,6 @@
 <template>
-  <div
+  <div class="daily-recommend-card" @click="goToDailyTracks">
-    class="daily-recommend-card"
+    <img :src="coverUrl" />
-    @click="goToDailyTracks"
-    :style="cardStyles"
-  >
     <div class="container">
       <div class="title-box">
         <div class="title">
@@ -24,7 +21,7 @@
 import { mapMutations, mapState, mapActions } from "vuex";
 import { dailyRecommendTracks } from "@/api/playlist";
 import { isAccountLoggedIn } from "@/utils/auth";
-import { sample } from "lodash";
+import sample from "lodash/sample";
 
 const defaultCovers = [
   "https://p2.music.126.net/0-Ybpa8FrDfRgKYCTJD8Xg==/109951164796696795.jpg",
@@ -34,19 +31,19 @@ const defaultCovers = [
 
 export default {
   name: "DailyTracksCard",
-  created() {
+  data() {
-    if (this.dailyTracks.length === 0) this.loadDailyTracks();
+    return { useAnimation: false };
   },
   computed: {
     ...mapState(["dailyTracks"]),
     coverUrl() {
-      return this.dailyTracks[0]?.al.picUrl || sample(defaultCovers);
+      return `${
+        this.dailyTracks[0]?.al.picUrl || sample(defaultCovers)
+      }?param=1024y1024`;
     },
-    cardStyles() {
-      return {
-        background: `no-repeat url("${this.coverUrl}?param=1024y1024") center/cover`,
-      };
   },
+  created() {
+    if (this.dailyTracks.length === 0) this.loadDailyTracks();
   },
   methods: {
     ...mapActions(["showToast"]),
@@ -81,15 +78,24 @@ export default {
 <style lang="scss" scoped>
 .daily-recommend-card {
   border-radius: 1rem;
-  animation: move 38s infinite;
-  animation-direction: alternate;
   height: 198px;
   cursor: pointer;
   position: relative;
+  overflow: hidden;
+}
+
+img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  animation: move 38s infinite;
+  animation-direction: alternate;
+  z-index: -1;
 }
 
 .container {
-  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.38));
+  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28));
   height: 198px;
   width: 50%;
   display: flex;
@@ -154,10 +160,10 @@ export default {
 
 @keyframes move {
   0% {
-    background-position: 0% 0%;
+    transform: translateY(0);
   }
   100% {
-    background-position: 0% 100%;
+    transform: translateY(-50%);
   }
 }
 </style>

src/components/Navbar.vue

@@ -400,6 +400,7 @@ nav {
   align-items: center;
   justify-content: flex-end;
   .avatar {
+    user-select: none;
     height: 30px;
     margin-left: 12px;
     vertical-align: -7px;

src/utils/Player.js

@@ -1,5 +1,5 @@
 import { getTrackDetail, scrobble, getMP3 } from "@/api/track";
-import { shuffle } from "lodash";
+import shuffle from "lodash/shuffle";
 import { Howler, Howl } from "howler";
 import { cacheTrackSource, getTrackSource } from "@/utils/db";
 import { getAlbum } from "@/api/album";
@@ -250,8 +250,8 @@ export default class {
     autoplay = true,
     ifUnplayableThen = "playNextTrack"
   ) {
-    if (autoplay) {
+    if (autoplay && this._currentTrack.name) {
-      this._scrobble(this.currentTrack, this._howler.seek());
+      this._scrobble(this.currentTrack, this._howler?.seek());
     }
     return getTrackDetail(id).then((data) => {
       let track = data.songs[0];
@@ -508,6 +508,9 @@ export default class {
     });
   }
   playPlaylistByID(id, trackID = "first", noCache = false) {
+    console.debug(
+      `[debug][Player.js] playPlaylistByID 👉 id:${id} trackID:${trackID} noCache:${noCache}`
+    );
     getPlaylistDetail(id, noCache).then((data) => {
       let trackIDs = data.playlist.trackIds.map((t) => t.id);
       this.replacePlaylist(trackIDs, id, "playlist", trackID);