From 4cbe9f98ce56a6c099c4e85e0780e376167df5b6 Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Thu, 18 Mar 2021 17:07:26 +0800
Subject: [PATCH] fix: UX improvement

---
 src/assets/icons/login.svg |   1 +
 src/components/Navbar.vue  | 191 +++++++++++++++++++++++--------------
 src/locale/lang/zh-CN.js   |   2 +-
 src/views/library.vue      |  37 +------
 4 files changed, 122 insertions(+), 109 deletions(-)
 create mode 100644 src/assets/icons/login.svg

diff --git a/src/assets/icons/login.svg b/src/assets/icons/login.svg
new file mode 100644
index 0000000..b4acd61
--- /dev/null
+++ b/src/assets/icons/login.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sign-in-alt" class="svg-inline--fa fa-sign-in-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"></path></svg>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 9f50ad9..549a543 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,83 +1,102 @@
 <template>
-  <nav>
-    <div class="win32-titlebar">
-      <div class="title">YesPlayMusic</div>
-      <div class="controls">
-        <div
-          class="button minimize codicon codicon-chrome-minimize"
-          @click="windowMinimize"
-        ></div>
-        <div
-          class="button max-restore codicon"
-          @click="windowMaxRestore"
-          :class="{
-            'codicon-chrome-restore': windowIsMaximized,
-            'codicon-chrome-maximize': !windowIsMaximized,
-          }"
-        ></div>
-        <div
-          class="button close codicon codicon-chrome-close"
-          @click="windowClose"
-        ></div>
+  <div>
+    <nav>
+      <div class="win32-titlebar">
+        <div class="title">YesPlayMusic</div>
+        <div class="controls">
+          <div
+            class="button minimize codicon codicon-chrome-minimize"
+            @click="windowMinimize"
+          ></div>
+          <div
+            class="button max-restore codicon"
+            @click="windowMaxRestore"
+            :class="{
+              'codicon-chrome-restore': windowIsMaximized,
+              'codicon-chrome-maximize': !windowIsMaximized,
+            }"
+          ></div>
+          <div
+            class="button close codicon codicon-chrome-close"
+            @click="windowClose"
+          ></div>
+        </div>
+      </div>
+      <div class="navigation-buttons">
+        <button-icon @click.native="go('back')"
+          ><svg-icon icon-class="arrow-left"
+        /></button-icon>
+        <button-icon @click.native="go('forward')"
+          ><svg-icon icon-class="arrow-right"
+        /></button-icon>
+      </div>
+      <div class="navigation-links">
+        <router-link to="/" :class="{ active: this.$route.name === 'home' }">{{
+          $t("nav.home")
+        }}</router-link>
+        <router-link
+          to="/explore"
+          :class="{ active: this.$route.name === 'explore' }"
+          >{{ $t("nav.explore") }}</router-link
+        >
+        <router-link
+          to="/library"
+          :class="{ active: this.$route.name === 'library' }"
+          >{{ $t("nav.library") }}</router-link
+        >
       </div>
-    </div>
-    <div class="navigation-buttons">
-      <button-icon @click.native="go('back')"
-        ><svg-icon icon-class="arrow-left"
-      /></button-icon>
-      <button-icon @click.native="go('forward')"
-        ><svg-icon icon-class="arrow-right"
-      /></button-icon>
-    </div>
-    <div class="navigation-links">
-      <router-link to="/" :class="{ active: this.$route.name === 'home' }">{{
-        $t("nav.home")
-      }}</router-link>
-      <router-link
-        to="/explore"
-        :class="{ active: this.$route.name === 'explore' }"
-        >{{ $t("nav.explore") }}</router-link
-      >
-      <router-link
-        to="/library"
-        :class="{ active: this.$route.name === 'library' }"
-        >{{ $t("nav.library") }}</router-link
-      >
-    </div>
-    <div class="right-part">
-      <a
-        href="https://github.com/qier222/YesPlayMusic"
-        target="blank"
-        v-if="settings.showGithubIcon !== false"
-        ><svg-icon icon-class="github" class="github"
-      /></a>
-      <div class="search-box">
-        <div class="container" :class="{ active: inputFocus }">
-          <svg-icon icon-class="search" />
-          <div class="input">
-            <input
-              ref="searchInput"
-              :placeholder="inputFocus ? '' : $t('nav.search')"
-              v-model="keywords"
-              @keydown.enter="doSearch"
-              @focus="inputFocus = true"
-              @blur="inputFocus = false"
-            />
+      <div class="right-part">
+        <div class="search-box">
+          <div class="container" :class="{ active: inputFocus }">
+            <svg-icon icon-class="search" />
+            <div class="input">
+              <input
+                ref="searchInput"
+                :placeholder="inputFocus ? '' : $t('nav.search')"
+                v-model="keywords"
+                @keydown.enter="doSearch"
+                @focus="inputFocus = true"
+                @blur="inputFocus = false"
+              />
+            </div>
           </div>
         </div>
