新增软件界面元素大小调整

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",

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",

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(),
   ],
 }

publish/changeLog.md

@@ -4,6 +4,7 @@
 - 新增无法打开外部歌单FAQ
 - 新增启动参数`search`，使用例子：`.\lx-music-desktop.exe -search="突然的自我 - 伍佰"`
 - 新增音频输出设置
+- 新增软件内的包括字体在内的界面内容大小调整，现在当窗口大小切换到“大”时，软件内的元素将会适当加大，窗口大小的“小”与“中”内的元素将保持之前的大小暂不做改变
 
 ### 优化
 

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',
     },
   ],
 }

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

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;
       }
     }

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;
   }

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 {

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 {

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;

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']),
+    ...mapGetters(['setting', 'windowSizeActive']),
-    listStyle() {
-      let info = this.windowSizeList.find(i => i.id === this.setting.windowSizeId) || this.windowSizeList[0]
-      return info.tabList
-    },
   },
   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);
     }

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]
+  },
 }

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',
+    //   id: 'kghyxgb',
-      name: '华语新歌榜',
+    //   name: '华语新歌榜',
-      bangid: '31308',
+    //   bangid: '31308',
-    },
+    // },
   ],
   getUrl(p, id) {
     return `http://www2.kugou.kugou.com/yueku/v9/rank/home/${p}-${id}.html`

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;