From 31393eb7e560717e9b549d289ab26130cf43ec47 Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Tue, 26 May 2026 18:08:56 +0800
Subject: [PATCH 01/10] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   2 +
 src/components/list/PlaylistPanel.vue         | 229 ------------------
 src/components/list/QueuePopover.vue          | 190 +++++++++++++++
 .../player/FullPlayer/QueuePanel.vue          | 143 +++++++++++
 src/components/player/FullPlayer/index.vue    |  43 +++-
 src/components/player/Toolbar.vue             |  21 +-
 src/components/ui/SNumberInput.vue            |   3 +-
 src/components/ui/SVirtualList.vue            |  20 +-
 src/composables/useQueuePanel.ts              |  72 ++++++
 src/core/hotkey/registry.ts                   |   6 +-
 src/layouts/MainLayout.vue                    |  17 --
 src/stores/status.ts                          |   9 +-
 12 files changed, 492 insertions(+), 263 deletions(-)
 delete mode 100644 src/components/list/PlaylistPanel.vue
 create mode 100644 src/components/list/QueuePopover.vue
 create mode 100644 src/components/player/FullPlayer/QueuePanel.vue
 create mode 100644 src/composables/useQueuePanel.ts

diff --git a/components.d.ts b/components.d.ts
index ca197163..f3a9f337 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -169,6 +169,8 @@ declare module 'vue' {
     PopoverRoot: typeof import('reka-ui')['PopoverRoot']
     PopoverTrigger: typeof import('reka-ui')['PopoverTrigger']
     QualityControl: typeof import('./src/components/player/QualityControl.vue')['default']
+    QueuePanel: typeof import('./src/components/player/FullPlayer/QueuePanel.vue')['default']
+    QueuePopover: typeof import('./src/components/list/QueuePopover.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SAlert: typeof import('./src/components/ui/SAlert.vue')['default']
diff --git a/src/components/list/PlaylistPanel.vue b/src/components/list/PlaylistPanel.vue
deleted file mode 100644
index 42dd6c59..00000000
--- a/src/components/list/PlaylistPanel.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<script setup lang="ts">
-import type { Track } from "@shared/types/player";
-import { useStatusStore } from "@/stores/status";
-import { useMediaStore } from "@/stores/media";
-import { queue, queueLength } from "@/stores/queue";
-import type { SVirtualListExposed } from "@/components/ui/SVirtualList.vue";
-import { useDragSort } from "@/composables/useDragSort";
-import { useThemeStore } from "@/stores/theme";
-import * as player from "@/core/player";
-
-const props = defineProps<{
-  /** 封面主题模式 */
-  cover?: boolean;
-}>();
-
-const { t } = useI18n();
-const statusStore = useStatusStore();
-const mediaStore = useMediaStore();
-
-/** 拼接艺术家名称 */
-const formatArtists = (artists: Track["artists"]): string => {
-  if (!artists?.length) return t("playlist.unknownArtist");
-  return artists.map((ar) => ar.name).join(" / ");
-};
-
-/** 播放指定索引的歌曲 */
-const handlePlayItem = async (index: number): Promise<void> => {
-  statusStore.playlistOpen = false;
-  await player.playAtIndex(index);
-};
-
-const clearConfirmOpen = ref(false);
-
-/** 清空播放列表 */
-const handleClear = (): void => {
-  if (queueLength.value === 0) return;
-  player.stop();
-  statusStore.playIndex = -1;
-  queue.value = [];
-  mediaStore.clear();
-  useThemeStore().coverColor = null;
-  statusStore.playlistOpen = false;
-  clearConfirmOpen.value = false;
-};
-
-const listRef = shallowRef<SVirtualListExposed | null>(null);
-
-/** 定位到当前播放歌曲 */
-const scrollToCurrent = (): void => {
-  if (statusStore.playIndex >= 0) {
-    listRef.value?.scrollToIndex(statusStore.playIndex);
-  }
-};
-
-const {
-  isDragging,
-  draggedIndex,
-  dropIndicator,
-  dragLabelData,
-  dragLabelPosition,
-  handlePointerDown,
-} = useDragSort({
-  virtualListRef: listRef,
-  itemCount: queueLength,
-  onReorder: (from, to) => player.moveInQueue(from, to),
-  triggerMode: "longpress",
-});
-
-/** 按钮类型 */
-const btnType = computed(() => (props.cover ? "cover" : "default"));
-</script>
-
-<template>
-  <div class="flex flex-col h-full">
-    <!-- 播放列表 -->
-    <div
-      v-if="queueLength > 0"
-      class="flex-1 min-h-0"
-      :class="{ 'cursor-grabbing select-none': isDragging }"
-    >
-      <SVirtualList
-        ref="listRef"
-        :items="queue"
-        :item-height="72"
-        item-fixed
-        height="100%"
-        :default-scroll-index="Math.max(0, statusStore.playIndex)"
-        :get-item-key="(item: Track) => item.id"
-      >
-        <template #default="{ item, index }: { item: Track; index: number }">
-          <div class="relative px-3 py-1.5">
-            <!-- 放置指示线 -->
-            <div
-              v-if="isDragging && dropIndicator.index === index"
-              :class="[
-                'absolute left-4 right-4 h-0.5 rounded-full z-10 pointer-events-none',
-                cover ? 'bg-white/60' : 'bg-primary',
-                dropIndicator.position === 'top' ? 'top-0' : 'bottom-0',
-              ]"
-            />
-            <div
-              class="group flex items-center gap-3 px-3 h-15 rounded-lg cursor-pointer border border-solid transition-[background-color,border-color,opacity,transform] duration-200"
-              :class="[
-                index === statusStore.playIndex
-                  ? cover
-                    ? 'bg-cover/25 text-cover border-cover/50 active:bg-cover/30'
-                    : 'bg-primary/20 text-primary border-primary/50 active:bg-primary/25'
-                  : cover
-                    ? 'border-transparent bg-cover/6 hover:bg-cover/12 hover:border-cover/30 active:bg-cover/16'
-                    : 'border-transparent bg-on-surface/5 hover:bg-on-surface/10 hover:border-primary/30 active:bg-on-surface/14',
-                isDragging && draggedIndex === index ? 'opacity-30 scale-95' : 'opacity-100',
-              ]"
-              @click="handlePlayItem(index)"
-              @mousedown="handlePointerDown($event, index, item.title)"
-              @touchstart.passive="handlePointerDown($event, index, item.title)"
-            >
-              <!-- 封面 -->
-              <SImg :src="item.cover" class="size-10 rounded-md shrink-0" />
-              <!-- 歌曲信息 -->
-              <div class="flex-1 min-w-0">
-                <div class="text-sm truncate">{{ item.title }}</div>
-                <div
-                  class="text-xs truncate"
-                  :class="
-                    index === statusStore.playIndex
-                      ? cover
-                        ? 'text-cover/70'
-                        : 'text-primary/70'
-                      : cover
-                        ? 'text-cover/50'
-                        : 'text-on-surface-variant'
-                  "
-                >
-                  {{ formatArtists(item.artists) }}
-                </div>
-              </div>
-              <!-- 移除按钮 -->
-              <SButton
-                :type="btnType"
-                variant="ghost"
-                circle
-                size="tiny"
-                class="opacity-0 group-hover:opacity-100"
-                @click.stop="player.removeFromQueue(index)"
-              >
-                <template #icon>
-                  <IconLucideX />
-                </template>
-              </SButton>
-            </div>
-          </div>
-        </template>
-      </SVirtualList>
-    </div>
-    <!-- 空状态 -->
-    <div v-else class="flex-1 flex items-center justify-center">
-      <div :class="cover ? 'text-cover/30' : 'text-on-surface-variant/50'">
-        <IconLucideListMusic class="size-10 mx-auto mb-2 opacity-40" />
-        <div class="text-sm">{{ t("playlist.empty") }}</div>
-      </div>
-    </div>
-    <!-- 操作 -->
-    <div class="shrink-0 p-3 flex gap-3">
-      <SDialog
-        v-model:open="clearConfirmOpen"
-        :title="t('playlist.clearConfirmTitle')"
-        :cover="cover"
-      >
-        {{ t("playlist.clearConfirmContent") }}
-        <template #footer="{ close }">
-          <SButton :type="cover ? 'cover' : 'default'" variant="secondary" @click="close">
-            {{ t("common.cancel") }}
-          </SButton>
-          <SButton :type="cover ? 'cover' : 'error'" variant="secondary" @click="handleClear">
-            {{ t("common.confirm") }}
-          </SButton>
-        </template>
-      </SDialog>
-      <SButton
-        :type="btnType"
-        variant="secondary"
-        block
-        :disabled="queueLength === 0"
-        @click="clearConfirmOpen = true"
-      >
-        <template #icon>
-          <IconLucideTrash2 />
-        </template>
-        {{ t("playlist.clearList") }}
-      </SButton>
-      <SButton
-        :type="btnType"
-        variant="secondary"
-        block
-        :disabled="queueLength === 0"
-        @click="scrollToCurrent"
-      >
-        <template #icon>
-          <IconLucideLocate />
-        </template>
-        {{ t("playlist.locateCurrent") }}
-      </SButton>
-    </div>
-
-    <!-- 拖拽标签 -->
-    <Teleport to="body">
-      <Transition
-        enter-active-class="transition-opacity duration-150"
-        enter-from-class="opacity-0"
-        leave-active-class="transition-opacity duration-200"
-        leave-to-class="opacity-0"
-      >
-        <div
-          v-if="isDragging && dragLabelData"
-          :class="[
-            'fixed z-9999 pointer-events-none max-w-60 truncate px-4 py-2 rounded-full text-sm font-medium shadow-lg',
-            cover ? 'bg-white/15 backdrop-blur-lg text-cover' : 'bg-surface-bright text-on-surface',
-          ]"
-          :style="{
-            top: `${dragLabelPosition.top + 12}px`,
-            left: `${dragLabelPosition.left + 12}px`,
-          }"
-        >
-          {{ dragLabelData.name }}
-        </div>
-      </Transition>
-    </Teleport>
-  </div>
-</template>
diff --git a/src/components/list/QueuePopover.vue b/src/components/list/QueuePopover.vue
new file mode 100644
index 00000000..1ea77965
--- /dev/null
+++ b/src/components/list/QueuePopover.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { Track } from "@shared/types/player";
+import type { SVirtualListExposed } from "@/components/ui/SVirtualList.vue";
+import { useQueuePanel } from "@/composables/useQueuePanel";
+import { useDragSort } from "@/composables/useDragSort";
+import * as player from "@/core/player";
+
+const emit = defineEmits<{ close: [] }>();
+
+const { t } = useI18n();
+const listRef = shallowRef<SVirtualListExposed | null>(null);
+const {
+  statusStore,
+  queue,
+  queueLength,
+  formatArtists,
+  playAt,
+  removeAt,
+  clearConfirmOpen,
+  clearAll,
+  scrollToCurrent,
+} = useQueuePanel({ listRef });
+
+const {
+  isDragging,
+  draggedIndex,
+  dropIndicator,
+  dragLabelData,
+  dragLabelPosition,
+  handlePointerDown,
+} = useDragSort({
+  virtualListRef: listRef,
+  itemCount: queueLength,
+  onReorder: (from, to) => player.moveInQueue(from, to),
+  triggerMode: "longpress",
+});
+
+/** 点歌后关闭弹层 */
+const onPlay = (index: number): void => {
+  playAt(index);
+  emit("close");
+};
+
+/** 清空后关闭弹层 */
+const onClear = (): void => {
+  clearAll();
+  emit("close");
+};
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div
+      class="shrink-0 flex items-start justify-between gap-2 px-3 pt-3.5 pb-2.5 border-b border-b-solid border-b-on-surface/8"
+    >
+      <div class="flex flex-col min-w-0">
+        <span class="text-sm font-semibold leading-tight truncate">{{ t("playlist.title") }}</span>
+        <span class="text-xs text-on-surface-variant leading-tight mt-0.5">
+          {{ t("common.totalSongs", { count: queueLength }) }}
+        </span>
+      </div>
+      <div class="shrink-0 flex items-center gap-0.5">
+        <SButton
+          variant="ghost"
+          circle
+          size="small"
+          :disabled="queueLength === 0"
+          @click="scrollToCurrent"
+        >
+          <template #icon><IconLucideLocate /></template>
+        </SButton>
+        <SButton
+          variant="ghost"
+          circle
+          size="small"
+          :disabled="queueLength === 0"
+          @click="clearConfirmOpen = true"
+        >
+          <template #icon><IconLucideTrash2 /></template>
+        </SButton>
+        <SButton variant="ghost" circle size="small" @click="$emit('close')">
+          <template #icon><IconLucideX /></template>
+        </SButton>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <div
+      v-if="queueLength > 0"
+      class="flex-1 min-h-0 py-1"
+      :class="{ 'cursor-grabbing select-none': isDragging }"
+    >
+      <SVirtualList
+        ref="listRef"
+        :items="queue"
+        :item-height="56"
+        item-fixed
+        height="100%"
+        :default-scroll-index="Math.max(0, statusStore.playIndex)"
+        :get-item-key="(item: Track) => item.id"
+      >
+        <template #default="{ item, index }: { item: Track; index: number }">
+          <div class="relative px-2 py-0.5">
+            <div
+              v-if="isDragging && dropIndicator.index === index"
+              :class="[
+                'absolute left-3 right-3 h-0.5 rounded-full z-10 pointer-events-none bg-primary',
+                dropIndicator.position === 'top' ? 'top-0' : 'bottom-0',
+              ]"
+            />
+            <div
+              class="group flex items-center gap-2.5 px-2 h-13 rounded-md cursor-pointer transition-[background-color,opacity] duration-150"
+              :class="[
+                index === statusStore.playIndex
+                  ? 'bg-primary/15 text-primary'
+                  : 'hover:bg-on-surface/8 active:bg-on-surface/14',
+                isDragging && draggedIndex === index ? 'opacity-30' : 'opacity-100',
+              ]"
+              @click="onPlay(index)"
+              @mousedown="handlePointerDown($event, index, item.title)"
+              @touchstart.passive="handlePointerDown($event, index, item.title)"
+            >
+              <SImg :src="item.cover" class="size-9 rounded shrink-0" />
+              <div class="flex-1 min-w-0">
+                <div class="text-xs truncate font-medium leading-tight">{{ item.title }}</div>
+                <div
+                  class="text-[11px] truncate leading-tight mt-0.5"
+                  :class="
+                    index === statusStore.playIndex ? 'text-primary/70' : 'text-on-surface-variant'
+                  "
+                >
+                  {{ formatArtists(item.artists) }}
+                </div>
+              </div>
+              <SButton
+                variant="ghost"
+                circle
+                size="tiny"
+                class="opacity-0 group-hover:opacity-100"
+                @click.stop="removeAt(index)"
+              >
+                <template #icon><IconLucideX /></template>
+              </SButton>
+            </div>
+          </div>
+        </template>
+      </SVirtualList>
+    </div>
+    <!-- 空 -->
+    <div v-else class="flex-1 flex items-center justify-center text-on-surface-variant/50">
+      <div class="text-center">
+        <IconLucideListMusic class="size-8 mx-auto mb-1.5 opacity-40" />
+        <div class="text-xs">{{ t("playlist.empty") }}</div>
+      </div>
+    </div>
+
+    <!-- 清空确认 -->
+    <SDialog v-model:open="clearConfirmOpen" :title="t('playlist.clearConfirmTitle')">
+      {{ t("playlist.clearConfirmContent") }}
+      <template #footer="{ close }">
+        <SButton variant="secondary" @click="close">
+          {{ t("common.cancel") }}
+        </SButton>
+        <SButton type="error" variant="secondary" @click="onClear">
+          {{ t("common.confirm") }}
+        </SButton>
+      </template>
+    </SDialog>
+
+    <!-- 拖拽标签 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-150"
+        enter-from-class="opacity-0"
+        leave-active-class="transition-opacity duration-200"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="isDragging && dragLabelData"
+          class="fixed z-9999 pointer-events-none max-w-60 truncate px-4 py-2 rounded-full text-sm font-medium shadow-lg bg-surface-bright text-on-surface"
+          :style="{
+            top: `${dragLabelPosition.top + 12}px`,
+            left: `${dragLabelPosition.left + 12}px`,
+          }"
+        >
+          {{ dragLabelData.name }}
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
diff --git a/src/components/player/FullPlayer/QueuePanel.vue b/src/components/player/FullPlayer/QueuePanel.vue
new file mode 100644
index 00000000..65d54227
--- /dev/null
+++ b/src/components/player/FullPlayer/QueuePanel.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { Track } from "@shared/types/player";
+import type { SVirtualListExposed } from "@/components/ui/SVirtualList.vue";
+import { useQueuePanel } from "@/composables/useQueuePanel";
+
+defineEmits<{ close: [] }>();
+
+const { t } = useI18n();
+const listRef = shallowRef<SVirtualListExposed | null>(null);
+const {
+  statusStore,
+  queue,
+  queueLength,
+  formatArtists,
+  playAt,
+  removeAt,
+  clearConfirmOpen,
+  clearAll,
+  scrollToCurrent,
+} = useQueuePanel({ listRef });
+</script>
+
+<template>
+  <div class="flex flex-col h-full text-cover">
+    <div class="shrink-0 flex items-start justify-between gap-4 pl-1 pr-20 pb-4">
+      <div class="flex flex-col min-w-0 pl-2.5">
+        <h2 class="m-0 text-2xl font-semibold leading-tight truncate">
+          {{ t("playlist.title") }}
+        </h2>
+        <span class="text-sm text-cover/55 mt-1">
+          {{ t("common.totalSongs", { count: queueLength }) }}
+        </span>
+      </div>
+      <div class="shrink-0 flex items-center gap-3">
+        <SButton
+          type="cover"
+          variant="secondary"
+          round
+          :size="40"
+          :disabled="queueLength === 0"
+          @click="scrollToCurrent"
+        >
+          <template #icon><IconLucideLocate /></template>
+        </SButton>
+        <SButton
+          type="cover"
+          variant="secondary"
+          round
+          :size="40"
+          :disabled="queueLength === 0"
+          @click="clearConfirmOpen = true"
+        >
+          <template #icon><IconLucideTrash2 /></template>
+        </SButton>
+        <SButton type="cover" variant="secondary" round :size="40" @click="$emit('close')">
+          <template #icon><IconLucideX /></template>
+        </SButton>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <div
+      v-if="queueLength > 0"
+      class="flex-1 min-h-0"
+      :style="{
+        maskImage:
+          'linear-gradient(180deg, transparent 0px, #000 32px, #000 calc(100% - 32px), transparent 100%)',
+      }"
+    >
+      <SVirtualList
+        ref="listRef"
+        :items="queue"
+        :item-height="72"
+        :padding-top="32"
+        :padding-bottom="32"
+        item-fixed
+        cover
+        height="100%"
+        :default-scroll-index="Math.max(0, statusStore.playIndex)"
+        :get-item-key="(item: Track) => item.id"
+      >
+        <template #default="{ item, index }: { item: Track; index: number }">
+          <div class="relative pl-1 pr-20 py-1">
+            <div
+              class="group relative flex items-center gap-3 px-2.5 h-16 rounded-lg cursor-pointer transition-[background-color] duration-150"
+              :class="
+                index === statusStore.playIndex
+                  ? 'bg-cover/14 text-cover'
+                  : 'hover:bg-cover/8 active:bg-cover/12'
+              "
+              @click="playAt(index)"
+            >
+              <!-- 当前播放：左侧 indicator -->
+              <span
+                v-if="index === statusStore.playIndex"
+                class="absolute left-0 top-3 bottom-3 w-0.5 rounded-full bg-cover"
+              />
+              <SImg :src="item.cover" class="size-12 rounded-lg shrink-0" />
+              <div class="flex-1 min-w-0">
+                <div class="text-base truncate font-medium leading-snug">{{ item.title }}</div>
+                <div
+                  class="text-sm truncate leading-snug mt-0.5"
+                  :class="index === statusStore.playIndex ? 'text-cover/70' : 'text-cover/55'"
+                >
+                  {{ formatArtists(item.artists) }}
+                </div>
+              </div>
+              <SButton
+                type="cover"
+                variant="ghost"
+                circle
+                size="tiny"
+                class="opacity-0 group-hover:opacity-100"
+                @click.stop="removeAt(index)"
+              >
+                <template #icon><IconLucideX /></template>
+              </SButton>
+            </div>
+          </div>
+        </template>
+      </SVirtualList>
+    </div>
+    <!-- 空 -->
+    <div v-else class="flex-1 flex items-center justify-center text-cover/35">
+      <div class="text-center">
+        <IconLucideListMusic class="size-10 mx-auto mb-2 opacity-40" />
+        <div class="text-sm">{{ t("playlist.empty") }}</div>
+      </div>
+    </div>
+
+    <!-- 清空确认 -->
+    <SDialog v-model:open="clearConfirmOpen" :title="t('playlist.clearConfirmTitle')">
+      {{ t("playlist.clearConfirmContent") }}
+      <template #footer="{ close }">
+        <SButton variant="secondary" @click="close">
+          {{ t("common.cancel") }}
+        </SButton>
+        <SButton type="error" variant="secondary" @click="clearAll">
+          {{ t("common.confirm") }}
+        </SButton>
+      </template>
+    </SDialog>
+  </div>
+</template>
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index 3e495581..77b65a63 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -78,9 +78,10 @@ const hasLyric = computed(() => media.parsedLyric.length > 0 || media.lyricLoadi
 const { isFullscreen, toggleFullscreen } = useWindowControls();
 
 /** 封面是否居中 */
-const coverCentered = computed(
-  () => !showLyric.value || (settings.player.autoCenterCover && !hasLyric.value),
-);
+const coverCentered = computed(() => {
+  if (status.fullQueueOpen) return false;
+  return !showLyric.value || (settings.player.autoCenterCover && !hasLyric.value);
+});
 
 /** 弹簧配置 */
 const springConfig = computed(() => ({
@@ -191,6 +192,16 @@ const advanceLyric = (): void => writeOffset(songOffset.value + LYRIC_OFFSET_STE
 const delayLyric = (): void => writeOffset(songOffset.value - LYRIC_OFFSET_STEP);
 /** 重置歌词偏移 */
 const resetLyricOffset = (): void => writeOffset(0);
+
+/** 切换歌词展示 */
+const toggleLyric = (): void => {
+  if (status.fullQueueOpen) {
+    status.fullQueueOpen = false;
+    showLyric.value = true;
+  } else {
+    showLyric.value = !showLyric.value;
+  }
+};
 </script>
 
 <template>
@@ -233,8 +244,8 @@ const resetLyricOffset = (): void => writeOffset(0);
               circle
               :size="40"
               :disabled="!hasLyric"
-              :class="showLyric && hasLyric ? 'opacity-100' : 'opacity-40'"
-              @click="showLyric = !showLyric"
+              :class="showLyric && hasLyric && !status.fullQueueOpen ? 'opacity-100' : 'opacity-40'"
+              @click="toggleLyric"
             >
               <template #icon><IconLucideTextQuote /></template>
             </SButton>
@@ -272,7 +283,11 @@ const resetLyricOffset = (): void => writeOffset(0);
           <!-- 右侧 -->
           <div
             class="lyric-area group absolute inset-y-0 right-0 pr-20 w-[55%] transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
-            :class="coverCentered ? 'opacity-0 pointer-events-none' : 'opacity-100'"
+            :class="
+              coverCentered || status.fullQueueOpen
+                ? 'opacity-0 pointer-events-none'
+                : 'opacity-100'
+            "
             :style="{
               fontSize: settings.lyric.adaptiveFontSize
                 ? `calc(${settings.lyric.fontSize} / 1080 * 100vh)`
@@ -384,6 +399,22 @@ const resetLyricOffset = (): void => writeOffset(0);
               </SButton>
             </div>
           </div>
+          <!-- 播放队列 -->
+          <div
+            class="absolute inset-y-0 right-0 w-[55%] pl-4 py-6 flex items-center"
+            :class="status.fullQueueOpen ? '' : 'pointer-events-none'"
+          >
+            <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="status.fullQueueOpen" class="w-full h-full">
+                <QueuePanel @close="status.fullQueueOpen = false" />
+              </div>
+            </Transition>
+          </div>
         </div>
         <!-- 底栏 -->
         <div
diff --git a/src/components/player/Toolbar.vue b/src/components/player/Toolbar.vue
index 936ba7c3..242515c2 100644
--- a/src/components/player/Toolbar.vue
+++ b/src/components/player/Toolbar.vue
@@ -123,16 +123,31 @@ const onMoreMenuSelect = (key: string): void => {
       <template #icon><IconLucideMicVocal /></template>
     </SButton>
     <SButton
-      v-if="!status.fmMode"
+      v-if="!status.fmMode && cover"
       :type="buttonType"
       variant="ghost"
       circle
       size="large"
-      :class="mutedClass"
-      @click="status.playlistOpen = true"
+      :class="status.fullQueueOpen ? 'opacity-100' : 'opacity-40'"
+      @click="status.fullQueueOpen = !status.fullQueueOpen"
     >
       <template #icon><IconLucideListMusic /></template>
     </SButton>
+    <SPopover
+      v-else-if="!status.fmMode"
+      v-model:open="status.outerQueueOpen"
+      trigger="click"
+      side="top"
+      :side-offset="12"
+      content-class="!p-0 w-72 h-[min(60vh,520px)] overflow-hidden"
+    >
+      <template #trigger>
+        <SButton :type="buttonType" variant="ghost" circle size="large" :class="mutedClass">
+          <template #icon><IconLucideListMusic /></template>
+        </SButton>
+      </template>
+      <QueuePopover @close="status.outerQueueOpen = false" />
+    </SPopover>
     <SDropdownMenu
       :items="moreMenuItems"
       side="top"
diff --git a/src/components/ui/SNumberInput.vue b/src/components/ui/SNumberInput.vue
index ddd79bf2..5d20c08c 100644
--- a/src/components/ui/SNumberInput.vue
+++ b/src/components/ui/SNumberInput.vue
@@ -120,8 +120,9 @@ const isFocused = ref(false);
       v-if="unit"
       class="text-xs mr-1"
       :class="cover ? 'text-cover/60' : 'text-on-surface-variant/60'"
-      >{{ unit }}</span
     >
+      {{ unit }}
+    </span>
     <NumberFieldIncrement
       :class="[
         stepperClass,
diff --git a/src/components/ui/SVirtualList.vue b/src/components/ui/SVirtualList.vue
index 974024dd..d65d9d17 100644
--- a/src/components/ui/SVirtualList.vue
+++ b/src/components/ui/SVirtualList.vue
@@ -31,6 +31,10 @@ export interface SVirtualListProps<T> {
   defaultScrollIndex?: number;
   /** 获取唯一键 */
   getItemKey?: (item: T, index: number) => string | number;
+  /** 隐藏滚动条 */
+  hideScrollbar?: boolean;
+  /** 封面主题色 */
+  cover?: boolean;
 }
 
 const props = withDefaults(defineProps<SVirtualListProps<T>>(), {
@@ -267,10 +271,10 @@ const scrollToIndex = (index: number, behavior: ScrollBehavior = "auto"): void =
   const targetIndex = Math.max(0, Math.min(index, props.items.length - 1));
   let top = 0;
   if (props.itemFixed) {
-    top = targetIndex * props.itemHeight + props.paddingTop;
+    top = targetIndex * props.itemHeight;
   } else {
     if (itemTops.value.length <= targetIndex) initializeHeights();
-    top = (itemTops.value[targetIndex] || 0) + props.paddingTop;
+    top = itemTops.value[targetIndex] || 0;
   }
   scrollToPosition(top, behavior);
 };
@@ -368,7 +372,17 @@ defineExpose({
       <div v-if="$slots.header" class="shrink-0">
         <slot name="header" />
       </div>
-      <div ref="scrollRef" class="flex-1 min-h-0 overflow-y-auto" @scroll="handleScroll">
+      <div
+        ref="scrollRef"
+        class="flex-1 min-h-0 overflow-y-auto"
+        :class="[
+          hideScrollbar ? '[&::-webkit-scrollbar]:hidden' : '',
+          cover
+            ? '[&::-webkit-scrollbar-thumb]:bg-cover/25 [&::-webkit-scrollbar-thumb:hover]:bg-cover/45'
+            : '',
+        ]"
+        @scroll="handleScroll"
+      >
         <div
           v-show="items.length > 0"
           :style="{
diff --git a/src/composables/useQueuePanel.ts b/src/composables/useQueuePanel.ts
new file mode 100644
index 00000000..ad4e2a65
--- /dev/null
+++ b/src/composables/useQueuePanel.ts
@@ -0,0 +1,72 @@
+import type { Ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { Track } from "@shared/types/player";
+import type { SVirtualListExposed } from "@/components/ui/SVirtualList.vue";
+import { useStatusStore } from "@/stores/status";
+import { useMediaStore } from "@/stores/media";
+import { useThemeStore } from "@/stores/theme";
+import { queue, queueLength } from "@/stores/queue";
+import * as player from "@/core/player";
+
+export interface UseQueuePanelOptions {
+  listRef: Ref<SVirtualListExposed | null>;
+}
+
+/**
+ * 播放队列面板的共享逻辑（与拖排序解耦）
+ * 视觉表达交给具体组件，这里只管：播放、移除、清空、定位
+ * 拖排序按需在 consumer 里直接调 useDragSort，避免不需要的组件白付出 ref/closure 开销
+ */
+export const useQueuePanel = (options: UseQueuePanelOptions) => {
+  const { t } = useI18n();
+  const statusStore = useStatusStore();
+  const mediaStore = useMediaStore();
+
+  /** 拼接艺术家名称 */
+  const formatArtists = (artists: Track["artists"]): string => {
+    if (!artists?.length) return t("playlist.unknownArtist");
+    return artists.map((ar) => ar.name).join(" / ");
+  };
+
+  /** 播放指定索引；是否关闭面板交给调用方决定 */
+  const playAt = async (index: number): Promise<void> => {
+    await player.playAtIndex(index);
+  };
+
+  /** 移除单首 */
+  const removeAt = (index: number): void => {
+    player.removeFromQueue(index);
+  };
+
+  const clearConfirmOpen = ref(false);
+
+  /** 清空队列 + 重置播放索引 */
+  const clearAll = (): void => {
+    if (queueLength.value === 0) return;
+    player.stop();
+    statusStore.playIndex = -1;
+    queue.value = [];
+    mediaStore.clear();
+    useThemeStore().coverColor = null;
+    clearConfirmOpen.value = false;
+  };
+
+  /** 滚动到当前正在播放项 */
+  const scrollToCurrent = (): void => {
+    if (statusStore.playIndex >= 0) {
+      options.listRef.value?.scrollToIndex(statusStore.playIndex);
+    }
+  };
+
+  return {
+    statusStore,
+    queue,
+    queueLength,
+    formatArtists,
+    playAt,
+    removeAt,
+    clearConfirmOpen,
+    clearAll,
+    scrollToCurrent,
+  };
+};
diff --git a/src/core/hotkey/registry.ts b/src/core/hotkey/registry.ts
index 727cefd3..f1e5d456 100644
--- a/src/core/hotkey/registry.ts
+++ b/src/core/hotkey/registry.ts
@@ -82,7 +82,11 @@ export const buildRegistry = (): void => {
   // 切换播放列表
   handlers.set("view.togglePlaylist", () => {
     const status = useStatusStore();
-    status.playlistOpen = !status.playlistOpen;
+    if (status.isExpanded) {
+      status.fullQueueOpen = !status.fullQueueOpen;
+    } else {
+      status.outerQueueOpen = !status.outerQueueOpen;
+    }
   });
   // 打开搜索
   handlers.set("view.openSearch", () => {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index ba90f464..4211e25d 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -2,9 +2,7 @@
 import { useStatusStore } from "@/stores/status";
 import { useMediaStore } from "@/stores/media";
 import { useSettingsStore } from "@/stores/settings";
-import { queueLength } from "@/stores/queue";
 
-const { t } = useI18n();
 const status = useStatusStore();
 const settings = useSettingsStore();
 
@@ -126,21 +124,6 @@ const playerBarInnerClass = computed(() => {
   <SDialogProvider />
   <!-- 全屏播放器 -->
   <FullPlayer />
-  <!-- 播放列表抽屉 -->
-  <SDrawer v-model:open="status.playlistOpen" :cover="status.isExpanded" width="380px">
-    <template #header>
-      <div class="flex flex-col">
-        <span class="text-base font-semibold">{{ t("playlist.title") }}</span>
-        <span
-          class="text-xs"
-          :class="status.isExpanded ? 'text-cover/50' : 'text-on-surface-variant'"
-        >
-          {{ t("common.totalSongs", { count: queueLength }) }}
-        </span>
-      </div>
-    </template>
-    <PlaylistPanel :cover="status.isExpanded" />
-  </SDrawer>
   <!-- 全局设置 -->
   <SettingsDialog />
 </template>
diff --git a/src/stores/status.ts b/src/stores/status.ts
index 26e7c5f6..03979da8 100644
--- a/src/stores/status.ts
+++ b/src/stores/status.ts
@@ -25,8 +25,10 @@ export const useStatusStore = defineStore(
     const trackLoading = ref(false);
     /** 菜单折叠状态 */
     const isExpanded = ref(false);
-    /** 播放列表状态 */
-    const playlistOpen = ref(false);
+    /** 外层播放队列 */
+    const outerQueueOpen = ref(false);
+    /** 播放器播放队列 */
+    const fullQueueOpen = ref(false);
     /** 搜索弹窗状态 */
     const searchOpen = ref(false);
     /** 全屏播放器是否展示歌词 */
@@ -97,7 +99,8 @@ export const useStatusStore = defineStore(
       progress,
       trackLoading,
       isExpanded,
-      playlistOpen,
+      outerQueueOpen,
+      fullQueueOpen,
       searchOpen,
       showLyric,
       outputDevices,

From f25cfb59d0a1fa10e14810d601c53e7602a8f0c7 Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Tue, 26 May 2026 23:29:09 +0800
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                            |  2 +
 src/components/player/FullPlayer/index.vue | 32 ++++++++++++++-
 src/components/player/PlayerBar.vue        | 47 ++++++++++++++++++++++
 src/components/player/QualityControl.vue   | 28 ++++++++-----
 src/components/player/TrackInfo.vue        |  4 +-
 src/components/ui/SCombobox.vue            |  1 +
 src/components/ui/SContextMenu.vue         |  2 +
 src/components/ui/SDropdownMenu.vue        |  2 +
 src/components/ui/SPopover.vue             |  1 +
 src/components/ui/SPopselect.vue           |  1 +
 src/components/ui/SSelect.vue              |  1 +
 src/components/ui/STooltip.vue             |  1 +
 src/composables/useTrackMenu.ts            | 19 +++++++--
 src/i18n/locales/en-US.json                |  1 +
 src/i18n/locales/zh-CN.json                |  1 +
 15 files changed, 124 insertions(+), 19 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index f3a9f337..8ba7031e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -108,6 +108,8 @@ declare module 'vue' {
     IconLucideMicVocal: typeof import('~icons/lucide/mic-vocal')['default']
     IconLucideMinimize: typeof import('~icons/lucide/minimize')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
+    IconLucideMoreVertical: typeof import('~icons/lucide/more-vertical')['default']
     IconLucideMusic: typeof import('~icons/lucide/music')['default']
     IconLucidePause: typeof import('~icons/lucide/pause')['default']
     IconLucidePlay: typeof import('~icons/lucide/play')['default']
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index 77b65a63..d1bb1c1a 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
+import type { Track } from "@shared/types/player";
+import type { ContentScope } from "@/types/collection";
 import { useStatusStore } from "@/stores/status";
 import { useMediaStore } from "@/stores/media";
 import { useSettingsStore } from "@/stores/settings";
 import { usePlaybackTime } from "@/composables/usePlaybackTime";
 import { useFavorite } from "@/composables/useFavorite";
 import Lyrics from "@/components/player/Lyrics/index.vue";
+import PlaylistPickerDialog from "@/components/modals/PlaylistPickerDialog.vue";
 import { useWindowControls } from "@/composables/useWindowControls";
 import { useSettingsDialog } from "@/settings/useSettingsDialog";
 import * as player from "@/core/player";
 import { formatTime, formatSignedSec } from "@/utils/time";
 import IconFavorite from "~icons/material-symbols/favorite-rounded";
 import IconFavoriteOutline from "~icons/material-symbols/favorite-outline-rounded";
+import IconLucideListPlus from "~icons/lucide/list-plus";
 
 const { t } = useI18n();
 const status = useStatusStore();
@@ -170,10 +174,10 @@ const lyricActionsClass = computed(() => {
   return "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto";
 });
 
-/** 当前曲目偏移（读 mirror，写走主进程 IPC） */
+/** 当前曲目偏移 */
 const songOffset = computed(() => status.lyricOffsetMs);
 
-/** 写入偏移；trackId 不存在时静默忽略 */
+/** 写入偏移 */
 const writeOffset = (offsetMs: number): void => {
   const id = media.track?.id;
   if (!id) return;
@@ -193,6 +197,19 @@ const delayLyric = (): void => writeOffset(songOffset.value - LYRIC_OFFSET_STEP)
 /** 重置歌词偏移 */
 const resetLyricOffset = (): void => writeOffset(0);
 
+/** 添加到歌单 */
+const pickerOpen = ref(false);
+const pickerTracks = shallowRef<Track[]>([]);
+const pickerMode = ref<ContentScope>("local");
+
+const openPicker = (): void => {
+  const track = media.track;
+  if (!track) return;
+  pickerTracks.value = [track];
+  pickerMode.value = track.source === "netease" ? "online" : "local";
+  pickerOpen.value = true;
+};
+
 /** 切换歌词展示 */
 const toggleLyric = (): void => {
   if (status.fullQueueOpen) {
@@ -440,6 +457,16 @@ const toggleLyric = (): void => {
                 <IconFavoriteOutline v-else />
               </template>
             </SButton>
+            <SButton
+              v-if="media.track?.source === 'local' || media.track?.source === 'netease'"
+              type="cover"
+              variant="ghost"
+              size="large"
+              circle
+              @click="openPicker"
+            >
+              <template #icon><IconLucideListPlus /></template>
+            </SButton>
           </div>
           <div class="shrink-0 flex flex-col items-center gap-1 w-[clamp(360px,35%,480px)]">
             <div class="flex items-center gap-3">
@@ -534,6 +561,7 @@ const toggleLyric = (): void => {
         </div>
       </div>
     </Transition>
+    <PlaylistPickerDialog v-model:open="pickerOpen" :mode="pickerMode" :tracks="pickerTracks" />
   </Teleport>
 </template>
 
diff --git a/src/components/player/PlayerBar.vue b/src/components/player/PlayerBar.vue
index 5450ba25..8bf897ab 100644
--- a/src/components/player/PlayerBar.vue
+++ b/src/components/player/PlayerBar.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import type { Track } from "@shared/types/player";
+import type { ContentScope } from "@/types/collection";
 import { useStatusStore } from "@/stores/status";
 import { useSettingsStore } from "@/stores/settings";
 import { useMediaStore } from "@/stores/media";
 import { useFavorite } from "@/composables/useFavorite";
+import { useTrackMenu } from "@/composables/useTrackMenu";
 import * as player from "@/core/player";
 import { formatTime } from "@/utils/time";
 import IconFavorite from "~icons/material-symbols/favorite-rounded";
 import IconFavoriteOutline from "~icons/material-symbols/favorite-outline-rounded";
+import IconLucideMoreVertical from "~icons/lucide/more-vertical";
 
 const status = useStatusStore();
 const settings = useSettingsStore();
@@ -20,6 +24,22 @@ const isFloating = computed(() => settings.appearance.layoutMode === "floating")
 const onSeekDragEnd = (value: number): void => {
   player.seek(value);
 };
+
+/** 添加到歌单 */
+const pickerOpen = ref(false);
+const pickerTracks = shallowRef<Track[]>([]);
+const pickerMode = computed<ContentScope>(() =>
+  media.track?.source === "netease" ? "online" : "local",
+);
+
+/** 歌曲菜单 */
+const { items: menuItems, handleSelect: onMenuSelect } = useTrackMenu(toRef(media, "track"), {
+  hidePlayActions: true,
+  onAddToPlaylist: (track) => {
+    pickerTracks.value = [track];
+    pickerOpen.value = true;
+  },
+});
 </script>
 
 <template>
@@ -44,6 +64,19 @@ const onSeekDragEnd = (value: number): void => {
                 <IconFavoriteOutline v-else />
               </template>
             </SButton>
+            <SDropdownMenu
+              v-if="media.track"
+              :items="menuItems"
+              side="top"
+              align="start"
+              @select="onMenuSelect"
+            >
+              <template #trigger>
+                <SButton class="-my-1" variant="text" circle :size="24" :icon-size="16">
+                  <template #icon><IconLucideMoreVertical /></template>
+                </SButton>
+              </template>
+            </SDropdownMenu>
           </template>
         </TrackInfo>
         <span class="text-xs text-on-surface-variant/70 tabular-nums shrink-0">
@@ -100,6 +133,19 @@ const onSeekDragEnd = (value: number): void => {
               <IconFavoriteOutline v-else />
             </template>
           </SButton>
+          <SDropdownMenu
+            v-if="media.track"
+            :items="menuItems"
+            side="top"
+            align="start"
+            @select="onMenuSelect"
+          >
+            <template #trigger>
+              <SButton class="-my-1" variant="text" circle :size="28" :icon-size="18">
+                <template #icon><IconLucideMoreVertical /></template>
+              </SButton>
+            </template>
+          </SDropdownMenu>
         </template>
       </TrackInfo>
       <PlayerControls class="mx-15" />
@@ -111,4 +157,5 @@ const onSeekDragEnd = (value: number): void => {
       </div>
     </div>
   </div>
+  <PlaylistPickerDialog v-model:open="pickerOpen" :mode="pickerMode" :tracks="pickerTracks" />
 </template>
diff --git a/src/components/player/QualityControl.vue b/src/components/player/QualityControl.vue
index 390e0fae..263821e2 100644
--- a/src/components/player/QualityControl.vue
+++ b/src/components/player/QualityControl.vue
@@ -13,7 +13,7 @@ const media = useMediaStore();
 const settings = useSettingsStore();
 
 /** 是否支持切换在线音质 */
-const isNetease = computed(() => media.track?.source === "netease");
+const canSwitchQuality = computed(() => media.track?.source === "netease" && !media.track?.cloud);
 
 /** 实际播放音质 */
 const qualityLabel = computed(() => getQualityLabel(media.detail?.quality));
@@ -39,7 +39,7 @@ const onQualityChange = (value: string | number | boolean): void => {
 
 <template>
   <SPopselect
-    v-if="isNetease && media.detail?.quality"
+    v-if="canSwitchQuality && media.detail?.quality"
     :model-value="settings.player.songLevel"
     :options="qualityOptions"
     side="top"
@@ -76,15 +76,21 @@ const onQualityChange = (value: string | number | boolean): void => {
       </span>
     </template>
   </SPopselect>
-  <span
+  <STooltip
     v-else-if="media.detail?.quality"
-    :class="[
-      chipBase,
-      cover
-        ? 'border-cover/25 text-cover/55'
-        : 'border-on-surface-variant/25 text-on-surface-variant/80',
-    ]"
+    :content="t('settings.songLevel.unsupportedHint')"
+    :side-offset="16"
+    side="top"
   >
-    {{ qualityLabel }}
-  </span>
+    <span
+      :class="[
+        chipBase,
+        cover
+          ? 'border-cover/25 text-cover/55'
+          : 'border-on-surface-variant/25 text-on-surface-variant/80',
+      ]"
+    >
+      {{ qualityLabel }}
+    </span>
+  </STooltip>
 </template>
diff --git a/src/components/player/TrackInfo.vue b/src/components/player/TrackInfo.vue
index d73d7499..929f0a2f 100644
--- a/src/components/player/TrackInfo.vue
+++ b/src/components/player/TrackInfo.vue
@@ -52,10 +52,10 @@ const isArtistLinkable = (artist: Artist): boolean => {
         />
       </div>
     </div>
-    <!-- 歌曲信息：仅文本切歌时滑动 -->
+    <!-- 歌曲信息 -->
     <Transition name="slide-left" mode="out-in">
       <div v-if="media.track" :key="media.track.id" class="min-w-0 flex-1">
-        <div class="flex items-center gap-1.5 min-w-0">
+        <div class="flex items-center gap-1 min-w-0">
           <SMarquee
             fit
             class="min-w-0"
diff --git a/src/components/ui/SCombobox.vue b/src/components/ui/SCombobox.vue
index 2cc4c08e..a96c7662 100644
--- a/src/components/ui/SCombobox.vue
+++ b/src/components/ui/SCombobox.vue
@@ -182,6 +182,7 @@ const compareByValue = (a: unknown, b: unknown): boolean => {
       <ComboboxContent
         position="popper"
         :side-offset="4"
+        :collision-padding="12"
         class="z-400 w-[var(--reka-popper-anchor-width)] overflow-hidden rounded-xl bg-surface-bright shadow-lg data-[state=open]:animate-select-in data-[state=closed]:animate-select-out"
       >
         <!-- 搜索框 -->
diff --git a/src/components/ui/SContextMenu.vue b/src/components/ui/SContextMenu.vue
index da43bbe9..72fd0d38 100644
--- a/src/components/ui/SContextMenu.vue
+++ b/src/components/ui/SContextMenu.vue
@@ -46,6 +46,7 @@ const menuItemClass =
       <ContextMenuContent
         :align-offset="alignOffset"
         :avoid-collisions="true"
+        :collision-padding="12"
         :class="contentClass"
       >
         <slot name="header" />
@@ -63,6 +64,7 @@ const menuItemClass =
               <ContextMenuSubContent
                 :side-offset="4"
                 :avoid-collisions="true"
+                :collision-padding="12"
                 :class="[contentClass, 'max-h-60 overflow-y-auto']"
               >
                 <template v-for="child in item.children" :key="child.key">
diff --git a/src/components/ui/SDropdownMenu.vue b/src/components/ui/SDropdownMenu.vue
index d6d9d7f0..d14a2f7c 100644
--- a/src/components/ui/SDropdownMenu.vue
+++ b/src/components/ui/SDropdownMenu.vue
@@ -84,6 +84,7 @@ const menuItemClass = computed(() =>
         :align="align"
         :side-offset="sideOffset"
         :avoid-collisions="true"
+        :collision-padding="12"
         :class="contentClass"
       >
         <template v-for="item in visibleItems" :key="item.key">
@@ -99,6 +100,7 @@ const menuItemClass = computed(() =>
               <DropdownMenuSubContent
                 :side-offset="4"
                 :avoid-collisions="true"
+                :collision-padding="12"
                 :class="[contentClass, 'max-h-60 overflow-y-auto']"
               >
                 <template v-for="child in item.children" :key="child.key">
diff --git a/src/components/ui/SPopover.vue b/src/components/ui/SPopover.vue
index 2170634d..cc094d72 100644
--- a/src/components/ui/SPopover.vue
+++ b/src/components/ui/SPopover.vue
@@ -134,6 +134,7 @@ const bridgeClasses = computed(() =>
         :align="align"
         :side-offset="sideOffset"
         :avoid-collisions="true"
+        :collision-padding="12"
         :class="[
           'z-300 rounded-xl shadow-lg p-3 text-sm data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out',
           cover
diff --git a/src/components/ui/SPopselect.vue b/src/components/ui/SPopselect.vue
index 10c4163b..ad7c8487 100644
--- a/src/components/ui/SPopselect.vue
+++ b/src/components/ui/SPopselect.vue
@@ -61,6 +61,7 @@ const handleChange = (val: string): void => {
         :side="side"
         :align="align"
         :side-offset="sideOffset"
+        :collision-padding="12"
         :style="{ minWidth: `${minWidth}px` }"
         :class="[
           'z-400 rounded-lg shadow-lg text-sm data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out',
diff --git a/src/components/ui/SSelect.vue b/src/components/ui/SSelect.vue
index f1ba8c5c..c46c1c10 100644
--- a/src/components/ui/SSelect.vue
+++ b/src/components/ui/SSelect.vue
@@ -62,6 +62,7 @@ const handleChange = (val: string) => {
       <SelectContent
         position="popper"
         :side-offset="4"
+        :collision-padding="12"
         class="z-400 max-h-60 w-[var(--reka-select-trigger-width)] overflow-hidden rounded-xl bg-surface-bright shadow-lg data-[state=open]:animate-select-in data-[state=closed]:animate-select-out"
       >
         <SelectViewport class="p-1">
diff --git a/src/components/ui/STooltip.vue b/src/components/ui/STooltip.vue
index 7dce9aa4..a21c2170 100644
--- a/src/components/ui/STooltip.vue
+++ b/src/components/ui/STooltip.vue
@@ -44,6 +44,7 @@ withDefaults(
           :align="align"
           :side-offset="sideOffset"
           :avoid-collisions="true"
+          :collision-padding="12"
           class="z-300 px-3 py-2 rounded-lg bg-surface-bright shadow-lg text-sm text-on-surface data-[state=delayed-open]:animate-popover-in data-[state=closed]:animate-popover-out"
         >
           {{ content }}
diff --git a/src/composables/useTrackMenu.ts b/src/composables/useTrackMenu.ts
index 0ae50007..8585042c 100644
--- a/src/composables/useTrackMenu.ts
+++ b/src/composables/useTrackMenu.ts
@@ -19,6 +19,8 @@ import IconMoreHorizontal from "~icons/lucide/more-horizontal";
 export interface TrackMenuOptions {
   /** 集合类型 */
   collectionType?: CollectionType;
+  /** 隐藏播放相关菜单项 */
+  hidePlayActions?: boolean;
   /** 添加到歌单 */
   onAddToPlaylist?: (track: Track) => void;
   /** 从集合移除回调 */
@@ -34,12 +36,16 @@ export interface TrackMenuOptions {
  * @param track - 当前操作的歌曲
  * @param options - 配置项
  */
-export const useTrackMenu = (track: Ref<Track | undefined>, options: TrackMenuOptions = {}) => {
+export const useTrackMenu = (
+  track: Ref<Track | null | undefined>,
+  options: TrackMenuOptions = {},
+) => {
   const { t } = useI18n();
   const router = useRouter();
   const { copy } = useCopyText();
   const isPlaylist = options.collectionType === "playlist";
   const isCloudView = options.collectionType === "cloud";
+  const showPlay = !options.hidePlayActions;
   // 菜单项
   const items = computed<DropdownMenuItem[]>(() => {
     const source = track.value?.source;
@@ -48,13 +54,18 @@ export const useTrackMenu = (track: Ref<Track | undefined>, options: TrackMenuOp
     const canAddToPlaylist = source === "local" || source === "netease";
     const isOnline = source !== "local" && source !== "streaming";
     return [
-      { key: "play", label: t("songList.context.play"), icon: markRaw(IconPlay) },
-      { key: "playNext", label: t("songList.context.playNext"), icon: markRaw(IconListEnd) },
+      { key: "play", label: t("songList.context.play"), icon: markRaw(IconPlay), show: showPlay },
+      {
+        key: "playNext",
+        label: t("songList.context.playNext"),
+        icon: markRaw(IconListEnd),
+        show: showPlay,
+      },
       {
         key: "addToPlaylist",
         label: t("collection.addTo", { type: t("collection.playlist") }),
         icon: markRaw(IconListPlus),
-        separator: true,
+        separator: showPlay,
         show: canAddToPlaylist,
       },
       {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 8042b655..d78cfd6a 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -525,6 +525,7 @@
       "description": "Preferred quality for online tracks; the actual level depends on what your account supports",
       "switchTitle": "Switch Quality",
       "switchHint": "Subject to your account permissions",
+      "unsupportedHint": "Quality switching is not supported for this track",
       "lq": "Standard (LQ)",
       "sq": "Higher (SQ)",
       "hq": "Extreme (HQ)",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index b6e41c91..cbcf0a60 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -525,6 +525,7 @@
       "description": "在线歌曲的音质偏好，取决于账号实际可用级别",
       "switchTitle": "音质切换",
       "switchHint": "以账号具体权限为准",
+      "unsupportedHint": "当前歌曲不支持调节音质",
       "lq": "标准 (LQ)",
       "sq": "较高 (SQ)",
       "hq": "极高 (HQ)",

From 0cc8b740d9a9e1523206e42a6f3444aa1d3482b9 Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Wed, 27 May 2026 01:18:54 +0800
Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=8F=E5=B0=81?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../player/FullPlayer/PlayerBackground.vue    |  14 +-
 .../player/FullPlayer/PlayerCover.vue         |  72 ++++++---
 src/components/player/FullPlayer/index.vue    | 153 +++++++++++++-----
 src/i18n/locales/en-US.json                   |   6 +
 src/i18n/locales/zh-CN.json                   |   6 +
 src/settings/categories/player.ts             |  10 ++
 src/stores/settings.ts                        |   1 +
 src/types/settings.ts                         |   3 +
 8 files changed, 197 insertions(+), 68 deletions(-)

diff --git a/src/components/player/FullPlayer/PlayerBackground.vue b/src/components/player/FullPlayer/PlayerBackground.vue
index 4f9db7ee..88d84f50 100644
--- a/src/components/player/FullPlayer/PlayerBackground.vue
+++ b/src/components/player/FullPlayer/PlayerBackground.vue
@@ -2,11 +2,13 @@
 import { useSettingsStore } from "@/stores/settings";
 import { useThemeStore } from "@/stores/theme";
 import { useMediaStore } from "@/stores/media";
+import { useStatusStore } from "@/stores/status";
 import DEFAULT_COVER from "@/assets/images/song.jpg";
 
 const media = useMediaStore();
 const settings = useSettingsStore();
 const theme = useThemeStore();
+const status = useStatusStore();
 
 const bgType = computed(() => settings.player.playerBgType);
 
@@ -31,8 +33,9 @@ let preloadImg: HTMLImageElement | null = null;
 let switchToken = 0;
 
 watch(
-  () => media.track?.coverOriginal || media.track?.cover,
-  (newCover) => {
+  [() => media.track?.coverOriginal || media.track?.cover, () => status.isExpanded],
+  ([newCover, expanded]) => {
+    if (!expanded) return;
     const token = ++switchToken;
 
     if (preloadImg) {
@@ -41,7 +44,9 @@ watch(
       preloadImg.src = "";
       preloadImg = null;
     }
-
+    const targetCover = newCover || DEFAULT_COVER;
+    // 相同不切换
+    if (blurLayers[currentLayerIndex].src === targetCover) return;
     const nextIndex = currentLayerIndex === 0 ? 1 : 0;
     const switchLayer = (src: string) => {
       if (token !== switchToken) return;
@@ -57,9 +62,6 @@ watch(
         });
       });
     };
-
-    const targetCover = newCover || DEFAULT_COVER;
-
     const img = new Image();
     preloadImg = img;
     img.onload = () => switchLayer(targetCover);
diff --git a/src/components/player/FullPlayer/PlayerCover.vue b/src/components/player/FullPlayer/PlayerCover.vue
index f8f89a2c..53d9bce3 100644
--- a/src/components/player/FullPlayer/PlayerCover.vue
+++ b/src/components/player/FullPlayer/PlayerCover.vue
@@ -2,34 +2,33 @@
 import { useMediaStore } from "@/stores/media";
 import { useStatusStore } from "@/stores/status";
 
+withDefaults(defineProps<{ fullscreen?: boolean }>(), { fullscreen: false });
+
 const media = useMediaStore();
-const { isPlaying } = storeToRefs(useStatusStore());
-
-// 高清封面 data URL
-const hdCover = ref<string | null>(null);
-const coverSrc = computed(() => hdCover.value || media.track?.coverOriginal || media.track?.cover);
-
-// 歌曲切换时获取高清封面，拿到前保持旧封面
-watch(
-  () => media.track?.id,
-  async (newId) => {
-    hdCover.value = null;
-    if (!newId) return;
-
-    try {
-      const result = await window.api.player.getCoverRaw();
-      if (media.track?.id !== newId) return;
-      hdCover.value = result.success ? (result.data ?? null) : null;
-    } catch {
-      if (media.track?.id === newId) hdCover.value = null;
-    }
-  },
-  { immediate: true },
+const status = useStatusStore();
+const { isPlaying } = storeToRefs(status);
+
+/** 高清封面缓存 */
+const hdCache = shallowRef<{ id: string; data: string } | null>(null);
+
+const coverSrc = computed(() =>
+  hdCache.value?.id === media.track?.id
+    ? hdCache.value!.data
+    : media.track?.coverOriginal || media.track?.cover,
 );
+
+watchEffect(async () => {
+  const id = media.track?.id;
+  if (!status.isExpanded || status.trackLoading || !id) return;
+  if (media.track?.source !== "local" || hdCache.value?.id === id) return;
+  const r = await window.api.player.getCoverRaw();
+  if (media.track?.id !== id || !r.success || !r.data) return;
+  hdCache.value = { id, data: r.data };
+});
 </script>
 
 <template>
-  <div :class="['player-cover', { playing: isPlaying }]">
+  <div :class="['player-cover', { playing: isPlaying, fullscreen }]">
     <SImg :src="coverSrc" class="size-full" />
   </div>
 </template>
@@ -50,4 +49,31 @@ watch(
 .player-cover.playing {
   transform: scale(1);
 }
+
+/* 全屏封面 */
+.player-cover.fullscreen {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: auto;
+  border-radius: 0;
+  background-color: transparent;
+  transform: none;
+  box-shadow: none;
+  --cover-fade: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0.98) 10%,
+    rgba(0, 0, 0, 0.92) 22%,
+    rgba(0, 0, 0, 0.82) 32%,
+    rgba(0, 0, 0, 0.68) 42%,
+    rgba(0, 0, 0, 0.52) 52%,
+    rgba(0, 0, 0, 0.36) 62%,
+    rgba(0, 0, 0, 0.22) 72%,
+    rgba(0, 0, 0, 0.1) 82%,
+    rgba(0, 0, 0, 0.03) 92%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-image: var(--cover-fade);
+  -webkit-mask-image: var(--cover-fade);
+}
 </style>
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index d1bb1c1a..c05cf986 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -81,9 +81,12 @@ const hasLyric = computed(() => media.parsedLyric.length > 0 || media.lyricLoadi
 /** 全屏 */
 const { isFullscreen, toggleFullscreen } = useWindowControls();
 
+/** 是否全屏封面 */
+const fullscreenCover = computed(() => settings.player.coverLayout === "fullscreen");
+
 /** 封面是否居中 */
 const coverCentered = computed(() => {
-  if (status.fullQueueOpen) return false;
+  if (fullscreenCover.value || status.fullQueueOpen) return false;
   return !showLyric.value || (settings.player.autoCenterCover && !hasLyric.value);
 });
 
@@ -210,6 +213,13 @@ const openPicker = (): void => {
   pickerOpen.value = true;
 };
 
+/** 歌词显隐按钮 */
+const lyricToggleDisabled = computed(() => !hasLyric.value || fullscreenCover.value);
+const lyricToggleActive = computed(
+  () =>
+    showLyric.value && hasLyric.value && !status.fullQueueOpen && !fullscreenCover.value,
+);
+
 /** 切换歌词展示 */
 const toggleLyric = (): void => {
   if (status.fullQueueOpen) {
@@ -242,11 +252,26 @@ const toggleLyric = (): void => {
       >
         <!-- 背景 -->
         <PlayerBackground />
+        <!-- 全屏封面 -->
+        <div v-if="fullscreenCover" class="absolute inset-y-0 left-0 w-[60%]">
+          <PlayerCover fullscreen />
+        </div>
         <!-- 底部频谱 -->
         <BottomSpectrum
           v-if="isExpanded && settings.player.enableSpectrum"
           :show="isPlaying && immersive"
         />
+        <!-- 顶/底栏渐变遮罩 -->
+        <div
+          v-if="fullscreenCover"
+          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"
+          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'"
+        />
         <!-- 顶栏 -->
         <div
           class="absolute top-0 inset-x-0 h-14 z-10 app-drag-region transition-opacity duration-400 flex items-center justify-between px-3"
@@ -260,8 +285,8 @@ const toggleLyric = (): void => {
               variant="ghost"
               circle
               :size="40"
-              :disabled="!hasLyric"
-              :class="showLyric && hasLyric && !status.fullQueueOpen ? 'opacity-100' : 'opacity-40'"
+              :disabled="lyricToggleDisabled"
+              :class="lyricToggleActive ? 'opacity-100' : 'opacity-40'"
               @click="toggleLyric"
             >
               <template #icon><IconLucideTextQuote /></template>
@@ -281,15 +306,16 @@ const toggleLyric = (): void => {
         <div class="absolute top-14 inset-x-0 bottom-20" @mousemove="onMainMove">
           <!-- 左侧 -->
           <div
+            v-if="!fullscreenCover"
             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"
           >
-            <!-- 封面 + 歌曲信息：切歌时整体左右淡入淡出 -->
+            <!-- 封面 + 歌曲信息 -->
             <div class="relative w-[clamp(200px,85%,50vh)] -translate-y-[11vh]">
               <Transition name="scale-switch" mode="out-in">
                 <div :key="media.track?.id">
                   <PlayerCover />
-                  <!-- 歌曲信息（绝对定位，不影响封面居中位置） -->
+                  <!-- 歌曲信息 -->
                   <div class="absolute top-full left-0 w-full pt-6">
                     <PlayerData align="left" />
                   </div>
@@ -299,43 +325,60 @@ const toggleLyric = (): void => {
           </div>
           <!-- 右侧 -->
           <div
-            class="lyric-area group absolute inset-y-0 right-0 pr-20 w-[55%] transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
-            :class="
+            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="[
+              fullscreenCover ? 'w-1/2' : 'w-[55%]',
               coverCentered || status.fullQueueOpen
                 ? 'opacity-0 pointer-events-none'
-                : 'opacity-100'
-            "
-            :style="{
-              fontSize: settings.lyric.adaptiveFontSize
-                ? `calc(${settings.lyric.fontSize} / 1080 * 100vh)`
-                : `${settings.lyric.fontSize}px`,
-              fontWeight: String(settings.lyric.fontWeight),
-              fontFamily: settings.lyric.fontFamily || undefined,
-            }"
+                : 'opacity-100',
+            ]"
           >
-            <Lyrics
-              v-if="lyricMounted && hasLyric"
-              ref="lyricRef"
-              :lyric-lines="media.parsedLyric"
-              :playing="isPlaying"
-              :align-position="settings.lyric.alignPosition"
-              :word-fade-width="settings.lyric.wordFadeWidth"
-              :spring-config="springConfig"
-              :inactive-alpha="settings.lyric.inactiveAlpha"
-              :hide-passed-lines="settings.lyric.hidePassedLines"
-              :enable-blur="settings.lyric.enableBlur"
-              :enable-word-highlight="settings.lyric.enableWordHighlight"
-              :enable-float-animation="settings.lyric.enableFloatAnimation"
-              :enable-emphasize-effect="settings.lyric.enableEmphasizeEffect"
-              :show-translation="settings.lyric.showTranslation"
-              :show-romanization="settings.lyric.showRomanization"
-              @seek="player.seek($event)"
-            />
+            <!-- 全屏封面 -->
             <div
-              v-else-if="lyricMounted"
-              class="w-full h-full flex items-center justify-center text-cover/30"
+              v-if="fullscreenCover"
+              class="shrink-0 pt-2 pb-6 pl-[calc(1em-0.5rem)]"
+              :style="{
+                fontSize: settings.lyric.adaptiveFontSize
+                  ? `calc(${settings.lyric.fontSize} / 1080 * 100vh)`
+                  : `${settings.lyric.fontSize}px`,
+              }"
             >
-              暂无歌词
+              <PlayerData align="left" simple />
+            </div>
+            <div
+              class="lyric-area relative flex-1 min-h-0"
+              :style="{
+                fontSize: settings.lyric.adaptiveFontSize
+                  ? `calc(${settings.lyric.fontSize} / 1080 * 100vh)`
+                  : `${settings.lyric.fontSize}px`,
+                fontWeight: String(settings.lyric.fontWeight),
+                fontFamily: settings.lyric.fontFamily || undefined,
+              }"
+            >
+              <Lyrics
+                v-if="lyricMounted && hasLyric"
+                ref="lyricRef"
+                :lyric-lines="media.parsedLyric"
+                :playing="isPlaying"
+                :align-position="settings.lyric.alignPosition"
+                :word-fade-width="settings.lyric.wordFadeWidth"
+                :spring-config="springConfig"
+                :inactive-alpha="settings.lyric.inactiveAlpha"
+                :hide-passed-lines="settings.lyric.hidePassedLines"
+                :enable-blur="settings.lyric.enableBlur"
+                :enable-word-highlight="settings.lyric.enableWordHighlight"
+                :enable-float-animation="settings.lyric.enableFloatAnimation"
+                :enable-emphasize-effect="settings.lyric.enableEmphasizeEffect"
+                :show-translation="settings.lyric.showTranslation"
+                :show-romanization="settings.lyric.showRomanization"
+                @seek="player.seek($event)"
+              />
+              <div
+                v-else-if="lyricMounted"
+                class="w-full h-full flex items-center justify-center text-cover/30"
+              >
+                暂无歌词
+              </div>
             </div>
             <!-- 操作按钮 -->
             <div
@@ -418,8 +461,11 @@ const toggleLyric = (): void => {
           </div>
           <!-- 播放队列 -->
           <div
-            class="absolute inset-y-0 right-0 w-[55%] pl-4 py-6 flex items-center"
-            :class="status.fullQueueOpen ? '' : 'pointer-events-none'"
+            class="absolute inset-y-0 right-0 pl-4 py-6 flex items-center"
+            :class="[
+              fullscreenCover ? 'w-1/2' : 'w-[55%]',
+              status.fullQueueOpen ? '' : 'pointer-events-none',
+            ]"
           >
             <Transition
               enter-active-class="transition-opacity duration-600 ease-[cubic-bezier(0.4,0,0.2,1)]"
@@ -578,4 +624,33 @@ const toggleLyric = (): void => {
     hsla(0, 0%, 100%, 0)
   );
 }
+
+/* 顶部/底部遮罩：多段非线性 alpha，避免暗色渐变出色阶 */
+.cover-mask-top {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0.44) 12%,
+    rgba(0, 0, 0, 0.36) 25%,
+    rgba(0, 0, 0, 0.27) 40%,
+    rgba(0, 0, 0, 0.18) 55%,
+    rgba(0, 0, 0, 0.1) 70%,
+    rgba(0, 0, 0, 0.04) 85%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.cover-mask-bottom {
+  background-image: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0.44) 12%,
+    rgba(0, 0, 0, 0.36) 25%,
+    rgba(0, 0, 0, 0.27) 40%,
+    rgba(0, 0, 0, 0.18) 55%,
+    rgba(0, 0, 0, 0.1) 70%,
+    rgba(0, 0, 0, 0.04) 85%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
 </style>
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index d78cfd6a..62c03ecd 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -914,6 +914,12 @@
       "blur": "Blur",
       "solid": "Solid"
     },
+    "coverLayout": {
+      "label": "Cover Layout",
+      "description": "Cover presentation in the full-screen player",
+      "default": "Default",
+      "fullscreen": "Fullscreen"
+    },
     "themeMode": {
       "label": "Theme Mode",
       "description": "Application color theme",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index cbcf0a60..cd239f9b 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -914,6 +914,12 @@
       "blur": "模糊",
       "solid": "纯色"
     },
+    "coverLayout": {
+      "label": "封面布局",
+      "description": "全屏播放器封面的呈现方式",
+      "default": "默认",
+      "fullscreen": "全屏封面"
+    },
     "themeMode": {
       "label": "主题模式",
       "description": "应用的颜色主题",
diff --git a/src/settings/categories/player.ts b/src/settings/categories/player.ts
index d741e987..ce54e48b 100644
--- a/src/settings/categories/player.ts
+++ b/src/settings/categories/player.ts
@@ -73,6 +73,16 @@ const playerCategory: SettingCategory = {
           ],
           defaultValue: "blur",
         },
+        {
+          key: "coverLayout",
+          type: "select",
+          binding: { store: "settings", path: "player.coverLayout" },
+          options: [
+            { value: "default", labelKey: "settings.coverLayout.default" },
+            { value: "fullscreen", labelKey: "settings.coverLayout.fullscreen" },
+          ],
+          defaultValue: "default",
+        },
         {
           key: "autoCenterCover",
           type: "switch",
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 4675795c..65427022 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -33,6 +33,7 @@ export const useSettingsStore = defineStore(
     /** 播放器 */
     const player = reactive<PlayerSettings>({
       playerBgType: "blur",
+      coverLayout: "default",
       autoCenterCover: true,
       followCoverColor: true,
       autoImmersive: true,
diff --git a/src/types/settings.ts b/src/types/settings.ts
index 64fb5984..d73336d6 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -5,6 +5,7 @@ import type { QualityLevel } from "@/utils/quality";
 
 /** 播放器背景类型 */
 export type PlayerBgType = "blur" | "solid";
+export type CoverLayout = "default" | "fullscreen";
 
 /**
  * 歌词来源偏好
@@ -113,6 +114,8 @@ export interface LyricSettings {
 export interface PlayerSettings {
   /** 播放器背景类型 */
   playerBgType: PlayerBgType;
+  /** 全屏播放器封面布局 */
+  coverLayout: CoverLayout;
   /** 无歌词时自动居中封面并隐藏歌词区域 */
   autoCenterCover: boolean;
   /** 颜色是否跟随封面 */

From 0d79b5edc10c991cba0176a80ae0c6df56ad667a Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Wed, 27 May 2026 01:38:27 +0800
Subject: [PATCH 04/10] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8D=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=99=A8=E5=B0=81=E9=9D=A2=E6=95=B0=E6=8D=AE=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96=E6=B7=B1?=
 =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../player/FullPlayer/PlayerCover.vue         |  4 +--
 src/stores/settings.ts                        | 28 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/player/FullPlayer/PlayerCover.vue b/src/components/player/FullPlayer/PlayerCover.vue
index 53d9bce3..d1ef5f45 100644
--- a/src/components/player/FullPlayer/PlayerCover.vue
+++ b/src/components/player/FullPlayer/PlayerCover.vue
@@ -12,8 +12,8 @@ const { isPlaying } = storeToRefs(status);
 const hdCache = shallowRef<{ id: string; data: string } | null>(null);
 
 const coverSrc = computed(() =>
-  hdCache.value?.id === media.track?.id
-    ? hdCache.value!.data
+  hdCache.value && hdCache.value.id === media.track?.id
+    ? hdCache.value.data
     : media.track?.coverOriginal || media.track?.cover,
 );
 
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 65427022..d161b683 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -84,10 +84,36 @@ export const useSettingsStore = defineStore(
     /** 任务栏歌词窗口是否打开；由主进程广播 */
     const isTaskbarLyricOpen = ref(false);
 
+    /**
+     * 深合并：嵌套对象原地 mutate，叶子值不变就不写
+     * 避免浅 Object.assign 替换嵌套引用，导致依赖路径的 watcher 误触
+     */
+    const deepAssign = (target: Record<string, unknown>, source: Record<string, unknown>): void => {
+      for (const key of Object.keys(source)) {
+        const next = source[key];
+        const cur = target[key];
+        if (
+          next &&
+          typeof next === "object" &&
+          !Array.isArray(next) &&
+          cur &&
+          typeof cur === "object" &&
+          !Array.isArray(cur)
+        ) {
+          deepAssign(cur as Record<string, unknown>, next as Record<string, unknown>);
+        } else if (cur !== next) {
+          target[key] = next;
+        }
+      }
+    };
+
     /** 从主进程拉取后端配置 */
     const syncSystem = async (): Promise<void> => {
       try {
-        Object.assign(system, await window.api.config.getAll());
+        deepAssign(
+          system as unknown as Record<string, unknown>,
+          (await window.api.config.getAll()) as unknown as Record<string, unknown>,
+        );
       } catch {}
     };
 

From 09a1ae11514f46c56d71258384919d77efd76eb3 Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Wed, 27 May 2026 11:58:31 +0800
Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   1 +
 electron/main/store/utils.ts                  |  38 +-----
 shared/utils/path.ts                          |  32 +++++
 .../player/FullPlayer/LyricActions.vue        | 118 +++++++++++++++++
 .../player/FullPlayer/PlayerCover.vue         |  43 ++----
 .../player/FullPlayer/PlayerData.vue          |   4 +-
 src/components/player/FullPlayer/index.vue    | 124 +-----------------
 src/settings/useSettingModel.ts               |  20 +--
 src/stores/settings.ts                        |  27 +---
 9 files changed, 184 insertions(+), 223 deletions(-)
 create mode 100644 shared/utils/path.ts
 create mode 100644 src/components/player/FullPlayer/LyricActions.vue

diff --git a/components.d.ts b/components.d.ts
index 8ba7031e..2381e55b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -146,6 +146,7 @@ declare module 'vue' {
     IconSpRepeatOff: typeof import('~icons/sp/repeat-off')['default']
     LoginCookieDialog: typeof import('./src/components/modals/LoginCookieDialog.vue')['default']
     LoginDialog: typeof import('./src/components/modals/LoginDialog.vue')['default']
+    LyricActions: typeof import('./src/components/player/FullPlayer/LyricActions.vue')['default']
     LyricFormatOrderConfig: typeof import('./src/components/settings/custom/LyricFormatOrderConfig.vue')['default']
     Lyrics: typeof import('./src/components/player/Lyrics/index.vue')['default']
     LyricSourceOrderConfig: typeof import('./src/components/settings/custom/LyricSourceOrderConfig.vue')['default']
diff --git a/electron/main/store/utils.ts b/electron/main/store/utils.ts
index 337fe212..ea814600 100644
--- a/electron/main/store/utils.ts
+++ b/electron/main/store/utils.ts
@@ -1,3 +1,5 @@
+export { getByPath, setByPath } from "@shared/utils/path";
+
 /**
  * 创建无原型对象，防止 JSON 原型污染
  * @returns 无原型对象
@@ -8,8 +10,8 @@ export const createPlainObject = (): Record<string, unknown> =>
 /**
  * 深度合并
  * defaults 为基底，stored 覆盖已有值，缺失字段从 defaults 补全
- * @param defaults 基底对象
- * @param stored 存储对象
+ * @param defaults - 基底对象
+ * @param stored - 存储对象
  * @returns 合并后的对象
  */
 export const deepMerge = <T>(defaults: T, stored: unknown): T => {
@@ -32,35 +34,3 @@ export const deepMerge = <T>(defaults: T, stored: unknown): T => {
   }
   return result as T;
 };
-
-/**
- * 通过 dot path 取值
- * @param obj 对象
- * @param dotPath 点号路径
- * @returns 值
- */
-export const getByPath = (obj: unknown, dotPath: string): unknown => {
-  const keys = dotPath.split(".");
-  let cur = obj as Record<string, unknown>;
-  for (const k of keys) {
-    if (cur == null || typeof cur !== "object") return undefined;
-    cur = cur[k] as Record<string, unknown>;
-  }
-  return cur;
-};
-
-/**
- * 通过 dot path 赋值
- * @param obj 对象
- * @param dotPath 点号路径
- * @param value 值
- */
-export const setByPath = (obj: unknown, dotPath: string, value: unknown): void => {
-  const keys = dotPath.split(".");
-  let cur = obj as Record<string, unknown>;
-  for (let i = 0; i < keys.length - 1; i++) {
-    if (cur[keys[i]] == null || typeof cur[keys[i]] !== "object") cur[keys[i]] = {};
-    cur = cur[keys[i]] as Record<string, unknown>;
-  }
-  cur[keys[keys.length - 1]] = value;
-};
diff --git a/shared/utils/path.ts b/shared/utils/path.ts
new file mode 100644
index 00000000..42e237ca
--- /dev/null
+++ b/shared/utils/path.ts
@@ -0,0 +1,32 @@
+/**
+ * 通过 dot path 取嵌套值
+ * @param obj - 对象
+ * @param dotPath - 形如 "player.equalizer.bands"
+ * @returns 值；中间节点缺失返回 undefined
+ */
+export const getByPath = (obj: unknown, dotPath: string): unknown => {
+  const keys = dotPath.split(".");
+  let cur = obj as Record<string, unknown> | null | undefined;
+  for (const key of keys) {
+    if (cur == null || typeof cur !== "object") return undefined;
+    cur = cur[key] as Record<string, unknown> | null | undefined;
+  }
+  return cur;
+};
+
+/**
+ * 通过 dot path 写入嵌套值，缺失的中间对象会自动补齐
+ * @param obj - 目标对象
+ * @param dotPath - 形如 "player.equalizer.bands"
+ * @param value - 新值
+ */
+export const setByPath = (obj: unknown, dotPath: string, value: unknown): void => {
+  const keys = dotPath.split(".");
+  let cur = obj as Record<string, unknown>;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (cur[key] == null || typeof cur[key] !== "object") cur[key] = {};
+    cur = cur[key] as Record<string, unknown>;
+  }
+  cur[keys[keys.length - 1]] = value;
+};
diff --git a/src/components/player/FullPlayer/LyricActions.vue b/src/components/player/FullPlayer/LyricActions.vue
new file mode 100644
index 00000000..50fd1b05
--- /dev/null
+++ b/src/components/player/FullPlayer/LyricActions.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { useMediaStore } from "@/stores/media";
+import { useStatusStore } from "@/stores/status";
+import { useSettingsDialog } from "@/settings/useSettingsDialog";
+import { formatSignedSec } from "@/utils/time";
+
+defineProps<{
+  /** 是否处于沉浸模式 */
+  immersive: boolean;
+}>();
+
+const { t } = useI18n();
+const media = useMediaStore();
+const status = useStatusStore();
+const settingsDialog = useSettingsDialog();
+
+/** 歌词偏移步长（ms） */
+const LYRIC_OFFSET_STEP = 500;
+
+/** 偏移弹层是否打开；打开期间按钮组保持可见 */
+const offsetPopoverOpen = ref(false);
+
+const hasTrack = computed(() => !!media.track);
+
+/** 当前曲目偏移（ms） */
+const songOffset = computed(() => status.lyricOffsetMs);
+
+/** 写入偏移 */
+const writeOffset = (offsetMs: number): void => {
+  const id = media.track?.id;
+  if (!id) return;
+  window.api.nowPlaying.setLyricOffset(id, offsetMs);
+};
+
+/** 弹层里直接编辑（ms） */
+const offsetInputMs = computed<number>({
+  get: () => songOffset.value,
+  set: (val) => writeOffset(val ?? 0),
+});
+
+const advanceLyric = (): void => writeOffset(songOffset.value + LYRIC_OFFSET_STEP);
+const delayLyric = (): void => writeOffset(songOffset.value - LYRIC_OFFSET_STEP);
+const resetLyricOffset = (): void => writeOffset(0);
+</script>
+
+<template>
+  <div
+    class="absolute right-3 top-1/2 -translate-y-1/2 flex flex-col items-center gap-2 transition-opacity duration-300"
+    :class="
+      immersive
+        ? 'opacity-0 pointer-events-none'
+        : offsetPopoverOpen
+          ? 'opacity-100 pointer-events-auto'
+          : 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto'
+    "
+  >
+    <SButton
+      type="cover"
+      variant="ghost"
+      circle
+      :size="40"
+      :disabled="!hasTrack"
+      @click="advanceLyric"
+    >
+      <template #icon><IconLucidePlus /></template>
+    </SButton>
+    <SPopover v-model:open="offsetPopoverOpen" trigger="click" side="left" :side-offset="8" cover>
+      <template #trigger>
+        <div
+          class="inline-flex items-center justify-center gap-0.5 h-6 w-10 rounded-md cursor-pointer border border-solid border-cover/30 bg-cover/8 hover:bg-cover/15 transition-colors tabular-nums"
+          :class="!hasTrack ? 'opacity-40 cursor-not-allowed pointer-events-none' : ''"
+        >
+          <span class="text-xs font-medium text-cover">
+            {{ formatSignedSec(songOffset) }}
+          </span>
+          <span class="text-[10px] text-cover/60">s</span>
+        </div>
+      </template>
+      <div class="flex flex-col gap-2 w-44">
+        <h4 class="m-0 text-sm font-medium leading-tight text-cover">
+          {{ t("player.lyricOffset.title") }}
+        </h4>
+        <p class="m-0 text-xs text-cover/60">{{ t("player.lyricOffset.hint") }}</p>
+        <SNumberInput
+          v-model="offsetInputMs"
+          :step="100"
+          size="small"
+          unit="ms"
+          placeholder="0"
+          cover
+        />
+        <SButton
+          type="cover"
+          variant="secondary"
+          size="tiny"
+          :disabled="songOffset === 0"
+          @click="resetLyricOffset"
+        >
+          {{ t("common.reset") }}
+        </SButton>
+      </div>
+    </SPopover>
+    <SButton
+      type="cover"
+      variant="ghost"
+      circle
+      :size="40"
+      :disabled="!hasTrack"
+      @click="delayLyric"
+    >
+      <template #icon><IconLucideMinus /></template>
+    </SButton>
+    <div class="h-px w-6 bg-cover/25 my-1" />
+    <SButton type="cover" variant="ghost" circle :size="40" @click="settingsDialog.show('lyric')">
+      <template #icon><IconLucideSettings2 /></template>
+    </SButton>
+  </div>
+</template>
diff --git a/src/components/player/FullPlayer/PlayerCover.vue b/src/components/player/FullPlayer/PlayerCover.vue
index d1ef5f45..a06991d6 100644
--- a/src/components/player/FullPlayer/PlayerCover.vue
+++ b/src/components/player/FullPlayer/PlayerCover.vue
@@ -28,38 +28,25 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div :class="['player-cover', { playing: isPlaying, fullscreen }]">
+  <div
+    :class="
+      fullscreen
+        ? 'player-cover-fullscreen w-full h-full aspect-auto rounded-none bg-transparent overflow-hidden shrink-0'
+        : [
+            'w-full aspect-square rounded-[32px] overflow-hidden shrink-0',
+            'shadow-[0_0_20px_10px_rgba(0,0,0,0.1)]',
+            'transition-transform duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
+            isPlaying ? 'scale-100' : 'scale-90',
+          ]
+    "
+  >
     <SImg :src="coverSrc" class="size-full" />
   </div>
 </template>
 
 <style scoped>
-.player-cover {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  border-radius: 32px;
-  overflow: hidden;
-  flex-shrink: 0;
-  background-color: black;
-  transform: scale(0.9);
-  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
-}
-
-.player-cover.playing {
-  transform: scale(1);
-}
-
-/* 全屏封面 */
-.player-cover.fullscreen {
-  width: 100%;
-  height: 100%;
-  aspect-ratio: auto;
-  border-radius: 0;
-  background-color: transparent;
-  transform: none;
-  box-shadow: none;
-  --cover-fade: linear-gradient(
+.player-cover-fullscreen {
+  mask-image: linear-gradient(
     to right,
     rgba(0, 0, 0, 1) 0%,
     rgba(0, 0, 0, 0.98) 10%,
@@ -73,7 +60,5 @@ watchEffect(async () => {
     rgba(0, 0, 0, 0.03) 92%,
     rgba(0, 0, 0, 0) 100%
   );
-  mask-image: var(--cover-fade);
-  -webkit-mask-image: var(--cover-fade);
 }
 </style>
diff --git a/src/components/player/FullPlayer/PlayerData.vue b/src/components/player/FullPlayer/PlayerData.vue
index 209749ea..a0f7aecb 100644
--- a/src/components/player/FullPlayer/PlayerData.vue
+++ b/src/components/player/FullPlayer/PlayerData.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
   defineProps<{
     /** 对齐方式 */
     align?: "center" | "left" | "right";
-    /** 简单模式：隐藏标签行和副标题 */
+    /** 简单模式 */
     simple?: boolean;
   }>(),
   {
@@ -131,7 +131,7 @@ const alignItems = computed(() => {
       {{ media.track.comment }}
     </div>
     <!-- 元信息标签行 -->
-    <div v-if="!simple" class="flex items-center gap-1.5 text-[1em] my-1 text-cover/60">
+    <div class="flex items-center gap-1.5 text-[1em] my-1 text-cover/60">
       <span
         class="inline-flex items-center justify-center leading-none px-1.5 py-1.2 rounded-md border border-solid border-cover/30"
       >
diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index c05cf986..712aa0b2 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -9,18 +9,15 @@ import { useFavorite } from "@/composables/useFavorite";
 import Lyrics from "@/components/player/Lyrics/index.vue";
 import PlaylistPickerDialog from "@/components/modals/PlaylistPickerDialog.vue";
 import { useWindowControls } from "@/composables/useWindowControls";
-import { useSettingsDialog } from "@/settings/useSettingsDialog";
 import * as player from "@/core/player";
-import { formatTime, formatSignedSec } from "@/utils/time";
+import { formatTime } from "@/utils/time";
 import IconFavorite from "~icons/material-symbols/favorite-rounded";
 import IconFavoriteOutline from "~icons/material-symbols/favorite-outline-rounded";
 import IconLucideListPlus from "~icons/lucide/list-plus";
 
-const { t } = useI18n();
 const status = useStatusStore();
 const media = useMediaStore();
 const settings = useSettingsStore();
-const settingsDialog = useSettingsDialog();
 const fav = useFavorite();
 const {
   isPlaying,
@@ -164,42 +161,6 @@ watch(immersiveEnabled, (on) => {
 
 onBeforeUnmount(() => clearTimeout(idleTimer));
 
-/** 歌词偏移步长（ms） */
-const LYRIC_OFFSET_STEP = 500;
-
-/** 偏移弹层是否打开；打开期间按钮组保持可见 */
-const offsetPopoverOpen = ref(false);
-
-/** 歌词区右侧操作按钮组的显隐 */
-const lyricActionsClass = computed(() => {
-  if (immersive.value) return "opacity-0 pointer-events-none";
-  if (offsetPopoverOpen.value) return "opacity-100 pointer-events-auto";
-  return "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto";
-});
-
-/** 当前曲目偏移 */
-const songOffset = computed(() => status.lyricOffsetMs);
-
-/** 写入偏移 */
-const writeOffset = (offsetMs: number): void => {
-  const id = media.track?.id;
-  if (!id) return;
-  window.api.nowPlaying.setLyricOffset(id, offsetMs);
-};
-
-/** 弹层里直接编辑（ms） */
-const offsetInputMs = computed<number>({
-  get: () => songOffset.value,
-  set: (val) => writeOffset(val ?? 0),
-});
-
-/** 歌词提前 */
-const advanceLyric = (): void => writeOffset(songOffset.value + LYRIC_OFFSET_STEP);
-/** 歌词延后 */
-const delayLyric = (): void => writeOffset(songOffset.value - LYRIC_OFFSET_STEP);
-/** 重置歌词偏移 */
-const resetLyricOffset = (): void => writeOffset(0);
-
 /** 添加到歌单 */
 const pickerOpen = ref(false);
 const pickerTracks = shallowRef<Track[]>([]);
@@ -216,8 +177,7 @@ const openPicker = (): void => {
 /** 歌词显隐按钮 */
 const lyricToggleDisabled = computed(() => !hasLyric.value || fullscreenCover.value);
 const lyricToggleActive = computed(
-  () =>
-    showLyric.value && hasLyric.value && !status.fullQueueOpen && !fullscreenCover.value,
+  () => showLyric.value && hasLyric.value && !status.fullQueueOpen && !fullscreenCover.value,
 );
 
 /** 切换歌词展示 */
@@ -380,84 +340,8 @@ const toggleLyric = (): void => {
                 暂无歌词
               </div>
             </div>
-            <!-- 操作按钮 -->
-            <div
-              class="absolute right-3 top-1/2 -translate-y-1/2 flex flex-col items-center gap-2 transition-opacity duration-300"
-              :class="lyricActionsClass"
-            >
-              <SButton
-                type="cover"
-                variant="ghost"
-                circle
-                :size="40"
-                :disabled="!hasTrack"
-                @click="advanceLyric"
-              >
-                <template #icon><IconLucidePlus /></template>
-              </SButton>
-              <SPopover
-                v-model:open="offsetPopoverOpen"
-                trigger="click"
-                side="left"
-                :side-offset="8"
-                cover
-              >
-                <template #trigger>
-                  <div
-                    class="inline-flex items-center justify-center gap-0.5 h-6 w-10 rounded-md cursor-pointer border border-solid border-cover/30 bg-cover/8 hover:bg-cover/15 transition-colors tabular-nums"
-                    :class="!hasTrack ? 'opacity-40 cursor-not-allowed pointer-events-none' : ''"
-                  >
-                    <span class="text-xs font-medium text-cover">
-                      {{ formatSignedSec(songOffset) }}
-                    </span>
-                    <span class="text-[10px] text-cover/60">s</span>
-                  </div>
-                </template>
-                <div class="flex flex-col gap-2 w-44">
-                  <h4 class="m-0 text-sm font-medium leading-tight text-cover">
-                    {{ t("player.lyricOffset.title") }}
-                  </h4>
-                  <p class="m-0 text-xs text-cover/60">{{ t("player.lyricOffset.hint") }}</p>
-                  <SNumberInput
-                    v-model="offsetInputMs"
-                    :step="100"
-                    size="small"
-                    unit="ms"
-                    placeholder="0"
-                    cover
-                  />
-                  <SButton
-                    type="cover"
-                    variant="secondary"
-                    size="tiny"
-                    :disabled="songOffset === 0"
-                    @click="resetLyricOffset"
-                  >
-                    {{ t("common.reset") }}
-                  </SButton>
-                </div>
-              </SPopover>
-              <SButton
-                type="cover"
-                variant="ghost"
-                circle
-                :size="40"
-                :disabled="!hasTrack"
-                @click="delayLyric"
-              >
-                <template #icon><IconLucideMinus /></template>
-              </SButton>
-              <div class="h-px w-6 bg-cover/25 my-1" />
-              <SButton
-                type="cover"
-                variant="ghost"
-                circle
-                :size="40"
-                @click="settingsDialog.show('lyric')"
-              >
-                <template #icon><IconLucideSettings2 /></template>
-              </SButton>
-            </div>
+            <!-- 歌词侧边工具栏 -->
+            <LyricActions :immersive="immersive" />
           </div>
           <!-- 播放队列 -->
           <div
diff --git a/src/settings/useSettingModel.ts b/src/settings/useSettingModel.ts
index 3a6664a0..89700a37 100644
--- a/src/settings/useSettingModel.ts
+++ b/src/settings/useSettingModel.ts
@@ -1,21 +1,9 @@
 import { useSettingsStore } from "@/stores/settings";
 import { useThemeStore } from "@/stores/theme";
+import { getByPath, setByPath } from "@shared/utils/path";
 import { virtualBindings } from "./virtualBindings";
 import { computed, type WritableComputedRef } from "vue";
 
-/** 按路径读取嵌套属性 */
-const getByPath = (obj: Record<string, any>, path: string): any => {
-  return path.split(".").reduce((o, k) => o?.[k], obj);
-};
-
-/** 按路径设置嵌套属性 */
-const setByPath = (obj: Record<string, any>, path: string, value: any): void => {
-  const keys = path.split(".");
-  const last = keys.pop()!;
-  const target = keys.reduce((o, k) => o[k], obj);
-  target[last] = value;
-};
-
 /**
  * 根据 binding 配置创建与 store 双向绑定的 computed
  * 仅在 SettingsItem 组件内按需调用
@@ -28,7 +16,7 @@ export const useSettingModel = (binding: {
     const store = useThemeStore();
     return computed({
       get: () => getByPath(store, binding.path),
-      set: (v) => setByPath(store as Record<string, any>, binding.path, v),
+      set: (v) => setByPath(store, binding.path, v),
     });
   }
   // 虚拟 binding
@@ -41,7 +29,7 @@ export const useSettingModel = (binding: {
 
   // system.* 路径需要走 IPC 持久化
   if (binding.path.startsWith("system.")) {
-    const ipcPath = binding.path.slice(7); // 去掉 "system." 前缀
+    const ipcPath = binding.path.slice(7);
     return computed({
       get: () => getByPath(store.system, ipcPath),
       set: (v) => store.setSystem(ipcPath, v),
@@ -51,7 +39,7 @@ export const useSettingModel = (binding: {
   return computed({
     get: () => getByPath(store, binding.path),
     set: (v) => {
-      setByPath(store as Record<string, any>, binding.path, v);
+      setByPath(store, binding.path, v);
       store.afterLocalChange(binding.path, v);
     },
   });
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index d161b683..79b5ce29 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -11,6 +11,7 @@ import {
 } from "@/types/settings";
 import type { SystemConfig, LocaleCode } from "@shared/types/settings";
 import { defaultSystemConfig } from "@shared/defaults/settings";
+import { setByPath } from "@shared/utils/path";
 
 export const useSettingsStore = defineStore(
   "settings",
@@ -117,25 +118,6 @@ export const useSettingsStore = defineStore(
       } catch {}
     };
 
-    /**
-     * 按 dot-path 写入嵌套对象，仅触发对应叶子节点的 reactive
-     * @param target 要写入的对象
-     * @param path 形如 "player.equalizer.bands"
-     * @param value 新值
-     */
-    const setByPath = (target: Record<string, unknown>, path: string, value: unknown): void => {
-      const keys = path.split(".");
-      const last = keys.pop();
-      if (!last) return;
-      let cursor: Record<string, unknown> = target;
-      for (const key of keys) {
-        const next = cursor[key];
-        if (next === null || typeof next !== "object") return;
-        cursor = next as Record<string, unknown>;
-      }
-      cursor[last] = value;
-    };
-
     /** IPC 订阅取消回调集合 */
     const unsubscribers: Array<() => void> = [
       // 订阅桌面歌词配置变化：歌词窗口点锁定按钮等场景需要回流到主窗口设置页
@@ -187,12 +169,13 @@ export const useSettingsStore = defineStore(
 
     /**
      * 写入后端配置并同步本地
-     * 只更新指定路径，避免触发无关 watch
+     * 先就地 mutate 叶子保证 UI 即时反馈，IPC 落盘异步执行
      */
     const setSystem = async (keyPath: string, value: unknown): Promise<void> => {
-      await window.api.config.set(keyPath, value);
       setByPath(system, keyPath, value);
-      // 后处理
+      window.api.config.set(keyPath, value).catch((err) => {
+        console.error("[settings] config.set failed", keyPath, err);
+      });
       if (keyPath === "player.fadeEnabled" || keyPath === "player.fadeDuration") {
         await window.api.player.setFadeDuration(
           system.player.fadeEnabled ? system.player.fadeDuration : 0,

From 707977ba47d69071651c5ca2d8b0d43256890211 Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Wed, 27 May 2026 14:55:42 +0800
Subject: [PATCH 06/10] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=AD=8C?=
 =?UTF-8?q?=E8=AF=8D=E6=BB=9A=E5=8A=A8=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/player/FullPlayer/index.vue   | 11 +++++++++--
 src/components/player/Lyrics/engine/index.ts | 13 ++++++++++---
 src/components/player/Lyrics/index.vue       |  8 +++++++-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/player/FullPlayer/index.vue b/src/components/player/FullPlayer/index.vue
index 712aa0b2..e2853476 100644
--- a/src/components/player/FullPlayer/index.vue
+++ b/src/components/player/FullPlayer/index.vue
@@ -5,6 +5,7 @@ import { useStatusStore } from "@/stores/status";
 import { useMediaStore } from "@/stores/media";
 import { useSettingsStore } from "@/stores/settings";
 import { usePlaybackTime } from "@/composables/usePlaybackTime";
+import { getCurrentTime } from "@/services/playback";
 import { useFavorite } from "@/composables/useFavorite";
 import Lyrics from "@/components/player/Lyrics/index.vue";
 import PlaylistPickerDialog from "@/components/modals/PlaylistPickerDialog.vue";
@@ -44,18 +45,23 @@ const { start: startTick, stop: stopTick } = usePlaybackTime((currentMs) => {
 
 /** 歌词组件是否已挂载 */
 const lyricMounted = ref(false);
+/** 初始播放时间 */
+const initialLyricTimeMs = ref(0);
 
-/** 展开前：非首次直接恢复渲染 */
+/** 展开前 */
 const onBeforeEnter = () => {
   if (lyricMounted.value) {
+    // 先推一次当前时间
+    lyricRef.value?.setCurrentTime(getCurrentTime() + status.lyricOffsetMs);
     lyricRef.value?.resume();
     startTick();
   }
 };
 
-/** 展开动画结束后：首次挂载歌词组件 */
+/** 展开后 */
 const onAfterEnter = () => {
   if (!lyricMounted.value) {
+    initialLyricTimeMs.value = getCurrentTime() + status.lyricOffsetMs;
     lyricMounted.value = true;
     nextTick(() => {
       lyricRef.value?.resume();
@@ -319,6 +325,7 @@ const toggleLyric = (): void => {
                 v-if="lyricMounted && hasLyric"
                 ref="lyricRef"
                 :lyric-lines="media.parsedLyric"
+                :initial-time="initialLyricTimeMs"
                 :playing="isPlaying"
                 :align-position="settings.lyric.alignPosition"
                 :word-fade-width="settings.lyric.wordFadeWidth"
diff --git a/src/components/player/Lyrics/engine/index.ts b/src/components/player/Lyrics/engine/index.ts
index cfbfabb0..9af1630c 100644
--- a/src/components/player/Lyrics/engine/index.ts
+++ b/src/components/player/Lyrics/engine/index.ts
@@ -226,6 +226,9 @@ export class LyricRenderer {
   freeze = () => {
     cancelAnimationFrame(this.animationFrameId);
     this.animationFrameId = 0;
+    // 断开 observer
+    this.containerResizeObserver.disconnect();
+    this.sentinelResizeObserver.disconnect();
     // Web Animations 走自己的时间线，不随 rAF 暂停而停止；冻结期间也要 pause
     for (const anims of this.activeAnimations.values()) {
       for (const anim of anims) anim.pause();
@@ -235,6 +238,10 @@ export class LyricRenderer {
   /** 恢复渲染 */
   resume = () => {
     if (this.animationFrameId !== 0) return;
+    this.containerResizeObserver.observe(this.container);
+    if (this.sentinelElement) {
+      this.sentinelResizeObserver.observe(this.sentinelElement);
+    }
     this.lastFrameTimestamp = 0;
     this.needsFullSync = true;
     // 恢复时按当前播放时间重新对齐动画 currentTime 后再 play
@@ -280,9 +287,9 @@ export class LyricRenderer {
    * @param lines - 歌词行数组
    */
   setLyrics = (lines: LyricLine[]) => {
+    const seekTime = this.pendingPlayTime >= 0 ? this.pendingPlayTime : 0;
     this.cancelAllActiveAnimations();
     for (const element of this.lineElements) element.remove();
-
     // 重置状态
     this.lines = lines;
     this.activeLineIndex = -1;
@@ -410,8 +417,8 @@ export class LyricRenderer {
     // 重置帧时间戳，避免渲染器空闲后首帧 deltaTime 过大导致弹簧瞬移
     this.lastFrameTimestamp = 0;
 
-    // 初始布局 + 入场动画（从 time=0 开始）
-    this.handleSeek(0);
+    // 初始布局 + 入场动画
+    this.handleSeek(seekTime);
     this.calculateLayout(true);
     this.playEntranceAnimation(this.containerHeight * 0.6);
     this.needsFullSync = true;
diff --git a/src/components/player/Lyrics/index.vue b/src/components/player/Lyrics/index.vue
index b38107f7..d8375855 100644
--- a/src/components/player/Lyrics/index.vue
+++ b/src/components/player/Lyrics/index.vue
@@ -90,6 +90,8 @@ const props = withDefaults(
     showTranslation?: boolean;
     /** 是否显示音译歌词 @default true */
     showRomanization?: boolean;
+    /** 挂载时的初始播放时间（毫秒）@default 0 */
+    initialTime?: number;
   }>(),
   {
     playing: false,
@@ -108,6 +110,7 @@ const props = withDefaults(
     enableEmphasizeEffect: DEFAULTS.enableEmphasizeEffect,
     showTranslation: true,
     showRomanization: true,
+    initialTime: 0,
   },
 );
 
@@ -158,12 +161,15 @@ const handleLineClick = (timeMs: number) => {
 
 onMounted(() => {
   if (!containerRef.value) return;
-  const { lyricLines: _lyricLines, ...config } = props;
+  const { lyricLines: _lyricLines, initialTime: _initialTime, ...config } = props;
   renderer = new LyricRenderer(containerRef.value, {
     ...config,
     springConfig: props.springConfig ?? {},
     onLineClick: handleLineClick,
   });
+  if (props.initialTime > 0) {
+    renderer.setCurrentTime(props.initialTime);
+  }
   if (props.lyricLines.length > 0) {
     renderer.setLyrics(props.lyricLines);
   }

From b152b0eb34ea665419e09e3d657e59b6fd15e177 Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Wed, 27 May 2026 16:23:08 +0800
Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20toast=20?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                     |   5 ++
 src/components/player/PlayerBar.vue | 128 ++++++++++++++++------------
 src/components/ui/SToast.vue        |  55 +++++++-----
 src/composables/useToast.ts         |  17 ++--
 src/core/player/index.ts            |   8 +-
 src/i18n/locales/en-US.json         |   9 ++
 src/i18n/locales/zh-CN.json         |   9 ++
 src/layouts/MainLayout.vue          |   2 +-
 8 files changed, 151 insertions(+), 82 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 2381e55b..f9d8f5f1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -137,9 +137,14 @@ declare module 'vue' {
     IconLucideVolumeX: typeof import('~icons/lucide/volume-x')['default']
     IconLucideX: typeof import('~icons/lucide/x')['default']
     IconLucideZap: typeof import('~icons/lucide/zap')['default']
+    IconMaterialSymbolsCancelRounded: typeof import('~icons/material-symbols/cancel-rounded')['default']
+    IconMaterialSymbolsChatBubbleRounded: typeof import('~icons/material-symbols/chat-bubble-rounded')['default']
+    IconMaterialSymbolsCheckCircleRounded: typeof import('~icons/material-symbols/check-circle-rounded')['default']
     IconMaterialSymbolsFavoriteOutlineRounded: typeof import('~icons/material-symbols/favorite-outline-rounded')['default']
+    IconMaterialSymbolsInfoRounded: typeof import('~icons/material-symbols/info-rounded')['default']
     IconMaterialSymbolsPlaylistPlayRounded: typeof import('~icons/material-symbols/playlist-play-rounded')['default']
     IconMaterialSymbolsShuffleRounded: typeof import('~icons/material-symbols/shuffle-rounded')['default']
+    IconMaterialSymbolsWarningRounded: typeof import('~icons/material-symbols/warning-rounded')['default']
     IconSpHeartMode: typeof import('~icons/sp/heart-mode')['default']
     IconSpLossless: typeof import('~icons/sp/lossless')['default']
     IconSpPlayOrder: typeof import('~icons/sp/play-order')['default']
diff --git a/src/components/player/PlayerBar.vue b/src/components/player/PlayerBar.vue
index 8bf897ab..07b03826 100644
--- a/src/components/player/PlayerBar.vue
+++ b/src/components/player/PlayerBar.vue
@@ -10,7 +10,7 @@ import * as player from "@/core/player";
 import { formatTime } from "@/utils/time";
 import IconFavorite from "~icons/material-symbols/favorite-rounded";
 import IconFavoriteOutline from "~icons/material-symbols/favorite-outline-rounded";
-import IconLucideMoreVertical from "~icons/lucide/more-vertical";
+import IconLucideMoreHorizontal from "~icons/lucide/more-horizontal";
 
 const status = useStatusStore();
 const settings = useSettingsStore();
@@ -50,33 +50,42 @@ const { items: menuItems, handleSelect: onMenuSelect } = useTrackMenu(toRef(medi
       <div class="flex items-center gap-2 min-w-0">
         <TrackInfo compact class="flex-1">
           <template #title-trailing>
-            <SButton
-              class="-my-1"
-              type="primary"
-              variant="text"
-              circle
-              :size="24"
-              :icon-size="16"
-              @click="fav.toggle(media.track)"
-            >
-              <template #icon>
-                <IconFavorite v-if="fav.isLiked(media.track)" />
-                <IconFavoriteOutline v-else />
-              </template>
-            </SButton>
-            <SDropdownMenu
-              v-if="media.track"
-              :items="menuItems"
-              side="top"
-              align="start"
-              @select="onMenuSelect"
-            >
-              <template #trigger>
-                <SButton class="-my-1" variant="text" circle :size="24" :icon-size="16">
-                  <template #icon><IconLucideMoreVertical /></template>
-                </SButton>
-              </template>
-            </SDropdownMenu>
+            <div class="flex items-center shrink-0">
+              <SButton
+                class="-my-1"
+                type="primary"
+                variant="text"
+                circle
+                :size="24"
+                :icon-size="16"
+                @click="fav.toggle(media.track)"
+              >
+                <template #icon>
+                  <IconFavorite v-if="fav.isLiked(media.track)" />
+                  <IconFavoriteOutline v-else />
+                </template>
+              </SButton>
+              <SDropdownMenu
+                v-if="media.track"
+                :items="menuItems"
+                side="top"
+                align="start"
+                @select="onMenuSelect"
+              >
+                <template #trigger>
+                  <SButton
+                    class="-my-1"
+                    type="primary"
+                    variant="text"
+                    circle
+                    :size="24"
+                    :icon-size="16"
+                  >
+                    <template #icon><IconLucideMoreHorizontal /></template>
+                  </SButton>
+                </template>
+              </SDropdownMenu>
+            </div>
           </template>
         </TrackInfo>
         <span class="text-xs text-on-surface-variant/70 tabular-nums shrink-0">
@@ -119,33 +128,42 @@ const { items: menuItems, handleSelect: onMenuSelect } = useTrackMenu(toRef(medi
     <div class="grid grid-cols-[1fr_auto_1fr] items-center h-full px-3 gap-3">
       <TrackInfo>
         <template #title-trailing>
-          <SButton
-            class="-my-1"
-            type="primary"
-            variant="text"
-            circle
-            :size="28"
-            :icon-size="18"
-            @click="fav.toggle(media.track)"
-          >
-            <template #icon>
-              <IconFavorite v-if="fav.isLiked(media.track)" />
-              <IconFavoriteOutline v-else />
-            </template>
-          </SButton>
-          <SDropdownMenu
-            v-if="media.track"
-            :items="menuItems"
-            side="top"
-            align="start"
-            @select="onMenuSelect"
-          >
-            <template #trigger>
-              <SButton class="-my-1" variant="text" circle :size="28" :icon-size="18">
-                <template #icon><IconLucideMoreVertical /></template>
-              </SButton>
-            </template>
-          </SDropdownMenu>
+          <div class="flex items-center shrink-0">
+            <SButton
+              class="-my-1"
+              type="primary"
+              variant="text"
+              circle
+              :size="28"
+              :icon-size="18"
+              @click="fav.toggle(media.track)"
+            >
+              <template #icon>
+                <IconFavorite v-if="fav.isLiked(media.track)" />
+                <IconFavoriteOutline v-else />
+              </template>
+            </SButton>
+            <SDropdownMenu
+              v-if="media.track"
+              :items="menuItems"
+              side="top"
+              align="start"
+              @select="onMenuSelect"
+            >
+              <template #trigger>
+                <SButton
+                  class="-my-1"
+                  type="primary"
+                  variant="text"
+                  circle
+                  :size="28"
+                  :icon-size="18"
+                >
+                  <template #icon><IconLucideMoreHorizontal /></template>
+                </SButton>
+              </template>
+            </SDropdownMenu>
+          </div>
         </template>
       </TrackInfo>
       <PlayerControls class="mx-15" />
diff --git a/src/components/ui/SToast.vue b/src/components/ui/SToast.vue
index 694680c6..4808df8d 100644
--- a/src/components/ui/SToast.vue
+++ b/src/components/ui/SToast.vue
@@ -7,6 +7,7 @@ setMaxToasts(props.max);
 
 const { toasts, remove } = useToast();
 
+/** 图标色 */
 const iconStyles: Record<ToastType, string> = {
   default: "text-on-surface-variant",
   loading: "text-on-surface-variant",
@@ -15,6 +16,16 @@ const iconStyles: Record<ToastType, string> = {
   warning: "text-amber-500",
   error: "text-red-500",
 };
+
+const onBeforeLeave = (el: Element): void => {
+  const htmlEl = el as HTMLElement;
+  const rect = htmlEl.getBoundingClientRect();
+  htmlEl.style.position = "fixed";
+  htmlEl.style.top = `${rect.top}px`;
+  htmlEl.style.left = `${rect.left}px`;
+  htmlEl.style.width = `${rect.width}px`;
+  htmlEl.style.margin = "0";
+};
 </script>
 
 <template>
@@ -23,46 +34,52 @@ const iconStyles: Record<ToastType, string> = {
       class="fixed bottom-24 inset-x-0 z-999 flex flex-col items-center gap-2 pointer-events-none"
     >
       <TransitionGroup
-        enter-active-class="transition-all duration-300 ease-out"
-        leave-active-class="transition-all duration-200 ease-in absolute"
-        enter-from-class="translate-y-1 opacity-0 scale-95"
-        leave-to-class="-translate-y-1 opacity-0 scale-95"
-        move-class="transition-all duration-300 ease-out"
+        enter-active-class="transition-[opacity,transform] duration-250 ease-[cubic-bezier(0.4,0,0.2,1)]"
+        leave-active-class="transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.4,0,1,1)]"
+        enter-from-class="scale-95 opacity-0"
+        leave-to-class="scale-95 opacity-0"
+        move-class="transition-transform duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]"
+        @before-leave="onBeforeLeave"
       >
         <div
           v-for="item in toasts"
           :key="item.id"
-          class="pointer-events-auto border border-solid border-outline-variant/30 rounded-lg px-3.5 py-2.5 flex items-center gap-2.5 text-sm bg-surface-bright text-on-surface shadow-lg whitespace-nowrap backdrop-blur-sm"
+          class="pointer-events-auto border border-solid border-outline-variant/30 rounded-lg px-3.5 py-2.5 flex items-center gap-2.5 text-sm bg-surface-bright text-on-surface shadow-lg whitespace-nowrap will-change-transform"
         >
-          <!-- 自定义图标 -->
+          <!-- 图标 -->
           <template v-if="item.icon !== false">
             <component
               :is="item.icon"
               v-if="item.icon"
-              class="size-4 shrink-0"
+              class="size-5 shrink-0"
               :class="iconStyles[item.type]"
             />
             <template v-else>
-              <SLoading v-if="item.type === 'loading'" class="size-4 shrink-0" />
-              <IconLucideMessageCircle
+              <SLoading v-if="item.type === 'loading'" class="size-5 shrink-0" />
+              <IconMaterialSymbolsChatBubbleRounded
                 v-else-if="item.type === 'default'"
-                class="size-4 shrink-0 text-on-surface-variant"
+                class="size-5 shrink-0"
+                :class="iconStyles.default"
               />
-              <IconLucideInfo
+              <IconMaterialSymbolsInfoRounded
                 v-else-if="item.type === 'info'"
-                class="size-4 shrink-0 text-blue-500"
+                class="size-5 shrink-0"
+                :class="iconStyles.info"
               />
-              <IconLucideCircleCheck
+              <IconMaterialSymbolsCheckCircleRounded
                 v-else-if="item.type === 'success'"
-                class="size-4 shrink-0 text-green-600"
+                class="size-5 shrink-0"
+                :class="iconStyles.success"
               />
-              <IconLucideTriangleAlert
+              <IconMaterialSymbolsWarningRounded
                 v-else-if="item.type === 'warning'"
-                class="size-4 shrink-0 text-amber-500"
+                class="size-5 shrink-0"
+                :class="iconStyles.warning"
               />
-              <IconLucideCircleX
+              <IconMaterialSymbolsCancelRounded
                 v-else-if="item.type === 'error'"
-                class="size-4 shrink-0 text-red-500"
+                class="size-5 shrink-0"
+                :class="iconStyles.error"
               />
             </template>
           </template>
diff --git a/src/composables/useToast.ts b/src/composables/useToast.ts
index 95df6bef..fcbc0197 100644
--- a/src/composables/useToast.ts
+++ b/src/composables/useToast.ts
@@ -32,13 +32,13 @@ let maxToasts = 5;
 /** 全局 toast 队列 */
 const toasts = shallowReactive<ToastItem[]>([]);
 
-/** 定时器映射，记录每个 toast 的关闭定时器 */
+/** 定时器映射 */
 const timers = new Map<number, ReturnType<typeof setTimeout>>();
 
 /** 下一个 toast ID */
 let nextId = 0;
 
-/** 移除 toast */
+/** 移除指定 id 的 toast */
 const remove = (id: number): void => {
   const timer = timers.get(id);
   if (timer) {
@@ -49,10 +49,15 @@ const remove = (id: number): void => {
   if (idx !== -1) toasts.splice(idx, 1);
 };
 
-/** 添加 toast */
+/**
+ * 添加 toast
+ * @param type toast 类型
+ * @param message toast 消息
+ * @param options toast 选项
+ * @returns toast 实例
+ */
 const push = (type: ToastType, message: string, options?: ToastOptions): ToastInstance => {
-  const defaults = { duration: 3000, closable: false };
-  const { duration = defaults.duration, closable = defaults.closable, icon } = options ?? {};
+  const { duration = 3000, closable = false, icon } = options ?? {};
   while (toasts.length >= maxToasts) {
     remove(toasts[0].id);
   }
@@ -67,7 +72,7 @@ const push = (type: ToastType, message: string, options?: ToastOptions): ToastIn
   return { id, close: () => remove(id) };
 };
 
-/** 全局 toast */
+/** 全局 toast API */
 export const toast = {
   show: (message: string, options?: ToastOptions) => push("default", message, options),
   info: (message: string, options?: ToastOptions) => push("info", message, options),
diff --git a/src/core/player/index.ts b/src/core/player/index.ts
index b702b319..a895da80 100644
--- a/src/core/player/index.ts
+++ b/src/core/player/index.ts
@@ -17,6 +17,8 @@ import { resolveTrackSource } from "@/services/audioSource";
 import { installPlayStats } from "./stats";
 import { extractColorFromUrl } from "@/utils/color";
 import { handleError, isSkippableError } from "@/utils/errors";
+import { toast } from "@/composables/useToast";
+import i18n from "@/i18n";
 
 /** 引擎 load 竞态 token */
 let loadToken = 0;
@@ -529,8 +531,11 @@ const syncPlayMode = (): void => {
  * @param mode - off（不循环）、list（列表循环）、one（单曲循环）
  */
 export const setRepeatMode = (mode: RepeatMode): void => {
-  useStatusStore().repeatMode = mode;
+  const status = useStatusStore();
+  if (status.repeatMode === mode) return;
+  status.repeatMode = mode;
   syncPlayMode();
+  toast.info(i18n.global.t(`player.repeatMode.${mode}`));
 };
 
 /** 循环切换循环模式：list → one → off → list */
@@ -571,6 +576,7 @@ export const setShuffleMode = (mode: ShuffleMode): void => {
     }
   }
   syncPlayMode();
+  toast.info(i18n.global.t(`player.shuffleMode.${mode}`));
 };
 
 /**
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 62c03ecd..e03f1ee5 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -305,6 +305,15 @@
     "lyricOffset": {
       "title": "Lyric Offset",
       "hint": "Positive values advance lyrics, in milliseconds"
+    },
+    "repeatMode": {
+      "list": "Repeat all",
+      "one": "Repeat one",
+      "off": "Repeat off"
+    },
+    "shuffleMode": {
+      "on": "Shuffle on",
+      "off": "Shuffle off"
     }
   },
   "songList": {
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index cd239f9b..1f9f4f64 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -305,6 +305,15 @@
     "lyricOffset": {
       "title": "歌词偏移",
       "hint": "正值为歌词提前，单位毫秒"
+    },
+    "repeatMode": {
+      "list": "列表循环",
+      "one": "单曲循环",
+      "off": "关闭循环"
+    },
+    "shuffleMode": {
+      "on": "随机播放",
+      "off": "顺序播放"
     }
   },
   "songList": {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 4211e25d..ff1aa98b 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -119,7 +119,7 @@ const playerBarInnerClass = computed(() => {
   </Transition>
 
   <!-- Toast -->
-  <SToast :max="5" />
+  <SToast :max="1" />
   <!-- Dialog -->
   <SDialogProvider />
   <!-- 全屏播放器 -->

From ca9b61e73715dc4208d784e3760a2ad22cc7eab3 Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Wed, 27 May 2026 17:50:28 +0800
Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/NavSearch.vue | 45 ++++++++++++++++++++++-------
 src/components/list/SongList.vue    |  5 ++++
 src/composables/useMultiSelect.ts   |  6 +++-
 src/composables/useTrackMenu.ts     |  7 +++--
 src/pages/Collection.vue            |  1 +
 5 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/components/layout/NavSearch.vue b/src/components/layout/NavSearch.vue
index 705e0cd3..ab770f6c 100644
--- a/src/components/layout/NavSearch.vue
+++ b/src/components/layout/NavSearch.vue
@@ -5,6 +5,7 @@ import { getHotSearches, type HotSearchItem } from "@/apis/search/hot";
 import { getSearchSuggest, type SuggestData } from "@/apis/search/suggest";
 import { songsByIds as getNeteaseSongsByIds } from "@/apis/song/netease";
 import { formatCompact } from "@/utils/format";
+import { navigateToAlbum, navigateToArtist, navigateToPlaylist } from "@/utils/navigate";
 import * as player from "@/core/player";
 
 const { t, locale } = useI18n();
@@ -59,15 +60,37 @@ const onPickKeyword = (keyword: string): void => submit(keyword);
 const onRemoveHistory = (keyword: string): void => data.removeSearchHistory(keyword);
 const onClearHistory = (): void => data.clearSearchHistory();
 
-/** 单曲建议点击 */
-const onPickSong = async (id: number): Promise<void> => {
+/**
+ * 建议点击
+ * @param kind - 建议类型
+ * @param id - 网易云 id
+ * @param name - 名称
+ */
+const onPickSuggest = async (
+  kind: "song" | "artist" | "album" | "playlist",
+  id: number,
+  name: string,
+): Promise<void> => {
   if (trimmedQuery.value) data.addSearchHistory(trimmedQuery.value);
   dialogOpen.value = false;
-  try {
-    const [track] = await getNeteaseSongsByIds([id]);
-    if (track) await player.playNow(track);
-  } catch (err) {
-    console.warn("[NavSearch] play suggest song failed:", err);
+  switch (kind) {
+    case "song":
+      try {
+        const [track] = await getNeteaseSongsByIds([id]);
+        if (track) await player.playNow(track);
+      } catch (err) {
+        console.warn("[NavSearch] play suggest song failed:", err);
+      }
+      break;
+    case "artist":
+      navigateToArtist(name, { source: "netease", artistId: String(id) });
+      break;
+    case "album":
+      navigateToAlbum(name, { source: "netease", albumId: String(id) });
+      break;
+    case "playlist":
+      navigateToPlaylist(String(id), { source: "netease", name });
+      break;
   }
 };
 
@@ -174,7 +197,7 @@ onMounted(() => {
                 v-for="song in suggest.songs"
                 :key="song.id"
                 class="min-w-0 flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer hover:bg-on-surface/5 transition-colors duration-200"
-                @click="onPickSong(song.id)"
+                @click="onPickSuggest('song', song.id, song.name)"
               >
                 <div class="flex-1 min-w-0 flex flex-col leading-tight">
                   <span class="truncate text-sm text-on-surface">{{ song.name }}</span>
@@ -194,7 +217,7 @@ onMounted(() => {
                 v-for="artist in suggest.artists"
                 :key="artist.id"
                 class="min-w-0 flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer hover:bg-on-surface/5 transition-colors duration-200"
-                @click="onPickKeyword(artist.name)"
+                @click="onPickSuggest('artist', artist.id, artist.name)"
               >
                 <span class="flex-1 truncate text-sm text-on-surface">{{ artist.name }}</span>
               </div>
@@ -208,7 +231,7 @@ onMounted(() => {
                 v-for="album in suggest.albums"
                 :key="album.id"
                 class="min-w-0 flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer hover:bg-on-surface/5 transition-colors duration-200"
-                @click="onPickKeyword(album.name)"
+                @click="onPickSuggest('album', album.id, album.name)"
               >
                 <div class="flex-1 min-w-0 flex flex-col leading-tight">
                   <span class="truncate text-sm text-on-surface">{{ album.name }}</span>
@@ -227,7 +250,7 @@ onMounted(() => {
                 v-for="playlist in suggest.playlists"
                 :key="playlist.id"
                 class="min-w-0 flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer hover:bg-on-surface/5 transition-colors duration-200"
-                @click="onPickKeyword(playlist.name)"
+                @click="onPickSuggest('playlist', playlist.id, playlist.name)"
               >
                 <span class="flex-1 truncate text-sm text-on-surface">{{ playlist.name }}</span>
               </div>
diff --git a/src/components/list/SongList.vue b/src/components/list/SongList.vue
index 48e6ebd5..2994f6be 100644
--- a/src/components/list/SongList.vue
+++ b/src/components/list/SongList.vue
@@ -50,6 +50,8 @@ const props = withDefaults(
     collectionType?: CollectionType;
     /** 集合 ID */
     collectionId?: string;
+    /** 是否有权从集合移除曲目 */
+    canRemove?: boolean;
     /** 是否还能继续触底加载 */
     hasMore?: boolean;
     /** 触底加载中 */
@@ -65,6 +67,7 @@ const props = withDefaults(
     source: "local",
     collectionType: undefined,
     collectionId: undefined,
+    canRemove: true,
     hasMore: false,
     loadingMore: false,
   },
@@ -216,6 +219,7 @@ const batch = useMultiSelect(sortedItems, {
   source: computed(() => props.source),
   collectionType: computed(() => props.collectionType),
   collectionId: computed(() => props.collectionId),
+  canRemove: computed(() => props.canRemove),
   onChanged: (removedIds) => emit("change", removedIds),
 });
 const { deleteConfirmOpen, deleteDialogTitle, deleteDialogContent } = batch;
@@ -238,6 +242,7 @@ const openPicker = (tracks: Track[]): void => {
 const contextTrack = shallowRef<Track | undefined>();
 const { items: contextMenuItems, handleSelect: onContextMenu } = useTrackMenu(contextTrack, {
   collectionType: props.collectionType,
+  canRemove: props.canRemove,
   onAddToPlaylist: (track) => openPicker([track]),
   onRemove: (track) => batch.requestDelete([track], "remove"),
   onDeleteFile: (track) => batch.requestDelete([track], "file"),
diff --git a/src/composables/useMultiSelect.ts b/src/composables/useMultiSelect.ts
index 7a5787f0..c4db5640 100644
--- a/src/composables/useMultiSelect.ts
+++ b/src/composables/useMultiSelect.ts
@@ -14,6 +14,8 @@ export interface MultiSelectOptions {
   collectionType: Ref<CollectionType | undefined>;
   /** 集合 ID */
   collectionId: Ref<string | undefined>;
+  /** 是否有权从集合移除曲目 */
+  canRemove?: Ref<boolean>;
   /**
    * 删除/移除完成后的回调
    * @param removedIds 成功删除的曲目 id 列表
@@ -82,7 +84,9 @@ export const useMultiSelect = (items: Ref<Track[]>, options: MultiSelectOptions)
     else selectAll();
   };
 
-  const canRemove = computed(() => options.collectionType.value === "playlist");
+  const canRemove = computed(
+    () => options.collectionType.value === "playlist" && options.canRemove?.value !== false,
+  );
   const canRemoveFromCloud = computed(() => options.collectionType.value === "cloud");
 
   const collectionTypeLabel = computed(() => {
diff --git a/src/composables/useTrackMenu.ts b/src/composables/useTrackMenu.ts
index 8585042c..d43076d0 100644
--- a/src/composables/useTrackMenu.ts
+++ b/src/composables/useTrackMenu.ts
@@ -19,6 +19,8 @@ import IconMoreHorizontal from "~icons/lucide/more-horizontal";
 export interface TrackMenuOptions {
   /** 集合类型 */
   collectionType?: CollectionType;
+  /** 是否有权从集合中移除曲目 */
+  canRemove?: boolean;
   /** 隐藏播放相关菜单项 */
   hidePlayActions?: boolean;
   /** 添加到歌单 */
@@ -46,6 +48,7 @@ export const useTrackMenu = (
   const isPlaylist = options.collectionType === "playlist";
   const isCloudView = options.collectionType === "cloud";
   const showPlay = !options.hidePlayActions;
+  const canRemove = options.canRemove !== false;
   // 菜单项
   const items = computed<DropdownMenuItem[]>(() => {
     const source = track.value?.source;
@@ -86,13 +89,13 @@ export const useTrackMenu = (
         label: t("collection.removeFrom", { type: t("collection.playlist") }),
         icon: markRaw(IconListMinus),
         separator: true,
-        show: isPlaylist,
+        show: isPlaylist && canRemove,
       },
       {
         key: "deleteFile",
         label: t("songList.context.deleteFile"),
         icon: markRaw(IconTrash2),
-        separator: !isPlaylist,
+        separator: !(isPlaylist && canRemove),
         show: isLocal,
       },
       {
diff --git a/src/pages/Collection.vue b/src/pages/Collection.vue
index 6432fe76..279b1019 100644
--- a/src/pages/Collection.vue
+++ b/src/pages/Collection.vue
@@ -324,6 +324,7 @@ onBeforeUnmount(() => {
           :source="source"
           :collection-type="type"
           :collection-id="id"
+          :can-remove="manage.canManage.value"
           enable-sort
           @scroll="handleListScroll"
           @change="handleTracksRemoved"

From 3d61d2f3f0bd8b674cb7d781926dc3d784df64ea Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Wed, 27 May 2026 18:32:53 +0800
Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD=E7=9B=91=E8=A7=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                        |   1 +
 src/components/SPerformanceMonitor.vue | 200 +++++++++++++++++++++++++
 src/i18n/locales/en-US.json            |   4 +
 src/i18n/locales/zh-CN.json            |   4 +
 src/layouts/MainLayout.vue             |   2 +
 src/settings/categories/general.ts     |   6 +
 src/stores/settings.ts                 |   1 +
 src/types/settings.ts                  |   2 +
 8 files changed, 220 insertions(+)
 create mode 100644 src/components/SPerformanceMonitor.vue

diff --git a/components.d.ts b/components.d.ts
index f9d8f5f1..d45e5aa3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -222,6 +222,7 @@ declare module 'vue' {
     SNumberInput: typeof import('./src/components/ui/SNumberInput.vue')['default']
     SongList: typeof import('./src/components/list/SongList.vue')['default']
     SpeedDialog: typeof import('./src/components/modals/SpeedDialog.vue')['default']
+    SPerformanceMonitor: typeof import('./src/components/SPerformanceMonitor.vue')['default']
     SPopover: typeof import('./src/components/ui/SPopover.vue')['default']
     SPopselect: typeof import('./src/components/ui/SPopselect.vue')['default']
     SRadio: typeof import('./src/components/ui/SRadio.vue')['default']
diff --git a/src/components/SPerformanceMonitor.vue b/src/components/SPerformanceMonitor.vue
new file mode 100644
index 00000000..bc6806bc
--- /dev/null
+++ b/src/components/SPerformanceMonitor.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+type MetricKind = "fps" | "ms" | "mem";
+
+interface Metric {
+  label: string;
+  format: (v: number) => string;
+  current: number;
+  min: number;
+  max: number;
+  history: number[];
+}
+
+const HISTORY_SIZE = 74;
+const SAMPLE_INTERVAL_MS = 1000;
+
+const metrics: Record<MetricKind, Metric> = {
+  fps: {
+    label: "FPS",
+    format: (v) => String(Math.round(v)),
+    current: 0,
+    min: Infinity,
+    max: 0,
+    history: [],
+  },
+  ms: {
+    label: "MS",
+    format: (v) => v.toFixed(1),
+    current: 0,
+    min: Infinity,
+    max: 0,
+    history: [],
+  },
+  mem: {
+    label: "MB",
+    format: (v) => v.toFixed(0),
+    current: 0,
+    min: Infinity,
+    max: 0,
+    history: [],
+  },
+};
+
+const kind = ref<MetricKind>("fps");
+const label = ref(metrics.fps.label);
+const display = ref("0");
+const rangeText = ref("0–0");
+
+const hasMemory =
+  typeof (performance as unknown as { memory?: { usedJSHeapSize: number } }).memory
+    ?.usedJSHeapSize === "number";
+
+const availableKinds = computed<MetricKind[]>(() =>
+  hasMemory ? ["fps", "ms", "mem"] : ["fps", "ms"],
+);
+
+const canvas = ref<HTMLCanvasElement>();
+let ctx: CanvasRenderingContext2D | null = null;
+
+const refreshDisplay = (): void => {
+  const m = metrics[kind.value];
+  label.value = m.label;
+  display.value = m.format(m.current);
+  const min = m.min === Infinity ? 0 : m.min;
+  rangeText.value = `${m.format(min)}–${m.format(m.max)}`;
+  draw();
+};
+
+const cycle = (): void => {
+  const list = availableKinds.value;
+  const idx = list.indexOf(kind.value);
+  kind.value = list[(idx + 1) % list.length];
+  refreshDisplay();
+};
+
+const draw = (): void => {
+  if (!ctx || !canvas.value) return;
+  const w = canvas.value.width;
+  const h = canvas.value.height;
+  ctx.clearRect(0, 0, w, h);
+  const m = metrics[kind.value];
+  if (m.history.length === 0) return;
+  const min = m.min === Infinity ? 0 : m.min;
+  const max = m.max || 1;
+  const range = max - min || 1;
+  ctx.fillStyle = "rgba(255,255,255,0.85)";
+  const step = w / HISTORY_SIZE;
+  for (let index = 0; index < m.history.length; index++) {
+    const value = m.history[index];
+    const ratio = Math.max(0, Math.min(1, (value - min) / range));
+    const barH = Math.max(1, ratio * (h - 1));
+    ctx.fillRect(index * step, h - barH, Math.max(1, step - 0.5), barH);
+  }
+};
+
+let rafId = 0;
+let lastFrame = 0;
+let frames = 0;
+let sampleStart = 0;
+let lastMs = 0;
+
+const tick = (now: number): void => {
+  if (lastFrame) lastMs = now - lastFrame;
+  lastFrame = now;
+  frames++;
+  if (now - sampleStart >= SAMPLE_INTERVAL_MS) {
+    const elapsed = now - sampleStart;
+    pushSample("fps", (frames * 1000) / elapsed);
+    pushSample("ms", lastMs);
+    if (hasMemory) {
+      const mem =
+        (performance as unknown as { memory: { usedJSHeapSize: number } }).memory.usedJSHeapSize /
+        1048576;
+      pushSample("mem", mem);
+    }
+    frames = 0;
+    sampleStart = now;
+    refreshDisplay();
+  }
+  rafId = requestAnimationFrame(tick);
+};
+
+const pushSample = (k: MetricKind, value: number): void => {
+  const m = metrics[k];
+  m.current = value;
+  if (value < m.min) m.min = value;
+  if (value > m.max) m.max = value;
+  m.history.push(value);
+  if (m.history.length > HISTORY_SIZE) m.history.shift();
+};
+
+/** 拖拽位置 */
+const pos = ref<{ x: number; y: number } | null>(null);
+const dragging = ref(false);
+
+let dragStart: { px: number; py: number; ox: number; oy: number } | null = null;
+let activePointerId = -1;
+let moved = false;
+
+const DRAG_THRESHOLD = 3;
+
+const onPointerDown = (event: PointerEvent): void => {
+  const el = event.currentTarget as HTMLElement;
+  const rect = el.getBoundingClientRect();
+  dragStart = { px: event.clientX, py: event.clientY, ox: rect.left, oy: rect.top };
+  activePointerId = event.pointerId;
+  moved = false;
+  el.setPointerCapture(activePointerId);
+};
+
+const onPointerMove = (event: PointerEvent): void => {
+  if (!dragStart) return;
+  const dx = event.clientX - dragStart.px;
+  const dy = event.clientY - dragStart.py;
+  if (!moved && Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD) return;
+  moved = true;
+  dragging.value = true;
+  pos.value = { x: dragStart.ox + dx, y: dragStart.oy + dy };
+};
+
+const onPointerUp = (event: PointerEvent): void => {
+  const el = event.currentTarget as HTMLElement;
+  if (activePointerId >= 0) el.releasePointerCapture(activePointerId);
+  activePointerId = -1;
+  dragStart = null;
+  dragging.value = false;
+  if (!moved) cycle();
+};
+
+onMounted(() => {
+  if (canvas.value) ctx = canvas.value.getContext("2d");
+  sampleStart = performance.now();
+  rafId = requestAnimationFrame(tick);
+});
+
+onBeforeUnmount(() => {
+  cancelAnimationFrame(rafId);
+});
+</script>
+
+<template>
+  <div
+    class="fixed z-9999 px-2 py-1.5 rounded-lg select-none bg-black/60 text-white backdrop-blur-md shadow-lg flex flex-col gap-1 app-no-drag"
+    :class="dragging ? 'cursor-grabbing' : 'cursor-grab'"
+    :style="
+      pos
+        ? { top: `${pos.y}px`, left: `${pos.x}px`, right: 'auto' }
+        : { top: '5rem', right: '1rem' }
+    "
+    :title="`Drag to move · click to switch · ${rangeText}`"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+  >
+    <div class="flex items-baseline gap-1.5 leading-none">
+      <span class="text-sm font-semibold tabular-nums">{{ display }}</span>
+      <span class="text-[10px] tracking-wider opacity-50">{{ label }}</span>
+    </div>
+    <canvas ref="canvas" :width="74" :height="22" class="block" />
+  </div>
+</template>
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index e03f1ee5..f885212d 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -1055,6 +1055,10 @@
       "label": "Remember Window State",
       "description": "Restore window size, position and maximized state on next launch"
     },
+    "showPerformanceMonitor": {
+      "label": "Performance Monitor",
+      "description": "Floating widget showing FPS / frame time / memory. Click to switch, drag to move"
+    },
     "taskbarProgress": {
       "label": "Taskbar Progress",
       "description": "Show playback progress on the taskbar icon"
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 1f9f4f64..561f06f0 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1055,6 +1055,10 @@
       "label": "记忆窗口状态",
       "description": "下次启动时恢复窗口的大小、位置和最大化状态"
     },
+    "showPerformanceMonitor": {
+      "label": "性能监视器",
+      "description": "悬浮显示 FPS / 帧时间 / 内存占用，点击切换指标，拖动可调整位置"
+    },
     "taskbarProgress": {
       "label": "任务栏播放进度",
       "description": "在任务栏图标上显示当前播放进度"
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index ff1aa98b..e394a7f8 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -120,6 +120,8 @@ const playerBarInnerClass = computed(() => {
 
   <!-- Toast -->
   <SToast :max="1" />
+  <!-- 性能监视器 -->
+  <SPerformanceMonitor v-if="appearance.showPerformanceMonitor" />
   <!-- Dialog -->
   <SDialogProvider />
   <!-- 全屏播放器 -->
diff --git a/src/settings/categories/general.ts b/src/settings/categories/general.ts
index 119b4980..b73ee72c 100644
--- a/src/settings/categories/general.ts
+++ b/src/settings/categories/general.ts
@@ -52,6 +52,12 @@ const generalCategory: SettingCategory = {
           binding: { store: "settings", path: "appearance.rememberCloseChoice" },
           defaultValue: false,
         },
+        {
+          key: "showPerformanceMonitor",
+          type: "switch",
+          binding: { store: "settings", path: "appearance.showPerformanceMonitor" },
+          defaultValue: false,
+        },
       ],
     },
     {
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 79b5ce29..aa7b7631 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -29,6 +29,7 @@ export const useSettingsStore = defineStore(
       closeAction: "hide",
       rememberCloseChoice: false,
       fontFamily: "",
+      showPerformanceMonitor: false,
     });
 
     /** 播放器 */
diff --git a/src/types/settings.ts b/src/types/settings.ts
index d73336d6..c880eee8 100644
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -150,4 +150,6 @@ export interface AppearanceSettings {
   rememberCloseChoice: boolean;
   /** 全局字体 */
   fontFamily: string;
+  /** 性能监视器悬浮卡片 */
+  showPerformanceMonitor: boolean;
 }

From d8face37bda3b148c20cdc4b76a020fcae52627b Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Thu, 28 May 2026 16:26:30 +0800
Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SPerformanceMonitor.vue | 8 ++++----
 src/components/player/PlayerBar.vue    | 5 ++---
 src/i18n/locales/en-US.json            | 5 +++--
 src/i18n/locales/zh-CN.json            | 5 +++--
 src/settings/categories/general.ts     | 5 +++++
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/SPerformanceMonitor.vue b/src/components/SPerformanceMonitor.vue
index bc6806bc..f4da999d 100644
--- a/src/components/SPerformanceMonitor.vue
+++ b/src/components/SPerformanceMonitor.vue
@@ -82,7 +82,7 @@ const draw = (): void => {
   const min = m.min === Infinity ? 0 : m.min;
   const max = m.max || 1;
   const range = max - min || 1;
-  ctx.fillStyle = "rgba(255,255,255,0.85)";
+  ctx.fillStyle = getComputedStyle(canvas.value).color;
   const step = w / HISTORY_SIZE;
   for (let index = 0; index < m.history.length; index++) {
     const value = m.history[index];
@@ -179,14 +179,14 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="fixed z-9999 px-2 py-1.5 rounded-lg select-none bg-black/60 text-white backdrop-blur-md shadow-lg flex flex-col gap-1 app-no-drag"
+    class="fixed z-9999 px-2 py-1.5 rounded-lg select-none bg-surface-bright text-on-surface border border-solid border-outline-variant/30 shadow-lg flex flex-col gap-1 app-no-drag"
     :class="dragging ? 'cursor-grabbing' : 'cursor-grab'"
     :style="
       pos
         ? { top: `${pos.y}px`, left: `${pos.x}px`, right: 'auto' }
         : { top: '5rem', right: '1rem' }
     "
-    :title="`Drag to move · click to switch · ${rangeText}`"
+    :title="`click to switch · ${rangeText}`"
     @pointerdown="onPointerDown"
     @pointermove="onPointerMove"
     @pointerup="onPointerUp"
@@ -195,6 +195,6 @@ onBeforeUnmount(() => {
       <span class="text-sm font-semibold tabular-nums">{{ display }}</span>
       <span class="text-[10px] tracking-wider opacity-50">{{ label }}</span>
     </div>
-    <canvas ref="canvas" :width="74" :height="22" class="block" />
+    <canvas ref="canvas" :width="74" :height="22" class="block text-on-surface/85" />
   </div>
 </template>
diff --git a/src/components/player/PlayerBar.vue b/src/components/player/PlayerBar.vue
index 07b03826..61f14a0a 100644
--- a/src/components/player/PlayerBar.vue
+++ b/src/components/player/PlayerBar.vue
@@ -28,15 +28,14 @@ const onSeekDragEnd = (value: number): void => {
 /** 添加到歌单 */
 const pickerOpen = ref(false);
 const pickerTracks = shallowRef<Track[]>([]);
-const pickerMode = computed<ContentScope>(() =>
-  media.track?.source === "netease" ? "online" : "local",
-);
+const pickerMode = ref<ContentScope>("local");
 
 /** 歌曲菜单 */
 const { items: menuItems, handleSelect: onMenuSelect } = useTrackMenu(toRef(media, "track"), {
   hidePlayActions: true,
   onAddToPlaylist: (track) => {
     pickerTracks.value = [track];
+    pickerMode.value = track.source === "netease" ? "online" : "local";
     pickerOpen.value = true;
   },
 });
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f885212d..f0b3fe87 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -501,7 +501,8 @@
       "songCache": "Song Cache",
       "cache": "Caches",
       "database": "Database",
-      "backupReset": "Backup & Reset"
+      "backupReset": "Backup & Reset",
+      "debug": "Debug"
     },
     "language": {
       "label": "Language",
@@ -1057,7 +1058,7 @@
     },
     "showPerformanceMonitor": {
       "label": "Performance Monitor",
-      "description": "Floating widget showing FPS / frame time / memory. Click to switch, drag to move"
+      "description": "Floating widget showing FPS / frame time / memory. Click to switch"
     },
     "taskbarProgress": {
       "label": "Taskbar Progress",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 561f06f0..28222ad6 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -501,7 +501,8 @@
       "songCache": "歌曲缓存",
       "cache": "缓存",
       "database": "数据库",
-      "backupReset": "备份与重置"
+      "backupReset": "备份与重置",
+      "debug": "调试"
     },
     "language": {
       "label": "界面语言",
@@ -1057,7 +1058,7 @@
     },
     "showPerformanceMonitor": {
       "label": "性能监视器",
-      "description": "悬浮显示 FPS / 帧时间 / 内存占用，点击切换指标，拖动可调整位置"
+      "description": "悬浮显示 FPS / 帧时间 / 内存占用，点击切换指标"
     },
     "taskbarProgress": {
       "label": "任务栏播放进度",
diff --git a/src/settings/categories/general.ts b/src/settings/categories/general.ts
index b73ee72c..8ac503cb 100644
--- a/src/settings/categories/general.ts
+++ b/src/settings/categories/general.ts
@@ -52,6 +52,11 @@ const generalCategory: SettingCategory = {
           binding: { store: "settings", path: "appearance.rememberCloseChoice" },
           defaultValue: false,
         },
+      ],
+    },
+    {
+      id: "debug",
+      items: [
         {
           key: "showPerformanceMonitor",
           type: "switch",