fix: 修改歌名翻译的实现，以避免展示重复的信息 (#958)

* change song translate impl

* i18n

* 修改个变量名

* bug fix?

src/components/TrackListItem.vue

@@ -43,8 +43,8 @@
           <span v-if="isAlbum && track.mark === 1318912" class="explicit-symbol"
             ><ExplicitSymbol
           /></span>
-          <span v-if="isTranslate" :title="translate" class="translate">
-            ({{ translate }})
+          <span v-if="isSubTitle" :title="subTitle" class="subTitle">
+            ({{ subTitle }})
           </span>
         </div>
         <div v-if="!isAlbum" class="artist">
@@ -124,11 +124,21 @@ export default {
     album() {
       return this.track.album || this.track.al || this.track?.simpleSong?.al;
     },
-    translate() {
-      let t;
-      if (this.track?.tns?.length > 0) t = this.track.tns[0];
-      else t = this.track.alia[0];
-      return t;
+    subTitle() {
+      let tn = undefined;
+      if (
+        this.track?.tns?.length > 0 &&
+        this.track.name !== this.track.tns[0]
+      ) {
+        tn = this.track.tns[0];
+      }
+
+      //优先显示alia
+      if (this.$store.state.settings.subTitleDefault) {
+        return this.track?.alia?.length > 0 ? this.track.alia[0] : tn;
+      } else {
+        return tn === undefined ? this.track.alia[0] : tn;
+      }
     },
     type() {
       return this.$parent.type;
@@ -136,8 +146,12 @@ export default {
     isAlbum() {
       return this.type === 'album';
     },
-    isTranslate() {
-      return this.track?.tns?.length > 0 || this.track.alia?.length > 0;
+    isSubTitle() {
+      return (
+        (this.track?.tns?.length > 0 &&
+          this.track.name !== this.track.tns[0]) ||
+        this.track.alia?.length > 0
+      );
     },
     isPlaylist() {
       return this.type === 'playlist';
@@ -294,7 +308,7 @@ button {
         font-size: 14px;
         opacity: 0.72;
       }
-      .translate {
+      .subTitle {
         color: #aeaeae;
         margin-left: 4px;
       }
@@ -398,7 +412,7 @@ button {
   .title,
   .album,
   .time,
-  .title-and-artist .translate {
+  .title-and-artist .subTitle {
     color: var(--color-primary);
   }
   .title .featured,

src/locale/lang/en.js

@@ -155,6 +155,7 @@ export default {
     enableDiscordRichPresence: 'Enable Discord Rich Presence',
     enableGlobalShortcut: 'Enable Global Shortcut',
     showLibraryDefault: 'Show library default',
+    subTitleDefault: 'Sub title alia default',
     lyricsBackground: {
       text: 'Show Lyrics Background',
       off: 'Off',

src/locale/lang/tr.js

@@ -150,6 +150,7 @@ export default {
     showPlaylistsByAppleMusic: "Apple Music'in Çalma Listelerini Göster",
     enableDiscordRichPresence: 'Discord gösterimini aktifleştir',
     showLibraryDefault: 'Kitaplık Varsayılanını göster',
+    subTitleDefault: 'Sub title alia default',
     lyricsBackground: {
       text: 'Şarkı Sözleri Arka Planını Göster',
       off: 'kapalı',

src/locale/lang/zh-CN.js

@@ -156,6 +156,7 @@ export default {
     enableDiscordRichPresence: '启用 Discord Rich Presence',
     enableGlobalShortcut: '启用全局快捷键',
     showLibraryDefault: '启动后显示音乐库',
+    subTitleDefault: '副标题使用别名',
     lyricsBackground: {
       text: '显示歌词背景',
       off: '关闭',

src/locale/lang/zh-TW.js

@@ -153,6 +153,7 @@ export default {
     enableDiscordRichPresence: '啟用 Discord Rich Presence',
     enableGlobalShortcut: '啟用全域快捷鍵',
     showLibraryDefault: '啟動後顯示音樂庫',
+    subTitleDefault: '副標題使用別名',
     lyricsBackground: {
       text: '顯示歌詞背景',
       off: '關閉',

src/store/initLocalStorage.js

@@ -26,6 +26,7 @@ let localStorage = {
     enableDiscordRichPresence: false,
     enableGlobalShortcut: true,
     showLibraryDefault: false,
+    subTitleDefault: false,
     enabledPlaylistCategories,
     proxyConfig: {
       protocol: 'noProxy',

src/views/settings.vue

@@ -337,6 +337,24 @@
           </div>
         </div>
       </div>
+
+      <div class="item">
+        <div class="left">
+          <div class="title">{{ $t('settings.subTitleDefault') }}</div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              id="sub-title-default"
+              v-model="subTitleDefault"
+              type="checkbox"
+              name="sub-title-default"
+            />
+            <label for="sub-title-default"></label>
+          </div>
+        </div>
+      </div>
+
       <div class="item">
         <div class="left">
           <div class="title" style="transform: scaleX(-1)">🐈️ 🏳️‍🌈</div>
@@ -747,6 +765,17 @@ export default {
         });
       },
     },
+    subTitleDefault: {
+      get() {
+        return this.settings.subTitleDefault;
+      },
+      set(value) {
+        this.$store.commit('updateSettings', {
+          key: 'subTitleDefault',
+          value,
+        });
+      },
+    },
     enableGlobalShortcut: {
       get() {
         return this.settings.enableGlobalShortcut;