因为electon的一些bug;无奈改为自建http静态服务

src/css/app.scss

@@ -8,50 +8,6 @@
 
 @import "./var.scss";
 
-@font-face {font-family: "sonist font";
-  src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff')
-}
-
-[class^="s-icon-"], [class*=" s-icon-"] {display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
-
-.s-icon-all:before { content: "\e714"; }
-.s-icon-eq:before { content: "\e715"; }
-.s-icon-heart:before { content: "\e716"; }
-.s-icon-music:before { content: "\e717"; }
-.s-icon-play-list:before { content: "\e719"; }
-.s-icon-mv:before { content: "\e71d"; }
-.s-icon-rank:before { content: "\e71e"; }
-.s-icon-singer:before { content: "\e71f"; }
-.s-icon-random:before { content: "\e720"; }
-.s-icon-radio:before { content: "\e721"; }
-.s-icon-single:before { content: "\e722"; }
-.s-icon-next:before { content: "\e723"; }
-.s-icon-prev:before { content: "\e724"; }
-.s-icon-pause:before { content: "\e725"; }
-.s-icon-play:before { content: "\e726"; }
-
-.do-fn-drag {-webkit-app-region:drag;user-select: none;}
-.do-fn-nodrag {-webkit-app-region:no-drag;}
-
-html {font-size:62.5%}
-body {position:fixed;left:0;top:0;display:flex;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;}
-
-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)}
-  thead th {padding:1rem .8rem;border:0;}
-  tbody tr {height:auto;@include ts(background, .3s);
-    &:hover {background:rgba(63, 194, 168, .08);}
-  }
-  tbody td {padding:.9rem .8rem}
-}
-
-::-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);}
-
-
 .do-mod-app {position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff;
 
   // 标题栏样式
@@ -59,16 +15,16 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
     
     .btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0;
   
-      .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover;}
+      .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(../images/btn-grey.svg) no-repeat;background-size:cover;}
   
       &.focus {
-        .quit {background-image:url(/images/btn-close.svg);}
+        .quit {background-image:url(../images/btn-close.svg);}
-        .min {background-image:url(/images/btn-mini.svg);}
+        .min {background-image:url(../images/btn-mini.svg);}
         // .max {background-image:url(/images/btn-maxi.svg);}
       }
       &:hover {
-        .quit {background-image:url(/images/btn-close_a.svg);}
+        .quit {background-image:url(../images/btn-close_a.svg);}
-        .min {background-image:url(/images/btn-mini_a.svg);}
+        .min {background-image:url(../images/btn-mini_a.svg);}
         // .max {background-image:url(/images/btn-maxi_a.svg);}
       }
     }
@@ -305,10 +261,10 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
         &:nth-child(4) {animation:load 2.5s 1.5s ease-in-out infinite;}
         &:nth-child(5) {animation:load 2.5s 2s ease-in-out infinite;}
       }
-      span {position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover;
+      span {position:absolute;width:8rem;height:8rem;background:url(../images/load1.png) no-repeat center center;background-size:cover;
         
         &:nth-child(6) {animation:play 1.5s linear infinite;}
-        &:nth-child(7) {background-image:url(/images/load2.png);animation:load2 2.5s linear infinite;}
+        &:nth-child(7) {background-image:url(../images/load2.png);animation:load2 2.5s linear infinite;}
       }
       cite {font-size:2.4rem}
     }

