From e8f873a69697b4edc3b76be45a90b52e95bb051f Mon Sep 17 00:00:00 2001
From: WorldSansha <shijiesansha@gmail.com>
Date: Mon, 26 Oct 2026 11:59:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E4=B8=93=E8=BE=91=E6=AD=8C?=
 =?UTF-8?q?=E6=9B=B2=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0=E5=88=86=E7=A2=9F?=
 =?UTF-8?q?=E6=A0=8F=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/types/player.ts                 |   2 +
 src/components/list/SongList.spec.ts   | 246 +++++++++++++++++++++++++
 src/components/list/SongList.vue       | 176 +++++++++++++-----
 src/components/ui/SVirtualList.spec.ts |  59 ++++++
 src/components/ui/SVirtualList.vue     |  62 +++++--
 src/i18n/locales/en-US.json            |   1 +
 src/i18n/locales/zh-CN.json            |   1 +
 src/utils/format/netease.spec.ts       |  27 +++
 src/utils/format/netease.ts            |   2 +
 9 files changed, 508 insertions(+), 68 deletions(-)
 create mode 100644 src/components/list/SongList.spec.ts
 create mode 100644 src/components/ui/SVirtualList.spec.ts

diff --git a/shared/types/player.ts b/shared/types/player.ts
index 93a93aff2..775db8d72 100644
--- a/shared/types/player.ts
+++ b/shared/types/player.ts
@@ -128,6 +128,8 @@ export interface Track {
   artists: Artist[];
   /** 专辑 */
   album?: Album;
+  /** 碟号或碟片名称 */
+  disc?: string;
   /** 曲目编号 */
   track?: number;
   /** 时长（毫秒） */
diff --git a/src/components/list/SongList.spec.ts b/src/components/list/SongList.spec.ts
new file mode 100644
index 000000000..00a7ed401
--- /dev/null
+++ b/src/components/list/SongList.spec.ts
@@ -0,0 +1,246 @@
+import { mount } from "@vue/test-utils";
+import { createI18n } from "vue-i18n";
+import { createMemoryHistory, createRouter } from "vue-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import type { Track } from "@shared/types/player";
+import zhCN from "@/i18n/locales/zh-CN.json";
+
+const state = vi.hoisted(() => ({
+  playFrom: vi.fn(),
+  scrollToIndex: vi.fn(),
+  media: { track: null as Track | null },
+}));
+vi.mock("@/core/player", () => ({ playFrom: state.playFrom }));
+vi.mock("@/stores/media", () => ({ useMediaStore: () => state.media }));
+vi.mock("@/stores/status", () => ({ useStatusStore: () => ({ isPlaying: false }) }));
+vi.mock("@/stores/settings", () => ({
+  useSettingsStore: () => ({
+    appearance: { songListStyle: "compact" },
+    player: { songListPlayBehavior: "all" },
+    preset: {},
+    system: { download: { enabled: false } },
+  }),
+}));
+vi.mock("@/stores/download", () => ({ useDownloadStore: () => ({ isDownloaded: () => false }) }));
+vi.mock("@/stores/library", () => ({ useLibraryStore: () => ({}) }));
+vi.mock("@/stores/playlist", () => ({ usePlaylistStore: () => ({}) }));
+vi.mock("@/stores/user", () => ({ useUserStore: () => ({}) }));
+vi.mock("@/composables/useTrackMenu", () => ({
+  useTrackMenu: () => ({ items: [], handleSelect: vi.fn() }),
+}));
+vi.mock("@/composables/useDownload", () => ({
+  useDownload: () => ({ enqueue: vi.fn(), enqueueMany: vi.fn() }),
+}));
+vi.mock("@/composables/useFavorite", () => ({
+  useFavorite: () => ({ isSupported: () => false, isLiked: () => false }),
+}));
+vi.mock("@/composables/useFloatingPlayerBar", () => ({
+  useFloatingPlayerBar: () => ({ isFloatingBar: ref(false), PLAYER_BAR_GAP: 112 }),
+}));
+vi.mock("@/composables/usePlaylistPicker", () => ({
+  usePlaylistPicker: () => ({
+    open: ref(false),
+    tracks: ref([]),
+    mode: ref("add"),
+    openPicker: vi.fn(),
+  }),
+}));
+vi.mock("@/utils/navigate", () => ({ navigateToAlbum: vi.fn(), navigateToArtist: vi.fn() }));
+import SongList from "./SongList.vue";
+
+const tracks: Track[] = [
+  {
+    id: "a",
+    source: "netease",
+    title: "少年与海",
+    artists: [],
+    duration: 1000,
+    disc: "1 致天堂的信",
+    track: 1,
+  },
+  {
+    id: "b",
+    source: "netease",
+    title: "受难曲",
+    artists: [],
+    duration: 1000,
+    disc: "1 致天堂的信",
+    track: 7,
+  },
+  {
+    id: "c",
+    source: "netease",
+    title: "GLORIA",
+    artists: [],
+    duration: 1000,
+    disc: "2 天堂的回信",
+    track: 8,
+  },
+  {
+    id: "d",
+    source: "netease",
+    title: "老人与海",
+    artists: [],
+    duration: 1000,
+    disc: "2 天堂的回信",
+    track: 9,
+  },
+];
+
+/**
+ * 挂载歌曲列表，替换滚动布局和外部服务，保留分组、排序、播放及多选逻辑
+ * @param props - 当前场景的列表参数
+ * @returns 可交互的列表包装器
+ */
+const mountList = (props: Partial<InstanceType<typeof SongList>["$props"]> = {}) =>
+  mount(SongList, {
+    props: {
+      items: tracks,
+      collectionType: "album",
+      source: "netease",
+      enableSort: true,
+      ...props,
+    },
+    global: {
+      plugins: [
+        createI18n({ legacy: false, locale: "zh-CN", messages: { "zh-CN": zhCN } }),
+        createRouter({
+          history: createMemoryHistory(),
+          routes: [{ path: "/", component: { template: "<div />" } }],
+        }),
+      ],
+      stubs: {
+        SContextMenu: { template: "<div><slot /></div>" },
+        SVirtualList: {
+          props: ["items"],
+          setup: (_, { expose }) => {
+            expose({ scrollToIndex: state.scrollToIndex });
+          },
+          template:
+            '<div><slot name="header" /><div v-for="(item, index) in items" :key="item.key"><slot :item="item" :index="index" /></div></div>',
+        },
+        SButton: { template: '<button><slot name="icon" /><slot /></button>' },
+        SCheckbox: {
+          props: ["checked"],
+          template:
+            '<input type="checkbox" :checked="checked" @change="$emit(\'update:checked\', !checked)" />',
+        },
+        SPopover: { template: '<div><slot name="trigger" /><slot /></div>' },
+        SRadioGroup: {
+          props: ["value"],
+          template:
+            '<select :value="value" @change="$emit(\'update:value\', $event.target.value)"><slot /></select>',
+        },
+        SRadio: {
+          props: ["value", "label"],
+          template: '<option :value="value">{{ label }}</option>',
+        },
+        SDialog: true,
+        PlaylistPickerDialog: true,
+        TagEditorDialog: true,
+        SImg: true,
+        STag: true,
+        SIconSwap: true,
+        SDivider: true,
+        SLoading: true,
+        ...Object.fromEntries(
+          [
+            "Disc3",
+            "Music",
+            "Pause",
+            "Play",
+            "Cloud",
+            "Check",
+            "ListEnd",
+            "ListPlus",
+            "ListMinus",
+            "Download",
+            "CloudOff",
+            "Trash2",
+            "X",
+            "ArrowLeftRight",
+            "ArrowUpDown",
+            "ArrowUpAz",
+            "ArrowUp",
+            "Locate",
+            "SearchX",
+          ].map((name) => ["IconLucide" + name, true]),
+        ),
+        IconMaterialSymbolsFavoriteRounded: true,
+        IconMaterialSymbolsFavoriteOutlineRounded: true,
+      },
+    },
+  });
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  state.media.track = null;
+});
+
+describe("专辑分碟列表", () => {
+  it("展示完整碟名和数量，第二碟双击与播放按钮仍使用歌曲索引", async () => {
+    const wrapper = mountList();
+    expect(wrapper.findAll("[data-disc-header]").map((header) => header.text())).toEqual([
+      "Disc 1 致天堂的信共 2 首",
+      "Disc 2 天堂的回信共 2 首",
+    ]);
+    const row = wrapper.findAll("[data-song-item]")[2];
+    await row.trigger("dblclick");
+    expect(state.playFrom).toHaveBeenLastCalledWith(tracks, { startIndex: 2, context: undefined });
+    await row.get(".w-8").trigger("click");
+    expect(state.playFrom).toHaveBeenLastCalledWith(tracks, { startIndex: 2, context: undefined });
+    expect(row.get(".w-8").text()).toContain("8");
+    wrapper.unmount();
+  });
+
+  it("搜索只保留有结果的碟片，播放使用过滤后的队列", async () => {
+    const wrapper = mountList({ searchQuery: "GLORIA" });
+    expect(wrapper.findAll("[data-disc-header]")).toHaveLength(1);
+    expect(wrapper.get("[data-disc-header]").text()).toContain("2 天堂的回信");
+    await wrapper.get("[data-song-item]").trigger("dblclick");
+    expect(state.playFrom).toHaveBeenLastCalledWith([tracks[2]], {
+      startIndex: 0,
+      context: undefined,
+    });
+    await wrapper.setProps({ searchQuery: "不存在" });
+    expect(wrapper.findAll("[data-disc-header]")).toHaveLength(0);
+    wrapper.unmount();
+  });
+
+  it("单碟专辑和歌单保持普通列表，自定义排序取消分碟", async () => {
+    const wrapper = mountList({ items: tracks.slice(0, 2) });
+    expect(wrapper.findAll("[data-disc-header]")).toHaveLength(0);
+    await wrapper.setProps({ items: tracks, collectionType: "playlist" });
+    expect(wrapper.findAll("[data-disc-header]")).toHaveLength(0);
+    await wrapper.setProps({
+      collectionType: "album",
+      items: tracks.map((track, index) => ({
+        ...track,
+        title: ["Zebra", "Bravo", "Alpha", "Delta"][index],
+      })),
+    });
+    await wrapper.findAll("select")[0].setValue("title");
+    expect(wrapper.findAll("[data-disc-header]")).toHaveLength(0);
+    await wrapper.findAll("[data-song-item]")[0].trigger("dblclick");
+    expect(state.playFrom.mock.lastCall?.[0][0].id).toBe("c");
+    wrapper.unmount();
+  });
+
+  it("定位当前歌曲包含标题偏移，批量全选不包含碟片标题", async () => {
+    state.media.track = tracks[2];
+    const wrapper = mountList();
+    await wrapper.get("icon-lucide-locate-stub").element.parentElement?.click();
+    expect(state.scrollToIndex).toHaveBeenCalledWith(4);
+    wrapper.vm.enterBatch();
+    await wrapper.vm.$nextTick();
+    await wrapper.findAll('input[type="checkbox"]')[0].setValue(true);
+    expect(wrapper.findAll('input[type="checkbox"]')).toHaveLength(5);
+    expect(
+      wrapper
+        .findAll('input[type="checkbox"]')
+        .every((input) => (input.element as HTMLInputElement).checked),
+    ).toBe(true);
+    wrapper.unmount();
+  });
+});
diff --git a/src/components/list/SongList.vue b/src/components/list/SongList.vue
index c4c14b1cb..3c297b631 100644
--- a/src/components/list/SongList.vue
+++ b/src/components/list/SongList.vue
@@ -202,9 +202,27 @@ const filteredItems = computed(() => {
   });
 });
 
