feat: fit mac

xiaozhu188 · Mar 12, 2021 · adf2663 · adf2663
1 parent f08a8e4
commit adf2663
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 130 deletions.
diff --git a/src/main/main.js b/src/main/main.js
@@ -74,9 +74,10 @@ function createWindow () {
     height: 690,
     minWidth: 1000,
     minHeight: 690,
-    title: pkg.description,
+    title: process.platform === 'win32' ? pkg.description : '',
     icon: previewIcon,
-    frame: false,
+    titleBarStyle: 'hiddenInset',
+    frame: process.platform !== 'win32',
     show: false,
     webPreferences: {
       nodeIntegration: true,
@@ -123,7 +124,7 @@ function createWindow () {
   if (isDevelopment) {
     // 安装vue-devtools
     let extensions = BrowserWindow.getDevToolsExtensions()
-    if (!extensions['Vue.js devtools']) {
+    if (!extensions[ 'Vue.js devtools' ]) {
       BrowserWindow.addDevToolsExtension(
         path.resolve(__dirname, './../../src/main/vue-devtools')
       )

diff --git a/src/renderer/components/BasicHeader/index.vue b/src/renderer/components/BasicHeader/index.vue
@@ -13,7 +13,7 @@
       <div class="top-bar-menu">
         <div class="top-bar-menu-user">
           <div class="item">
-            <user-info></user-info>
+            <user-info />
           </div>
           <div class="item">
             <theme-setting />
@@ -23,22 +23,22 @@
           </div>
           <div class="item" @click="logout" v-if="userId">退出</div>
         </div>
-        <frame-actions />
+        <frame-actions v-if="platform === 'win32'" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import config from '@/config/defaultSettings'
 import ZIcon from '@/components/ZIcon'
 import SearchBox from './SeachBox'
 import UserInfo from './UserInfo'
 import Controls from './Controls'
 import ThemeSetting from './ThemeSetting'
 import FrameActions from './FrameActions'
 import eventBus from '@/utils/eventBus'
+
 export default {
   components: {
     ZIcon,
@@ -49,6 +49,7 @@ export default {
     FrameActions
   },
   computed: {
+    ...mapState('App', ['platform']),
     ...mapGetters('App', ['primaryColor']),
     ...mapGetters('User', ['userId']),
     ...mapGetters('play', [
@@ -78,152 +79,153 @@ export default {
 </script>
 
 <style>
-.ant-popover-arrow {
-  border-top-color: #fafafa !important;
-  border-left-color: #fafafa !important;
-}
+  .ant-popover-arrow {
+    border-top-color: #fafafa !important;
+    border-left-color: #fafafa !important;
+  }
 </style>
 <style lang="less">
-.search-wrapper {
-  dl,
-  dd {
-    margin-bottom: 0;
-  }
-  .search-content {
-    display: flex;
-    margin: -12px -16px;
-    dl {
-      width: 50%;
-      font-size: 13px;
-      &:not(:last-child) {
-        border-right: 1px solid #eee;
-      }
-    }
-    dt {
-      padding: 7px 15px;
-      border-bottom: 1px solid #eee;
-      color: #999;
-    }
+  .search-wrapper {
+    dl,
     dd {
-      padding: 0 15px;
-      line-height: 28px;
-      color: #111;
-      &:hover {
-        background: #eee;
-      }
+      margin-bottom: 0;
     }
-  }
-  .search-result {
-    margin: -12px -16px;
-    dt {
-      padding: 7px 15px;
-      background: #f3f5f9;
+    .search-content {
+      display: flex;
+      margin: -12px -16px;
+      dl {
+        width: 50%;
+        font-size: 13px;
+        &:not(:last-child) {
+          border-right: 1px solid #eee;
+        }
+      }
+      dt {
+        padding: 7px 15px;
+        border-bottom: 1px solid #eee;
+        color: #999;
+      }
+      dd {
+        padding: 0 15px;
+        line-height: 28px;
+        color: #111;
+        &:hover {
+          background: #eee;
+        }
+      }
     }
-    dd {
-      padding: 0 5px 0 30px;
-      line-height: 28px;
-      color: #111;
-      &:hover {
-        background: #eee;
+    .search-result {
+      margin: -12px -16px;
+      dt {
+        padding: 7px 15px;
+        background: #f3f5f9;
+      }
+      dd {
+        padding: 0 5px 0 30px;
+        line-height: 28px;
+        color: #111;
+        &:hover {
+          background: #eee;
+        }
       }
     }
   }
-}
 
-.top-bar {
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  .top-bar-logo {
+  .top-bar {
     display: flex;
-    align-items: center;
-    width: 200px;
-    flex: 0 0 200px;
-    padding-left: 15px;
-    img {
-      width: 140px;
-    }
-  }
-  .top-bar-main {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .top-bar-search {
-      width: 240px;
-      flex: 0 0 240px;
-      -webkit-app-region: no-drag;
+    height: 100%;
+    overflow: hidden;
+    .top-bar-logo {
+      display: flex;
+      align-items: center;
+      width: 200px;
+      flex: 0 0 200px;
+      padding-left: 15px;
+      img {
+        width: 140px;
+      }
     }
-    .top-bar-control {
-      margin-right: 5px;
-      -webkit-app-region: no-drag;
-      /deep/ .ant-btn {
-        height: 24px;
-        line-height: 22px;
+    .top-bar-main {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .top-bar-search {
+        width: 240px;
+        flex: 0 0 240px;
+        -webkit-app-region: no-drag;
+      }
+      .top-bar-control {
+        margin-right: 5px;
+        -webkit-app-region: no-drag;
+        /deep/ .ant-btn {
+          height: 24px;
+          line-height: 22px;
+        }
       }
     }
   }
-}
 
-.top-bar-menu {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  height: 100%;
-  .top-bar-menu-user {
+  .top-bar-menu {
+    flex: 1;
     display: flex;
-    -webkit-app-region: no-drag;
-    .item {
-      display: inline-flex;
-      align-items: center;
-      padding: 0 10px;
-      cursor: pointer;
-      transition: all 0.3s;
-      &:hover {
-        color: rgba(255, 255, 255, 1);
-      }
-      .ant-badge-count {
-        height: 16px;
-        line-height: 16px;
-        min-width: 16px;
-        padding: 0 5px;
-        background: #fff;
-        color: @primary-color;
-        box-shadow: none;
-        border-radius: 8px;
-      }
-      .avatar {
-        margin-right: 8px;
-        border-radius: 50%;
-      }
+    justify-content: flex-end;
+    height: 100%;
+    .top-bar-menu-user {
+      display: flex;
+      -webkit-app-region: no-drag;
+      .item {
+        display: inline-flex;
+        align-items: center;
+        padding: 0 10px;
+        cursor: pointer;
+        transition: all 0.3s;
+        &:hover {
+          color: rgba(255, 255, 255, 1);
+        }
+        .ant-badge-count {
+          height: 16px;
+          line-height: 16px;
+          min-width: 16px;
+          padding: 0 5px;
+          background: #fff;
+          color: @primary-color;
+          box-shadow: none;
+          border-radius: 8px;
+        }
+        .avatar {
+          margin-right: 8px;
+          border-radius: 50%;
+        }
 
-      .icon {
-        font-size: 16px;
+        .icon {
+          font-size: 16px;
+        }
       }
     }
   }
-}
 
-.header-user {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  transition: all 0.3s;
-  .header-user-info {
+  .header-user {
+    height: 100%;
     display: flex;
     align-items: center;
+    transition: all 0.3s;
+    .header-user-info {
+      display: flex;
+      align-items: center;
+    }
+    span {
+      font-size: 13px;
+      letter-spacing: 2px;
+    }
   }
-  span {
-    font-size: 13px;
-    letter-spacing: 2px;
+
+  .user-info-name {
+    display: inline-block;
+    max-width: 80px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
   }
-}
-.user-info-name {
-  display: inline-block;
-  max-width: 80px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-}
 </style>
diff --git a/src/renderer/layouts/BasicLayout.vue b/src/renderer/layouts/BasicLayout.vue
@@ -117,6 +117,10 @@ export default {
     z-index: 22;
     position: relative;
   }
+  .basic-layout-header {
+    box-sizing: content-box;
+    padding-top: 20px;
+  }
   .basic-layout-footer {
     border-top: 1px solid #ddd;
   }

diff --git a/src/renderer/store/modules/App.js b/src/renderer/store/modules/App.js
@@ -7,7 +7,8 @@ const state = {
   showView: false,
   showDesktoplyric: false,
   isOnliline: navigator.onLine,
-  noLimitRoutes: ['music_local', 'music_download', 'setting']
+  noLimitRoutes: ['music_local', 'music_download', 'setting'],
+  platform: process.platform
 }
 
 const getters = {