更新

playlists.json

@@ -7,14 +7,16 @@
     ]
   },
   {
-    "id": "749a5594a8d84bc58495be200043bc0e",
-    "name": "最新",
+    "id": "d5e397954b4c48f9a4c6a4a345b261cb",
+    "name": "我的2",
     "tracks": [
       "经典老歌/212 伍佰 And China Blue-挪威的森林.mp3",
       "经典老歌/211 吴奇隆-祝你一路顺风.mp3",
       "陈小春/04 献世.mp3",
       "陈小春/13 友情岁月.mp3",
-      "经典老歌/209 巫启贤-思念谁.mp3"
+      "经典老歌/209 巫启贤-思念谁.mp3",
+      "经典老歌/059 黄安-新鸳鸯蝴蝶梦.mp3",
+      "经典老歌/086 李宗盛-凡人歌.mp3"
     ]
   }
 ]

static/css/style.css

@@ -416,6 +416,65 @@ input[type="file"] {
   font-weight: 700;
 }
 
+.pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 2px;
+  padding: 6px 0 0;
+}
+
+.pager-meta {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.pager .text-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.detail-track-row {
+  padding: 8px 10px;
+  border-radius: 14px;
+  border-left: 3px solid rgba(35, 136, 232, 0.28);
+  gap: 8px;
+}
+
+.detail-track-row .song-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.detail-track-row .track-name {
+  font-size: 0.88rem;
+  line-height: 1.15;
+}
+
+.detail-track-row .track-path {
+  font-size: 0.72rem;
+  line-height: 1.15;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail-track-row .track-actions {
+  gap: 4px;
+}
+
+.detail-track-row .small-icon-btn {
+  width: 28px;
+  height: 28px;
+}
+
+.detail-track-row .small-icon-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
 .field {
   display: flex;
   flex-direction: column;

static/js/app.js

@@ -9,6 +9,7 @@ const state = {
   activeAlbumPath: "",
   featuredAlbums: [],
   featuredIndex: 0,
+  detailTrackPage: 1,
 };
 
 const audio = document.getElementById("audioPlayer");
@@ -304,6 +305,9 @@ function renderAlbumDetail(path) {
   const album = state.albums.find((item) => item.path === path);
   if (!album) return;
 
+  if (state.activeAlbumPath !== path) {
+    state.detailTrackPage = 1;
+  }
   state.activeAlbumPath = path;
   setCurrentFolder(path);
   showView("detail");
@@ -336,7 +340,38 @@ function renderAlbumDetail(path) {
 
   const container = document.getElementById("detailTrackList");
   container.innerHTML = "";
-  album.tracks.forEach((track, index) => container.appendChild(renderTrack(track, album.tracks, index)));
+  renderAlbumTracks(container, album.tracks);
+}
+
+function renderAlbumTracks(container, tracks) {
+  const pageSize = 30;
+  const totalPages = Math.max(1, Math.ceil(tracks.length / pageSize));
+  state.detailTrackPage = Math.min(Math.max(state.detailTrackPage || 1, 1), totalPages);
+  const start = (state.detailTrackPage - 1) * pageSize;
+  const visibleTracks = tracks.slice(start, start + pageSize);
+
+  visibleTracks.forEach((track, index) => container.appendChild(renderTrack(track, tracks, start + index, { compact: true })));
+
+  if (tracks.length <= pageSize) return;
+
+  const pager = document.createElement("div");
+  pager.className = "pager";
+  pager.innerHTML = `
+    <button class="text-btn" data-action="prev" ${state.detailTrackPage === 1 ? "disabled" : ""}>上一页</button>
+    <span class="pager-meta">${state.detailTrackPage} / ${totalPages}</span>
+    <button class="text-btn" data-action="next" ${state.detailTrackPage === totalPages ? "disabled" : ""}>下一页</button>
+  `;
+  pager.querySelector("[data-action='prev']").onclick = () => {
+    if (state.detailTrackPage <= 1) return;
+    state.detailTrackPage -= 1;
+    renderAlbumDetail(state.activeAlbumPath);
+  };
+  pager.querySelector("[data-action='next']").onclick = () => {
+    if (state.detailTrackPage >= totalPages) return;
+    state.detailTrackPage += 1;
+    renderAlbumDetail(state.activeAlbumPath);
+  };
+  container.appendChild(pager);
 }
 
 function renderLatestList(tracks) {
@@ -381,11 +416,16 @@ function renderRankingList(items) {
   });
 }
 
-function renderTrack(track, sourceTracks = [track], sourceIndex = 0) {
+function renderTrack(track, sourceTracks = [track], sourceIndex = 0, options = {}) {
   const template = document.getElementById("trackItemTemplate");
   const fragment = template.content.cloneNode(true);
+  const row = fragment.querySelector(".song-row");
+  const trackPath = fragment.querySelector(".track-path");
   fragment.querySelector(".track-name").textContent = track.name;
-  fragment.querySelector(".track-path").textContent = track.path;
+  trackPath.textContent = track.path;
+  if (options.compact) {
+    row.classList.add("detail-track-row");
+  }
   fragment.querySelector(".play-btn").onclick = () => {
     showIconToast("播放");
     startQueue(sourceTracks, sourceIndex);
@@ -597,6 +637,7 @@ function clearCurrentTrack() {
   audio.load();
   state.currentTrackIndex = -1;
   state.activeAlbumPath = "";
+  state.detailTrackPage = 1;
   document.getElementById("nowTitle").textContent = "选择一个专辑目录开始播放";
   document.getElementById("nowMeta").textContent = "点击专辑进入详情页，或直接在卡片上快速播放。";
   document.getElementById("dockTitle").textContent = "未开始播放";