fix: bugs

.env.example

@@ -1,4 +1,5 @@
 VUE_APP_NETEASE_API_URL=http://127.0.0.1:3000
 VUE_APP_ELECTRON_API_URL=/api
+VUE_APP_ELECTRON_API_URL_DEV=http://127.0.0.1:3000
 VUE_APP_ENABLE_SENTRY=false
 DEV_SERVER_PORT=20201

src/components/TrackListItem.vue

@@ -173,8 +173,11 @@ button {
     width: 16px;
     color: var(--color-primary);
   }
+  &:hover {
+    transform: scale(1.12);
+  }
   &:active {
-    transform: scale(0.92);
+    transform: scale(0.96);
   }
 }
 
@@ -216,8 +219,8 @@ button {
 
   img {
     border-radius: 8px;
-    height: 56px;
-    width: 56px;
+    height: 46px;
+    width: 46px;
     margin-right: 20px;
     border: 1px solid rgba(0, 0, 0, 0.04);
     cursor: pointer;

src/locale/lang/en.js

@@ -119,6 +119,12 @@ export default {
       light: "Light",
       dark: "Dark",
     },
+    automaticallyCacheSongs: "Automatically cache songs",
+    clearSongsCache: "Clear Songs Cache",
+    cacheCount: "Cached {song} songs ({size})",
+    showGitHubIcon: "Show GitHub icon",
+    showUnavailableSongInGreyStyle: "Show unavailable song in grey style",
+    showPlaylistsByAppleMusic: "Show playlists by Apple Music",
   },
   contextMenu: {
     play: "Play",

src/locale/lang/zh-CN.js

@@ -120,6 +120,12 @@ export default {
       light: "浅色",
       dark: "深色",
     },
+    automaticallyCacheSongs: "自动缓存歌曲",
+    clearSongsCache: "清除歌曲缓存",
+    cacheCount: "已缓存 {song} 首 ({size})",
+    showGitHubIcon: "显示 GitHub 图标",
+    showUnavailableSongInGreyStyle: "显示不可播放的歌曲为灰色",
+    showPlaylistsByAppleMusic: "首页显示来自 Apple Music 的歌单",
   },
   contextMenu: {
     play: "播放",

src/store/actions.js

@@ -12,7 +12,10 @@ const ipcRenderer =
   process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
 
 export default {
-  switchTrack({ state, dispatch, commit }, { id, sort = 0, autoplay = true }) {
+  switchTrack(
+    { state, dispatch, commit },
+    { id, sort = 0, autoplay = true, ifUnplayableThen = "nextTrack" }
+  ) {
     getTrackDetail(id).then((data) => {
       let track = data.songs[0];
       track.sort = sort;
@@ -49,7 +52,7 @@ export default {
         if (res?.url) {
           unblockSongUrl = res.url;
         } else {
-          dispatch("nextTrack");
+          dispatch(ifUnplayableThen);
           return;
         }
       }
@@ -166,7 +169,11 @@ export default {
         previousTrack = state.player.list.find((t) => t.sort === 0);
       }
     }
-    dispatch("switchTrack", previousTrack);
+    dispatch("switchTrack", {
+      id: previousTrack.id,
+      sort: previousTrack.sort,
+      ifUnplayableThen: "previousTrack",
+    });
   },
   addNextTrackEvent({ state, dispatch }) {
     state.howler.once("end", () => {

src/store/initLocalStorage.js

@@ -1,6 +1,6 @@
 import { playlistCategories } from "@/utils/staticData";
 
-export default {
+let localStorage = {
   player: {
     enable: false,
     show: true,
@@ -24,6 +24,8 @@ export default {
     showGithubIcon: true,
     showPlaylistsByAppleMusic: true,
     showUnavailableSongInGreyStyle: true,
+    automaticallyCacheSongs: false,
+    nyancatStyle: false,
   },
   data: {
     user: {},
@@ -32,3 +34,9 @@ export default {
     loginMode: null,
   },
 };
+
+if (process.env.IS_ELECTRON === true) {
+  localStorage.settings.automaticallyCacheSongs = true;
+}
+
+export default localStorage;

src/utils/common.js

@@ -29,7 +29,7 @@ export function isTrackPlayable(track) {
   ) {
     result.playable = false;
     result.reason = "No Copyright";
-  } else if (track.privilege?.st < 0) {
+  } else if (track.privilege?.st < 0 && isAccountLoggedIn()) {
     result.playable = false;
     result.reason = "The song has been removed from the shelves";
   }
@@ -193,13 +193,15 @@ export function splitAlbumTitle(title) {
 }
 
 export function bytesToSize(bytes) {
-  var marker = 1024; // Change to 1000 if required
-  var decimal = 2; // Change as required
-  var kiloBytes = marker;
-  var megaBytes = marker * marker;
-  var gigaBytes = marker * marker * marker;
+  let marker = 1024; // Change to 1000 if required
+  let decimal = 2; // Change as required
+  let kiloBytes = marker;
+  let megaBytes = marker * marker;
+  let gigaBytes = marker * marker * marker;
 
-  if (bytes < kiloBytes) return bytes + " Bytes";
+  let lang = store.state.settings.lang;
+
+  if (bytes < kiloBytes) return bytes + (lang === "en" ? " Bytes" : "字节");
   else if (bytes < megaBytes)
     return (bytes / kiloBytes).toFixed(decimal) + " KB";
   else if (bytes < gigaBytes)

src/utils/request.js

@@ -3,7 +3,11 @@ import axios from "axios";
 let baseURL = "";
 // Web 和 Electron 跑在不同端口避免同时启动时冲突
 if (process.env.IS_ELECTRON) {
-  baseURL = process.env.VUE_APP_ELECTRON_API_URL;
+  if (process.env.NODE_ENV === "production") {
+    baseURL = process.env.VUE_APP_ELECTRON_API_URL;
+  } else {
+    baseURL = process.env.VUE_APP_ELECTRON_API_URL_DEV;
+  }
 } else {
   baseURL = process.env.VUE_APP_NETEASE_API_URL;
 }
@@ -16,7 +20,6 @@ const service = axios.create({
 
 const errors = new Map([
   [401, "The token you are using has expired."],
-  [502, null],
   [301, "You must login to use this feature."],
   [-1, "An unexpected error has occurred: "],
 ]);
@@ -25,14 +28,14 @@ service.interceptors.response.use(
   (response) => {
     const res = response.data;
 
-    if (res.code !== 200) {
+    if (response.status !== 200) {
       alert(
-        errors.has(res.code)
-          ? errors.get(res.code) ||
+        errors.has(response.status)
+          ? errors.get(response.status) ||
               // null = `The server returned ${res.msg}`
               `The server returned ${res.msg}`
           : // -1 = default expection message
-            errors.get(-1) + res.code
+            errors.get(-1) + response.status
       );
     } else {
       return res;

src/utils/updateApp.js

@@ -7,6 +7,9 @@ const updateSetting = () => {
     playlistCategories: initLocalStorage?.settings?.playlistCategories,
     showUnavailableSongInGreyStyle:
       initLocalStorage?.settings?.showUnavailableSongInGreyStyle,
+    automaticallyCacheSongs:
+      initLocalStorage?.settings?.automaticallyCacheSongs,
+    nyancatStyle: initLocalStorage?.settings?.nyancatStyle,
     ...parsedSettings,
   };
 

src/views/album.vue

@@ -105,6 +105,7 @@
       :show="showFullDescription"
       :close="() => (showFullDescription = false)"
       :showFooter="false"
+      :clickOutsideHide="true"
       title="专辑介绍"
       >{{ album.description }}</Modal
     >

src/views/settings.vue

@@ -76,7 +76,9 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> Automatically cache songs </div>
+          <div class="title">
+            {{ $t("settings.automaticallyCacheSongs") }}
+          </div>
         </div>
         <div class="right">
           <div class="toggle">
@@ -92,17 +94,24 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"
-            >Cached {{ tracksCache.length }} songs ({{ tracksCache.size }})</div
+          <div class="title">
+            {{
+              $t("settings.cacheCount", {
+                song: tracksCache.length,
+                size: tracksCache.size,
+              })
+            }}</div
           >
         </div>
         <div class="right">
-          <button @click="clearCache('tracks')"> Clear Songs Cache </button>
+          <button @click="clearCache('tracks')">
+            {{ $t("settings.clearSongsCache") }}
+          </button>
         </div>
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> Show Github icon </div>
+          <div class="title"> {{ $t("settings.showGitHubIcon") }} </div>
         </div>
         <div class="right">
           <div class="toggle">
@@ -118,7 +127,9 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> Show unavailable song in grey style</div>
+          <div class="title">
+            {{ $t("settings.showUnavailableSongInGreyStyle") }}</div
+          >
         </div>
         <div class="right">
           <div class="toggle">
@@ -134,7 +145,9 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> Show playlists by Apple Music</div>
+          <div class="title">
+            {{ $t("settings.showPlaylistsByAppleMusic") }}</div
+          >
         </div>
         <div class="right">
           <div class="toggle">