feat: add settings page & move change lang button to settings page

src/App.vue

@@ -71,8 +71,12 @@ main {
   }
 }
 
+select,
 button {
   font-family: inherit;
+}
+
+button {
   background: none;
   border: none;
   cursor: pointer;

src/assets/icons/logout.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-out-alt" class="svg-inline--fa fa-sign-out-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"></path></svg>

src/components/Footer.vue

@@ -1,26 +0,0 @@
-<template>
-  <footer>
-    <ButtonTwoTone :iconClass="'settings'" :color="'grey'">
-      {{ $t("footer.settings") }}
-    </ButtonTwoTone>
-  </footer>
-</template>
-
-<script>
-import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
-
-export default {
-  name: "Footer",
-  components: {
-    ButtonTwoTone,
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-footer {
-  display: flex;
-  justify-content: center;
-  margin-top: 48px;
-}
-</style>

src/components/Navbar.vue

@@ -41,9 +41,6 @@
           </div>
         </div>
       </div>
-      <div class="locale-changer" @click="changeLang">
-        <svg-icon icon-class="translation" class="translation" />
-      </div>
     </div>
   </nav>
 </template>
@@ -80,16 +77,6 @@ export default {
         query: { keywords: this.keywords },
       });
     },
-    changeLang() {
-      let lang = "";
-      if (this.$i18n.locale === "zh-CN") {
-        lang = "en";
-      } else {
-        lang = "zh-CN";
-      }
-      this.$i18n.locale = lang;
-      this.$store.commit("changeLang", lang);
-    },
   },
 };
 </script>
@@ -213,13 +200,4 @@ nav {
     width: 24px;
   }
 }
-
-.locale-changer {
-  position: relative;
-  .translation {
-    margin-left: 16px;
-    height: 48px;
-    width: 48px;
-  }
-}
 </style>

src/router/index.js

@@ -98,6 +98,11 @@ const routes = [
       requireLogin: true,
     },
   },
+  {
+    path: "/settings",
+    name: "settings",
+    component: () => import("@/views/settings"),
+  },
 ];
 const router = new VueRouter({
   routes,
@@ -129,7 +134,10 @@ router.beforeEach((to, from, next) => {
 });
 
 router.afterEach((to) => {
-  if (to.matched.some((record) => !record.meta.keepAlive)) {
+  if (
+    to.matched.some((record) => !record.meta.keepAlive) &&
+    !["settings"].includes(to.name)
+  ) {
     NProgress.start();
   }
 });

src/utils/auth.js

@@ -1,10 +1,11 @@
 import Cookies from "js-cookie";
 import { logout } from "@/api/auth";
+import store from "@/store";
 
 export function doLogout() {
-  console.log("logout");
   logout();
   Cookies.remove("loginMode");
+  store.commit("updateUser", { id: 0 });
 }
 
 export function isLoggedIn() {

src/views/home.vue

@@ -47,6 +47,16 @@
         :imageSize="1024"
       />
     </div>
+
+    <footer>
+      <ButtonTwoTone
+        :iconClass="'settings'"
+        :color="'grey'"
+        @click.native="goTo('/settings')"
+      >
+        {{ $t("footer.settings") }}
+      </ButtonTwoTone>
+    </footer>
   </div>
 </template>
 
@@ -57,10 +67,11 @@ import { byAppleMusic } from "@/utils/staticPlaylist";
 import { newAlbums } from "@/api/album";
 import NProgress from "nprogress";
 import CoverRow from "@/components/CoverRow.vue";
+import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 
 export default {
   name: "Home",
-  components: { CoverRow },
+  components: { CoverRow, ButtonTwoTone },
   data() {
     return {
       show: false,
@@ -114,6 +125,9 @@ export default {
         );
       });
     },
+    goTo(path) {
+      this.$router.push({ path });
+    },
   },
   activated() {
     this.loadData();
@@ -180,4 +194,10 @@ export default {
     }
   }
 }
+
+footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 48px;
+}
 </style>