From a2c84392f44a282ac121647356a7906b611203a1 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Thu, 12 Mar 2020 23:33:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=BD=AF=E4=BB=B6=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=85=83=E7=B4=A0=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 44 +++++++++++++++++++
 package.json                                  |  1 +
 postcss.config.js                             | 28 ++++++++++++
 publish/changeLog.md                          |  1 +
 src/common/config.js                          |  5 ++-
 src/renderer/App.vue                          |  9 +++-
 src/renderer/assets/styles/index.less         |  8 +++-
 src/renderer/components/material/Btn.vue      |  1 +
 src/renderer/components/material/FlowBtn.vue  |  6 +--
 .../components/material/ListButtons.vue       |  4 +-
 src/renderer/components/material/Select.vue   |  2 +
 src/renderer/components/material/TagList.vue  | 10 ++---
 src/renderer/store/getters.js                 |  3 ++
 src/renderer/utils/music/kg/leaderboard.js    | 12 ++---
 src/renderer/views/Setting.vue                |  1 -
 15 files changed, 112 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ecf3c950..68553932 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12768,6 +12768,50 @@
         "postcss-value-parser": "^3.0.0"
       }
     },
+    "postcss-pxtorem": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npm.taobao.org/postcss-pxtorem/download/postcss-pxtorem-5.1.1.tgz?cache=0&sync_timestamp=1583290992441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-pxtorem%2Fdownload%2Fpostcss-pxtorem-5.1.1.tgz",
+      "integrity": "sha1-GYpowQ+a0tQjcO9mKZ17MWj4z/o=",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.27"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
+          "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
+              "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "postcss": {
+          "version": "7.0.27",
+          "resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.27.tgz?cache=0&sync_timestamp=1581994906320&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.27.tgz",
+          "integrity": "sha1-zGfNxrDao3UQW3xCSoVWc0X8VNk=",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        }
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
diff --git a/package.json b/package.json
index b57cf515..eda99325 100644
--- a/package.json
+++ b/package.json
@@ -184,6 +184,7 @@
     "multispinner": "^0.2.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
+    "postcss-pxtorem": "^5.1.1",
     "pug": "^2.0.4",
     "pug-loader": "^2.4.0",
     "pug-plain-loader": "^1.0.0",
diff --git a/postcss.config.js b/postcss.config.js
index 5ac796ea..0345089b 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,35 @@
 const autoprefixer = require('autoprefixer')
+const pxtorem = require('postcss-pxtorem')
 
 module.exports = {
   plugins: [
+    pxtorem({
+      rootValue: 16,
+      unitPrecision: 5,
+      propList: [
+        'font',
+        'font-size',
+        'line-height',
+        'letter-spacing',
+        'padding', 'margin',
+        'height',
+        'width',
+        'max-width',
+        'max-height',
+        'min-width',
+        'min-height',
+        'top',
+        'left',
+        'bottom',
+        'right',
+        'border-radius',
+      ],
+      selectorBlackList: ['html'],
+      replace: true,
+      mediaQuery: false,
+      minPixelValue: 0,
+      exclude: [/node_modules/i],
+    }),
     autoprefixer(),
   ],
 }
diff --git a/publish/changeLog.md b/publish/changeLog.md
index efc14796..0df89042 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -4,6 +4,7 @@
 - 新增无法打开外部歌单FAQ
 - 新增启动参数`search`，使用例子：`.\lx-music-desktop.exe -search="突然的自我 - 伍佰"`
 - 新增音频输出设置
+- 新增软件内的包括字体在内的界面内容大小调整，现在当窗口大小切换到“大”时，软件内的元素将会适当加大，窗口大小的“小”与“中”内的元素将保持之前的大小暂不做改变
 
 ### 优化
 
