为 Windows 平台添加沉浸式标题栏 (#277)

src/components/Navbar.vue

@@ -1,5 +1,26 @@
 <template>
   <nav :class="{ 'search-box-open': isSearchBoxOpen }">
+    <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"
@@ -55,6 +76,15 @@
 <script>
 import ButtonIcon from "@/components/ButtonIcon.vue";
 import { mapState } from "vuex";
+const platformIsWin32 = window.require
+  ? window.require("os").platform() == "win32"
+    ? true
+    : false
+  : false;
+
+const win = platformIsWin32
+  ? window.require("electron").remote.getCurrentWindow()
+  : null;
 
 export default {
   name: "Navbar",
@@ -67,6 +97,7 @@ export default {
       langs: ["zh-CN", "en"],
       keywords: "",
       isSearchBoxOpen: false,
+      windowIsMaximized: win ? win.isMaximized() : true,
     };
   },
   computed: {
@@ -93,6 +124,21 @@ export default {
     toggleSearchBox() {
       this.isSearchBoxOpen = !this.isSearchBoxOpen;
     },
+    windowMinimize() {
+      win.minimize();
+    },
+    windowMaxRestore() {
+      if (win.isMaximized()) {
+        win.restore();
+        this.windowIsMaximized = false;
+      } else {
+        win.maximize();
+        this.windowIsMaximized = true;
+      }
+    },
+    windowClose() {
+      win.close();
+    },
   },
 };
 </script>
@@ -133,6 +179,70 @@ nav {
   }
 }
 
+.win32-titlebar {
+  display: none;
+}
+
+[data-electron-platform-win32="yes"] {
+  nav {
+    padding-top: 20px;
+    -webkit-app-region: no-drag;
+  }
+  .win32-titlebar {
+    color: var(--color-text);
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    -webkit-app-region: drag;
+    display: flex;
+    align-items: center;
+    --hover: #e6e6e6;
+    --active: #cccccc;
+
+    .title {
+      padding: 8px;
+      font-size: 12px;
+      font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
+        sans-serif;
+    }
+    .controls {
+      height: 32px;
+      margin-left: auto;
+      justify-content: flex-end;
+      display: flex;
+      .button {
+        height: 100%;
+        width: 46px;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        -webkit-app-region: no-drag;
+        &:hover {
+          background: var(--hover);
+        }
+        &:active {
+          background: var(--active);
+        }
+        &.close {
+          &:hover {
+            background: rgba(232, 17, 35, 0.9);
+          }
+          &:active {
+            background: #f1707a;
+            color: #000;
+          }
+        }
+      }
+    }
+  }
+  &[data-theme="dark"] .win32-titlebar {
+    --hover: #191919;
+    --active: #333333;
+  }
+}
+
 .navigation-buttons {
   flex: 1;
   display: flex;
@@ -265,6 +375,7 @@ nav {
   }
   .search-button {
     display: none;
+    -webkit-app-region: no-drag;
   }
   @media (max-width: 600px) {
     .search-button {
@@ -316,6 +427,13 @@ nav {
     }
   }
 
+  [data-electron-platform-win32="yes"] {
+    .search-box {
+      // Add more 20px to top for title bar
+      top: calc(56px + 20px);
+    }
+  }
+
   nav.search-box-open .container {
     opacity: 1;
     height: 32px;