From f8d06d38abed8dc0e6e927ca296e380bb3063399 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Fri, 31 Dec 2021 10:07:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=B3=E8=BE=B9=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=97=B6=E7=9A=84=E6=8E=A7=E5=88=B6=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=B8=BAwindows=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md                          |   1 +
 src/renderer/assets/styles/variables.less     |  22 +-
 src/renderer/components/core/Icons.vue        |   8 +
 .../components/core/PlayDetail/index.vue      | 213 +++++++++++-------
 .../components/core/Toolbar/ControlBtns.vue   |  74 +++---
 src/renderer/plugins/Tips/index.js            |   4 +-
 6 files changed, 183 insertions(+), 139 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 55dc0548..0b9e54c6 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -16,6 +16,7 @@
 - 同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
 - 优化歌单详情、排行榜名右键的播放按钮的播放机制，现在不用等待整个列表（多页时）加载完成才能播放了
 - 为播放详情页、桌面歌词添加延迟滚动，播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小
+- 修改右边控制按钮为windows风格
 
 ### 修复
 
diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less
index f8316db4..97bf28df 100644
--- a/src/renderer/assets/styles/variables.less
+++ b/src/renderer/assets/styles/variables.less
@@ -20,7 +20,7 @@
 @color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%);
 @color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
 @color-theme_2-font:desaturate( darken(@color-theme_2, 70%), 90%);
-@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
+@color-theme_2-font-label: fadeout(@color-theme_2-font, 55%);
 // @color-theme_2-line: transparent;
 @color-theme_2-line: lighten(@color-theme, 35%);
 @color-reply-floor: fadeout(@color-theme, 95%);
@@ -91,7 +91,7 @@
 @color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%);
 @color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
 @color-green-theme_2-font: darken(desaturate(@color-green-theme_2, 70%), 90%);
-@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
+@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 55%);
 // @color-green-theme_2-line: transparent;
 @color-green-theme_2-line: lighten(@color-green-theme, 45%);
 @color-green-reply-floor: fadeout(@color-green-theme, 95%);
@@ -151,7 +151,7 @@
 @color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
 @color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
 @color-yellow-theme_2-font: darken(desaturate(@color-yellow-theme_2, 70%), 90%);
-@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
+@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 55%);
 // @color-yellow-theme_2-line: transparent;
 @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
 @color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
@@ -210,7 +210,7 @@
 @color-orange-theme_2-hover: fadeout(darken(@color-orange-theme, 5%), 80%);
 @color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
 @color-orange-theme_2-font: darken(desaturate(@color-orange-theme_2, 70%), 90%);
-@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
+@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 55%);
 // @color-orange-theme_2-line: transparent;
 @color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
 @color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
@@ -269,7 +269,7 @@
 @color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%);
 @color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
 @color-blue-theme_2-font: darken(desaturate(@color-blue-theme_2, 70%), 90%);
-@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
+@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 55%);
 // @color-blue-theme_2-line: transparent;
 @color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
 @color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
@@ -328,7 +328,7 @@
 @color-red-theme_2-background_1: #fff;
 @color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
 @color-red-theme_2-font: darken(desaturate(@color-red-theme_2, 70%), 90%);
-@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
+@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 55%);
 // @color-red-theme_2-line: transparent;
 @color-red-theme_2-line: lighten(@color-red-theme, 42%);
 @color-red-reply-floor: fadeout(@color-red-theme, 95%);
@@ -389,7 +389,7 @@
 @color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%);
 @color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
 @color-pink-theme_2-font: darken(desaturate(@color-pink-theme_2, 70%), 90%);
-@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
+@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 55%);
 // @color-pink-theme_2-line: transparent;
 @color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
 @color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
@@ -448,7 +448,7 @@
 @color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%);
 @color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
 @color-purple-theme_2-font: darken(desaturate(@color-purple-theme_2, 70%), 90%);