diff --git a/src/common/config.js b/src/common/config.js
index f0afd072..b781cae9 100644
--- a/src/common/config.js
+++ b/src/common/config.js
@@ -6,6 +6,7 @@ module.exports = {
       width: 920,
       height: 590,
       tabList: '645px',
+      fontSize: '16px',
     },
     {
       id: 2,
@@ -13,13 +14,15 @@ module.exports = {
       width: 1012,
       height: 650,
       tabList: '719px',
+      fontSize: '16px',
     },
     {
       id: 3,
       name: 'big',
       width: 1104,
       height: 708,
-      tabList: '792px',
+      tabList: '781px',
+      fontSize: '18px',
     },
   ],
 }
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 4f461d0a..ea9959f7 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -47,7 +47,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['setting', 'theme', 'version']),
+    ...mapGetters(['setting', 'theme', 'version', 'windowSizeActive']),
     ...mapGetters('list', ['defaultList', 'loveList']),
     ...mapGetters('download', {
       downloadList: 'list',
@@ -104,6 +104,9 @@ export default {
         }))
       }
     },
+    'windowSizeActive.fontSize'(n) {
+      document.documentElement.style.fontSize = n
+    },
   },
   methods: {
     ...mapActions(['getVersionInfo']),
@@ -112,6 +115,8 @@ export default {
     ...mapMutations('download', ['updateDownloadList']),
     ...mapMutations(['setSetting']),
     init() {
+      document.documentElement.style.fontSize = this.windowSizeActive.fontSize
+
       rendererInvoke('getEnvParams').then(this.handleEnvParamsInit)
 
       document.body.addEventListener('click', this.handleBodyClick, true)
@@ -165,7 +170,7 @@ export default {
         this.$nextTick(() => {
           this.showUpdateModal()
         })
-      }, 60 * 30 * 1000)
+      }, 3 * 1000)
 
       this.initData()
       this.globalObj.apiSource = this.setting.apiSource
diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less
index b2c5944d..d4f29c83 100644
--- a/src/renderer/assets/styles/index.less
+++ b/src/renderer/assets/styles/index.less
@@ -4,6 +4,10 @@
 	-webkit-user-drag: none;
 }
 
+html {
+  font-size: 16px;
+}
+
 .nobreak {
   white-space: nowrap;
 }
@@ -53,11 +57,11 @@ table {
         border-top: none;
       }
       td {
-        padding: 5px;
+        padding: 6px;
         position: relative;
         transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         font-size: 13px;
-        line-height: 1.4;
+        line-height: 18px;
         vertical-align: middle;
       }
     }
