github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/166/head
lyswhut 2020-03-12 23:33:19 +08:00
parent 3fdff4e6eb
commit a2c84392f4
15 changed files with 112 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
package-lock.json generated
View File

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

1
package.json
View File

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

28
postcss.config.js
View File

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

1
publish/changeLog.md
View File

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

5
src/common/config.js
View File

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

9
src/renderer/App.vue
View File

@ -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

8
src/renderer/assets/styles/index.less
View File

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

1
src/renderer/components/material/Btn.vue
View File

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

6
src/renderer/components/material/FlowBtn.vue
View File

@ -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 {

4
src/renderer/components/material/ListButtons.vue
View File

@ -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 {

2
src/renderer/components/material/Select.vue
View File

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

10
src/renderer/components/material/TagList.vue
View File

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

3
src/renderer/store/getters.js
View File

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

12
src/renderer/utils/music/kg/leaderboard.js
View File

@ -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`

1
src/renderer/views/Setting.vue
View File

@ -711,7 +711,6 @@ export default {
height: 28px;
line-height: 28px;
padding: 0px 15px;
vertical-align: top;
svg {
width: 1em;
vertical-align: middle;