From 97c0f4e61b92aedfc0b8db04eca88f2cf3e164dc Mon Sep 17 00:00:00 2001
From: WindDrift <115442729+WindDrift@users.noreply.github.com>
Date: Wed, 22 Jul 2026 21:35:10 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat(comment):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E6=AD=8C=E6=9B=B2=E8=AF=84=E8=AE=BA=E9=A1=B5?=
 =?UTF-8?q?=E4=B8=8E=E5=85=A8=E5=B1=8F=E5=86=85=E5=B5=8C=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 electron/main/ipc/comments.ts                 |  23 +-
 electron/main/services/comments/creator.ts    | 155 ++++++++++++
 electron/main/services/comments/data.ts       |  11 +
 electron/main/services/comments/index.ts      |  38 ++-
 electron/preload/index.ts                     |   4 +-
 shared/types/comment.ts                       |  12 +
 src/components/comments/CommentCard.vue       |  69 +++++
 src/components/comments/CommentList.vue       |  42 ++++
 src/components/modals/MusicCommentsDialog.vue |   4 +
 .../player/FullPlayer/FullPlayerComments.vue  | 172 +++++++++++++
 src/components/player/FullPlayer/index.vue    |  64 ++++-
 src/composables/useMusicComments.ts           | 209 ++++++++++++++++
 src/composables/useTrackMenu.ts               |  16 +-
 src/i18n/locales/en-US.json                   |   7 +-
 src/i18n/locales/zh-CN.json                   |   7 +-
 src/pages/Comments.vue                        | 236 ++++++++++++++++++
 src/router/index.ts                           |   5 +
 src/services/commentPageSnapshot.ts           |  22 ++
 src/stores/status.ts                          |   3 +
 19 files changed, 1076 insertions(+), 23 deletions(-)
 create mode 100644 electron/main/services/comments/creator.ts
 create mode 100644 src/components/comments/CommentCard.vue
 create mode 100644 src/components/comments/CommentList.vue
 create mode 100644 src/components/player/FullPlayer/FullPlayerComments.vue
 create mode 100644 src/composables/useMusicComments.ts
 create mode 100644 src/pages/Comments.vue
 create mode 100644 src/services/commentPageSnapshot.ts

diff --git a/electron/main/ipc/comments.ts b/electron/main/ipc/comments.ts
index e4dbdbf0..85b54b8e 100644
--- a/electron/main/ipc/comments.ts
+++ b/electron/main/ipc/comments.ts
@@ -1,7 +1,13 @@
 import { ipcMain } from "electron";
 import { getCommentSources, getMusicComments } from "@main/services/comments";
+import { getCreatorComments } from "@main/services/comments/creator";
 import { coreLog } from "@main/utils/logger";
-import type { MusicCommentQuery, MusicCommentResponse } from "@shared/types/comment";
+import type {
+  MusicCommentCreatorQuery,
+  MusicCommentCreatorResponse,
+  MusicCommentQuery,
+  MusicCommentResponse,
+} from "@shared/types/comment";
 
 /** 注册评论 IPC */
 export const registerCommentsIpc = (): void => {
@@ -18,4 +24,19 @@ export const registerCommentsIpc = (): void => {
       }
     },
   );
+
+  ipcMain.handle(
+    "comments:creator",
+    async (
+      _evt,
+      args: MusicCommentCreatorQuery,
+    ): Promise<MusicCommentCreatorResponse> => {
+      try {
+        return { ok: true, data: await getCreatorComments(args) };
+      } catch (err) {
+        coreLog.warn("[comments] creator failed:", err);
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+      }
+    },
+  );
 };
diff --git a/electron/main/services/comments/creator.ts b/electron/main/services/comments/creator.ts
new file mode 100644
index 00000000..dfa8873e
--- /dev/null
+++ b/electron/main/services/comments/creator.ts
@@ -0,0 +1,155 @@
+import { callNetease } from "@main/apis/netease";
+import { coreLog } from "@main/utils/logger";
+import type {
+  MusicCommentCreatorQuery,
+  MusicCommentItem,
+} from "@shared/types/comment";
+import { normalizeNeteaseCommentPage, scanCreatorComments } from "./data";
+import { findNeteaseSongMeta } from "./index";
+
+const NETEASE_SOURCE_ID = "builtin:netease";
+const NETEASE_RESOURCE_TYPE = "R_SO_4_";
+const HOT_LIMIT = 20;
+/** 首屏前两页未命中时，最多额外翻页数 */
+const MAX_EXTRA_PAGES = 3;
+const ARTIST_ACCOUNT_CACHE_LIMIT = 200;
+const CREATOR_COMMENTS_CACHE_LIMIT = 100;
+
+/**
+ * 简易有界 LRU Map
+ * Map 保持插入顺序，访问时移到末尾，超限时删除首项
+ */
+class BoundedMap<K, V> {
+  private readonly map = new Map<K, V>();
+  constructor(private readonly limit: number) {}
+
+  has(key: K): boolean {
+    return this.map.has(key);
+  }
+
+  get(key: K): V | undefined {
+    const v = this.map.get(key);
+    if (v !== undefined && this.map.size > 1) {
+      this.map.delete(key);
+      this.map.set(key, v);
+    }
+    return v;
+  }
+
+  set(key: K, value: V): void {
+    if (this.map.has(key)) this.map.delete(key);
+    this.map.set(key, value);
+    while (this.map.size > this.limit) {
+      const first = this.map.keys().next().value;
+      if (first === undefined) break;
+      this.map.delete(first);
+    }
+  }
+}
+
+/** artist id → 绑定的网易云用户 accountId（null 表示负缓存：未绑定） */
+const artistAccountIdCache = new BoundedMap<string, string | null>(
+  ARTIST_ACCOUNT_CACHE_LIMIT,
+);
+/** 网易云 songId → 主创评论列表（空数组表示负缓存：无主创评论） */
+const creatorCommentsCache = new BoundedMap<string, MusicCommentItem[]>(
+  CREATOR_COMMENTS_CACHE_LIMIT,
+);
+
+/** 拉取一页热门评论（归一化后返回） */
+const fetchHotPage = async (
+  songId: string,
+  page: number,
+): Promise<{ items: MusicCommentItem[]; hasMore: boolean }> => {
+  const { body } = await callNetease("comment_hot", {
+    id: songId,
+    type: NETEASE_RESOURCE_TYPE,
+    limit: HOT_LIMIT,
+    offset: (page - 1) * HOT_LIMIT,
+  });
+  const normalized = normalizeNeteaseCommentPage(body, "hot", page, HOT_LIMIT);
+  const hasMore = Boolean(body?.hasMore ?? body?.data?.hasMore ?? false);
+  return { items: normalized.list, hasMore };
+};
+
+/**
+ * 解析歌手列表对应的网易云用户 accountId 集合
+ * 多歌手多账号匹配并去重；accountId 为 0 或不存在视为未绑定（负缓存）
+ */
+const resolveArtistAccountIds = async (
+  artistIds: string[],
+): Promise<Set<string>> => {
+  const accountIds = new Set<string>();
+  for (const artistId of artistIds) {
+    if (!artistId) continue;
+    const cached = artistAccountIdCache.get(artistId);
+    if (cached !== undefined) {
+      if (cached) accountIds.add(cached);
+      continue;
+    }
+    try {
+      const { body } = await callNetease("artists", { id: artistId });
+      const raw = body?.artist?.accountId;
+      const normalized =
+        typeof raw === "number" && raw > 0
+          ? String(raw)
+          : typeof raw === "string" && raw
+            ? raw
+            : null;
+      artistAccountIdCache.set(artistId, normalized);
+      if (normalized) accountIds.add(normalized);
+    } catch (err) {
+      coreLog.warn(
+        `[comments] resolve artist ${artistId} accountId failed:`,
+        err,
+      );
+      artistAccountIdCache.set(artistId, null);
+    }
+  }
+  return accountIds;
+};
+
+/**
+ * 获取「主创说」评论：歌曲关联歌手在网易云绑定的账号，在该歌曲热门评论中的发言
+ * 仅网易云内建源启用；前两页必拉，未命中且 hasMore 时额外翻页最多 MAX_EXTRA_PAGES 页
+ */
+export const getCreatorComments = async (
+  args: MusicCommentCreatorQuery,
+): Promise<MusicCommentItem[]> => {
+  if (args.sourceId !== NETEASE_SOURCE_ID) return [];
+
+  const meta = await findNeteaseSongMeta(args.track);
+  if (!meta) return [];
+  const { songId, artistIds } = meta;
+
+  const cached = creatorCommentsCache.get(songId);
+  if (cached) return cached;
+
+  const accountIds = await resolveArtistAccountIds(artistIds);
+  if (accountIds.size === 0) {
+    creatorCommentsCache.set(songId, []);
+    return [];
+  }
+
+  const result: MusicCommentItem[] = [];
+  let hasMore = true;
+  // 前两页必拉，收集全部命中
+  for (let page = 1; page <= 2 && hasMore; page++) {
+    const { items, hasMore: hm } = await fetchHotPage(songId, page);
+    result.push(...scanCreatorComments(items, accountIds));
+    hasMore = hm;
+  }
+  // 前两页无命中 + 还有更多 → 额外翻页，命中即停
+  if (result.length === 0 && hasMore) {
+    for (let extra = 1; extra <= MAX_EXTRA_PAGES && hasMore; extra++) {
+      const { items, hasMore: hm } = await fetchHotPage(songId, 2 + extra);
+      const hits = scanCreatorComments(items, accountIds);
+      result.push(...hits);
+      hasMore = hm;
+      if (hits.length > 0) break;
+    }
+  }
+
+  creatorCommentsCache.set(songId, result);
+  return result;
+};
diff --git a/electron/main/services/comments/data.ts b/electron/main/services/comments/data.ts
index 7a9828bf..5792fdf1 100644
--- a/electron/main/services/comments/data.ts
+++ b/electron/main/services/comments/data.ts
@@ -104,6 +104,17 @@ export const normalizeNeteaseCommentPage = (
   };
 };
 
