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

初步完善

pull/277/head
lyswhut 2020-05-02 18:21:20 +08:00
parent 78c5250f1b
commit 33383cd3bd
9 changed files with 182 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/config.js
View File

@ -33,7 +33,7 @@ module.exports = {
name: 'larger',
width: 1198,
height: 766,
fontSize: '18px',
fontSize: '17px',
},
{
id: 5,

28
src/renderer/App.vue
View File

@ -1,20 +1,22 @@
<template lang="pug">
#container(v-if="isProd && !isNt" :class="[theme, nd ? 'nd' : '']" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
core-aside#left
#right
core-toolbar#toolbar
core-view#view
core-player#player
#main
core-aside#left
#right
core-toolbar#toolbar
core-view#view
core-player#player
core-icons
material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose")
material-version-modal(v-show="version.showModal")
material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact")
#container(v-else :class="[theme, nd ? 'nd' : '']")
core-aside#left
#right
core-toolbar#toolbar
core-view#view
core-player#player
#main
core-aside#left
#right
core-toolbar#toolbar
core-view#view
core-player#player
core-icons
material-xm-verify-modal(v-show="globalObj.xm.isShowVerify" :show="globalObj.xm.isShowVerify" :bg-close="false" @close="handleXMVerifyModalClose")
material-version-modal(v-show="version.showModal")
@ -341,6 +343,7 @@ body {
#container {
position: relative;
display: flex;
flex-flow: column nowrap;
height: 100%;
overflow: hidden;
background: @color-theme-bgimg @color-theme-bgposition no-repeat;
@ -349,6 +352,11 @@ body {
background-color: @color-theme;
}
#main {
flex: auto;
display: flex;
}
#left {
flex: none;
width: @width-app-left;

6
src/renderer/assets/styles/variables.less
View File

@ -703,11 +703,11 @@
// Width
@width-app-left: 20%;
@width-app-left: 6.5%;
// Height
@height-toolbar: 50px;
@height-player: 55px;
@height-toolbar: 54px;
@height-player: 60px;
// Shadow

64
src/renderer/components/core/Aside.vue
View File

@ -6,25 +6,49 @@ div(:class="$style.aside")
div(:class="$style.menu")
dl
dt {{$t('core.aside.online_music')}}
//- dt {{$t('core.aside.online_music')}}
dd
router-link(:active-class="$style.active" to="search") {{$t('core.aside.search')}}
router-link(:active-class="$style.active" to="search")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 30.239 30.239' space='preserve')
use(xlink:href='#icon-search')
span {{$t('core.aside.search')}}
dd
router-link(:active-class="$style.active" to="songList") {{$t('core.aside.song_list')}}
router-link(:active-class="$style.active" to="songList")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 511.334 511.334' space='preserve')
use(xlink:href='#icon-album')
span {{$t('core.aside.song_list')}}
dd
router-link(:active-class="$style.active" to="leaderboard") {{$t('core.aside.leaderboard')}}
router-link(:active-class="$style.active" to="leaderboard")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 512.001 512.001' space='preserve')
use(xlink:href='#icon-leaderboard')
span {{$t('core.aside.leaderboard')}}
dl
dt {{$t('core.aside.my_music')}}
//- dt {{$t('core.aside.my_music')}}
dd
router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}}
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`") {{$t('core.aside.love_list')}}
//- router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}}
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-love')
span {{$t('core.aside.love_list')}}
router-link(:active-class="$route.query.id === item.id ? $style.active : ''" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}}
dl
dt {{$t('core.aside.other')}}
//- dt {{$t('core.aside.other')}}
dd
router-link(:active-class="$style.active" to="download") {{$t('core.aside.download')}}
router-link(:active-class="$style.active" to="download")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-download-2')
span {{$t('core.aside.download')}}
dd
router-link(:active-class="$style.active" to="setting") {{$t('core.aside.setting')}}
router-link(:active-class="$style.active" to="setting")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='35%' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-setting')
span {{$t('core.aside.setting')}}
</template>
<script>
@ -105,18 +129,20 @@ export default {
.menu {
flex: auto;
padding: 10px;
// padding: 5px;
dl {
-webkit-app-region: no-drag;
margin-bottom: 15px;
// margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
dt {
padding-left: 5px;
font-size: 11px;
transition: @transition-theme;
transition-property: color;
color: @color-theme-font-label;
.mixin-ellipsis-1;
}
dd a {
display: block;
@ -124,17 +150,19 @@ export default {
text-decoration: none;
position: relative;
padding: 10px;
margin: 5px 0;
padding: 10px 10px;
// margin: 5px 0;
// border-left: 5px solid transparent;
transition: @transition-theme;
transition-property: color;
color: @color-theme-font;
cursor: pointer;
font-size: 14px;
font-size: 11.5px;
text-align: center;
transition: background-color 0.3s ease;
border-radius: 4px;
// border-radius: 4px;
.mixin-ellipsis-1;
&.active {
// border-left-color: @color-theme-active;
@ -151,6 +179,10 @@ export default {
}
}
.icon {
margin-bottom: 5px;
}
each(@themes, {
:global(#container.@{value}) {

149
src/renderer/components/core/Icons.vue
View File

File diff suppressed because one or more lines are too long

14
src/renderer/components/core/Player.vue
View File

@ -2,7 +2,7 @@
div(:class="$style.player")
div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail")
img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 60 60' space='preserve')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
use(:xlink:href='`#${$style.iconPic}`')
div(:class="$style.right" v-if="!isShowPlayerDetail")
div(:class="$style.column1")
@ -658,7 +658,7 @@ export default {
.player {
height: @height-player;
// background-color: rgb(245, 245, 245);
background-color: @color-theme_2;
transition: @transition-theme;
transition-property: border-color;
border-top: 2px solid @color-theme;
@ -670,16 +670,19 @@ export default {
}
}
.left {
width: @height-player - 2;
width: @height-player;
height: @height-player - 2;
color: @color-theme;
transition: @transition-theme;
transition-property: color;
flex: none;
padding: 2px;
padding: 3px 3px 3px 5px;
opacity: 1;
transition: @transition-theme;
transition-property: opacity;
display: flex;
justify-content: center;
// align-items: center;
cursor: pointer;
&:hover {
@ -694,6 +697,8 @@ export default {
max-height: 100%;
transition: @transition-theme;
transition-property: border-color;
// border-radius: 50%;
border-radius: @radius-progress-border;
// border: 2px solid @color-theme_2-background_1;
}
}
@ -899,6 +904,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
.player {
background-color: ~'@{color-@{value}-theme_2}';
border-top-color: ~'@{color-@{value}-theme}';
}
.left {

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

@ -55,6 +55,7 @@ export default {
outline: none;
transition: background-color 0.2s ease;
background-color: @color-btn-background;
font-size: 13.3px;
&[disabled] {
opacity: .4;
}

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

@ -140,7 +140,7 @@ export default {
transition: box-shadow .4s ease, background-color @transition-theme;
display: flex;
flex-flow: column nowrap;
width: 240px;
width: 35%;
background-color: @color-search-form-background;
&.active {
@ -148,6 +148,7 @@ export default {
.form {
input {
border-bottom-left-radius: 0;
}
button {
border-bottom-right-radius: 0;
@ -156,7 +157,7 @@ export default {
}
.form {
display: flex;
height: @height-toolbar / 2;
height: @height-toolbar * 0.52;
position: relative;
input {
flex: auto;
@ -172,6 +173,8 @@ export default {
// height: @height-toolbar * .7;
padding: 0 5px;
overflow: hidden;
font-size: 13.5px;
line-height: @height-toolbar * 0.52 + 5px;
&::placeholder {
color: @color-btn;
}
@ -226,7 +229,8 @@ export default {
}
.big {
width: 500px;
min-width: 500px;
width: 100%;
// input {
// line-height: 30px;
// }

4
src/renderer/lang/cns/core/aside.json
View File

@ -5,8 +5,8 @@
"leaderboard": "排行榜",
"my_music": "我的音乐",
"default_list": "试听列表",
"love_list": "收藏列表",
"love_list": "收藏",
"other": "其他",
"download": "下载管理",
"download": "下载",
"setting": "设置"
}