一大波更新适配

src/css/app.scss

@@ -8,10 +8,10 @@
 
 @import "./var.scss";
 
-#app {position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff;
+#app {position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:#fff;
 
   // 标题栏样式
-  .title-bar {position:relative;z-index:9;display:flex;flex:0 5rem;
+  .title-bar {position:relative;z-index:9;display:flex;height:5rem;
     
     .btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
   
@@ -58,9 +58,7 @@
 
     .tools {flex:1;padding:1rem;
       
-      .search {position:relative;display:inline-block;line-height:3rem;}
+      .search {display:flex;width:30rem;}
-      .icon {position:absolute;right:0;top:0;width:2.6rem;height:3rem;}
-      input {width:20rem;padding:0 1.3rem;border-radius:1.5rem;}
     }
   }
 
@@ -69,10 +67,10 @@
   .main-body {flex:1;display:flex;
   
     // 侧边栏
-    .sidebar {flex:0 22rem;position:relative;height:100%;background:nth($cp, 1);
+    .sidebar {width:18rem;position:relative;height:100%;background:nth($cp, 1);
   
       // 用户信息
-      .user-box {width:18rem;height:16.5rem;margin:0 2rem;text-align:center;
+      .user-box {width:14rem;height:16.5rem;margin:0 2rem;text-align:center;
       
         .avatar {overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 .5rem  1.5rem rgba(0, 0, 0, .15);}
         img {width:100%;height:100%;}
@@ -96,14 +94,14 @@
     }
 
     // 功能模块
-    .module {position:relative;flex:1;display:flex;flex-flow:column wrap;}
+    .module {position:relative;flex:1;display:flex;flex-direction:column;}
   }
 
 
-  .contrl-bar {position:relative;z-index:99;display:flex;flex:0 8rem;background:nth($cp, 1);
+  .contrl-bar {position:relative;z-index:99;display:flex;height:6.5rem;background:nth($cp, 1);
   
     // 播放控制按钮
-    .play-box {flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center;
+    .play-box {width:18rem;display:flex;justify-content:center;align-items:center;height:6.5rem;padding:.75rem 1.5rem;text-align:center;
 
       .item {flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:nth($ct, 2);@include ts();
           

src/css/common.scss

@@ -32,8 +32,8 @@
 .do-fn-drag {-webkit-app-region:drag;user-select: none;}
 .do-fn-nodrag {-webkit-app-region:no-drag;}
 
-html {font-size:62.5%}
+html {font-size:75%}
-body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.4rem;color:nth($cd, 1);background-size:cover;background-repeat:no-repeat;}
+body {position:fixed;left:0;top:0;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.25rem;color:nth($cd, 1);background-size:cover;background-repeat:no-repeat;}
 
 table {overflow:auto;display:table;width:100%;line-height:2.5rem;
   thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)}
@@ -46,9 +46,3 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
   .idx {color:nth($cp, 3);text-shadow:0 .1rem 0 rgba(255, 255, 255, 0.6)}
   .active {color:nth($ct, 1);background:rgba(255, 255, 255, 0.6);font-weight:bold}
 }
-
-::-webkit-scrollbar {width:.6rem;height:.6rem;background:none;}
-::-webkit-scrollbar:hover {background:rgba(255, 255, 255, .1);}
-::-webkit-scrollbar-button {display:none;}
-::-webkit-scrollbar-thumb {background:nth($cp, 3);}
-::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);}

src/index.html

@@ -15,8 +15,8 @@
   <div class="title-bar do-fn-drag">
 
     <nav class="btn-box do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
-      <i class="item quit" :click="quit(false)"></i>
+      <i class="item quit" @click="quit(false)"></i>
-      <i class="item min" :click="minimize"></i>
+      <i class="item min" @click="minimize"></i>
       <i class="item max"></i>
     </nav>
 
@@ -24,33 +24,31 @@
     <!-- 背景点位标签 -->
     <div class="holder"></div>
     <div class="tools do-fn-drag">
-      <div class="search do-fn-nodrag">
+      <wc-input 
-        <input 
+        class="search do-fn-nodrag" 
-          class="do-ui-input" 
+        label="搜索 音乐/歌手/专辑" 
-          placeholder="搜索 音乐/歌手/专辑" 
+        round
-          :keyup="searchMusic"
+        @submit="searchMusic"
-          :duplex="searchTxt">
+        :duplex="searchTxt"></wc-input>
-        <i class="icon do-icon-search"></i>
-      </div>
     </div>
 
 
     <nav class="btn-box-win do-fn-nodrag">
       <div class="opt">
-        <i class="do-icon-menu-right" :click="toggleOptBox"></i>
+        <i class="do-icon-menu-right" @click="toggleOptBox"></i>
         <section class="opt-list" :visible="optBoxShow">
-          <span :click="change2mini"><i class="do-icon-maximized"></i> 迷你模式</span>
+          <span @click="change2mini"><i class="do-icon-maximized"></i> 迷你模式</span>
-          <span :click="toggleModule('profile')">
+          <span @click="toggleModule('profile')">
             <i class="do-icon-setting"></i> 首选项
           </span>
           <span class="pipe"></span>
-          <span :click="quit(true)"><i class="do-icon-logout"></i> 退出</span>
+          <span @click="quit(true)"><i class="do-icon-logout"></i> 退出</span>
         </section>
       </div>
       <span :if="theme === 2">
-        <i class="item do-icon-minimize" :click="minimize"></i>
+        <i class="item do-icon-minimize" @click="minimize"></i>
         <i class="item do-icon-maximize disabled"></i>
-        <i class="item do-icon-close quit" :click="quit(false)"></i>
+        <i class="item do-icon-close quit" @click="quit(false)"></i>
       </span>
     </nav>
   </div>
@@ -71,29 +69,29 @@
       <dl class="music-box do-fn-nodrag">
         <dt class="title">酷狗在线</dt>
         <dd class="item" 
-          :click="toggleModule('rank')"
+          @click="toggleModule('rank')"
           :class="{active: mod === 'rank'}">
           <i class="s-icon-rank"></i> 排行榜
         </dd>
         <dd class="item" 
-          :click="toggleModule('artist')"
+          @click="toggleModule('artist')"
           :class="{active: mod === 'artist'}">
           <i class="s-icon-singer"></i> 歌手
         </dd>
         <dd class="item disabled" 
-          :click="toggleModule('mv')"
+          @click="toggleModule('mv')"
           :class="{active: mod === 'mv'}">
           <i class="s-icon-mv"></i> MV
         </dd>
 
         <dt class="title">我的音乐</dt>
         <dd class="item" 
-          :click="toggleModule('search')"
+          @click="toggleModule('search')"
           :class="{active: mod === 'search'}">
           <i class="s-icon-heart"></i> 试听列表
         </dd>
         <dd class="item" 
-          :click="toggleModule('local')"
+          @click="toggleModule('local')"
           :class="{active: mod === 'local'}">
           <i class="s-icon-play-list"></i> 本地音乐
         </dd>
@@ -118,7 +116,7 @@
 
   <div class="contrl-bar">
 
-    <div class="play-box" :click="handleCtrl">
+    <div class="play-box" @click="handleCtrl">
       <span class="item prev s-icon-prev" data-key="prev"></span>
       <span 
         class="item play"
@@ -139,7 +137,7 @@
           's-icon-single': playMode === 1,
           's-icon-random': playMode === 2
         }"
-        :click="togglePlayMode">
+        @click="togglePlayMode">
       </span>
       <section class="ctrl volume">
         <i 
@@ -150,12 +148,12 @@
         </i>
         <span 
           class="volume-ctrl" 
-          :click="changeValume">
+          @click="changeValume">
           <em :css="{flex: '0 ' + volume + '%'}"></em>
         </span>
       </section>
       <span class="ctrl s-icon-eq"></span>
-      <span class="ctrl lrc" :click="toggleDesktopLrc">词</span>
+      <span class="ctrl lrc" @click="toggleDesktopLrc">词</span>
     </div>
 
   </div>

src/js/app.js

@@ -6,7 +6,13 @@
 
 import '/lib/anot.js'
 import '/lib/layer/index.js'
+import '/lib/form/button.js'
+import '/lib/form/input.js'
+import '/lib/form/switch.js'
+import '/lib/form/checkbox.js'
+import '/lib/form/radio.js'
 import '/lib/store/index.js'
+
 import AudioPlayer from '/lib/audio/index.js'
 import Lyrics from '/lib/lyrics/index.js'
 

src/tools/windows.js

@@ -19,6 +19,7 @@ exports.createMainWindow = function(icon) {
     height: 640,
     frame: false,
     resizable: false,
+    transparent: true,
     icon,
     webPreferences: {
       webSecurity: false,

src/views/artist.htm

@@ -1,6 +1,6 @@
 <div class="do-mod-artist" anot="artist">
 
-  <div class="filter-box" :click="search">
+  <div class="filter-box" @click="search">
     <section class="item" data-key="hot" :class="{active: filter === 'hot'}">热门歌手</section>
     <section class="item" data-key="0,0" :class="{active: filter === '0,0'}">入驻音乐人</section>
 
@@ -35,7 +35,7 @@
   </div>
 
 
-  <ul class="list-box" :click="pickArtist">
+  <ul class="list-box" @click="pickArtist">
     <li class="item" :for="it in list" :data="{artist: it.id, index: $index}">
       <img :attr="{src: it.avatar, alt: it.name}" />
       <summary>
@@ -52,12 +52,12 @@
     <div class="content">
       <h3 class="name">
         <i class="s-icon-singer"></i>
-        <a :click="toArtistListPage">歌手列表</a>
+        <a @click="toArtistListPage">歌手列表</a>
         <i class="do-icon-right"></i>
         <span :text="artist.name"></span>
       </h3>
       <cite class="desc">
-        介绍: {{artist.info | truncate(50)}} <span :click="showArtistInfo">详细</span>
+        介绍: {{artist.info | truncate(50)}} <span @click="showArtistInfo">详细</span>
       </cite>
 
       <dl class="song-album">

src/views/ktv.htm

@@ -1,6 +1,6 @@
 <div class="inner-content">
   <div class="info">
-    <img :attr-src="curr.cover" :click="toggleLrcView" />
+    <img :attr-src="curr.cover" @click="toggleLrcView" />
     <div class="summary" :visible="!allLrcView">
       <h3 :text="curr.title"></h3>
       <section>歌手: {{curr.artist}}</section>
@@ -23,28 +23,28 @@
   </div>
 
   <div class="tool-box">
-    <section class="item" :click="forwardLrc(-0.5)">
+    <section class="item" @click="forwardLrc(-0.5)">
       <i class="do-icon-trigon-up"></i>歌词 -0.5s
     </section>
-    <section class="item" :click="showLrcSearch">
+    <section class="item" @click="showLrcSearch">
       <i class="do-icon-search"></i>歌词有误
     </section>
-    <section class="item" :click="layer.alert('歌词编辑功能暂时未开放')">
+    <section class="item" @click="layer.alert('歌词编辑功能暂时未开放')">
       <i class="do-icon-edit"></i>歌词编辑
     </section>
-    <section class="item" :click="forwardLrc(0.5)">
+    <section class="item" @click="forwardLrc(0.5)">
       <i class="do-icon-trigon-down"></i>歌词 +0.5s
     </section>
   </div>
 
-  <span class="slide-down do-fn-nodrag" :click="closeKtvMode">
+  <span class="slide-down do-fn-nodrag" @click="closeKtvMode">
     <i class="do-icon-right"></i>
   </span>
 
 
   <div class="search-box" :if="lrcSearchBoxShow">
     <div class="content">
-      <div class="title">歌词搜索 <i class="do-icon-close" :click="closeLrcSearch"></i></div>
+      <div class="title">歌词搜索 <i class="do-icon-close" @click="closeLrcSearch"></i></div>
       <section class="section">
         <input 
           class="do-ui-input" 
@@ -65,7 +65,7 @@
           <span :text="it.artist"></span>
           <span :text="it.album"></span>
           <span :text="it.duration | time"></span>
-          <span><a class="do-ui-button blue medium" :click="useThisLrc(it)">使用</a></span>
+          <span><a class="do-ui-button blue medium" @click="useThisLrc(it)">使用</a></span>
         </li>
         <li class="item" :if="lrcForm.result.size() < 1"><span>没有搜到任何结果...</span></li>
       </ul>

src/views/local.htm

@@ -1,6 +1,6 @@
 <div class="do-mod-local" anot="local">
   <div class="tabbar">
-    本地音乐({{list.length}}首)<span class="refresh" :click="refresh">重新扫描</span>
+    本地音乐({{list.length}}首)<span class="refresh" @click="refresh">重新扫描</span>
   </div>
 
   <div class="table">
@@ -19,7 +19,7 @@
           :class="{active: it.id === curr}"
           :for="it in list"
           :on-contextmenu="handleMenu(it, $index, $event)"
-          :dblclick="play(it, $index)">
+          @dblclick="play(it, $index)">
           <td class="idx" :text="$index + 1 + '.'"></td>
           <td :text="it.title | truncate(10)" :attr-title="it.title"></td>
           <td :text="it.artist | truncate(10)" :attr-title="it.artist"></td>
@@ -34,7 +34,7 @@
     <div class="form"  :keyup="closeEditByEnter">
       <section class="section title">
         歌曲信息编辑
-        <i class="do-icon-close" :click="closeEdit"></i>
+        <i class="do-icon-close" @click="closeEdit"></i>
       </section>
 
       <section class="section">

src/views/profile.htm

@@ -1,7 +1,7 @@
 <div class="do-mod-profile" anot="profile">
   <h3 class="title">
     设置
-    <span class="save do-ui-button medium teal" :click="save">保存设置</span>
+    <span class="save do-ui-button medium teal" @click="save">保存设置</span>
   </h3>
 
   <section class="block">

src/views/search.htm

@@ -2,16 +2,16 @@
   <div class="tabbar">
     <span class="item" 
       :class="{active: tab === 'audition'}" 
-      :click="toggleHistory({ key: 'audition' })">
+      @click="toggleHistory({ key: 'audition' })">
       试听列表
     </span>
     <span 
       class="item"
       :class="{active: tab  === it.key}"
-      :click="toggleHistory(it)"
+      @click="toggleHistory(it)"
       :for="it in history"
       :attr-title="it.txt">
-      {{it.txt | truncate(3)}} <i class="do-icon-close" :click="delThis(it, $event)"></i>
+      {{it.txt | truncate(3)}} <i class="do-icon-close" @click="delThis(it, $event)"></i>
     </span>
   </div>
 
@@ -30,7 +30,7 @@
         <tr
           :for="it in list"
           :class="{active: it.kgHash === curr}"
-          :dblclick="play(it, $index)">
+          @dblclick="play(it, $index)">
           <td class="idx" :text="$index + 1 + '.'"></td>
           <td :text="it.title | truncate(10)" :attr-title="it.title"></td>
           <td :text="it.artist | truncate(10)" :attr-title="it.artist"></td>