src/css/common.scss

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+/**
+ * 公共样式
+ * @authors yutent<yutent@doui.cc>
+ * @date 2019/01/22 18:16:57
+ */
+
+@import "./var.scss";
+
+@font-face {font-family: "sonist font";
+  src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff')
+}
+
+[class^="s-icon-"], [class*=" s-icon-"] {display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
+
+.s-icon-all:before { content: "\e714"; }
+.s-icon-eq:before { content: "\e715"; }
+.s-icon-heart:before { content: "\e716"; }
+.s-icon-music:before { content: "\e717"; }
+.s-icon-play-list:before { content: "\e719"; }
+.s-icon-mv:before { content: "\e71d"; }
+.s-icon-rank:before { content: "\e71e"; }
+.s-icon-singer:before { content: "\e71f"; }
+.s-icon-random:before { content: "\e720"; }
+.s-icon-radio:before { content: "\e721"; }
+.s-icon-single:before { content: "\e722"; }
+.s-icon-next:before { content: "\e723"; }
+.s-icon-prev:before { content: "\e724"; }
+.s-icon-pause:before { content: "\e725"; }
+.s-icon-play:before { content: "\e726"; }
+
+.do-fn-drag {-webkit-app-region:drag;user-select: none;}
+.do-fn-nodrag {-webkit-app-region:no-drag;}
+
+html {font-size:62.5%}
+body {position:fixed;left:0;top:0;display:flex;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;}
+
+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)}
+  thead th {padding:1rem .8rem;border:0;}
+  tbody tr {height:auto;@include ts(background, .3s);
+    &:hover {background:rgba(63, 194, 168, .08);}
+  }
+  tbody td {padding:.9rem .8rem}
+}
+
+::-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/css/desktop-lrc.css

