dsh-music-player 0.6.5 → 0.6.6

package/lib/client.js

@@ -169,6 +169,10 @@ window.__ModuleLoader__.load({
     const PREF_QQ_FAV = 'dsh-music-qq-fav'; // QQ「我喜欢」收藏 songid/songmid（Host 兜底）
     const PREF_QQ_HISTORY = 'dsh-music-qq-history'; // QQ 搜索历史（最近在前，最多 10 条）
     const PREF_QQ_UI = 'dsh-music-qq-ui';           // QQ 面板所在层/歌单 UI 状态
+    const PREF_SHOW_LYRIC = 'dsh-music-show-lyric';   // 播放条歌词显示开关（默认开）
+    const PREF_SHOW_VIZ = 'dsh-music-show-viz';       // 播放条频谱显示开关（默认开）
+    const PREF_SHOW_PROGRESS = 'dsh-music-show-progress'; // 播放条进度条显示开关（默认开）
+    const PREF_IMMERSE = 'dsh-music-immerse';         // 沉浸感：播放条闲置态透明度 0..1（默认 0.5）
     // Legacy single-book progress key (pre-0.2.1); migrated into the per-book
     // map on upgrade so very old browser copies are not silently dropped.
     const PREF_LEGACY_BOOK = 'dsh-music-book-playback';
@@ -177,6 +181,7 @@ window.__ModuleLoader__.load({
     const PREF_KEYS = new Set([
       PREF_MODE, PREF_VOL, PREF_VOICE, PREF_SCOPE, PREF_PANEL_POS,
       PREF_PLAYBACK, PREF_BOOKS_PLAYBACK, PREF_QQ_FAV, PREF_QQ_HISTORY, PREF_QQ_UI,
+      PREF_SHOW_LYRIC, PREF_SHOW_VIZ, PREF_SHOW_PROGRESS, PREF_IMMERSE,
     ]);
     let serverPrefs = null;          // null = Host snapshot not fetched yet
     let serverPrefsFetched = false;  // distinguishes "not fetched" from an early savePref
@@ -333,6 +338,16 @@ window.__ModuleLoader__.load({
         if (Number.isFinite(v)) { store.volume = Math.min(1, Math.max(0, v)); audio.volume = store.volume; }
         const voice = loadPref(PREF_VOICE);
         if (typeof voice === 'string' && voice !== '') store.voice = voice;
+        // 系统配置开关：默认开启（缺省即 true）。
+        const showLyric = loadPref(PREF_SHOW_LYRIC);
+        if (showLyric === '0') store.showLyric = false;
+        const showViz = loadPref(PREF_SHOW_VIZ);
+        if (showViz === '0') store.showViz = false;
+        const showProgress = loadPref(PREF_SHOW_PROGRESS);
+        if (showProgress === '0') store.showProgress = false;
+        // 沉浸感：0..1，缺省 0.5。钳制到合法区间防止脏数据。
+        const immerse = parseFloat(loadPref(PREF_IMMERSE));
+        if (Number.isFinite(immerse)) store.immerse = Math.min(1, Math.max(0, immerse));
       } catch (e) {}
     }
     // ---- per-book novel progress (independent from music) ----
@@ -377,7 +392,7 @@ window.__ModuleLoader__.load({
     }
     // Playback-panel geometry: default CSS width (must match .dsh-music-panel),
     // resize bounds, and the viewport-height fraction cap when user-resized.
-    const PANEL_W = 460;
+    const PANEL_W = 600;
     const PANEL_MIN_W = 320;
     const PANEL_MAX_W = 720;
     const PANEL_MIN_H = 200;
@@ -475,6 +490,10 @@ window.__ModuleLoader__.load({
       // 歌词/字幕：当前行文本（音乐 = 当前歌词行，讲书 = 当前句子）。空串 = 无歌词
       // 不渲染。播放条"频谱后、时长前"位置、仅非使用态显示。
       lyricText: '',
+      // 系统配置：播放条歌词 / 频谱 / 进度条显示开关（默认开启，存 Host prefs）。
+      showLyric: true, showViz: true, showProgress: true,
+      // 沉浸感：播放条闲置态透明度（0..1，默认 0.5），存 Host prefs。
+      immerse: 0.5,
       // 播放模式弹层是否打开（portal 到 body 时让播放条按钮保持展开、不因移出而收起）。
       modeMenuOpen: false,
       // AI 讲书 TTS voice: available voices come from /manifest, the selection
@@ -505,6 +524,10 @@ window.__ModuleLoader__.load({
       if ('volume' in patch) savePref(PREF_VOL, String(patch.volume));
       if ('voice' in patch) savePref(PREF_VOICE, patch.voice);
       if ('scope' in patch) savePref(PREF_SCOPE, JSON.stringify(patch.scope));
+      if ('showLyric' in patch) savePref(PREF_SHOW_LYRIC, patch.showLyric ? '1' : '0');
+      if ('showViz' in patch) savePref(PREF_SHOW_VIZ, patch.showViz ? '1' : '0');
+      if ('showProgress' in patch) savePref(PREF_SHOW_PROGRESS, patch.showProgress ? '1' : '0');
+      if ('immerse' in patch) savePref(PREF_IMMERSE, String(Math.min(1, Math.max(0, patch.immerse))));
       for (const fn of [...listeners]) fn();
     }
     function useStore() {
@@ -1862,6 +1885,11 @@ window.__ModuleLoader__.load({
         const url = bookUrl(id, from);
         if (url === null) { clearStuck(); failBook('书籍信息缺失'); return; }
         bookFromRef = from;
+        // 与音乐切歌（startPlay）一致：先拆除旧的实时频谱监听（captureStream 探针），
+        // 再切换到讲书块。音乐播放时建立的探针挂在同一个 <audio> 上，若不拆除，切换到
+        // 需要冷合成的讲书块时媒体流水线会冲突（响一下→没声音、字幕冻住/输出失败）。
+        // 切块后 onPlaying 会为当前块重新建立探针，频谱不受影响。
+        closeLiveViz();
         audio.src = url;
         audio.load();
         // 讲书实时字幕：拉取当前块文本并按句切分，随播放推进逐句显示。
@@ -1974,6 +2002,8 @@ window.__ModuleLoader__.load({
           const id = currentBookId();
           const chunkUrl = bookUrl(id, bookFromRef);
           if (chunkUrl !== null && audio.currentSrc !== new URL(chunkUrl, window.location.href).href) {
+            // 同样先拆除旧实时频谱监听再切换 src，避免音乐探针残留导致讲书输出冲突。
+            closeLiveViz();
             audio.src = chunkUrl;
             audio.load();
           }
@@ -2873,6 +2903,9 @@ window.__ModuleLoader__.load({
       // 无内容（点击停止 / 插件刚安装）时恒定工作态：不透明度 100%、控件组展开，无任何特效。
       const active = barHover || anyPopOpen || !hasTrack;
       const barDimmed = !active;
+      // 沉浸感由系统配置驱动：数值越大越「沉浸」（播放条越透明融入背景）。
+      // 传给播放条的 opacity 是 1-immersee：沉浸 0% → 不透明(1)，沉浸 100% → 全透明(0)。
+      const barStyle = { '--dsh-music-immerse': String(1 - s.immerse) };
       // 播放进度细线：音乐按 position/duration（单曲时长），讲书按「已读字符/全书字符」
       // 的 bookProgress——全书总时长在合成本书前不可知，用时长占比会切块回退，字符占比
       // 才稳定且只增不减。
@@ -2881,15 +2914,15 @@ window.__ModuleLoader__.load({
         : ((hasTrack && s.duration > 0) ? Math.min(100, Math.max(0, (s.position / s.duration) * 100)) : 0);
       return React.createElement('div', { className: 'dsh-music-bar-wrap' },
         React.createElement('div',
-          { className: 'dsh-music-bar' + (isBook ? ' book' : '') + (barDimmed ? ' dimmed' : ''), onMouseEnter: showBarBtns, onMouseLeave: onBarLeave },
+          { className: 'dsh-music-bar' + (isBook ? ' book' : '') + (barDimmed ? ' dimmed' : ''), style: barStyle, onMouseEnter: showBarBtns, onMouseLeave: onBarLeave },
           hasTrack
             ? React.createElement('span', { className: 'dsh-music-bar-name', title: displayName + (artistText ? ' - ' + artistText : '') + (chapterEl ? ' - ' + s.currentSection : '') }, note, ' ', displayName, artistEl, sourceBadge, localQualityBadge, chapterEl, afterName)
             : React.createElement('span', { className: 'dsh-music-bar-idle' }, note, ' DSH音乐播放器'),
-          !isBook && hasTrack && s.playing ? React.createElement('canvas', { className: 'dsh-music-viz', width: 60, height: 20, ref: (el) => { barCanvasNode = el; } }) : null,
+          !isBook && hasTrack && s.playing && s.showViz ? React.createElement('canvas', { className: 'dsh-music-viz', width: 60, height: 20, ref: (el) => { barCanvasNode = el; } }) : null,
           vizBadge,
           // 歌词/字幕：位于频谱之后、时长之前；仅"非使用态"（控件组已折叠、播放条
           // 半透明）显示——正在操作时收起，不给滑入的按钮组让路。
-          s.lyricText && barDimmed && hasTrack
+          s.lyricText && barDimmed && hasTrack && s.showLyric
             ? React.createElement('span', { className: 'dsh-music-bar-lyric', title: s.lyricText }, s.lyricText)
             : null,
           // 时长 + 右侧控制按钮是一个组合：右对齐（margin-left:auto）。鼠标进入播放条
@@ -2958,7 +2991,7 @@ window.__ModuleLoader__.load({
           )) : null,
           // 播放进度细线：绝对定位在播放条底部，与播放条等宽、高约 1px，随播放实时填充。
           // 音乐按单曲时长，讲书按「已读字符/全书字符」的 bookProgress（见 progressPct）。
-          hasTrack && (isBook || s.duration > 0)
+          hasTrack && (isBook || s.duration > 0) && s.showProgress
             ? React.createElement('div', { className: 'dsh-music-bar-progress' },
                 React.createElement('div', { className: 'dsh-music-bar-progress-fill', style: { width: progressPct + '%' } }))
             : null,
@@ -4227,24 +4260,32 @@ window.__ModuleLoader__.load({
       const listBody = React.createElement('div', { className: 'dsh-music-list-body' },
         React.createElement('div', { style: paneStyle('music') }, musicBody),
         React.createElement('div', { className: 'dsh-music-qq-pane', style: paneStyle('qq') }, React.createElement(QQOnlinePanel, { panelRef })),
-        React.createElement('div', { style: paneStyle('book') }, bookEmptyBody));
+        React.createElement('div', { style: paneStyle('book') }, bookEmptyBody),
+        React.createElement('div', { style: paneStyle('config') }, React.createElement(SystemSetting, null)));
       return React.createElement('div', { className: 'dsh-music-panel', ref: panelRef, style: rootStyle },
         React.createElement('div', {
           className: 'dsh-music-panel-head dsh-music-panel-drag',
           onPointerDown: onHeadDown, onPointerMove: onHeadMove, onPointerUp: onHeadUp,
         },
           React.createElement('span', { className: 'dsh-music-panel-grip', 'aria-hidden': true }, '⠿'),
-          React.createElement('span', { className: 'dsh-music-panel-title' }, '播放列表'),
+          React.createElement('span', { className: 'dsh-music-panel-title' }, 'DeepSeek Harness 音乐播放器'),
           React.createElement('button', { className: 'dsh-music-icon-btn', title: '关闭', onClick: () => set({ panelOpen: false }) }, '✕')),
-        React.createElement('div', { className: 'dsh-music-tabs' }, tabBtn('music', '本地音乐'), tabBtn('qq', 'QQ音乐'), tabBtn('book', 'AI讲书')),
-        s.tab === 'qq' ? null : React.createElement(DirectorySetting, { panelRef }),
-        s.tab === 'music' ? musicSubTabs : null,
-        // While a novel is playing, keep music-only errors/scanning out of the
-        // panel (novel status shows on the playback bar instead).
-        // 音乐/小说统一在主列表区上方显示 error（设置块不再重复/分模式显示）。
-        s.error ? React.createElement('div', { className: 'dsh-music-error' }, s.error) : null,
-        !isBook && s.loading ? React.createElement('div', { className: 'dsh-music-loading' }, '扫描中…') : null,
-        React.createElement('div', { className: 'dsh-music-list', style: pos === null ? null : { maxHeight: 'none' }, ref: (el) => { listRef.current = el; } }, listBody),
+        React.createElement('div', { className: 'dsh-music-panel-body' },
+          // Tab 标签竖排在窗口左侧（侧边栏），内容区在其右侧。
+          React.createElement('div', { className: 'dsh-music-tabs' },
+            tabBtn('music', '本地音乐'), tabBtn('qq', 'QQ音乐'), tabBtn('book', 'AI讲书'), tabBtn('config', '系统配置')),
+          React.createElement('div', { className: 'dsh-music-panel-content' },
+            s.tab === 'qq' || s.tab === 'config' ? null : React.createElement(DirectorySetting, { panelRef }),
+            s.tab === 'music' ? musicSubTabs : null,
+            // While a novel is playing, keep music-only errors/scanning out of the
+            // panel (novel status shows on the playback bar instead).
+            // 音乐/小说统一在主列表区上方显示 error（设置块不再重复/分模式显示）。
+            // 系统配置页不显示曲库扫描相关的错误/加载提示。
+            s.error && s.tab !== 'config' ? React.createElement('div', { className: 'dsh-music-error' }, s.error) : null,
+            !isBook && s.tab !== 'config' && s.loading ? React.createElement('div', { className: 'dsh-music-loading' }, '扫描中…') : null,
+            React.createElement('div', { className: 'dsh-music-list', style: pos === null ? null : { maxHeight: 'none' }, ref: (el) => { listRef.current = el; } }, listBody),
+          ),
+        ),
         React.createElement('div', { className: 'dsh-music-resize', title: '拖动调整面板大小', onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp }),
         addMenu ? React.createElement(AddToPlaylistMenu, {
           track: addMenu.track, anchor: { x: addMenu.x, y: addMenu.y },
@@ -4409,6 +4450,40 @@ window.__ModuleLoader__.load({
         saveRoot(p, isBook ? 'book' : 'music');
       }
     }
+    // 系统配置面板（「系统配置」tab）：播放条歌词 / 频谱显示开关，持久化到 Host prefs。
+    function SystemSetting() {
+      const s = useStore();
+      // 通用开关行：右侧一个开关按钮，点击切换并保存。
+      const toggleRow = (label, desc, value, onChange) => React.createElement('div', { className: 'dsh-music-config-row' },
+        React.createElement('div', { className: 'dsh-music-config-info' },
+          React.createElement('span', { className: 'dsh-music-config-label' }, label),
+          desc ? React.createElement('span', { className: 'dsh-music-config-desc' }, desc) : null),
+        React.createElement('button', {
+          className: 'dsh-music-toggle' + (value ? ' on' : ''),
+          role: 'switch',
+          'aria-checked': value,
+          onClick: () => onChange(!value),
+        }, React.createElement('span', { className: 'dsh-music-toggle-knob' })));
+      // 沉浸感：鼠标移出后播放条变半透明、与背景融合。拖动滑块调节透明度。
+      const immersePct = Math.round(s.immerse * 100);
+      const immerseRow = React.createElement('div', { className: 'dsh-music-config-row' },
+        React.createElement('div', { className: 'dsh-music-config-info' },
+          React.createElement('span', { className: 'dsh-music-config-label' }, '沉浸感'),
+          React.createElement('span', { className: 'dsh-music-config-desc' }, '鼠标移出后播放条透明度、与背景融合程度')),
+        React.createElement('div', { className: 'dsh-music-config-slider' },
+          React.createElement('input', {
+            className: 'dsh-music-config-range', type: 'range', min: 0, max: 100, step: 5,
+            value: immersePct,
+            onChange: (e) => set({ immerse: Number(e.target.value) / 100 }),
+          }),
+          React.createElement('span', { className: 'dsh-music-config-val' }, immersePct + '%')));
+      return React.createElement('div', { className: 'dsh-music-config' },
+        toggleRow('歌词显示', '播放条上显示当前歌词 / 讲书字幕', s.showLyric, (v) => set({ showLyric: v })),
+        toggleRow('频谱显示', '播放条上显示实时音频频谱', s.showViz, (v) => set({ showViz: v })),
+        toggleRow('进度条显示', '播放条底部显示播放进度条（音乐 / 讲书）', s.showProgress, (v) => set({ showProgress: v })),
+        immerseRow,
+      );
+    }
     // 「加入歌单」弹层：曲库每行「＋」点击后出现，列出所有歌单（含我最喜欢）并可新建。
     // 用 fixed 定位（锚点为按钮视口坐标），避免被面板滚动列表裁剪。
     function AddToPlaylistMenu({ track, anchor, onClose }) {
@@ -4730,7 +4805,7 @@ window.__ModuleLoader__.load({
       'body { --dsh-music-accent: var(--dsw-alias-brand-primary, #2f9e6e); --dsh-music-accent-fg: var(--dsw-alias-label-primary-foreground, #fff); }\n' +
       '.dsh-music-bar-wrap { box-sizing: border-box; width: 100%; padding: 0 var(--dsh-composer-side-clearance, 16px); }\n' +
       '.dsh-music-bar { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; max-width: var(--dsh-composer-card-max-width, 780px); margin: 0 auto; padding: 4px 10px; font-size: 12px; color: var(--dsw-alias-label-secondary, #8a8f98); background: var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.04)); border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.2)); border-radius: 8px; cursor: default; user-select: none; position: relative; overflow: hidden; transition: opacity 0.3s ease; }\n' +
-      '.dsh-music-bar.dimmed { opacity: 0.5; }\n' +
+      '.dsh-music-bar.dimmed { opacity: var(--dsh-music-immerse, 0.5); }\n' +
       // 播放进度细线：绝对定位在播放条底部（占满其宽度），高 1px、视觉上是一条细线；
       // 轨道用低透明度衬底色，填充部分用主题色，随 position/duration 实时前进
       // （宽度 0.12s 平滑过渡）。播放条容器已 overflow:hidden，细线两端会被裁剪到
@@ -4788,15 +4863,24 @@ window.__ModuleLoader__.load({
       '.dsh-music-bar .dsh-music-mode-trigger { width: 24px; height: 24px; }\n' +
       '.dsh-music-bar .dsh-music-mode-trigger svg { flex: none; }\n' +
       '.dsh-music-bar .dsh-music-mode-menu { align-self: center; }\n' +
-      '.dsh-music-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; max-height: 72vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--dsw-alias-bg-overlay, #1e1f22); border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.35)); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); color: var(--dsw-alias-label-primary, #e6e6e6); font-size: 13px; z-index: 1000; pointer-events: auto; overflow: hidden; }\n' +
+      '.dsh-music-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; max-height: 72vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--dsw-alias-bg-overlay, #1e1f22); border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.35)); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); color: var(--dsw-alias-label-primary, #e6e6e6); font-size: 13px; z-index: 1000; pointer-events: auto; overflow: hidden; }\n' +
       '.dsh-music-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; z-index: 5; }\n' +
       '.dsh-music-resize::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 5px; height: 5px; border-right: 2px solid var(--dsw-alias-label-secondary, #8a8f98); border-bottom: 2px solid var(--dsw-alias-label-secondary, #8a8f98); opacity: 0.7; }\n' +
       '.dsh-music-resize:hover::after { opacity: 1; }\n' +
       '.dsh-music-panel-head { display: flex; align-items: center; gap: 6px; }\n' +
-      '.dsh-music-tabs { display: flex; gap: 4px; }\n' +
-      '.dsh-music-tab { flex: 1; padding: 5px 0; border: none; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 12px; }\n' +
-      '.dsh-music-tab:hover { background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); }\n' +
-      '.dsh-music-tab.active { background: var(--dsh-music-accent, #2f9e6e); color: var(--dsh-music-accent-fg, #fff); }\n' +
+      // 面板主体：左右布局——左侧 Tab 侧边栏，右侧内容区。两侧紧贴（gap:0），
+      // 选中 tab 就能与内容区无缝连成整体。
+      '.dsh-music-panel-body { display: flex; flex-direction: row; gap: 0; flex: 1; min-height: 0; }\n' +
+      // 内容区：不设背景，透出面板自然底色；与左侧深色侧边栏靠明暗对比区分。
+      '.dsh-music-panel-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-left: 12px; }\n' +
+      // Tab 标签竖排在窗口左侧（侧边栏）：背景比右侧略深。左右无内边距保证
+      // 选中项撑满整列并与内容区无缝连接；上下内边距加大，让标签组与上方标题、
+      // 下方边缘留出呼吸空间。
+      '.dsh-music-tabs { display: flex; flex-direction: column; gap: 4px; flex: none; width: 88px; padding: 48px 0; background: rgba(0,0,0,0.28); }\n' +
+      '.dsh-music-tab { flex: none; width: 100%; padding: 16px 8px; border: none; background: transparent; color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 12px; }\n' +
+      // 选中的 tab：用面板底色填充，与右侧透明内容区同色、右缘直通（无缝隙）连成整体；
+      // 左缘一条强调色竖条 + 加粗，指示当前所在项。
+      '.dsh-music-tab.active { background: var(--dsw-alias-bg-overlay, #1e1f22); color: var(--dsw-alias-label-primary, #e6e6e6); font-weight: 600; box-shadow: inset 3px 0 0 var(--dsh-music-accent, #2f9e6e); }\n' +
       '.dsh-music-panel-drag { cursor: move; touch-action: none; user-select: none; }\n' +
       '.dsh-music-panel-grip { color: var(--dsw-alias-label-secondary, #8a8f98); font-size: 12px; letter-spacing: -1px; opacity: 0.7; }\n' +
       '.dsh-music-panel-title { font-weight: 600; margin-right: auto; }\n' +
@@ -4849,6 +4933,23 @@ window.__ModuleLoader__.load({
       '.dsh-music-empty { padding: 12px; text-align: center; color: var(--dsw-alias-label-secondary, #8a8f98); font-size: 12px; }\n' +
       '.dsh-music-error { color: var(--dsw-alias-state-error-primary, #e5534b); font-size: 12px; }\n' +
       '.dsh-music-loading { color: var(--dsw-alias-label-secondary, #8a8f98); font-size: 12px; }\n' +
+      // 系统配置面板：开关行（标签 + 描述 + 右侧开关）。
+      '.dsh-music-config { display: flex; flex-direction: column; gap: 12px; }\n' +
+      '.dsh-music-config-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.25)); border-radius: 8px; background: var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.04)); }\n' +
+      '.dsh-music-config-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n' +
+      '.dsh-music-config-label { color: var(--dsw-alias-label-primary, #e6e6e6); font-size: 13px; font-weight: 600; }\n' +
+      '.dsh-music-config-desc { color: var(--dsw-alias-label-secondary, #8a8f98); font-size: 11px; }\n' +
+      // 开关：右侧胶囊。用固定强调色而非随主题反转的 brand-primary，
+      // 让深/浅主题下都读作「绿色=开、灰=关」；旋钮恒白保证两种主题下对比清晰。
+      '.dsh-music-toggle { position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: none; border-radius: 22px; background: var(--dsw-alias-border-l1, rgba(128,128,128,0.35)); cursor: pointer; transition: background 0.15s; }\n' +
+      '.dsh-music-toggle .dsh-music-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.35); transition: left 0.15s; }\n' +
+      // 开启：固定绿色强调色（不随主题反转），旋钮右移。
+      '.dsh-music-toggle.on { background: #2f9e6e; }\n' +
+      '.dsh-music-toggle.on .dsh-music-toggle-knob { left: 20px; }\n' +
+      // 沉浸感滑块行：右侧 range + 百分比数值。
+      '.dsh-music-config-slider { flex: none; display: flex; align-items: center; gap: 8px; }\n' +
+      '.dsh-music-config-range { width: 140px; accent-color: #2f9e6e; cursor: pointer; }\n' +
+      '.dsh-music-config-val { min-width: 34px; text-align: right; font-size: 12px; color: var(--dsw-alias-label-secondary, #8a8f98); font-variant-numeric: tabular-nums; }\n' +
       '.dsh-music-settings { display: flex; flex-direction: column; gap: 10px; }\n' +
       '.dsh-music-settings-row { display: flex; gap: 8px; align-items: center; }\n' +
       '.dsh-music-settings-cur { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.3)); background: var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.04)); color: var(--dsw-alias-label-primary, #e6e6e6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n' +
@@ -4898,7 +4999,7 @@ window.__ModuleLoader__.load({
       '.dsh-music-qq-login-status { font-size: 14px; color: var(--dsw-alias-label-primary, #e6e6e6); text-align: center; }\n' +
       '.dsh-music-qq-login-actions { display: flex; gap: 8px; }\n' +
       '.dsh-music-qq-viewtabs { display: flex; gap: 6px; }\n' +
-      '.dsh-music-qq-viewtab { padding: 5px 12px; border-radius: 8px; border: none; background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 13px; }\n' +
+      '.dsh-music-qq-viewtab { flex: none; white-space: nowrap; padding: 5px 12px; border-radius: 8px; border: none; background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 13px; }\n' +
       '.dsh-music-qq-viewtab.active { background: var(--dsh-music-accent, #2f9e6e); color: var(--dsh-music-accent-fg, #fff); }\n' +
       '.dsh-music-qq-cats { display: flex; flex-wrap: wrap; gap: 6px; }\n' +
       '.dsh-music-qq-cat { padding: 4px 10px; border-radius: 12px; border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,0.3)); background: transparent; color: var(--dsw-alias-label-primary, #e6e6e6); cursor: pointer; font-size: 12px; }\n' +
@@ -4926,7 +5027,7 @@ window.__ModuleLoader__.load({
       '.dsh-music-qq-now-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n' +
       '.dsh-music-qq-now-artist { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-secondary, #8a8f98); margin-left: 4px; }\n' +
       '.dsh-music-qq-now-src { flex: 0 0 auto; color: var(--dsw-alias-label-secondary, #8a8f98); margin-left: auto; }\n' +
-      '.dsh-music-qq-toolbar { display: flex; justify-content: space-between; gap: 8px; align-items: center; }\n' +
+      '.dsh-music-qq-toolbar { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 12px; }\n' +
       '.dsh-music-qq-login { flex: 1; min-height: 200px; display: flex; align-items: center; justify-content: center; }\n' +
       '.dsh-music-qq-login-center { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 320px; }\n' +
       // 醒目提示：QQ 扫码登录已验证 OK。

package/lib/index.js

@@ -1176,6 +1176,8 @@ export function apply(ctx) {
     'dsh-music-mode', 'dsh-music-volume', 'dsh-music-voice', 'dsh-music-scope',
     'dsh-music-panel-pos', 'dsh-music-playback', 'dsh-music-books-playback',
     'dsh-music-qq-fav', 'dsh-music-qq-history', 'dsh-music-qq-ui',
+    'dsh-music-show-lyric', 'dsh-music-show-viz', 'dsh-music-show-progress',
+    'dsh-music-immerse',
   ])
   const PREF_VALUE_MAX = 256 * 1024 // 单键上限（books 进度 map / QQ 队列可能较大）
   const sanitizePrefs = (input) => {
@@ -1191,6 +1193,12 @@ export function apply(ctx) {
         out[k] = String(Math.min(1, Math.max(0, n)))
         continue
       }
+      if (k === 'dsh-music-immerse') {
+        const n = Number(v)
+        if (!Number.isFinite(n)) continue
+        out[k] = String(Math.min(1, Math.max(0, n)))
+        continue
+      }
       if (k === 'dsh-music-mode') {
         if (v !== 'single' && v !== 'order' && v !== 'shuffle') continue
         out[k] = v

package/package.json

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