dsh-music-panel 0.3.10 → 0.3.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.3.12
+
+### 变更
+
+- 收藏爱心改为红色（`--dsw-alias-state-error-primary`）
+- 多选「添加到播放列表…」改为「添加到歌单」下拉菜单：显示歌单名与曲目数、支持新建歌单并添加，外观与交互重做
+- 歌曲右键菜单：添加到歌单、添加到播放列表、复制文件地址、在文件夹中显示、详细信息
+- 歌单视图的「从歌单移除」移入右键菜单，行内 × 按钮移除
+- 新增 Host 接口 `POST /music/reveal`（仅限已配置音乐目录内的文件）：Windows `explorer /select`、macOS `open -R`、Linux `xdg-open`
+
+## 0.3.11
+
+### 变更
+
+- 播放列表面板支持拖动移动位置：拖动顶部正在播放条/标题区即可，位置记在偏好里，下次打开恢复
+- 播放列表面板内禁用文本框选（`user-select: none`）
+
 ## 0.3.10
 
 ### 变更

package/README.md

@@ -30,7 +30,9 @@ DeepSeek Harness 的本地音乐插件：左侧栏一个音符入口，点开是
 - **外观设置**：输入框播放列表按钮（发送按钮左侧，可关闭）、播放页圆形封面 / 黑胶底盘 / 封面旋转。
 - **歌词设置**：歌词来源顺序（内嵌 / LRC，可调）、对齐方式、字体大小与粗细、模糊非当前歌词、翻译开关与翻译字号缩放、状态栏歌词（输入框内或输入框上方显示当前唱词）。
 - **歌词校准**：播放页 → 歌词设置里按 ±0.5s 调整偏移；「写回文件」把校准后的 LRC 写回 MP3（ID3 USLT）/ FLAC（Vorbis LYRICS）内嵌歌词，写前自动备份为 `<文件>.lyrics.bak`。
-- **收藏与最近播放**：底栏 / 歌曲行爱心加入「我喜欢」tab；统计页可切换「收听排行 / 最近播放」。
+- **收藏与最近播放**：底栏 / 歌曲行爱心（红色）加入「我喜欢」tab；统计页可切换「收听排行 / 最近播放」。
+- **右键菜单**：歌曲行右键可添加到歌单 / 添加到播放列表 / 复制文件地址 / 在文件夹中显示 / 查看详细信息；歌单视图里还可从歌单移除。
+- **添加到歌单**：多选后从下拉菜单选择目标歌单（显示曲目数），或新建歌单并添加。
 - **队列编辑**：播放队列支持拖动排序与移除单曲。
 - **搜索**：标题 / 歌手 / 专辑 / 文件夹 / 路径 + 全拼 / 首字母（如 `zhoujielun`、`zjl`），并记住最近 8 条搜索。
 - **多标签页互斥**：用 Web Locks 选主，只有一个标签页发声与计时；其他标签页底栏提示「另一个标签页正在播放」。
@@ -82,6 +84,7 @@ plugin_manager install_bundle D:/SystemFiles/Documents/Project/DSH/plugins/dsh-m
 | GET | `/music/favorites` | 收藏列表（按收藏时间倒序） |
 | POST | `/music/favorites` | 切换收藏，body `{ path }` |
 | POST | `/music/lyrics/calibrate` | 保存歌词偏移 `{ path, offsetMs, write? }`；`write: true` 写回内嵌并清零偏移 |
+| POST | `/music/reveal` | 在系统文件管理器中定位文件（仅已配置目录内），body `{ path }` |
 | GET | `/music/stats?range=week\|month\|all` | 按范围聚合的播放次数 / 时长 / 最近播放 |
 | GET | `/music/cover?path=…` | 内嵌封面；无封面返回 404 |
 

package/client.js