diff --git a/src/renderer/components/material/Btn.vue b/src/renderer/components/material/Btn.vue
index 36b771e6..2e3b9ec9 100644
--- a/src/renderer/components/material/Btn.vue
+++ b/src/renderer/components/material/Btn.vue
@@ -31,6 +31,7 @@ export default {
   outline: none;
   transition: background-color 0.2s ease;
   background-color: @color-btn-background;
+  font-size: 14px;
   &[disabled] {
     opacity: .4;
   }
diff --git a/src/renderer/components/material/FlowBtn.vue b/src/renderer/components/material/FlowBtn.vue
index 56a270a3..d9f721be 100644
--- a/src/renderer/components/material/FlowBtn.vue
+++ b/src/renderer/components/material/FlowBtn.vue
@@ -79,9 +79,9 @@ export default {
     background-color: transparent;
     border: none;
     border-radius: @form-radius;
-    margin-right: 5px;
+    margin-right: 2px;
     cursor: pointer;
-    padding: 4px 7px;
+    padding: 6px 10px;
     color: @color-btn;
     outline: none;
     transition: background-color 0.2s ease;
@@ -91,7 +91,7 @@ export default {
     }
 
     svg {
-      height: 1.2em;
+      width: 18px;
     }
 
     &:hover {
diff --git a/src/renderer/components/material/ListButtons.vue b/src/renderer/components/material/ListButtons.vue
index baf9e72f..c95e1a1f 100644
--- a/src/renderer/components/material/ListButtons.vue
+++ b/src/renderer/components/material/ListButtons.vue
@@ -88,6 +88,8 @@ export default {
 @import '../../assets/styles/layout.less';
 
 .btns {
+  line-height: 1;
+
   button {
     background-color: transparent;
     border: none;
@@ -104,7 +106,7 @@ export default {
     }
 
     svg {
-      height: 1.2em;
+      height: 16px;
     }
 
     &:hover {
diff --git a/src/renderer/components/material/Select.vue b/src/renderer/components/material/Select.vue
index 36cc6fff..97481211 100644
--- a/src/renderer/components/material/Select.vue
+++ b/src/renderer/components/material/Select.vue
@@ -83,6 +83,7 @@ export default {
   border-top-left-radius: 4px;
   color: @color-btn;
   cursor: pointer;
+  .mixin-ellipsis-1;
 
   &:hover {
     background-color: @color-theme_2-hover;
@@ -116,6 +117,7 @@ export default {
     transition: background-color @transition-theme;
     background-color: @color-btn-background;
     box-sizing: border-box;
+    .mixin-ellipsis-1;
 
     &:hover {
       background-color: @color-theme_2-hover;
diff --git a/src/renderer/components/material/TagList.vue b/src/renderer/components/material/TagList.vue
index 5c4f5f97..316dc0c6 100644
--- a/src/renderer/components/material/TagList.vue
+++ b/src/renderer/components/material/TagList.vue
@@ -5,7 +5,7 @@
       div(:class="$style.icon")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
           use(xlink:href='#icon-down')
-    div.scroll(:class="$style.list" :style="{ width: listStyle }" @click.stop ref="dom_list")
+    div.scroll(:class="$style.list" :style="{ width: windowSizeActive.tabList }" @click.stop ref="dom_list")
       div(:class="$style.tag" @click="handleClick(null)") {{$t('material.tag_list.default')}}
       dl(v-for="type in list")
         dt(:class="$style.type") {{type.name}}
@@ -28,11 +28,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['setting', 'windowSizeList']),
-    listStyle() {
-      let info = this.windowSizeList.find(i => i.id === this.setting.windowSizeId) || this.windowSizeList[0]
-      return info.tabList
-    },
+    ...mapGetters(['setting', 'windowSizeActive']),
   },
   data() {
     return {
@@ -117,7 +113,7 @@ export default {
     margin-left: 7px;
     line-height: 0;
     svg {
-      width: 1em;
+      width: .9em;
       transition: transform .2s ease;
       transform: rotate(0);
     }
diff --git a/src/renderer/store/getters.js b/src/renderer/store/getters.js
index 5c6b6e9e..22debe9a 100644
--- a/src/renderer/store/getters.js
+++ b/src/renderer/store/getters.js
@@ -46,4 +46,7 @@ export default {
   windowSizeList(state) {
     return state.windowSizeList
   },
+  windowSizeActive(state) {
+    return state.windowSizeList.find(i => i.id === state.setting.windowSizeId) || state.windowSizeList[0]
+  },
 }
diff --git a/src/renderer/utils/music/kg/leaderboard.js b/src/renderer/utils/music/kg/leaderboard.js
index cac6f726..76e4342a 100644
--- a/src/renderer/utils/music/kg/leaderboard.js
+++ b/src/renderer/utils/music/kg/leaderboard.js
@@ -5,7 +5,7 @@ export default {
   list: [
     {
       id: 'kgtop500',
-      name: 'TOP500',
+      name: '酷狗TOP500',
       bangid: '8888',
     },
     {
@@ -53,11 +53,11 @@ export default {
       name: 'DJ热歌榜',
       bangid: '24971',
     },
-    {
-      id: 'kghyxgb',
-      name: '华语新歌榜',
-      bangid: '31308',
-    },
+    // {
+    //   id: 'kghyxgb',
+    //   name: '华语新歌榜',
+    //   bangid: '31308',
+    // },
   ],
   getUrl(p, id) {
     return `http://www2.kugou.kugou.com/yueku/v9/rank/home/${p}-${id}.html`
diff --git a/src/renderer/views/Setting.vue b/src/renderer/views/Setting.vue
index 8d11637d..5271cd25 100644
--- a/src/renderer/views/Setting.vue
+++ b/src/renderer/views/Setting.vue
@@ -711,7 +711,6 @@ export default {
   height: 28px;
   line-height: 28px;
   padding: 0px 15px;
-  vertical-align: top;
   svg {
     width: 1em;
     vertical-align: middle;