From b811906baef1006702fe5bc4f7795dd03e42e421 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Thu, 11 Jun 2020 21:41:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=BD=AF=E4=BB=B6=E6=9C=80?=
 =?UTF-8?q?=E5=B0=8F=E5=8C=96=E3=80=81=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |   1 +
 src/common/defaultSetting.js                  |   6 +-
 src/common/utils.js                           |   1 +
 src/renderer/App.vue                          |   8 +-
 src/renderer/assets/styles/variables.less     |   2 +-
 src/renderer/components/core/Aside.vue        | 109 ++++++++++--
 src/renderer/components/core/Icons.vue        |  12 ++
 src/renderer/components/core/PlayerDetail.vue | 155 ++++++-----------
 src/renderer/components/core/Toolbar.vue      | 158 +++++++-----------
 .../components/material/SearchInput.vue       |  51 +++---
 src/renderer/config/event.js                  |  18 --
 src/renderer/event/index.js                   |  23 +++
 src/renderer/event/names.js                   |  20 +++
 src/renderer/lang/cns/view/setting.json       |   3 +
 src/renderer/lang/cnt/view/setting.json       |   3 +
 src/renderer/lang/en/view/setting.json        |   3 +
 src/renderer/main.js                          |   2 +-
 src/renderer/views/Setting.vue                |  24 ++-
 18 files changed, 335 insertions(+), 264 deletions(-)
 delete mode 100644 src/renderer/config/event.js
 create mode 100644 src/renderer/event/index.js
 create mode 100644 src/renderer/event/names.js

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 6cc5c85b..db6fe907 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -8,6 +8,7 @@
 - 新增我的列表右键菜单复制歌曲名选项
 - 新增桌面歌词，默认关闭，可到设置或者托盘菜单开启；调整字体大小、透明度时，鼠标左击按钮正常调整，右击微调；已知windows下贴边拖拽调整歌词窗口大小时可能会导致窗口变黑，这时只需将窗口拖屏幕离边缘再拖回去即可；Windows 7未开启Aero效果时桌面歌词会有问题，详情看常见问题解决；Linux版桌面歌词有问题，以后再尝试优化；
 - 新增“清热板蓝”皮肤
+- 新增软件最小化、关闭按钮位置设置，MAC版默认为左边，非MAC为右边，不想用默认的可到设置修改
 
 ### 优化
 
diff --git a/src/common/defaultSetting.js b/src/common/defaultSetting.js
index 39c30b6d..b01e446e 100644
--- a/src/common/defaultSetting.js
+++ b/src/common/defaultSetting.js
@@ -1,8 +1,9 @@
 const path = require('path')
 const os = require('os')
