fix: bugs

src/App.vue

@@ -8,8 +8,8 @@
       <router-view v-if="!$route.meta.keepAlive"></router-view>
     </main>
     <transition name="slide-up">
-      <Player v-if="enablePlayer" v-show="showPlayer" ref="player"
-    /></transition>
+      <Player v-if="enablePlayer" v-show="showPlayer" ref="player" />
+    </transition>
     <Toast />
     <ModalAddTrackToPlaylist v-if="isAccountLoggedIn" />
     <ModalNewPlaylist v-if="isAccountLoggedIn" />
@@ -98,93 +98,10 @@ export default {
 </script>
 
 <style lang="scss">
-/* url('~@/assets/fonts/Barlow-Medium.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-SemiBold.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-Bold.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-ExtraBold.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-Black.woff2') format('woff2'); */
-
-@font-face {
-  font-family: 'Barlow';
-  font-weight: normal;
-  src: url('~@/assets/fonts/Barlow-Regular.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Barlow';
-  font-weight: medium;
-  src: url('~@/assets/fonts/Barlow-Medium.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-Medium.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Barlow';
-  font-weight: 600;
-  src: url('~@/assets/fonts/Barlow-SemiBold.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Barlow';
-  font-weight: bold;
-  src: url('~@/assets/fonts/Barlow-Bold.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-Bold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Barlow';
-  font-weight: 800;
-  src: url('~@/assets/fonts/Barlow-ExtraBold.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-ExtraBold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Barlow';
-  font-weight: 900;
-  src: url('~@/assets/fonts/Barlow-Black.woff2') format('woff2'),
-    url('~@/assets/fonts/Barlow-Black.ttf') format('truetype');
-}
-
-:root {
-  --color-body-bg: #ffffff;
-  --color-text: #000;
-  --color-primary: #335eea;
-  --color-primary-bg: #eaeffd;
-  --color-secondary: #7a7a7b;
-  --color-secondary-bg: #f5f5f7;
-  --color-navbar-bg: rgba(255, 255, 255, 0.86);
-  --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
-  --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
-  --html-overflow-y: overlay;
-}
-
-[data-theme='dark'] {
-  --color-body-bg: #222222;
-  --color-text: #ffffff;
-  --color-primary: #335eea;
-  --color-primary-bg: #bbcdff;
-  --color-secondary: #7a7a7b;
-  --color-secondary-bg: #323232;
-  --color-navbar-bg: rgba(34, 34, 34, 0.86);
-  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
-  --color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
-}
-
 #app {
   width: 100%;
   transition: all 0.4s;
 }
-#app,
-input {
-  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, Helvetica Neue,
-    PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
-    WenQuanYi Micro Hei, sans-serif, microsoft uighur;
-}
-body {
-  background-color: var(--color-body-bg);
-}
-
-html {
-  overflow-y: var(--html-overflow-y);
-  min-width: 768px;
-  overscroll-behavior: none;
-}
 
 main {
   margin-top: 84px;
@@ -201,28 +118,7 @@ main {
   }
 }
 
-select,
-button {
-  font-family: inherit;
-}
-
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-input,
-button {
-  &:focus {
-    outline: none;
-  }
-}
-a {
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  &:hover {
-    text-decoration: underline;
+    padding: 64px 5vw 96px 5vw;
   }
 }
 
@@ -230,39 +126,12 @@ main::-webkit-scrollbar {
   width: 0px;
 }
 
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-left: 1px solid rgba(128, 128, 128, 0.18);
-  background: var(--color-body-bg);
-}
-
-::-webkit-scrollbar-thumb {
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  background: rgba(128, 128, 128, 0.38);
-}
-
-[data-theme='dark'] ::-webkit-scrollbar-thumb {
-  background: var(--color-secondary-bg);
-}
-
 .slide-up-enter-active,
 .slide-up-leave-active {
-  transition: all 0.4s;
+  transition: transform 0.4s;
 }
-.slide-up-enter, .slide-up-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.slide-up-enter,
+.slide-up-leave-to {
   transform: translateY(100%);
 }
-
-[data-electron='yes'] {
-  button,
-  .navigation-links a,
-  .playlist-info .description {
-    cursor: default !important;
-  }
-}
 </style>

src/assets/css/global.scss

@@ -0,0 +1,135 @@
+@font-face {
+  font-family: 'Barlow';
+  font-weight: normal;
+  src: url('~@/assets/fonts/Barlow-Regular.woff2') format('woff2'),
+    url('~@/assets/fonts/Barlow-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Barlow';
+  font-weight: medium;
+  src: url('~@/assets/fonts/Barlow-Medium.woff2') format('woff2'),
+    url('~@/assets/fonts/Barlow-Medium.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Barlow';
+  font-weight: 600;
+  src: url('~@/assets/fonts/Barlow-SemiBold.woff2') format('woff2'),
+    url('~@/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Barlow';
+  font-weight: bold;
+  src: url('~@/assets/fonts/Barlow-Bold.woff2') format('woff2'),
+    url('~@/assets/fonts/Barlow-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Barlow';
+  font-weight: 800;
+  src: url('~@/assets/fonts/Barlow-ExtraBold.woff2') format('woff2'),
+    url('~@/assets/fonts/Barlow-ExtraBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Barlow';
+  font-weight: 900;
+  src: url('~@/assets/fonts/Barlow-Black.woff2') format('woff2'),
+    url('~@/assets/fonts/Barlow-Black.ttf') format('truetype');
+}
+
+:root {
+  --color-body-bg: #ffffff;
+  --color-text: #000;
+  --color-primary: #335eea;
+  --color-primary-bg: #eaeffd;
+  --color-secondary: #7a7a7b;
+  --color-secondary-bg: #f5f5f7;
+  --color-navbar-bg: rgba(255, 255, 255, 0.86);
+  --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
+  --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
+  --html-overflow-y: overlay;
+}
+
+[data-theme='dark'] {
+  --color-body-bg: #222222;
+  --color-text: #ffffff;
+  --color-primary: #335eea;
+  --color-primary-bg: #bbcdff;
+  --color-secondary: #7a7a7b;
+  --color-secondary-bg: #323232;
+  --color-navbar-bg: rgba(34, 34, 34, 0.86);
+  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
+  --color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
+}
+
+#app,
+input {
+  font-family: 'Barlow', ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei,
+    Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif,
+    microsoft uighur;
+}
+body {
+  background-color: var(--color-body-bg);
+}
+
+html {
+  overflow-y: var(--html-overflow-y);
+  min-width: 768px;
+  overscroll-behavior: none;
+}
+
+select,
+button {
+  font-family: inherit;
+}
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+}
+input,
+button {
+  &:focus {
+    outline: none;
+  }
+}
+a {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+[data-electron='yes'] {
+  button,
+  .navigation-links a,
+  .playlist-info .description {
+    cursor: default !important;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-left: 1px solid rgba(128, 128, 128, 0.18);
+  background: var(--color-body-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  background: rgba(128, 128, 128, 0.38);
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-thumb {
+  background: var(--color-secondary-bg);
+}
+
+.user-select-none {
+  user-select: none;
+}

src/components/ArtistsInLine.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="artist-in-line">
     {{ computedPrefix }}
-    <span v-for="(ar, index) in filteredArtists" :key="ar.id">
+    <span v-for="(ar, index) in filteredArtists" :key="index">
       <router-link v-if="ar.id !== 0" :to="`/artist/${ar.id}`">
         {{ ar.name }}
       </router-link>

src/components/ContextMenu.vue

@@ -65,7 +65,6 @@ export default {
   width: 100%;
   height: 100%;
   user-select: none;
-  -webkit-app-region: no-drag;
 }
 
 .menu {
@@ -81,6 +80,7 @@ export default {
   box-sizing: border-box;
   padding: 6px;
   z-index: 1000;
+  -webkit-app-region: no-drag;
 
   &:focus {
     outline: none;

src/components/Navbar.vue

@@ -31,17 +31,17 @@
         /></button-icon>
       </div>
       <div class="navigation-links">
-        <router-link to="/" :class="{ active: this.$route.name === 'home' }">{{
+        <router-link to="/" :class="{ active: $route.name === 'home' }">{{
           $t('nav.home')
         }}</router-link>
         <router-link
           to="/explore"
-          :class="{ active: this.$route.name === 'explore' }"
+          :class="{ active: $route.name === 'explore' }"
           >{{ $t('nav.explore') }}</router-link
         >
         <router-link
           to="/library"
-          :class="{ active: this.$route.name === 'library' }"
+          :class="{ active: $route.name === 'library' }"
           >{{ $t('nav.library') }}</router-link
         >
       </div>

src/components/TrackListItem.vue

@@ -116,8 +116,8 @@ export default {
     },
     translate() {
       let t;
-      if (this.track.tns?.length > 0) t = this.track.tns[0];
-      else if (this.track.al.tns?.length > 0) t = this.track.al.tns[0];
+      if (this.track?.tns?.length > 0) t = this.track.tns[0];
+      else if (this.track.al?.tns?.length > 0) t = this.track.al.tns[0];
       else t = this.track.alia[0];
       return t;
     },
@@ -129,8 +129,8 @@ export default {
     },
     isTranslate() {
       return (
-        this.track.tns?.length > 0 ||
-        this.track.al.tns?.length > 0 ||
+        this.track?.tns?.length > 0 ||
+        this.track.al?.tns?.length > 0 ||
         this.track.alia?.length > 0
       );
     },

src/main.js

@@ -8,6 +8,7 @@ import '@/assets/icons';
 import '@/utils/filters';
 import './registerServiceWorker';
 import { dailyTask } from '@/utils/common';
+import '@/assets/css/global.scss';
 
 window.resetApp = () => {
   localStorage.clear();

src/views/settings.vue

@@ -223,7 +223,7 @@
           <button v-else @click="lastfmConnect()"> 授权连接 </button>
         </div>
       </div>
-      <div class="item">
+      <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title"
             >启用
@@ -318,22 +318,6 @@
           </div>
         </div>
       </div>
-      <div v-if="isElectron" class="item">
-        <div class="left">
-          <div class="title"> {{ $t('settings.enableGlobalShortcut') }}</div>
-        </div>
-        <div class="right">
-          <div class="toggle">
-            <input
-              id="enable-enable-global-shortcut"
-              v-model="enableGlobalShortcut"
-              type="checkbox"
-              name="enable-enable-global-shortcut"
-            />
-            <label for="enable-enable-global-shortcut"></label>
-          </div>
-        </div>
-      </div>
       <div class="item">
         <div class="left">
           <div class="title" style="transform: scaleX(-1)">🐈️ 🏳️‍🌈</div>
@@ -385,6 +369,26 @@
         </div>
       </div>
 
+      <div v-if="isElectron">
+        <h3>快捷键</h3>
+        <div class="item">
+          <div class="left">
+            <div class="title"> {{ $t('settings.enableGlobalShortcut') }}</div>
+          </div>
+          <div class="right">
+            <div class="toggle">
+              <input
+                id="enable-enable-global-shortcut"
+                v-model="enableGlobalShortcut"
+                type="checkbox"
+                name="enable-enable-global-shortcut"
+              />
+              <label for="enable-enable-global-shortcut"></label>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="footer">
         <p class="author"
           >MADE BY