+/** 纯函数：从已归一化的评论中筛选主创评论（userId 命中账号集合） */
+export const scanCreatorComments = (
+  items: MusicCommentItem[],
+  accountIds: Set<string>,
+): MusicCommentItem[] => {
+  if (accountIds.size === 0) return [];
+  return items.filter(
+    (item) => item.userId != null && accountIds.has(item.userId),
+  );
+};
+
 /** 构建可用评论源 */
 export const buildCommentSources = (
   plugins: Array<
diff --git a/electron/main/services/comments/index.ts b/electron/main/services/comments/index.ts
index 0bbe8eef..2797435a 100644
--- a/electron/main/services/comments/index.ts
+++ b/electron/main/services/comments/index.ts
@@ -68,8 +68,21 @@ const findPluginMatch = async (
   return pickBestCandidate(candidates, track)?.extra ?? null;
 };
 
-const findNeteaseId = async (track: Track): Promise<string | null> => {
-  if (track.source === "netease" && track.id) return track.id;
+/**
+ * 解析 Track 对应的网易云歌曲元信息：songId + 歌手 id 列表
+ * 一次 search 同时取两者，避免主创说二次搜索
+ */
+export const findNeteaseSongMeta = async (
+  track: Track,
+): Promise<{ songId: string; artistIds: string[] } | null> => {
+  if (track.source === "netease" && track.id) {
+    return {
+      songId: track.id,
+      artistIds: track.artists
+        .map((a) => a.id)
+        .filter((id): id is string => !!id),
+    };
+  }
   const keyword = toKeyword(track);
   if (!keyword) return null;
   const { status, body } = await callNetease("search", {
@@ -79,11 +92,11 @@ const findNeteaseId = async (track: Track): Promise<string | null> => {
   });
   if (status !== 200) return null;
   const songs = body.result?.songs ?? [];
-  const candidates: LyricCandidate<{ id: string }>[] = songs.map(
+  const candidates: LyricCandidate<{ id: string; artistIds: string[] }>[] = songs.map(
     (song: {
       id: string | number;
       name?: string;
-      artists?: { name: string }[];
+      artists?: { id?: string | number; name: string }[];
       album?: { name?: string };
       duration?: number;
     }) => ({
@@ -91,10 +104,23 @@ const findNeteaseId = async (track: Track): Promise<string | null> => {
       artist: (song.artists ?? []).map((artist) => artist.name).join(" / "),
       album: song.album?.name,
       duration: song.duration,
-      extra: { id: String(song.id) },
+      extra: {
+        id: String(song.id),
+        artistIds: (song.artists ?? [])
+          .map((a) => (a.id ? String(a.id) : ""))
+          .filter(Boolean),
+      },
     }),
   );
-  return pickBestCandidate(candidates, track)?.extra.id ?? null;
+  const best = pickBestCandidate(candidates, track)?.extra;
+  if (!best) return null;
+  return { songId: best.id, artistIds: best.artistIds };
+};
+
+/** 取网易云歌曲 id（薄包装，供普通评论拉取复用） */
+const findNeteaseId = async (track: Track): Promise<string | null> => {
+  const meta = await findNeteaseSongMeta(track);
+  return meta?.songId ?? null;
 };
 
 const getNeteaseComments = async (args: MusicCommentQuery): Promise<MusicCommentPage> => {
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index bd2db81d..1ebbd9d7 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -15,7 +15,7 @@ import type { PlayEventInput, FavoriteEventInput } from "@shared/types/stats";
 import type { TagEditRequest } from "@shared/types/tagEditor";
 import type { UpdateEvent } from "@shared/types/update";
 import type { CloudUploadProgress } from "@shared/types/cloudUpload";
-import type { MusicCommentQuery } from "@shared/types/comment";
+import type { MusicCommentCreatorQuery, MusicCommentQuery } from "@shared/types/comment";
 import type { AiModelSaveInput } from "@shared/types/ai";
 
 /** 订阅主进程推送的事件 */
@@ -369,6 +369,8 @@ const api = {
   comments: {
     sources: () => ipcRenderer.invoke("comments:sources"),
     get: (args: MusicCommentQuery) => ipcRenderer.invoke("comments:get", args),
+    creator: (args: MusicCommentCreatorQuery) =>
+      ipcRenderer.invoke("comments:creator", args),
   },
   download: {
     // 入队下载
diff --git a/shared/types/comment.ts b/shared/types/comment.ts
index c8317f2e..4e38738c 100644
--- a/shared/types/comment.ts
+++ b/shared/types/comment.ts
@@ -54,8 +54,20 @@ export type MusicCommentResponse =
   | { ok: true; data: MusicCommentPage }
   | { ok: false; error: string };
 
+/** 主创说查询参数 */
+export interface MusicCommentCreatorQuery {
+  sourceId: string;
+  track: Track;
+}
+
+/** 主创说 IPC 响应 */
+export type MusicCommentCreatorResponse =
+  | { ok: true; data: MusicCommentItem[] }
+  | { ok: false; error: string };
+
 /** 渲染端评论 API */
 export interface CommentsApi {
   sources: () => Promise<CommentSource[]>;
   get: (args: MusicCommentQuery) => Promise<MusicCommentResponse>;
+  creator: (args: MusicCommentCreatorQuery) => Promise<MusicCommentCreatorResponse>;
 }
diff --git a/src/components/comments/CommentCard.vue b/src/components/comments/CommentCard.vue
new file mode 100644
index 00000000..fcef2c84
--- /dev/null
+++ b/src/components/comments/CommentCard.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { MusicCommentItem } from "@shared/types/comment";
+import { formatDate } from "@/utils/time";
+import IconLucideThumbsUp from "~icons/lucide/thumbs-up";
+
+interface Props {
+  /** 评论数据 */
+  item: MusicCommentItem;
+  /** 是否显示主创徽章 */
+  creator?: boolean;
+  /** 紧凑模式（缩减间距） */
+  compact?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  creator: false,
+  compact: false,
+});
+</script>
+
+<template>
+  <SCard size="small" radius="lg">
+    <div :class="compact ? 'flex gap-2.5' : 'flex gap-3'">
+      <SImg
+        v-if="item.avatar"
+        :src="item.avatar"
+        class="h-9 w-9 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/10"
+        alt=""
+      />
+      <div v-else class="h-9 w-9 shrink-0 rounded-full bg-on-surface/8" />
+      <div class="min-w-0 flex-1">
+        <div class="flex items-start justify-between gap-3">
+          <div class="min-w-0">
+            <div class="flex items-center gap-1.5">
+              <span class="truncate text-sm font-medium">{{ item.userName }}</span>
+              <STag v-if="creator" type="primary" variant="soft" size="tiny" round>
+                {{ $t("comments.creatorBadge") }}
+              </STag>
+            </div>
+            <div class="mt-0.5 flex gap-2 text-xs text-on-surface-variant">
+              <span v-if="item.time">{{ formatDate(item.time) }}</span>
+              <span v-if="item.location">
+                {{ $t("comments.location", { location: item.location }) }}
+              </span>
+            </div>
+          </div>
+          <div
+            v-if="item.likedCount != null"
+            class="flex shrink-0 items-center gap-1 text-xs tabular-nums text-on-surface-variant"
+          >
+            <IconLucideThumbsUp class="size-3.5" />
+            <span>{{ item.likedCount }}</span>
+          </div>
+        </div>
+        <p class="mt-2 whitespace-pre-wrap break-words text-sm leading-6">{{ item.text }}</p>
+        <div v-if="item.reply?.length" class="mt-2 rounded-md bg-on-surface/5 px-3 py-2">
+          <div
+            v-for="reply in item.reply"
+            :key="reply.id"
+            class="text-xs leading-5 text-on-surface-variant"
+          >
+            <span class="font-medium text-on-surface">{{ reply.userName }}：</span>
+            {{ reply.text }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </SCard>
+</template>
diff --git a/src/components/comments/CommentList.vue b/src/components/comments/CommentList.vue
new file mode 100644
index 00000000..a389b3bd
--- /dev/null
+++ b/src/components/comments/CommentList.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { MusicCommentItem } from "@shared/types/comment";
+import CommentCard from "./CommentCard.vue";
+
+interface Props {
+  /** 评论列表 */
+  items: MusicCommentItem[];
+  /** 最小列宽（px），容器更宽时自动增加列数 */
+  columnMinWidth?: number;
+  /** 主创评论 id 集合，命中时卡片显示主创徽章 */
+  creatorIds?: Set<string>;
+  /** 紧凑模式透传给 CommentCard */
+  compact?: boolean;
+  /** 列间距（px） */
+  gap?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columnMinWidth: 280,
+  creatorIds: () => new Set<string>(),
+  compact: false,
+  gap: 12,
+});
+
+const gridStyle = computed(() => ({
+  display: "grid",
+  gridTemplateColumns: `repeat(auto-fill, minmax(${props.columnMinWidth}px, 1fr))`,
+  gap: `${props.gap}px`,
+}));
+</script>
+
+<template>
+  <div :style="gridStyle">
+    <CommentCard
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      :creator="creatorIds.has(item.id)"
+      :compact="compact"
+    />
+  </div>
+</template>
diff --git a/src/components/modals/MusicCommentsDialog.vue b/src/components/modals/MusicCommentsDialog.vue
index 8f6fe7a4..b728c912 100644
--- a/src/components/modals/MusicCommentsDialog.vue
+++ b/src/components/modals/MusicCommentsDialog.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * @deprecated 歌曲评论主入口已迁移至 /comments 路由（Comments.vue）与全屏内嵌面板（FullPlayerComments.vue）
+ * 本组件保留挂载于 MainLayout 以兼容旧入口，不再扩展新功能
+ */
 import type { CommentSource, MusicCommentPage } from "@shared/types/comment";
 import { useStatusStore } from "@/stores/status";
 import { toast } from "@/composables/useToast";
diff --git a/src/components/player/FullPlayer/FullPlayerComments.vue b/src/components/player/FullPlayer/FullPlayerComments.vue
new file mode 100644
index 00000000..5373cb70
--- /dev/null
+++ b/src/components/player/FullPlayer/FullPlayerComments.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { useMediaStore } from "@/stores/media";
+import { useMusicComments } from "@/composables/useMusicComments";
+import CommentList from "@/components/comments/CommentList.vue";
+import IconLucideX from "~icons/lucide/x";
+import IconLucideRefreshCw from "~icons/lucide/refresh-cw";
+import IconLucideMessageCircleOff from "~icons/lucide/message-circle-off";
+
+interface Props {
+  /** 展示模式：half 左半屏窄列，full 全屏多列 */
+  mode: "half" | "full";
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{ close: [] }>();
+
+const { t } = useI18n();
+const media = useMediaStore();
+
+/** 全屏内嵌跟随当前播放曲目切换（与独立页冻结快照形成对比） */
+const trackRef = computed(() => media.track ?? null);
+const listScrollRef = ref<HTMLElement | null>(null);
+const comments = useMusicComments(trackRef, listScrollRef);
+
+const {
+  sources,
+  sourceId,
+  activeTab,
+  creatorComments,
+  creatorIds,
+  loading,
+  page,
+  maxPage,
+  sourceOptions,
+  tabs,
+  dedupedList,
+  error,
+} = comments;
+
+/** half 模式窄列（半屏宽度有限），full 模式标准列宽 */
+const columnMinWidth = computed(() => (props.mode === "half" ? 400 : 280));
+
+const handleClose = (): void => emit("close");
+</script>
+
+<template>
+  <div class="flex flex-col h-full text-cover">
+    <!-- 顶部精简歌曲信息头 -->
+    <div class="shrink-0 flex items-center gap-3 pb-3">
+      <SImg
+        v-if="media.track?.cover"
+        :src="media.track.cover"
+        class="size-12 rounded-lg shrink-0"
+        alt=""
+      />
+      <div v-else class="size-12 rounded-lg shrink-0 bg-cover/14" />
+      <div class="flex-1 min-w-0">
+        <div class="text-base truncate font-medium leading-snug">{{ media.track?.title }}</div>
+        <div class="text-sm truncate leading-snug mt-0.5 text-cover/55">
+          {{ media.track?.artists.map((a) => a.name).join(" / ") }}
+        </div>
+      </div>
+      <SButton type="cover" variant="ghost" circle @click="handleClose">
+        <template #icon><IconLucideX /></template>
+      </SButton>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="shrink-0 flex items-center gap-3 pb-3">
+      <div class="min-w-0 flex-1">
+        <STabs v-model="activeTab" :tabs="tabs" type="bar" size="medium" />
+      </div>
+      <SButton
+        type="cover"
+        variant="ghost"
+        circle
+        size="small"
+        :loading="loading"
+        @click="comments.refresh"
+      >
+        <template #icon><IconLucideRefreshCw /></template>
+      </SButton>
+      <div class="w-28 shrink-0">
+        <SSelect
+          v-model="sourceId"
+          :options="sourceOptions"
+          :disabled="sources.length === 0 || loading"
+        />
+      </div>
+    </div>
+
+    <!-- 滚动内容区 -->
+    <div ref="listScrollRef" class="min-h-0 flex-1 overflow-y-auto pr-1">
+      <!-- 主创说分区 -->
+      <div v-if="creatorComments.length" class="mb-5">
+        <h3 class="text-sm font-semibold mb-3">{{ t("comments.creator") }}</h3>
+        <CommentList
+          :items="creatorComments"
+          :creator-ids="creatorIds"
+          :column-min-width="columnMinWidth"
+        />
+      </div>
+
+      <!-- 四态分支 -->
+      <div
+        v-if="!sources.length"
+        class="flex items-center justify-center py-16 text-cover/35"
+      >
+        <div class="text-center">
+          <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
+          <div class="text-sm">{{ t("comments.noSource") }}</div>
+        </div>
+      </div>
+      <div
+        v-else-if="error && page.list.length === 0"
+        class="flex flex-col items-center justify-center gap-3 py-16"
+      >
+        <div class="text-sm text-cover/55">{{ error }}</div>
+        <SButton variant="outline" @click="comments.loadPage(activeTab, page.page)">
+          {{ t("common.retry") }}
+        </SButton>
+      </div>
+      <div
+        v-else-if="page.list.length === 0 && loading"
+        class="flex items-center justify-center py-16 text-cover/35"
+      >
+        <div class="text-center">
+          <SLoading class="mx-auto mb-4 block text-4xl text-cover/50" />
+          <div class="text-sm">{{ t("comments.loading") }}</div>
+        </div>
+      </div>
+      <div
+        v-else-if="page.list.length === 0"
+        class="flex items-center justify-center py-16 text-cover/35"
+      >
+        <div class="text-center">
+          <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
+          <div class="text-sm">{{ t("comments.empty") }}</div>
+        </div>
+      </div>
+      <div v-else>
+        <CommentList :items="dedupedList" :column-min-width="columnMinWidth" />
+      </div>
+    </div>
+
+    <!-- 分页栏 -->
+    <div
+      v-if="sources.length"
+      class="shrink-0 flex items-center justify-between py-3 text-xs text-cover/55"
+    >
+      <span>{{ t("comments.page", { page: page.page, total: maxPage }) }}</span>
+      <div class="flex gap-2">
+        <SButton
+          size="small"
+          variant="secondary"
+          :disabled="page.page <= 1 || loading"
+          @click="comments.changePage(-1)"
+        >
+          {{ t("common.prev") }}
+        </SButton>
+        <SButton
+          size="small"
+          variant="secondary"
+          :disabled="page.page >= maxPage || loading"
+          @click="comments.changePage(1)"
+        >
+          {{ t("common.next") }}
+        </SButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index 03d8a43c..1d423716 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -13,6 +13,7 @@ import { useTimeFormat } from "@/composables/useTimeFormat";
 import Lyrics from "@/components/player/Lyrics/index.vue";
 import AMLLLyrics from "@/components/player/Lyrics/AMLLLyrics.vue";
 import PlaylistPickerDialog from "@/components/modals/PlaylistPickerDialog.vue";
+import FullPlayerComments from "./FullPlayerComments.vue";
 import { useWindowControls } from "@/composables/useWindowControls";
 import * as player from "@/core/player";
 import { openExternal } from "@/utils/url";
@@ -105,10 +106,18 @@ watch(
 const fullscreenCover = computed(() => settings.player.coverLayout === "fullscreen");
 
 const coverCentered = computed(() => {
-  if (fullscreenCover.value || status.fullQueueOpen) return false;
+  if (fullscreenCover.value || status.fullQueueOpen || status.fullCommentsOpen) return false;
   return !showLyric.value || (settings.player.autoCenterCover && !hasLyric.value);
 });
 
+/** 全屏内嵌评论布局模式：off 关闭 / half 左半屏 / full 全屏 */
+const fullCommentMode = computed<"off" | "half" | "full">(() => {
+  if (!status.fullCommentsOpen) return "off";
+  if (fullscreenCover.value) return "half";
+  if (!hasLyric.value && settings.player.autoCenterCover) return "full";
+  return "half";
+});
+
 const handleLyricSeek = async (timeMs: number): Promise<void> => {
   await player.seek(timeMs);
   if (!isPlaying.value) await player.play();
@@ -173,9 +182,17 @@ const toggleLyric = (): void => {
   }
 };
 
-const showComments = (): void => {
-  if (media.track) status.showComments(media.track);
+const toggleFullComments = (): void => {
+  if (status.fullQueueOpen) status.fullQueueOpen = false;
+  status.fullCommentsOpen = !status.fullCommentsOpen;
 };
+
+watch(
+  () => status.fullQueueOpen,
+  (open) => {
+    if (open && status.fullCommentsOpen) status.fullCommentsOpen = false;
+  },
+);
 </script>
 
 <template>
@@ -200,7 +217,7 @@ const showComments = (): void => {
         <!-- 背景 -->
         <PlayerBackground />
         <!-- 全屏封面 -->
-        <div v-if="fullscreenCover" class="absolute inset-y-0 left-0 w-[60%]">
+        <div v-if="fullscreenCover && fullCommentMode === 'off'" class="absolute inset-y-0 left-0 w-[60%]">
           <PlayerCover fullscreen />
         </div>
         <!-- 底部频谱 -->
@@ -210,12 +227,12 @@ const showComments = (): void => {
         />
         <!-- 顶/底栏渐变遮罩（全屏封面模式） -->
         <div
-          v-if="fullscreenCover"
+          v-if="fullscreenCover && fullCommentMode === 'off'"
           class="cover-mask-top absolute top-0 inset-x-0 h-20 z-5 pointer-events-none transition-opacity duration-400"
           :class="immersive ? 'opacity-0' : 'opacity-100'"
         />
         <div
-          v-if="fullscreenCover"
+          v-if="fullscreenCover && fullCommentMode === 'off'"
           class="cover-mask-bottom absolute bottom-0 inset-x-0 h-48 z-5 pointer-events-none transition-opacity duration-400"
           :class="immersive ? 'opacity-0' : 'opacity-100'"
         />
@@ -253,7 +270,7 @@ const showComments = (): void => {
         <div class="absolute top-14 inset-x-0 bottom-20" @mousemove="onMainMove">
           <!-- 左侧 -->
           <div
-            v-if="!fullscreenCover"
+            v-if="!fullscreenCover && fullCommentMode === 'off'"
             class="absolute inset-y-0 left-0 w-[45%] flex items-center justify-center px-12 transition-transform duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
             :style="coverCentered ? 'transform: translateX(calc(100% * 11 / 18))' : undefined"
           >
@@ -280,7 +297,7 @@ const showComments = (): void => {
           >
             <!-- 全屏封面 -->
             <div
-              v-if="fullscreenCover"
+              v-if="fullscreenCover && fullCommentMode === 'off'"
               class="shrink-0 pt-2 pb-6 pl-[calc(1em-0.5rem)]"
               :style="{ fontSize: lyricFontSize }"
             >
@@ -374,6 +391,34 @@ const showComments = (): void => {
             <!-- 歌词侧边工具栏 -->
             <LyricActions :immersive="immersive" />
           </div>
+          <!-- 全屏内嵌评论：半屏 -->
+          <Transition
+            enter-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            enter-from-class="opacity-0"
+            leave-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            leave-to-class="opacity-0"
+          >
+            <div
+              v-if="fullCommentMode === 'half'"
+              class="absolute inset-y-0 left-0 w-[45%] px-6 py-4 z-6"
+            >
+              <FullPlayerComments mode="half" @close="toggleFullComments" />
+            </div>
+          </Transition>
+          <!-- 全屏内嵌评论：全屏 -->
+          <Transition
+            enter-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            enter-from-class="opacity-0"
+            leave-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            leave-to-class="opacity-0"
+          >
+            <div
+              v-if="fullCommentMode === 'full'"
+              class="absolute inset-0 px-8 py-4 z-6"
+            >
+              <FullPlayerComments mode="full" @close="toggleFullComments" />
+            </div>
+          </Transition>
           <!-- 播放队列 -->
           <div
             class="absolute inset-y-0 right-0 pl-4 py-6 flex items-center"
@@ -426,7 +471,8 @@ const showComments = (): void => {
               size="large"
               circle
               :disabled="!hasTrack"
-              @click="showComments"
+              :class="status.fullCommentsOpen ? 'opacity-100' : 'opacity-40'"
+              @click="toggleFullComments"
             >
               <template #icon><IconLucideMessageCircle /></template>
             </SButton>
diff --git a/src/composables/useMusicComments.ts b/src/composables/useMusicComments.ts
new file mode 100644
index 00000000..e5cf1381
--- /dev/null
+++ b/src/composables/useMusicComments.ts
@@ -0,0 +1,209 @@
+import type { Ref } from "vue";
+import type { Track } from "@shared/types/player";
+import type {
+  CommentSource,
+  MusicCommentItem,
+  MusicCommentPage,
+} from "@shared/types/comment";
+import { toast } from "@/composables/useToast";
+
+const DEFAULT_LIMIT = 20;
+const NETEASE_SOURCE_ID = "builtin:netease";
+
+const makeContextKey = (trackId: string, source: string): string => `${trackId}\n${source}`;
+
+/**
+ * 歌曲评论数据加载 composable
+ * 泛化自 MusicCommentsDialog，接受外部 trackRef 驱动加载
+ * @param trackRef - 当前曲目引用（独立页为冻结快照，全屏内嵌为 media.track）
+ */
+export const useMusicComments = (
+  trackRef: Ref<Track | null>,
+  scrollRef: Ref<HTMLElement | null>,
+) => {
+  const { t } = useI18n();
+
+  const sources = shallowRef<CommentSource[]>([]);
+  const sourceId = ref("");
+  const activeTab = ref<"hot" | "new">("hot");
+  const loadingCount = ref(0);
+  const error = ref("");
+
+  const pages = reactive<Record<"hot" | "new", MusicCommentPage>>({
+    hot: { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT },
+    new: { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT },
+  });
+  const requestTokens = reactive<Record<"hot" | "new", number>>({ hot: 0, new: 0 });
+
+  const creatorComments = shallowRef<MusicCommentItem[]>([]);
+  const creatorLoading = ref(false);
+  const creatorError = ref("");
+
+  const loadingEpoch = 0;
+  let creatorEpoch = 0;
+
+  const sourceOptions = computed(() =>
+    sources.value.map((source) => ({ value: source.id, label: source.name })),
+  );
+  const tabs = computed(() => [
+    { key: "hot", label: `${t("comments.hot")} (${pages.hot.total})` },
+    { key: "new", label: `${t("comments.new")} (${pages.new.total})` },
+  ]);
+
+  const loading = computed(() => loadingCount.value > 0);
+  const page = computed(() => pages[activeTab.value]);
+  const maxPage = computed(() =>
+    Math.max(1, Math.ceil(page.value.total / Math.max(1, page.value.limit))),
+  );
+  const creatorIds = computed(() => new Set(creatorComments.value.map((c) => c.id)));
+  const dedupedList = computed(() =>
+    page.value.list.filter((item) => !creatorIds.value.has(item.id)),
+  );
+
+  /** 加载可用评论源，确保 sourceId 有效 */
+  const loadSources = async (): Promise<void> => {
+    sources.value = await window.api.comments.sources();
+    if (!sources.value.some((source) => source.id === sourceId.value)) {
+      sourceId.value = sources.value[0]?.id ?? "";
+    }
+  };
+
+  /** 重置分页与主创数据，作废所有 in-flight 请求 */
+  const resetPages = (): void => {
+    requestTokens.hot += 1;
+    requestTokens.new += 1;
+    creatorEpoch += 1;
+    pages.hot = { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT };
+    pages.new = { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT };
+    creatorComments.value = [];
+  };
+
+  /**
+   * 加载指定 tab 的指定页评论
+   * 竞态保护：token + contextKey + epoch，切歌/切源后旧响应丢弃
+   */
+  const loadPage = async (type: "hot" | "new", pageNo = 1): Promise<void> => {
+    const track = trackRef.value;
+    if (!track || !sourceId.value) return;
+    const token = requestTokens[type] + 1;
+    requestTokens[type] = token;
+    const contextKey = makeContextKey(track.id, sourceId.value);
+    const epoch = loadingEpoch;
+    loadingCount.value += 1;
+    error.value = "";
+    try {
+      const result = await window.api.comments.get({
+        sourceId: sourceId.value,
+        track: toRaw(track),
+        type,
+        page: pageNo,
+        limit: pages[type].limit,
+      });
+      if (!result.ok) throw new Error(result.error);
+      if (requestTokens[type] !== token) return;
+      const currentTrack = trackRef.value;
+      if (!currentTrack || makeContextKey(currentTrack.id, sourceId.value) !== contextKey) return;
+      pages[type] = result.data;
+    } catch (err) {
+      if (requestTokens[type] !== token) return;
+      error.value = err instanceof Error ? err.message : String(err);
+      toast.error(error.value);
+    } finally {
+      if (epoch === loadingEpoch) loadingCount.value = Math.max(0, loadingCount.value - 1);
+    }
+  };
+
+  /**
+   * 加载主创说评论（仅网易云内建源）
+   * 失败仅设 creatorError 不弹 toast；creatorEpoch 保护切歌作废
+   */
+  const loadCreator = async (): Promise<void> => {
+    const track = trackRef.value;
+    if (!track || sourceId.value !== NETEASE_SOURCE_ID) {
+      creatorComments.value = [];
+      creatorError.value = "";
+      return;
+    }
+    const epoch = ++creatorEpoch;
+    creatorLoading.value = true;
+    creatorError.value = "";
+    try {
+      const result = await window.api.comments.creator({
+        sourceId: sourceId.value,
+        track: toRaw(track),
+      });
+      if (epoch !== creatorEpoch) return;
+      if (!result.ok) throw new Error(result.error);
+      creatorComments.value = result.data;
+    } catch (err) {
+      if (epoch !== creatorEpoch) return;
+      creatorError.value = err instanceof Error ? err.message : String(err);
+      creatorComments.value = [];
+    } finally {
+      if (epoch === creatorEpoch) creatorLoading.value = false;
+    }
+  };
+
+  /** 刷新：重置分页 + 拉取两 tab + 主创说 + 滚动归零 */
+  const refresh = async (): Promise<void> => {
+    resetPages();
+    await Promise.all([loadPage("hot"), loadPage("new")]);
+    await loadCreator();
+    await nextTick();
+    scrollRef.value?.scrollTo({ top: 0 });
+  };
+
+  /** 翻页，delta 为 +1/-1 */
+  const changePage = async (delta: number): Promise<void> => {
+    const next = Math.min(maxPage.value, Math.max(1, page.value.page + delta));
+    if (next === page.value.page) return;
+    await loadPage(activeTab.value, next);
+    await nextTick();
+    scrollRef.value?.scrollTo({ top: 0 });
+  };
+
+  const setSource = (id: string): void => {
+    sourceId.value = id;
+  };
+
+  const setTab = (key: string): void => {
+    activeTab.value = key as "hot" | "new";
+  };
+
+  watch(trackRef, (next, prev) => {
+    if (!next || next === prev) return;
+    refresh().catch(() => {});
+  });
+
+  watch(sourceId, (next, prev) => {
+    if (!next || !prev || next === prev) return;
+    refresh().catch(() => {});
+  });
+
+  void loadSources().then(() => refresh());
+
+  return {
+    sources,
+    sourceId,
+    activeTab,
+    pages,
+    creatorComments,
+    creatorLoading,
+    creatorError,
+    loading,
+    page,
+    maxPage,
+    sourceOptions,
+    tabs,
+    creatorIds,
+    dedupedList,
+    error,
+    loadSources,
+    loadPage,
+    loadCreator,
+    refresh,
+    changePage,
+    setSource,
+    setTab,
+  };
+};
diff --git a/src/composables/useTrackMenu.ts b/src/composables/useTrackMenu.ts
index c582f787..d1ec3670 100644
--- a/src/composables/useTrackMenu.ts
+++ b/src/composables/useTrackMenu.ts
@@ -6,11 +6,11 @@ import type { DropdownMenuItem } from "@/components/ui/SDropdownMenu.vue";
 import * as player from "@/core/player";
 import { useSettingsStore } from "@/stores/settings";
 import { usePluginsStore } from "@/stores/plugins";
-import { useStatusStore } from "@/stores/status";
 import { useCopyText } from "@/composables/useCopyText";
 import { toast } from "@/composables/useToast";
 import { buildDownloadQualityItems } from "@/composables/useDownload";
 import { getShareUrl } from "@/utils/format/shareUrl";
+import { setCommentPageSnapshot } from "@/services/commentPageSnapshot";
 import { openExternal } from "@/utils/url";
 import IconPlay from "~icons/lucide/play";
 import IconListEnd from "~icons/lucide/list-end";
@@ -59,7 +59,6 @@ export const useTrackMenu = (
 ) => {
   const { t } = useI18n();
   const router = useRouter();
-  const status = useStatusStore();
   const settings = useSettingsStore();
   const plugins = usePluginsStore();
   const { copy } = useCopyText();
@@ -256,9 +255,18 @@ export const useTrackMenu = (
       case "searchSame":
         router.push({ path: "/search", query: { q: current.title } });
         break;
-      case "comments":
-        status.showComments(current);
+      case "comments": {
+        setCommentPageSnapshot(current);
+        router.push({
+          name: "comments",
+          params: { source: current.source, id: encodeURIComponent(current.id) },
+          query: {
+            name: current.title,
+            artists: current.artists.map((a) => a.name).join(" / "),
+          },
+        });
         break;
+      }
       case "copyTitle":
         await copy(current.title);
         break;
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 73b0c3bb..f765b856 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -131,7 +131,12 @@
     "empty": "No comments yet",
     "noSource": "No comment source available",
     "location": "From {location}",
-    "page": "Page {page} / {total}"
+    "page": "Page {page} / {total}",
+    "creator": "Creator Says",
+    "creatorBadge": "Creator",
+    "playTrack": "Play Track",
+    "back": "Back",
+    "pageTitle": "Song Comments"
   },
   "equalizer": {
     "title": "Equalizer",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 98c1fcfa..cae0bec3 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -119,7 +119,12 @@
     "empty": "暂无评论",
     "noSource": "没有可用的评论来源",
     "location": "来自{location}",
-    "page": "第 {page} / {total} 页"
+    "page": "第 {page} / {total} 页",
+    "creator": "主创说",
+    "creatorBadge": "主创",
+    "playTrack": "播放此曲",
+    "back": "返回",
+    "pageTitle": "歌曲评论"
   },
   "equalizer": {
     "title": "均衡器",
diff --git a/src/pages/Comments.vue b/src/pages/Comments.vue
new file mode 100644
index 00000000..835044ae
--- /dev/null
+++ b/src/pages/Comments.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import type { Track, TrackSource } from "@shared/types/player";
+import { useMediaStore } from "@/stores/media";
+import { consumeCommentPageSnapshot } from "@/services/commentPageSnapshot";
+import { useMusicComments } from "@/composables/useMusicComments";
+import * as player from "@/core/player";
+import CommentList from "@/components/comments/CommentList.vue";
+import IconLucideArrowLeft from "~icons/lucide/arrow-left";
+import IconLucidePlay from "~icons/lucide/play";
+import IconLucideRefreshCw from "~icons/lucide/refresh-cw";
+import IconLucideMessageCircleOff from "~icons/lucide/message-circle-off";
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const media = useMediaStore();
+
+const source = route.params.source as TrackSource;
+const id = decodeURIComponent(route.params.id as string);
+
+/**
+ * 构建冻结快照：优先消费暂存 → 匹配当前播放 → query 构建
+ * 独立页不跟随播放切换，进入时冻结
+ */
+const buildSnapshot = (): Track | null => {
+  const cached = consumeCommentPageSnapshot();
+  if (cached) return cached;
+  if (media.track && media.track.source === source && media.track.id === id) {
+    return media.track;
+  }
+  const name = typeof route.query.name === "string" ? route.query.name : id;
+  const artistsStr = typeof route.query.artists === "string" ? route.query.artists : "";
+  return {
+    id,
+    source,
+    title: name,
+    artists: artistsStr ? artistsStr.split(" / ").map((n) => ({ name: n })) : [],
+    duration: 0,
+  };
+};
+
+const trackSnapshot = shallowRef<Track | null>(buildSnapshot());
+const listScrollRef = ref<HTMLElement | null>(null);
+const comments = useMusicComments(trackSnapshot, listScrollRef);
+
+const {
+  sources,
+  sourceId,
+  activeTab,
+  creatorComments,
+  creatorIds,
+  loading,
+  page,
+  maxPage,
+  sourceOptions,
+  tabs,
+  dedupedList,
+  error,
+} = comments;
+
+/** 折叠状态 */
+const collapsed = ref(false);
+
+const handleListScroll = (event: Event): void => {
+  const scrollTop = (event.target as HTMLElement).scrollTop;
+  if (!collapsed.value && scrollTop > 10) {
+    collapsed.value = true;
+  } else if (collapsed.value && scrollTop === 0) {
+    collapsed.value = false;
+  }
+};
+
+const handleBack = (): void => {
+  router.back();
+};
+
+const handlePlay = (): void => {
+  if (trackSnapshot.value) player.playNow(trackSnapshot.value);
+};
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <!-- 顶部歌曲信息头 -->
+    <div v-if="trackSnapshot" class="shrink-0 px-5 pb-2">
+      <div
+        class="flex mt-2 transition-[gap,margin] duration-300"
+        :class="collapsed ? 'gap-3 mb-3' : 'gap-5 mb-4'"
+      >
+        <!-- 返回按钮 -->
+        <SButton variant="ghost" circle class="shrink-0 mt-1" @click="handleBack">
+          <template #icon><IconLucideArrowLeft /></template>
+        </SButton>
+        <!-- 小封面 -->
+        <SImg
+          v-if="trackSnapshot.cover"
+          :src="trackSnapshot.cover"
+          :alt="trackSnapshot.title"
+          class="shrink-0 rounded-lg transition-[width,height] duration-300"
+          :class="collapsed ? 'size-14' : 'size-20'"
+        />
+        <div
+v-else class="shrink-0 rounded-lg bg-on-surface/8 transition-[width,height] duration-300"
+          :class="collapsed ? 'size-14' : 'size-20'"
+        />
+        <!-- 标题/歌手 -->
+        <div class="flex-1 flex flex-col min-w-0 py-1">
+          <h1
+            class="font-bold text-on-surface truncate lh-normal transition-[font-size,line-height] duration-300"
+            :class="collapsed ? 'text-lg' : 'text-2xl'"
+          >
+            {{ trackSnapshot.title }}
+          </h1>
+          <div
+            class="text-sm text-on-surface-variant/60 truncate transition-opacity duration-300"
+            :class="collapsed ? 'opacity-0' : 'opacity-100'"
+          >
+            {{ trackSnapshot.artists.map((a) => a.name).join(" / ") }}
+          </div>
+        </div>
+        <!-- 播放按钮 -->
+        <SButton
+          type="primary"
+          variant="secondary"
+          round
+          class="shrink-0 mt-1"
+          @click="handlePlay"
+        >
+          <template #icon><IconLucidePlay /></template>
+          {{ t("comments.playTrack") }}
+        </SButton>
+      </div>
+    </div>
+
+    <!-- 工具栏 -->
+    <div class="shrink-0 flex items-center gap-3 px-5 pb-3">
+      <div class="min-w-0 flex-1">
+        <STabs v-model="activeTab" :tabs="tabs" type="bar" size="medium" />
+      </div>
+      <SButton variant="ghost" circle size="small" :loading="loading" @click="comments.refresh">
+        <template #icon><IconLucideRefreshCw /></template>
+      </SButton>
+      <div class="w-28 shrink-0">
+        <SSelect
+          v-model="sourceId"
+          :options="sourceOptions"
+          :disabled="sources.length === 0 || loading"
+        />
+      </div>
+    </div>
+
+    <!-- 滚动内容区 -->
+    <div
+      ref="listScrollRef"
+      class="min-h-0 flex-1 overflow-y-auto px-5 pb-4"
+      @scroll="handleListScroll"
+    >
+      <!-- 主创说分区 -->
+      <div v-if="creatorComments.length" class="mb-5">
+        <h3 class="text-sm font-semibold mb-3 text-on-surface">{{ t("comments.creator") }}</h3>
+        <CommentList
+          :items="creatorComments"
+          :creator-ids="creatorIds"
+          :column-min-width="280"
+        />
+      </div>
+
+      <!-- 四态分支 -->
+      <div
+        v-if="!sources.length"
+        class="flex items-center justify-center py-16 text-on-surface-variant/60"
+      >
+        <div class="text-center">
+          <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
+          <div class="text-sm">{{ t("comments.noSource") }}</div>
+        </div>
+      </div>
+      <div
+        v-else-if="error && page.list.length === 0"
+        class="flex flex-col items-center justify-center gap-3 py-16"
+      >
+        <div class="text-sm text-on-surface-variant">{{ error }}</div>
+        <SButton variant="outline" @click="comments.loadPage(activeTab, page.page)">
+          {{ t("common.retry") }}
+        </SButton>
+      </div>
+      <div
+        v-else-if="page.list.length === 0 && loading"
+        class="flex items-center justify-center py-16 text-on-surface-variant/60"
+      >
+        <div class="text-center">
+          <SLoading class="mx-auto mb-4 block text-4xl text-primary/70" />
+          <div class="text-sm">{{ t("comments.loading") }}</div>
+        </div>
+      </div>
+      <div
+        v-else-if="page.list.length === 0"
+        class="flex items-center justify-center py-16 text-on-surface-variant/60"
+      >
+        <div class="text-center">
+          <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
+          <div class="text-sm">{{ t("comments.empty") }}</div>
+        </div>
+      </div>
+      <div v-else>
+        <CommentList :items="dedupedList" :column-min-width="280" />
+      </div>
+    </div>
+
+    <!-- 分页栏 -->
+    <div
+      v-if="sources.length"
+      class="shrink-0 flex items-center justify-between px-5 py-3 text-xs text-on-surface-variant"
+    >
+      <span>{{ t("comments.page", { page: page.page, total: maxPage }) }}</span>
+      <div class="flex gap-2">
+        <SButton
+          size="small"
+          variant="secondary"
+          :disabled="page.page <= 1 || loading"
+          @click="comments.changePage(-1)"
+        >
+          {{ t("common.prev") }}
+        </SButton>
+        <SButton
+          size="small"
+          variant="secondary"
+          :disabled="page.page >= maxPage || loading"
+          @click="comments.changePage(1)"
+        >
+          {{ t("common.next") }}
+        </SButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 173be534..ecb85c66 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -67,6 +67,11 @@ const router = createRouter({
           name: "artist",
           component: () => import("@/pages/Artist.vue"),
         },
+        {
+          path: "comments/:source/:id",
+          name: "comments",
+          component: () => import("@/pages/Comments.vue"),
+        },
         {
           path: "artists/local",
           name: "artist-list",
diff --git a/src/services/commentPageSnapshot.ts b/src/services/commentPageSnapshot.ts
new file mode 100644
index 00000000..237047a4
--- /dev/null
+++ b/src/services/commentPageSnapshot.ts
@@ -0,0 +1,22 @@
+import type { Track } from "@shared/types/player";
+
+/** 模块级快照：进入评论页前暂存 Track，页面消费后清空，避免长期持有引用 */
+let snapshot: Track | null = null;
+
+/**
+ * 设置评论页曲目快照
+ * @param track - 进入评论页的曲目
+ */
+export const setCommentPageSnapshot = (track: Track): void => {
+  snapshot = track;
+};
+
+/**
+ * 消费评论页曲目快照（一次性，取后即空）
+ * @returns 快照 Track 或 null
+ */
+export const consumeCommentPageSnapshot = (): Track | null => {
+  const track = snapshot;
+  snapshot = null;
+  return track;
+};
diff --git a/src/stores/status.ts b/src/stores/status.ts
index 0a46a829..c579bc1f 100644
--- a/src/stores/status.ts
+++ b/src/stores/status.ts
@@ -39,6 +39,8 @@ export const useStatusStore = defineStore(
     const commentsOpen = ref(false);
     /** 评论弹窗当前歌曲 */
     const commentsTrack = shallowRef<Track | null>(null);
+    /** 全屏播放器内嵌评论开关 */
+    const fullCommentsOpen = ref(false);
     /** 全屏播放器是否展示歌词 */
     const showLyric = ref(true);
     /** 当前播放索引 */
@@ -119,6 +121,7 @@ export const useStatusStore = defineStore(
       searchOpen,
       commentsOpen,
       commentsTrack,
+      fullCommentsOpen,
       showLyric,
       outputDevices,
       playIndex,

From cf8f12b2b9767cc4902e1dfd16e47299bbbd43be Mon Sep 17 00:00:00 2001
From: WindDrift <115442729+WindDrift@users.noreply.github.com>
Date: Thu, 23 Jul 2026 00:22:20 +0800
Subject: [PATCH 2/6] =?UTF-8?q?refactor(comments):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E6=A8=A1=E5=9D=97=EF=BC=8C=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E5=B8=83=E5=B1=80=E4=B8=8E=E6=97=A0?=
 =?UTF-8?q?=E9=99=90=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comments/CommentList.vue       |  88 +++++++-
 .../player/FullPlayer/FullPlayerComments.vue  |  95 +++++----
 src/components/player/FullPlayer/index.vue    |  84 ++++----
 src/composables/useMusicComments.ts           | 193 ++++++++++++------
 src/pages/Comments.vue                        | 109 +++++-----
 src/utils/commentMasonry.ts                   |   2 +
 src/utils/commentPagination.ts                |  16 ++
 7 files changed, 398 insertions(+), 189 deletions(-)
 create mode 100644 src/utils/commentMasonry.ts
 create mode 100644 src/utils/commentPagination.ts

diff --git a/src/components/comments/CommentList.vue b/src/components/comments/CommentList.vue
index a389b3bd..7309fa09 100644
--- a/src/components/comments/CommentList.vue
+++ b/src/components/comments/CommentList.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { MusicCommentItem } from "@shared/types/comment";
+import { getMasonryRowSpan } from "@/utils/commentMasonry";
 import CommentCard from "./CommentCard.vue";
 
 interface Props {
@@ -22,21 +23,98 @@ const props = withDefaults(defineProps<Props>(), {
   gap: 12,
 });
 
+const GRID_ROW_HEIGHT = 1;
+const itemElements = new Map<string, HTMLElement>();
+const rowSpans = reactive(new Map<string, number>());
+let resizeObserver: ResizeObserver | undefined;
+
 const gridStyle = computed(() => ({
   display: "grid",
   gridTemplateColumns: `repeat(auto-fill, minmax(${props.columnMinWidth}px, 1fr))`,
+  gridAutoRows: `${GRID_ROW_HEIGHT}px`,
   gap: `${props.gap}px`,
 }));
+
+const updateItemSpan = (id: string, element: HTMLElement): void => {
+  const content = element.firstElementChild;
+  if (!(content instanceof HTMLElement)) return;
+  rowSpans.set(
+    id,
+    getMasonryRowSpan(content.getBoundingClientRect().height, GRID_ROW_HEIGHT, props.gap),
+  );
+};
+
+const updateAllSpans = (): void => {
+  for (const [id, element] of itemElements) updateItemSpan(id, element);
+};
+
+const setItemRef = (id: string, value: unknown): void => {
+  const element = value instanceof HTMLElement ? value : null;
+  const previous = itemElements.get(id);
+  if (previous && previous !== element) {
+    const previousContent = previous.firstElementChild;
+    if (previousContent) resizeObserver?.unobserve(previousContent);
+  }
+  if (!element) {
+    itemElements.delete(id);
+    rowSpans.delete(id);
+    return;
+  }
+  itemElements.set(id, element);
+  const content = element.firstElementChild;
+  if (content) resizeObserver?.observe(content);
+  updateItemSpan(id, element);
+};
+
+watch(
+  () => [props.items, props.gap] as const,
+  async ([items]) => {
+    const ids = new Set(items.map((item) => item.id));
+    for (const id of rowSpans.keys()) {
+      if (!ids.has(id)) rowSpans.delete(id);
+    }
+    await nextTick();
+    updateAllSpans();
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const wrapper = entry.target.parentElement;
+      const id = wrapper?.getAttribute("data-comment-id");
+      if (id && wrapper) updateItemSpan(id, wrapper);
+    }
+  });
+  for (const element of itemElements.values()) {
+    const content = element.firstElementChild;
+    if (content) resizeObserver.observe(content);
+  }
+  updateAllSpans();
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  itemElements.clear();
+  rowSpans.clear();
+});
 </script>
 
 <template>
   <div :style="gridStyle">
-    <CommentCard
+    <div
       v-for="item in items"
       :key="item.id"
-      :item="item"
-      :creator="creatorIds.has(item.id)"
-      :compact="compact"
-    />
+      :ref="(value) => setItemRef(item.id, value)"
+      :data-comment-id="item.id"
+      :style="{ gridRowEnd: `span ${rowSpans.get(item.id) ?? 1}` }"
+    >
+      <CommentCard
+        :item="item"
+        :creator="creatorIds.has(item.id)"
+        :compact="compact"
+      />
+    </div>
   </div>
 </template>
diff --git a/src/components/player/FullPlayer/FullPlayerComments.vue b/src/components/player/FullPlayer/FullPlayerComments.vue
index 5373cb70..278a43fe 100644
--- a/src/components/player/FullPlayer/FullPlayerComments.vue
+++ b/src/components/player/FullPlayer/FullPlayerComments.vue
@@ -9,6 +9,8 @@ import IconLucideMessageCircleOff from "~icons/lucide/message-circle-off";
 interface Props {
   /** 展示模式：half 左半屏窄列，full 全屏多列 */
   mode: "half" | "full";
+  /** 播放器当前是否处于沉浸状态 */
+  immersive: boolean;
 }
 
 const props = defineProps<Props>();
@@ -17,9 +19,9 @@ const emit = defineEmits<{ close: [] }>();
 const { t } = useI18n();
 const media = useMediaStore();
 
-/** 全屏内嵌跟随当前播放曲目切换（与独立页冻结快照形成对比） */
 const trackRef = computed(() => media.track ?? null);
 const listScrollRef = ref<HTMLElement | null>(null);
+const loadMoreSentinelRef = ref<HTMLElement | null>(null);
 const comments = useMusicComments(trackRef, listScrollRef);
 
 const {
@@ -30,22 +32,56 @@ const {
   creatorIds,
   loading,
   page,
-  maxPage,
   sourceOptions,
   tabs,
   dedupedList,
   error,
 } = comments;
 
-/** half 模式窄列（半屏宽度有限），full 模式标准列宽 */
-const columnMinWidth = computed(() => (props.mode === "half" ? 400 : 280));
+const columnMinWidth = computed(() => (props.mode === "half" ? 400 : 360));
+const scrolling = ref(false);
+let loadMoreObserver: IntersectionObserver | undefined;
+let scrollTimer: ReturnType<typeof setTimeout> | undefined;
 
 const handleClose = (): void => emit("close");
+
+const handleScroll = (): void => {
+  scrolling.value = true;
+  clearTimeout(scrollTimer);
+  scrollTimer = setTimeout(() => {
+    scrolling.value = false;
+  }, 700);
+};
+
+onMounted(() => {
+  loadMoreObserver = new IntersectionObserver(
+    ([entry]) => {
+      if (entry?.isIntersecting) void comments.loadMore();
+    },
+    { root: listScrollRef.value, rootMargin: "0px 0px 400px", threshold: 0 },
+  );
+  if (loadMoreSentinelRef.value) loadMoreObserver.observe(loadMoreSentinelRef.value);
+});
+
+watch(
+  () => [activeTab.value, loading.value, page.value.list.length] as const,
+  async () => {
+    await nextTick();
+    const sentinel = loadMoreSentinelRef.value;
+    if (!sentinel || !loadMoreObserver) return;
+    loadMoreObserver.unobserve(sentinel);
+    loadMoreObserver.observe(sentinel);
+  },
+);
+
+onBeforeUnmount(() => {
+  loadMoreObserver?.disconnect();
+  clearTimeout(scrollTimer);
+});
 </script>
 
 <template>
   <div class="flex flex-col h-full text-cover">
-    <!-- 顶部精简歌曲信息头 -->
     <div class="shrink-0 flex items-center gap-3 pb-3">
       <SImg
         v-if="media.track?.cover"
@@ -57,7 +93,7 @@ const handleClose = (): void => emit("close");
       <div class="flex-1 min-w-0">
         <div class="text-base truncate font-medium leading-snug">{{ media.track?.title }}</div>
         <div class="text-sm truncate leading-snug mt-0.5 text-cover/55">
-          {{ media.track?.artists.map((a) => a.name).join(" / ") }}
+          {{ media.track?.artists.map((artist) => artist.name).join(" / ") }}
         </div>
       </div>
       <SButton type="cover" variant="ghost" circle @click="handleClose">
@@ -65,7 +101,6 @@ const handleClose = (): void => emit("close");
       </SButton>
     </div>
 
-    <!-- 工具栏 -->
     <div class="shrink-0 flex items-center gap-3 pb-3">
       <div class="min-w-0 flex-1">
         <STabs v-model="activeTab" :tabs="tabs" type="bar" size="medium" />
@@ -89,9 +124,12 @@ const handleClose = (): void => emit("close");
       </div>
     </div>
 
-    <!-- 滚动内容区 -->
-    <div ref="listScrollRef" class="min-h-0 flex-1 overflow-y-auto pr-1">
-      <!-- 主创说分区 -->
+    <div
+      ref="listScrollRef"
+      class="min-h-0 flex-1 overflow-y-auto pr-1 [scrollbar-gutter:stable] [&::-webkit-scrollbar-thumb]:bg-cover/25 [&::-webkit-scrollbar-thumb:hover]:bg-cover/45"
+      :class="immersive && !scrolling ? '[&::-webkit-scrollbar-thumb]:bg-transparent' : ''"
+      @scroll="handleScroll"
+    >
       <div v-if="creatorComments.length" class="mb-5">
         <h3 class="text-sm font-semibold mb-3">{{ t("comments.creator") }}</h3>
         <CommentList
@@ -101,7 +139,6 @@ const handleClose = (): void => emit("close");
         />
       </div>
 
-      <!-- 四态分支 -->
       <div
         v-if="!sources.length"
         class="flex items-center justify-center py-16 text-cover/35"
@@ -116,7 +153,7 @@ const handleClose = (): void => emit("close");
         class="flex flex-col items-center justify-center gap-3 py-16"
       >
         <div class="text-sm text-cover/55">{{ error }}</div>
-        <SButton variant="outline" @click="comments.loadPage(activeTab, page.page)">
+        <SButton variant="outline" @click="comments.loadPage(activeTab, 1)">
           {{ t("common.retry") }}
         </SButton>
       </div>
@@ -138,33 +175,15 @@ const handleClose = (): void => emit("close");
           <div class="text-sm">{{ t("comments.empty") }}</div>
         </div>
       </div>
-      <div v-else>
-        <CommentList :items="dedupedList" :column-min-width="columnMinWidth" />
-      </div>
-    </div>
+      <CommentList v-else :items="dedupedList" :column-min-width="columnMinWidth" />
 
-    <!-- 分页栏 -->
-    <div
-      v-if="sources.length"
-      class="shrink-0 flex items-center justify-between py-3 text-xs text-cover/55"
-    >
-      <span>{{ t("comments.page", { page: page.page, total: maxPage }) }}</span>
-      <div class="flex gap-2">
-        <SButton
-          size="small"
-          variant="secondary"
-          :disabled="page.page <= 1 || loading"
-          @click="comments.changePage(-1)"
-        >
-          {{ t("common.prev") }}
-        </SButton>
-        <SButton
-          size="small"
-          variant="secondary"
-          :disabled="page.page >= maxPage || loading"
-          @click="comments.changePage(1)"
-        >
-          {{ t("common.next") }}
+      <div ref="loadMoreSentinelRef" class="h-px" />
+      <div v-if="page.loadingMore" class="flex justify-center py-5 text-cover/55">
+        <SLoading class="text-2xl" />
+      </div>
+      <div v-else-if="page.appendError" class="flex justify-center py-5">
+        <SButton size="small" type="cover" variant="outline" @click="comments.loadMore">
+          {{ t("common.retry") }}
         </SButton>
       </div>
     </div>
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index 1d423716..afd199be 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -114,8 +114,7 @@ const coverCentered = computed(() => {
 const fullCommentMode = computed<"off" | "half" | "full">(() => {
   if (!status.fullCommentsOpen) return "off";
   if (fullscreenCover.value) return "half";
-  if (!hasLyric.value && settings.player.autoCenterCover) return "full";
-  return "half";
+  return hasLyric.value ? "half" : "full";
 });
 
 const handleLyricSeek = async (timeMs: number): Promise<void> => {
@@ -217,9 +216,19 @@ watch(
         <!-- 背景 -->
         <PlayerBackground />
         <!-- 全屏封面 -->
-        <div v-if="fullscreenCover && fullCommentMode === 'off'" class="absolute inset-y-0 left-0 w-[60%]">
-          <PlayerCover fullscreen />
-        </div>
+        <Transition
+          enter-active-class="transition-opacity duration-250"
+          enter-from-class="opacity-0"
+          leave-active-class="transition-opacity duration-250"
+          leave-to-class="opacity-0"
+        >
+          <div
+            v-if="fullscreenCover && fullCommentMode === 'off'"
+            class="absolute inset-y-0 left-0 w-[60%]"
+          >
+            <PlayerCover fullscreen />
+          </div>
+        </Transition>
         <!-- 底部频谱 -->
         <BottomSpectrum
           v-if="isExpanded && settings.player.enableSpectrum"
@@ -270,8 +279,11 @@ watch(
         <div class="absolute top-14 inset-x-0 bottom-20" @mousemove="onMainMove">
           <!-- 左侧 -->
           <div
-            v-if="!fullscreenCover && fullCommentMode === 'off'"
-            class="absolute inset-y-0 left-0 w-[45%] flex items-center justify-center px-12 transition-transform duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            v-if="!fullscreenCover"
+            class="absolute inset-y-0 left-0 w-[45%] flex items-center justify-center px-12 transition-[transform,opacity] duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            :class="
+              fullCommentMode === 'off' ? 'opacity-100' : 'opacity-0 pointer-events-none'
+            "
             :style="coverCentered ? 'transform: translateX(calc(100% * 11 / 18))' : undefined"
           >
             <div class="relative w-[clamp(200px,85%,50vh)] -translate-y-[11vh]">
@@ -287,22 +299,29 @@ watch(
           </div>
           <!-- 右侧 -->
           <div
-            class="group absolute inset-y-0 right-0 pr-20 flex flex-col transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            class="group absolute inset-y-0 right-0 pr-20 flex flex-col transition-opacity duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
             :class="[
               fullscreenCover ? 'w-1/2' : 'w-[55%]',
-              coverCentered || status.fullQueueOpen
+              coverCentered || status.fullQueueOpen || fullCommentMode === 'full'
                 ? 'opacity-0 pointer-events-none'
                 : 'opacity-100',
             ]"
           >
             <!-- 全屏封面 -->
-            <div
-              v-if="fullscreenCover && fullCommentMode === 'off'"
-              class="shrink-0 pt-2 pb-6 pl-[calc(1em-0.5rem)]"
-              :style="{ fontSize: lyricFontSize }"
+            <Transition
+              enter-active-class="transition-opacity duration-250"
+              enter-from-class="opacity-0"
+              leave-active-class="transition-opacity duration-250"
+              leave-to-class="opacity-0"
             >
-              <PlayerData align="left" simple />
-            </div>
+              <div
+                v-if="fullscreenCover && fullCommentMode === 'off'"
+                class="shrink-0 pt-2 pb-6 pl-[calc(1em-0.5rem)]"
+                :style="{ fontSize: lyricFontSize }"
+              >
+                <PlayerData align="left" simple />
+              </div>
+            </Transition>
             <!-- 歌词容器 -->
             <div
               class="lyric-area relative flex-1 min-h-0"
@@ -391,32 +410,27 @@ watch(
             <!-- 歌词侧边工具栏 -->
             <LyricActions :immersive="immersive" />
           </div>
-          <!-- 全屏内嵌评论：半屏 -->
+          <!-- 全屏内嵌评论 -->
           <Transition
-            enter-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            enter-active-class="transition-opacity duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
             enter-from-class="opacity-0"
-            leave-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
+            leave-active-class="transition-opacity duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
             leave-to-class="opacity-0"
           >
             <div
-              v-if="fullCommentMode === 'half'"
-              class="absolute inset-y-0 left-0 w-[45%] px-6 py-4 z-6"
+              v-if="fullCommentMode !== 'off'"
+              class="absolute py-4 z-6 transition-[inset,width,padding] duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
+              :class="
+                fullCommentMode === 'half'
+                  ? 'inset-y-0 left-0 w-[45%] px-[clamp(32px,4vw,64px)]'
+                  : 'inset-0 w-full px-[clamp(32px,5vw,80px)]'
+              "
             >
-              <FullPlayerComments mode="half" @close="toggleFullComments" />
-            </div>
-          </Transition>
-          <!-- 全屏内嵌评论：全屏 -->
-          <Transition
-            enter-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
-            enter-from-class="opacity-0"
-            leave-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
-            leave-to-class="opacity-0"
-          >
-            <div
-              v-if="fullCommentMode === 'full'"
-              class="absolute inset-0 px-8 py-4 z-6"
-            >
-              <FullPlayerComments mode="full" @close="toggleFullComments" />
+              <FullPlayerComments
+                :mode="fullCommentMode"
+                :immersive="immersive"
+                @close="toggleFullComments"
+              />
             </div>
           </Transition>
           <!-- 播放队列 -->
diff --git a/src/composables/useMusicComments.ts b/src/composables/useMusicComments.ts
index e5cf1381..2376c11e 100644
--- a/src/composables/useMusicComments.ts
+++ b/src/composables/useMusicComments.ts
@@ -2,20 +2,44 @@ import type { Ref } from "vue";
 import type { Track } from "@shared/types/player";
 import type {
   CommentSource,
+  CommentTab,
   MusicCommentItem,
   MusicCommentPage,
 } from "@shared/types/comment";
 import { toast } from "@/composables/useToast";
+import { appendUniqueComments, hasNextCommentPage } from "@/utils/commentPagination";
 
 const DEFAULT_LIMIT = 20;
 const NETEASE_SOURCE_ID = "builtin:netease";
 
-const makeContextKey = (trackId: string, source: string): string => `${trackId}\n${source}`;
+type CommentTabState = MusicCommentPage & {
+  hasMore: boolean;
+  loadingMore: boolean;
+  initialError: string;
+  appendError: string;
+};
+
+const createTabState = (): CommentTabState => ({
+  list: [],
+  total: 0,
+  page: 0,
+  limit: DEFAULT_LIMIT,
+  hasMore: true,
+  loadingMore: false,
+  initialError: "",
+  appendError: "",
+});
+
+const makeTrackKey = (track: Track): string =>
+  `${track.source}\n${track.serverId ?? ""}\n${track.id}`;
+
+const makeContextKey = (track: Track, source: string): string =>
+  `${makeTrackKey(track)}\n${source}`;
 
 /**
  * 歌曲评论数据加载 composable
- * 泛化自 MusicCommentsDialog，接受外部 trackRef 驱动加载
  * @param trackRef - 当前曲目引用（独立页为冻结快照，全屏内嵌为 media.track）
+ * @param scrollRef - 评论滚动容器
  */
 export const useMusicComments = (
   trackRef: Ref<Track | null>,
@@ -25,22 +49,22 @@ export const useMusicComments = (
 
   const sources = shallowRef<CommentSource[]>([]);
   const sourceId = ref("");
-  const activeTab = ref<"hot" | "new">("hot");
+  const activeTab = ref<CommentTab>("hot");
   const loadingCount = ref(0);
-  const error = ref("");
 
-  const pages = reactive<Record<"hot" | "new", MusicCommentPage>>({
-    hot: { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT },
-    new: { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT },
+  const pages = reactive<Record<CommentTab, CommentTabState>>({
+    hot: createTabState(),
+    new: createTabState(),
   });
-  const requestTokens = reactive<Record<"hot" | "new", number>>({ hot: 0, new: 0 });
+  const requestTokens = reactive<Record<CommentTab, number>>({ hot: 0, new: 0 });
 
   const creatorComments = shallowRef<MusicCommentItem[]>([]);
   const creatorLoading = ref(false);
   const creatorError = ref("");
 
-  const loadingEpoch = 0;
+  let loadingEpoch = 0;
   let creatorEpoch = 0;
+  let disposed = false;
 
   const sourceOptions = computed(() =>
     sources.value.map((source) => ({ value: source.id, label: source.name })),
@@ -52,45 +76,70 @@ export const useMusicComments = (
 
   const loading = computed(() => loadingCount.value > 0);
   const page = computed(() => pages[activeTab.value]);
-  const maxPage = computed(() =>
-    Math.max(1, Math.ceil(page.value.total / Math.max(1, page.value.limit))),
-  );
-  const creatorIds = computed(() => new Set(creatorComments.value.map((c) => c.id)));
+  const error = computed(() => page.value.initialError);
+  const creatorIds = computed(() => new Set(creatorComments.value.map((comment) => comment.id)));
   const dedupedList = computed(() =>
     page.value.list.filter((item) => !creatorIds.value.has(item.id)),
   );
 
   /** 加载可用评论源，确保 sourceId 有效 */
   const loadSources = async (): Promise<void> => {
-    sources.value = await window.api.comments.sources();
+    const availableSources = await window.api.comments.sources();
+    if (disposed) return;
+    sources.value = availableSources;
     if (!sources.value.some((source) => source.id === sourceId.value)) {
       sourceId.value = sources.value[0]?.id ?? "";
     }
   };
 
-  /** 重置分页与主创数据，作废所有 in-flight 请求 */
+  /** 重置分页与主创数据，作废所有进行中的请求 */
   const resetPages = (): void => {
     requestTokens.hot += 1;
     requestTokens.new += 1;
     creatorEpoch += 1;
-    pages.hot = { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT };
-    pages.new = { list: [], total: 0, page: 1, limit: DEFAULT_LIMIT };
+    loadingEpoch += 1;
+    loadingCount.value = 0;
+    pages.hot = createTabState();
+    pages.new = createTabState();
     creatorComments.value = [];
+    creatorLoading.value = false;
+    creatorError.value = "";
   };
 
   /**
-   * 加载指定 tab 的指定页评论
-   * 竞态保护：token + contextKey + epoch，切歌/切源后旧响应丢弃
+   * 加载指定 Tab 的评论
+   * @param type - 评论 Tab
+   * @param pageNo - 页码
+   * @param append - 是否追加到现有列表
    */
-  const loadPage = async (type: "hot" | "new", pageNo = 1): Promise<void> => {
+  const loadPage = async (type: CommentTab, pageNo = 1, append = false): Promise<void> => {
     const track = trackRef.value;
     if (!track || !sourceId.value) return;
+
     const token = requestTokens[type] + 1;
     requestTokens[type] = token;
-    const contextKey = makeContextKey(track.id, sourceId.value);
+    const contextKey = makeContextKey(track, sourceId.value);
     const epoch = loadingEpoch;
-    loadingCount.value += 1;
-    error.value = "";
+
+    if (append) {
+      pages[type].loadingMore = true;
+      pages[type].appendError = "";
+    } else {
+      loadingCount.value += 1;
+      pages[type].initialError = "";
+    }
+
+    const isCurrentRequest = (): boolean => {
+      const currentTrack = trackRef.value;
+      return (
+        !disposed &&
+        requestTokens[type] === token &&
+        loadingEpoch === epoch &&
+        !!currentTrack &&
+        makeContextKey(currentTrack, sourceId.value) === contextKey
+      );
+    };
+
     try {
       const result = await window.api.comments.get({
         sourceId: sourceId.value,
@@ -100,23 +149,54 @@ export const useMusicComments = (
         limit: pages[type].limit,
       });
       if (!result.ok) throw new Error(result.error);
-      if (requestTokens[type] !== token) return;
-      const currentTrack = trackRef.value;
-      if (!currentTrack || makeContextKey(currentTrack.id, sourceId.value) !== contextKey) return;
-      pages[type] = result.data;
+      if (!isCurrentRequest()) return;
+
+      const previousCount = pages[type].list.length;
+      const nextList = append
+        ? appendUniqueComments(pages[type].list, result.data.list)
+        : result.data.list;
+      pages[type] = {
+        ...result.data,
+        list: nextList,
+        hasMore:
+          hasNextCommentPage(
+            nextList.length,
+            result.data.total,
+            result.data.list.length,
+            result.data.limit,
+          ) && (!append || nextList.length > previousCount),
+        loadingMore: false,
+        initialError: "",
+        appendError: "",
+      };
     } catch (err) {
-      if (requestTokens[type] !== token) return;
-      error.value = err instanceof Error ? err.message : String(err);
-      toast.error(error.value);
+      if (!isCurrentRequest()) return;
+      const message = err instanceof Error ? err.message : String(err);
+      if (append) {
+        pages[type].appendError = message;
+      } else {
+        pages[type].initialError = message;
+        toast.error(message);
+      }
     } finally {
-      if (epoch === loadingEpoch) loadingCount.value = Math.max(0, loadingCount.value - 1);
+      if (isCurrentRequest()) {
+        if (append) {
+          pages[type].loadingMore = false;
+        } else {
+          loadingCount.value = Math.max(0, loadingCount.value - 1);
+        }
+      }
     }
   };
 
-  /**
-   * 加载主创说评论（仅网易云内建源）
-   * 失败仅设 creatorError 不弹 toast；creatorEpoch 保护切歌作废
-   */
+  /** 加载当前 Tab 的下一页 */
+  const loadMore = async (): Promise<void> => {
+    const state = pages[activeTab.value];
+    if (loading.value || state.loadingMore || !state.hasMore || state.page < 1) return;
+    await loadPage(activeTab.value, state.page + 1, true);
+  };
+
+  /** 加载主创说评论（仅网易云内建源） */
   const loadCreator = async (): Promise<void> => {
     const track = trackRef.value;
     if (!track || sourceId.value !== NETEASE_SOURCE_ID) {
@@ -144,20 +224,10 @@ export const useMusicComments = (
     }
   };
 
-  /** 刷新：重置分页 + 拉取两 tab + 主创说 + 滚动归零 */
+  /** 刷新两组评论与主创说 */
   const refresh = async (): Promise<void> => {
     resetPages();
-    await Promise.all([loadPage("hot"), loadPage("new")]);
-    await loadCreator();
-    await nextTick();
-    scrollRef.value?.scrollTo({ top: 0 });
-  };
-
-  /** 翻页，delta 为 +1/-1 */
-  const changePage = async (delta: number): Promise<void> => {
-    const next = Math.min(maxPage.value, Math.max(1, page.value.page + delta));
-    if (next === page.value.page) return;
-    await loadPage(activeTab.value, next);
+    await Promise.all([loadPage("hot"), loadPage("new"), loadCreator()]);
     await nextTick();
     scrollRef.value?.scrollTo({ top: 0 });
   };
@@ -167,20 +237,30 @@ export const useMusicComments = (
   };
 
   const setTab = (key: string): void => {
-    activeTab.value = key as "hot" | "new";
+    activeTab.value = key as CommentTab;
   };
 
-  watch(trackRef, (next, prev) => {
-    if (!next || next === prev) return;
-    refresh().catch(() => {});
+  watch(trackRef, (next, previous) => {
+    if (!next || (previous && makeTrackKey(next) === makeTrackKey(previous))) return;
+    void refresh();
+  });
+
+  watch(sourceId, (next, previous) => {
+    if (!next || !previous || next === previous) return;
+    void refresh();
   });
 
-  watch(sourceId, (next, prev) => {
-    if (!next || !prev || next === prev) return;
-    refresh().catch(() => {});
+  void loadSources().then(async () => {
+    if (!disposed) await refresh();
   });
 
-  void loadSources().then(() => refresh());
+  onScopeDispose(() => {
+    disposed = true;
+    requestTokens.hot += 1;
+    requestTokens.new += 1;
+    creatorEpoch += 1;
+    loadingEpoch += 1;
+  });
 
   return {
     sources,
@@ -192,7 +272,6 @@ export const useMusicComments = (
     creatorError,
     loading,
     page,
-    maxPage,
     sourceOptions,
     tabs,
     creatorIds,
@@ -200,9 +279,9 @@ export const useMusicComments = (
     error,
     loadSources,
     loadPage,
+    loadMore,
     loadCreator,
     refresh,
-    changePage,
     setSource,
     setTab,
   };
diff --git a/src/pages/Comments.vue b/src/pages/Comments.vue
index 835044ae..b0abfc66 100644
--- a/src/pages/Comments.vue
+++ b/src/pages/Comments.vue
@@ -18,10 +18,7 @@ const media = useMediaStore();
 const source = route.params.source as TrackSource;
 const id = decodeURIComponent(route.params.id as string);
 
-/**
- * 构建冻结快照：优先消费暂存 → 匹配当前播放 → query 构建
- * 独立页不跟随播放切换，进入时冻结
- */
+/** 构建独立页使用的冻结曲目快照 */
 const buildSnapshot = (): Track | null => {
   const cached = consumeCommentPageSnapshot();
   if (cached) return cached;
@@ -34,13 +31,14 @@ const buildSnapshot = (): Track | null => {
     id,
     source,
     title: name,
-    artists: artistsStr ? artistsStr.split(" / ").map((n) => ({ name: n })) : [],
+    artists: artistsStr ? artistsStr.split(" / ").map((name) => ({ name })) : [],
     duration: 0,
   };
 };
 
 const trackSnapshot = shallowRef<Track | null>(buildSnapshot());
 const listScrollRef = ref<HTMLElement | null>(null);
+const loadMoreSentinelRef = ref<HTMLElement | null>(null);
 const comments = useMusicComments(trackSnapshot, listScrollRef);
 
 const {
@@ -51,21 +49,20 @@ const {
   creatorIds,
   loading,
   page,
-  maxPage,
   sourceOptions,
   tabs,
   dedupedList,
   error,
 } = comments;
 
-/** 折叠状态 */
 const collapsed = ref(false);
+let loadMoreObserver: IntersectionObserver | undefined;
 
 const handleListScroll = (event: Event): void => {
   const scrollTop = (event.target as HTMLElement).scrollTop;
-  if (!collapsed.value && scrollTop > 10) {
+  if (!collapsed.value && scrollTop > 16) {
     collapsed.value = true;
-  } else if (collapsed.value && scrollTop === 0) {
+  } else if (collapsed.value && scrollTop < 4) {
     collapsed.value = false;
   }
 };
@@ -77,48 +74,71 @@ const handleBack = (): void => {
 const handlePlay = (): void => {
   if (trackSnapshot.value) player.playNow(trackSnapshot.value);
 };
+
+onMounted(() => {
+  loadMoreObserver = new IntersectionObserver(
+    ([entry]) => {
+      if (entry?.isIntersecting) void comments.loadMore();
+    },
+    { root: listScrollRef.value, rootMargin: "0px 0px 400px", threshold: 0 },
+  );
+  if (loadMoreSentinelRef.value) loadMoreObserver.observe(loadMoreSentinelRef.value);
+});
+
+watch(
+  () => [activeTab.value, loading.value, page.value.list.length] as const,
+  async () => {
+    await nextTick();
+    const sentinel = loadMoreSentinelRef.value;
+    if (!sentinel || !loadMoreObserver) return;
+    loadMoreObserver.unobserve(sentinel);
+    loadMoreObserver.observe(sentinel);
+  },
+);
+
+onBeforeUnmount(() => loadMoreObserver?.disconnect());
 </script>
 
 <template>
   <div class="flex flex-col h-full">
-    <!-- 顶部歌曲信息头 -->
     <div v-if="trackSnapshot" class="shrink-0 px-5 pb-2">
       <div
-        class="flex mt-2 transition-[gap,margin] duration-300"
+        class="flex mt-2 transition-[gap,margin] duration-250"
         :class="collapsed ? 'gap-3 mb-3' : 'gap-5 mb-4'"
       >
-        <!-- 返回按钮 -->
         <SButton variant="ghost" circle class="shrink-0 mt-1" @click="handleBack">
           <template #icon><IconLucideArrowLeft /></template>
         </SButton>
-        <!-- 小封面 -->
         <SImg
           v-if="trackSnapshot.cover"
           :src="trackSnapshot.cover"
           :alt="trackSnapshot.title"
-          class="shrink-0 rounded-lg transition-[width,height] duration-300"
+          class="shrink-0 rounded-lg transition-[width,height] duration-250"
           :class="collapsed ? 'size-14' : 'size-20'"
         />
         <div
-v-else class="shrink-0 rounded-lg bg-on-surface/8 transition-[width,height] duration-300"
+          v-else
+          class="shrink-0 rounded-lg bg-on-surface/8 transition-[width,height] duration-250"
           :class="collapsed ? 'size-14' : 'size-20'"
         />
-        <!-- 标题/歌手 -->
         <div class="flex-1 flex flex-col min-w-0 py-1">
           <h1
-            class="font-bold text-on-surface truncate lh-normal transition-[font-size,line-height] duration-300"
+            class="font-bold text-on-surface truncate lh-normal transition-[font-size,line-height] duration-250"
             :class="collapsed ? 'text-lg' : 'text-2xl'"
           >
             {{ trackSnapshot.title }}
           </h1>
           <div
-            class="text-sm text-on-surface-variant/60 truncate transition-opacity duration-300"
-            :class="collapsed ? 'opacity-0' : 'opacity-100'"
+            class="truncate transition-[font-size,color] duration-250"
+            :class="
+              collapsed
+                ? 'text-xs text-on-surface-variant/50'
+                : 'text-sm text-on-surface-variant/60'
+            "
           >
-            {{ trackSnapshot.artists.map((a) => a.name).join(" / ") }}
+            {{ trackSnapshot.artists.map((artist) => artist.name).join(" / ") }}
           </div>
         </div>
-        <!-- 播放按钮 -->
         <SButton
           type="primary"
           variant="secondary"
@@ -132,7 +152,6 @@ v-else class="shrink-0 rounded-lg bg-on-surface/8 transition-[width,height] dura
       </div>
     </div>
 
-    <!-- 工具栏 -->
     <div class="shrink-0 flex items-center gap-3 px-5 pb-3">
       <div class="min-w-0 flex-1">
         <STabs v-model="activeTab" :tabs="tabs" type="bar" size="medium" />
@@ -149,23 +168,20 @@ v-else class="shrink-0 rounded-lg bg-on-surface/8 transition-[width,height] dura
       </div>
     </div>
 
-    <!-- 滚动内容区 -->
     <div
       ref="listScrollRef"
-      class="min-h-0 flex-1 overflow-y-auto px-5 pb-4"
+      class="min-h-0 flex-1 overflow-y-auto px-5 pb-4 [scrollbar-gutter:stable]"
       @scroll="handleListScroll"
     >
-      <!-- 主创说分区 -->
       <div v-if="creatorComments.length" class="mb-5">
         <h3 class="text-sm font-semibold mb-3 text-on-surface">{{ t("comments.creator") }}</h3>
         <CommentList
           :items="creatorComments"
           :creator-ids="creatorIds"
-          :column-min-width="280"
+          :column-min-width="360"
         />
       </div>
 
-      <!-- 四态分支 -->
       <div
         v-if="!sources.length"
         class="flex items-center justify-center py-16 text-on-surface-variant/60"
@@ -180,7 +196,7 @@ v-else class="shrink-0 rounded-lg bg-on-surface/8 transition-[width,height] dura
         class="flex flex-col items-center justify-center gap-3 py-16"
       >
         <div class="text-sm text-on-surface-variant">{{ error }}</div>
-        <SButton variant="outline" @click="comments.loadPage(activeTab, page.page)">
+        <SButton variant="outline" @click="comments.loadPage(activeTab, 1)">
           {{ t("common.retry") }}
         </SButton>
       </div>
@@ -202,33 +218,18 @@ v-else class="shrink-0 rounded-lg bg-on-surface/8 transition-[width,height] dura
           <div class="text-sm">{{ t("comments.empty") }}</div>
         </div>
       </div>
-      <div v-else>
-        <CommentList :items="dedupedList" :column-min-width="280" />
-      </div>
-    </div>
+      <CommentList v-else :items="dedupedList" :column-min-width="360" />
 
-    <!-- 分页栏 -->
-    <div
-      v-if="sources.length"
-      class="shrink-0 flex items-center justify-between px-5 py-3 text-xs text-on-surface-variant"
-    >
-      <span>{{ t("comments.page", { page: page.page, total: maxPage }) }}</span>
-      <div class="flex gap-2">
-        <SButton
-          size="small"
-          variant="secondary"
-          :disabled="page.page <= 1 || loading"
-          @click="comments.changePage(-1)"
-        >
-          {{ t("common.prev") }}
-        </SButton>
-        <SButton
-          size="small"
-          variant="secondary"
-          :disabled="page.page >= maxPage || loading"
-          @click="comments.changePage(1)"
-        >
-          {{ t("common.next") }}
+      <div ref="loadMoreSentinelRef" class="h-px" />
+      <div
+        v-if="page.loadingMore"
+        class="flex justify-center py-5 text-on-surface-variant/60"
+      >
+        <SLoading class="text-2xl" />
+      </div>
+      <div v-else-if="page.appendError" class="flex justify-center py-5">
+        <SButton size="small" variant="outline" @click="comments.loadMore">
+          {{ t("common.retry") }}
         </SButton>
       </div>
     </div>
diff --git a/src/utils/commentMasonry.ts b/src/utils/commentMasonry.ts
new file mode 100644
index 00000000..6ea59802
--- /dev/null
+++ b/src/utils/commentMasonry.ts
@@ -0,0 +1,2 @@
+export const getMasonryRowSpan = (height: number, rowHeight: number, gap: number): number =>
+  Math.max(1, Math.ceil((height + gap) / (rowHeight + gap)));
diff --git a/src/utils/commentPagination.ts b/src/utils/commentPagination.ts
new file mode 100644
index 00000000..b8dd9be0
--- /dev/null
+++ b/src/utils/commentPagination.ts
@@ -0,0 +1,16 @@
+import type { MusicCommentItem } from "@shared/types/comment";
+
+export const appendUniqueComments = (
+  current: readonly MusicCommentItem[],
+  incoming: readonly MusicCommentItem[],
+): MusicCommentItem[] => {
+  const ids = new Set(current.map((item) => item.id));
+  return [...current, ...incoming.filter((item) => !ids.has(item.id) && ids.add(item.id))];
+};
+
+export const hasNextCommentPage = (
+  loadedCount: number,
+  total: number,
+  receivedCount: number,
+  limit = 20,
+): boolean => receivedCount === limit && loadedCount < total;

From 4ab21d0ab071362c767ba72c829c071e788e28cb Mon Sep 17 00:00:00 2001
From: WindDrift <115442729+WindDrift@users.noreply.github.com>
Date: Thu, 23 Jul 2026 01:13:12 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat(comments):=20=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E8=AF=84=E8=AE=BA=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/comments/CommentCard.vue       |  42 +++-
 src/components/comments/CommentList.vue       |   4 +
 .../player/FullPlayer/FullPlayerComments.vue  | 183 ++++++++++--------
 src/components/ui/SSelect.vue                 |  15 +-
 src/components/ui/STabs.vue                   |  37 ++--
 src/i18n/locales/en-US.json                   |   1 +
 src/i18n/locales/zh-CN.json                   |   1 +
 7 files changed, 176 insertions(+), 107 deletions(-)

diff --git a/src/components/comments/CommentCard.vue b/src/components/comments/CommentCard.vue
index fcef2c84..bf4d0044 100644
--- a/src/components/comments/CommentCard.vue
+++ b/src/components/comments/CommentCard.vue
@@ -10,24 +10,37 @@ interface Props {
   creator?: boolean;
   /** 紧凑模式（缩减间距） */
   compact?: boolean;
+  /** 是否使用全屏播放器配色 */
+  cover?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   creator: false,
   compact: false,
+  cover: false,
 });
 </script>
 
 <template>
-  <SCard size="small" radius="lg">
+  <div
+    class="rounded-xl border border-solid px-3 py-2.5 transition-colors duration-150"
+    :class="
+      cover ? 'border-cover/10 bg-cover/6 hover:bg-cover/10' : 'border-primary/20 bg-surface-panel'
+    "
+  >
     <div :class="compact ? 'flex gap-2.5' : 'flex gap-3'">
       <SImg
         v-if="item.avatar"
         :src="item.avatar"
-        class="h-9 w-9 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/10"
+        class="h-9 w-9 shrink-0 rounded-full ring-1"
+        :class="cover ? 'ring-cover/15' : 'ring-black/10 dark:ring-white/10'"
         alt=""
       />
-      <div v-else class="h-9 w-9 shrink-0 rounded-full bg-on-surface/8" />
+      <div
+        v-else
+        class="h-9 w-9 shrink-0 rounded-full"
+        :class="cover ? 'bg-cover/10' : 'bg-on-surface/8'"
+      />
       <div class="min-w-0 flex-1">
         <div class="flex items-start justify-between gap-3">
           <div class="min-w-0">
@@ -37,7 +50,10 @@ withDefaults(defineProps<Props>(), {
                 {{ $t("comments.creatorBadge") }}
               </STag>
             </div>
-            <div class="mt-0.5 flex gap-2 text-xs text-on-surface-variant">
+            <div
+              class="mt-0.5 flex gap-2 text-xs"
+              :class="cover ? 'text-cover/50' : 'text-on-surface-variant'"
+            >
               <span v-if="item.time">{{ formatDate(item.time) }}</span>
               <span v-if="item.location">
                 {{ $t("comments.location", { location: item.location }) }}
@@ -46,24 +62,32 @@ withDefaults(defineProps<Props>(), {
           </div>
           <div
             v-if="item.likedCount != null"
-            class="flex shrink-0 items-center gap-1 text-xs tabular-nums text-on-surface-variant"
+            class="flex shrink-0 items-center gap-1 text-xs tabular-nums"
+            :class="cover ? 'text-cover/50' : 'text-on-surface-variant'"
           >
             <IconLucideThumbsUp class="size-3.5" />
             <span>{{ item.likedCount }}</span>
           </div>
         </div>
         <p class="mt-2 whitespace-pre-wrap break-words text-sm leading-6">{{ item.text }}</p>
-        <div v-if="item.reply?.length" class="mt-2 rounded-md bg-on-surface/5 px-3 py-2">
+        <div
+          v-if="item.reply?.length"
+          class="mt-2 rounded-lg px-3 py-2"
+          :class="cover ? 'bg-cover/7' : 'bg-on-surface/5'"
+        >
           <div
             v-for="reply in item.reply"
             :key="reply.id"
-            class="text-xs leading-5 text-on-surface-variant"
+            class="text-xs leading-5"
+            :class="cover ? 'text-cover/60' : 'text-on-surface-variant'"
           >
-            <span class="font-medium text-on-surface">{{ reply.userName }}：</span>
+            <span class="font-medium" :class="cover ? 'text-cover/85' : 'text-on-surface'">
+              {{ reply.userName }}：
+            </span>
             {{ reply.text }}
           </div>
         </div>
       </div>
     </div>
-  </SCard>
+  </div>
 </template>
diff --git a/src/components/comments/CommentList.vue b/src/components/comments/CommentList.vue
index 7309fa09..32c1ec4d 100644
--- a/src/components/comments/CommentList.vue
+++ b/src/components/comments/CommentList.vue
@@ -12,6 +12,8 @@ interface Props {
   creatorIds?: Set<string>;
   /** 紧凑模式透传给 CommentCard */
   compact?: boolean;
+  /** 是否使用全屏播放器配色 */
+  cover?: boolean;
   /** 列间距（px） */
   gap?: number;
 }
@@ -20,6 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
   columnMinWidth: 280,
   creatorIds: () => new Set<string>(),
   compact: false,
+  cover: false,
   gap: 12,
 });
 
@@ -114,6 +117,7 @@ onBeforeUnmount(() => {
         :item="item"
         :creator="creatorIds.has(item.id)"
         :compact="compact"
+        :cover="cover"
       />
     </div>
   </div>
diff --git a/src/components/player/FullPlayer/FullPlayerComments.vue b/src/components/player/FullPlayer/FullPlayerComments.vue
index 278a43fe..56aa6d7f 100644
--- a/src/components/player/FullPlayer/FullPlayerComments.vue
+++ b/src/components/player/FullPlayer/FullPlayerComments.vue
@@ -39,6 +39,7 @@ const {
 } = comments;
 
 const columnMinWidth = computed(() => (props.mode === "half" ? 400 : 360));
+const totalComments = computed(() => Math.max(page.value.total, dedupedList.value.length));
 const scrolling = ref(false);
 let loadMoreObserver: IntersectionObserver | undefined;
 let scrollTimer: ReturnType<typeof setTimeout> | undefined;
@@ -81,110 +82,128 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full text-cover">
-    <div class="shrink-0 flex items-center gap-3 pb-3">
-      <SImg
-        v-if="media.track?.cover"
-        :src="media.track.cover"
-        class="size-12 rounded-lg shrink-0"
-        alt=""
-      />
-      <div v-else class="size-12 rounded-lg shrink-0 bg-cover/14" />
-      <div class="flex-1 min-w-0">
-        <div class="text-base truncate font-medium leading-snug">{{ media.track?.title }}</div>
-        <div class="text-sm truncate leading-snug mt-0.5 text-cover/55">
-          {{ media.track?.artists.map((artist) => artist.name).join(" / ") }}
+  <div class="flex h-full flex-col text-cover">
+    <div class="shrink-0 flex items-start justify-between gap-4 pl-1 pr-20 pb-4">
+      <div class="flex min-w-0 items-center gap-3 pl-2.5">
+        <SImg
+          v-if="media.track?.cover"
+          :src="media.track.cover"
+          class="size-12 shrink-0 rounded-lg"
+          alt=""
+        />
+        <div v-else class="size-12 shrink-0 rounded-lg bg-cover/14" />
+        <div class="min-w-0">
+          <h2 class="m-0 truncate text-2xl font-semibold leading-tight">
+            {{ t("comments.name") }}
+          </h2>
+          <div class="mt-1 flex min-w-0 items-center gap-2 text-sm text-cover/55">
+            <span class="truncate">{{ media.track?.title }}</span>
+            <span class="shrink-0 text-cover/25">·</span>
+            <span class="shrink-0">{{ t("comments.total", { count: totalComments }) }}</span>
+          </div>
         </div>
       </div>
-      <SButton type="cover" variant="ghost" circle @click="handleClose">
-        <template #icon><IconLucideX /></template>
-      </SButton>
+      <div class="shrink-0 flex items-center gap-3">
+        <SButton
+          type="cover"
+          variant="secondary"
+          round
+          :size="40"
+          :loading="loading"
+          @click="comments.refresh"
+        >
+          <template #icon><IconLucideRefreshCw /></template>
+        </SButton>
+        <SButton type="cover" variant="secondary" round :size="40" @click="handleClose">
+          <template #icon><IconLucideX /></template>
+        </SButton>
+      </div>
     </div>
 
-    <div class="shrink-0 flex items-center gap-3 pb-3">
+    <div class="shrink-0 flex items-center gap-4 pl-3 pr-20 pb-3">
       <div class="min-w-0 flex-1">
-        <STabs v-model="activeTab" :tabs="tabs" type="bar" size="medium" />
+        <STabs v-model="activeTab" :tabs="tabs" type="bar" size="medium" cover />
       </div>
-      <SButton
-        type="cover"
-        variant="ghost"
-        circle
-        size="small"
-        :loading="loading"
-        @click="comments.refresh"
-      >
-        <template #icon><IconLucideRefreshCw /></template>
-      </SButton>
-      <div class="w-28 shrink-0">
+      <div class="w-32 shrink-0">
         <SSelect
           v-model="sourceId"
           :options="sourceOptions"
           :disabled="sources.length === 0 || loading"
+          cover
         />
       </div>
     </div>
 
     <div
-      ref="listScrollRef"
-      class="min-h-0 flex-1 overflow-y-auto pr-1 [scrollbar-gutter:stable] [&::-webkit-scrollbar-thumb]:bg-cover/25 [&::-webkit-scrollbar-thumb:hover]:bg-cover/45"
-      :class="immersive && !scrolling ? '[&::-webkit-scrollbar-thumb]:bg-transparent' : ''"
-      @scroll="handleScroll"
+      class="relative min-h-0 flex-1"
+      :style="{
+        maskImage:
+          'linear-gradient(180deg, transparent 0px, #000 24px, #000 calc(100% - 32px), transparent 100%)',
+      }"
     >
-      <div v-if="creatorComments.length" class="mb-5">
-        <h3 class="text-sm font-semibold mb-3">{{ t("comments.creator") }}</h3>
-        <CommentList
-          :items="creatorComments"
-          :creator-ids="creatorIds"
-          :column-min-width="columnMinWidth"
-        />
-      </div>
-
       <div
-        v-if="!sources.length"
-        class="flex items-center justify-center py-16 text-cover/35"
+        ref="listScrollRef"
+        class="h-full overflow-y-auto pl-3 pr-20 pt-6 pb-8 [scrollbar-gutter:stable] [&::-webkit-scrollbar-thumb]:bg-cover/25 [&::-webkit-scrollbar-thumb:hover]:bg-cover/45"
+        :class="immersive && !scrolling ? '[&::-webkit-scrollbar-thumb]:bg-transparent' : ''"
+        @scroll="handleScroll"
       >
-        <div class="text-center">
-          <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
-          <div class="text-sm">{{ t("comments.noSource") }}</div>
+        <div v-if="creatorComments.length" class="mb-6">
+          <div class="mb-3 flex items-center gap-2">
+            <span class="h-4 w-0.5 rounded-full bg-cover/70" />
+            <h3 class="m-0 text-sm font-semibold text-cover/85">{{ t("comments.creator") }}</h3>
+          </div>
+          <CommentList
+            :items="creatorComments"
+            :creator-ids="creatorIds"
+            :column-min-width="columnMinWidth"
+            cover
+          />
         </div>
-      </div>
-      <div
-        v-else-if="error && page.list.length === 0"
-        class="flex flex-col items-center justify-center gap-3 py-16"
-      >
-        <div class="text-sm text-cover/55">{{ error }}</div>
-        <SButton variant="outline" @click="comments.loadPage(activeTab, 1)">
-          {{ t("common.retry") }}
-        </SButton>
-      </div>
-      <div
-        v-else-if="page.list.length === 0 && loading"
-        class="flex items-center justify-center py-16 text-cover/35"
-      >
-        <div class="text-center">
-          <SLoading class="mx-auto mb-4 block text-4xl text-cover/50" />
-          <div class="text-sm">{{ t("comments.loading") }}</div>
+
+        <div v-if="!sources.length" class="flex min-h-64 items-center justify-center text-cover/35">
+          <div class="text-center">
+            <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
+            <div class="text-sm">{{ t("comments.noSource") }}</div>
+          </div>
         </div>
-      </div>
-      <div
-        v-else-if="page.list.length === 0"
-        class="flex items-center justify-center py-16 text-cover/35"
-      >
-        <div class="text-center">
-          <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
-          <div class="text-sm">{{ t("comments.empty") }}</div>
+        <div
+          v-else-if="error && page.list.length === 0"
+          class="flex min-h-64 flex-col items-center justify-center gap-3"
+        >
+          <div class="text-sm text-cover/55">{{ error }}</div>
+          <SButton type="cover" variant="outline" @click="comments.loadPage(activeTab, 1)">
+            {{ t("common.retry") }}
+          </SButton>
         </div>
-      </div>
-      <CommentList v-else :items="dedupedList" :column-min-width="columnMinWidth" />
+        <div
+          v-else-if="page.list.length === 0 && loading"
+          class="flex min-h-64 items-center justify-center text-cover/35"
+        >
+          <div class="text-center">
+            <SLoading class="mx-auto mb-4 block text-4xl text-cover/50" />
+            <div class="text-sm">{{ t("comments.loading") }}</div>
+          </div>
+        </div>
+        <div
+          v-else-if="page.list.length === 0"
+          class="flex min-h-64 items-center justify-center text-cover/35"
+        >
+          <div class="text-center">
+            <IconLucideMessageCircleOff class="mx-auto mb-4 size-14 opacity-30" />
+            <div class="text-sm">{{ t("comments.empty") }}</div>
+          </div>
+        </div>
+        <CommentList v-else :items="dedupedList" :column-min-width="columnMinWidth" cover />
 
-      <div ref="loadMoreSentinelRef" class="h-px" />
-      <div v-if="page.loadingMore" class="flex justify-center py-5 text-cover/55">
-        <SLoading class="text-2xl" />
-      </div>
-      <div v-else-if="page.appendError" class="flex justify-center py-5">
-        <SButton size="small" type="cover" variant="outline" @click="comments.loadMore">
-          {{ t("common.retry") }}
-        </SButton>
+        <div ref="loadMoreSentinelRef" class="h-px" />
+        <div v-if="page.loadingMore" class="flex justify-center py-5 text-cover/55">
+          <SLoading class="text-2xl" />
+        </div>
+        <div v-else-if="page.appendError" class="flex justify-center py-5">
+          <SButton size="small" type="cover" variant="outline" @click="comments.loadMore">
+            {{ t("common.retry") }}
+          </SButton>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/ui/SSelect.vue b/src/components/ui/SSelect.vue
index c46c1c10..69d1a576 100644
--- a/src/components/ui/SSelect.vue
+++ b/src/components/ui/SSelect.vue
@@ -15,6 +15,8 @@ export interface SSelectProps {
   placeholder?: string;
   /** 全圆角胶囊形 */
   round?: boolean;
+  /** 使用全屏播放器配色 */
+  cover?: boolean;
 }
 
 const props = withDefaults(defineProps<SSelectProps>(), {
@@ -22,6 +24,7 @@ const props = withDefaults(defineProps<SSelectProps>(), {
   disabled: false,
   placeholder: "",
   round: false,
+  cover: false,
 });
 
 const emit = defineEmits<{
@@ -45,15 +48,21 @@ const handleChange = (val: string) => {
     @update:model-value="handleChange"
   >
     <SelectTrigger
-      class="group flex w-full items-center justify-between gap-2 h-8.5 px-3 text-sm text-on-surface bg-field border border-solid border-on-surface/20 cursor-pointer outline-none focus-visible:outline-none transition-[border-color,box-shadow,opacity] duration-250 hover:border-on-surface/50 data-[state=open]:border-primary data-[state=open]:ring-2 data-[state=open]:ring-primary/25 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
-      :class="round ? 'rounded-full' : 'rounded-lg'"
+      class="group flex w-full items-center justify-between gap-2 h-8.5 px-3 text-sm border border-solid cursor-pointer outline-none focus-visible:outline-none transition-[border-color,background-color,box-shadow,opacity] duration-250 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
+      :class="[
+        round ? 'rounded-full' : 'rounded-lg',
+        cover
+          ? 'text-cover bg-cover/8 border-cover/15 hover:bg-cover/12 hover:border-cover/25 data-[state=open]:border-cover/35 data-[state=open]:ring-2 data-[state=open]:ring-cover/10'
+          : 'text-on-surface bg-field border-on-surface/20 hover:border-on-surface/50 data-[state=open]:border-primary data-[state=open]:ring-2 data-[state=open]:ring-primary/25',
+      ]"
     >
       <SelectValue class="min-w-0 truncate">
         <span class="truncate">{{ selectedLabel }}</span>
       </SelectValue>
       <SelectIcon as-child>
         <IconLucideChevronDown
-          class="size-3.5 text-on-surface-variant/50 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180"
+          class="size-3.5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180"
+          :class="cover ? 'text-cover/50' : 'text-on-surface-variant/50'"
         />
       </SelectIcon>
     </SelectTrigger>
diff --git a/src/components/ui/STabs.vue b/src/components/ui/STabs.vue
index 630ee2d4..2d58dc68 100644
--- a/src/components/ui/STabs.vue
+++ b/src/components/ui/STabs.vue
@@ -29,6 +29,8 @@ export interface STabsProps {
   animated?: boolean;
   /** 圆角胶囊 */
   round?: boolean;
+  /** 使用全屏播放器配色 */
+  cover?: boolean;
 }
 
 const props = withDefaults(defineProps<STabsProps>(), {
@@ -36,6 +38,7 @@ const props = withDefaults(defineProps<STabsProps>(), {
   size: "medium",
   animated: false,
   round: false,
+  cover: false,
 });
 
 const emit = defineEmits<{
@@ -221,15 +224,19 @@ const panelTransitionClasses = computed(() => {
       type === 'bar' && (justifyContent ? 'flex w-full pb-1' : 'inline-flex shrink-0 gap-3 pb-1'),
     ]"
   >
-    <div v-if="type === 'line'" class="absolute inset-x-0 bottom-0 h-0.5 bg-outline-variant/65" />
+    <div
+      v-if="type === 'line'"
+      class="absolute inset-x-0 bottom-0 h-0.5"
+      :class="cover ? 'bg-cover/15' : 'bg-outline-variant/65'"
+    />
 
     <div
       v-if="indicatorStyle.width"
       :class="[
         'absolute pointer-events-none transition-[left,width] duration-320 ease-[cubic-bezier(0.4,0,0.2,1)]',
         type === 'segment'
-          ? ['bg-primary/12', round ? 'rounded-full' : 'rounded-md']
-          : 'bottom-0.5 h-[3px] bg-primary rounded-full',
+          ? [cover ? 'bg-cover/14' : 'bg-primary/12', round ? 'rounded-full' : 'rounded-md']
+          : [cover ? 'bg-cover' : 'bg-primary', 'bottom-0.5 h-[3px] rounded-full'],
       ]"
       :style="indicatorStyle"
     />
@@ -246,16 +253,20 @@ const panelTransitionClasses = computed(() => {
         type === 'segment' ? ['flex-1 h-full', segmentTabClasses[size]] : sizeClasses[size],
         tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer',
         modelValue === tab.key
-          ? {
-              bar: 'text-primary font-medium',
-              line: 'text-primary font-medium',
-              segment: 'text-on-surface font-medium',
-            }[type]
-          : {
-              bar: 'text-on-surface-variant',
-              line: 'text-on-surface-variant',
-              segment: 'text-on-surface',
-            }[type],
+          ? cover
+            ? 'text-cover font-medium'
+            : {
+                bar: 'text-primary font-medium',
+                line: 'text-primary font-medium',
+                segment: 'text-on-surface font-medium',
+              }[type]
+          : cover
+            ? 'text-cover/55 hover:text-cover/75'
+            : {
+                bar: 'text-on-surface-variant',
+                line: 'text-on-surface-variant',
+                segment: 'text-on-surface',
+              }[type],
       ]"
       @click="select(tab)"
     >
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f765b856..400fbbfb 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -134,6 +134,7 @@
     "page": "Page {page} / {total}",
     "creator": "Creator Says",
     "creatorBadge": "Creator",
+    "total": "{count} comments",
     "playTrack": "Play Track",
     "back": "Back",
     "pageTitle": "Song Comments"
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index cae0bec3..45af5c11 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -122,6 +122,7 @@
     "page": "第 {page} / {total} 页",
     "creator": "主创说",
     "creatorBadge": "主创",
+    "total": "共 {count} 条评论",
     "playTrack": "播放此曲",
     "back": "返回",
     "pageTitle": "歌曲评论"

From 1c02f51dde9f96efb580ba7928eab4b668d4627b Mon Sep 17 00:00:00 2001
From: WindDrift <115442729+WindDrift@users.noreply.github.com>
Date: Thu, 23 Jul 2026 01:47:35 +0800
Subject: [PATCH 4/6] =?UTF-8?q?refactor(comment):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E6=92=AD=E6=94=BE=E5=99=A8=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E5=8C=BA=E5=B8=83=E5=B1=80=E4=B8=8E=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../player/FullPlayer/FullPlayerComments.vue         | 12 ++++++------
 src/components/player/FullPlayer/index.vue           |  9 +++------
 src/i18n/locales/en-US.json                          |  1 -
 src/i18n/locales/zh-CN.json                          |  1 -
 4 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/player/FullPlayer/FullPlayerComments.vue b/src/components/player/FullPlayer/FullPlayerComments.vue
index 56aa6d7f..afa82b74 100644
--- a/src/components/player/FullPlayer/FullPlayerComments.vue
+++ b/src/components/player/FullPlayer/FullPlayerComments.vue
@@ -39,7 +39,7 @@ const {
 } = comments;
 
 const columnMinWidth = computed(() => (props.mode === "half" ? 400 : 360));
-const totalComments = computed(() => Math.max(page.value.total, dedupedList.value.length));
+const artistNames = computed(() => media.track?.artists.map((artist) => artist.name).join(" / "));
 const scrolling = ref(false);
 let loadMoreObserver: IntersectionObserver | undefined;
 let scrollTimer: ReturnType<typeof setTimeout> | undefined;
@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex h-full flex-col text-cover">
-    <div class="shrink-0 flex items-start justify-between gap-4 pl-1 pr-20 pb-4">
+    <div class="shrink-0 flex items-start justify-between gap-4 pl-1 pb-4">
       <div class="flex min-w-0 items-center gap-3 pl-2.5">
         <SImg
           v-if="media.track?.cover"
@@ -98,8 +98,8 @@ onBeforeUnmount(() => {
           </h2>
           <div class="mt-1 flex min-w-0 items-center gap-2 text-sm text-cover/55">
             <span class="truncate">{{ media.track?.title }}</span>
-            <span class="shrink-0 text-cover/25">·</span>
-            <span class="shrink-0">{{ t("comments.total", { count: totalComments }) }}</span>
+            <span v-if="artistNames" class="shrink-0 text-cover/25">·</span>
+            <span v-if="artistNames" class="truncate">{{ artistNames }}</span>
           </div>
         </div>
       </div>
@@ -120,7 +120,7 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div class="shrink-0 flex items-center gap-4 pl-3 pr-20 pb-3">
+    <div class="shrink-0 flex items-center gap-4 pl-3 pb-3">
       <div class="min-w-0 flex-1">
         <STabs v-model="activeTab" :tabs="tabs" type="bar" size="medium" cover />
       </div>
@@ -143,7 +143,7 @@ onBeforeUnmount(() => {
     >
       <div
         ref="listScrollRef"
-        class="h-full overflow-y-auto pl-3 pr-20 pt-6 pb-8 [scrollbar-gutter:stable] [&::-webkit-scrollbar-thumb]:bg-cover/25 [&::-webkit-scrollbar-thumb:hover]:bg-cover/45"
+        class="h-full overflow-y-auto pl-3 pr-2 pt-6 pb-8 [scrollbar-gutter:stable] [&::-webkit-scrollbar-thumb]:bg-cover/25 [&::-webkit-scrollbar-thumb:hover]:bg-cover/45"
         :class="immersive && !scrolling ? '[&::-webkit-scrollbar-thumb]:bg-transparent' : ''"
         @scroll="handleScroll"
       >
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index afd199be..46612e19 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -113,8 +113,7 @@ const coverCentered = computed(() => {
 /** 全屏内嵌评论布局模式：off 关闭 / half 左半屏 / full 全屏 */
 const fullCommentMode = computed<"off" | "half" | "full">(() => {
   if (!status.fullCommentsOpen) return "off";
-  if (fullscreenCover.value) return "half";
-  return hasLyric.value ? "half" : "full";
+  return hasLyric.value && showLyric.value ? "half" : "full";
 });
 
 const handleLyricSeek = async (timeMs: number): Promise<void> => {
@@ -281,9 +280,7 @@ watch(
           <div
             v-if="!fullscreenCover"
             class="absolute inset-y-0 left-0 w-[45%] flex items-center justify-center px-12 transition-[transform,opacity] duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
-            :class="
-              fullCommentMode === 'off' ? 'opacity-100' : 'opacity-0 pointer-events-none'
-            "
+            :class="fullCommentMode === 'off' ? 'opacity-100' : 'opacity-0 pointer-events-none'"
             :style="coverCentered ? 'transform: translateX(calc(100% * 11 / 18))' : undefined"
           >
             <div class="relative w-[clamp(200px,85%,50vh)] -translate-y-[11vh]">
@@ -422,7 +419,7 @@ watch(
               class="absolute py-4 z-6 transition-[inset,width,padding] duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
               :class="
                 fullCommentMode === 'half'
-                  ? 'inset-y-0 left-0 w-[45%] px-[clamp(32px,4vw,64px)]'
+                  ? 'inset-y-0 left-0 w-1/2 pl-[clamp(32px,4vw,64px)] pr-[clamp(20px,2.5vw,40px)]'
                   : 'inset-0 w-full px-[clamp(32px,5vw,80px)]'
               "
             >
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 400fbbfb..f765b856 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -134,7 +134,6 @@
     "page": "Page {page} / {total}",
     "creator": "Creator Says",
     "creatorBadge": "Creator",
-    "total": "{count} comments",
     "playTrack": "Play Track",
     "back": "Back",
     "pageTitle": "Song Comments"
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 45af5c11..cae0bec3 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -122,7 +122,6 @@
     "page": "第 {page} / {total} 页",
     "creator": "主创说",
     "creatorBadge": "主创",
-    "total": "共 {count} 条评论",
     "playTrack": "播放此曲",
     "back": "返回",
     "pageTitle": "歌曲评论"

From fa14355198cf4282ad3503b7ddedb540eb9eb322 Mon Sep 17 00:00:00 2001
From: WindDrift <115442729+WindDrift@users.noreply.github.com>
Date: Thu, 23 Jul 2026 02:32:40 +0800
Subject: [PATCH 5/6] =?UTF-8?q?fix(comment):=20=E4=BF=AE=E5=A4=8D=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E6=92=AD=E6=94=BE=E5=99=A8=E8=AF=84=E8=AE=BA=E5=92=8C?=
 =?UTF-8?q?=E6=AD=8C=E8=AF=8D=E6=97=A0=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/player/FullPlayer/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index 46612e19..d21817d8 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -298,7 +298,7 @@ watch(
           <div
             class="group absolute inset-y-0 right-0 pr-20 flex flex-col transition-opacity duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
             :class="[
-              fullscreenCover ? 'w-1/2' : 'w-[55%]',
+              fullscreenCover || fullCommentMode === 'half' ? 'w-1/2' : 'w-[55%]',
               coverCentered || status.fullQueueOpen || fullCommentMode === 'full'
                 ? 'opacity-0 pointer-events-none'
                 : 'opacity-100',

From f4bff14d62b4b2b3a66ecafdad9d10ff06fb49a9 Mon Sep 17 00:00:00 2001
From: WindDrift <115442729+WindDrift@users.noreply.github.com>
Date: Thu, 23 Jul 2026 12:52:30 +0800
Subject: [PATCH 6/6] =?UTF-8?q?style:=20=E4=BB=A3=E7=A0=81=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 electron/main/ipc/comments.ts              |  5 +----
 electron/main/services/comments/creator.ts | 18 ++++--------------
 electron/main/services/comments/data.ts    |  4 +---
 electron/main/services/comments/index.ts   |  8 ++------
 electron/preload/index.ts                  |  3 +--
 src/composables/useMusicComments.ts        |  3 ++-
 src/pages/Comments.vue                     | 19 +++----------------
 7 files changed, 14 insertions(+), 46 deletions(-)

diff --git a/electron/main/ipc/comments.ts b/electron/main/ipc/comments.ts
index 85b54b8e..8915b036 100644
--- a/electron/main/ipc/comments.ts
+++ b/electron/main/ipc/comments.ts
@@ -27,10 +27,7 @@ export const registerCommentsIpc = (): void => {
 
   ipcMain.handle(
     "comments:creator",
-    async (
-      _evt,
-      args: MusicCommentCreatorQuery,
-    ): Promise<MusicCommentCreatorResponse> => {
+    async (_evt, args: MusicCommentCreatorQuery): Promise<MusicCommentCreatorResponse> => {
       try {
         return { ok: true, data: await getCreatorComments(args) };
       } catch (err) {
diff --git a/electron/main/services/comments/creator.ts b/electron/main/services/comments/creator.ts
index dfa8873e..3d3426f4 100644
--- a/electron/main/services/comments/creator.ts
+++ b/electron/main/services/comments/creator.ts
@@ -1,9 +1,6 @@
 import { callNetease } from "@main/apis/netease";
 import { coreLog } from "@main/utils/logger";
-import type {
-  MusicCommentCreatorQuery,
-  MusicCommentItem,
-} from "@shared/types/comment";
+import type { MusicCommentCreatorQuery, MusicCommentItem } from "@shared/types/comment";
 import { normalizeNeteaseCommentPage, scanCreatorComments } from "./data";
 import { findNeteaseSongMeta } from "./index";
 
@@ -48,9 +45,7 @@ class BoundedMap<K, V> {
 }
 
 /** artist id → 绑定的网易云用户 accountId（null 表示负缓存：未绑定） */
-const artistAccountIdCache = new BoundedMap<string, string | null>(
-  ARTIST_ACCOUNT_CACHE_LIMIT,
-);
+const artistAccountIdCache = new BoundedMap<string, string | null>(ARTIST_ACCOUNT_CACHE_LIMIT);
 /** 网易云 songId → 主创评论列表（空数组表示负缓存：无主创评论） */
 const creatorCommentsCache = new BoundedMap<string, MusicCommentItem[]>(
   CREATOR_COMMENTS_CACHE_LIMIT,
@@ -76,9 +71,7 @@ const fetchHotPage = async (
  * 解析歌手列表对应的网易云用户 accountId 集合
  * 多歌手多账号匹配并去重；accountId 为 0 或不存在视为未绑定（负缓存）
  */
-const resolveArtistAccountIds = async (
-  artistIds: string[],
-): Promise<Set<string>> => {
+const resolveArtistAccountIds = async (artistIds: string[]): Promise<Set<string>> => {
   const accountIds = new Set<string>();
   for (const artistId of artistIds) {
     if (!artistId) continue;
@@ -99,10 +92,7 @@ const resolveArtistAccountIds = async (
       artistAccountIdCache.set(artistId, normalized);
       if (normalized) accountIds.add(normalized);
     } catch (err) {
-      coreLog.warn(
-        `[comments] resolve artist ${artistId} accountId failed:`,
-        err,
-      );
+      coreLog.warn(`[comments] resolve artist ${artistId} accountId failed:`, err);
       artistAccountIdCache.set(artistId, null);
     }
   }
diff --git a/electron/main/services/comments/data.ts b/electron/main/services/comments/data.ts
index 5792fdf1..62356ebc 100644
--- a/electron/main/services/comments/data.ts
+++ b/electron/main/services/comments/data.ts
@@ -110,9 +110,7 @@ export const scanCreatorComments = (
   accountIds: Set<string>,
 ): MusicCommentItem[] => {
   if (accountIds.size === 0) return [];
-  return items.filter(
-    (item) => item.userId != null && accountIds.has(item.userId),
-  );
+  return items.filter((item) => item.userId != null && accountIds.has(item.userId));
 };
 
 /** 构建可用评论源 */
diff --git a/electron/main/services/comments/index.ts b/electron/main/services/comments/index.ts
index 2797435a..eba3a5ca 100644
--- a/electron/main/services/comments/index.ts
+++ b/electron/main/services/comments/index.ts
@@ -78,9 +78,7 @@ export const findNeteaseSongMeta = async (
   if (track.source === "netease" && track.id) {
     return {
       songId: track.id,
-      artistIds: track.artists
-        .map((a) => a.id)
-        .filter((id): id is string => !!id),
+      artistIds: track.artists.map((a) => a.id).filter((id): id is string => !!id),
     };
   }
   const keyword = toKeyword(track);
@@ -106,9 +104,7 @@ export const findNeteaseSongMeta = async (
       duration: song.duration,
       extra: {
         id: String(song.id),
-        artistIds: (song.artists ?? [])
-          .map((a) => (a.id ? String(a.id) : ""))
-          .filter(Boolean),
+        artistIds: (song.artists ?? []).map((a) => (a.id ? String(a.id) : "")).filter(Boolean),
       },
     }),
   );
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index 1ebbd9d7..61e4875b 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -369,8 +369,7 @@ const api = {
   comments: {
     sources: () => ipcRenderer.invoke("comments:sources"),
     get: (args: MusicCommentQuery) => ipcRenderer.invoke("comments:get", args),
-    creator: (args: MusicCommentCreatorQuery) =>
-      ipcRenderer.invoke("comments:creator", args),
+    creator: (args: MusicCommentCreatorQuery) => ipcRenderer.invoke("comments:creator", args),
   },
   download: {
     // 入队下载
diff --git a/src/composables/useMusicComments.ts b/src/composables/useMusicComments.ts
index 2376c11e..3a77d87d 100644
--- a/src/composables/useMusicComments.ts
+++ b/src/composables/useMusicComments.ts
@@ -164,7 +164,8 @@ export const useMusicComments = (
             result.data.total,
             result.data.list.length,
             result.data.limit,
-          ) && (!append || nextList.length > previousCount),
+          ) &&
+          (!append || nextList.length > previousCount),
         loadingMore: false,
         initialError: "",
         appendError: "",
diff --git a/src/pages/Comments.vue b/src/pages/Comments.vue
index b0abfc66..ebedc8aa 100644
--- a/src/pages/Comments.vue
+++ b/src/pages/Comments.vue
@@ -139,13 +139,7 @@ onBeforeUnmount(() => loadMoreObserver?.disconnect());
             {{ trackSnapshot.artists.map((artist) => artist.name).join(" / ") }}
           </div>
         </div>
-        <SButton
-          type="primary"
-          variant="secondary"
-          round
-          class="shrink-0 mt-1"
-          @click="handlePlay"
-        >
+        <SButton type="primary" variant="secondary" round class="shrink-0 mt-1" @click="handlePlay">
           <template #icon><IconLucidePlay /></template>
           {{ t("comments.playTrack") }}
         </SButton>
@@ -175,11 +169,7 @@ onBeforeUnmount(() => loadMoreObserver?.disconnect());
     >
       <div v-if="creatorComments.length" class="mb-5">
         <h3 class="text-sm font-semibold mb-3 text-on-surface">{{ t("comments.creator") }}</h3>
-        <CommentList
-          :items="creatorComments"
-          :creator-ids="creatorIds"
-          :column-min-width="360"
-        />
+        <CommentList :items="creatorComments" :creator-ids="creatorIds" :column-min-width="360" />
       </div>
 
       <div
@@ -221,10 +211,7 @@ onBeforeUnmount(() => loadMoreObserver?.disconnect());
       <CommentList v-else :items="dedupedList" :column-min-width="360" />
 
       <div ref="loadMoreSentinelRef" class="h-px" />
-      <div
-        v-if="page.loadingMore"
-        class="flex justify-center py-5 text-on-surface-variant/60"
-      >
+      <div v-if="page.loadingMore" class="flex justify-center py-5 text-on-surface-variant/60">
         <SLoading class="text-2xl" />
       </div>
       <div v-else-if="page.appendError" class="flex justify-center py-5">