+const { isMac } = require('./utils')
 
 const defaultSetting = {
-  version: '1.0.29',
+  version: '1.0.30',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -19,7 +20,7 @@ const defaultSetting = {
     height: 700,
     x: -1,
     y: -1,
-    theme: 'green',
+    theme: 0,
     style: {
       fontSize: 125,
       opacity: 80,
@@ -84,6 +85,7 @@ const defaultSetting = {
   randomAnimate: true,
   ignoreVersion: null,
   isAgreePact: false,
+  controlBtnPosition: isMac ? 'left' : 'right',
 }
 
 const overwriteSetting = {
diff --git a/src/common/utils.js b/src/common/utils.js
index 1591db88..7c4e238b 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -164,6 +164,7 @@ exports.initSetting = () => {
   // 重置 ^0.18.2 排行榜ID
   if (!newSetting.leaderboard.tabId.includes('__')) newSetting.leaderboard.tabId = 'kw__16'
 
+  // newSetting.controlBtnPosition = 'right'
   electronStore_config.set('version', settingVersion)
   electronStore_config.set('setting', newSetting)
   return newSetting
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index aa58533b..2357be0d 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -28,6 +28,8 @@ import { rendererOn, rendererSend, rendererInvoke, NAMES } from '../common/ipc'
 import { isLinux } from '../common/utils'
 import music from './utils/music'
 import { throttle, openUrl } from './utils'
+import { base as eventBaseName } from './event/names'
+
 window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
 dnscache({
   enable: true,
@@ -92,7 +94,7 @@ export default {
   },
   mounted() {
     document.body.classList.add(this.isNt ? 'noTransparent' : 'transparent')
-    window.eventHub.$emit('bindKey')
+    window.eventHub.$emit(eventBaseName.bindKey)
     this.init()
   },
   watch: {
@@ -202,7 +204,7 @@ export default {
         // this.setDesktopLyricConfig(config)
         // console.log('set_config', JSON.stringify(this.setting) === JSON.stringify(config))
         this.setSetting(Object.assign({}, this.setting, config))
-        window.eventHub.$emit('set_config', config)
+        window.eventHub.$emit(eventBaseName.set_config, config)
       })
       // 更新超时定时器
       this.updateTimeout = setTimeout(() => {
@@ -346,7 +348,7 @@ export default {
       document.body.removeEventListener('mouseleave', this.enableIgnoreMouseEvents)
     }
     document.body.removeEventListener('click', this.handleBodyClick)
-    window.eventHub.$emit('unbindKey')
+    window.eventHub.$emit(eventBaseName.unbindKey)
   },
 }
 </script>
diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less
index 1e2a3f56..761b7aab 100644
--- a/src/renderer/assets/styles/variables.less
+++ b/src/renderer/assets/styles/variables.less
@@ -638,7 +638,7 @@
 @color-blue2-closeBtn-hover: fadeout(@color-blue2-closeBtn, 10%);
 @color-blue2-badge-success: lighten(@color-blue2-theme, 15%);
 @color-blue2-badge-success-font: #fff;
-@color-blue2-badge-info: #6376a2;
+@color-blue2-badge-info: #b080db;
 @color-blue2-badge-info-font: #fff;
 
 
diff --git a/src/renderer/components/core/Aside.vue b/src/renderer/components/core/Aside.vue
index 56132281..14b46ec0 100644
--- a/src/renderer/components/core/Aside.vue
+++ b/src/renderer/components/core/Aside.vue
@@ -1,6 +1,14 @@
 <template lang="pug">
 div(:class="$style.aside")
-  div(:class="['animated', logoAnimate, $style.logo]") L X
+  div(:class="$style.controlBtn" v-if="setting.controlBtnPosition == 'left'")
+    button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+      svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+        use(xlink:href='#icon-window-close')
+    button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
+      svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+        use(xlink:href='#icon-window-minimize')
+
+  div(:class="['animated', logoAnimate, $style.logo]" v-else) L X
     //- svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
       use(xlink:href='#icon-logo')
 
@@ -49,6 +57,7 @@ div(:class="$style.aside")
 
 <script>
 import { mapGetters } from 'vuex'
+import { base as eventBaseName } from '../../event/names'
 // import { getRandom } from '../../utils'
 export default {
   data() {
@@ -77,12 +86,21 @@ export default {
   // mounted() {
   //   this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
   // },
-  // methods: {
-  //   handleMouseEnter() {
-  //     console.log('object')
-  //     this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
-  //   },
-  // },
+  methods: {
+    // handleMouseEnter() {
+    //   console.log('object')
+    //   this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
+    // },
+    min() {
+      window.eventHub.$emit(eventBaseName.min)
+    },
+    max() {
+      window.eventHub.$emit(eventBaseName.max)
+    },
+    close() {
+      window.eventHub.$emit(eventBaseName.close)
+    },
+  },
 }
 </script>
 
@@ -102,11 +120,58 @@ export default {
   display: flex;
   flex-flow: column nowrap;
 }
-:global(.nd) {
-  .aside {
-    -webkit-app-region: no-drag;
+
+@control-btn-width: @height-toolbar * .26;
+@control-btn-height: 6%;
+.controlBtn {
+  box-sizing: border-box;
+  padding: 0 7px;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 100%;
+  height: @control-btn-height;
+  -webkit-app-region: no-drag;
+  opacity: .5;
+  transition: opacity @transition-theme;
+  &:hover {
+    opacity: .8;
+    .controlBtniIcon {
+      opacity: 1;
+    }
+  }
+
+  button {
+    position: relative;
+    width: @control-btn-width;
+    height: @control-btn-width;
+    background: none;
+    border: none;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+    outline: none;
+    padding: 1px;
+    cursor: pointer;
+    border-radius: 50%;
+    color: #fff;
+
+    &.min {
+      background-color: @color-minBtn;
+    }
+    &.max {
+      background-color: @color-maxBtn;
+    }
+    &.close {
+      background-color: @color-closeBtn;
+    }
   }
 }
+.controlBtniIcon {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
 .logo {
   box-sizing: border-box;
   padding: 0 13%;
@@ -115,15 +180,18 @@ export default {
   flex: none;
   text-align: center;
   line-height: 50px;
+  font-weight: bold;
   // -webkit-app-region: no-drag;
 }
 
 .menu {
   flex: auto;
-  // display: flex;
-  // flex-flow: column nowrap;
-  // justify-content: center;
-  // padding-bottom: 50px;
+  // &.controlBtnLeft {
+  //   display: flex;
+  //   flex-flow: column nowrap;
+  //   justify-content: center;
+  //   padding-bottom: @control-btn-height;
+  // }
   // padding: 5px;
   dl {
     -webkit-app-region: no-drag;
@@ -187,6 +255,19 @@ each(@themes, {
     .aside {
       background-color: ~'@{color-@{value}-theme-sidebar}';
     }
+    .controlBtn {
+      button {
+        &.min {
+          background-color: ~'@{color-@{value}-minBtn}';
+        }
+        &.max {
+          background-color: ~'@{color-@{value}-maxBtn}';
+        }
+        &.close {
+          background-color: ~'@{color-@{value}-closeBtn}';
+        }
+      }
+    }
     .logo {
       color: ~'@{color-@{value}-theme-font}';
     }
diff --git a/src/renderer/components/core/Icons.vue b/src/renderer/components/core/Icons.vue
index fba48163..ae88bd37 100644
--- a/src/renderer/components/core/Icons.vue
+++ b/src/renderer/components/core/Icons.vue
@@ -124,5 +124,17 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
     g#icon-list-add(fill='currentColor')
       //- 0 0 24 24
       path(d='M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z')
+
+    g#icon-window-hide(fill='currentColor')
+      //- 0 0 30.727 30.727
+      path(d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z")
+
+    g#icon-window-minimize(fill='currentColor')
+      //- 0 0 24 24
+      path(d="M20,14H4V10H20")
+
+    g#icon-window-close(fill='currentColor')
+      //- 0 0 24 24
+      path(d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z")
 </template>
 
diff --git a/src/renderer/components/core/PlayerDetail.vue b/src/renderer/components/core/PlayerDetail.vue
index 98109e78..66e680eb 100644
--- a/src/renderer/components/core/PlayerDetail.vue
+++ b/src/renderer/components/core/PlayerDetail.vue
@@ -1,13 +1,20 @@
 <template lang="pug">
-  div(:class="$style.container" @contextmenu="handleContextMenu")
+  div(:class="[$style.container, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]" @contextmenu="handleContextMenu")
     //- div(:class="$style.bg" :style="bgStyle")
     //- div(:class="$style.bg2")
     div(:class="$style.header")
-      div(:class="$style.control")
+      div(:class="$style.controBtn")
         button(type="button" :class="$style.hide" :title="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
+            use(xlink:href='#icon-window-hide')
         button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-window-minimize')
+
         //- button(type="button" :class="$style.max" @click="max")
         button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-window-close')
 
     div(:class="$style.main")
       div(:class="$style.left")
@@ -59,7 +66,7 @@
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import { rendererSend, NAMES } from 'common/ipc'
+import { base as eventBaseName } from '../../event/names'
 import { scrollTo } from '../../utils'
 
 let cancelScrollFn = null
@@ -215,6 +222,7 @@ export default {
     window.removeEventListener('resize', this.handleResize)
   },
   computed: {
+    ...mapGetters(['setting']),
     ...mapGetters('player', ['isShowPlayerDetail']),
   },
   methods: {
@@ -299,13 +307,13 @@ export default {
       this.lyricEvent.timeout = null
     },
     min() {
-      rendererSend(NAMES.mainWindow.min)
+      window.eventHub.$emit(eventBaseName.min)
     },
     max() {
-      rendererSend(NAMES.mainWindow.max)
+      window.eventHub.$emit(eventBaseName.max)
     },
     close() {
-      rendererSend(NAMES.mainWindow.close)
+      window.eventHub.$emit(eventBaseName.close)
     },
   },
 }
@@ -315,7 +323,7 @@ export default {
 <style lang="less" module>
 @import '../../assets/styles/layout.less';
 
-@control-btn-width: @height-toolbar * .5;
+@control-btn-width: @height-toolbar * .26;
 
 .container {
   position: absolute;
@@ -332,6 +340,25 @@ export default {
   border-radius: @radius-border;
   color: @color-theme_2-font;
   border-left: 12px solid @color-theme;
+
+  &.controlBtnLeft {
+    .controBtn {
+      left: 0;
+      flex-direction: row-reverse;
+      height: @height-toolbar * .7;
+      button + button {
+        margin-right: @control-btn-width / 2;
+      }
+    }
+  }
+  &.controlBtnRight {
+    .controBtn {
+      right: @control-btn-width * .5;
+      button + button {
+        margin-left: @control-btn-width * 1.2;
+      }
+    }
+  }
 }
 .bg {
   position: absolute;
@@ -358,17 +385,17 @@ export default {
   flex: 0 0 @height-toolbar;
   -webkit-app-region: drag;
 }
-.control {
+
+.controBtn {
   position: absolute;
-  right: 0;
   top: 0;
   display: flex;
   align-items: center;
   height: @height-toolbar;
   -webkit-app-region: no-drag;
-  padding: 0 @control-btn-width * 0.6;
+  padding: 0 @control-btn-width;
   &:hover {
-    button:before {
+    .controBtnIcon {
       opacity: 1;
     }
   }
@@ -379,94 +406,33 @@ export default {
     height: @control-btn-width;
     background: none;
     border: none;
+    outline: none;
+    padding: 1px;
+    cursor: pointer;
+    border-radius: 50%;
+    color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
-    outline: none;
-    padding: 0;
-    cursor: pointer;
-    + button {
-      margin-left: @control-btn-width * .4;
-    }
 
-    &:after {
-      content: ' ';
-      display: block;
-      border-radius: 50%;
-      width: 14px;
-      height: 14px;
-      transition: background-color 0.2s ease-in-out;
-    }
-
-    &:before {
-      display: block;
-      position: absolute;
-      opacity: 0;
-      transition: opacity @transition-theme;
-    }
-
-    &.hide:after {
+    &.hide {
       background-color: @color-hideBtn;
     }
-    &.min:after {
+    &.min {
       background-color: @color-minBtn;
     }
-    &.max:after {
+    &.max {
       background-color: @color-maxBtn;
     }
-    &.close:after {
+    &.close {
       background-color: @color-closeBtn;
     }
-
-    &.hide:hover:after {
-      background-color: @color-hideBtn-hover;
-    }
-    &.min:hover:after {
-      background-color: @color-minBtn-hover;
-      opacity: 1;
-    }
-    &.max:hover:after {
-      background-color: @color-maxBtn-hover;
-    }
-    &.close:hover:after {
-      background-color: @color-closeBtn-hover;
-    }
   }
 }
 
-.hide {
-  &:before {
-    content: '∨';
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 14px;
-    line-height: 1;
-    color: #fff;
-  }
-}
-
-.min {
-  &:before {
-    content: ' ';
-    width: 8px;
-    height: 2px;
-    left: @control-btn-width / 2 - 4;
-    top: @control-btn-width / 2 - 1;
-    background-color: #fff;
-  }
-}
-
-.close {
-  &:before {
-    content: '×';
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 14px;
-    line-height: 1;
-    color: #fff;
-  }
+.controBtnIcon {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
 }
 
 .main {
@@ -684,31 +650,18 @@ each(@themes, {
         // &.hide:after {
         //   background-color: ~'@{color-@{value}-hideBtn}';
         // }
-        &.hide:after {
+        &.hide {
           background-color: ~'@{color-@{value}-hideBtn}';
         }
-        &.min:after {
+        &.min {
           background-color: ~'@{color-@{value}-minBtn}';
         }
-        &.max:after {
+        &.max {
           background-color: ~'@{color-@{value}-maxBtn}';
         }
-        &.close:after {
+        &.close {
           background-color: ~'@{color-@{value}-closeBtn}';
         }
-
-        &.hide:hover:after {
-          background-color: ~'@{color-@{value}-hideBtn-hover}';
-        }
-        &.min:hover:after {
-          background-color: ~'@{color-@{value}-minBtn-hover}';
-        }
-        &.max:hover:after {
-          background-color: ~'@{color-@{value}-maxBtn-hover}';
-        }
-        &.close:hover:after {
-          background-color: ~'@{color-@{value}-closeBtn-hover}';
-        }
       }
     }
     .img {
diff --git a/src/renderer/components/core/Toolbar.vue b/src/renderer/components/core/Toolbar.vue
index 66973fe8..dbb59675 100644
--- a/src/renderer/components/core/Toolbar.vue
+++ b/src/renderer/components/core/Toolbar.vue
@@ -1,21 +1,28 @@
 <template lang="pug">
-  div(:class="$style.toolbar")
+  div(:class="[$style.toolbar, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]")
     //- img(v-if="icon")
     //- h1 {{title}}
     material-search-input(:class="$style.input"
       @event="handleEvent" :list="tipList" :visibleList="visibleList"
       v-model="searchText")
-    div(:class="$style.control")
+
+    div(:class="$style.logo" v-if="setting.controlBtnPosition == 'left'") L X
+    div(:class="$style.control" v-else)
       button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
+        svg(:class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+          use(xlink:href='#icon-window-minimize')
+
       //- button(type="button" :class="$style.max" @click="max")
       button(type="button" :class="$style.close" :title="$t('core.toolbar.close')" @click="close")
+        svg(:class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
+          use(xlink:href='#icon-window-close')
 </template>
 
 <script>
-import { rendererSend, NAMES } from 'common/ipc'
 import { mapGetters, mapMutations } from 'vuex'
 import music from '../../utils/music'
 import { debounce } from '../../utils'
+import { base as eventBaseName } from '../../event/names'
 export default {
   data() {
     return {
@@ -113,13 +120,13 @@ export default {
     },
 
     min() {
-      rendererSend(NAMES.mainWindow.min)
+      window.eventHub.$emit(eventBaseName.min)
     },
     max() {
-      rendererSend(NAMES.mainWindow.max)
+      window.eventHub.$emit(eventBaseName.max)
     },
     close() {
-      rendererSend(NAMES.mainWindow.close)
+      window.eventHub.$emit(eventBaseName.close)
     },
   },
 }
@@ -129,51 +136,48 @@ export default {
 <style lang="less" module>
 @import '../../assets/styles/layout.less';
 
-@control-btn-width: @height-toolbar * .5;
+@control-btn-width: @height-toolbar * .26;
 
 .toolbar {
   display: flex;
   height: @height-toolbar;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: space-between;
   padding-left: 15px;
   -webkit-app-region: drag;
   z-index: 2;
-  position: relative;
-}
-:global(.nd) {
-  .toolbar {
-    -webkit-app-region: no-drag;
+
+  &.controlBtnLeft {
+    .control {
+      display: none;
+    }
+  }
+  &.controlBtnRight {
+    justify-content: space-between;
   }
 }
-.input {
-  -webkit-app-region: no-drag;
-  position: absolute;
-  left: 15px;
-  top: 13px;
+
+.logo {
+  box-sizing: border-box;
+  padding: 0 @height-toolbar * .4;
+  height: @height-toolbar;
+  color: @color-theme;
+  flex: none;
+  text-align: center;
+  line-height: @height-toolbar;
+  font-weight: bold;
+  // -webkit-app-region: no-drag;
 }
 
-// img {
-//   flex: none;
-//   height: 100%;
-// }
-
-// h1 {
-//   text-align: center;
-//   padding: 8px;
-//   flex: auto;
-//   -webkit-app-region: drag;
-//   -webkit-user-select: none;
-// }
-
 .control {
   display: flex;
   align-items: center;
   height: 100%;
+  left: 15px;
   -webkit-app-region: no-drag;
-  padding: 0 @control-btn-width * 0.6;
+  padding: 0 @control-btn-width * 1.5;
   &:hover {
-    button:before {
+    .icon {
       opacity: 1;
     }
   }
@@ -184,100 +188,52 @@ export default {
     height: @control-btn-width;
     background: none;
     border: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     outline: none;
-    padding: 0;
+    padding: 1px;
     cursor: pointer;
+    border-radius: 50%;
+    color: #fff;
+
     + button {
-      margin-left: @control-btn-width * 0.4;
+      margin-left: @control-btn-width * 1.2;
     }
 
-    &:after {
-      content: ' ';
-      display: block;
-      border-radius: 50%;
-      width: 14px;
-      height: 14px;
-      transition: background-color 0.2s ease-in-out;
-    }
-
-    &:before {
-      display: block;
-      position: absolute;
-      opacity: 0;
-      transition: opacity @transition-theme;
-    }
-
-    &.min:after {
+    &.min {
       background-color: @color-minBtn;
     }
-    &.max:after {
+    &.max {
       background-color: @color-maxBtn;
     }
-    &.close:after {
+    &.close {
       background-color: @color-closeBtn;
     }
+  }
+}
 
-    &.min:hover:after {
-      background-color: @color-minBtn-hover;
-      opacity: 1;
-    }
-    &.max:hover:after {
-      background-color: @color-maxBtn-hover;
-    }
-    &.close:hover:after {
-      background-color: @color-closeBtn-hover;
-    }
-  }
-}
-.min {
-  &:before {
-    content: ' ';
-    width: 8px;
-    height: 2px;
-    left: @control-btn-width / 2 - 4;
-    top: @control-btn-width / 2 - 1;
-    background-color: #fff;
-  }
-}
-.close {
-  &:before {
-    content: '×';
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 14px;
-    line-height: 1;
-    color: #fff;
-  }
+.icon {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
 }
 
+
 each(@themes, {
   :global(#container.@{value}) {
     .control {
       button {
-        &.min:after {
+        &.min {
           background-color: ~'@{color-@{value}-minBtn}';
         }
-        &.max:after {
+        &.max {
           background-color: ~'@{color-@{value}-maxBtn}';
         }
-        &.close:after {
+        &.close {
           background-color: ~'@{color-@{value}-closeBtn}';
         }
-        &.min:hover:after {
-          background-color: ~'@{color-@{value}-minBtn-hover}';
-        }
-        &.max:hover:after {
-          background-color: ~'@{color-@{value}-maxBtn-hover}';
-        }
-        &.close:hover:after {
-          background-color: ~'@{color-@{value}-closeBtn-hover}';
-        }
       }
     }
+    .logo {
+      color: ~'@{color-@{value}-theme}';
+    }
   }
 })
 </style>
diff --git a/src/renderer/components/material/SearchInput.vue b/src/renderer/components/material/SearchInput.vue
index ac599f5e..7ccbc5f3 100644
--- a/src/renderer/components/material/SearchInput.vue
+++ b/src/renderer/components/material/SearchInput.vue
@@ -1,24 +1,25 @@
 <template lang="pug">
-div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
-  div(:class="$style.form")
-    input(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
-          @focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
-          @change="sendEvent('change')"
-          @keyup.enter="handleSearch"
-          @keyup.40.prevent="handleKeyDown"
-          @keyup.38.prevent="handleKeyUp"
-          @contextmenu="handleContextMenu")
-    button(type="button" @click="handleSearch")
-      slot
-        svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
-          use(xlink:href='#icon-search')
-  //- transition(name="custom-classes-transition"
-  //-             enter-active-class="animated flipInX"
-  //-             leave-active-class="animated flipOutX")
-  div(v-if="list" :class="$style.list" :style="listStyle")
-    ul(ref="dom_list")
-      li(v-for="(item, index) in list" :key="item" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
-        span {{item}}
+div(:class="$style.container")
+  div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
+    div(:class="$style.form")
+      input(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
+            @focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
+            @change="sendEvent('change')"
+            @keyup.enter="handleSearch"
+            @keyup.40.prevent="handleKeyDown"
+            @keyup.38.prevent="handleKeyUp"
+            @contextmenu="handleContextMenu")
+      button(type="button" @click="handleSearch")
+        slot
+          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
+            use(xlink:href='#icon-search')
+    //- transition(name="custom-classes-transition"
+    //-             enter-active-class="animated flipInX"
+    //-             leave-active-class="animated flipOutX")
+    div(v-if="list" :class="$style.list" :style="listStyle")
+      ul(ref="dom_list")
+        li(v-for="(item, index) in list" :key="item" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
+          span {{item}}
 </template>
 
 <script>
@@ -135,12 +136,20 @@ export default {
 <style lang="less" module>
 @import '../../assets/styles/layout.less';
 
+.container {
+  position: relative;
+  width: 35%;
+  height: @height-toolbar * 0.52;
+  -webkit-app-region: no-drag;
+}
+
 .search {
+  position: absolute;
+  width: 100%;
   border-radius: @form-radius;
   transition: box-shadow .4s ease, background-color @transition-theme;
   display: flex;
   flex-flow: column nowrap;
-  width: 35%;
   background-color: @color-search-form-background;
 
   &.active {
diff --git a/src/renderer/config/event.js b/src/renderer/config/event.js
deleted file mode 100644
index 8d1fbcd1..00000000
--- a/src/renderer/config/event.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue'
-import keyBind from '../utils/keyBind'
-import { rendererOn, NAMES } from '../../common/ipc'
-
-const eventHub = window.eventHub = new Vue()
-
-eventHub.$on('bindKey', () => {
-  keyBind.bindKey((key, type, event, keys) => {
-    // console.log(`key_${key}_${type}`)
-    eventHub.$emit(`key_${key}_${type}`, { event, keys, key })
-  })
-})
-eventHub.$on('unbindKey', keyBind.unbindKey)
-
-rendererOn(NAMES.mainWindow.focus, () => {
-  keyBind.clearDownKeys()
-  eventHub.$emit('focus')
-})
diff --git a/src/renderer/event/index.js b/src/renderer/event/index.js
new file mode 100644
index 00000000..687e392d
--- /dev/null
+++ b/src/renderer/event/index.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import keyBind from '../utils/keyBind'
+import { rendererOn, rendererSend, NAMES } from '../../common/ipc'
+import { base as baseName } from './names'
+
+const eventHub = window.eventHub = new Vue()
+
+eventHub.$on(baseName.bindKey, () => {
+  keyBind.bindKey((key, type, event, keys) => {
+    // console.log(`key_${key}_${type}`)
+    eventHub.$emit(`key_${key}_${type}`, { event, keys, key })
+  })
+})
+eventHub.$on(baseName.bindKey, keyBind.unbindKey)
+
+eventHub.$on(baseName.min, () => rendererSend(NAMES.mainWindow.min))
+eventHub.$on(baseName.max, () => rendererSend(NAMES.mainWindow.max))
+eventHub.$on(baseName.close, () => rendererSend(NAMES.mainWindow.close))
+
+rendererOn(NAMES.mainWindow.focus, () => {
+  keyBind.clearDownKeys()
+  eventHub.$emit(baseName.focus)
+})
diff --git a/src/renderer/event/names.js b/src/renderer/event/names.js
new file mode 100644
index 00000000..10b489d0
--- /dev/null
+++ b/src/renderer/event/names.js
@@ -0,0 +1,20 @@
+const names = {
+  base: {
+    bindKey: 'bindKey',
+    unbindKey: 'unbindKey',
+    focus: 'focus',
+    min: 'min',
+    max: 'max',
+    close: 'close',
+    set_config: 'set_config',
+  },
+}
+
+for (const item of Object.keys(names)) {
+  let name = names[item]
+  for (const key of Object.keys(name)) {
+    name[key] = `${item}_${name[key]}`
+  }
+}
+
+export const base = names.base
diff --git a/src/renderer/lang/cns/view/setting.json b/src/renderer/lang/cns/view/setting.json
index 6c50d304..2f1fcf4e 100644
--- a/src/renderer/lang/cns/view/setting.json
+++ b/src/renderer/lang/cns/view/setting.json
@@ -24,6 +24,9 @@
   "basic_to_tray": "关闭时最小化到系统托盘",
   "basic_lang_title": "软件显示的语言",
   "basic_lang": "语言",
+  "basic_control_btn_position": "控制按钮位置",
+  "basic_control_btn_position_left": "左边",
+  "basic_control_btn_position_right": "右边",
 
   "play": "播放设置",
   "play_toggle_title": "都不选时播放完当前歌曲就停止播放",
diff --git a/src/renderer/lang/cnt/view/setting.json b/src/renderer/lang/cnt/view/setting.json
index b428aa6e..6e2713c7 100644
--- a/src/renderer/lang/cnt/view/setting.json
+++ b/src/renderer/lang/cnt/view/setting.json
@@ -24,6 +24,9 @@
   "basic_to_tray": "關閉時最小化到系統托盤",
   "basic_lang_title": "軟件顯示的語言",
   "basic_lang": "語言",
+  "basic_control_btn_position": "控制按鈕位置",
+  "basic_control_btn_position_left": "左邊",
+  "basic_control_btn_position_right": "右邊",
   "play": "播放設置",
   "play_toggle_title": "都不選時播放完當前歌曲就停止播放",
   "play_toggle": "歌曲切換方式",
diff --git a/src/renderer/lang/en/view/setting.json b/src/renderer/lang/en/view/setting.json
index fbdabb44..199e0ffa 100644
--- a/src/renderer/lang/en/view/setting.json
+++ b/src/renderer/lang/en/view/setting.json
@@ -24,6 +24,9 @@
   "basic_to_tray": "Minimize to system tray when closing",
   "basic_lang_title": "The language displayed in the software",
   "basic_lang": "Language",
+  "basic_control_btn_position": "Control Button Position",
+  "basic_control_btn_position_left": "Left",
+  "basic_control_btn_position_right": "Right",
 
   "play": "Play",
   "play_toggle_title": "If none selected, it stopped when the music playing is done.",
diff --git a/src/renderer/main.js b/src/renderer/main.js
index d2791bc8..18898ec9 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { sync } from 'vuex-router-sync'
 
-import './config/event'
+import './event'
 
 // Components
 import './components'
diff --git a/src/renderer/views/Setting.vue b/src/renderer/views/Setting.vue
index 63fc5ae3..dd30eff1 100644
--- a/src/renderer/views/Setting.vue
+++ b/src/renderer/views/Setting.vue
@@ -46,6 +46,12 @@ div.scroll(:class="$style.setting")
         material-checkbox(v-for="item in sourceNameTypes" :key="item.id" :class="$style.gapLeft" :id="`setting_abasic_sourcename_${item.id}`"
           name="setting_basic_sourcename" need v-model="current_setting.sourceNameType" :value="item.id" :label="item.label")
 
+    dd
+      h3 {{$t('view.setting.basic_control_btn_position')}}
+      div
+        material-checkbox(v-for="item in controlBtnPositionList" :key="item.id" :class="$style.gapLeft" :id="`setting_basic_control_btn_position_${item.id}`"
+          name="setting_basic_control_btn_position" need v-model="current_setting.controlBtnPosition" :value="item.id" :label="item.name")
+
     dt {{$t('view.setting.play')}}
     dd(:title="$t('view.setting.play_toggle_title')")
       h3 {{$t('view.setting.play_toggle')}}
@@ -240,6 +246,7 @@ import { mergeSetting } from '../../common/utils'
 import apiSourceInfo from '../utils/music/api-source-info'
 import fs from 'fs'
 import languageList from '@/lang/languages.json'
+import { base as eventBaseName } from '../event/names'
 
 export default {
   name: 'Setting',
@@ -309,6 +316,18 @@ export default {
         },
       ]
     },
+    controlBtnPositionList() {
+      return [
+        {
+          name: this.$t('view.setting.basic_control_btn_position_left'),
+          id: 'left',
+        },
+        {
+          name: this.$t('view.setting.basic_control_btn_position_right'),
+          id: 'right',
+        },
+      ]
+    },
   },
   data() {
     return {
@@ -376,6 +395,7 @@ export default {
         sourceId: 0,
         randomAnimate: true,
         isAgreePact: false,
+        controlBtnPosition: 'left',
         apiSource: 'temp',
       },
       languageList,
@@ -410,12 +430,12 @@ export default {
   },
   mounted() {
     navigator.mediaDevices.addEventListener('devicechange', this.getMediaDevice)
-    window.eventHub.$on('set_config', this.handleUpdateSetting)
+    window.eventHub.$on(eventBaseName.set_config, this.handleUpdateSetting)
     this.init()
   },
   beforeDestroy() {
     navigator.mediaDevices.removeEventListener('devicechange', this.getMediaDevice)
-    window.eventHub.$off('set_config', this.handleUpdateSetting)
+    window.eventHub.$off(eventBaseName.set_config, this.handleUpdateSetting)
   },
   methods: {
     ...mapMutations(['setSetting', 'setSettingVersion', 'setVersionModalVisible']),