-@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
+@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 55%);
 // @color-purple-theme_2-line: transparent;
 @color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
 @color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
@@ -507,7 +507,7 @@
 @color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%);
 @color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
 @color-grey-theme_2-font: darken(desaturate(@color-grey-theme_2, 70%), 90%);
-@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
+@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 55%);
 // @color-grey-theme_2-line: transparent;
 @color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
 @color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
@@ -567,7 +567,7 @@
 @color-ming-theme_2-background_1: #fff;
 @color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
 @color-ming-theme_2-font: darken(desaturate(@color-ming-theme_2, 70%), 90%);
-@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
+@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 55%);
 // @color-ming-theme_2-line: transparent;
 @color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
 @color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
@@ -629,7 +629,7 @@
 @color-blue2-theme_2-hover: fadeout(lighten(@color-blue2-theme, 10%), 80%);
 @color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
 @color-blue2-theme_2-font: darken(desaturate(@color-blue2-theme_2, 70%), 90%);
-@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
+@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 55%);
 // @color-blue2-theme_2-line: transparent;
 @color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
 @color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
diff --git a/src/renderer/components/core/Icons.vue b/src/renderer/components/core/Icons.vue
index c1542ec2..5ca46697 100644
--- a/src/renderer/components/core/Icons.vue
+++ b/src/renderer/components/core/Icons.vue
@@ -162,10 +162,18 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       //- 0 0 24 24
       path(d="M20,14H4V10H20")
 
+    g#icon-window-minimize-2(fill='currentColor')
+      //- 0 0 24 24
+      path(d="M19,13H5V11H19V13Z")
+
     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")
 