@@ -33,6 +33,7 @@ window.__ModuleLoader__.load({
     /** Defaults for every appearance / lyric preference. */
     var PREF_DEFAULTS = {
       miniPlayer: true,
+      queuePos: null,
       composerQueueButton: true,
       circularCover: true,
       vinylRing: false,
@@ -121,6 +122,11 @@ window.__ModuleLoader__.load({
         'page.format': '格式',
         'page.bitrate': '码率',
         'page.sampleRate': '采样率',
+        'page.artist': '歌手',
+        'page.album': '专辑',
+        'page.duration': '时长',
+        'page.size': '文件大小',
+        'page.plays': '播放次数',
         'page.none': '—',
         'page.selectedCount': '已选 {n} 首',
         'page.noResults': '没有匹配的歌曲',
@@ -171,7 +177,14 @@ window.__ModuleLoader__.load({
         'page.deleteConfirm': '删除「{name}」？此操作不可撤销。',
         'page.back': '返回',
         'page.playAll': '播放全部',
-        'page.addTo': '添加到播放列表…',
+        'page.addTo': '添加到歌单',
+        'page.addToPlaylist': '添加到播放列表',
+        'page.addedToPlaylist': '已添加到播放列表',
+        'page.reveal': '在文件夹中显示',
+        'page.revealed': '已在文件夹中打开',
+        'page.details': '详细信息',
+        'page.noPlaylists': '还没有歌单',
+        'page.newPlaylistAdd': '新建歌单并添加',
         'page.addedCount': '已添加 {n} 首',
         'page.trackCount': '{n} 首',
         'page.removeTrack': '从歌单移除',
@@ -297,6 +310,11 @@ window.__ModuleLoader__.load({
         'page.format': 'Format',
         'page.bitrate': 'Bitrate',
         'page.sampleRate': 'Sample rate',
+        'page.artist': 'Artist',
+        'page.album': 'Album',
+        'page.duration': 'Duration',
+        'page.size': 'File size',
+        'page.plays': 'Plays',
         'page.none': '—',
         'page.selectedCount': '{n} selected',
         'page.noResults': 'No matching songs',
@@ -347,7 +365,14 @@ window.__ModuleLoader__.load({
         'page.deleteConfirm': 'Delete “{name}”? This cannot be undone.',
         'page.back': 'Back',
         'page.playAll': 'Play all',
-        'page.addTo': 'Add to playlist…',
+        'page.addTo': 'Add to playlist',
+        'page.addToPlaylist': 'Add to play queue',
+        'page.addedToPlaylist': 'Added to play queue',
+        'page.reveal': 'Show in folder',
+        'page.revealed': 'Opened in folder',
+        'page.details': 'Details',
+        'page.noPlaylists': 'No playlists yet',
+        'page.newPlaylistAdd': 'New playlist and add',
         'page.addedCount': '{n} added',
         'page.trackCount': '{n} tracks',
         'page.removeTrack': 'Remove from playlist',
@@ -773,6 +798,19 @@ window.__ModuleLoader__.load({
       folder: {
         parts: [['path', { d: 'M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z' }]],
       },
+      copy: {
+        parts: [
+          ['rect', { x: 9, y: 9, width: 13, height: 13, rx: 2, ry: 2 }],
+          ['path', { d: 'M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1' }],
+        ],
+      },
+      info: {
+        parts: [
+          ['circle', { cx: 12, cy: 12, r: 10 }],
+          ['path', { d: 'M12 16v-4' }],
+          ['path', { d: 'M12 8h.01' }],
+        ],
+      },
     }
 
     function merge(base, extra) {
@@ -1660,6 +1698,21 @@ window.__ModuleLoader__.load({
           randomOrder = randomOrderOf(list.length)
           load(at, true)
         },
+        /** Append one track to the queue without interrupting playback. */
+        enqueue: function (track) {
+          if (track === null || track === undefined || typeof track.path !== 'string' || track.path === '') return
+          if (state.queue.length === 0) {
+            api.playList([track], 0)
+            return
+          }
+          state = Object.assign({}, state, {
+            queue: state.queue.concat([track]),
+            index: state.index < 0 ? 0 : state.index,
+          })
+          randomOrder = randomOrderOf(state.queue.length)
+          emit()
+          savePlaybackState()
+        },
         select: function (list, at) {
           if (!list || list.length === 0 || at < 0) return
           if (at === state.index && sameQueue(list, state.queue)) {
@@ -2124,6 +2177,12 @@ window.__ModuleLoader__.load({
     function QueueOverlay() {
       var [open, setOpen] = useState(queueOverlaySnapshot())
       var [snap, setSnap] = useState(player.getSnapshot())
+      var [pos, setPos] = useState(function () {
+        var saved = readPrefs().queuePos
+        if (saved === null || typeof saved !== 'object') return null
+        if (!isFinite(saved.x) || !isFinite(saved.y)) return null
+        return { x: Number(saved.x), y: Number(saved.y) }
+      })
       // Drag state lives entirely in refs/DOM classes so React never
       // re-renders the dragged row mid-drag (Chromium cancels that).
       var dragFromRef = useRef(null)
@@ -2245,6 +2304,73 @@ window.__ModuleLoader__.load({
         document.addEventListener('pointercancel', onUp)
       }
 
+      // Drag the whole panel by its header strip (buttons and queue rows keep
+      // their own gestures). Position is remembered in prefs.
+      function startPanelDrag(event) {
+        if (event.button !== undefined && event.button !== 0) return
+        var target = event.target
+        if (target === null || target === undefined || typeof target.closest !== 'function') return
+        if (target.closest('button, .mu-queue-row, .mu-queue-grip') !== null) return
+        if (target.closest('.mu-qoverlay-now, .mu-qoverlay-head') === null) return
+        var el = ref.current
+        if (el === null) return
+        var rect = el.getBoundingClientRect()
+        var start = {
+          x: event.clientX,
+          y: event.clientY,
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          moved: false,
+        }
+        event.preventDefault()
+        document.body.style.userSelect = 'none'
+        document.body.style.cursor = 'grabbing'
+        el.classList.add('is-dragging-panel')
+
+        function clamp(value, min, max) {
+          return Math.max(min, Math.min(max, value))
+        }
+
+        function onMove(moveEvent) {
+          start.moved = true
+          var x = clamp(
+            start.left + (moveEvent.clientX - start.x),
+            8,
+            Math.max(8, window.innerWidth - start.width - 8),
+          )
+          var y = clamp(
+            start.top + (moveEvent.clientY - start.y),
+            8,
+            Math.max(8, window.innerHeight - start.height - 8),
+          )
+          el.style.left = x + 'px'
+          el.style.top = y + 'px'
+          el.style.right = 'auto'
+          el.style.bottom = 'auto'
+        }
+
+        function onUp() {
+          document.removeEventListener('pointermove', onMove)
+          document.removeEventListener('pointerup', onUp)
+          document.removeEventListener('pointercancel', onUp)
+          document.body.style.userSelect = ''
+          document.body.style.cursor = ''
+          el.classList.remove('is-dragging-panel')
+          if (start.moved) {
+            var next = el.getBoundingClientRect()
+            var position = { x: Math.round(next.left), y: Math.round(next.top) }
+            setPos(position)
+            savePrefs({ queuePos: position })
+          }
+        }
+
+        document.addEventListener('pointermove', onMove)
+        document.addEventListener('pointerup', onUp)
+        document.addEventListener('pointercancel', onUp)
+      }
+
       var rows = queueView.map(function (entry, position) {
         var track = entry.track
         var originalIndex = entry.originalIndex
@@ -2299,7 +2425,17 @@ window.__ModuleLoader__.load({
 
       return h(
         'div',
-        { className: 'mu-qoverlay', ref: ref },
+        {
+          className: 'mu-qoverlay',
+          ref: ref,
+          style:
+            pos !== null
+              ? { left: pos.x + 'px', top: pos.y + 'px', right: 'auto', bottom: 'auto' }
+              : undefined,
+          onPointerDown: function (event) {
+            startPanelDrag(event)
+          },
+        },
         h(QueueNowPlaying, null),
         h(
           'div',
@@ -3490,6 +3626,22 @@ window.__ModuleLoader__.load({
           setQueueOpen(queueOverlaySnapshot())
         })
       }, [])
+      useEffect(
+        function () {
+          if (ctxMenu === null) return undefined
+          function onKey(event) {
+            if (event.key === 'Escape') setCtxMenu(null)
+          }
+          window.addEventListener('keydown', onKey)
+          return function () {
+            window.removeEventListener('keydown', onKey)
+          }
+        },
+        [ctxMenu],
+      )
+      var [ctxMenu, setCtxMenu] = useState(null)
+      var [addToOpen, setAddToOpen] = useState(false)
+      var [infoPath, setInfoPath] = useState(null)
       var [moreOpen, setMoreOpen] = useState(false)
       var [toast, setToast] = useState('')
       var toastTimerRef = useRef(null)
@@ -3784,22 +3936,51 @@ window.__ModuleLoader__.load({
         setSelected([])
       }
 
-      function copyPath() {
-        if (!current) return
+      function copyPath(track) {
+        var target = track && track.path ? track : current
+        if (!target) return
         try {
-          navigator.clipboard.writeText(current.path).then(
+          navigator.clipboard.writeText(target.path).then(
             function () {
               showToast(t('page.copied'))
             },
             function () {
-              showToast(current.path)
+              showToast(target.path)
             },
           )
         } catch (error) {
-          showToast(current.path)
+          showToast(target.path)
         }
       }
 
+      function revealTrack(track) {
+        if (!track) return
+        requestJson('POST', API + 'reveal', { path: track.path })
+          .then(function () {
+            showToast(t('page.revealed'))
+          })
+          .catch(function (error) {
+            showToast(String((error && error.message) || error))
+          })
+      }
+
+      function createPlaylistWithSelection() {
+        var paths = selectedTracks.map(function (track) {
+          return track.path
+        })
+        if (paths.length === 0) return
+        requestJson('POST', API + 'playlists', { name: '' })
+          .then(function (body) {
+            return patchPlaylist(body.playlist.id, { add: paths })
+          })
+          .then(function () {
+            showToast(t('page.addedCount', { n: paths.length }))
+          })
+          .catch(function (error) {
+            showToast(String((error && error.message) || error))
+          })
+      }
+
       var trackByPath = useMemo(function () {
         var map = {}
         tracks.forEach(function (track) {
@@ -4004,6 +4185,12 @@ window.__ModuleLoader__.load({
             onDoubleClick: function () {
               activate(track)
             },
+            onContextMenu: function (event) {
+              event.preventDefault()
+              event.stopPropagation()
+              setMoreOpen(false)
+              setCtxMenu({ x: event.clientX, y: event.clientY, path: track.path, mode: 'main' })
+            },
           },
           h(
             'button',
@@ -4064,23 +4251,6 @@ window.__ModuleLoader__.load({
               },
               icon('heart', 14),
             ),
-            view === 'playlists' && activePlaylist !== undefined
-              ? h(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'mu-icon-btn mu-icon-btn-sm',
-                    title: t('page.removeTrack'),
-                    onClick: function (event) {
-                      event.stopPropagation()
-                      patchPlaylist(activePlaylist.id, { remove: [track.path] }).catch(function (error) {
-                        showToast(String((error && error.message) || error))
-                      })
-                    },
-                  },
-                  icon('x', 14),
-                )
-              : null,
             h(
               'button',
               {
@@ -4268,6 +4438,14 @@ window.__ModuleLoader__.load({
               },
             })
           : null,
+        addToOpen
+          ? h('div', {
+              className: 'mu-addto-scrim',
+              onClick: function () {
+                setAddToOpen(false)
+              },
+            })
+          : null,
         h(
           'div',
           { className: 'mu-head' },
@@ -4939,21 +5117,60 @@ window.__ModuleLoader__.load({
                   selected.length === visible.length ? t('page.selectNone') : t('page.selectAll'),
                 ),
                 h(
-                  'select',
-                  {
-                    className: 'mu-select',
-                    value: '',
-                    title: t('page.addTo'),
-                    onChange: function (event) {
-                      var value = event.target.value
-                      event.target.value = ''
-                      if (value !== '') addSelectedTo(value)
+                  'div',
+                  { className: 'mu-addto' },
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'mu-chip' + (addToOpen ? ' is-on' : ''),
+                      onClick: function () {
+                        setAddToOpen(!addToOpen)
+                      },
                     },
-                  },
-                  h('option', { value: '' }, t('page.addTo')),
-                  playlists.map(function (playlist) {
-                    return h('option', { key: playlist.id, value: playlist.id }, playlist.name)
-                  }),
+                    icon('plus', 13),
+                    h('span', null, t('page.addTo')),
+                    icon('chevronDown', 12),
+                  ),
+                  addToOpen
+                    ? h(
+                        'div',
+                        { className: 'mu-addto-menu' },
+                        playlists.length === 0
+                          ? h('div', { className: 'mu-addto-empty' }, t('page.noPlaylists'))
+                          : playlists.map(function (playlist) {
+                              return h(
+                                'button',
+                                {
+                                  key: playlist.id,
+                                  type: 'button',
+                                  className: 'mu-addto-item',
+                                  onClick: function () {
+                                    addSelectedTo(playlist.id)
+                                    setAddToOpen(false)
+                                  },
+                                },
+                                icon('list', 12),
+                                h('span', { className: 'mu-ellipsis' }, playlist.name),
+                                h('span', { className: 'mu-addto-count' }, String(playlist.trackPaths.length)),
+                              )
+                            }),
+                        h('div', { className: 'mu-addto-sep' }),
+                        h(
+                          'button',
+                          {
+                            type: 'button',
+                            className: 'mu-addto-item',
+                            onClick: function () {
+                              createPlaylistWithSelection()
+                              setAddToOpen(false)
+                            },
+                          },
+                          icon('plus', 12),
+                          h('span', null, t('page.newPlaylistAdd')),
+                        ),
+                      )
+                    : null,
                 ),
               )
             : null,
@@ -5197,7 +5414,7 @@ window.__ModuleLoader__.load({
                 : h('div', { className: 'mu-state-sub' }, t('page.noTrack')),
               h(
                 'button',
-                { type: 'button', className: 'mu-menu-item', disabled: !current, onClick: copyPath },
+                { type: 'button', className: 'mu-menu-item', disabled: !current, onClick: function () { copyPath() } },
                 h('span', null, t('page.copyPath')),
               ),
             )
@@ -5205,6 +5422,206 @@ window.__ModuleLoader__.load({
 
             ),
 
+        ctxMenu !== null
+          ? (function () {
+              var target = trackByPath[ctxMenu.path] || null
+              var winWidth = typeof window !== 'undefined' && window.innerWidth ? window.innerWidth : 1200
+              var winHeight = typeof window !== 'undefined' && window.innerHeight ? window.innerHeight : 800
+              var left = Math.max(8, Math.min(ctxMenu.x, winWidth - 220))
+              var top = Math.max(8, Math.min(ctxMenu.y, winHeight - (ctxMenu.mode === 'playlists' ? 320 : 280)))
+              function close() {
+                setCtxMenu(null)
+              }
+              var children = []
+              if (ctxMenu.mode === 'playlists') {
+                children.push(
+                  h('div', { className: 'mu-ctx-head', key: 'head' }, t('page.addTo')),
+                  playlists.length === 0
+                    ? h('div', { className: 'mu-addto-empty', key: 'empty' }, t('page.noPlaylists'))
+                    : playlists.map(function (playlist) {
+                        return h(
+                          'button',
+                          {
+                            key: playlist.id,
+                            type: 'button',
+                            className: 'mu-ctx-item',
+                            onClick: function () {
+                              if (target === null) return
+                              patchPlaylist(playlist.id, { add: [target.path] })
+                                .then(function () {
+                                  showToast(t('page.addedCount', { n: 1 }))
+                                })
+                                .catch(function (error) {
+                                  showToast(String((error && error.message) || error))
+                                })
+                              close()
+                            },
+                          },
+                          icon('list', 12),
+                          h('span', { className: 'mu-ellipsis' }, playlist.name),
+                          h('span', { className: 'mu-addto-count' }, String(playlist.trackPaths.length)),
+                        )
+                      }),
+                )
+              } else {
+                children.push(
+                  h(
+                    'button',
+                    {
+                      key: 'add-to-playlist',
+                      type: 'button',
+                      className: 'mu-ctx-item',
+                      onClick: function () {
+                        setCtxMenu({ x: ctxMenu.x, y: ctxMenu.y, path: ctxMenu.path, mode: 'playlists' })
+                      },
+                    },
+                    icon('list', 12),
+                    h('span', { className: 'mu-ellipsis' }, t('page.addTo')),
+                    h('span', { className: 'mu-ctx-arrow' }, '›'),
+                  ),
+                  h(
+                    'button',
+                    {
+                      key: 'enqueue',
+                      type: 'button',
+                      className: 'mu-ctx-item',
+                      onClick: function () {
+                        if (target !== null) {
+                          player.enqueue(target)
+                          showToast(t('page.addedToPlaylist'))
+                        }
+                        close()
+                      },
+                    },
+                    icon('plus', 12),
+                    h('span', null, t('page.addToPlaylist')),
+                  ),
+                  h('div', { className: 'mu-ctx-sep', key: 'sep1' }),
+                  h(
+                    'button',
+                    {
+                      key: 'copy',
+                      type: 'button',
+                      className: 'mu-ctx-item',
+                      onClick: function () {
+                        copyPath(target)
+                        close()
+                      },
+                    },
+                    icon('copy', 12),
+                    h('span', null, t('page.copyPath')),
+                  ),
+                  h(
+                    'button',
+                    {
+                      key: 'reveal',
+                      type: 'button',
+                      className: 'mu-ctx-item',
+                      onClick: function () {
+                        revealTrack(target)
+                        close()
+                      },
+                    },
+                    icon('folder', 12),
+                    h('span', null, t('page.reveal')),
+                  ),
+                  h(
+                    'button',
+                    {
+                      key: 'details',
+                      type: 'button',
+                      className: 'mu-ctx-item',
+                      onClick: function () {
+                        setInfoPath(ctxMenu.path)
+                        close()
+                      },
+                    },
+                    icon('info', 12),
+                    h('span', null, t('page.details')),
+                  ),
+                  view === 'playlists' && activePlaylist !== undefined
+                    ? h(
+                        'button',
+                        {
+                          key: 'remove',
+                          type: 'button',
+                          className: 'mu-ctx-item is-danger',
+                          onClick: function () {
+                            if (target !== null) {
+                              patchPlaylist(activePlaylist.id, { remove: [target.path] }).catch(function (error) {
+                                showToast(String((error && error.message) || error))
+                              })
+                            }
+                            close()
+                          },
+                        },
+                        icon('x', 12),
+                        h('span', null, t('page.removeTrack')),
+                      )
+                    : null,
+                )
+              }
+              return h(
+                'div',
+                { key: 'ctx-layer' },
+                h('div', { className: 'mu-ctx-scrim', onClick: close }),
+                h('div', { className: 'mu-ctx', style: { left: left + 'px', top: top + 'px' } }, children),
+              )
+            })()
+          : null,
+
+        infoPath !== null
+          ? (function () {
+              var info = trackByPath[infoPath]
+              if (!info) return null
+              var rows = [
+                [t('page.title'), info.title],
+                [t('page.artist'), info.artist || t('page.unknownArtist')],
+                [t('page.album'), info.album || t('page.none')],
+                [t('page.duration'), fmtTime(info.durationSec)],
+                [t('page.format'), (info.codec || info.ext || '').toUpperCase()],
+                [t('page.bitrate'), fmtKbps(info.bitrate) || t('page.none')],
+                [t('page.sampleRate'), fmtKhz(info.sampleRate) || t('page.none')],
+                [t('page.size'), info.size > 0 ? (info.size / 1024 / 1024).toFixed(2) + ' MB' : t('page.none')],
+                [t('page.plays'), String(info.plays || 0)],
+                [t('page.path'), info.path],
+              ]
+              return h(
+                'div',
+                { className: 'mu-info-layer' },
+                h('div', { className: 'mu-info-scrim', onClick: function () { setInfoPath(null) } }),
+                h(
+                  'div',
+                  { className: 'mu-info' },
+                  h(
+                    'div',
+                    { className: 'mu-info-head' },
+                    h('span', { className: 'mu-info-title' }, t('page.details')),
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'mu-icon-btn mu-icon-btn-sm',
+                        onClick: function () {
+                          setInfoPath(null)
+                        },
+                      },
+                      icon('x', 14),
+                    ),
+                  ),
+                  rows.map(function (row) {
+                    return h(
+                      'div',
+                      { className: 'mu-more-row', key: row[0] },
+                      h('span', { className: 'mu-more-key' }, row[0]),
+                      h('span', { className: 'mu-more-val mu-ellipsis', title: row[1] }, row[1]),
+                    )
+                  }),
+                ),
+              )
+            })()
+          : null,
+
         toast !== '' ? h('div', { className: 'mu-toast' }, toast) : null,
 
         npOpen
@@ -5527,7 +5944,10 @@ window.__ModuleLoader__.load({
       '.mu-bar-right{display:flex;align-items:center;gap:6px;justify-self:end}',
       '.mu-quality{font-size:12px;color:var(--dsw-alias-label-tertiary,#a1a1aa);font-variant-numeric:tabular-nums;white-space:nowrap}',
       '.mu-pop{position:absolute;right:16px;bottom:84px;z-index:40;width:330px;max-height:58%;display:flex;flex-direction:column;border-radius:var(--dsw-radius-md,8px);background:var(--dsw-alias-bg-layer-1,#1a1a1e);border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden}',
-      '.mu-qoverlay{position:fixed;right:24px;bottom:96px;z-index:70;width:360px;max-width:calc(100vw - 48px);max-height:62vh;display:flex;flex-direction:column;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:14px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden}',
+      '.mu-qoverlay{position:fixed;right:24px;bottom:96px;z-index:70;width:360px;max-width:calc(100vw - 48px);max-height:62vh;display:flex;flex-direction:column;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:14px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden;user-select:none}',
+      '.mu-qoverlay.is-dragging-panel{cursor:grabbing}',
+      '.mu-qoverlay-now,.mu-qoverlay-head{cursor:grab}',
+      '.mu-qoverlay-now:active,.mu-qoverlay-head:active{cursor:grabbing}',
       '.mu-qoverlay-now{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:.5px solid var(--dsw-alias-border-l1,rgba(255,255,255,.08))}',
       '.mu-qoverlay-now.is-empty{padding:14px 12px;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:12px}',
       '.mu-qoverlay-now-main{flex:1;min-width:0}',
@@ -5552,8 +5972,29 @@ window.__ModuleLoader__.load({
       '.mu-queue-btn{width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:12px;line-height:20px;cursor:pointer}',
       '.mu-queue-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06));color:var(--dsw-alias-label-primary,#f4f4f5)}',
       '.mu-queue-btn:disabled{opacity:.35;cursor:default}',
-      '.mu-fav.is-on{color:var(--dsw-alias-brand-primary,#f4f4f5)}',
+      '.mu-fav.is-on{color:var(--dsw-alias-state-error-primary,#e5484d)}',
       '.mu-fav.is-on svg{fill:currentColor}',
+      '.mu-addto{position:relative}',
+      '.mu-addto-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:53;min-width:210px;max-height:280px;overflow-y:auto;padding:4px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:10px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.45))}',
+      '.mu-addto-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:var(--dsw-alias-label-primary,#f4f4f5);font-size:12px;text-align:left;cursor:pointer}',
+      '.mu-addto-item:hover{background:var(--dsw-alias-bg-layer-2,#2a2a2e)}',
+      '.mu-addto-count{margin-left:auto;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:11px;font-variant-numeric:tabular-nums}',
+      '.mu-addto-sep{height:1px;margin:4px 6px;background:var(--dsw-alias-border-l1,rgba(255,255,255,.08))}',
+      '.mu-addto-empty{padding:10px;font-size:12px;color:var(--dsw-alias-label-tertiary,#8a8a93)}',
+      '.mu-addto-scrim{position:fixed;inset:0;z-index:52}',
+      '.mu-ctx-scrim{position:fixed;inset:0;z-index:89}',
+      '.mu-ctx{position:fixed;z-index:90;min-width:200px;max-height:320px;overflow-y:auto;padding:4px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:10px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 16px 40px rgba(0,0,0,.5))}',
+      '.mu-ctx-head{padding:6px 10px 4px;font-size:11px;color:var(--dsw-alias-label-tertiary,#8a8a93)}',
+      '.mu-ctx-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:var(--dsw-alias-label-primary,#f4f4f5);font-size:12px;text-align:left;cursor:pointer}',
+      '.mu-ctx-item:hover{background:var(--dsw-alias-bg-layer-2,#2a2a2e)}',
+      '.mu-ctx-item.is-danger:hover{background:color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 16%,transparent);color:var(--dsw-alias-state-error-primary,#e5484d)}',
+      '.mu-ctx-arrow{margin-left:auto;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:14px;line-height:1}',
+      '.mu-ctx-sep{height:1px;margin:4px 6px;background:var(--dsw-alias-border-l1,rgba(255,255,255,.08))}',
+      '.mu-info-layer{position:fixed;inset:0;z-index:94;pointer-events:none}',
+      '.mu-info-scrim{position:absolute;inset:0;background:rgba(0,0,0,.35);pointer-events:auto}',
+      '.mu-info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:440px;max-width:calc(100vw - 48px);max-height:70vh;overflow-y:auto;padding:16px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:14px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 20px 60px rgba(0,0,0,.55));pointer-events:auto}',
+      '.mu-info-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}',
+      '.mu-info-title{font-size:14px;font-weight:600}',
       '.mu-chip-sm{height:24px;padding:0 8px;font-size:11px}',
       '.mu-search-history{position:absolute;top:34px;right:0;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:320px;padding:6px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.12));border-radius:8px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 8px 24px rgba(0,0,0,.35))}',
       '.mu-queue-row:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}',

package/lib/routes.js

@@ -21,6 +21,7 @@
  * @module dsh-music-panel/routes
  */
 
+import { spawn } from 'node:child_process'
 import { createReadStream } from 'node:fs'
 import { readdir, realpath, stat } from 'node:fs/promises'
 import { dirname, isAbsolute, join, relative, resolve } from 'node:path'
@@ -388,6 +389,36 @@ export function createRoutes({ settings, library, playlists, stats, playback, fa
         return sendJson(res, 200, { ok: true, favorite: result.favorite, favorites: result.favorites })
       }
 
+      // Reveal a track in the OS file manager. Only files already inside the
+      // configured roots reach this point; args are passed to spawn without a
+      // shell, so the path cannot inject commands.
+      if (pathname === '/reveal' && method === 'POST') {
+        let body
+        try {
+          body = await readJson(req)
+        } catch {
+          return fail(res, 400, 'BAD_JSON', '请求体不是合法 JSON')
+        }
+        const config = await settings.read()
+        const file = await resolveTrack(body?.path, config.roots)
+        if (file === null) return fail(res, 404, 'NOT_FOUND', '文件不在已配置的音乐目录内')
+        try {
+          const opener =
+            process.platform === 'win32'
+              ? { name: 'explorer.exe', args: ['/select,' + file] }
+              : process.platform === 'darwin'
+                ? { name: 'open', args: ['-R', file] }
+                : { name: 'xdg-open', args: [dirname(file)] }
+          const child = spawn(opener.name, opener.args, { detached: true, stdio: 'ignore' })
+          // Without this listener an ENOENT would surface as an unhandled error.
+          child.on('error', () => {})
+          child.unref()
+          return sendJson(res, 200, { ok: true })
+        } catch (error) {
+          return fail(res, 500, 'REVEAL_FAILED', String(error?.message ?? error))
+        }
+      }
+
       if (pathname === '/playlists' && method === 'GET') {
         return sendJson(res, 200, { ok: true, playlists: await playlists.list() })
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-panel",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "type": "module",
   "description": "Local music library for DeepSeek Harness: scan a folder, browse tracks with cover art and tags, and play through a sidebar-panel player with loop, shuffle and volume. · DSH 本地音乐插件：扫描音乐目录、读取封面与标签、侧栏入口 + 全屏播放器。",
   "license": "MIT",