修改路径过长，增加从此播放功能

static/css/style.css

@@ -72,6 +72,13 @@ input[type="file"] {
   gap: 10px;
   padding: 10px 14px;
   border-radius: 18px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.header-copy,
+.header-pill {
+  min-width: 0;
 }
 
 .header-copy h1,
@@ -99,12 +106,23 @@ input[type="file"] {
 }
 
 .header-pill {
-  flex: 0 0 auto;
+  flex: 1 1 240px;
+  max-width: 100%;
+  min-width: 0;
   padding: 7px 10px;
   border-radius: 999px;
   background: rgba(35, 136, 232, 0.12);
   color: var(--accent-deep);
   font-size: 0.82rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: right;
+}
+
+#folderIndicator {
+  display: inline;
+  white-space: nowrap;
 }
 
 .page-content {
@@ -165,15 +183,22 @@ input[type="file"] {
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
+  min-width: 0;
+  flex-wrap: wrap;
 }
 
 .section-head h2 {
   font-size: 1rem;
+  min-width: 0;
 }
 
 .section-head span {
   color: var(--muted);
   font-size: 0.8rem;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .library-tabs {
@@ -291,6 +316,7 @@ input[type="file"] {
   flex-direction: column;
   gap: 10px;
   padding: 12px;
+  min-width: 0;
 }
 
 .feature-body h3,
@@ -299,6 +325,9 @@ input[type="file"] {
 .track-name,
 .detail-copy h2 {
   margin: 0;
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .meta-row,
@@ -309,6 +338,7 @@ input[type="file"] {
   color: var(--muted);
   font-size: 0.84rem;
   word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .card-actions,
@@ -365,6 +395,8 @@ input[type="file"] {
   align-items: center;
   gap: 10px;
   padding: 12px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .compact-list .song-row {
@@ -385,6 +417,10 @@ input[type="file"] {
   flex: 1;
 }
 
+.song-copy {
+  overflow: hidden;
+}
+
 .queue-list .song-row.is-active {
   border-color: rgba(35, 136, 232, 0.5);
   box-shadow: inset 0 0 0 1px rgba(35, 136, 232, 0.16);
@@ -422,6 +458,7 @@ input[type="file"] {
   flex-direction: column;
   gap: 8px;
   min-width: 0;
+  overflow: hidden;
 }
 
 .detail-copy .card-actions {
@@ -465,6 +502,7 @@ input[type="file"] {
   border-radius: 14px;
   border-left: 3px solid rgba(35, 136, 232, 0.28);
   gap: 8px;
+  align-items: flex-start;
 }
 
 .detail-track-row .song-copy {
@@ -481,13 +519,17 @@ input[type="file"] {
 .detail-track-row .track-path {
   font-size: 0.72rem;
   line-height: 1.15;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .detail-track-row .track-actions {
   gap: 4px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  max-width: 96px;
 }
 
 .detail-track-row .small-icon-btn {
@@ -574,9 +616,9 @@ input[type="file"] {
 .dock-copy strong,
 .dock-copy p {
   display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .dock-copy p {
@@ -752,19 +794,21 @@ audio {
 
 .album-menu-item {
   min-width: 0;
+  max-width: 100%;
   padding: 9px 10px;
   border-radius: 12px;
   background: rgba(35, 136, 232, 0.1);
   color: var(--text);
   text-align: left;
+  overflow: hidden;
 }
 
 .album-menu-item span,
 .album-menu-item small {
   display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .album-menu-item small {
@@ -787,6 +831,18 @@ audio {
   }
 }
 
+@media (max-width: 480px) {
+  .detail-track-row {
+    flex-direction: column;
+  }
+
+  .detail-track-row .track-actions {
+    width: 100%;
+    max-width: none;
+    justify-content: flex-start;
+  }
+}
+
 @supports (-webkit-touch-callout: none) {
   .player-dock {
     bottom: max(10px, env(safe-area-inset-bottom, 0px));

static/js/app.js

@@ -171,9 +171,17 @@ function folderTracks(path) {
   return album ? [...album.tracks] : [];
 }
 
+function shortenFolderLabel(path, maxLength = window.innerWidth <= 480 ? 16 : 28) {
+  if (!path) return "根目录";
+  if (path.length <= maxLength) return path;
+  return `${path.slice(0, maxLength)}...`;
+}
+
 function setCurrentFolder(path) {
   state.currentFolder = path;
-  document.getElementById("folderIndicator").textContent = path || "根目录";
+  const folderText = path || "根目录";
+  document.getElementById("folderIndicator").textContent = shortenFolderLabel(folderText);
+  document.querySelector(".header-pill")?.setAttribute("title", `当前目录：${folderText}`);
 }
 
 function showView(name) {
@@ -442,8 +450,24 @@ function renderTrack(track, sourceTracks = [track], sourceIndex = 0, options = {
   }
   fragment.querySelector(".play-btn").onclick = () => {
     showIconToast("播放");
+    if (options.compact) {
+      startQueue([track], 0);
+      return;
+    }
     startQueue(sourceTracks, sourceIndex);
   };
+  fragment.querySelector(".play-from-btn").onclick = () => {
+    if (options.compact) {
+      showIconToast("从此播放");
+      const remainingTracks = sourceTracks.slice(sourceIndex);
+      startQueue(remainingTracks, 0);
+      return;
+    }
+    showIconToast("加入队列");
+    state.currentQueue.push(track);
+    renderQueue();
+    savePlaybackState();
+  };
   fragment.querySelector(".queue-btn").onclick = () => {
     showIconToast("加入队列");
     state.currentQueue.push(track);

templates/index.html

@@ -14,7 +14,7 @@
           <h1>在线音乐播放器</h1>
           <p class="subtext">移动端专辑浏览与播放</p>
         </div>
-        <div class="header-pill">当前目录：<span id="folderIndicator">根目录</span></div>
+        <div class="header-pill" title="当前目录：根目录">当前目录：<span id="folderIndicator">根目录</span></div>
       </header>
 
       <main class="page-content">
@@ -218,6 +218,9 @@
           <button class="play-btn icon-btn small-icon-btn" aria-label="播放" data-tip="播放">
             <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7-11-7z"/></svg>
           </button>
+          <button class="play-from-btn icon-btn small-icon-btn" aria-label="从此播放" data-tip="从此播放">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5v14M10 5v14M13 7l6 5-6 5V7z"/></svg>
+          </button>
           <button class="queue-btn icon-btn small-icon-btn" aria-label="加入队列" data-tip="加入队列">
             <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10M4 12h10M4 17h7M18 9v8M14 13h8"/></svg>
           </button>