feat: add show lyrics translation to settings

src/store/index.js

@@ -4,13 +4,10 @@ import state from "./state";
 import mutations from "./mutations";
 import actions from "./actions";
 import { changeAppearance } from "@/utils/common";
-import updateApp from "@/utils/updateApp";
 import Player from "@/utils/Player";
 // vuex 自定义插件
 import saveToLocalStorage from "./plugins/localStorage";
 
-updateApp();
-
 Vue.use(Vuex);
 
 let plugins = [saveToLocalStorage];

src/store/initLocalStorage.js

@@ -12,6 +12,7 @@ let localStorage = {
     showUnavailableSongInGreyStyle: true,
     automaticallyCacheSongs: false,
     nyancatStyle: false,
+    showLyricsTranslation: true,
   },
   data: {
     user: {},

src/store/state.js

@@ -1,5 +1,6 @@
 import initLocalStorage from "./initLocalStorage";
 import pkg from "../../package.json";
+import updateApp from "@/utils/updateApp";
 
 if (localStorage.getItem("appVersion") === null) {
   localStorage.setItem("settings", JSON.stringify(initLocalStorage.settings));
@@ -7,6 +8,8 @@ if (localStorage.getItem("appVersion") === null) {
   localStorage.setItem("appVersion", pkg.version);
 }
 
+updateApp();
+
 export default {
   showLyrics: false,
   liked: {

src/utils/updateApp.js

@@ -3,13 +3,19 @@ import pkg from "../../package.json";
 
 const updateSetting = () => {
   const parsedSettings = JSON.parse(localStorage.getItem("settings"));
+  const {
+    playlistCategories,
+    showUnavailableSongInGreyStyle,
+    automaticallyCacheSongs,
+    nyancatStyle,
+    showLyricsTranslation,
+  } = initLocalStorage.settings;
   const settings = {
-    playlistCategories: initLocalStorage?.settings?.playlistCategories,
-    showUnavailableSongInGreyStyle:
-      initLocalStorage?.settings?.showUnavailableSongInGreyStyle,
-    automaticallyCacheSongs:
-      initLocalStorage?.settings?.automaticallyCacheSongs,
-    nyancatStyle: initLocalStorage?.settings?.nyancatStyle,
+    playlistCategories,
+    showUnavailableSongInGreyStyle,
+    automaticallyCacheSongs,
+    nyancatStyle,
+    showLyricsTranslation,
     ...parsedSettings,
   };
 

src/views/lyrics.vue

@@ -134,6 +134,7 @@
             "
           ></div>
         </div>
+              v-html="formatLine(line)"
       </div>
       <div class="close-button" @click="toggleLyrics">
         <button><svg-icon icon-class="arrow-down" /></button>
@@ -274,6 +275,15 @@ export default {
         }
       }, 500);
     },
+    formatLine(line) {
+      const showLyricsTranslation = this.$store.state.settings
+        .showLyricsTranslation;
+      if (showLyricsTranslation && line.contents[1]) {
+        return line.contents[0] + "<br/>" + line.contents[1];
+      } else {
+        return line.contents[0];
+      }
+    },
   },
   watch: {
     currentTrack() {

src/views/settings.vue

@@ -109,6 +109,22 @@
           </button>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title">显示歌词翻译</div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              type="checkbox"
+              name="show-lyrics-translation"
+              id="show-lyrics-translation"
+              v-model="showLyricsTranslation"
+            />
+            <label for="show-lyrics-translation"></label>
+          </div>
+        </div>
+      </div>
       <div class="item">
         <div class="left">
           <div class="title"> {{ $t("settings.showGitHubIcon") }} </div>
@@ -294,6 +310,17 @@ export default {
         }
       },
     },
+    showLyricsTranslation: {
+      get() {
+        return this.settings.showLyricsTranslation;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "showLyricsTranslation",
+          value,
+        });
+      },
+    },
   },
   methods: {
     logout() {