增加设置页面

css/modules.css

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

css/modules.scss

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

index.html

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

js/app.js

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

js/modules/profile.js

@@ -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('保存成功')
+    }
+  }
+})

views/profile.htm

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