dsh-music-player 0.5.3 → 0.5.4

package/README.md

@@ -112,13 +112,13 @@ dsh plugin --profile <profile> add ./dsh-music-player-0.1.0.tgz
 
 - **登录**：两种扫码方式——**QQ 登录**或**微信登录**（推荐）。登录态保存在 Host 端（`~/.dsh/music-player-qq-cookie.json`），刷新/重启不丢；面板右上角可退出登录。
 - **浏览**：6 个子页签——**我的歌单 / 推荐歌单 / 分类歌单 / 排行榜 / 新歌 / 搜索**。
-  - 我的歌单：登录后展示当前账号的歌单（卡片式）。
+  - 我的歌单：登录后展示当前账号的歌单（卡片式），本人创建的歌单卡片右上角可一键删除（二次确认；「我喜欢」不可删除）。
   - 推荐歌单：热门推荐 12 条，底部「加载更多」可续载。
   - 分类歌单：60+ 分类（默认折叠显示 8 个，可展开），每个分类的歌单支持「加载更多」。
-  - 排行榜：巅峰榜/地区榜/特色榜等分组，点榜单看歌曲（带榜单封面卡片）。
+  - 排行榜：巅峰榜/地区榜/特色榜等分组，点榜单看歌曲（带榜单封面卡片），榜单详情底部「加载更多」可分页续载全部歌曲。
   - 新歌：新歌速递（最新/内地/港台/欧美/韩国等）。
   - 搜索：搜歌曲与歌单，带搜索历史（localStorage，最近 10 条）。
-- **播放**：点击任意歌曲即可播放（同一播放条 + 频谱）；VIP 标识显示在歌名后，行尾显示歌手名。
+- **播放**：点击任意歌曲即可播放（同一播放条 + 频谱）；VIP 标识显示在歌名后，行尾显示歌手名。进入歌单/播放列表时自动定位到正在播放的那一首，且正在播放的条目以高亮选中态显示。
 - **收藏**：播放条爱心按钮把当前在线曲目收藏到 QQ 音乐「我喜欢」，已收藏歌曲爱心实时点亮。
 - **续播**：在线播放进度（当前曲目 + 队列）刷新后自动恢复，点 ▶ 续播。
 - 在线曲目不占本地曲库的 500 首上限，与本地/讲书完全隔离。

package/lib/client.js

@@ -1696,6 +1696,16 @@ window.__ModuleLoader__.load({
       return React.createElement('svg', { className: cls, width: 12, height: 12, viewBox: '0 0 24 24', fill: 'currentColor', 'aria-hidden': true },
         React.createElement('path', { d: 'M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z' }));
     }
+    // 播放控制图标（上一首/播放/暂停/下一首/停止）：用 SVG 替代 ⏮▶⏸⏭⏹ 文本字形。
+    // 这些 Unicode 符号（尤其 ⏸ 常以 emoji 呈现）宽高/基线不一致，点击切换会让按钮
+    // 大小与位置偏移；统一用同尺寸 viewBox=24 的 SVG，保证按钮恒定尺寸、图标精确居中。
+    const iconSvg = (path, w = 14) => (props) => React.createElement('svg', { className: props.className || '', width: w, height: w, viewBox: '0 0 24 24', fill: 'currentColor', 'aria-hidden': true },
+      React.createElement('path', { d: path }));
+    const PlayIcon = iconSvg('M8 5v14l11-7z');
+    const PauseIcon = iconSvg('M6 19h4V5H6v14zm8-14v14h4V5h-4z');
+    const PrevIcon = iconSvg('M6 6h2v12H6zm3.5 6l8.5 6V6z');
+    const NextIcon = iconSvg('M6 18l8.5-6L6 6v12zM16 6h2v12h-2z');
+    const StopIcon = iconSvg('M6 6h12v12H6z');
 
     // ---- components ----
     // Custom vertical volume slider. The native <input type=range> cannot be
@@ -1874,10 +1884,10 @@ window.__ModuleLoader__.load({
                 : React.createElement('span', { className: 'dsh-music-bar-time' }, fmtTime(s.position) + ' / ' + fmtTime(s.duration)))
             : null,
           heartBtn,
-          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: isBook ? '上一章' : '上一首', onClick: () => (isBook ? stepBook(-1) : step(-1)) }, '⏮') : null,
-          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: '播放/暂停', onClick: togglePlay }, s.playing ? '⏸' : '▶') : null,
-          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: isBook ? '下一章' : '下一首', onClick: () => (isBook ? stepBook(1) : step(1)) }, '⏭') : null,
-          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: '停止', onClick: stop }, '⏹') : null,
+          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: isBook ? '上一章' : '上一首', onClick: () => (isBook ? stepBook(-1) : step(-1)) }, React.createElement(PrevIcon, null)) : null,
+          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: '播放/暂停', onClick: togglePlay }, React.createElement(s.playing ? PauseIcon : PlayIcon, null)) : null,
+          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: isBook ? '下一章' : '下一首', onClick: () => (isBook ? stepBook(1) : step(1)) }, React.createElement(NextIcon, null)) : null,
+          hasTrack ? React.createElement('button', { className: 'dsh-music-bar-btn', title: '停止', onClick: stop }, React.createElement(StopIcon, null)) : null,
           // 章节目录按钮：仅讲书（book）时出现，点击弹出章节列表并可跳章。
           // 与音量/播放模式按钮同款圆形样式（dsh-music-mode-trigger）；弹层用
           // 与音量/播放模式同款的「相对容器 + 绝对定位」锚在按钮正上方。