@@ -1 +1 @@
-.do-fn-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.do-fn-nodrag{-webkit-app-region:no-drag}html{font-size:62.5%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:transparent;font-size:1.4rem;color:#62778d}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold}body .quit:hover,body .lock:hover{color:#ff5061}body .lock{right:4rem}body .lock.active{color:#dae1e9}body:hover{background:rgba(29,35,44,0.2)}body:hover .quit,body:hover .lock{visibility:visible}
+body{background:transparent}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold}body .quit:hover,body .lock:hover{color:#ff5061}body .lock{right:4rem}body .lock.active{color:#dae1e9}body:hover{background:rgba(29,35,44,0.2)}body:hover .quit,body:hover .lock{visibility:visible}

src/css/desktop-lrc.scss

@@ -8,12 +8,8 @@
 
 @import "./var.scss";
 
-.do-fn-drag {-webkit-app-region:drag;user-select: none;}
-.do-fn-nodrag {-webkit-app-region:no-drag;}
-
-html {font-size:62.5%}
-body {position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:transparent;font-size:1.4rem;color:nth($cd, 1);
 
+body {background:transparent;
 
   .lrc-box {position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem;
           

src/css/mini-win.css

@@ -0,0 +1 @@
+.app{display:flex;width:100%;height:100%}.app .cover{overflow:hidden;flex:0 6rem}.app .cover img{width:100%}.app .ctrl{flex:1;padding:.8rem;line-height:2.2rem}.app .ctrl .title{font-weight:normal;font-size:1.2rem}.app .ctrl .btns{font-size:2.2rem}.app .ctrl .btns span:hover{color:#ffb618}.app .tools,.app .actions{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:#98acae}.app .tools span,.app .actions span{margin:0 .2rem}.app .tools span:hover,.app .actions span:hover{color:#3fc2a7}.app .tools span.close:hover,.app .actions span.close:hover{color:#ff5061}.app .tools span.active,.app .actions span.active{font-weight:bold}.app .actions{top:auto;bottom:.5rem}.app .actions span:nth-child(1){font-size:1.2rem}

src/css/mini-win.scss

@@ -0,0 +1,46 @@
+@charset "UTF-8";
+/**
+ * 迷你模式
+ * @authors yutent<yutent@doui.cc>
+ * @date 2019/01/22 18:01:58
+ */
+
+
+ @import "./var.scss";
+
+//  body {width:32rem;height:6rem;}
+
+.app {display:flex;width:100%;height:100%;
+
+  .cover {overflow:hidden;flex:0 6rem;
+    
+    img {width:100%;}
+  }
+  .ctrl {flex:1;padding:.8rem;line-height:2.2rem;
+    .title {font-weight:normal;font-size:1.2rem}
+    .btns {font-size:2.2rem;
+      
+      span:hover {color:nth($co, 1);}
+    }
+  }
+
+  .tools,
+  .actions {display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:nth($cgr, 1);
+  
+    span {margin:0 .2rem;
+
+      &:hover {color:nth($ct, 1)}
+      &.close:hover {color:nth($cr, 1)}
+      &.active {font-weight:bold;}
+    }
+  
+  }
+
+  .actions {top:auto;bottom:.5rem;
+  
+    span {
+      &:nth-child(1) {font-size:1.2rem}
+    }
+  }
+
+}

src/depends.html

@@ -2,7 +2,6 @@
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <link href="lib/css/reset-basic.css" rel="stylesheet">
 <link href="lib/css/elem-ui.css" rel="stylesheet">

src/desktop-lrc.html

@@ -2,9 +2,9 @@
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <link href="lib/css/reset-basic.css" rel="stylesheet">
+<link href="/css/common.css" rel="stylesheet">
 <link href="/css/desktop-lrc.css" rel="stylesheet">
 <script>window.LIBS_BASE_URL = location.origin + '/lib';</script>
 <script type="module" src="js/desktop-lrc.js"></script>

src/index.html

@@ -2,10 +2,10 @@
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <link href="lib/css/reset-basic.css" rel="stylesheet">
 <link href="lib/css/elem-ui.css" rel="stylesheet">
+<link href="css/common.css" rel="stylesheet">
 <link href="css/app.css" rel="stylesheet">
 <link href="css/modules.css" rel="stylesheet">
 <script>window.LIBS_BASE_URL = location.origin + '/lib';</script>
@@ -20,7 +20,7 @@
     <nav class="btn-box do-fn-nodrag" :if="theme === 1" :class="{focus: winFocus}">
       <i class="item quit" :click="quit(false)"></i>
       <i class="item min" :click="minimize"></i>
-      <i class="item max" :click="maximize"></i>
+      <i class="item max"></i>
     </nav>
 
 
@@ -42,7 +42,7 @@
       <div class="opt">
         <i class="do-icon-menu-right" :click="toggleOptBox"></i>
         <section class="opt-list" :visible="optBoxShow">
-          <span><i class="do-icon-maximized"></i> 迷你模式</span>
+          <span :click="change2mini"><i class="do-icon-maximized"></i> 迷你模式</span>
           <span :click="toggleModule('profile')">
             <i class="do-icon-setting"></i> 首选项
           </span>
@@ -52,7 +52,7 @@
       </div>
       <span :if="theme === 2">
         <i class="item do-icon-minimize" :click="minimize"></i>
-        <i class="item do-icon-maximize disabled" :click="maximize"></i>
+        <i class="item do-icon-maximize disabled"></i>
         <i class="item do-icon-close quit" :click="quit(false)"></i>
       </span>
     </nav>
@@ -66,7 +66,7 @@
     
       <div class="user-box">
         <div class="avatar">
-          <img src="/images/avatar.jpg" alt="yutent">
+          <img src="images/avatar.jpg" alt="yutent">
         </div>
         <h2 class="uname">yutent</h2>
       </div>

src/js/app.js

@@ -58,7 +58,15 @@ Anot.ss('app-init', appInit + '')
 appInit = JSON.parse(appInit)
 
 const LRC_WIN = createDesktopLrcWindow(MAIN_SCREEN)
+const MINI_WIN = createMiniWindow(MAIN_SCREEN, WIN)
 
+WIN.hide()
+MINI_WIN.show()
+
+MINI_WIN.opener = WIN
+MINI_WIN.openDevTools()
+
+window.MINI_WIN = MINI_WIN
 Anot({
   $id: 'app',
   state: {
@@ -74,6 +82,7 @@ Anot({
     volume: Anot.ls('volume') || 70,
     curr: {
       id: '',
+      cover: '',
       title: '',
       artist: '',
       album: '',
@@ -201,7 +210,10 @@ Anot({
     minimize() {
       WIN.minimize()
     },
-    maximize() {},
+    change2mini() {
+      WIN.hide()
+      MINI_WIN.show()
+    },
 
     activeModule(mod) {
       switch (mod) {
@@ -276,6 +288,8 @@ Anot({
           log('-----  调试模式  -----')
           this.searchTxt = ''
           WIN.openDevTools()
+        } else {
+          layer.toast('搜索功能还未开放')
         }
       }
     },

src/js/mini-win.js

@@ -0,0 +1,74 @@
+/**
+ * 迷你模式
+ * @author yutent<yutent@doui.cc>
+ * @date 2019/01/22 17:52:23
+ */
+
+'use strict'
+
+import '/lib/anot.next.js'
+
+const { remote } = require('electron')
+
+const WIN = remote.getCurrentWindow()
+const MAIN_WIN = WIN.getParentWindow()
+
+window.WIN = WIN
+Anot({
+  $id: 'mini',
+  state: {
+    isPlaying: false,
+    curr: {
+      id: '',
+      title: '假装不合适',
+      artist: '',
+      album: '',
+      time: 0,
+      duration: 0,
+      cover: '/images/album.png'
+    },
+    pinned: true,
+    playMode: Anot.ls('play-mode') >>> 0
+  },
+  mounted() {
+    WIN.on('ktv-lrc', lrc => {
+      this.lrc = lrc
+    })
+  },
+  methods: {
+    play() {},
+    nextSong() {},
+
+    handleTool(ev) {
+      let key = ev.target.dataset.key
+      switch (key) {
+        case 'pin':
+          this.pinned = !this.pinned
+          WIN.setAlwaysOnTop(this.pinned)
+          break
+        case 'quit':
+          WIN.hide()
+          MAIN_WIN.show()
+          break
+        default:
+          break
+      }
+    },
+    handleAction(ev) {
+      let key = ev.target.dataset.key
+      switch (key) {
+        case 'lrc':
+          MAIN_WIN.emit('toggle-desktoplrc')
+          break
+        case 'mode':
+          let mod = this.playMode
+          mod++
+          if (mod > 2) {
+            mod = 0
+          }
+          this.playMode = mod
+          MAIN_WIN.emit('play-mode', mod)
+      }
+    }
+  }
+})

src/js/modules/extra-win.js

@@ -27,24 +27,25 @@ export const createDesktopLrcWindow = function(screen) {
     show: false
   })
 
-  win.loadURL('app://sonist/desktop-lrc.html')
+  win.loadURL('http://127.0.0.1:10240/desktop-lrc.html')
   return win
 }
 
-export const createMiniWindow = function(screen) {
+export const createMiniWindow = function(screen, pwin) {
   let win = new BrowserWindow({
     title: '',
-    width: 480,
+    width: 320,
     height: 60,
     frame: false,
+    parent: pwin,
     resizable: false,
     alwaysOnTop: true,
-    x: screen.size.width - 480,
+    x: screen.size.width - 320,
     y: 0,
     skipTaskbar: true,
     show: false
   })
 
-  win.loadURL('app://sonist/mini-win.html')
+  win.loadURL('http://127.0.0.1:10240/mini-win.html')
   return win
 }

src/main.js

@@ -1,4 +1,11 @@
-const { app, BrowserWindow, protocol, session, ipcMain } = require('electron')
+/**
+ * 主入口
+ * @author yutent<yutent@doui.cc>
+ * @date 2019/12/13 00:37:04
+ */
+
+'use strict'
+const { app, BrowserWindow, session } = require('electron')
 const path = require('path')
 const fs = require('iofs')
 const { exec } = require('child_process')
@@ -6,6 +13,7 @@ const log = console.log
 
 const createTray = require('./tools/tray')
 const createMenu = require('./tools/menu')
+const createServer = require('./tools/server')
 
 /* ******************************* */
 /* **********修复环境变量*********** */
@@ -22,22 +30,13 @@ PATH_SET = null
 
 const ROOT = __dirname
 const HOME = app.getPath('home')
-const MIME_TYPES = {
-  js: 'application/javascript',
-  html: 'text/html',
-  htm: 'text/html',
-  css: 'text/css',
-  jpg: 'image/jpg',
-  png: 'image/png',
-  gif: 'image/gif'
-}
 
 /* ----------------------------------------------------- */
 app.commandLine.appendSwitch('--lang', 'zh-CN')
 app.commandLine.appendSwitch('--autoplay-policy', 'no-user-gesture-required')
 
 app.setPath('appData', path.resolve(HOME, '.sonist/'))
-protocol.registerStandardSchemes(['app'], { secure: true })
+// protocol.registerStandardSchemes(['app'], { secure: true })
 
 let appPath = app.getPath('appData')
 if (!fs.exists(appPath)) {
@@ -48,6 +47,10 @@ if (!fs.exists(appPath)) {
   fs.echo('[]', path.join(appPath, 'music.db'))
 }
 /* ----------------------------------------------------- */
+
+createServer(ROOT)
+
+// throw new Error('hee')
 let win = null
 
 function createWindow() {
@@ -67,7 +70,10 @@ function createWindow() {
   })
 
   // 然后加载应用的 index.html。
-  win.loadURL('app://sonist/index.html')
+  // win.loadURL('https://yutent.me')
+  win.loadURL(`http://127.0.0.1:10240/index.html`)
+
+  // win.loadURL('app://sonist/index.html')
 }
 /* ****************************************** */
 /* *************   init   ******************* */
@@ -75,13 +81,6 @@ function createWindow() {
 
 //  创建窗口
 app.once('ready', () => {
-  protocol.registerBufferProtocol('app', (req, cb) => {
-    let file = req.url.replace(/^app:\/\/sonist\//, '')
-    let ext = path.extname(req.url).slice(1)
-    let buf = fs.cat(path.resolve(ROOT, file))
-    cb({ data: buf, mimeType: MIME_TYPES[ext] })
-  })
-
   exec('which ffprobe', (err, res) => {
     if (res) {
       session.defaultSession.setUserAgent(
@@ -108,7 +107,7 @@ app.once('ready', () => {
         titleBarStyle: 'hiddenInset'
       })
       win.setMenuBarVisibility(false)
-      win.loadURL('app://sonist/depends.html')
+      win.loadURL('http://127.0.0.1:10240/depends.html')
       win.on('closed', _ => {
         app.exit()
       })

src/mini-win.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+<link href="lib/css/reset-basic.css" rel="stylesheet">
+<link href="/css/common.css" rel="stylesheet">
+<link href="/css/mini-win.css" rel="stylesheet">
+<script>window.LIBS_BASE_URL = location.origin + '/lib';</script>
+<script type="module" src="js/mini-win.js"></script>
+</head>
+<body class="do-fn-noselect" anot="mini">
+  <div class="app">
+    <span class="cover">
+      <img :attr-src="curr.cover" />
+    </span>
+    <div class="ctrl">
+      <h3 class="title" :text="curr.title"></h3>
+      <div class="btns">
+        <span class="s-icon-prev" :click="nextSong(-1)"></span>
+        <span 
+          class="play"
+          :class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}" 
+          :click="play(null)">
+        </span>
+        <span class="s-icon-next" :click="nextSong(1)"></span>
+        
+      </div>
+    </div>
+    <div class="tools" :click="handleTool">
+      <span data-key="pin" class="do-icon-pin" :class="{active: pinned}"></span>
+      <span data-key="quit" class="do-icon-maximized"></span>
+    </div>
+
+    <div class="actions" :click="handleAction">
+      <span data-key="lrc">词</span>
+      <span data-key="mode"
+        :class="{
+          's-icon-all': playMode === 0,
+          's-icon-single': playMode === 1,
+          's-icon-random': playMode === 2
+        }">
+      </span>
+    </div>
+    
+  </div>
+</body>
+</html>

src/tools/server.js

@@ -0,0 +1,37 @@
+/**
+ * 内置HTTP静态服务
+ * @author yutent<yutent@doui.cc>
+ * @date 2019/01/23 02:43:03
+ */
+
+'use strict'
+
+const http = require('http')
+const path = require('path')
+const fs = require('iofs')
+
+const MIME_TYPES = {
+  '.js': 'text/javascript; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.htm': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.jpg': 'image/jpg',
+  '.png': 'image/png',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg',
+  '.ico': 'image/ico'
+}
+
+module.exports = function(root) {
+  http
+    .createServer((req, res) => {
+      let { ext } = path.parse(req.url)
+      let file = path.resolve(root, req.url.slice(1))
+      let buff = fs.cat(file)
+      res.writeHead(200, {
+        'Content-Type': MIME_TYPES[ext] || MIME_TYPES['.html']
+      })
+      res.end(buff)
+    })
+    .listen(10240)
+}