fix: move settings button from home to library

src/components/ContextMenu.vue

@@ -105,10 +105,18 @@ export default {
   border-radius: 7px;
   cursor: default;
   color: var(--color-text);
+  display: flex;
+  align-items: center;
   &:hover {
     color: var(--color-primary);
     background: var(--color-primary-bg-for-transparent);
   }
+
+  .svg-icon {
+    height: 16px;
+    width: 16px;
+    margin-right: 5px;
+  }
 }
 
 hr {

src/views/home.vue

@@ -51,16 +51,6 @@
         :imageSize="1024"
       />
     </div>
-
-    <footer>
-      <ButtonTwoTone
-        :iconClass="'settings'"
-        :color="'grey'"
-        @click.native="goTo('/settings')"
-      >
-        {{ $t("settings.settings") }}
-      </ButtonTwoTone>
-    </footer>
   </div>
 </template>
 
@@ -73,11 +63,10 @@ import NProgress from "nprogress";
 import { mapState } from "vuex";
 
 import CoverRow from "@/components/CoverRow.vue";
-import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 
 export default {
   name: "Home",
-  components: { CoverRow, ButtonTwoTone },
+  components: { CoverRow },
   data() {
     return {
       show: false,
@@ -132,9 +121,6 @@ export default {
         );
       });
     },
-    goTo(path) {
-      this.$router.push({ path });
-    },
   },
   activated() {
     this.loadData();

src/views/library.vue

@@ -1,9 +1,12 @@
 <template>
   <div v-show="show">
     <h1>
-      <img class="head" :src="data.user.avatarUrl | resizeImage" />{{
+      <img class="avatar" :src="data.user.avatarUrl | resizeImage" />{{
         data.user.nickname
       }}{{ $t("library.sLibrary") }}
+      <button-icon @click.native="showUserProfileMenu"
+        ><svg-icon icon-class="arrow-right"
+      /></button-icon>
     </h1>
     <div class="section-one">
       <div class="liked-songs" @click="goToLikedSongsList">
@@ -109,6 +112,15 @@
         <MvRow :mvs="mvs" />
       </div>
     </div>
+
+    <ContextMenu ref="userProfileMenu">
+      <div class="item" @click="settings"
+        ><svg-icon icon-class="settings" />设置</div
+      >
+      <div class="item" @click="logout"
+        ><svg-icon icon-class="logout" />退出登录</div
+      >
+    </ContextMenu>
   </div>
 </template>
 
@@ -124,9 +136,11 @@ import {
 } from "@/api/user";
 import { randomNum, dailyTask } from "@/utils/common";
 import { getPlaylistDetail } from "@/api/playlist";
-import { isAccountLoggedIn } from "@/utils/auth";
+import { isAccountLoggedIn, doLogout } from "@/utils/auth";
 import NProgress from "nprogress";
 
+import ContextMenu from "@/components/ContextMenu.vue";
+import ButtonIcon from "@/components/ButtonIcon.vue";
 import TrackList from "@/components/TrackList.vue";
 import CoverRow from "@/components/CoverRow.vue";
 import SvgIcon from "@/components/SvgIcon.vue";
@@ -134,7 +148,7 @@ import MvRow from "@/components/MvRow.vue";
 
 export default {
   name: "Library",
-  components: { SvgIcon, CoverRow, TrackList, MvRow },
+  components: { SvgIcon, CoverRow, TrackList, MvRow, ButtonIcon, ContextMenu },
   data() {
     return {
       show: false,
@@ -297,6 +311,17 @@ export default {
         value: true,
       });
     },
+    showUserProfileMenu(e) {
+      this.$refs.userProfileMenu.openMenu(e);
+    },
+    logout() {
+      if (!confirm("确定要退出登录吗？")) return;
+      doLogout();
+      this.$router.push({ name: "home" });
+    },
+    settings() {
+      this.$router.push({ name: "settings" });
+    },
   },
   watch: {
     likedSongsInState() {
@@ -310,13 +335,21 @@ export default {
 h1 {
   font-size: 42px;
   color: var(--color-text);
-  .head {
+  display: flex;
+  align-items: center;
+  .avatar {
     height: 44px;
     margin-right: 12px;
     vertical-align: -7px;
     border-radius: 50%;
     border: rgba(0, 0, 0, 0.2);
   }
+
+  .svg-icon {
+    width: 28px;
+    height: 28px;
+    opacity: 0.18;
+  }
 }
 
 .section-one {