feat(components/Navbar): 自訂和微調各系統的 titlebar (#1343)

* feat: linux custom titlebar
* add settings init
* Update zh-TW.js
* fix: color

Co-authored-by: memorydream <34763046+memorydream@users.noreply.github.com>

src/components/Navbar.vue

@@ -1,27 +1,8 @@
 <template>
   <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"
-            :class="{
-              'codicon-chrome-restore': !isWindowMaximized,
-              'codicon-chrome-maximize': isWindowMaximized,
-            }"
-            @click="windowMaxRestore"
-          ></div>
-          <div
-            class="button close codicon codicon-chrome-close"
-            @click="windowClose"
-          ></div>
-        </div>
-      </div>
+    <nav :class="{ 'has-custom-titlebar': hasCustomTitlebar }">
+      <Win32Titlebar v-if="enableWin32Titlebar" />
+      <LinuxTitlebar v-if="enableLinuxTitlebar" />
       <div class="navigation-buttons">
         <button-icon @click.native="go('back')"
           ><svg-icon icon-class="arrow-left"
@@ -96,17 +77,16 @@ import { isLooseLoggedIn, doLogout } from '@/utils/auth';
 // icons by https://github.com/microsoft/vscode-codicons
 import 'vscode-codicons/dist/codicon.css';
 
+import Win32Titlebar from '@/components/Win32Titlebar.vue';
+import LinuxTitlebar from '@/components/LinuxTitlebar.vue';
 import ContextMenu from '@/components/ContextMenu.vue';
 import ButtonIcon from '@/components/ButtonIcon.vue';
 
-const electron =
-  process.env.IS_ELECTRON === true ? window.require('electron') : null;
-const ipcRenderer =
-  process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
-
 export default {
   name: 'Navbar',
   components: {
+    Win32Titlebar,
+    LinuxTitlebar,
     ButtonIcon,
     ContextMenu,
   },
@@ -115,7 +95,8 @@ export default {
       inputFocus: false,
       langs: ['zh-CN', 'zh-TW', 'en', 'tr'],
       keywords: '',
-      isWindowMaximized: false,
+      enableWin32Titlebar: false,
+      enableLinuxTitlebar: false,
     };
   },
   computed: {
@@ -128,12 +109,18 @@ export default {
         ? `${this.data?.user?.avatarUrl}?param=512y512`
         : 'http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=60y60';
     },
+    hasCustomTitlebar() {
+      return this.enableWin32Titlebar || this.enableLinuxTitlebar;
+    },
   },
   created() {
-    if (process.env.IS_ELECTRON === true) {
-      ipcRenderer.on('isMaximized', (event, value) => {
-        this.isWindowMaximized = value;
-      });
+    if (process.platform === 'win32') {
+      this.enableWin32Titlebar = true;
+    } else if (
+      process.platform === 'linux' &&
+      this.settings.linuxEnableCustomTitlebar
+    ) {
+      this.enableLinuxTitlebar = true;
     }
   },
   methods: {
@@ -175,15 +162,6 @@ export default {
         this.$router.push({ name: 'login' });
       }
     },
-    windowMinimize() {
-      ipcRenderer.send('minimize');
-    },
-    windowMaxRestore() {
-      ipcRenderer.send('maximizeOrUnmaximize');
-    },
-    windowClose() {
-      ipcRenderer.send('close');
-    },
   },
 };
 </script>
@@ -221,68 +199,9 @@ nav {
   }
 }
 
-.win32-titlebar {
-  display: none;
-}
-
-[data-electron-os='win32'] {
-  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;
-  }
+nav.has-custom-titlebar {
+  padding-top: 20px;
+  -webkit-app-region: no-drag;
 }
 
 .navigation-buttons {