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', name: 'larger',
width: 1198, width: 1198,
height: 766, height: 766,
fontSize: '18px', fontSize: '17px',
}, },
{ {
id: 5, id: 5,

28
src/renderer/App.vue
View File

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

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

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

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

@ -6,25 +6,49 @@ div(:class="$style.aside")
div(:class="$style.menu") div(:class="$style.menu")
dl dl
dt {{$t('core.aside.online_music')}} //- dt {{$t('core.aside.online_music')}}
dd 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 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 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 dl
dt {{$t('core.aside.my_music')}} //- dt {{$t('core.aside.my_music')}}
dd 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 === 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 === 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}} 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 dl
dt {{$t('core.aside.other')}} //- dt {{$t('core.aside.other')}}
dd 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 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> </template>
<script> <script>
@ -105,18 +129,20 @@ export default {
.menu { .menu {
flex: auto; flex: auto;
padding: 10px; // padding: 5px;
dl { dl {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
margin-bottom: 15px; // margin-bottom: 15px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
dt { dt {
padding-left: 5px;
font-size: 11px; font-size: 11px;
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
color: @color-theme-font-label; color: @color-theme-font-label;
.mixin-ellipsis-1;
} }
dd a { dd a {
display: block; display: block;
@ -124,17 +150,19 @@ export default {
text-decoration: none; text-decoration: none;
position: relative; position: relative;
padding: 10px; padding: 10px 10px;
margin: 5px 0; // margin: 5px 0;
// border-left: 5px solid transparent; // border-left: 5px solid transparent;
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
color: @color-theme-font; color: @color-theme-font;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 11.5px;
text-align: center;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
border-radius: 4px; // border-radius: 4px;
.mixin-ellipsis-1;
&.active { &.active {
// border-left-color: @color-theme-active; // border-left-color: @color-theme-active;
@ -151,6 +179,10 @@ export default {
} }
} }
.icon {
margin-bottom: 5px;
}
each(@themes, { each(@themes, {
:global(#container.@{value}) { :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.player")
div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail") div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail")
img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError") 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}`') use(:xlink:href='`#${$style.iconPic}`')
div(:class="$style.right" v-if="!isShowPlayerDetail") div(:class="$style.right" v-if="!isShowPlayerDetail")
div(:class="$style.column1") div(:class="$style.column1")
@ -658,7 +658,7 @@ export default {
.player { .player {
height: @height-player; height: @height-player;
// background-color: rgb(245, 245, 245); background-color: @color-theme_2;
transition: @transition-theme; transition: @transition-theme;
transition-property: border-color; transition-property: border-color;
border-top: 2px solid @color-theme; border-top: 2px solid @color-theme;
@ -670,16 +670,19 @@ export default {
} }
} }
.left { .left {
width: @height-player - 2; width: @height-player;
height: @height-player - 2; height: @height-player - 2;
color: @color-theme; color: @color-theme;
transition: @transition-theme; transition: @transition-theme;
transition-property: color; transition-property: color;
flex: none; flex: none;
padding: 2px; padding: 3px 3px 3px 5px;
opacity: 1; opacity: 1;
transition: @transition-theme; transition: @transition-theme;
transition-property: opacity; transition-property: opacity;
display: flex;
justify-content: center;
// align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -694,6 +697,8 @@ export default {
max-height: 100%; max-height: 100%;
transition: @transition-theme; transition: @transition-theme;
transition-property: border-color; transition-property: border-color;
// border-radius: 50%;
border-radius: @radius-progress-border;
// border: 2px solid @color-theme_2-background_1; // border: 2px solid @color-theme_2-background_1;
} }
} }
@ -899,6 +904,7 @@ export default {
each(@themes, { each(@themes, {
:global(#container.@{value}) { :global(#container.@{value}) {
.player { .player {
background-color: ~'@{color-@{value}-theme_2}';
border-top-color: ~'@{color-@{value}-theme}'; border-top-color: ~'@{color-@{value}-theme}';
} }
.left { .left {

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

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

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

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