首先我们要下载一下图标，可以到 iconfont美化界面 - 图1 下载，然后放在 project_root/static 下面，文档在这里美化界面 - 图2。

全局状态

由于动态组件，退出会销毁，这很明显不是我们想要的，所以只能单独提取出来，而却最好把状态都放到全局来。

首先添加三个状态。

  1. files: [],
  2. index: 0,
  3. music: true

修改模板

修改一下 index.ejs , 因为我们等会要做 css 动画，把背景颜色做一下  兼容，并且把高度给撑开。

  1. html {
  2.   background: #383a41;
  3.   min-height: 100vh;
  4. }

更改 App 组件

单独提取出来就不会被销毁。Music 要是被销毁了，那就没法播放音频了。

  1. <Tip/>
  2. <svelte:component this="{$currentPage}" name="page" />
  3. <Music/>
  4. <script>
  5.     export default {
  6.         components: {
  7.             Tip: './components/Tip.svelte',
  8.             Music: './pages/Music.svelte'
  9.         },
  10.     };
  11. </script>

修改 Main.svelte

通过全局状态来控制菜单的显隐，同样的方式，控制 Music.svelte.

  1. <div class="wrap {$music ? 'hidden': 'show'}">
  2.   <div className="music-page-btn" on:click="$set({music: true})">播放器</div>
  3. </div>
  1. .hidden {
  2.   display: none;
  3. }
  5. .wrap :global(a),
  6. .wrap div {
  7.   display: inline-flex;
  8.   // .....
  9. }

回退修复

修改 Link.svelte 使点击 Back.svelte 将 Music.svelte 隐藏，所以我们每次点击都可以将这个转态置为 false，这样就保证了 Music.svelte 的隐藏。

  1. this.refs.link.addEventListener(
  2.   'click',
  3.   e => {
  4.     e.preventDefault()
  5.     this.store.set({
  6.       music: false
  7.     })
  8.     this.store.changePage(this.get().to)
  9.   },
  10.   false
  11. )

修改播放组件

首先我们需要把状态的更改都是用 this.store.set 和 $set 进行修改，然后还需要将文件名处理成正确的显示格式。

