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

package.json

@@ -57,6 +57,7 @@
     "register-service-worker": "^1.7.1",
     "svg-sprite-loader": "^5.0.0",
     "tunnel": "^0.0.6",
+    "vscode-codicons": "^0.0.14",
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",
     "vue-electron": "^1.0.6",

src/background.js

@@ -88,15 +88,20 @@ class Background {
   createWindow() {
     console.log("creating app window");
 
+    // Only for Windows, a special title bar for it
+    const withoutFrame = process.platform == "win32";
+
     this.window = new BrowserWindow({
       width: this.store.get("window.width") | 1440,
       height: this.store.get("window.height") | 840,
-      minWidth: 1080,
-      minHeight: 720,
+      minWidth: 360,
+      minHeight: 240,
       titleBarStyle: "hiddenInset",
+      frame: !withoutFrame,
       webPreferences: {
         webSecurity: false,
         nodeIntegration: true,
+        enableRemoteModule: true,
       },
     });
 

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;

src/electron/ipcMain.js

@@ -61,4 +61,12 @@ export function initIpcMain(win, store) {
   ipcMain.on("settings", (event, options) => {
     store.set("settings", options);
   });
+
+  ipcMain.on("max-restore", () => {
+    if (win.isMaximized()) {
+      win.restore();
+    } else {
+      win.maximize();
+    }
+  });
 }

src/electron/ipcRenderer.js

@@ -2,6 +2,10 @@ export function ipcRenderer(vueInstance) {
   const self = vueInstance;
   // 添加专有的类名
   document.body.setAttribute("data-electron", "yes");
+  document.body.setAttribute(
+    "data-electron-platform-win32",
+    window.require("os").platform() == "win32" ? "yes" : "no"
+  );
   // ipc message channel
   const electron = window.require("electron");
   const ipcRenderer = electron.ipcRenderer;

src/main.js

@@ -13,6 +13,10 @@ import * as Sentry from "@sentry/browser";
 import { Vue as VueIntegration } from "@sentry/integrations";
 import { Integrations } from "@sentry/tracing";
 
+// import icons for win32 title bar
+// icons by https://github.com/microsoft/vscode-codicons
+import "vscode-codicons/dist/codicon.css";
+
 Vue.use(VueAnalytics, {
   id: "UA-180189423-1",
   router,

yarn.lock

@@ -11176,6 +11176,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1589682787766&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vscode-codicons@^0.0.14:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/vscode-codicons/-/vscode-codicons-0.0.14.tgz#e0d05418e2e195564ff6f6a2199d70415911c18f"
+  integrity sha512-6CEH5KT9ct5WMw7n5dlX7rB8ya4CUI2FSq1Wk36XaW+c5RglFtAanUV0T+gvZVVFhl/WxfjTvFHq06Hz9c1SLA==
+
 vue-analytics@^5.22.1:
   version "5.22.1"
   resolved "https://registry.yarnpkg.com/vue-analytics/-/vue-analytics-5.22.1.tgz#9d6b32da56daee1b9dfb23a267b50349a03f710f"