+    g#icon-window-close-2(fill='currentColor')
+      //- 0 0 24 24
+      path(d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z")
+
 
     g#icon-list-loop(fill='currentColor')
       // 0 0 24 24
diff --git a/src/renderer/components/core/PlayDetail/index.vue b/src/renderer/components/core/PlayDetail/index.vue
index 37d04e7f..b69673b1 100644
--- a/src/renderer/components/core/PlayDetail/index.vue
+++ b/src/renderer/components/core/PlayDetail/index.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
 transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
-  div(:class="[$style.container, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
+  div(:class="$style.container" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
     //- div(:class="$style.bg" :style="bgStyle")
     //- div(:class="$style.bg2")
-    div(:class="$style.header")
+    div(:class="[$style.header, $style.controlBtnLeft]" v-if="setting.controlBtnPosition == 'left'")
       div(:class="$style.controBtn")
         button(type="button" :class="$style.hide" :tips="$t('player__hide_detail_tip')" @click="hide")
           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')
@@ -16,6 +16,19 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
         button(type="button" :class="$style.close" :tips="$t('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.header, $style.controlBtnRight]" v-else)
+      div(:class="$style.controBtn")
+        button(type="button" :class="$style.hide" :tips="$t('player__hide_detail_tip')" @click="hide")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='35%' viewBox='0 0 30.727 30.727' space='preserve')
+            use(xlink:href='#icon-window-hide')
+        button(type="button" :class="$style.min" :tips="$t('min')" @click="min")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-window-minimize-2')
+
+        //- button(type="button" :class="$style.max" @click="max")
+        button(type="button" :class="$style.close" :tips="$t('close')" @click="close")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-window-close-2')
 
     div(:class="[$style.main, {[$style.showComment]: isShowPlayComment}]")
       div.left(:class="$style.left")
@@ -148,26 +161,6 @@ export default {
     box-sizing: border-box;
   }
 
-  &.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;
@@ -193,55 +186,96 @@ export default {
   position: relative;
   flex: 0 0 @height-toolbar;
   -webkit-app-region: drag;
-}
+  width: 100%;
 
-.controBtn {
-  position: absolute;
-  top: 0;
-  display: flex;
-  align-items: center;
-  height: @height-toolbar;
-  -webkit-app-region: no-drag;
-  padding: 0 @control-btn-width;
-  &:hover {
-    .controBtnIcon {
-      opacity: 1;
-    }
-  }
-
-  button {
-    position: relative;
-    width: @control-btn-width;
-    height: @control-btn-width;
-    background: none;
-    border: none;
-    outline: none;
-    padding: 1px;
-    cursor: pointer;
-    border-radius: 50%;
-    color: @color-theme_2;
+  .controBtn {
+    position: absolute;
+    top: 0;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    -webkit-app-region: no-drag;
+  }
 
-    &.hide {
-      background-color: @color-hideBtn;
+  &.controlBtnLeft {
+    .controBtn {
+      align-items: center;
+      padding: 0 @control-btn-width;
+      left: 0;
+      flex-direction: row-reverse;
+      height: @height-toolbar * .7;
+      &:hover {
+        .controBtnIcon {
+          opacity: 1;
+        }
+      }
+
+      button {
+        position: relative;
+        width: @control-btn-width;
+        height: @control-btn-width;
+        background: none;
+        border: none;
+        outline: none;
+        padding: 1px;
+        cursor: pointer;
+        border-radius: 50%;
+        color: @color-theme_2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        + button {
+          margin-right: (@control-btn-width / 2);
+        }
+
+        &.hide {
+          background-color: @color-hideBtn;
+        }
+        &.min {
+          background-color: @color-minBtn;
+        }
+        &.max {
+          background-color: @color-maxBtn;
+        }
+        &.close {
+          background-color: @color-closeBtn;
+        }
+      }
     }
-    &.min {
-      background-color: @color-minBtn;
-    }
-    &.max {
-      background-color: @color-maxBtn;
-    }
-    &.close {
-      background-color: @color-closeBtn;
+
+    .controBtnIcon {
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
     }
   }
-}
+  &.controlBtnRight {
+    align-self: flex-start;
+    .controBtn {
+      right: 0;
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 46px;
+        height: 30px;
+        background: none;
+        border: none;
+        outline: none;
+        padding: 1px;
+        cursor: pointer;
+        color: @color-theme;
+        transition: background-color 0.2s ease-in-out;
 
-.controBtnIcon {
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
+        &:hover {
+          &.hide, &.min, &.max {
+            background-color: @color-btn-hover;
+          }
+          &.close {
+            background-color: @color-closeBtn;
+          }
+        }
+      }
+    }
+  }
 }
 
 .main {
@@ -465,23 +499,42 @@ each(@themes, {
         background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
       }
     }
-    .controBtn {
-      button {
-        color: ~'@{color-@{value}-theme_2}';
-        // &.hide:after {
-        //   background-color: ~'@{color-@{value}-hideBtn}';
-        // }
-        &.hide {
-          background-color: ~'@{color-@{value}-hideBtn}';
+    .header {
+      &.controlBtnLeft {
+        .controBtn {
+          button {
+            color: ~'@{color-@{value}-theme_2}';
+            // &.hide:after {
+            //   background-color: ~'@{color-@{value}-hideBtn}';
+            // }
+            &.hide {
+              background-color: ~'@{color-@{value}-hideBtn}';
+            }
+            &.min {
+              background-color: ~'@{color-@{value}-minBtn}';
+            }
+            &.max {
+              background-color: ~'@{color-@{value}-maxBtn}';
+            }
+            &.close {
+              background-color: ~'@{color-@{value}-closeBtn}';
+            }
+          }
         }
-        &.min {
-          background-color: ~'@{color-@{value}-minBtn}';
-        }
-        &.max {
-          background-color: ~'@{color-@{value}-maxBtn}';
-        }
-        &.close {
-          background-color: ~'@{color-@{value}-closeBtn}';
+      }
+      &.controlBtnRight {
+        .controBtn {
+          button {
+            color: ~'@{color-@{value}-theme_2-font-label}';
+            &:hover {
+              &.hide, &.min, &.max {
+                background-color: ~'@{color-@{value}-btn-hover}';
+              }
+              &.close {
+                background-color: ~'@{color-@{value}-closeBtn}';
+              }
+            }
+          }
         }
       }
     }
diff --git a/src/renderer/components/core/Toolbar/ControlBtns.vue b/src/renderer/components/core/Toolbar/ControlBtns.vue
index 3143271d..78d70605 100644
--- a/src/renderer/components/core/Toolbar/ControlBtns.vue
+++ b/src/renderer/components/core/Toolbar/ControlBtns.vue
@@ -1,13 +1,13 @@
 <template>
 <div :class="$style.control">
   <button type="button" :class="[$style.btn, $style.min]" :tips="$t('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"></use>
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
+      <use xlink:href="#icon-window-minimize-2"></use>
     </svg>
   </button>
   <button type="button" :class="[$style.btn, $style.close]" :tips="$t('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"></use>
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
+      <use xlink:href="#icon-window-close-2"></use>
     </svg>
   </button>
 </div>
@@ -39,68 +39,48 @@ export default {
 <style lang="less" module>
 @import '@renderer/assets/styles/layout.less';
 
-@control-btn-width: @height-toolbar * .26;
-
 .control {
   display: flex;
-  align-items: center;
-  height: 100%;
-  left: 15px;
+  align-self: flex-start;
   -webkit-app-region: no-drag;
-  padding: 0 @control-btn-width * 1.5;
-  &:hover {
-    .controlBtniIcon {
-      opacity: 1;
-    }
-  }
+  height: 30px;
 
   .btn {
     display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
-    width: @control-btn-width;
-    height: @control-btn-width;
+    width: 46px;
+    height: 30px;
     background: none;
     border: none;
     outline: none;
     padding: 1px;
     cursor: pointer;
-    border-radius: 50%;
-    color: @color-theme_2;
-
-    + .btn {
-      margin-left: @control-btn-width * 1.2;
-    }
-
-    &.min {
-      background-color: @color-minBtn;
-    }
-    &.max {
-      background-color: @color-maxBtn;
-    }
-    &.close {
-      background-color: @color-closeBtn;
+    color: @color-theme;
+    transition: background-color 0.2s ease-in-out;
+    &:hover {
+      &.min, &.max {
+        background-color: @color-btn-hover;
+      }
+      &.close {
+        background-color: @color-closeBtn;
+      }
     }
   }
 }
 
-.controlBtniIcon {
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-}
-
 each(@themes, {
   :global(#root.@{value}) {
     .btn {
-      color: ~'@{color-@{value}-theme_2}';
-
-      &.min {
-        background-color: ~'@{color-@{value}-minBtn}';
-      }
-      &.max {
-        background-color: ~'@{color-@{value}-maxBtn}';
-      }
-      &.close {
-        background-color: ~'@{color-@{value}-closeBtn}';
+      color: ~'@{color-@{value}-theme_2-font-label}';
+      &:hover {
+        &.min, &.max {
+          background-color: ~'@{color-@{value}-btn-hover}';
+        }
+        &.close {
+          background-color: ~'@{color-@{value}-closeBtn}';
+        }
       }
     }
   }
diff --git a/src/renderer/plugins/Tips/index.js b/src/renderer/plugins/Tips/index.js
index 41e1d010..305fdac2 100644
--- a/src/renderer/plugins/Tips/index.js
+++ b/src/renderer/plugins/Tips/index.js
@@ -71,11 +71,13 @@ document.body.addEventListener('click', updateTips)
 
 document.body.addEventListener('contextmenu', updateTips)
 
+window.eventHub.on(eventBaseName.focus, () => {
+  hideTips()
+})
 window.eventHub.on(eventBaseName.dragStart, () => {
   isDraging = true
   hideTips()
 })
-
 window.eventHub.on(eventBaseName.dragEnd, () => {
   isDraging = false
 })