::-webkit-scrollbar-thumb 是简单的修改了一下滚动条的颜色。

  1. <div class="music-page { $music ?'show':'hidden' } ">
  2.     <Back/>
  3.     <div>
  4.         <ul class="main">
  5.             {#each files as file, index}
  6.             <li on:click="$set({index})">{handleName(file)}</li>
  7.             {/each}
  8.         </ul>
  9.         <div class="control">
  10.             <div class="title">{title}</div>
  11.             <div class="flex">
  12.                 <button on:click="file()"><img src="plus-circle.png" width="25" height="25" alt="add"></button>
  13.                 <button on:click="play()"><img src="play-circle.png" width="25" height="25" alt="play"></button>
  14.                 <button on:click="pause()"><img src="time-out.png" width="25" height="25" alt="stop"></button>
  15.                 <button on:click="prev()"><img src="left-circle.png" width="25" height="25" alt="prev"></button>
  16.                 <button on:click="next()"><img src="right-circle.png" width="25" height="25" alt="next"></button>
  17.             </div>
  18.         </div>
  19.     </div>
  20. </div>
  22. <script>
  23.     import {
  24.         ipcRenderer,
  25.         remote
  26.     } from "electron";
  27.     const {
  28.         dialog,
  29.         app
  30.     } = remote
  31.     const {
  32.         readdir
  33.     } = remote.require('fs-extra')
  35.     import {
  36.         resolve
  37.     } from 'path'
  39.     function handleName(name) {
  40.         return name.replace('.mp3', '').split('-')[1]
  41.     }
  43.     export default {
  44.         data() {
  45.             return {
  46.                 files: [],
  47.                 title: ''
  48.             };
  49.         },
  50.         helpers: {
  51.             handleName
  52.         },
  53.         components: {
  54.             Back: '../components/Back.svelte'
  55.         },
  56.         oncreate() {
  57.             this.player = new Audio()
  58.             document.querySelector('#app').appendChild(this.player)
  60.             const {
  61.                 files
  62.             } = this.store.get()
  64.             this.set({
  65.                 files
  66.             })
  68.             this.player.onended = this.next.bind(this) // 结束进入下一首
  69.             let listener = this.store.on('state', ({
  70.                 changed
  71.             }) => {
  72.                 if (changed.index || changed.files) { // 当重新选了文件，播放第一首
  73.                     const {
  74.                         files,
  75.                         index
  76.                     } = this.store.get()
  77.                     this.player.src = "file://" + files[index]
  78.                     this.set({
  79.                         title: handleName(this.get().files[index])
  80.                     })
  81.                     this.play()
  82.                 }
  83.             })
  84.             this.on('destroy', listener.cancel)
  85.         },
  86.         ondestroy() {
  87.             document.querySelectorAll("audio").forEach(a => a.remove())
  88.         },
  89.         methods: {
  90.             next() {
  91.                 const {
  92.                     index,
  93.                     files
  94.                 } = this.store.get()
  95.                 let i = index + 1
  96.                 if (i > files.length - 1) {
  97.                     i = files.length - 1
  98.                 }
  99.                 this.store.set({
  100.                     index: i
  101.                 })
  102.             },
  103.             prev() {
  104.                 const {
  105.                     index,
  106.                     files
  107.                 } = this.store.get()
  108.                 let i = index - 1
  109.                 if (i < 0) {
  110.                     i = 0
  111.                 }
  112.                 this.store.set({
  113.                     index: i
  114.                 })
  115.             },
  116.             play() {
  117.                 if (!this.player.currentSrc) {
  118.                     const {
  119.                         files,
  120.                         index
  121.                     } = this.store.get()
  122.                     this.set({
  123.                         title: handleName(files[index])
  124.                     })
  125.                     this.player.src = "file://" + files[index]
  126.                 }
  127.                 this.player.play()
  128.             },
  129.             pause() {
  130.                 this.player.pause()
  131.             },
  132.             file() {
  133.                 dialog.showOpenDialog({
  134.                     title: '选择音乐目录',
  135.                     defaultPath: app.getPath('home'),
  136.                     properties: ['openDirectory']
  137.                 }, async(folders) => {
  138.                     if (folders.length > 0) {
  139.                         const folder = folders[0]
  140.                         let files = await readdir(folder)
  141.                         this.set({
  142.                             files
  143.                         })
  144.                         const compare = (a, b) => {
  145.                             let t1 = a.split('-')[0];
  146.                             let t2 = b.split('-');
  147.                             return parseInt(t1) - parseInt(t2)
  148.                         }
  149.                         files = files.sort(compare).map(file => resolve(folder, file))
  150.                         this.store.set({
  151.                             files,
  152.                             index: 0
  153.                         })
  154.                     }
  155.                 })
  156.             }
  157.         }
  158.     };
  159. </script>
  162. <style>
  163.     .music-page {
  164.         transition: all ease-in .1s;
  165.         height: 100vh;
  166.     }
  168.     .hidden {
  169.         transform: translate(100%, 0)
  170.     }
  172.     .show {
  173.         transform: translate(0, 0)
  174.     }
  176.     .control {
  177.         position: fixed;
  178.         bottom: 0;
  179.         left: 0;
  180.         right: 0;
  181.         height: 100px;
  182.         background: #383A41;
  183.         display: flex;
  184.         flex-direction: column;
  185.     }
  187.     .title {
  188.         color: #f8f8f8;
  189.         padding: 1rem 0;
  190.         text-align: center;
  191.         font-size: .8rem;
  192.         min-height: 54px;
  193.         user-select: none;
  194.     }
  196.     .flex {
  197.         display: flex;
  198.         justify-content: space-around;
  199.         align-items: center;
  200.         flex-basis: 100%;
  201.     }
  203.     .control button {
  204.         background: transparent;
  205.         border: none;
  206.         outline: none;
  207.         cursor: pointer;
  208.     }
  210.     .control button:hover {
  211.         background: #2f2f2f;
  212.     }
  214.     .main {
  215.         height: calc(100vh - 160px);
  216.         margin-bottom: 60px;
  217.         overflow: scroll;
  218.         background: #303238;
  219.     }
  221.     li {
  222.         color: #f8f8f8;
  223.         padding: 1.1rem 1rem;
  224.         font-size: .9rem;
  225.         cursor: pointer;
  226.     }
  228.     li:hover {
  229.         background: #2f2f2f;
  230.     }
  232.      ::-webkit-scrollbar-thumb {
  233.         background: #383A41;
  234.     }
  236.     .control button {
  237.         line-height: 0;
  238.         padding: .5rem 1rem;
  239.     }
  240. </style>

美化界面 - 图3