diff --git a/public/index.html b/public/index.html index bf54f97..72b5535 100644 --- a/public/index.html +++ b/public/index.html @@ -58,6 +58,8 @@ console.log('添加音乐', item) if (item.arrayBuffer) { store.add(item) + // 告知对方音乐列表有更新 + clientList.send('base', JSON.stringify({ type: 'set_music_list', list: musicList.list.map(({ id, name, size, type }) => ({ id, name, size, type })) })) } }) diff --git a/public/music.js b/public/music.js index 8fa83ac..41131d8 100644 --- a/public/music.js +++ b/public/music.js @@ -3,6 +3,7 @@ import { Button, List, ListItem } from './weigets.js' export default class MusicList { constructor({ list = [], EventListeners = {} }) { this.ul = List({}) + this.ul.classList.add('music-list') this.EventListeners = EventListeners this.list = [] list.forEach(item => this.add(item)) // 列表逐一添加 @@ -34,6 +35,37 @@ export default class MusicList { reader.readAsArrayBuffer(file) } } + //// 写入 css 样式到 head + //const style = document.createElement('style') + //style.innerText = ` + // ul.music-list { + // width: 600px; + // height: 100%; + // overflow: auto; + // background-color: #ffffff; + // box-shadow: 0 0 15px #ccc; + // border-radius: 5px; + // padding: 1rem 2rem; + // margin: 1rem; + // } + // ul.music-list > li { + // list-style: none; + // padding: 10px; + // border-bottom: 1px solid #ccc; + // cursor: pointer; + // } + // ul.music-list > li:hover { + // background-color: #ddd; + // } + // ul.music-list > li > button { + // margin-right: 10px; + // } + // ul.music-list > li > button:hover { + // background-color: #ccc; + // } + // ul.music-list > li + // ` + //document.head.appendChild(style) document.body.appendChild(input) } // 添加回调函数