增加设置页面
宇天
parent
dc3f3b9fc4
commit
c47a846e42
|
|
@ -1 +1 @@
|
|||
.do-mod-artist{position:relative;display:flex;width:100%;height:100%}.do-mod-artist .filter-box{flex:0 1 12rem;border-right:0.1rem solid #f3f5fb;text-align:right}.do-mod-artist .filter-box .item{width:100%;height:2.4rem;padding:0 1.2rem;line-height:2.4rem;color:#98acae}.do-mod-artist .filter-box .item.active{color:#3fc2a7;font-weight:bold}.do-mod-artist .filter-box .item:hover{padding-right:1.3rem;color:#3fc2a7}.do-mod-artist .filter-box .pipe{display:block;width:100%;height:.7rem}.do-mod-artist .list-box{overflow-y:auto;display:flex;flex-flow:row wrap;flex:1;padding:0 1rem}.do-mod-artist .list-box .item{display:flex;justify-content:center;align-items:center;flex:45%;height:7rem;margin:1rem 2.5%;padding:.5rem;background:#f3f5fb}.do-mod-artist .list-box .item img{flex:0 1 6rem;height:6rem}.do-mod-artist .list-box .item summary{flex:2;padding:0 1rem}.do-mod-artist .list-box .item strong{font-size:1.6rem}.do-mod-artist .list-box .item p{font-size:1.2rem;color:#98acae}.do-mod-artist .artist-box{position:absolute;left:0;top:0;z-index:9;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}.do-mod-artist .artist-box .content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding:1.5rem 2.5rem;background:linear-gradient(to bottom, #fff 2%, rgba(255,255,255,0.75), #fff 98%);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-artist .artist-box .content .name{flex:0 1 3.6rem;font-size:1.4rem;font-style:italic;font-weight:normal}.do-mod-artist .artist-box .content .name a{text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .name i{color:#98acae}.do-mod-artist .artist-box .content .desc{flex:0 1 3rem;font-size:1.2rem;color:#98acae}.do-mod-artist .artist-box .content .desc span{padding:0 .5rem;text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .song-album{flex:1;display:flex;flex-flow:column wrap}.do-mod-artist .artist-box .content .tab{flex:0 1 3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-artist .artist-box .content .tab .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem}.do-mod-artist .artist-box .content .tab .item.active{border-bottom:0.2rem solid #3fc2a7;color:#3fc2a7}.do-mod-artist .artist-box .content .tab .item.disabled{opacity:.25}.do-mod-local{flex:1;display:flex;flex-flow:column wrap}.do-mod-local .toolbar{flex:0 1 3rem;padding:0 1rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4}.do-mod-local .toolbar .refresh{margin-left:1rem;color:#3fc2a7;text-decoration:underline}.do-mod-local .table{overflow:auto;flex:1}.do-mod-local .table .stat{width:2.6rem;height:2.6rem;line-height:2.6rem}.do-mod-local .table .ac{text-align:center}.do-mod-local .table .active{color:#3fc2a7}.do-mod-local .table .active i{-webkit-animation:play 2s infinite linear;animation:play 2s infinite linear}.do-mod-search{flex:1;display:flex;flex-flow:column wrap}.do-mod-search .tabbar{flex:0 1 3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-search .tabbar .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem;border:0.1rem solid #e8ebf4;background:#fff;color:#dae1e9}.do-mod-search .tabbar .item.active{border-bottom-color:transparent;color:#62778d}.do-mod-search .tabbar .item i{color:#ff5061}.do-mod-search .table{overflow:auto;flex:1}.do-mod-search .table .active{color:#3fc2a7}.do-mod-search .table .ac{text-align:center}.artist-desc-layer{width:60rem;height:30rem}.artist-desc-layer .layer-content{overflow-y:auto;height:85% !important;padding:1rem;line-height:2;text-indent:2em}
|
||||
.do-mod-artist{position:relative;display:flex;width:100%;height:100%}.do-mod-artist .filter-box{flex:0 1 12rem;border-right:0.1rem solid #f3f5fb;text-align:right}.do-mod-artist .filter-box .item{width:100%;height:2.4rem;padding:0 1.2rem;line-height:2.4rem;color:#98acae}.do-mod-artist .filter-box .item.active{color:#3fc2a7;font-weight:bold}.do-mod-artist .filter-box .item:hover{padding-right:1.3rem;color:#3fc2a7}.do-mod-artist .filter-box .pipe{display:block;width:100%;height:.7rem}.do-mod-artist .list-box{overflow-y:auto;display:flex;flex-flow:row wrap;flex:1;padding:0 1rem}.do-mod-artist .list-box .item{display:flex;justify-content:center;align-items:center;flex:45%;height:7rem;margin:1rem 2.5%;padding:.5rem;background:#f3f5fb}.do-mod-artist .list-box .item img{flex:0 1 6rem;height:6rem}.do-mod-artist .list-box .item summary{flex:2;padding:0 1rem}.do-mod-artist .list-box .item strong{font-size:1.6rem}.do-mod-artist .list-box .item p{font-size:1.2rem;color:#98acae}.do-mod-artist .artist-box{position:absolute;left:0;top:0;z-index:9;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center}.do-mod-artist .artist-box .content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding:1.5rem 2.5rem;background:linear-gradient(to bottom, #fff 2%, rgba(255,255,255,0.75), #fff 98%);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-artist .artist-box .content .name{flex:0 1 3.6rem;font-size:1.4rem;font-style:italic;font-weight:normal}.do-mod-artist .artist-box .content .name a{text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .name i{color:#98acae}.do-mod-artist .artist-box .content .desc{flex:0 1 3rem;font-size:1.2rem;color:#98acae}.do-mod-artist .artist-box .content .desc span{padding:0 .5rem;text-decoration:underline;color:#3fc2a7}.do-mod-artist .artist-box .content .song-album{flex:1;display:flex;flex-flow:column wrap}.do-mod-artist .artist-box .content .tab{flex:0 1 3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-artist .artist-box .content .tab .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem}.do-mod-artist .artist-box .content .tab .item.active{border-bottom:0.2rem solid #3fc2a7;color:#3fc2a7}.do-mod-artist .artist-box .content .tab .item.disabled{opacity:.25}.do-mod-local{flex:1;display:flex;flex-flow:column wrap}.do-mod-local .toolbar{flex:0 1 3rem;padding:0 1rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4}.do-mod-local .toolbar .refresh{margin-left:1rem;color:#3fc2a7;text-decoration:underline}.do-mod-local .table{overflow:auto;flex:1}.do-mod-local .table .stat{width:2.6rem;height:2.6rem;line-height:2.6rem}.do-mod-local .table .ac{text-align:center}.do-mod-local .table .active{color:#3fc2a7}.do-mod-local .table .active i{-webkit-animation:play 2s infinite linear;animation:play 2s infinite linear}.do-mod-search{flex:1;display:flex;flex-flow:column wrap}.do-mod-search .tabbar{flex:0 1 3rem;display:flex;padding:0 .5rem;line-height:2.9rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.do-mod-search .tabbar .item{flex:0 0 7.5rem;height:3rem;margin:0 .3rem;border:0.1rem solid #e8ebf4;background:#fff;color:#dae1e9}.do-mod-search .tabbar .item.active{border-bottom-color:transparent;color:#62778d}.do-mod-search .tabbar .item i{color:#ff5061}.do-mod-search .table{overflow:auto;flex:1}.do-mod-search .table .active{color:#3fc2a7}.do-mod-search .table .ac{text-align:center}.do-mod-profile{overflow-y:auto;padding:0 3rem}.do-mod-profile .title{position:relative;width:100%;height:6rem;line-height:6rem;border-bottom:0.1rem solid #dae1e9;font-size:1.8rem}.do-mod-profile .title .save{position:absolute;bottom:.3rem;right:0}.do-mod-profile .block{display:flex;justify-content:center;align-items:center;width:100%;padding:2rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-profile .block .label{flex:0 1 20rem}.do-mod-profile .block .field{flex:1;display:flex;align-items:center}.do-mod-profile .block .desc{line-height:2}.do-mod-profile .block .desc p{margin-top:1.5rem}.artist-desc-layer{width:60rem;height:30rem}.artist-desc-layer .layer-content{overflow-y:auto;height:85% !important;padding:1rem;line-height:2;text-indent:2em}
|
||||
|
|
|
|||
|
|
@ -118,6 +118,23 @@
|
|||
|
||||
|
||||
|
||||
.do-mod-profile {overflow-y:auto;padding:0 3rem;
|
||||
|
||||
.title {position:relative;width:100%;height:6rem;line-height:6rem;border-bottom:.1rem solid nth($cp, 3);font-size:1.8rem;
|
||||
|
||||
.save {position:absolute;bottom:.3rem;right:0;}
|
||||
}
|
||||
|
||||
.block {display:flex;justify-content:center;align-items:center;width:100%;padding:2rem 0;border-bottom:.1rem solid nth($cp, 1);
|
||||
|
||||
.label {flex:0 1 20rem;}
|
||||
.field {flex:1;display:flex;align-items:center;}
|
||||
.desc {line-height:2;
|
||||
p {margin-top:1.5rem;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</nav>
|
||||
|
||||
<nav class="menubar-win do-fn-nodrag">
|
||||
<i class="item opt do-icon-menu-right"></i>
|
||||
<i class="item opt do-icon-menu-right" :click="toggleModule('profile')"></i>
|
||||
<span :if="theme === 2">
|
||||
<i class="item do-icon-minimize" :click="minimize"></i>
|
||||
<i class="item do-icon-maximize" :click="maximize"></i>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import Api from '/js/api.js'
|
|||
|
||||
import Artist from '/js/modules/artist.js'
|
||||
import Local from '/js/modules/local.js'
|
||||
import Profile from '/js/modules/profile.js'
|
||||
|
||||
const log = console.log
|
||||
|
||||
|
|
@ -183,6 +184,9 @@ Anot({
|
|||
case 'local':
|
||||
Local.__init__()
|
||||
break
|
||||
case 'profile':
|
||||
Profile.__init__()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
/**
|
||||
* 设置模块
|
||||
* @author yutent<yutent@doui.cc>
|
||||
* @date 2018/12/27 02:02:54
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
import '/dist/form/index.js'
|
||||
|
||||
const fs = require('iofs')
|
||||
const path = require('path')
|
||||
const { app, dialog } = require('electron').remote
|
||||
const log = console.log
|
||||
|
||||
const HOME_PATH = app.getPath('appData')
|
||||
const APP_INI_PATH = path.join(HOME_PATH, 'app.ini')
|
||||
|
||||
let appInit = fs.cat(APP_INI_PATH)
|
||||
|
||||
appInit = JSON.parse(appInit)
|
||||
|
||||
export default Anot({
|
||||
$id: 'profile',
|
||||
state: {
|
||||
setting: {
|
||||
autoPlay: appInit.autoPlay,
|
||||
autoLrc: appInit.autoLrc,
|
||||
musicPath: appInit.musicPath
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
__init__() {},
|
||||
openDir() {
|
||||
dialog.showOpenDialog(
|
||||
{
|
||||
properties: ['openDirectory'],
|
||||
defaultPath: app.getPath('home')
|
||||
},
|
||||
dir => {
|
||||
if (dir) {
|
||||
this.setting.musicPath = dir[0]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
save() {
|
||||
let setting = this.setting.$model
|
||||
|
||||
Object.assign(appInit, setting)
|
||||
|
||||
fs.echo(JSON.stringify(appInit, '', 2), APP_INI_PATH)
|
||||
|
||||
layer.toast('保存成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<div class="do-mod-profile" anot="profile">
|
||||
<h3 class="title">
|
||||
设置
|
||||
<span class="save do-ui-button medium teal" :click="save">保存设置</span>
|
||||
</h3>
|
||||
|
||||
<section class="block">
|
||||
<span class="label">app启动自动播放</span>
|
||||
<div class="field">
|
||||
<anot-switch :value="setting.autoPlay"></anot-switch>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<span class="label">自动下载歌词和封面</span>
|
||||
<div class="field">
|
||||
<anot-switch :value="setting.autoLrc"></anot-switch>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<span class="label">本地音乐目录</span>
|
||||
<div class="field">
|
||||
<anot-input :value="setting.musicPath"></anot-input>
|
||||
<anot-button color="teal" @click="openDir">选择目录...</anot-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="block">
|
||||
<span class="label">关于Sonist</span>
|
||||
<div class="desc">
|
||||
<p>当前版本: 0.0.1</p>
|
||||
<p>Sonist是一个本地音乐播放器, 同时支持酷狗的API来获取最新的歌曲信息,如排行榜, 最近单曲等(不提供下载服务, 仅为资讯展示, 如需要下载请到酷狗官网购买下载)。</p>
|
||||
<p>本播放器所使用的歌词/封面信息均来源于网络搜索, 不保证内容的准确性和时效性。</p>
|
||||
<p>免责声明</p>
|
||||
<p>本app,源代码完全开源(<a target="_blank" href="https://github.com/yutent/sonist">GayHub</a>)。采用MIT开源协议。仅供个人学习交流, 请勿用于商业/非法用途。</p>
|
||||
<p>本app的音乐资源来源于网络, 如有侵犯您的权益, 请联系我, 我会在第一时间删除。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
Reference in New Issue