+        <img class="avatar" :src="avatarUrl" @click="showUserProfileMenu" />
+      </div>
+    </nav>
+
+    <ContextMenu ref="userProfileMenu">
+      <div class="item" @click="toLogin" v-if="!isLooseLoggedIn">
+        <svg-icon icon-class="login" />
+        登录
+      </div>
+      <div class="item" @click="toSettings">
+        <svg-icon icon-class="settings" />
+        {{ $t("library.userProfileMenu.settings") }}
       </div>
-    </div>
-  </nav>
+      <div class="item" @click="logout" v-if="isLooseLoggedIn">
+        <svg-icon icon-class="logout" />
+        {{ $t("library.userProfileMenu.logout") }}
+      </div>
+      <hr />
+      <div class="item" @click="toGitHub">
+        <svg-icon icon-class="github" /> GitHub仓库
+      </div>
+    </ContextMenu>
+  </div>
 </template>
 
 <script>
-import ButtonIcon from "@/components/ButtonIcon.vue";
 import { mapState } from "vuex";
+import { isLooseLoggedIn, doLogout } from "@/utils/auth";
 
 // import icons for win32 title bar
 // icons by https://github.com/microsoft/vscode-codicons
 import "vscode-codicons/dist/codicon.css";
 
+import ContextMenu from "@/components/ContextMenu.vue";
+import ButtonIcon from "@/components/ButtonIcon.vue";
+
 let win = undefined;
 if (process.env.IS_ELECTRON === true) {
   const electron = require("electron");
@@ -88,6 +107,7 @@ export default {
   name: "Navbar",
   components: {
     ButtonIcon,
+    ContextMenu,
   },
   data() {
     return {
@@ -98,7 +118,15 @@ export default {
     };
   },
   computed: {
-    ...mapState(["settings"]),
+    ...mapState(["settings", "data"]),
+    isLooseLoggedIn() {
+      return isLooseLoggedIn();
+    },
+    avatarUrl() {
+      return this.data.user.avatarUrl
+        ? `${this.data.user.avatarUrl}?param=512y512`
+        : "http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=60y60";
+    },
   },
   methods: {
     go(where) {
@@ -118,6 +146,20 @@ export default {
         params: { keywords: this.keywords },
       });
     },
+    showUserProfileMenu(e) {
+      this.$refs.userProfileMenu.openMenu(e);
+    },
+    logout() {
+      if (!confirm("确定要退出登录吗？")) return;
+      doLogout();
+      this.$router.push({ name: "home" });
+    },
+    toSettings() {
+      this.$router.push({ name: "settings" });
+    },
+    toGitHub() {
+      window.open("https://github.com/qier222/YesPlayMusic");
+    },
     windowMinimize() {
       win.minimize();
     },
@@ -352,12 +394,15 @@ nav {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  .github {
-    margin-right: 16px;
-    height: 24px;
-    width: 24px;
-    color: var(--color-text);
-    -webkit-app-region: no-drag;
+  .avatar {
+    height: 30px;
+    margin-left: 12px;
+    vertical-align: -7px;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      filter: brightness(80%);
+    }
   }
   .search-button {
     display: none;
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 4fc031e..384a702 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -27,7 +27,7 @@ export default {
     newPlayList: "新建歌单",
     userProfileMenu: {
       settings: "设置",
-      logout: "退出登录",
+      logout: "登出",
     },
   },
   explore: {
diff --git a/src/views/library.vue b/src/views/library.vue
index 6349515..83eb594 100644
--- a/src/views/library.vue
+++ b/src/views/library.vue
@@ -4,9 +4,6 @@
       <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">
@@ -112,17 +109,6 @@
         <MvRow :mvs="mvs" />
       </div>
     </div>
-
-    <ContextMenu ref="userProfileMenu">
-      <div class="item" @click="settings">
-        <svg-icon icon-class="settings" />
-        {{ $t("library.userProfileMenu.settings") }}
-      </div>
-      <div class="item" @click="logout">
-        <svg-icon icon-class="logout" />
-        {{ $t("library.userProfileMenu.logout") }}
-      </div>
-    </ContextMenu>
   </div>
 </template>
 
@@ -139,11 +125,9 @@ import {
 } from "@/api/user";
 import { randomNum, dailyTask } from "@/utils/common";
 import { getPlaylistDetail } from "@/api/playlist";
-import { isAccountLoggedIn, doLogout } from "@/utils/auth";
+import { isAccountLoggedIn } 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";
@@ -151,7 +135,7 @@ import MvRow from "@/components/MvRow.vue";
 
 export default {
   name: "Library",
-  components: { SvgIcon, CoverRow, TrackList, MvRow, ButtonIcon, ContextMenu },
+  components: { SvgIcon, CoverRow, TrackList, MvRow },
   data() {
     return {
       show: false,
@@ -344,17 +328,6 @@ 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() {
@@ -377,12 +350,6 @@ h1 {
     border-radius: 50%;
     border: rgba(0, 0, 0, 0.2);
   }
-
-  .svg-icon {
-    width: 28px;
-    height: 28px;
-    opacity: 0.18;
-  }
 }
 
 .section-one {