+/** 默认专辑顺序下按碟片分组，搜索仍保留原专辑的分碟结构 */
+const groupByDisc = computed(
+  () =>
+    props.collectionType === "album" &&
+    (!props.enableSort || sortField.value === "none") &&
+    new Set(props.items.map((track) => track.disc ?? "1")).size > 1,
+);
+
 /** 排序后列表 */
 const sortedItems = computed(() => {
-  if (!props.enableSort || sortField.value === "none") return filteredItems.value;
+  if (!props.enableSort || sortField.value === "none") {
+    if (!groupByDisc.value) return filteredItems.value;
+    const discs = new Map<string, Track[]>();
+    for (const track of filteredItems.value) {
+      const disc = track.disc ?? "1";
+      const tracks = discs.get(disc);
+      if (tracks) tracks.push(track);
+      else discs.set(disc, [track]);
+    }
+    return [...discs.values()].flat();
+  }
   const result = [...filteredItems.value];
   const field = sortField.value;
   const direction = sortOrder.value === "asc" ? 1 : -1;
@@ -234,10 +252,34 @@ const sortedItems = computed(() => {
   return result;
 });
 
-/** 当前播放歌曲在过滤后列表中的索引 */
+type SongListRow =
+  | { kind: "disc"; key: string; disc: string; count: number }
+  | { kind: "track"; key: string; track: Track; index: number };
+
+/** 分碟标题参与虚拟滚动，歌曲索引始终对应实际播放队列 */
+const listRows = computed<SongListRow[]>(() => {
+  const rows: SongListRow[] = [];
+  let header: Extract<SongListRow, { kind: "disc" }> | undefined;
+  sortedItems.value.forEach((track, index) => {
+    if (groupByDisc.value) {
+      const disc = track.disc ?? "1";
+      if (header?.disc !== disc) {
+        header = { kind: "disc", key: `disc:${disc}`, disc, count: 0 };
+        rows.push(header);
+      }
+      header.count++;
+    }
+    rows.push({ kind: "track", key: `track:${track.id}`, track, index });
+  });
+  return rows;
+});
+
+/** 当前播放歌曲在虚拟列表中的索引 */
 const playingIndex = computed(() => {
   if (!playingId.value) return -1;
-  return sortedItems.value.findIndex((track) => track.id === playingId.value);
+  return listRows.value.findIndex(
+    (row) => row.kind === "track" && row.track.id === playingId.value,
+  );
 });
 
 /** 虚拟列表引用 */
@@ -273,6 +315,14 @@ const { deleteConfirmOpen, deleteDialogTitle, deleteDialogContent } = batch;
 /** 是否使用紧凑列表样式 */
 const isCompactList = computed(() => settings.appearance.songListStyle === "compact");
 
+/**
+ * 为分碟标题和歌曲提供精确行高
+ * @param row - 虚拟列表行
+ * @returns 行高，单位为像素
+ */
+const getRowHeight = (row: SongListRow): number =>
+  row.kind === "disc" ? 40 : isCompactList.value ? 56 : 88;
+
 /**
  * 计算歌曲行样式
  * @param item - 歌曲数据
@@ -417,10 +467,11 @@ defineExpose({
       </template>
       <SVirtualList
         ref="virtualListRef"
-        :items="sortedItems"
+        :items="listRows"
         :item-height="isCompactList ? 56 : 88"
+        :get-item-height="groupByDisc ? getRowHeight : undefined"
         :padding-bottom="isFloatingPlayerBar ? PLAYER_BAR_GAP : 80"
-        :get-item-key="(item: Track) => item.id"
+        :get-item-key="(row: SongListRow) => row.key"
         item-fixed
         height="100%"
         @scroll="onScroll"
@@ -617,14 +668,31 @@ defineExpose({
           </div>
         </template>
         <!-- 列表项 -->
-        <template #default="{ item, index }: { item: Track; index: number }">
-          <div :class="isCompactList ? 'px-3' : 'px-3 pb-3'">
+        <template #default="{ item: row, index }: { item: SongListRow; index: number }">
+          <div
+            v-if="row.kind === 'disc'"
+            data-disc-header
+            class="mx-6 h-10 flex items-center gap-3 text-on-surface-variant"
+            :class="!isCompactList && index > 0 ? 'pb-3' : ''"
+          >
+            <IconLucideDisc3
+              class="size-4 translate-y-px shrink-0 text-primary/70"
+              aria-hidden="true"
+            />
+            <h2 class="min-w-0 flex-1 truncate text-sm font-semibold" :title="row.disc">
+              {{ t("collection.disc", { disc: row.disc }) }}
+            </h2>
+            <span class="shrink-0 text-xs tabular-nums text-on-surface-variant/50">
+              {{ t("common.totalSongs", { count: row.count }) }}
+            </span>
+          </div>
+          <div v-else :class="isCompactList ? 'px-3' : 'px-3 pb-3'">
             <div
               data-song-item
-              :class="trackRowClass(item)"
-              @click="batch.active.value ? batch.toggle(item.id) : undefined"
-              @dblclick="onTrackDblClick(item, index)"
-              @contextmenu="contextTrack = item"
+              :class="trackRowClass(row.track)"
+              @click="batch.active.value ? batch.toggle(row.track.id) : undefined"
+              @dblclick="onTrackDblClick(row.track, row.index)"
+              @contextmenu="contextTrack = row.track"
             >
               <!-- 序号 / 多选 -->
               <div
@@ -633,28 +701,28 @@ defineExpose({
                 :class="
                   batch.active.value
                     ? ''
-                    : playingId === item.id
+                    : playingId === row.track.id
                       ? 'text-primary'
                       : 'text-on-surface-variant'
                 "
-                @click.stop="onPlayClick(item, index)"
+                @click.stop="onPlayClick(row.track, row.index)"
               >
                 <!-- 多选模式 -->
                 <SCheckbox
                   v-if="batch.active.value"
-                  :checked="batch.selectedIds.value.has(item.id)"
+                  :checked="batch.selectedIds.value.has(row.track.id)"
                   size="small"
-                  @update:checked="batch.toggle(item.id)"
+                  @update:checked="batch.toggle(row.track.id)"
                   @click.stop
                 />
                 <!-- 普通模式 -->
                 <template v-else>
                   <span
-                    v-if="playingId !== item.id"
+                    v-if="playingId !== row.track.id"
                     class="font-bold tabular-nums group-hover:opacity-0 transition-opacity duration-300"
                     :class="isCompactList ? 'text-xs' : 'text-sm'"
                   >
-                    {{ index + 1 }}
+                    {{ groupByDisc ? (row.track.track ?? row.index + 1) : row.index + 1 }}
                   </span>
                   <IconLucideMusic
                     v-else
@@ -664,7 +732,7 @@ defineExpose({
                     class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-[opacity,transform] duration-300 group-hover:scale-100 scale-80 cursor-pointer"
                   >
                     <IconLucidePause
-                      v-if="playingId === item.id && status.isPlaying"
+                      v-if="playingId === row.track.id && status.isPlaying"
                       class="size-5"
                     />
                     <IconLucidePlay v-else class="size-5" />
@@ -674,7 +742,7 @@ defineExpose({
               <!-- 信息 -->
               <div class="flex-1 min-w-0 flex items-center gap-3">
                 <SImg
-                  :src="item.cover"
+                  :src="row.track.cover"
                   :class="['shrink-0', isCompactList ? 'size-9 rounded-md' : 'size-12 rounded-lg']"
                 />
                 <div class="flex-1 min-w-0">
@@ -683,37 +751,41 @@ defineExpose({
                       :class="[
                         'font-medium truncate',
                         isCompactList ? 'text-sm' : 'text-base',
-                        playingId === item.id ? 'text-primary' : '',
+                        playingId === row.track.id ? 'text-primary' : '',
                       ]"
                     >
-                      {{ item.title }}
+                      {{ row.track.title }}
                     </span>
                     <IconLucideCloud
-                      v-if="item.cloud"
+                      v-if="row.track.cloud"
                       class="size-3.5 shrink-0 self-center"
                       :class="
-                        playingId === item.id ? 'text-primary/60' : 'text-on-surface-variant/60'
+                        playingId === row.track.id
+                          ? 'text-primary/60'
+                          : 'text-on-surface-variant/60'
                       "
                     />
                     <span
-                      v-if="item.comment && settings.preset.showSubtitle"
+                      v-if="row.track.comment && settings.preset.showSubtitle"
                       class="flex-1 min-w-0 text-base truncate"
                       :class="
-                        playingId === item.id ? 'text-primary/60' : 'text-on-surface-variant/60'
+                        playingId === row.track.id
+                          ? 'text-primary/60'
+                          : 'text-on-surface-variant/60'
                       "
                     >
-                      ({{ item.comment }})
+                      ({{ row.track.comment }})
                     </span>
                   </div>
                   <div
                     :class="[
                       'truncate flex items-center gap-1',
                       isCompactList ? 'text-xs mt-0.5' : 'text-sm mt-1',
-                      playingId === item.id ? 'text-primary/70' : 'text-on-surface-variant',
+                      playingId === row.track.id ? 'text-primary/70' : 'text-on-surface-variant',
                     ]"
                   >
                     <STag
-                      v-if="downloadStore.isDownloaded(item)"
+                      v-if="downloadStore.isDownloaded(row.track)"
                       type="primary"
                       variant="soft"
                       size="tiny"
@@ -723,16 +795,16 @@ defineExpose({
                       <IconLucideCheck class="size-3" aria-hidden="true" />
                     </STag>
                     <STag
-                      v-if="item.quality && !settings.preset.hideQualityTag"
-                      :type="isLosslessQuality(item.quality) ? 'warning' : 'default'"
+                      v-if="row.track.quality && !settings.preset.hideQualityTag"
+                      :type="isLosslessQuality(row.track.quality) ? 'warning' : 'default'"
                       variant="outline"
                       size="tiny"
                       class="shrink-0"
                     >
-                      {{ getQualityLabel(item.quality) }}
+                      {{ getQualityLabel(row.track.quality) }}
                     </STag>
                     <STag
-                      v-if="item.fee === 1 && !settings.preset.hideVipTag"
+                      v-if="row.track.fee === 1 && !settings.preset.hideVipTag"
                       type="error"
                       variant="outline"
                       size="tiny"
@@ -741,7 +813,7 @@ defineExpose({
                       VIP
                     </STag>
                     <STag
-                      v-else-if="item.fee === 4 && !settings.preset.hideVipTag"
+                      v-else-if="row.track.fee === 4 && !settings.preset.hideVipTag"
                       type="error"
                       variant="outline"
                       size="tiny"
@@ -750,21 +822,23 @@ defineExpose({
                       EP
                     </STag>
                     <span class="truncate">
-                      <template v-for="(artist, i) in item.artists" :key="artist.id ?? i">
+                      <template v-for="(artist, i) in row.track.artists" :key="artist.id ?? i">
                         <span
                           class="transition-opacity"
                           :class="
-                            isArtistLinkable(item, artist)
+                            isArtistLinkable(row.track, artist)
                               ? 'cursor-pointer hover:opacity-70'
                               : 'opacity-50'
                           "
-                          @click.stop="goArtist(item, artist)"
+                          @click.stop="goArtist(row.track, artist)"
                         >
                           {{ artist.name }}
                         </span>
-                        <span v-if="i < item.artists.length - 1" class="mx-0.5 opacity-50">/</span>
+                        <span v-if="i < row.track.artists.length - 1" class="mx-0.5 opacity-50">
+                          /
+                        </span>
                       </template>
-                      <span v-if="!item.artists?.length" class="opacity-50">
+                      <span v-if="!row.track.artists?.length" class="opacity-50">
                         {{ t("playlist.unknownArtist") }}
                       </span>
                     </span>
@@ -775,19 +849,21 @@ defineExpose({
               <div
                 v-if="showAlbum"
                 class="flex-1 min-w-0 truncate text-sm"
-                :class="playingId === item.id ? 'text-primary/70' : 'text-on-surface'"
+                :class="playingId === row.track.id ? 'text-primary/70' : 'text-on-surface'"
               >
                 <span
                   class="transition-opacity"
-                  :class="isAlbumLinkable(item) ? 'cursor-pointer hover:opacity-70' : 'opacity-50'"
-                  @click.stop="goAlbum(item)"
+                  :class="
+                    isAlbumLinkable(row.track) ? 'cursor-pointer hover:opacity-70' : 'opacity-50'
+                  "
+                  @click.stop="goAlbum(row.track)"
                 >
-                  {{ item.album?.name || t("collection.unknownAlbum") }}
+                  {{ row.track.album?.name || t("collection.unknownAlbum") }}
                 </span>
               </div>
               <!-- 收藏 -->
               <div
-                v-if="!batch.active.value && item.source !== 'plugin'"
+                v-if="!batch.active.value && row.track.source !== 'plugin'"
                 class="w-12 shrink-0 flex items-center justify-center"
                 @click.stop
               >
@@ -797,11 +873,11 @@ defineExpose({
                   circle
                   :size="28"
                   :icon-size="20"
-                  :disabled="!fav.isSupported(item)"
-                  @click="fav.toggle(item)"
+                  :disabled="!fav.isSupported(row.track)"
+                  @click="fav.toggle(row.track)"
                 >
                   <template #icon>
-                    <SIconSwap :active="fav.isLiked(item)">
+                    <SIconSwap :active="fav.isLiked(row.track)">
                       <template #on><IconMaterialSymbolsFavoriteRounded /></template>
                       <template #off><IconMaterialSymbolsFavoriteOutlineRounded /></template>
                     </SIconSwap>
@@ -813,17 +889,17 @@ defineExpose({
               <div
                 v-if="showDuration"
                 class="w-16 shrink-0 text-center text-sm tabular-nums"
-                :class="playingId === item.id ? 'text-primary/60' : 'text-on-surface-variant'"
+                :class="playingId === row.track.id ? 'text-primary/60' : 'text-on-surface-variant'"
               >
-                {{ formatTime(item.duration) }}
+                {{ formatTime(row.track.duration) }}
               </div>
               <!-- 文件大小 -->
               <div
                 v-if="showSize"
                 class="w-16 shrink-0 text-center text-sm tabular-nums"
-                :class="playingId === item.id ? 'text-primary/60' : 'text-on-surface-variant'"
+                :class="playingId === row.track.id ? 'text-primary/60' : 'text-on-surface-variant'"
               >
-                {{ item.fileSize ? formatFileSize(item.fileSize) : "" }}
+                {{ row.track.fileSize ? formatFileSize(row.track.fileSize) : "" }}
               </div>
             </div>
           </div>
diff --git a/src/components/ui/SVirtualList.spec.ts b/src/components/ui/SVirtualList.spec.ts
new file mode 100644
index 000000000..9df7af0ca
--- /dev/null
+++ b/src/components/ui/SVirtualList.spec.ts
@@ -0,0 +1,59 @@
+import { mount } from "@vue/test-utils";
+import { ref } from "vue";
+import { describe, expect, it, vi } from "vitest";
+import SVirtualList from "./SVirtualList.vue";
+
+vi.mock("@vueuse/core", () => ({
+  useElementSize: () => ({ height: ref(240) }),
+  useDebounceFn: (fn: () => void) => fn,
+}));
+
+describe("虚拟列表精确行高", () => {
+  it("按标题和歌曲的不同高度计算偏移、总高和定位", async () => {
+    const wrapper = mount(SVirtualList, {
+      props: {
+        items: ["disc", "song", "song", "disc", "song"],
+        itemHeight: 88,
+        itemFixed: true,
+        getItemHeight: (item) => (item === "disc" ? 40 : 88),
+      },
+      slots: { default: "<div>{{ params.item }}</div>" },
+    });
+    await wrapper.vm.$nextTick();
+    expect([0, 1, 2, 3, 4].map((index) => wrapper.vm.getItemTop(index))).toEqual([
+      0, 40, 128, 216, 256,
+    ]);
+    expect(wrapper.html()).toContain("height: 344px");
+    const scrollTo = vi.fn();
+    wrapper.vm.scrollRef!.scrollTo = scrollTo;
+    wrapper.vm.scrollToIndex(4);
+    expect(scrollTo).toHaveBeenCalledWith({ top: 256, behavior: "auto" });
+    expect(wrapper.vm.getDropInfoByOffset(230)).toEqual({ index: 3, position: "top" });
+    expect(wrapper.vm.getDropInfoByOffset(245)).toEqual({ index: 3, position: "bottom" });
+
+    await wrapper.setProps({ items: ["disc", "song"] });
+    expect(wrapper.vm.getItemTop(1)).toBe(40);
+    expect(wrapper.html()).toContain("height: 128px");
+    wrapper.unmount();
+  });
+
+  it("切换紧凑样式或恢复普通等高列表时重新计算位置", async () => {
+    const songHeight = ref(88);
+    const wrapper = mount(SVirtualList, {
+      props: {
+        items: ["disc", "song", "song"],
+        itemHeight: songHeight.value,
+        itemFixed: true,
+        getItemHeight: (item) => (item === "disc" ? 40 : songHeight.value),
+      },
+    });
+    songHeight.value = 56;
+    await wrapper.setProps({ itemHeight: songHeight.value });
+    expect(wrapper.vm.getItemTop(2)).toBe(96);
+    expect(wrapper.html()).toContain("height: 152px");
+    await wrapper.setProps({ getItemHeight: undefined });
+    expect(wrapper.vm.getItemTop(2)).toBe(112);
+    expect(wrapper.html()).toContain("height: 168px");
+    wrapper.unmount();
+  });
+});
diff --git a/src/components/ui/SVirtualList.vue b/src/components/ui/SVirtualList.vue
index 2a869d695..1376c5b4b 100644
--- a/src/components/ui/SVirtualList.vue
+++ b/src/components/ui/SVirtualList.vue
@@ -19,6 +19,8 @@ export interface SVirtualListProps<T> {
   itemHeight: number;
   /** 定高模式（跳过 DOM 测量，性能更佳） */
   itemFixed?: boolean;
+  /** 按数据提供精确行高，跳过 DOM 测量 */
+  getItemHeight?: (item: T, index: number) => number;
   /** 容器高度，支持 CSS 值 */
   height?: number | string;
   /** 顶部内边距（px） */
@@ -67,24 +69,32 @@ const containerHeightStyle = computed(() =>
 
 const viewportHeight = computed(() => scrollViewportHeight.value || 0);
 
+/** 全部行等高时直接按索引计算位置 */
+const uniformHeight = computed(() => props.itemFixed && !props.getItemHeight);
+
 // 每项实际高度、累积顶部位置（仅动态高度模式）
 const itemHeights = shallowRef<number[]>([]);
 const itemTops = shallowRef<number[]>([]);
 
-/** 初始化高度数组，复用已测量的值 */
+/** 初始化精确行高或复用已测量的行高 */
 const initializeHeights = (): void => {
-  if (props.itemFixed) return;
+  if (uniformHeight.value) return;
   const length = props.items.length;
-  if (itemHeights.value.length !== length) {
+  if (props.getItemHeight) {
+    itemHeights.value = props.items.map(props.getItemHeight);
+  } else if (itemHeights.value.length !== length) {
     const old = itemHeights.value;
     itemHeights.value = Array.from({ length }, (_, idx) => old[idx] || props.itemHeight);
   }
   updateTops();
 };
 
-/** 从指定索引开始重算累积位置 */
+/**
+ * 从指定索引开始重算累积位置
+ * @param fromIndex - 开始重算的行索引
+ */
 const updateTops = (fromIndex = 0): void => {
-  if (props.itemFixed) return;
+  if (uniformHeight.value) return;
   const heights = itemHeights.value;
   const tops =
     itemTops.value.length === heights.length ? itemTops.value : new Array<number>(heights.length);
@@ -97,7 +107,7 @@ const updateTops = (fromIndex = 0): void => {
 };
 
 const totalHeight = computed(() => {
-  if (props.itemFixed) {
+  if (uniformHeight.value) {
     return props.items.length * props.itemHeight + props.paddingTop;
   }
   if (itemTops.value.length === 0) return props.paddingTop;
@@ -108,7 +118,10 @@ const totalHeight = computed(() => {
 const actualStartIndex = ref(0);
 const actualEndIndex = ref(0);
 
-/** 根据滚动位置计算可见范围，动态高度使用二分查找 */
+/**
+ * 根据滚动位置计算可见范围，不等高行使用二分查找
+ * @param currentScrollTop - 当前滚动偏移，单位为像素
+ */
 const calculateVisibleRange = (currentScrollTop: number): void => {
   if (props.items.length === 0) {
     actualStartIndex.value = 0;
@@ -124,7 +137,7 @@ const calculateVisibleRange = (currentScrollTop: number): void => {
   let startIndex = 0;
   let endIndex = 0;
 
-  if (props.itemFixed) {
+  if (uniformHeight.value) {
     startIndex = Math.floor(effectiveScroll / props.itemHeight);
     endIndex = startIndex + Math.ceil(vHeight / props.itemHeight);
   } else {
@@ -174,7 +187,8 @@ const visibleItems = computed(() => {
 
 /** 测量可见项的真实 DOM 高度，允许 0.5px 误差 */
 const measureItemHeights = (): void => {
-  if (props.itemFixed || !itemRefs.value.length || props.items.length === 0) return;
+  if (props.itemFixed || props.getItemHeight || !itemRefs.value.length || props.items.length === 0)
+    return;
   let hasChanges = false;
   itemRefs.value.forEach((element) => {
     if (!element) return;
@@ -221,19 +235,27 @@ const handleScroll = (event: Event): void => {
   }
 };
 
-/** 获取指定索引项的顶部偏移（含 paddingTop） */
+/**
+ * 获取指定行的顶部偏移
+ * @param index - 行索引
+ * @returns 包含顶部内边距的像素偏移
+ */
 const getItemTop = (index: number): number => {
-  if (props.itemFixed) return index * props.itemHeight + props.paddingTop;
+  if (uniformHeight.value) return index * props.itemHeight + props.paddingTop;
   return (itemTops.value[index] || 0) + props.paddingTop;
 };
 
-/** 根据 Y 轴偏移量计算放置位置（供拖拽排序使用） */
+/**
+ * 根据纵向偏移计算拖拽放置位置
+ * @param offsetY - 相对列表顶部的像素偏移
+ * @returns 命中的行索引及放置方向
+ */
 const getDropInfoByOffset = (offsetY: number): { index: number; position: "top" | "bottom" } => {
   const len = props.items.length;
   if (len === 0) return { index: 0, position: "top" };
   // 扣掉 paddingTop，落到 itemTops 坐标系
   const adjusted = offsetY - props.paddingTop;
-  if (props.itemFixed) {
+  if (uniformHeight.value) {
     const index = Math.floor(adjusted / props.itemHeight);
     const remainder = ((adjusted % props.itemHeight) + props.itemHeight) % props.itemHeight;
     const position = remainder < props.itemHeight / 2 ? "top" : "bottom";
@@ -267,12 +289,16 @@ const scrollToPosition = (top: number, behavior: ScrollBehavior = "auto"): void
   scrollRef.value?.scrollTo({ top, behavior });
 };
 
-/** 滚动到指定索引项 */
+/**
+ * 滚动到指定行
+ * @param index - 目标行索引
+ * @param behavior - 浏览器滚动方式
+ */
 const scrollToIndex = (index: number, behavior: ScrollBehavior = "auto"): void => {
   if (props.items.length === 0) return;
   const targetIndex = Math.max(0, Math.min(index, props.items.length - 1));
   let top = 0;
-  if (props.itemFixed) {
+  if (uniformHeight.value) {
     top = targetIndex * props.itemHeight;
   } else {
     if (itemTops.value.length <= targetIndex) initializeHeights();
@@ -285,7 +311,7 @@ const scrollToIndex = (index: number, behavior: ScrollBehavior = "auto"): void =
 const getScrollTop = (): number => scrollTop.value;
 
 watch(
-  () => props.items,
+  () => [props.items, props.itemHeight, props.itemFixed, props.getItemHeight],
   () => {
     initializeHeights();
     calculateVisibleRange(scrollTop.value);
@@ -309,7 +335,7 @@ watch(viewportHeight, () => {
 watch(
   () => [actualStartIndex.value, actualEndIndex.value],
   () => {
-    if (!props.itemFixed) nextTick(debouncedMeasure);
+    if (!props.itemFixed && !props.getItemHeight) nextTick(debouncedMeasure);
   },
   { flush: "post" },
 );
@@ -319,7 +345,7 @@ onMounted(() => {
   calculateVisibleRange(0);
   if (props.defaultScrollIndex) scrollToIndex(props.defaultScrollIndex);
   nextTick(() => {
-    if (!props.itemFixed) measureItemHeights();
+    if (!props.itemFixed && !props.getItemHeight) measureItemHeights();
     // 重新计算
     if (viewportHeight.value > 0) calculateVisibleRange(scrollTop.value);
   });
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 4fa03785a..e34f5d97d 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -2265,6 +2265,7 @@
     }
   },
   "collection": {
+    "disc": "Disc {disc}",
     "totalDuration": "About {time}",
     "unknownAlbum": "Unknown Album",
     "empty": "No songs",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 073dee27a..737393c4b 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -2265,6 +2265,7 @@
     }
   },
   "collection": {
+    "disc": "Disc {disc}",
     "totalDuration": "约 {time}",
     "unknownAlbum": "未知专辑",
     "empty": "暂无歌曲",
diff --git a/src/utils/format/netease.spec.ts b/src/utils/format/netease.spec.ts
index 85b47b9dc..e63e2972b 100644
--- a/src/utils/format/netease.spec.ts
+++ b/src/utils/format/netease.spec.ts
@@ -29,3 +29,30 @@ describe("NCM歌曲歌手格式化", () => {
     });
   });
 });
+
+describe("NCM 专辑分碟信息", () => {
+  it("保留碟片完整名称和平台曲序", () => {
+    expect(
+      songToTrack({
+        id: 1970550394,
+        name: "GLORIA",
+        cd: " 2 天堂的回信 Letters from Heaven ",
+        no: 8,
+      }),
+    ).toMatchObject({
+      disc: "2 天堂的回信 Letters from Heaven",
+      track: 8,
+    });
+  });
+
+  it("缺失或空白碟号保持未指定，无效曲序不作为零号显示", () => {
+    expect(songToTrack({ id: 1, name: "单曲", cd: " ", no: 0 })).toMatchObject({
+      disc: undefined,
+      track: undefined,
+    });
+    expect(songToTrack({ id: 2, name: "旧接口歌曲" })).toMatchObject({
+      disc: undefined,
+      track: undefined,
+    });
+  });
+});
diff --git a/src/utils/format/netease.ts b/src/utils/format/netease.ts
index f949d8ec4..d34a3ccdb 100644
--- a/src/utils/format/netease.ts
+++ b/src/utils/format/netease.ts
@@ -89,6 +89,8 @@ export const songToTrack = (song: NeteaseSong): Track => {
       .filter((artist) => artist.name?.trim())
       .map((artist) => ({ id: String(artist.id), name: artist.name.trim() })),
     album: album ? { id: String(album.id), name: album.name, cover } : undefined,
+    disc: song.cd?.trim() || undefined,
+    track: song.no && song.no > 0 ? song.no : undefined,
     duration: song.dt ?? song.duration ?? 0,
     cover,
     coverOriginal,