@@ -2096,6 +2106,15 @@ window.__ModuleLoader__.load({
         document.addEventListener('mousedown', onDown);
         return () => document.removeEventListener('mousedown', onDown);
       }, [qqJoin]);
+      // QQ 播放列表层：进入或切换播放曲目时，把正在播放的那一行滚动到可见位置。
+      useEffect(() => {
+        const list = qqPlRef.current;
+        if (list === null) return;
+        const active = list.querySelector('.dsh-music-track-row.active');
+        if (active !== null && typeof active.scrollIntoView === 'function') {
+          active.scrollIntoView({ block: 'nearest' });
+        }
+      }, [layer, s.currentId, activePl]);
       // 推荐歌单加载更多：热门推荐 12 条后用「全部分类」分页续载。
       const [recPage, setRecPage] = useState(1);
       const [recLoadingMore, setRecLoadingMore] = useState(false);
@@ -2111,6 +2130,10 @@ window.__ModuleLoader__.load({
       const [topLoaded, setTopLoaded] = useState(false);
       const [topDetail, setTopDetail] = useState(null); // { id, name, songs }
       const [topLoading, setTopLoading] = useState(false);
+      // 榜单详情分页：已加载歌曲总数 / 是否还有下一页 / 加载更多进行中。
+      const [topTotal, setTopTotal] = useState(0);
+      const [topHasMore, setTopHasMore] = useState(false);
+      const [topLoadingMore, setTopLoadingMore] = useState(false);
       const [newSongs, setNewSongs] = useState([]);
       const [newLoaded, setNewLoaded] = useState(false);
       // 登录。
@@ -2122,6 +2145,9 @@ window.__ModuleLoader__.load({
       const pollRef = useRef(null);
       const qrKeyRef = useRef('');
       const loginModeRef = useRef(null);
+      // QQ 播放列表层（layer='playlist'）的滚动容器（.dsh-music-qq-body）引用，
+      // 用于进入/切歌时把正在播放的曲目滚动到可见位置。
+      const qqPlRef = useRef(null);
 
       const json = (url) => jsonGet(url).catch(() => ({ ok: false, error: '网络错误' }));
       // 搜索历史（localStorage 持久化，最近在前，最多 10 条）。
@@ -2209,6 +2235,22 @@ window.__ModuleLoader__.load({
         setMineLoaded(true);
         setBrowseLoading(false);
       }
+      // 删除自建歌单（DelPlaylist / PlaylistBaseWrite）。二次确认后调 Host，成功后本地移除。
+      async function deleteMinePlaylist(pl) {
+        const dirId = Number(pl && (pl.dirId || pl.tid || pl.id)) || 0;
+        if (!dirId) { setBrowseErr('缺少歌单 dirId，无法删除'); return; }
+        openConfirm('删除歌单', '确定删除 QQ 歌单「' + (pl.name || '') + '」？删除后不可恢复。', async () => {
+          setBrowseLoading(true); setBrowseErr('');
+          try {
+            const d = await jsonPost('/dsh-music/qq/playlist-delete', { dirId });
+            if (!d || !d.ok) throw new Error((d && d.error) || '删除歌单失败');
+            setMinePlays((prev) => prev.filter((p) => String(p.id) !== String(pl.id)));
+          } catch (err) {
+            setBrowseErr(String((err && err.message) || err));
+          }
+          setBrowseLoading(false);
+        }, '删除', true);
+      }
       async function loadCategory(cat) {
         setCurCategory(cat); setCatPlays([]); setBrowseLoading(true); setBrowseErr('');
         setCatPage(1); setCatHasMore(true);
@@ -2242,12 +2284,33 @@ window.__ModuleLoader__.load({
         setTopLoaded(true);
         setBrowseLoading(false);
       }
+      const TOP_PAGE = 30;
       async function loadTopSongs(top) {
         setTopDetail(null); setTopLoading(true); setBrowseErr('');
-        const d = await json('/dsh-music/qq/top-songs?topId=' + encodeURIComponent(top.id));
-        if (d && d.ok) setTopDetail({ ...d.toplist, id: top.id, name: top.name, cover: top.cover || '' }); else setBrowseErr((d && d.error) || '加载榜单失败');
+        setTopTotal(0); setTopHasMore(false);
+        const d = await json('/dsh-music/qq/top-songs?topId=' + encodeURIComponent(top.id) + '&offset=0&num=' + TOP_PAGE);
+        if (d && d.ok) {
+          const t = d.toplist || {};
+          setTopDetail({ ...t, id: top.id, name: t.name || top.name, cover: t.cover || top.cover || '' });
+          setTopTotal(Number(t.total) || (t.songs || []).length);
+          setTopHasMore(!!t.hasMore);
+        } else setBrowseErr((d && d.error) || '加载榜单失败');
         setTopLoading(false);
       }
+      // 榜单「加载更多」：从当前已加载数量继续取下一页并追加，更新 total/hasMore。
+      async function loadMoreTopSongs() {
+        if (topLoadingMore || !topDetail) return;
+        setTopLoadingMore(true); setBrowseErr('');
+        const offset = (topDetail.songs || []).length;
+        const d = await json('/dsh-music/qq/top-songs?topId=' + encodeURIComponent(topDetail.id || topDetail.topId) + '&offset=' + offset + '&num=' + TOP_PAGE);
+        if (d && d.ok) {
+          const t = d.toplist || {};
+          setTopDetail((cur) => (cur ? { ...cur, songs: [...(cur.songs || []), ...((t.songs || []))] } : cur));
+          setTopTotal(Number(t.total) || offset + (t.songs || []).length);
+          setTopHasMore(!!t.hasMore);
+        } else setBrowseErr((d && d.error) || '加载更多失败');
+        setTopLoadingMore(false);
+      }
       async function loadNewSongs() {
         if (newLoaded) return;
         setBrowseLoading(true); setBrowseErr('');
@@ -2256,11 +2319,15 @@ window.__ModuleLoader__.load({
         setNewLoaded(true);
         setBrowseLoading(false);
       }
-      function backToTops() { setTopDetail(null); }
-      async function openPlaylist(pl) {
+      function backToTops() { setTopDetail(null); setTopTotal(0); setTopHasMore(false); }
+      async function openPlaylist(pl, mine) {
         setActivePl(null); setLayer('playlist'); setPlLoading(true); saveUi('playlist', pl.id, pl.name);
+        // _dirId：从歌单移除歌曲需要 QQ 歌单的目录 id（「我的歌单」卡片带 dirId）；
+        // mine 标记这是「我自己的歌单」（含「我喜欢」），详情里才允许用「−」从该歌单移除。
+        const _dirId = Number((pl && (pl.dirId || pl.tid || pl.id))) || 0;
         const d = await json('/dsh-music/qq/playlist/' + encodeURIComponent(pl.id));
-        if (d && d.ok) setActivePl({ ...d.playlist, source: pl.name || '歌单' }); else setBrowseErr((d && d.error) || '加载失败');
+        if (d && d.ok) setActivePl({ ...d.playlist, source: pl.name || '歌单', mine: !!mine, _dirId });
+        else setBrowseErr((d && d.error) || '加载失败');
         setPlLoading(false);
       }
       function openQueue() {
@@ -2372,7 +2439,7 @@ window.__ModuleLoader__.load({
 
       // ---- 渲染辅助 ----
       const fmtCount = (n) => { const v = Number(n) || 0; if (v >= 1e8) return (v / 1e8).toFixed(1).replace(/\.0$/, '') + '亿'; if (v >= 1e4) return (v / 1e4).toFixed(1).replace(/\.0$/, '') + '万'; return String(v); };
-      const songRow = (song, queue, sourceLabel) => {
+      const songRow = (song, queue, sourceLabel, inMine) => {
         const id = String(song.songmid || song.id);
         const active = s.currentId === 'qq:' + id;
         const playing = active && s.playing;
@@ -2387,12 +2454,38 @@ window.__ModuleLoader__.load({
               React.createElement('span', { className: 'dsh-music-track-title' }, (playing ? '▶ ' : '') + song.title),
               vip ? React.createElement('span', { className: 'dsh-music-online-tag vip' }, 'VIP') : null),
             React.createElement('span', { className: 'dsh-music-online-tag' }, artists || 'QQ')),
-          React.createElement('button', {
-            className: 'dsh-music-playlist-mini add',
-            title: '加入我的歌单',
-            onClick: (e) => { e.stopPropagation(); openQqJoin(song, e); },
-          }, '＋'));
+          // 我的歌单详情：歌曲已在该歌单 → 显示「−」从该歌单移除；其它场景显示「＋」加入歌单。
+          inMine
+            ? React.createElement('button', {
+              className: 'dsh-music-playlist-mini remove',
+              title: '从「' + ((activePl && activePl.name) || '当前歌单') + '」移除',
+              onClick: (e) => { e.stopPropagation(); removeFromActivePlaylist(song); },
+            }, '−')
+            : React.createElement('button', {
+              className: 'dsh-music-playlist-mini add',
+              title: '加入我的歌单',
+              onClick: (e) => { e.stopPropagation(); openQqJoin(song, e); },
+            }, '＋'));
       };
+      // 从「我的歌单」当前歌单移除歌曲（DelSonglist）；「我喜欢」(dirId=201) 等同取消收藏。
+      async function removeFromActivePlaylist(song) {
+        const pl = activePl;
+        if (!pl) return;
+        const id = String(song.songmid || song.id);
+        const dirId = Number(pl._dirId || pl.dirId || pl.id) || 0;
+        try {
+          const d = await jsonPost('/dsh-music/qq/playlist-remove', { song, dirId, tid: 0 });
+          if (!d || !d.ok) throw new Error((d && d.error) || '从歌单移除失败');
+          // 就地移除该行，并刷新「我的歌单」数目。
+          setActivePl((cur) => (cur ? { ...cur, songs: (cur.songs || []).filter((t) => String(t.songmid || t.id) !== id) } : cur));
+          loadMine();
+          // 「我喜欢」：同步收藏集合并把当前播放的这首歌标记为未收藏。
+          if (dirId === 201) {
+            refreshQQFavIds();
+            if (String(s.currentId) === 'qq:' + id) set({ qqFaved: false });
+          }
+        } catch (err) { setQError(String((err && err.message) || err)); }
+      }
       // 「加入歌单」：打开弹窗（列出我的歌单），并把歌曲加入所选歌单 / 新建歌单。
       function openQqJoin(song, e) {
         const r = e.currentTarget.getBoundingClientRect();
@@ -2451,12 +2544,16 @@ window.__ModuleLoader__.load({
           React.createElement('button', { className: 'dsh-music-add-pop-item new', onClick: qqJoinCreate }, '＋ 新建歌单'),
         );
       })()) : null;
-      const playRow = (pl) => {
+      const playRow = (pl, mine) => {
+        // 注意：map((pl) => playRow(pl)) 会把数组下标作为第二个参数传入（Array#map 传
+        // (element, index, array)）。这里必须用严格 true 判断「我的歌单」，否则推荐/分类/
+        // 搜索等来源里除第一项外的卡片会把下标当真值，误显示删除按钮。
+        const isMine = mine === true;
         const meta = (pl.trackCount > 0 ? pl.trackCount + ' 首' : '')
           + (pl.playCount ? ' · 播放 ' + fmtCount(pl.playCount) : '');
-        return React.createElement('button', {
+        const card = React.createElement('button', {
           key: pl.id, className: 'dsh-music-playlist-card', title: pl.name + ' - ' + (pl.creator || ''),
-          onClick: () => openPlaylist(pl),
+          onClick: () => openPlaylist(pl, isMine),
         },
           React.createElement('img', {
             className: 'dsh-music-playlist-cover',
@@ -2467,6 +2564,16 @@ window.__ModuleLoader__.load({
             React.createElement('span', { className: 'dsh-music-playlist-name' }, pl.name),
             React.createElement('span', { className: 'dsh-music-playlist-meta' },
               (pl.creator ? pl.creator + ' · ' : '') + meta)));
+        // 「我的歌单」卡片：右上角提供删除按钮（仅本人创建的歌单，「我喜欢」dirId=201 除外）。
+        if (!isMine) return card;
+        const dirId = Number(pl && (pl.dirId || pl.tid || pl.id)) || 0;
+        const deletable = dirId !== 0 && dirId !== 201;
+        return React.createElement('div', { key: pl.id, className: 'dsh-music-qq-mine-card' },
+          card,
+          deletable ? React.createElement('button', {
+            className: 'dsh-music-qq-mine-del', title: '删除歌单「' + pl.name + '」',
+            onClick: (e) => { e.stopPropagation(); deleteMinePlaylist(pl); },
+          }, '✕') : null);
       };
       const catTab = (cat) => React.createElement('button', {
         key: cat.id, className: 'dsh-music-qq-cat' + (curCategory && curCategory.id === cat.id ? ' active' : ''),
@@ -2561,11 +2668,11 @@ window.__ModuleLoader__.load({
               React.createElement('span', { className: 'dsh-music-settings-cur', title: pl.name }, pl.source === '歌单' ? '▸ 歌单：' + pl.name : pl.name),
               React.createElement('span', { className: 'dsh-music-hint' }, (pl.creator ? (pl.creator + ' · ') : '') + ((pl.songs || []).length + ' 首'))),
             pl.description ? React.createElement('p', { className: 'dsh-music-hint' }, pl.description) : null),
-          React.createElement('div', { className: 'dsh-music-qq-body' },
+          React.createElement('div', { className: 'dsh-music-qq-body', ref: qqPlRef },
             plLoading
               ? React.createElement('div', { className: 'dsh-music-hint' }, '加载中…')
               : (pl.songs && pl.songs.length
-                ? React.createElement('div', null, pl.songs.map((song) => songRow(song, pl.songs, pl.name)))
+                ? React.createElement('div', null, pl.songs.map((song) => songRow(song, pl.songs, pl.name, pl.mine)))
                 : React.createElement('div', { className: 'dsh-music-hint' }, '暂无歌曲。'))),
           loginModal,
           qqJoinMenu);
@@ -2599,12 +2706,12 @@ window.__ModuleLoader__.load({
               resultTabBtn('songs', '歌曲'),
               resultTabBtn('playlists', '相关歌单')),
             resultTab === 'playlists'
-              ? React.createElement('div', null, plResults.map(playRow), plMoreBtn)
+              ? React.createElement('div', null, plResults.map((p) => playRow(p)), plMoreBtn)
               : React.createElement('div', null, results.map((song) => songRow(song, results, '搜索结果')), songMoreBtn));
         } else if (hasSongs) {
           resultContent = React.createElement('div', null, results.map((song) => songRow(song, results, '搜索结果')), songMoreBtn);
         } else {
-          resultContent = React.createElement('div', null, plResults.map(playRow), plMoreBtn);
+          resultContent = React.createElement('div', null, plResults.map((p) => playRow(p)), plMoreBtn);
         }
         body = React.createElement('div', null, searchBox,
           searched ? React.createElement('div', null, resultContent) : null);
@@ -2614,7 +2721,7 @@ window.__ModuleLoader__.load({
           const listEl = !mineLoaded
             ? React.createElement('div', { className: 'dsh-music-hint' }, '加载我的歌单…')
             : (minePlays.length > 0
-              ? minePlays.map(playRow)
+              ? minePlays.map((p) => playRow(p, true))
               : React.createElement('div', { className: 'dsh-music-hint' }, '暂无歌单。可到 QQ 音乐 App 创建或收藏歌单后再来查看。'));
           content = React.createElement('div', null, listEl);
           body = React.createElement('div', null, content,
@@ -2636,7 +2743,7 @@ window.__ModuleLoader__.load({
             React.createElement('div', { className: 'dsh-music-qq-cats' }, shownCats.length ? shownCats.map(catTab) : React.createElement('span', { className: 'dsh-music-hint' }, '加载分类中…')),
             catToggle,
             curCategory ? React.createElement('div', null,
-              (catPlays.length ? catPlays.map(playRow) : React.createElement('div', { className: 'dsh-music-hint' }, '该分类暂无歌单。')),
+              (catPlays.length ? catPlays.map((p) => playRow(p)) : React.createElement('div', { className: 'dsh-music-hint' }, '该分类暂无歌单。')),
               catMoreBtn) : null);
           body = React.createElement('div', null, content,
             browseErr ? React.createElement('div', { className: 'dsh-music-error' }, browseErr) : null,
@@ -2644,10 +2751,15 @@ window.__ModuleLoader__.load({
         } else if (browseTab === 'tops') {
           let content;
           if (topDetail) {
-            // 榜单详情：返回 + 歌曲列表。
+            // 榜单详情：返回 + 歌曲列表（支持「加载更多」分页续载）。
             const rows = topDetail.songs && topDetail.songs.length
               ? topDetail.songs.map((song) => songRow(song, topDetail.songs, topDetail.name))
               : React.createElement('div', { className: 'dsh-music-hint' }, '该榜单暂无歌曲。');
+            const moreBtn = topHasMore
+              ? React.createElement('div', { className: 'dsh-music-qq-loadmore' },
+                React.createElement('button', { className: 'dsh-music-qq-loadmore-btn', onClick: loadMoreTopSongs },
+                  topLoadingMore ? '加载中…' : '加载更多'))
+              : null;
             content = React.createElement('div', null,
               React.createElement('button', { className: 'dsh-music-settings-btn ghost', onClick: backToTops }, '← 返回'),
               React.createElement('div', { className: 'dsh-music-qq-topdetail-head' },
@@ -2657,8 +2769,11 @@ window.__ModuleLoader__.load({
                 }) : null,
                 React.createElement('div', null,
                   React.createElement('div', { className: 'dsh-music-playlist-name' }, topDetail.name),
-                  React.createElement('div', { className: 'dsh-music-hint' }, topDetail.updateTime ? '更新于 ' + topDetail.updateTime : ''))),
-              rows);
+                  React.createElement('div', { className: 'dsh-music-hint' },
+                    (topDetail.updateTime ? '更新于 ' + topDetail.updateTime + ' · ' : '')
+                    + (topTotal ? (topDetail.songs || []).length + ' / ' + topTotal + ' 首' : '')))),
+              rows,
+              moreBtn);
           } else {
             const topCards = (tl) => tl.map((t) => {
               const meta = t.listenNum ? ((t.listenNum / 1e4).toFixed(0) + '万收听') : (t.totalNum ? t.totalNum + ' 首' : '');
@@ -2695,7 +2810,7 @@ window.__ModuleLoader__.load({
             browseErr ? React.createElement('div', { className: 'dsh-music-error' }, browseErr) : null,
             browseLoading ? React.createElement('div', { className: 'dsh-music-loading' }, '加载中…') : null);
         } else {
-          const recCards = recommended.length > 0 ? recommended.map(playRow) : React.createElement('div', { className: 'dsh-music-hint' }, '加载推荐歌单…');
+          const recCards = recommended.length > 0 ? recommended.map((p) => playRow(p)) : React.createElement('div', { className: 'dsh-music-hint' }, '加载推荐歌单…');
           const moreBtn = recommended.length > 0 && recHasMore
             ? React.createElement('div', { className: 'dsh-music-qq-loadmore' },
               React.createElement('button', { className: 'dsh-music-qq-loadmore-btn', onClick: loadMoreRecommended },
@@ -2710,7 +2825,7 @@ window.__ModuleLoader__.load({
 
       const head = React.createElement('div', { className: 'dsh-music-qq-head' },
         React.createElement('div', { className: 'dsh-music-qq-toolbar' },
-          React.createElement('button', { className: 'dsh-music-settings-btn ghost', onClick: openQueue }, '进入播放列表'),
+          React.createElement('button', { className: 'dsh-music-settings-btn ghost', onClick: openQueue }, '播放列表'),
           React.createElement('button', { className: 'dsh-music-settings-btn ghost', onClick: logout }, '退出登录')),
         React.createElement('div', { className: 'dsh-music-qq-viewtabs' },
           browseTabBtn('mine', '我的歌单'),
@@ -3446,7 +3561,9 @@ window.__ModuleLoader__.load({
       '.dsh-music-list-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n' +
       '.dsh-music-track { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: none; background: transparent; border-radius: 6px; color: var(--dsw-alias-label-primary, #e6e6e6); cursor: pointer; font-size: 12px; }\n' +
       '.dsh-music-track:hover { background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); }\n' +
-      '.dsh-music-track.active { color: var(--dsh-music-accent, #2f9e6e); }\n' +
+      // 正在播放/选中的条目：填充强调色底 + 强调色文字，让当前条目一眼可见（选中态）。
+      '.dsh-music-track.active { color: var(--dsh-music-accent, #2f9e6e); background: color-mix(in srgb, var(--dsh-music-accent, #2f9e6e) 14%, transparent); }\n' +
+      '.dsh-music-track.active .dsh-music-track-name { font-weight: 600; }\n' +
       '.dsh-music-track-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n' +
       // 在线 QQ 歌曲行：歌名 + 内嵌 VIP 徽标并排，歌名省略、VIP 徽标不省略。
       '.dsh-music-track-name.qq { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; }\n' +
@@ -3455,6 +3572,11 @@ window.__ModuleLoader__.load({
       // 歌单卡片：封面图 + 名称 + 元信息，网格排布。
       '.dsh-music-playlist-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.25)); background: var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.06)); border-radius: 10px; color: var(--dsw-alias-label-primary, #e6e6e6); cursor: pointer; font-size: 12px; }\n' +
       '.dsh-music-playlist-card:hover { border-color: var(--dsh-music-accent, #2f9e6e); background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.05)); }\n' +
+      // 「我的歌单」卡片：外层相对定位，右上角删除按钮悬浮。
+      '.dsh-music-qq-mine-card { position: relative; }\n' +
+      '.dsh-music-qq-mine-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; line-height: 18px; padding: 0; text-align: center; border-radius: 50%; border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.35)); background: var(--dsw-alias-bg-overlay, rgba(0,0,0,0.55)); color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 11px; opacity: 0; transition: opacity 0.15s; }\n' +
+      '.dsh-music-qq-mine-card:hover .dsh-music-qq-mine-del { opacity: 1; }\n' +
+      '.dsh-music-qq-mine-del:hover { color: #fff; background: #c9352c; border-color: #c9352c; }\n' +
       '.dsh-music-playlist-cover { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); }\n' +
       '.dsh-music-playlist-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n' +
       '.dsh-music-playlist-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }\n' +
@@ -3570,7 +3692,8 @@ window.__ModuleLoader__.load({
       '.dsh-music-toc-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }\n' +
       '.dsh-music-toc-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 8px; border: none; background: transparent; border-radius: 6px; color: var(--dsw-alias-label-primary, #e6e6e6); cursor: pointer; font-size: 12px; }\n' +
       '.dsh-music-toc-item:hover { background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); }\n' +
-      '.dsh-music-toc-item.active { color: var(--dsh-music-accent, #2f9e6e); }\n' +
+      '.dsh-music-toc-item.active { color: var(--dsh-music-accent, #2f9e6e); background: color-mix(in srgb, var(--dsh-music-accent, #2f9e6e) 14%, transparent); }\n' +
+      '.dsh-music-toc-item.active .dsh-music-toc-heading { font-weight: 600; }\n' +
       '.dsh-music-toc-type { flex: none; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.08)); color: var(--dsw-alias-label-secondary, #8a8f98); }\n' +
       '.dsh-music-toc-item.active .dsh-music-toc-type { background: var(--dsh-music-accent, #2f9e6e); color: var(--dsh-music-accent-fg, #fff); }\n' +
       '.dsh-music-toc-heading { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n' +
@@ -3588,7 +3711,9 @@ window.__ModuleLoader__.load({
       '.dsh-music-playlist-missing { flex: none; margin-left: auto; font-size: 11px; color: var(--dsw-alias-state-warn-primary, #d9a441); }\n' +
       '.dsh-music-playlist-row { display: flex; align-items: center; gap: 4px; }\n' +
       '.dsh-music-playlist-row .dsh-music-track { flex: 1; min-width: 0; }\n' +
-      '.dsh-music-playlist-row.active .dsh-music-track { color: var(--dsh-music-accent, #2f9e6e); }\n' +
+      '.dsh-music-playlist-row.active { border-radius: 6px; background: color-mix(in srgb, var(--dsh-music-accent, #2f9e6e) 14%, transparent); }\n' +
+      '.dsh-music-playlist-row.active .dsh-music-track { color: var(--dsh-music-accent, #2f9e6e); background: transparent; }\n' +
+      '.dsh-music-playlist-row.active .dsh-music-track-name { font-weight: 600; }\n' +
       '.dsh-music-playlist-mini { flex: none; width: 20px; height: 20px; padding: 0; border: none; background: transparent; border-radius: 4px; color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 12px; line-height: 1; }\n' +
       '.dsh-music-playlist-mini:hover { background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); color: var(--dsh-music-accent, #2f9e6e); }\n' +
       '.dsh-music-playlist-mini.del:hover { color: var(--dsw-alias-state-error-primary, #e5534b); }\n' +
@@ -3601,8 +3726,12 @@ window.__ModuleLoader__.load({
       // 曲库每行：track 按钮 + 行尾「＋」（加入歌单）
       '.dsh-music-track-row { display: flex; align-items: center; gap: 4px; }\n' +
       '.dsh-music-track-row .dsh-music-track { flex: 1; min-width: 0; }\n' +
-      '.dsh-music-track-row.active .dsh-music-track { color: var(--dsh-music-accent, #2f9e6e); }\n' +
+      '.dsh-music-track-row.active { border-radius: 6px; background: color-mix(in srgb, var(--dsh-music-accent, #2f9e6e) 14%, transparent); }\n' +
+      '.dsh-music-track-row.active .dsh-music-track { color: var(--dsh-music-accent, #2f9e6e); background: transparent; }\n' +
+      '.dsh-music-track-row.active .dsh-music-track-name { font-weight: 600; }\n' +
       '.dsh-music-playlist-mini.add { color: var(--dsh-music-accent, #2f9e6e); }\n' +
+      '.dsh-music-playlist-mini.remove { color: var(--dsh-music-accent, #2f9e6e); }\n' +
+      '.dsh-music-playlist-mini.remove:hover { color: var(--dsw-alias-state-error-primary, #e5534b); }\n' +
       '.dsh-music-add-pop { position: fixed; z-index: 1200; min-width: 150px; max-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--dsw-alias-bg-overlay, #1e1f22); border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.35)); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }\n' +
       '.dsh-music-add-pop-item { display: block; width: 100%; text-align: left; padding: 5px 8px; border: none; background: transparent; border-radius: 6px; color: var(--dsw-alias-label-primary, #e6e6e6); cursor: pointer; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n' +
       '.dsh-music-add-pop-item:hover { background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); color: var(--dsh-music-accent, #2f9e6e); }\n' +

package/lib/index.js

@@ -1698,6 +1698,19 @@ export function apply(ctx) {
         } catch (err) { writeJson(res, { ok: false, error: String((err && err.message) || err) }, 502) }
         return
       }
+      // 从歌单移除歌曲（DelSonglist）；「我喜欢」也是 dirId=201，同在列。
+      if (pathname === '/dsh-music/qq/playlist-remove' && req.method === 'POST') {
+        const body = await readBody(req)
+        const song = (body && body.song) || {}
+        const dirId = Number((body && body.dirId)) || 0
+        const tid = Number((body && body.tid)) || 0
+        await loadQQCookie()
+        try {
+          const ok = await QQ.deleteSongFromPlaylist(song, dirId, tid, qq.cookie)
+          writeJson(res, { ok })
+        } catch (err) { writeJson(res, { ok: false, error: String((err && err.message) || err) }, 502) }
+        return
+      }
       // 创建自建歌单（DirCreate），返回新歌单 id/name。
       if (pathname === '/dsh-music/qq/playlist-create' && req.method === 'POST') {
         const body = await readBody(req)
@@ -1710,6 +1723,18 @@ export function apply(ctx) {
         } catch (err) { writeJson(res, { ok: false, error: String((err && err.message) || err) }, 502) }
         return
       }
+      // 删除自建歌单（DelPlaylist / PlaylistBaseWrite）。仅限本人创建的歌单；「我喜欢」不可删。
+      if (pathname === '/dsh-music/qq/playlist-delete' && req.method === 'POST') {
+        const body = await readBody(req)
+        const dirId = Number((body && body.dirId)) || 0
+        if (!dirId) { writeJson(res, { ok: false, error: '缺少歌单 dirId' }, 400); return }
+        await loadQQCookie()
+        try {
+          const ok = await QQ.deletePlaylist(dirId, qq.cookie)
+          writeJson(res, { ok })
+        } catch (err) { writeJson(res, { ok: false, error: String((err && err.message) || err) }, 502) }
+        return
+      }
       // 获取「我喜欢」已收藏歌曲的 songid + songmid 列表（供播放时判断当前曲目是否已收藏）。
       if (pathname === '/dsh-music/qq/liked' && req.method === 'GET') {
         await loadQQCookie()
@@ -1739,8 +1764,10 @@ export function apply(ctx) {
       if (pathname === '/dsh-music/qq/top-songs' && req.method === 'GET') {
         const topId = (url.searchParams.get('topId') || '').trim()
         if (!/^[0-9]+$/.test(topId)) { writeJson(res, { ok: false, error: 'bad topId' }, 400); return }
+        const offset = parseInt(url.searchParams.get('offset') || '0', 10)
+        const num = parseInt(url.searchParams.get('num') || '30', 10)
         await loadQQCookie()
-        try { writeJson(res, { ok: true, toplist: await QQ.getTopListSongs(topId, qq.cookie) }) }
+        try { writeJson(res, { ok: true, toplist: await QQ.getTopListSongs(topId, qq.cookie, Number.isFinite(offset) ? offset : 0, Number.isFinite(num) ? num : 30) }) }
         catch (err) { writeJson(res, { ok: false, error: String((err && err.message) || err) }, 502) }
         return
       }

package/lib/qq.js

@@ -613,6 +613,20 @@ export async function addSongToPlaylist(song, dirId, tid = 0, cookie = '') {
   return true
 }
 
+// 把歌曲从某个歌单移除（DelSonglist）。「我喜欢」也是 dirId=201，同在列。
+// tid 固定 0 即可（与 addSongToPlaylist 一致）。
+export async function deleteSongFromPlaylist(song, dirId, tid = 0, cookie = '') {
+  const songId = Number(song.songid) || 0
+  if (!songId) throw new Error('缺少歌曲 songid，无法从歌单移除')
+  await playlistDetailWrite('DelSonglist', {
+    dirId: Number(dirId) || 0,
+    tid: Number(tid) || 0,
+    bFmtUtf8: true,
+    v_songInfo: [{ songId, songType: Number(song.songtype) || 0 }],
+  }, cookie)
+  return true
+}
+
 // 创建自建歌单（AddPlaylist / PlaylistBaseWrite），返回 { id, name }。
 // AddPlaylist 响应把新歌单信息嵌套在 data.result 下（dirId/dirName/tid）。
 export async function createPlaylist(name, cookie = '') {
@@ -624,6 +638,17 @@ export async function createPlaylist(name, cookie = '') {
   return { id, name: dec(result.dirName || result.dirname || result.name || dirName) }
 }
 
+// 删除自建歌单（DelPlaylist / PlaylistBaseWrite）。dirId = 该歌单的目录 id。
+// 只能删除本人创建的歌单；「我喜欢」（dirId=201）不允许删除，由前端隐藏入口。
+// DelPlaylist 响应把结果嵌套在 data.result 下；成功返回 true，失败抛错。
+export async function deletePlaylist(dirId, cookie = '') {
+  const id = Number(dirId) || 0
+  if (!id) throw new Error('缺少歌单 dirId，无法删除')
+  if (id === 201) throw new Error('「我喜欢」不可删除')
+  await playlistDetailWrite('DelPlaylist', { dirId: id }, cookie, 'music.musicasset.PlaylistBaseWrite')
+  return true
+}
+
 // 获取「我喜欢」（dirid=201）里已收藏歌曲的 songid + songmid 集合，用于播放时判断当前曲目是否已收藏。
 // 返回 { ids: number[], mids: string[] }——songmid 是稳定字符串标识，避免 songid 大整数/类型不一致导致匹配失败。
 export async function getQQFavIds(cookie = '') {
@@ -705,31 +730,39 @@ export async function getTopLists(cookie = '') {
 }
 
 // 排行榜详情歌曲。匿名可用；返回带 songmid 的歌曲对象（可直接播放）。
-export async function getTopListSongs(topId, cookie = '') {
-  const p = new URLSearchParams()
-  p.set('topid', String(topId)); p.set('page', 'detail'); p.set('type', 'top'); p.set('tpl', '3')
-  p.set('song_num', '30'); p.set('format', 'json')
-  const apiURL = `https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?${p.toString()}`
-  const res = await fetchWithTimeout(apiURL, { headers: { 'User-Agent': UA, 'Referer': 'https://y.qq.com/', ...(cookie ? { Cookie: cookie } : {}) } })
-  let text = await res.text()
-  if (text.trimStart().startsWith('MusicJsonCallback(')) { const i = text.indexOf('('); const e = text.lastIndexOf(')'); text = text.slice(i + 1, e) }
-  const j = JSON.parse(text)
-  const list = (j.songlist || []).map((x) => {
-    const s = (x && x.data) || x || {}
+// 用 musicu 的 music.musicToplist.Toplist/GetDetail 分页取数：offset/num 支持翻页，
+// 可加载更多（旧版 fcg_v8_toplist_cp.fcg 无法翻页且最多只返回 50 首）。
+// 返回 { id, name, cover, updateTime, total, hasMore, songs }。
+export async function getTopListSongs(topId, cookie = '', offset = 0, num = 30) {
+  const off = Math.max(0, parseInt(offset, 10) || 0)
+  const size = Math.max(1, Math.min(50, parseInt(num, 10) || 30))
+  const body = {
+    comm: { ct: 24, cv: 0, format: 'json', platform: 'yqq.json', needNewCode: 1 },
+    req_0: { module: 'music.musicToplist.Toplist', method: 'GetDetail', param: { topId: Number(topId), offset: off, num: size, withTags: true } },
+  }
+  const j = await postMusicu(body, cookie)
+  const res = j.req_0 || j['music.musicToplist.Toplist']
+  if (!res || Number(res.code) !== 0) throw new Error('获取榜单失败：' + ((res && (res.message || res.msg)) || ('code ' + (res && res.code))))
+  const data = (res.data && res.data.data) || {}
+  const list = (res.data && Array.isArray(res.data.songInfoList) ? res.data.songInfoList : []).map((x) => {
+    const s = (x && x.songInfo) || x || {}
     return {
-      id: s.songmid, songmid: s.songmid, title: dec(s.songname || s.name || ''),
-      songid: s.songid, songtype: s.songtype || 0,
+      id: s.mid, songmid: s.mid, title: dec(s.name || s.title || ''),
+      songid: s.id || s.songid, songtype: s.type || s.songtype || 0,
       artists: (s.singer || []).map((v) => dec(v.name)),
-      album: dec(s.albumname), interval: s.interval,
-      payplay: s.pay ? s.pay.payplay : 0, source: 'qq',
-      rank: x && typeof x === 'object' && 'rank' in x ? x.rank : 0,
+      album: s.album ? dec(s.album.name || '') : '', interval: s.interval,
+      payplay: (s.pay && (s.pay.payplay || s.pay.pay_play)) || 0, source: 'qq',
     }
   }).filter((s) => s.songmid)
+  const total = Number(data.totalNum) || list.length
   return {
     id: String(topId),
-    name: dec((j.topinfo && (j.topinfo.ListName || j.topinfo.title)) || j.topTitle || ''),
-    intro: dec((j.topinfo && (j.topinfo.info || j.topinfo.intro)) || ''),
-    updateTime: j.date || '', total: j.total_song_num || list.length,
+    name: dec(data.title || ''),
+    cover: httpsCover((data.headPicUrl || data.frontPicUrl || '').replace(/R[0-9]+x[0-9]+/, 'R300x300')),
+    intro: dec(data.intro || ''),
+    updateTime: data.updateTime || data.period || '',
+    total,
+    hasMore: off + list.length < total,
     songs: list,
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-player",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "DeepSeek Harness 本地音乐 + AI 讲书插件：Host 扫描音乐目录并以 HTTP 流式提供音频、解析 .txt 小说结构并经 MiMo TTS 合成朗读，浏览器侧提供播放条/播放面板/章节目录跳转/多声音选择/实时频谱，并注册 music_play 模型工具",
   "type": "module",
   "main": "lib/index.js",