From 857f38a7ac421f25e9c8643ee4e6c5bade878133 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Thu, 19 Oct 2023 00:34:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BC=A0=E6=A0=87=E6=82=AC=E5=81=9C=E6=97=B6?=
 =?UTF-8?q?=E6=B0=94=E6=B3=A1=E5=B1=95=E7=A4=BA=E9=9F=B3=E4=B9=90=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/music.js | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/music.js b/src/music.js
index 85d276a..785ed57 100644
--- a/src/music.js
+++ b/src/music.js
@@ -3,10 +3,6 @@ import { Span, Button, List, ListItem, UploadMusic, createElement } from './weig
 export default class MusicList {
     constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
         this.event = { onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }
-        this.ul = List({ classList: ['music-list'] })
-        this.EventListeners = EventListeners
-        this.list = []
-        list.forEach(item => this.add(item)) // 列表逐一添加
 
         // 添加音乐播放器
         this.audio = new Audio()
@@ -26,10 +22,27 @@ export default class MusicList {
         //    console.error('音乐播放器错误:', event)
         //})
 
+        this.ul = List({
+            classList: ['music-list'],
+            style: {
+                // 文字溢出显示为省略号
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            }
+        })
+        this.EventListeners = EventListeners
+        this.list = []
+        list.forEach(item => this.add(item)) // 列表逐一添加
+
         // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
         const element = createElement({
-            //textContent: '音乐',
-            style: { position: 'fixed', top: '5rem', right: '1rem', backgroundColor: '#eee', padding: '.5rem', borderRadius: '1rem', cursor: 'pointer' },
+            style: {
+                position: 'fixed', top: '5rem', right: '1rem',
+                backgroundColor: '#eee', padding: '.5rem',
+                borderRadius: '1rem', cursor: 'pointer',
+                maxWidth: '20rem', maxHeight: '70vh',
+            },
             onclick: event => {
                 this.ul.classList.toggle('disable')
             },
@@ -112,6 +125,7 @@ export default class MusicList {
             classList: item.arrayBuffer ? ['cache'] : [],
             children: [
                 Span({
+                    title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
                     textContent: `${item.name} - ${bytesToSize(item.size)}`,
                     onclick: event => {
                         event.stopPropagation()                // !如果使用async则此处不能阻止冒泡传递