Merge pull request #50 from ZHANGTIANYAO1/feature/design-implementation

Web UI redesign + per-platform tabs + play-next + audit fixes

.claude/settings.local.json

@@ -13,7 +13,10 @@
       "mcp__Claude_Preview__*",
       "mcp__Claude_in_Chrome__*",
       "mcp__scheduled-tasks__*",
-      "Bash(npx vitest:*)"
+      "Bash(npx vitest:*)",
+      "Bash(cp \"C:\\\\Users\\\\saopig1\\\\.claude\\\\projects\\\\C--Users-saopig1-Music-teamspeak-music-bot\\\\b5a64d6f-051e-4b87-966c-ece97d2b879b\\\\tool-results\\\\webfetch-1776569008470-exv7qe.bin\" /tmp/design.gz)",
+      "Bash(gunzip -f /tmp/design.gz)",
+      "Read(//tmp/**)"
     ],
     "deny": [
       "Bash(git push * main)",

docs/superpowers/plans/2026-05-06-music-source-tabs.md

@@ -0,0 +1,911 @@
+# Music Source Tabs Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add NetEase / QQ source-switcher tabs to Home (推荐歌单 / 每日推荐 / 我的歌单) and Library (我的歌单), with per-section persistence and graceful degradation when only one source is logged in.
+
+**Architecture:** A single shared `<SourceTabs>` Vue component handles the tab UI and self-hides when fewer than 2 sources are available. The Pinia store splits the affected fields into `{ netease, qq }` objects, fetches from both platforms in `fetchHomeData()` based on `authStatus`, and consumers select with a reactive `activeSource` ref persisted to localStorage.
+
+**Tech Stack:** Vue 3 (Composition API + `<script setup>`), Pinia, TypeScript, SCSS (CSS variables from `web/src/styles/variables.scss`).
+
+**Spec:** `docs/superpowers/specs/2026-05-06-music-source-tabs-design.md`
+
+---
+
+## File Structure
+
+**New:**
+- `web/src/components/SourceTabs.vue` — shared tab UI (presentational, no store deps)
+
+**Modified:**
+- `web/src/stores/player.ts` — state shape change + `authStatus` + `fetchHomeData` rewrite
+- `web/src/views/Home.vue` — 3 sections wired to SourceTabs
+- `web/src/views/Library.vue` — 1 section wired; remove dead `liked` block
+
+**Unchanged:**
+- Backend (already supports `?platform=qq`)
+- All other web pages
+
+---
+
+## Task 1: Build the SourceTabs component
+
+**Files:**
+- Create: `web/src/components/SourceTabs.vue`
+
+This task is fully independent of store changes — the component is presentational, takes typed props, and emits an update event. It can land and be committed alone (build will pass; component is just unused until later tasks).
+
+- [ ] **Step 1.1: Create the component file**
+
+Write `web/src/components/SourceTabs.vue`:
+
+```vue
+<template>
+  <div v-if="sources.length >= 2" class="source-tabs">
+    <button
+      v-for="src in sources"
+      :key="src"
+      type="button"
+      class="source-tab"
+      :class="{ active: src === modelValue }"
+      @click="$emit('update:modelValue', src)"
+    >
+      {{ LABELS[src] }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Source = 'netease' | 'qq';
+
+const LABELS: Record<Source, string> = {
+  netease: '网易云',
+  qq: 'QQ',
+};
+
+defineProps<{
+  modelValue: Source;
+  sources: Source[];
+}>();
+
+defineEmits<{
+  'update:modelValue': [value: Source];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.source-tabs {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: 12px;
+  align-items: center;
+}
+
+.source-tab {
+  padding: 4px 10px;
+  min-height: 28px;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: color var(--transition-fast), background var(--transition-fast);
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--hover-bg);
+  }
+
+  &.active {
+    color: var(--color-primary);
+    background: var(--color-primary-12);
+    font-weight: var(--fw-semi);
+  }
+}
+
+@media (max-width: 768px) {
+  .source-tabs {
+    margin-left: 8px;
+    gap: 2px;
+  }
+
+  .source-tab {
+    padding: 6px 10px;
+    min-height: 36px; // larger touch target on mobile
+    font-size: var(--fs-xs);
+  }
+}
+</style>
+```
+
+Why these choices:
+- `v-if="sources.length >= 2"` — auto-hide when only one source available; parent doesn't need wrapper logic
+- Min-height 28px desktop / 36px mobile — comfortable touch on phones
+- `--color-primary-12` (12% primary tint) — matches existing active-state pattern in the codebase
+- No `--brand-netease/qq` in active state — keeps tab visually consistent regardless of which platform; brand colors are reserved for SongCard platform badges where they identify content origin
+
+- [ ] **Step 1.2: Verify it imports cleanly via type check**
+
+Run from project root:
+
+```
+npx tsc --noEmit
+```
+
+Expected: exit code 0, no output.
+
+Then verify the web project also type-checks:
+
+```
+cd web && npx vue-tsc --noEmit && cd ..
+```
+
+Expected: exit code 0, no output.
+
+- [ ] **Step 1.3: Commit**
+
+```
+git add web/src/components/SourceTabs.vue
+git commit -m "feat(web): add SourceTabs component for platform switcher
+
+Presentational component for switching between netease and qq music
+sources. Auto-hides when fewer than 2 sources are passed in. Mobile
+breakpoint enlarges touch target to 36px.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+## Task 2: Refactor the store (state + fetchHomeData)
+
+**Files:**
+- Modify: `web/src/stores/player.ts`
+
+This task changes types, which will break Home.vue and Library.vue at compile time. **Do not run tsc/build between Task 2 and Task 4** — they are migrated in a single coherent commit. After Task 4, type-check confirms the whole change.
+
+- [ ] **Step 2.1: Add the `Source` type alias and update state shape**
+
+In `web/src/stores/player.ts`, locate the `state: () => ({ ... })` block (around line 47-63).
+
+**Find:**
+
+```ts
+    // Home page cache
+    recommendPlaylists: [] as PlaylistItem[],
+    dailySongs: [] as Song[],
+    userPlaylists: [] as PlaylistItem[],
+    bilibiliPopular: [] as Song[],
+    lastFetchTime: 0,
+```
+
+**Replace with:**
+
+```ts
+    // Home page cache, split by source
+    recommendPlaylists: { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
+    dailySongs:         { netease: [] as Song[],         qq: [] as Song[] },
+    userPlaylists:      { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
+    bilibiliPopular: [] as Song[],
+    authStatus: { netease: false, qq: false },
+    lastFetchTime: 0,
+```
+
+Also add this exported type at the top of the file, right after the existing `Song` interface (around line 12):
+
+```ts
+export type Source = 'netease' | 'qq';
+```
+
+- [ ] **Step 2.2: Rewrite `fetchHomeData()`**
+
+In the same file, find the `fetchHomeData` action (around line 352-378).
+
+**Replace the entire action body with:**
+
+```ts
+    async fetchHomeData() {
+      if (this.lastFetchTime > 0 && Date.now() - this.lastFetchTime < HOME_CACHE_TTL) {
+        return;
+      }
+
+      // 1. Fetch auth status for both platforms first.
+      const [neAuthRes, qqAuthRes] = await Promise.allSettled([
+        axios.get('/api/auth/status', { params: { platform: 'netease' } }),
+        axios.get('/api/auth/status', { params: { platform: 'qq' } }),
+      ]);
+      this.authStatus.netease =
+        neAuthRes.status === 'fulfilled' && !!neAuthRes.value.data?.loggedIn;
+      this.authStatus.qq =
+        qqAuthRes.status === 'fulfilled' && !!qqAuthRes.value.data?.loggedIn;
+
+      // 2. NetEase data: recommend playlists work anonymously; daily/user
+      // playlists need login but Promise.allSettled isolates failures.
+      const neteasePromises = [
+        axios.get('/api/music/recommend/playlists', { params: { platform: 'netease' } }),
+        axios.get('/api/music/recommend/songs',     { params: { platform: 'netease' } }),
+        axios.get('/api/music/user/playlists',      { params: { platform: 'netease' } }),
+      ];
+
+      // 3. QQ data: only fetch when QQ is logged in. When not logged in,
+      // resolve to empty payloads so the same indexed handling works.
+      const emptyPlaylists = { data: { playlists: [] } };
+      const emptySongs     = { data: { songs: [] } };
+      const qqPromises = this.authStatus.qq
+        ? [
+            axios.get('/api/music/recommend/playlists', { params: { platform: 'qq' } }),
+            axios.get('/api/music/recommend/songs',     { params: { platform: 'qq' } }),
+            axios.get('/api/music/user/playlists',      { params: { platform: 'qq' } }),
+          ]
+        : [
+            Promise.resolve(emptyPlaylists),
+            Promise.resolve(emptySongs),
+            Promise.resolve(emptyPlaylists),
+          ];
+
+      const biliPromise = axios.get('/api/music/bilibili/popular?limit=12');
+
+      const results = await Promise.allSettled([
+        ...neteasePromises,
+        ...qqPromises,
+        biliPromise,
+      ]);
+
+      const [neRecPL, neDaily, neUserPL, qqRecPL, qqDaily, qqUserPL, bili] = results;
+
+      if (neRecPL.status === 'fulfilled') {
+        this.recommendPlaylists.netease = neRecPL.value.data.playlists ?? [];
+      }
+      if (neDaily.status === 'fulfilled') {
+        this.dailySongs.netease = neDaily.value.data.songs ?? [];
+      }
+      if (neUserPL.status === 'fulfilled') {
+        this.userPlaylists.netease = neUserPL.value.data.playlists ?? [];
+      }
+      if (qqRecPL.status === 'fulfilled') {
+        this.recommendPlaylists.qq = qqRecPL.value.data.playlists ?? [];
+      }
+      if (qqDaily.status === 'fulfilled') {
+        this.dailySongs.qq = qqDaily.value.data.songs ?? [];
+      }
+      if (qqUserPL.status === 'fulfilled') {
+        this.userPlaylists.qq = qqUserPL.value.data.playlists ?? [];
+      }
+      if (bili.status === 'fulfilled') {
+        this.bilibiliPopular = bili.value.data.songs ?? [];
+      }
+
+      this.lastFetchTime = Date.now();
+    },
+```
+
+**Do NOT type-check yet** — Home/Library still reference the old shape. They'll be migrated in Tasks 3 and 4.
+
+---
+
+## Task 3: Migrate Home.vue to multi-source tabs
+
+**Files:**
+- Modify: `web/src/views/Home.vue`
+
+- [ ] **Step 3.1: Add a localStorage helper module**
+
+Create `web/src/stores/sourceTabs.ts`:
+
+```ts
+import type { Source } from './player.js';
+
+const STORAGE_KEY = 'source-tabs';
+
+export type TabKey =
+  | 'home.recommend'
+  | 'home.daily'
+  | 'home.user'
+  | 'library.user';
+
+function readAll(): Partial<Record<TabKey, Source>> {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return typeof parsed === 'object' && parsed !== null ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+export function loadTabSource(key: TabKey, fallback: Source = 'netease'): Source {
+  const all = readAll();
+  const v = all[key];
+  return v === 'netease' || v === 'qq' ? v : fallback;
+}
+
+export function saveTabSource(key: TabKey, value: Source): void {
+  try {
+    const all = readAll();
+    all[key] = value;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
+  } catch {
+    // localStorage may be unavailable (private browsing); silently no-op
+  }
+}
+```
+
+This is a separate file rather than inline so Library can reuse it without duplication.
+
+- [ ] **Step 3.2: Update Home.vue template**
+
+Replace the three `<section>` blocks (推荐歌单 / 每日推荐 / 我的歌单) and the `<script setup>` block.
+
+**Find** the entire `<template>` 推荐歌单 section (currently around lines 53-67):
+
+```vue
+    <!-- 推荐歌单 -->
+    <section class="section" v-if="store.recommendPlaylists.length > 0">
+      <h2 class="section-title">推荐歌单</h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="playlist in store.recommendPlaylists"
+          :key="playlist.id"
+          :to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="playlist.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ playlist.name }}</div>
+        </RouterLink>
+      </div>
+    </section>
+```
+
+**Replace with:**
+
+```vue
+    <!-- 推荐歌单 -->
+    <section class="section" v-if="recommendAvailable.length > 0">
+      <h2 class="section-title">
+        推荐歌单
+        <SourceTabs v-model="recommendSource" :sources="recommendAvailable" />
+      </h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="playlist in (store.recommendPlaylists[recommendSourceSafe] ?? [])"
+          :key="playlist.id"
+          :to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="playlist.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ playlist.name }}</div>
+        </RouterLink>
+      </div>
+    </section>
+```
+
+**Find** the 每日推荐 section (currently around lines 36-51):
+
+```vue
+    <!-- 每日推荐 -->
+    <section class="section" v-if="store.dailySongs.length > 0">
+      <h2 class="section-title">每日推荐</h2>
+      <div class="daily-grid">
+        <div
+          v-for="song in store.dailySongs.slice(0, 12)"
+          :key="song.id"
+          class="daily-card hover-scale"
+          @click="store.playSong(song)"
+        >
+          <CoverArt :url="song.coverUrl" :size="120" :radius="10" :show-shadow="true" />
+          <div class="daily-name">{{ song.name }}</div>
+          <div class="daily-artist">{{ song.artist }}</div>
+        </div>
+      </div>
+    </section>
+```
+
+**Replace with:**
+
+```vue
+    <!-- 每日推荐 -->
+    <section class="section" v-if="dailyAvailable.length > 0">
+      <h2 class="section-title">
+        每日推荐
+        <SourceTabs v-model="dailySource" :sources="dailyAvailable" />
+      </h2>
+      <div class="daily-grid">
+        <div
+          v-for="song in (store.dailySongs[dailySourceSafe] ?? []).slice(0, 12)"
+          :key="song.id"
+          class="daily-card hover-scale"
+          @click="store.playSong(song)"
+        >
+          <CoverArt :url="song.coverUrl" :size="120" :radius="10" :show-shadow="true" />
+          <div class="daily-name">{{ song.name }}</div>
+          <div class="daily-artist">{{ song.artist }}</div>
+        </div>
+      </div>
+    </section>
+```
+
+**Find** the 我的歌单 section (currently around lines 69-95):
+
+```vue
+    <!-- 我的歌单 -->
+    <section class="section" v-if="store.userPlaylists.length > 0">
+      <h2 class="section-title">
+        我的歌单
+        <span class="section-count">{{ store.userPlaylists.length }}</span>
+      </h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="pl in visibleUserPlaylists"
+          :key="pl.id"
+          :to="`/playlist/${pl.id}?platform=${pl.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ pl.name }}</div>
+          <div class="playlist-count">{{ pl.songCount }} 首</div>
+        </RouterLink>
+      </div>
+      <button
+        v-if="store.userPlaylists.length > USER_PLAYLIST_LIMIT"
+        class="expand-btn"
+        @click="userPlaylistsExpanded = !userPlaylistsExpanded"
+      >
+        <Icon :icon="userPlaylistsExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
+        {{ userPlaylistsExpanded ? '收起' : `展开全部 ${store.userPlaylists.length} 个歌单` }}
+      </button>
+    </section>
+```
+
+**Replace with:**
+
+```vue
+    <!-- 我的歌单 -->
+    <section class="section" v-if="userAvailable.length > 0">
+      <h2 class="section-title">
+        我的歌单
+        <span class="section-count">{{ currentUserPlaylists.length }}</span>
+        <SourceTabs v-model="userSource" :sources="userAvailable" />
+      </h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="pl in visibleUserPlaylists"
+          :key="pl.id"
+          :to="`/playlist/${pl.id}?platform=${pl.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ pl.name }}</div>
+          <div class="playlist-count">{{ pl.songCount }} 首</div>
+        </RouterLink>
+      </div>
+      <button
+        v-if="currentUserPlaylists.length > USER_PLAYLIST_LIMIT"
+        class="expand-btn"
+        @click="userPlaylistsExpanded = !userPlaylistsExpanded"
+      >
+        <Icon :icon="userPlaylistsExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
+        {{ userPlaylistsExpanded ? '收起' : `展开全部 ${currentUserPlaylists.length} 个歌单` }}
+      </button>
+    </section>
+```
+
+- [ ] **Step 3.3: Update Home.vue `<script setup>`**
+
+**Find** the `<script setup lang="ts">` block (currently around lines 119-153):
+
+```ts
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import axios from 'axios';
+import { usePlayerStore, type Song } from '../stores/player.js';
+import CoverArt from '../components/CoverArt.vue';
+
+const store = usePlayerStore();
+const USER_PLAYLIST_LIMIT = 20;
+const userPlaylistsExpanded = ref(false);
+const visibleUserPlaylists = computed(() =>
+  userPlaylistsExpanded.value
+    ? store.userPlaylists
+    : store.userPlaylists.slice(0, USER_PLAYLIST_LIMIT)
+);
+
+async function playFm() {
+  try {
+    const res = await axios.get('/api/music/personal/fm');
+    const songs: Song[] = res.data.songs;
+    if (songs.length > 0) {
+      await store.play(songs[0].name, songs[0].platform);
+      for (let i = 1; i < songs.length; i++) {
+        await store.addToQueue(songs[i].name, songs[i].platform);
+      }
+    }
+  } catch {
+    // Ignore
+  }
+}
+
+onMounted(() => {
+  store.fetchHomeData();
+});
+</script>
+```
+
+**Replace with:**
+
+```ts
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import axios from 'axios';
+import { usePlayerStore, type Song, type Source } from '../stores/player.js';
+import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
+import CoverArt from '../components/CoverArt.vue';
+import SourceTabs from '../components/SourceTabs.vue';
+
+const store = usePlayerStore();
+const USER_PLAYLIST_LIMIT = 20;
+const userPlaylistsExpanded = ref(false);
+
+// Available sources per section. Recommend playlists are public for both
+// platforms — netease always; qq only when logged in. Daily and user
+// playlists need login on both sides.
+const recommendAvailable = computed<Source[]>(() => {
+  const s: Source[] = ['netease'];
+  if (store.authStatus.qq) s.push('qq');
+  return s;
+});
+const dailyAvailable = computed<Source[]>(() => {
+  const s: Source[] = [];
+  if (store.authStatus.netease) s.push('netease');
+  if (store.authStatus.qq) s.push('qq');
+  return s;
+});
+const userAvailable = computed<Source[]>(() => {
+  const s: Source[] = [];
+  if (store.authStatus.netease) s.push('netease');
+  if (store.authStatus.qq) s.push('qq');
+  return s;
+});
+
+// Persisted active source per section.
+const recommendSource = ref<Source>(loadTabSource('home.recommend'));
+const dailySource     = ref<Source>(loadTabSource('home.daily'));
+const userSource      = ref<Source>(loadTabSource('home.user'));
+
+watch(recommendSource, (v) => saveTabSource('home.recommend', v));
+watch(dailySource,     (v) => saveTabSource('home.daily',     v));
+watch(userSource,      (v) => saveTabSource('home.user',      v));
+
+// Fallback when persisted source is no longer available (e.g. user logged
+// out of QQ since last visit). We render against `*Safe` but never write
+// back, so the user's preference is preserved for when they log in again.
+const recommendSourceSafe = computed<Source>(() =>
+  recommendAvailable.value.includes(recommendSource.value)
+    ? recommendSource.value
+    : recommendAvailable.value[0] ?? 'netease'
+);
+const dailySourceSafe = computed<Source>(() =>
+  dailyAvailable.value.includes(dailySource.value)
+    ? dailySource.value
+    : dailyAvailable.value[0] ?? 'netease'
+);
+const userSourceSafe = computed<Source>(() =>
+  userAvailable.value.includes(userSource.value)
+    ? userSource.value
+    : userAvailable.value[0] ?? 'netease'
+);
+
+const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
+const visibleUserPlaylists = computed(() =>
+  userPlaylistsExpanded.value
+    ? currentUserPlaylists.value
+    : currentUserPlaylists.value.slice(0, USER_PLAYLIST_LIMIT)
+);
+
+async function playFm() {
+  try {
+    const res = await axios.get('/api/music/personal/fm');
+    const songs: Song[] = res.data.songs;
+    if (songs.length > 0) {
+      await store.play(songs[0].name, songs[0].platform);
+      for (let i = 1; i < songs.length; i++) {
+        await store.addToQueue(songs[i].name, songs[i].platform);
+      }
+    }
+  } catch {
+    // Ignore
+  }
+}
+
+onMounted(() => {
+  store.fetchHomeData();
+});
+</script>
+```
+
+Note: The 我的歌单 template uses `userSource` (not `userSourceSafe`) on the `<SourceTabs>` v-model so the user's click maps directly to the persisted ref. The grid below the tabs uses `currentUserPlaylists` which derives from `userSourceSafe`, so even if `userSource` points at an unavailable platform momentarily, the grid still renders something sensible. Same pattern for 推荐歌单 / 每日推荐.
+
+---
+
+## Task 4: Migrate Library.vue and remove dead code
+
+**Files:**
+- Modify: `web/src/views/Library.vue`
+
+- [ ] **Step 4.1: Replace the template**
+
+**Find** the `<template>` block (currently lines 1-64) and **replace the entire template with:**
+
+```vue
+<template>
+  <div class="library-page">
+    <h1 class="page-title">音乐库</h1>
+
+    <!-- 我的歌单 -->
+    <section class="section" v-if="userAvailable.length > 0">
+      <h2 class="section-title">
+        我的歌单
+        <span class="section-count">{{ currentUserPlaylists.length }}</span>
+        <SourceTabs v-model="userSource" :sources="userAvailable" />
+      </h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="pl in currentUserPlaylists"
+          :key="pl.id"
+          :to="`/playlist/${pl.id}?platform=${pl.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ pl.name }}</div>
+          <div class="playlist-count">{{ pl.songCount }} 首</div>
+        </RouterLink>
+      </div>
+    </section>
+
+    <!-- 最近播放 -->
+    <section class="section">
+      <h2 class="section-title">最近播放</h2>
+      <div v-if="historyLoading" class="loading">加载中...</div>
+      <div v-else-if="history.length === 0" class="empty">暂无播放记录</div>
+      <div v-else class="song-list">
+        <SongCard
+          v-for="(song, i) in history.slice(0, 10)"
+          :key="`hist-${song.id}-${i}`"
+          :song="song"
+          :index="i + 1"
+          :active="store.currentSong?.id === song.id"
+          @play="store.play(song.name, song.platform)"
+          @add="store.addToQueue(song.name, song.platform)"
+        />
+      </div>
+    </section>
+
+    <div v-if="!historyLoading && userAvailable.length === 0 && history.length === 0" class="empty-state">
+      <Icon icon="mdi:music-box-outline" class="empty-icon" />
+      <div>登录网易云或QQ音乐后，这里将显示你的歌单和播放记录</div>
+    </div>
+  </div>
+</template>
+```
+
+Changes from the previous version:
+- "我的歌单" section: same data binding pattern as Home (`userAvailable`, `currentUserPlaylists`, `<SourceTabs>`)
+- "我的收藏" section: removed entirely (the `/api/music/user/liked` endpoint never existed)
+- Empty state condition: replaced `liked.length === 0` with `userAvailable.length === 0`
+
+- [ ] **Step 4.2: Replace the script block**
+
+**Find** the `<script setup lang="ts">` block (currently lines 66-105) and **replace with:**
+
+```ts
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import axios from 'axios';
+import { usePlayerStore, type Song, type Source } from '../stores/player.js';
+import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
+import CoverArt from '../components/CoverArt.vue';
+import SongCard from '../components/SongCard.vue';
+import SourceTabs from '../components/SourceTabs.vue';
+
+const store = usePlayerStore();
+
+const history = ref<Song[]>([]);
+const historyLoading = ref(true);
+
+const userAvailable = computed<Source[]>(() => {
+  const s: Source[] = [];
+  if (store.authStatus.netease) s.push('netease');
+  if (store.authStatus.qq) s.push('qq');
+  return s;
+});
+
+const userSource = ref<Source>(loadTabSource('library.user'));
+watch(userSource, (v) => saveTabSource('library.user', v));
+
+const userSourceSafe = computed<Source>(() =>
+  userAvailable.value.includes(userSource.value)
+    ? userSource.value
+    : userAvailable.value[0] ?? 'netease'
+);
+
+const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
+
+onMounted(async () => {
+  if (!store.activeBotId) {
+    await store.fetchBots();
+  }
+
+  store.fetchHomeData();
+
+  if (store.activeBotId) {
+    try {
+      const res = await axios.get(`/api/player/${store.activeBotId}/history`);
+      history.value = res.data.history ?? [];
+    } catch {
+      // API may not be ready
+    }
+  }
+
+  historyLoading.value = false;
+});
+</script>
+```
+
+Changes:
+- Removed `liked` ref and the `/api/music/user/liked` axios call
+- Added auth-driven `userAvailable`, persisted `userSource`, and `currentUserPlaylists` computed
+- Imports `Source` type and `SourceTabs` component
+
+- [ ] **Step 4.3: Style — `.section-title` already supports inline children**
+
+The existing `.section-title` style (Library.vue and Home.vue both) already uses `display: flex; align-items: center; gap: 8px;`. SourceTabs uses `display: inline-flex` with its own `margin-left`, so it sits inline with the title and count. **No style changes are required in either Home.vue or Library.vue.**
+
+---
+
+## Task 5: Verify the build and types
+
+- [ ] **Step 5.1: Run TypeScript backend type check**
+
+```
+npx tsc --noEmit
+```
+
+Expected: exit code 0, no output. (No backend files were touched.)
+
+- [ ] **Step 5.2: Run web type check + production build**
+
+```
+npm run build:web
+```
+
+Expected: build completes with `✓ built in N.NNs` and no TypeScript errors. The script runs `vue-tsc --noEmit && vite build`, so failures here mean a type or template error in our changes.
+
+- [ ] **Step 5.3: Run the existing test suite to confirm no regression**
+
+```
+npm test
+```
+
+Expected: same baseline as before this feature (`Test Files 2 failed | 26 passed (28)`, `Tests 2 failed | 161 passed (163)`). The 2 pre-existing failures are in `dist/` and `.claude/worktrees/` and are unrelated to our changes — they should remain at exactly 2.
+
+If any **source-tree** test fails (anything not in `dist/` or `.claude/worktrees/`), stop and investigate.
+
+---
+
+## Task 6: Manual smoke test on the dev server
+
+This task verifies behavior the type system can't catch.
+
+- [ ] **Step 6.1: Start the dev server**
+
+```
+npm run dev
+```
+
+Wait for `Web server started` and `WebUI: http://localhost:3000` log lines.
+
+- [ ] **Step 6.2: Test scenario A — only NetEase logged in**
+
+Open http://localhost:3000 in a browser. Confirm:
+
+- 推荐歌单 section displays NetEase playlists, **no tab bar visible** (single source, SourceTabs auto-hidden)
+- 每日推荐 section: visible only if NetEase login provides daily songs; **no tab bar**
+- 我的歌单 section: visible if NetEase has user playlists; **no tab bar**
+- Navigate to `/library`: 我的歌单 section: same — no tab bar, NetEase playlists shown
+
+Open DevTools → Application → Local Storage → `localhost:3000` → `source-tabs` should be absent or `{}` (no clicks happened).
+
+- [ ] **Step 6.3: Test scenario B — both NetEase and QQ logged in**
+
+If QQ is not logged in, log in via Settings → QQ Music → 扫码登录.
+
+Hard reload the browser (Cmd/Ctrl+Shift+R) to bypass the 5-min `lastFetchTime` cache.
+
+Confirm:
+
+- 推荐歌单: tab bar shows `[网易云] [QQ]`, NetEase active by default
+- Click `QQ` — playlist grid switches to QQ data, no flicker (data already in store)
+- Click `网易云` — back to NetEase
+- Same for 每日推荐 and 我的歌单
+- Navigate to `/library`, confirm 我的歌单 has its own tab bar with independent state
+- Reload the page — Home tabs and Library tab persist their last-selected source independently
+
+Check `localStorage['source-tabs']`: should contain JSON with up to 4 keys (`home.recommend`, `home.daily`, `home.user`, `library.user`).
+
+- [ ] **Step 6.4: Test scenario C — fallback when persisted source becomes unavailable**
+
+While logged into both:
+1. On Home, switch 推荐歌单 to `QQ`. Confirm `localStorage['source-tabs']['home.recommend'] === 'qq'`.
+2. Go to Settings → log out of QQ.
+3. Hard-reload Home.
+
+Confirm:
+- 推荐歌单 tab bar disappears (only NetEase available)
+- Grid shows NetEase playlists (graceful fallback via `recommendSourceSafe`)
+- `localStorage['source-tabs']['home.recommend']` is **still `'qq'`** (preference preserved)
+4. Log back into QQ → reload → 推荐歌单 grid is QQ again (preference restored)
+
+- [ ] **Step 6.5: Test mobile layout**
+
+Open DevTools → Toggle device toolbar → set width to 375px (iPhone SE).
+
+Confirm on Home and Library:
+- Section title + tab bar fit on the same line without overflow
+- Tab buttons are at least 36px tall (use Inspect → check computed `min-height`)
+- Tabs are tappable (clicking still switches sources)
+
+- [ ] **Step 6.6: Stop the dev server**
+
+Kill the `npm run dev` process.
+
+---
+
+## Task 7: Final commit
+
+- [ ] **Step 7.1: Stage and commit Task 2 + 3 + 4 changes**
+
+```
+git add web/src/stores/player.ts web/src/stores/sourceTabs.ts web/src/views/Home.vue web/src/views/Library.vue
+git status
+```
+
+Expected `git status` output: 4 modified/new files staged, working tree otherwise clean (apart from pre-existing `.claude/worktrees/` and `test-ts6-version.cjs` untracked).
+
+```
+git commit -m "feat(web): per-platform source tabs on Home and Library
+
+Recommend playlists, daily songs, and user playlists on Home now show
+a [网易云][QQ] tab when both platforms are logged in. Library 我的歌单
+gets the same tab. Selection persists per-section in localStorage and
+falls back gracefully when the persisted source becomes unavailable
+(e.g., user logged out). Removes dead 我的收藏 block from Library that
+referenced a non-existent /api/music/user/liked endpoint.
+
+Spec: docs/superpowers/specs/2026-05-06-music-source-tabs-design.md
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+- [ ] **Step 7.2: Verify commit landed**
+
+```
+git log --oneline -3
+```
+
+Expected:
+```
+<sha> feat(web): per-platform source tabs on Home and Library
+<sha> feat(web): add SourceTabs component for platform switcher
+<sha> docs: spec for multi-source tabs on Home and Library
+```
+
+---
+
+## Done
+
+The branch should now have 3 new commits on top of the merge commit, all green builds and tests, and the feature working in dev mode.

docs/superpowers/specs/2026-05-06-music-source-tabs-design.md

@@ -0,0 +1,189 @@
+# Multi-Source Tabs for Recommend / User Playlists / Daily Songs
+
+**Date:** 2026-05-06
+**Status:** Spec — pending implementation
+
+## Problem
+
+Home 和 Library 页面的"推荐歌单 / 每日推荐 / 我的歌单"这三类内容当前硬编码只走网易云。当用户同时登录了网易云和 QQ 音乐时，无法在 Web UI 上看到 QQ 侧的对应内容、也无法切换查看。
+
+## Goal
+
+在以下 4 个 section 上提供"网易云 / QQ"来源切换 tab，桌面端和移动端均可用：
+
+- `Home.vue` — 推荐歌单
+- `Home.vue` — 每日推荐
+- `Home.vue` — 我的歌单
+- `Library.vue` — 我的歌单
+
+切换为纯前端动作（数据已预先 fetch），无加载闪烁。各 section 的选择独立持久化。
+
+## Out of Scope
+
+- 私人 FM（QQ 无对应概念）
+- B 站热门（独立第三来源，不属于网易/QQ 切换语义）
+- 最近播放（bot 维度的播放历史，与音乐源无关）
+- Library 现有的"我的收藏"段落 —— 当前调用的 `/api/music/user/liked` 端点不存在，是死代码，本次顺手移除
+- 登录状态实时同步（用户在 Settings 登录后需手动刷新 Home/Library 才能看到 QQ tab）
+- Tab 排序、隐藏、拖动等高级配置
+
+## Non-functional Constraints
+
+- 桌面端（>768px）和移动端（≤768px）布局均可用，tab 与 section title 同行排布；空间不足时允许 flex-wrap
+- Tab 触控区域有效高度 ≥36px
+- 现有 5 分钟 home data cache 行为保留
+- 不引入新的后端端点（后端已通过 `?platform=` 参数支持多源）
+
+## Architecture
+
+### 数据层（`web/src/stores/player.ts`）
+
+字段从单平台改为按 platform 切分：
+
+```ts
+// 前
+recommendPlaylists: PlaylistItem[]
+userPlaylists:      PlaylistItem[]
+dailySongs:         Song[]
+
+// 后
+recommendPlaylists: { netease: PlaylistItem[]; qq: PlaylistItem[] }
+userPlaylists:      { netease: PlaylistItem[]; qq: PlaylistItem[] }
+dailySongs:         { netease: Song[];         qq: Song[] }
+
+// 新增
+authStatus: { netease: boolean; qq: boolean }
+```
+
+`fetchHomeData()` 改写：
+
+1. 并发调用 `/api/auth/status?platform=netease` 与 `?platform=qq`，写入 `authStatus`
+2. 网易云的三类数据照常 fetch（推荐歌单匿名可访问；每日推荐和我的歌单需登录，未登录时 API 自然返回空或失败，`Promise.allSettled` 已隔离）
+3. QQ 的三类数据**仅在 QQ 登录时** fetch，未登录则为空数组
+4. B 站热门保持原样
+5. 5 分钟缓存 TTL 不变
+
+### UI 组件
+
+新增 `web/src/components/SourceTabs.vue`：
+
+```vue
+<SourceTabs v-model="activeSource" :sources="availableSources" />
+```
+
+Props：
+- `sources: ('netease' | 'qq')[]` — 由父组件根据 auth 状态过滤后传入
+- `modelValue: 'netease' | 'qq'` — v-model 绑定
+
+行为：
+- `sources.length < 2` 时组件**自身不渲染**（返回空），父组件无需 v-if 包装
+- 文字标签：`{ netease: '网易云', qq: 'QQ' }`
+- 视觉：水平排列，激活态用主色（`var(--color-primary)`）下划线 + 加粗，未激活态使用次要文字色
+- 紧贴 section-title 右侧，使用 `display: inline-flex`，移动端 padding/font-size 缩小
+
+### 各 section 接入模板
+
+```vue
+<section v-if="recommendAvailable.length > 0" class="section">
+  <h2 class="section-title">
+    推荐歌单
+    <SourceTabs v-model="recommendSource" :sources="recommendAvailable" />
+  </h2>
+  <div class="playlist-grid">
+    <RouterLink
+      v-for="pl in store.recommendPlaylists[recommendSource]"
+      :key="pl.id"
+      :to="`/playlist/${pl.id}?platform=${pl.platform}`"
+      class="playlist-card hover-scale"
+    >
+      <CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+      <div class="playlist-name">{{ pl.name }}</div>
+    </RouterLink>
+  </div>
+</section>
+```
+
+每个 section 在 `<script setup>` 维护两个值：
+
+- `recommendSource: Ref<'netease' | 'qq'>` — 当前选中
+- `recommendAvailable: ComputedRef<('netease' | 'qq')[]>` — 该 section 在当前登录状态下有哪些 source 可选
+
+`recommendAvailable` 计算规则：
+
+| Section | netease 加入条件 | qq 加入条件 |
+|---|---|---|
+| Home 推荐歌单 | 总是（公开数据） | `authStatus.qq` |
+| Home 每日推荐 | `authStatus.netease` | `authStatus.qq` |
+| Home 我的歌单 | `authStatus.netease` | `authStatus.qq` |
+| Library 我的歌单 | `authStatus.netease` | `authStatus.qq` |
+
+#### "我的歌单"展开按钮兼容
+
+Home 的"我的歌单"现有 `USER_PLAYLIST_LIMIT = 20` 折叠/展开。改造后：
+
+```ts
+const visibleUserPlaylists = computed(() => {
+  const all = store.userPlaylists[userSource.value] ?? [];
+  return userPlaylistsExpanded.value ? all : all.slice(0, USER_PLAYLIST_LIMIT);
+});
+```
+
+切换 source 时折叠态保留（不需 reset）。
+
+### 持久化
+
+localStorage 键统一为一个 JSON：
+
+```
+key:   "source-tabs"
+value: {
+  "home.recommend": "qq",
+  "home.daily":     "netease",
+  "home.user":      "qq",
+  "library.user":   "netease"
+}
+```
+
+读：组件 mount 时一次性读 + 解析。
+写：在 v-model 的 setter 里 `watch` 一次写回。
+不存在的键 / 解析失败 / 老用户没这个 key —— 默认值 `"netease"`。
+
+### 边界与回退
+
+| 情况 | 行为 |
+|---|---|
+| 选的 source 不在 `available` 里（例：选了 QQ，登出后回到页面） | 渲染时 fallback 到 `available[0]`，不修改 localStorage（保留用户偏好，下次登回来仍生效） |
+| `recommendPlaylists.qq` 为空数组（API 失败 or 无数据） | tab 仍可切，切过去显示空 grid（无错误提示，符合现有"空数据隐藏 section"语义；section 顶层 v-if 检查的是 `available.length > 0`，单 platform 数据为空不影响 section 显隐） |
+| QQ provider 不支持 `getDailyRecommendSongs`（501） | `Promise.allSettled` 已捕获，`dailySongs.qq` 保持 `[]`，等同上一行 |
+| 用户在 Settings 登录 QQ 后切回 Home | 不自动 refetch / 不自动出 tab —— 用户需手动刷新页面（保留 5 分钟缓存语义） |
+| 网易云和 QQ 都没登录 | `available` 为空时 section 隐藏（沿用现有逻辑） |
+| Library "我的收藏" 段落 | 整段移除（含 template、script 中的 `liked` ref、对应 axios 调用） |
+
+## 修改文件清单
+
+新增：
+- `web/src/components/SourceTabs.vue` — 共享 tab 组件
+
+修改：
+- `web/src/stores/player.ts` — 多平台 state、`authStatus`、`fetchHomeData` 重写
+- `web/src/views/Home.vue` — 三个 section 接入 SourceTabs，对应 ref + computed
+- `web/src/views/Library.vue` — 我的歌单接入 SourceTabs；移除我的收藏死代码
+
+不改：
+- 后端（API 已支持 `?platform=`）
+- `Search.vue` / `Playlist.vue` / `Settings.vue` 等其他页面
+
+## 测试方案
+
+- 手动：在两种登录组合下访问 Home 和 Library，验证 tab 显隐、切换、刷新后持久化
+  - 仅网易登录 → 不显示 tab
+  - 两边登录 → 显示 tab，切换后刷新页面来源不变
+  - QQ 登录 → 网易登出 → 网易 tab 消失，若上次选的是网易则 fallback 到 QQ
+- 移动端（DevTools 768px 以下）：tab 与 section-title 同行不溢出，触控区域可点
+- TypeScript 类型检查通过：`npx tsc --noEmit` + `npm run build:web`
+- 单元测试：现有 vitest 套件不应回归（store 改动不破坏其他用法）
+
+## 风险
+
+- store 字段类型变更（数组 → 对象）会影响所有读取这三个字段的地方。需 grep 确认没有遗漏的消费者。
+- localStorage 解析失败的容错必须周全，避免一次脏数据导致整个页面白屏。

docs/superpowers/specs/2026-05-06-prev-history-and-play-next-design.md

@@ -0,0 +1,226 @@
+# History-aware `prev` + "Play Next" Insert
+
+**Date:** 2026-05-06
+**Status:** Spec — pending implementation
+
+## Problem
+
+Two queue/playback gaps surfaced in real use:
+
+1. In `PlayMode.Random` and `PlayMode.RandomLoop`, `!prev` does not play the
+   actually-previously-played song. It just walks `currentIndex - 1` in the
+   underlying array — but in random modes `currentIndex` jumps non-sequentially,
+   so the "previous" array slot has no relationship to play history.
+
+2. `!add` / web "添加到队列" appends to the queue tail. There is no way to
+   say "play this song right after the current one." Users want a "下一首
+   播放" affordance comparable to Spotify "Add to Queue (next up)" or Apple
+   Music "Play Next".
+
+## Goals
+
+- `prev` walks back through the actual play history regardless of mode.
+- A new "Play Next" path inserts a song at `currentIndex + 1`, available
+  via web UI button and TS3 chat command.
+- Both features are usable on desktop and mobile web.
+
+## Out of Scope
+
+- Forward/redo through prev'd songs (user would need to push next manually,
+  which picks a fresh random in random modes — acceptable simplification).
+- Reordering songs already in the queue ("move to next" inside Queue.vue).
+- Persisting play history across bot restarts (in-memory only).
+
+## Non-functional Constraints
+
+- History capped at 50 entries to bound memory.
+- `addNext` must keep `playedIndices` and `history` index references valid
+  after insertion (shift all indices > current by +1).
+- New Toast UX from the previous round still applies (failures surface).
+- TypeScript and existing test suite must not regress.
+
+## Architecture
+
+### A. History-aware `prev`
+
+**`src/audio/queue.ts`** — `PlayQueue` gains a back-stack:
+
+```ts
+private history: number[] = [];
+private static readonly HISTORY_LIMIT = 50;
+
+private pushHistory(idx: number): void {
+  if (idx < 0) return;
+  this.history.push(idx);
+  if (this.history.length > PlayQueue.HISTORY_LIMIT) {
+    this.history.shift();
+  }
+}
+```
+
+Mutators call `pushHistory(this.currentIndex)` **before** changing `currentIndex`:
+
+| Method | History action |
+|---|---|
+| `play()` | `this.history = []` (fresh playback) |
+| `playAt(idx)` | `pushHistory(currentIndex)`, then set `currentIndex = idx` |
+| `next()` | `pushHistory(currentIndex)`, then advance per mode |
+| `prev()` | **Pop** from history → `currentIndex = popped`. If empty, fall back to existing `currentIndex - 1` (which keeps Sequential's wrap behavior; Random returns null). `prev` itself does NOT push to history. |
+| `clear()` | `this.history = []` |
+| `setMode(m)` | `this.history = []` (mode change resets context) |
+| `remove(idx)` | Drop matching entries from history; shift any entry `> idx` by `-1`. Same logic as the existing `playedIndices` rebuild. |
+
+**`prev()` rewrite:**
+
+```ts
+prev(): QueuedSong | null {
+  if (this.songs.length === 0) return null;
+  // History-driven path (preferred when we have one)
+  while (this.history.length > 0) {
+    const idx = this.history.pop()!;
+    if (idx >= 0 && idx < this.songs.length) {
+      this.currentIndex = idx;
+      this.playedIndices.add(idx);
+      return this.songs[idx];
+    }
+    // popped index is stale (song removed) — keep popping
+  }
+  // Fallback: old index-based prev
+  const prevIndex = this.currentIndex - 1;
+  if (prevIndex < 0) {
+    if (this.mode === PlayMode.Sequential) return null;
+    this.currentIndex = this.songs.length - 1;
+  } else {
+    this.currentIndex = prevIndex;
+  }
+  this.playedIndices.add(this.currentIndex);
+  return this.songs[this.currentIndex];
+}
+```
+
+### B. Play Next (insert after current)
+
+**`PlayQueue.addNext(song)`:**
+
+```ts
+addNext(song: QueuedSong): void {
+  if (this.currentIndex < 0 || this.songs.length === 0) {
+    this.songs.push(song);
+    return;
+  }
+  const insertAt = this.currentIndex + 1;
+  this.songs.splice(insertAt, 0, song);
+  // Shift any tracked index > currentIndex by +1
+  const shifted = new Set<number>();
+  for (const i of this.playedIndices) {
+    shifted.add(i > this.currentIndex ? i + 1 : i);
+  }
+  this.playedIndices = shifted;
+  this.history = this.history.map((i) => (i > this.currentIndex ? i + 1 : i));
+}
+```
+
+**Backend endpoint** — `src/web/api/player.ts`:
+
+```
+POST /api/player/:botId/play-next-song
+body: { song: Song }
+```
+
+Behavior:
+- If queue is empty or `currentIndex < 0`: `queue.addNext(song)` (which falls
+  through to plain push), then `queue.play()`, then `resolveAndPlay`. Same
+  semantics as a successful `/play-song` — message: "正在播放：…"
+- Otherwise: `queue.addNext(song)`, no resolveAndPlay. Message: "已加入下一首：…"
+- Returns `{ ok: boolean, message: string }` matching the convention
+  established in the previous round.
+
+**Bot command** — `src/bot/instance.ts`:
+
+Register `!playnext <query>` (alias `!pn`):
+- Mirror of `cmdPlay`'s search step
+- On match: `queue.addNext(song)`. If no current playback, fall through to
+  `resolveAndPlay`.
+- Reply with `已加入下一首：<name>` or `正在播放：<name>` accordingly
+
+**Frontend store action** — `web/src/stores/player.ts`:
+
+```ts
+async playNextSong(song: Song) {
+  if (!this.activeBotId) return;
+  const res = await axios.post(`/api/player/${this.activeBotId}/play-next-song`, { song });
+  if (res.data?.message) {
+    this.notify(res.data.message, res.data.ok === false ? 'error' : 'info');
+  }
+}
+```
+
+**Frontend SongCard** — `web/src/components/SongCard.vue`:
+
+Add a third action button between the existing "play" and "add to queue":
+
+```vue
+<button class="action-btn" @click.stop="$emit('playNext')" title="下一首播放">
+  <Icon icon="mdi:playlist-play" />
+</button>
+```
+
+Add `playNext: []` to `defineEmits`.
+
+**Caller updates** — `Home.vue`, `Library.vue`, `Search.vue`, `History.vue`,
+`Playlist.vue`: each `<SongCard>` usage adds
+`@playNext="store.playNextSong(song)"`.
+
+**Queue.vue** is intentionally **not** updated — clicking "play next" on a
+song already in the queue would create a confusing duplicate.
+
+## Edge Cases
+
+| Case | Behavior |
+|---|---|
+| `prev` with empty history in Sequential mode | Walks `currentIndex - 1`; returns null at index 0 (existing) |
+| `prev` with empty history in Random/RandomLoop | Returns null (no past to recover) |
+| Repeated `prev` past start of history | Pops what's there, then falls back to index walk; eventually null |
+| `addNext` while `currentIndex == -1` (nothing played yet) | Falls through to push; queue.play() will pick it as first |
+| `addNext` while playing and queue size = 1 | Inserts at index 1; current index unchanged; next() will advance to it |
+| `remove` removes a song whose index is in history | Entry dropped; shifted accordingly |
+| Mode switched mid-playback | History cleared (intentional — mode change is a context boundary) |
+| `addNext` then `prev` | Inserted song was never played → not in history; prev pops the previously-played song, NOT the just-inserted one |
+
+## Files Touched
+
+- `src/audio/queue.ts` — history field, `pushHistory`, `addNext`, rewritten `prev`, mutator updates
+- `src/audio/queue.test.ts` (or add if missing) — unit tests for history behavior + addNext shift logic
+- `src/bot/instance.ts` — register `!playnext` / `!pn` command handler
+- `src/web/api/player.ts` — new `/play-next-song` route
+- `web/src/stores/player.ts` — `playNextSong` action
+- `web/src/components/SongCard.vue` — third action button + emit
+- `web/src/views/Home.vue` — wire `@playNext`
+- `web/src/views/Library.vue` — wire `@playNext`
+- `web/src/views/Search.vue` — wire `@playNext`
+- `web/src/views/History.vue` — wire `@playNext`
+- `web/src/views/Playlist.vue` — wire `@playNext`
+
+## Test Plan
+
+**Unit (vitest, `queue.test.ts`):**
+- prev with empty history in Sequential: walks back, null at index 0
+- prev with empty history in Random: returns null
+- next → next → next → prev pops correctly; prev again pops earlier
+- prev after `clear()` returns null (history reset)
+- prev after `setMode()` returns null (history reset)
+- `remove(idx)` drops from history and shifts entries > idx
+- `addNext` while empty: appends
+- `addNext` while playing index 2 in a 5-song queue: ends up at index 3, currentIndex still 2, queue size 6
+- `addNext` then `next()`: plays the inserted song
+- `addNext` shifts existing playedIndices and history correctly
+
+**Integration (manual smoke):**
+- Random mode: play 4 songs, hit `prev` 3 times → walks back through history
+- Click "下一首播放" on a search result → next song after current is the chosen one
+- `!playnext 七里香` → bot replies "已加入下一首：..."; current keeps playing; next song is 七里香
+- `!playnext` while idle → starts playing immediately
+
+**Regression:**
+- Existing 161 source-tree tests still pass.
+- TypeScript `tsc --noEmit` and `npm run build:web` clean.

src/audio/queue.test.ts

@@ -261,4 +261,227 @@ describe("PlayQueue", () => {
     queue.playAt(2);
     expect(queue.current()?.id).toBe("3");
   });
+
+  describe("history-aware prev", () => {
+    it("walks back through played indices in random mode", () => {
+      queue.setMode(PlayMode.Random);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.add(makeSong("d"));
+      queue.add(makeSong("e"));
+
+      // Force a deterministic random sequence: a → c → e
+      queue.playAt(0);
+      queue.playAt(2);
+      queue.playAt(4);
+      expect(queue.current()?.id).toBe("e");
+
+      // prev pops back through history: e → c → a
+      expect(queue.prev()?.id).toBe("c");
+      expect(queue.prev()?.id).toBe("a");
+    });
+
+    it("returns null when history is empty in random mode", () => {
+      queue.setMode(PlayMode.Random);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.playAt(0);
+      // No further moves → history is empty (only 'a' is current, never pushed)
+      expect(queue.prev()).toBeNull();
+    });
+
+    it("preserves sequential prev when history is empty", () => {
+      queue.setMode(PlayMode.Sequential);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.play();
+      queue.next(); // currentIndex = 1
+      // Sequential next() pushed 0 to history → prev pops back to 0
+      expect(queue.prev()?.id).toBe("a");
+    });
+
+    it("clears history on play()", () => {
+      queue.setMode(PlayMode.Random);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.playAt(0);
+      queue.playAt(1);
+      queue.play(); // resets to index 0 and clears history
+      expect(queue.prev()).toBeNull();
+    });
+
+    it("clears history on clear()", () => {
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.play();
+      queue.next();
+      queue.clear();
+      queue.add(makeSong("c"));
+      queue.play();
+      // History was wiped — no prev path available beyond index 0
+      expect(queue.prev()).toBeNull();
+    });
+
+    it("clears history on setMode()", () => {
+      queue.setMode(PlayMode.Sequential);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.play();
+      queue.next();
+      // Mode change resets context
+      queue.setMode(PlayMode.Random);
+      expect(queue.prev()).toBeNull();
+    });
+
+    it("drops history entries pointing at a removed song", () => {
+      queue.setMode(PlayMode.Random);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.playAt(0);
+      queue.playAt(1); // history: [0]
+      queue.playAt(2); // history: [0, 1]
+      // Remove song at index 1 → history entry 1 dropped
+      queue.remove(1);
+      // queue is now [a, c], history should be [0]
+      // current was at 2 → after remove shifts to 1 → song "c"
+      expect(queue.current()?.id).toBe("c");
+      expect(queue.prev()?.id).toBe("a");
+    });
+
+    it("does not push to history on prev itself", () => {
+      queue.setMode(PlayMode.Random);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.playAt(0);
+      queue.playAt(1);
+      queue.playAt(2); // history: [0, 1]
+      queue.prev();    // pops 1, history: [0]
+      queue.prev();    // pops 0, history: []
+      expect(queue.prev()).toBeNull(); // no fallback target in random mode
+    });
+
+    it("caps history at HISTORY_LIMIT (50) entries, dropping oldest", () => {
+      queue.setMode(PlayMode.Random);
+      // Build a queue large enough to overflow HISTORY_LIMIT
+      for (let i = 0; i < 60; i++) queue.add(makeSong(`s${i}`));
+      // Walk through 60 explicit picks → 59 pushes to history
+      // (playAt pushes the previous currentIndex; first call has -1
+      // which pushHistory rejects). After 60 playAts, history holds
+      // the last 50 of those 59 entries.
+      for (let i = 0; i < 60; i++) queue.playAt(i);
+
+      // Walk back through history. The first prev returns whatever the
+      // 50th-most-recent push was (= index 9, since pushes 0..58 happened
+      // and the oldest 9 fell off). We can verify by counting prevs that
+      // succeed before history exhausts and prev returns null in random.
+      let count = 0;
+      while (queue.prev() !== null) {
+        count++;
+        if (count > 100) break; // safety
+      }
+      expect(count).toBe(50);
+    });
+  });
+
+  describe("addNext", () => {
+    it("appends when queue is empty (no current)", () => {
+      queue.addNext(makeSong("a"));
+      expect(queue.size()).toBe(1);
+      expect(queue.list()[0].id).toBe("a");
+    });
+
+    it("appends when nothing is currently playing (currentIndex < 0)", () => {
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      // No play() yet → currentIndex still -1
+      queue.addNext(makeSong("c"));
+      expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "c"]);
+    });
+
+    it("inserts at currentIndex+1 mid-queue", () => {
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.add(makeSong("d"));
+      queue.play();      // current = 0 (a)
+      queue.next();      // current = 1 (b)
+      queue.addNext(makeSong("x"));
+      expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "x", "c", "d"]);
+      expect(queue.current()?.id).toBe("b"); // current unchanged
+    });
+
+    it("makes the inserted song play next when next() is called", () => {
+      queue.setMode(PlayMode.Sequential);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.play();      // current = 0 (a)
+      queue.addNext(makeSong("x"));
+      expect(queue.next()?.id).toBe("x");
+    });
+
+    it("shifts playedIndices entries > currentIndex by +1", () => {
+      queue.setMode(PlayMode.Random);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.add(makeSong("d"));
+      queue.playAt(2); // current = 2 (c), played = {2}
+      queue.playAt(3); // current = 3 (d), played = {2, 3}
+      queue.playAt(2); // current = 2 (c), played = {2, 3}
+      // Now insert after c — d's index 3 should become 4
+      queue.addNext(makeSong("x"));
+      expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "c", "x", "d"]);
+      // After addNext: currentIndex still 2; played should be {2, 4}
+      // (the previously-played 'd' is now at index 4)
+      // Verify by removing 'x' (index 3) — d should remain played at index 3
+      queue.remove(3);
+      expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "c", "d"]);
+    });
+
+    it("shifts history entries > currentIndex by +1", () => {
+      queue.setMode(PlayMode.Random);
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.add(makeSong("d"));
+      queue.playAt(0); // current = 0
+      queue.playAt(3); // current = 3 (d), history = [0]
+      queue.playAt(1); // current = 1 (b), history = [0, 3]
+      queue.addNext(makeSong("x"));
+      // Insert at index 2 → entries > 1 shift +1 → history becomes [0, 4]
+      // queue: [a, b, x, c, d]; d is now at index 4
+      // prev → pop 4 → song at index 4 = d
+      expect(queue.prev()?.id).toBe("d");
+      // prev again → pop 0 → song at index 0 = a
+      expect(queue.prev()?.id).toBe("a");
+    });
+
+    it("idle player + stale currentIndex: insertion target is currentIndex+1, not size-1", () => {
+      // Reproduces the scenario where the player has gone idle but the
+      // queue still has a non-negative currentIndex (e.g., after natural
+      // track end without queue.clear()).
+      queue.add(makeSong("a"));
+      queue.add(makeSong("b"));
+      queue.add(makeSong("c"));
+      queue.add(makeSong("d"));
+      queue.play();      // current = 0 (a)
+      queue.next();      // current = 1 (b)
+      // Simulate idle-with-stale-currentIndex: the player has gone idle
+      // but queue still points at b.
+      // Caller pre-captures insertedAt:
+      const insertedAt = queue.getCurrentIndex() + 1; // = 2
+      queue.addNext(makeSong("x"));
+      // queue is now [a, b, x, c, d]
+      // size-1 would be 4 (d) — WRONG.
+      // insertedAt is 2 (x) — RIGHT.
+      expect(queue.list().map((s) => s.id)).toEqual(["a", "b", "x", "c", "d"]);
+      expect(queue.size() - 1).toBe(4); // proves size-1 strategy would pick d
+      const promoted = queue.playAt(insertedAt);
+      expect(promoted?.id).toBe("x");
+    });
+  });
 });

src/audio/queue.ts

@@ -21,6 +21,16 @@ export class PlayQueue {
   private currentIndex = -1;
   private mode: PlayMode = PlayMode.Sequential;
   private playedIndices = new Set<number>();
+  private history: number[] = [];
+  private static readonly HISTORY_LIMIT = 50;
+
+  private pushHistory(idx: number): void {
+    if (idx < 0 || idx >= this.songs.length) return;
+    this.history.push(idx);
+    if (this.history.length > PlayQueue.HISTORY_LIMIT) {
+      this.history.shift();
+    }
+  }
 
   add(song: QueuedSong): void {
     this.songs.push(song);
@@ -30,6 +40,34 @@ export class PlayQueue {
     this.songs.push(...songs);
   }
 
+  /**
+   * Insert a song to play immediately after the current one. Falls
+   * through to plain push when nothing is playing yet (currentIndex < 0
+   * or queue empty), so the existing "add → idle bot starts playing"
+   * flow continues to work.
+   *
+   * Shifts playedIndices and history entries > currentIndex by +1 so
+   * their references stay valid after the splice.
+   */
+  addNext(song: QueuedSong): void {
+    if (this.currentIndex < 0 || this.songs.length === 0) {
+      this.songs.push(song);
+      return;
+    }
+    const insertAt = this.currentIndex + 1;
+    this.songs.splice(insertAt, 0, song);
+
+    const shifted = new Set<number>();
+    for (const i of this.playedIndices) {
+      shifted.add(i > this.currentIndex ? i + 1 : i);
+    }
+    this.playedIndices = shifted;
+
+    this.history = this.history.map((i) =>
+      i > this.currentIndex ? i + 1 : i,
+    );
+  }
+
   remove(index: number): QueuedSong | null {
     if (index < 0 || index >= this.songs.length) return null;
     const [removed] = this.songs.splice(index, 1);
@@ -48,6 +86,12 @@ export class PlayQueue {
     }
     this.playedIndices = newPlayed;
 
+    // Same shift logic for history — drop entries pointing at the
+    // removed song; shift entries > index down by 1.
+    this.history = this.history
+      .filter((idx) => idx !== index)
+      .map((idx) => (idx > index ? idx - 1 : idx));
+
     return removed;
   }
 
@@ -55,11 +99,13 @@ export class PlayQueue {
     this.songs = [];
     this.currentIndex = -1;
     this.playedIndices.clear();
+    this.history = [];
   }
 
   play(): QueuedSong | null {
     if (this.songs.length === 0) return null;
     this.playedIndices.clear();
+    this.history = [];
     this.currentIndex = 0;
     this.playedIndices.add(0);
     return this.songs[0];
@@ -67,6 +113,10 @@ export class PlayQueue {
 
   playAt(index: number): QueuedSong | null {
     if (index < 0 || index >= this.songs.length) return null;
+    this.pushHistory(this.currentIndex);
+    // Reset the Random-mode "unplayed" pool — explicit picks restart
+    // shuffle from this point. History tracking is independent and
+    // unaffected by this clear.
     this.playedIndices.clear();
     this.currentIndex = index;
     this.playedIndices.add(index);
@@ -80,10 +130,12 @@ export class PlayQueue {
       case PlayMode.Sequential: {
         const nextIndex = this.currentIndex + 1;
         if (nextIndex >= this.songs.length) return null;
+        this.pushHistory(this.currentIndex);
         this.currentIndex = nextIndex;
         return this.songs[nextIndex];
       }
       case PlayMode.Loop: {
+        this.pushHistory(this.currentIndex);
         this.currentIndex = (this.currentIndex + 1) % this.songs.length;
         return this.songs[this.currentIndex];
       }
@@ -95,12 +147,14 @@ export class PlayQueue {
         if (unplayed.length === 0) return null;
         const nextIndex =
           unplayed[Math.floor(Math.random() * unplayed.length)];
+        this.pushHistory(this.currentIndex);
         this.currentIndex = nextIndex;
         this.playedIndices.add(nextIndex);
         return this.songs[nextIndex];
       }
       case PlayMode.RandomLoop: {
         if (this.songs.length === 1) {
+          this.pushHistory(this.currentIndex);
           this.currentIndex = 0;
           return this.songs[0];
         }
@@ -108,6 +162,7 @@ export class PlayQueue {
         do {
           idx = Math.floor(Math.random() * this.songs.length);
         } while (idx === this.currentIndex);
+        this.pushHistory(this.currentIndex);
         this.currentIndex = idx;
         return this.songs[idx];
       }
@@ -116,9 +171,27 @@ export class PlayQueue {
 
   prev(): QueuedSong | null {
     if (this.songs.length === 0) return null;
+
+    // Preferred: pop from the back-stack so prev means "the song I
+    // actually played before this one," not "the previous array slot."
+    while (this.history.length > 0) {
+      const idx = this.history.pop()!;
+      if (idx >= 0 && idx < this.songs.length) {
+        this.currentIndex = idx;
+        this.playedIndices.add(idx);
+        return this.songs[idx];
+      }
+      // Stale entry (song removed) — keep popping.
+    }
+
+    // Fallback: no history to walk back through. In Sequential we
+    // can still meaningfully step the index backward; in random
+    // modes there's nothing useful to return.
+    if (this.mode === PlayMode.Random || this.mode === PlayMode.RandomLoop) {
+      return null;
+    }
     const prevIndex = this.currentIndex - 1;
     if (prevIndex < 0) {
-      // In Sequential mode, don't wrap around
       if (this.mode === PlayMode.Sequential) return null;
       this.currentIndex = this.songs.length - 1;
     } else {
@@ -153,6 +226,7 @@ export class PlayQueue {
   setMode(mode: PlayMode): void {
     this.mode = mode;
     this.playedIndices.clear();
+    this.history = [];
     if (this.currentIndex >= 0) {
       this.playedIndices.add(this.currentIndex);
     }

src/bot/instance.ts

@@ -254,6 +254,8 @@ export class BotInstance extends EventEmitter {
     const AUDIO_COMMANDS = new Set([
       "play",
       "add",
+      "playnext",
+      "pn",
       "next",
       "skip",
       "prev",
@@ -270,6 +272,9 @@ export class BotInstance extends EventEmitter {
         return this.cmdPlay(cmd);
       case "add":
         return this.cmdAdd(cmd);
+      case "playnext":
+      case "pn":
+        return this.cmdPlayNext(cmd);
       case "pause":
         return this.cmdPause();
       case "resume":
@@ -428,6 +433,39 @@ export class BotInstance extends EventEmitter {
     return `Added to queue: ${song.name} - ${song.artist} (position ${this.queue.size()})`;
   }
 
+  private async cmdPlayNext(cmd: ParsedCommand): Promise<string> {
+    if (!cmd.args) return "Usage: !playnext <song name>";
+    const provider = this.getProvider(cmd.flags);
+    const result = await provider.search(cmd.args, 1);
+    if (result.songs.length === 0)
+      return `No results found for: ${cmd.args}`;
+
+    const song = result.songs[0];
+    const wasIdle = this.player.getState() === "idle";
+    // Capture the slot addNext WILL insert at, before mutating the queue.
+    // addNext pushes when currentIndex<0 (slot = size); otherwise splices
+    // at currentIndex+1. Using size-1 after addNext was wrong when the
+    // queue had stale currentIndex>=0 while the player was idle (e.g.,
+    // after natural track end without queue.clear()).
+    const insertedAt =
+      this.queue.getCurrentIndex() < 0
+        ? this.queue.size()
+        : this.queue.getCurrentIndex() + 1;
+    this.queue.addNext({ ...song, platform: provider.platform });
+
+    if (wasIdle) {
+      this.queue.playAt(insertedAt);
+      this.player.resetFailures();
+      const ok = await this.resolveAndPlay(this.queue.current()!);
+      this.emit("stateChange");
+      if (!ok) return `Cannot play: ${song.name}`;
+      return `Now playing: ${song.name} - ${song.artist}`;
+    }
+
+    this.emit("stateChange");
+    return `Up next: ${song.name} - ${song.artist}`;
+  }
+
   private cmdPause(): string {
     this.player.pause();
     this.emit("stateChange");
@@ -460,13 +498,17 @@ export class BotInstance extends EventEmitter {
   }
 
   private async cmdPrev(): Promise<string> {
+    // Retry-skip up to 4 attempts: history can include failed songs
+    // that playNext's auto-advance retry-skipped past, so a single
+    // prev would otherwise land on an unplayable song and leave the
+    // queue's currentIndex stuck mid-failure.
+    for (let i = 0; i < 4; i++) {
       const prev = this.queue.prev();
-    if (prev) {
+      if (!prev) return "No previous song";
       const ok = await this.resolveAndPlay(prev);
-      if (!ok) return "Cannot play previous song";
+      if (ok) return `Now playing: ${prev.name} - ${prev.artist}`;
-      return `Now playing: ${prev.name} - ${prev.artist}`;
     }
-    return "No previous song";
+    return "Cannot play any previous songs (all failed to resolve)";
   }
 
   private cmdVol(cmd: ParsedCommand): string {
@@ -715,6 +757,7 @@ export class BotInstance extends EventEmitter {
       `${p}play -b <song> — Search from BiliBili`,
       `${p}play -y <song> — Search from YouTube (yt-dlp)`,
       `${p}add <song>   — Add to queue`,
+      `${p}playnext <song> — Insert as next song (alias: ${p}pn)`,
       `${p}pause/resume — Pause/resume`,
       `${p}next/prev    — Next/previous`,
       `${p}stop         — Stop and clear queue`,
@@ -734,17 +777,25 @@ export class BotInstance extends EventEmitter {
     ].join("\n");
   }
 
-  private async playNext(): Promise<void> {
+  /**
-    if (this.isAdvancing || !this.connected) return;
+   * Advance the queue and play the next song. If the resolved URL fails
+   * (e.g., copyright/region restrictions for QQ), skips up to `maxRetries`
+   * more songs looking for a playable one. Public so REST endpoints that
+   * seed the queue can fall back to this retry-skip behavior.
+   *
+   * Returns true if a song actually started playing, false otherwise.
+   */
+  async playNext(maxRetries = 3): Promise<boolean> {
+    if (this.isAdvancing || !this.connected) return false;
     this.isAdvancing = true;
     try {
       this.voteSkipUsers.clear();
       const next = this.queue.next();
+      let started = false;
       if (next) {
-        let started = await this.resolveAndPlay(next);
+        started = await this.resolveAndPlay(next);
         if (!started) {
-          // Skip to next if URL resolve fails (up to 3 retries)
+          for (let i = 0; i < maxRetries && this.connected; i++) {
-          for (let i = 0; i < 3 && this.connected; i++) {
             const retry = this.queue.next();
             if (!retry) break;
             if (await this.resolveAndPlay(retry)) {
@@ -766,8 +817,9 @@ export class BotInstance extends EventEmitter {
           await this.refillFm();
           const refillNext = this.queue.next();
           if (refillNext) {
-            await this.resolveAndPlay(refillNext);
+            started = await this.resolveAndPlay(refillNext);
-          } else {
+          }
+          if (!started) {
             this.player.stop();
             this.profileManager.onSongChange(null).catch(() => {});
           }
@@ -777,6 +829,7 @@ export class BotInstance extends EventEmitter {
         }
       }
       this.emit("stateChange");
+      return started;
     } finally {
       this.isAdvancing = false;
     }

src/data/database.test.ts

@@ -68,7 +68,7 @@ describe("database", () => {
     botDb.saveBotInstance(instance);
     const instances = botDb.getBotInstances();
     expect(instances).toHaveLength(1);
-    expect(instances[0]).toEqual(instance);
+    expect(instances[0]).toMatchObject(instance);
     expect(instances[0].autoStart).toBe(true);
 
     // Test upsert

src/music/netease.ts

@@ -3,6 +3,7 @@ import type {
   MusicProvider,
   Song,
   Playlist,
+  PlaylistDetail,
   LyricLine,
   SearchResult,
   QrCodeResult,
@@ -319,6 +320,21 @@ export class NeteaseProvider implements MusicProvider {
     }));
   }
 
+  async getPlaylistDetail(playlistId: string): Promise<PlaylistDetail | null> {
+    const res = await this.api.get("/playlist/detail", {
+      params: { id: playlistId, ...this.cookieParams },
+    });
+    const p = res.data?.playlist;
+    if (!p) return null;
+    return {
+      id: String(p.id),
+      name: p.name ?? "",
+      description: p.description ?? "",
+      coverUrl: p.coverImgUrl ?? "",
+      songCount: p.trackCount ?? 0,
+    };
+  }
+
   async getUserPlaylists(): Promise<Playlist[]> {
     // First get user ID from login status
     const statusRes = await this.api.get("/login/status", {

src/music/provider.ts

@@ -20,6 +20,14 @@ export interface Playlist {
   platform: "netease" | "qq" | "bilibili" | "youtube";
 }
 
+export interface PlaylistDetail {
+  id: string;
+  name: string;
+  description: string;
+  coverUrl: string;
+  songCount: number;
+}
+
 export interface Album {
   id: string;
   name: string;
@@ -77,4 +85,5 @@ export interface MusicProvider {
   getPersonalFm?(): Promise<Song[]>;
   getDailyRecommendSongs?(): Promise<Song[]>;
   getUserPlaylists?(): Promise<Playlist[]>;
+  getPlaylistDetail?(playlistId: string): Promise<PlaylistDetail | null>;
 }

src/music/qq.ts

@@ -3,6 +3,7 @@ import type {
   MusicProvider,
   Song,
   Playlist,
+  PlaylistDetail,
   LyricLine,
   SearchResult,
   QrCodeResult,
@@ -18,6 +19,22 @@ const qqDirectApi = axios.create({
   headers: { referer: "https://y.qq.com" },
 });
 
+// Direct client for c.y.qq.com endpoints (collected playlists / favorites).
+// The bundled qq-music-api wrapper doesn't expose these endpoints.
+const qqFavApi = axios.create({
+  baseURL: "https://c.y.qq.com",
+  timeout: 10000,
+  headers: { referer: "https://y.qq.com/" },
+});
+
+function computeGtk(pSkey: string): number {
+  let hash = 5381;
+  for (let i = 0; i < pSkey.length; i++) {
+    hash = (hash + (hash << 5) + pSkey.charCodeAt(i)) | 0;
+  }
+  return hash & 0x7fffffff;
+}
+
 export class QQMusicProvider implements MusicProvider {
   readonly platform = "qq" as const;
   private api: AxiosInstance;
@@ -98,6 +115,50 @@ export class QQMusicProvider implements MusicProvider {
     return null;
   }
 
+  /**
+   * Batch-check which song mids are actually streamable. QQ playlists
+   * (especially collected ones) frequently contain a majority of songs
+   * that return result=104003 ("no copyright/region restricted") for the
+   * current user — a sequential retry loop wastes time guessing.
+   *
+   * The wrapper's /getMusicPlay accepts a comma-separated songmid list
+   * and resolves all of them in a single upstream call. We chunk to keep
+   * the URL well under typical 8KB query-string limits and to keep per-
+   * request latency bounded (~2-3s per 100 mids).
+   *
+   * Returns:
+   *   - non-null Set: authoritative result. Empty Set means all songs are
+   *     unplayable; non-empty means filter to those mids.
+   *   - null: every chunk failed. Caller should fall back to sequential
+   *     retry rather than treating as "all unplayable".
+   */
+  async getPlayableSongIds(songIds: string[]): Promise<Set<string> | null> {
+    if (songIds.length === 0) return new Set();
+
+    const CHUNK = 100;          // ~14 chars/mid * 100 + commas ≈ 1.5KB
+    const playable = new Set<string>();
+    let allChunksFailed = true;
+    for (let i = 0; i < songIds.length; i += CHUNK) {
+      const slice = songIds.slice(i, i + CHUNK);
+      try {
+        const res = await this.api.get("/getMusicPlay", {
+          params: { songmid: slice.join(","), quality: this.quality, ...this.cookieParams },
+        });
+        const playUrlMap: Record<string, { url?: string }> | undefined =
+          res.data?.data?.playUrl;
+        if (!playUrlMap) continue; // chunk-level failure, try next
+        allChunksFailed = false;
+        for (const [mid, info] of Object.entries(playUrlMap)) {
+          if (info?.url) playable.add(mid);
+        }
+      } catch {
+        // chunk-level failure — keep going so a transient error on one
+        // chunk doesn't poison the whole batch.
+      }
+    }
+    return allChunksFailed ? null : playable;
+  }
+
   async getSongDetail(songId: string): Promise<Song | null> {
     // Try /getSongInfo for full metadata, but fall through to a minimal
     // stub if the library endpoint fails (current @sansenjian/qq-music-api
@@ -162,6 +223,21 @@ export class QQMusicProvider implements MusicProvider {
     }));
   }
 
+  async getPlaylistDetail(playlistId: string): Promise<PlaylistDetail | null> {
+    const res = await this.api.get("/getSongListDetail", {
+      params: { disstid: playlistId, ...this.cookieParams },
+    });
+    const cd = res.data?.response?.cdlist?.[0];
+    if (!cd) return null;
+    return {
+      id: String(cd.disstid ?? cd.dissid ?? ""),
+      name: cd.dissname ?? "",
+      description: cd.desc ?? "",
+      coverUrl: cd.logo ?? "",
+      songCount: cd.songnum ?? cd.total_song_num ?? 0,
+    };
+  }
+
   async getRecommendPlaylists(): Promise<Playlist[]> {
     const res = await this.api.get("/getSongLists", {
       params: { categoryId: 10000000, pageSize: 10, ...this.cookieParams },
@@ -291,25 +367,116 @@ export class QQMusicProvider implements MusicProvider {
     }
   }
 
-  async getUserPlaylists(): Promise<Playlist[]> {
+  async getDailyRecommendSongs(): Promise<Song[]> {
-    if (!this.cookie) return [];
+    // QQ has no per-user daily list; use newsong.NewSongServer (新歌速递)
-    const uinMatch = /(?:^|; )uin=o?0?(\d+)/.exec(this.cookie);
+    // as the closest analogue. Returns ~20 newly-released songs.
-    const uin = uinMatch ? uinMatch[1] : "";
-    if (!uin) return [];
     try {
-      const res = await this.api.get("/user/getUserPlaylists", {
+      const res = await this.api.get("/getNewSongs", {
-        params: { uin, ...this.cookieParams },
+        params: { ...this.cookieParams },
       });
-      if (res.data?.response?.code !== 0) return [];
+      const list: any[] = res.data?.response?.new_song?.data?.songlist ?? [];
-      return (res.data?.response?.data?.playlists ?? []).map((p: any) => ({
+      return list.map((s: any) => ({
-        id: String(p.dissid ?? p.id ?? ""),
+        id: String(s.mid ?? s.id),
-        name: p.dissname ?? p.name ?? "",
+        name: s.title ?? s.name ?? "",
-        coverUrl: p.imgurl ?? p.coverUrl ?? "",
+        artist: (s.singer ?? []).map((a: any) => a.name).join(" / "),
-        songCount: p.song_count ?? p.listennum ?? 0,
+        album: s.album?.name ?? s.album?.title ?? "",
+        duration: s.interval ?? 0,
+        coverUrl: s.album?.mid
+          ? `https://y.gtimg.cn/music/photo_new/T002R300x300M000${s.album.mid}.jpg`
+          : "",
         platform: "qq",
       }));
     } catch {
       return [];
     }
   }
+
+  async getUserPlaylists(): Promise<Playlist[]> {
+    if (!this.cookie) return [];
+    const uinMatch = /(?:^|; )uin=o?0?(\d+)/.exec(this.cookie);
+    const uin = uinMatch ? uinMatch[1] : "";
+    if (!uin) return [];
+
+    // Created and collected playlists come from two separate QQ endpoints.
+    // Run them in parallel and concatenate (created first, then collected),
+    // matching the order shown in the QQ Music desktop app.
+    const [created, collected] = await Promise.all([
+      this.fetchCreatedPlaylists(uin),
+      this.fetchCollectedPlaylists(uin),
+    ]);
+    return [...created, ...collected];
+  }
+
+  private async fetchCreatedPlaylists(uin: string): Promise<Playlist[]> {
+    try {
+      const res = await this.api.get("/user/getUserPlaylists", {
+        params: { uin, ...this.cookieParams },
+      });
+      if (res.data?.response?.code !== 0) return [];
+      return (res.data?.response?.data?.playlists ?? []).map((p: any) => {
+        // fcg_get_profile_homepage returns title/picurl/subtitle ("X首  Y次播放").
+        const subtitle: string = p.subtitle ?? "";
+        const songCountFromSubtitle = parseInt(subtitle.match(/(\d+)\s*首/)?.[1] ?? "0", 10);
+        return {
+          id: String(p.dissid ?? p.id ?? ""),
+          name: p.title ?? p.dissname ?? p.name ?? "",
+          coverUrl: p.picurl ?? p.imgurl ?? p.coverUrl ?? "",
+          songCount: p.song_count ?? p.listennum ?? songCountFromSubtitle,
+          platform: "qq",
+        };
+      });
+    } catch {
+      return [];
+    }
+  }
+
+  private async fetchCollectedPlaylists(uin: string): Promise<Playlist[]> {
+    // c.y.qq.com fav endpoint: reqtype=3 returns collected playlists (cdlist).
+    // Requires g_tk derived from the p_skey cookie.
+    const pSkeyMatch = /(?:^|; )p_skey=([^;]+)/.exec(this.cookie);
+    if (!pSkeyMatch) return [];
+    const gtk = computeGtk(pSkeyMatch[1]);
+
+    const PAGE_SIZE = 30;
+    const MAX_PAGES = 10;       // 300-playlist hard cap; should cover any sane user
+    const all: Playlist[] = [];
+    try {
+      for (let page = 0; page < MAX_PAGES; page++) {
+        const sin = page * PAGE_SIZE;
+        const ein = sin + PAGE_SIZE - 1;
+        const res = await qqFavApi.get("/fav/fcgi-bin/fcg_get_profile_order_asset.fcg", {
+          params: {
+            ct: 20,
+            cid: 205360956,
+            userid: uin,
+            reqtype: 3,
+            sin,
+            ein,
+            g_tk: gtk,
+            format: "json",
+          },
+          headers: { Cookie: this.cookie },
+        });
+        if (res.data?.code !== 0) break;
+        const list: any[] = res.data?.data?.cdlist ?? [];
+        for (const p of list) {
+          all.push({
+            id: String(p.dissid ?? ""),
+            name: p.dissname ?? "",
+            coverUrl: p.logo ?? "",
+            songCount: p.songnum ?? 0,
+            platform: "qq",
+          });
+        }
+        // Stop when upstream signals no more pages, or when this page is
+        // short (also indicates end). has_more is the canonical signal.
+        const hasMore = res.data?.data?.has_more === 1 || res.data?.data?.has_more === true;
+        if (!hasMore || list.length < PAGE_SIZE) break;
+      }
+    } catch {
+      // Return whatever we got so far on partial failure rather than dropping
+      // earlier pages.
+    }
+    return all;
+  }
 }

src/web/api/music.ts

@@ -168,32 +168,16 @@ export function createMusicRouter(
   router.get("/playlist/:id/detail", async (req, res) => {
     try {
       const provider = getProvider(req.query.platform as string);
-      // Use the playlist songs endpoint to get basic info,
+      if (!provider.getPlaylistDetail) {
-      // but we also need detail info (name, cover, description).
+        res.status(501).json({ error: "Not supported by this provider" });
-      // For netease, we access the underlying API directly.
-      const nProvider = provider as any;
-      if (nProvider.api) {
-        const cookieParams = nProvider.cookie
-          ? { cookie: nProvider.cookie }
-          : {};
-        const detailRes = await nProvider.api.get("/playlist/detail", {
-          params: { id: req.params.id, ...cookieParams },
-        });
-        const p = detailRes.data?.playlist;
-        if (p) {
-          res.json({
-            playlist: {
-              id: String(p.id),
-              name: p.name,
-              description: p.description ?? "",
-              coverUrl: p.coverImgUrl ?? "",
-              songCount: p.trackCount ?? 0,
-            },
-          });
         return;
       }
-      }
+      const detail = await provider.getPlaylistDetail(req.params.id);
+      if (!detail) {
         res.status(404).json({ error: "Playlist not found" });
+        return;
+      }
+      res.json({ playlist: detail });
     } catch (err) {
       logger.error({ err }, "Get playlist detail failed");
       res.status(500).json({ error: (err as Error).message });

src/web/api/player.ts

@@ -249,9 +249,32 @@ export function createPlayerRouter(
         return;
       }
 
+      // QQ-specific optimization: many users' QQ playlists contain a
+      // large fraction of songs that return result=104003 (region/copyright
+      // restricted). Batch-resolve URLs once and only queue the playable
+      // ones, otherwise the playback retry loop wastes time guessing.
+      let queueable: { id: string }[] = songs;
+      const totalCount = songs.length;
+      const qqLike = provider as { getPlayableSongIds?: (ids: string[]) => Promise<Set<string> | null> };
+      if (typeof qqLike.getPlayableSongIds === "function") {
+        const playable = await qqLike.getPlayableSongIds(songs.map((s: { id: string }) => s.id));
+        if (playable !== null) {
+          // Authoritative answer from upstream — even an empty set means
+          // "we know none are playable", short-circuit immediately rather
+          // than wasting 20+ retries.
+          queueable = songs.filter((s: { id: string }) => playable.has(s.id));
+        }
+        // If null, the batch endpoint itself errored — fall through to
+        // the sequential retry path, which still has a chance.
+      }
+      if (queueable.length === 0) {
+        res.json({ ok: false, message: `歌单 ${totalCount} 首歌曲均无版权可播放（区域/版权限制）` });
+        return;
+      }
+
       const queue = bot.getQueueManager();
       queue.clear();
-      for (const song of songs) {
+      for (const song of queueable) {
         queue.add({ ...song, platform: provider.platform });
       }
 
@@ -265,11 +288,25 @@ export function createPlayerRouter(
         first = queue.play();
       }
 
-      if (first) {
+      // If the first picked song can't resolve (e.g., QQ song with no
-        await bot.resolveAndPlay(first);
+      // streaming entitlement → result 104003), fall back to playNext's
+      // retry-skip behavior. Use a higher retry budget than the default
+      // trackEnd auto-advance because user-initiated playlist plays
+      // commonly have long contiguous runs of unplayable songs.
+      let started = first ? await bot.resolveAndPlay(first) : false;
+      if (first && !started) {
+        started = await bot.playNext(20);
       }
 
-      res.json({ message: `Loaded ${songs.length} songs. Now playing: ${first?.name ?? "unknown"}` });
+      const playing = queue.current();
+      const loadedMsg = queueable.length < totalCount
+        ? `已加载 ${queueable.length}/${totalCount} 首（其余区域/版权限制）`
+        : `已加载 ${queueable.length} 首`;
+      if (started && playing) {
+        res.json({ ok: true, message: `${loadedMsg}，正在播放：${playing.name}` });
+      } else {
+        res.json({ ok: false, message: `${loadedMsg}，但无法开始播放。` });
+      }
     } catch (err) {
       logger.error({ err }, "Play playlist failed");
       res.status(500).json({ error: (err as Error).message });
@@ -293,11 +330,51 @@ export function createPlayerRouter(
       bot.getPlayer().resetFailures();
       const ok = await bot.resolveAndPlay(queue.current()!);
       if (!ok) {
-        res.json({ message: `Cannot play: ${song.name || song.id}` });
+        res.json({ ok: false, message: `无法播放「${song.name || song.id}」（区域/版权限制）` });
         return;
       }
 
-      res.json({ message: `Now playing: ${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
+      res.json({ ok: true, message: `正在播放：${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
+    } catch (err) {
+      res.status(500).json({ error: (err as Error).message });
+    }
+  });
+
+  // Insert a single song to play right after the current one.
+  // If nothing is playing, behaves like /play-song (start immediately).
+  router.post("/:botId/play-next-song", async (req, res) => {
+    try {
+      const bot = (req as any).bot;
+      const { song } = req.body;
+      if (!song || !song.id || !song.platform) {
+        res.status(400).json({ error: "song object with id and platform is required" });
+        return;
+      }
+      const queue = bot.getQueueManager();
+      const wasIdle = bot.getPlayer().getState() === "idle";
+      // Capture the slot addNext WILL insert at, before mutating the queue.
+      // addNext pushes when currentIndex<0 (slot = size); otherwise splices
+      // at currentIndex+1. Using size-1 after addNext was wrong when the
+      // queue had stale currentIndex>=0 while the player was idle (e.g.,
+      // after natural track end without queue.clear()).
+      const insertedAt =
+        queue.getCurrentIndex() < 0 ? queue.size() : queue.getCurrentIndex() + 1;
+      queue.addNext(song);
+
+      if (wasIdle) {
+        // Promote the just-added song to current and start it.
+        queue.playAt(insertedAt);
+        bot.getPlayer().resetFailures();
+        const ok = await bot.resolveAndPlay(queue.current()!);
+        if (!ok) {
+          res.json({ ok: false, message: `无法播放「${song.name || song.id}」（区域/版权限制）` });
+          return;
+        }
+        res.json({ ok: true, message: `正在播放：${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
+        return;
+      }
+
+      res.json({ ok: true, message: `已加入下一首：${song.name || 'Unknown'} - ${song.artist || 'Unknown'}` });
     } catch (err) {
       res.status(500).json({ error: (err as Error).message });
     }

web/src/App.vue

@@ -5,32 +5,89 @@
       <RouterView />
     </main>
     <Player />
+    <Toast />
+
+    <!-- Mobile mini player -->
+    <div v-if="currentSong" class="m-player" @click="router.push('/lyrics')">
+      <div class="m-player-progress">
+        <div class="m-player-progress-fill" :style="{ width: mobileProgressPct + '%' }" />
+      </div>
+      <CoverArt :url="currentSong.coverUrl" :size="40" :radius="8" />
+      <div class="m-player-info">
+        <div class="m-player-name">{{ currentSong.name }}</div>
+        <div class="m-player-artist">{{ currentSong.artist }}</div>
+      </div>
+      <button class="m-player-btn" @click.stop="playerStore.isPlaying ? playerStore.pause() : playerStore.resume()">
+        <Icon :icon="playerStore.isPlaying ? 'mdi:pause' : 'mdi:play'" />
+      </button>
+      <button class="m-player-btn" @click.stop="playerStore.next()">
+        <Icon icon="mdi:skip-next" />
+      </button>
+    </div>
+
+    <!-- Mobile bottom tab bar -->
+    <nav class="m-tabbar">
+      <RouterLink to="/" class="m-tab" :class="{ active: route.path === '/' }">
+        <Icon icon="mdi:home" class="tab-icon" />
+        <span class="tab-label">发现</span>
+      </RouterLink>
+      <RouterLink to="/search" class="m-tab" :class="{ active: route.path === '/search' }">
+        <Icon icon="mdi:magnify" class="tab-icon" />
+        <span class="tab-label">搜索</span>
+      </RouterLink>
+      <RouterLink to="/library" class="m-tab" :class="{ active: route.path === '/library' }">
+        <Icon icon="mdi:music-box-multiple" class="tab-icon" />
+        <span class="tab-label">音乐库</span>
+      </RouterLink>
+      <RouterLink to="/settings" class="m-tab" :class="{ active: route.path.startsWith('/settings') }">
+        <Icon icon="mdi:cog" class="tab-icon" />
+        <span class="tab-label">设置</span>
+      </RouterLink>
+    </nav>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { Icon } from '@iconify/vue';
 import { usePlayerStore } from './stores/player.js';
 import { useWebSocket } from './composables/useWebSocket.js';
 import Navbar from './components/Navbar.vue';
 import Player from './components/Player.vue';
+import CoverArt from './components/CoverArt.vue';
+import Toast from './components/Toast.vue';
 
 const playerStore = usePlayerStore();
 const theme = computed(() => playerStore.theme);
+const route = useRoute();
+const router = useRouter();
 const { connect } = useWebSocket();
+const currentSong = computed(() => playerStore.currentSong);
 
+const mobileProgressPct = ref(0);
 let syncTimer: ReturnType<typeof setInterval> | null = null;
+let mobileRaf: number | null = null;
+
+function updateMobileProgress() {
+  const duration = currentSong.value?.duration ?? 0;
+  mobileProgressPct.value = duration > 0
+    ? Math.min((playerStore.elapsed / duration) * 100, 100)
+    : 0;
+  mobileRaf = requestAnimationFrame(updateMobileProgress);
+}
 
 onMounted(() => {
   playerStore.loadTheme();
   connect();
   playerStore.fetchBots();
-  // Periodically sync elapsed time from server (ground truth)
   syncTimer = setInterval(() => playerStore.syncElapsed(), 3000);
+  mobileRaf = requestAnimationFrame(updateMobileProgress);
 });
 
 onUnmounted(() => {
   if (syncTimer) clearInterval(syncTimer);
+  if (mobileRaf !== null) cancelAnimationFrame(mobileRaf);
 });
 </script>
 
@@ -47,5 +104,123 @@ onUnmounted(() => {
   @media (max-width: 1336px) {
     padding: 80px 5vw 80px;
   }
+
+  @media (max-width: 768px) {
+    padding: 72px 16px 200px;
+  }
+}
+
+// Mobile mini player
+.m-player {
+  position: fixed;
+  left: 8px;
+  right: 8px;
+  bottom: 68px;
+  height: 58px;
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+  z-index: 95;
+  cursor: pointer;
+
+  @media (min-width: 769px) {
+    display: none;
+  }
+}
+
+.m-player-progress {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  height: 2px;
+}
+
+.m-player-progress-fill {
+  height: 2px;
+  background: var(--color-primary);
+  border-radius: 1px;
+}
+
+.m-player-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.m-player-name {
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m-player-artist {
+  font-size: 11px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.m-player-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  opacity: 0.85;
+  flex-shrink: 0;
+}
+
+// Mobile bottom tab bar
+.m-tabbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  background: var(--bg-navbar);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  border-top: 1px solid var(--border-color);
+  z-index: 100;
+
+  @media (min-width: 769px) {
+    display: none;
+  }
+}
+
+.m-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 14px;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  font-family: inherit;
+
+  &.active {
+    color: var(--color-primary);
+  }
+
+  .tab-icon {
+    font-size: 22px;
+  }
+
+  .tab-label {
+    font-size: 10px;
+    font-weight: 500;
+  }
 }
 </style>

web/src/components/Navbar.vue

@@ -5,6 +5,7 @@
     <div class="nav-links">
       <RouterLink to="/" class="nav-link" active-class="active">发现</RouterLink>
       <RouterLink to="/search" class="nav-link" active-class="active">搜索</RouterLink>
+      <RouterLink to="/library" class="nav-link" active-class="active">音乐库</RouterLink>
       <RouterLink to="/history" class="nav-link" active-class="active">播放历史</RouterLink>
     </div>
 
@@ -19,38 +20,68 @@
           <Icon icon="mdi:chevron-down" class="bot-chevron" :class="{ rotated: dropdownOpen }" />
         </button>
         <div v-if="dropdownOpen" class="bot-dropdown">
+          <div class="bot-dropdown-header">机器人</div>
           <div
             v-for="bot in store.bots"
             :key="bot.id"
-            class="bot-dropdown-row"
+            class="bot-card"
-          >
-            <button
-              class="bot-dropdown-item"
             :class="{ active: bot.id === store.activeBotId }"
-              @click="selectBot(bot.id)"
           >
+            <div class="bot-card-head" @click="bot.connected ? selectBot(bot.id) : undefined">
               <span class="bot-dot" :class="{ online: bot.connected }" />
-              <span class="bot-dropdown-name">{{ bot.name }}</span>
+              <span class="bot-card-name">{{ bot.name }}</span>
+              <span v-if="bot.id === store.activeBotId" class="bot-current-badge">当前</span>
               <span v-if="bot.playing && !bot.paused" class="bot-playing-badge">播放中</span>
               <span v-else-if="bot.paused" class="bot-paused-badge">已暂停</span>
               <span v-else-if="bot.connected" class="bot-idle-badge">空闲</span>
               <span v-else class="bot-offline-badge">离线</span>
-            </button>
+            </div>
+            <div class="bot-card-controls">
               <button
-              class="bot-power-btn"
+                v-if="bot.connected"
-              :class="{ online: bot.connected }"
+                class="bot-ctrl-btn danger"
-              :title="bot.connected ? `停止 ${bot.name}` : `启动 ${bot.name}`"
                 :disabled="togglingBots[bot.id]"
                 @click.stop="togglePower(bot)"
               >
-              <Icon :icon="bot.connected ? 'mdi:power' : 'mdi:power-off'" />
+                <Icon icon="mdi:link-off" /> 断开
               </button>
-            <button class="bot-link-btn" :title="`复制 ${bot.name} 的专属链接`" @click.stop="copyBotLink(bot.id)">
+              <button
+                v-else
+                class="bot-ctrl-btn primary"
+                :disabled="togglingBots[bot.id]"
+                @click.stop="togglePower(bot)"
+              >
+                <Icon icon="mdi:link-variant" /> 连接
+              </button>
+              <button
+                v-if="bot.playing || bot.paused"
+                class="bot-ctrl-btn"
+                :disabled="!bot.connected"
+                @click.stop="store.pause()"
+              >
+                <Icon icon="mdi:stop" /> 停止
+              </button>
+              <button
+                v-else
+                class="bot-ctrl-btn"
+                :disabled="!bot.connected"
+                @click.stop="store.resume()"
+              >
+                <Icon icon="mdi:play" /> 播放
+              </button>
+              <button
+                class="bot-ctrl-btn"
+                :disabled="!bot.connected || (!bot.playing && !bot.paused)"
+                @click.stop="store.next()"
+                title="下一首"
+              >
+                <Icon icon="mdi:skip-next" />
+              </button>
+              <button class="bot-ctrl-btn" @click.stop="copyBotLink(bot.id)" title="复制链接">
                 <Icon icon="mdi:link-variant" />
               </button>
             </div>
-          <div class="bot-dropdown-divider" />
+          </div>
-          <div class="bot-dropdown-hint">点击切换 · 🔗 复制专属链接</div>
         </div>
       </div>
 
@@ -227,6 +258,11 @@ onUnmounted(() => {
   @media (max-width: 1336px) {
     padding: 0 5vw;
   }
+
+  @media (max-width: 768px) {
+    padding: 0 16px;
+    height: 52px;
+  }
 }
 
 .logo {
@@ -234,11 +270,20 @@ onUnmounted(() => {
   font-weight: 700;
   color: var(--color-primary);
   margin-right: 40px;
+
+  @media (max-width: 768px) {
+    font-size: 17px;
+    margin-right: 0;
+  }
 }
 
 .nav-links {
   display: flex;
   gap: 24px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .nav-link {
@@ -266,7 +311,7 @@ onUnmounted(() => {
   opacity: 0.6;
 
   &.online {
-    background: rgba(51, 94, 234, 0.15);
+    background: var(--color-primary-15);
     color: var(--color-primary);
     opacity: 1;
   }
@@ -295,12 +340,25 @@ onUnmounted(() => {
     background: var(--bg-card);
     border-color: var(--color-primary);
   }
+
+  @media (max-width: 768px) {
+    padding: 6px 10px;
+    font-size: 12px;
+    font-weight: 600;
+    min-height: 32px;
+    gap: 6px;
+    border-radius: var(--radius-full);
+  }
 }
 
 .bot-state-mini {
   font-size: 14px;
-  &.playing { color: #22c55e; }
+  &.playing { color: var(--color-online); }
-  &.paused { color: #eab308; }
+  &.paused { color: var(--color-paused); }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .bot-chevron {
@@ -311,6 +369,10 @@ onUnmounted(() => {
   &.rotated {
     transform: rotate(180deg);
   }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .bot-dot {
@@ -321,7 +383,12 @@ onUnmounted(() => {
   flex-shrink: 0;
 
   &.online {
-    background: #22c55e;
+    background: var(--color-online);
+  }
+
+  @media (max-width: 768px) {
+    width: 8px;
+    height: 8px;
   }
 }
 
@@ -330,96 +397,83 @@ onUnmounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  @media (max-width: 768px) {
+    max-width: 80px;
+  }
 }
 
 .bot-dropdown {
   position: absolute;
   top: calc(100% + 6px);
   right: 0;
-  min-width: 200px;
+  min-width: 320px;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
-  padding: 4px;
+  padding: 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-dropdown);
   z-index: 200;
+
+  @media (max-width: 768px) {
+    position: fixed;
+    top: 52px;
+    left: 8px;
+    right: 8px;
+    min-width: auto;
+  }
 }
 
-.bot-dropdown-item {
+.bot-dropdown-header {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  padding: 6px 10px 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.bot-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 4px;
+  border: 1px solid transparent;
+  transition: background var(--transition-fast);
+
+  &.active {
+    background: var(--color-primary-12);
+    border-color: rgba(99, 102, 241, 0.25);
+  }
+}
+
+.bot-card-head {
   display: flex;
   align-items: center;
   gap: 8px;
-  flex: 1;
-  min-width: 0;
-  padding: 8px 12px;
-  border-radius: var(--radius-sm);
-  font-size: 13px;
   cursor: pointer;
-  transition: background var(--transition-fast);
-
-  &:hover {
-    background: var(--hover-bg);
 }
 
-  &.active {
+.bot-card-name {
-    background: rgba(51, 94, 234, 0.12);
-    color: var(--color-primary);
-  }
-}
-
-.bot-dropdown-row {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.bot-dropdown-name {
   flex: 1;
+  font-size: 13px;
+  font-weight: 600;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.bot-link-btn {
+.bot-current-badge {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--color-primary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--color-primary-15);
   flex-shrink: 0;
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
-  font-size: 15px;
-  opacity: 0.4;
-  transition: opacity var(--transition-fast), background var(--transition-fast);
-  cursor: pointer;
-
-  &:hover {
-    opacity: 1;
-    background: var(--hover-bg);
-  }
-}
-
-.bot-power-btn {
-  flex-shrink: 0;
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
-  font-size: 16px;
-  opacity: 0.5;
-  color: var(--text-tertiary);
-  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
-  cursor: pointer;
-
-  &:hover:not(:disabled) {
-    opacity: 1;
-    background: var(--hover-bg);
-  }
-
-  &:disabled {
-    opacity: 0.25;
-    cursor: wait;
-  }
-
-  &.online {
-    color: #22c55e;
-    opacity: 0.9;
-  }
 }
 
 .bot-playing-badge,
@@ -427,25 +481,25 @@ onUnmounted(() => {
 .bot-idle-badge,
 .bot-offline-badge {
   font-size: 11px;
-  padding: 1px 6px;
+  padding: 2px 6px;
   border-radius: 4px;
   font-weight: 500;
   flex-shrink: 0;
 }
 
 .bot-playing-badge {
-  background: rgba(34, 197, 94, 0.15);
+  background: var(--color-online-15);
-  color: #22c55e;
+  color: var(--color-online);
 }
 
 .bot-paused-badge {
-  background: rgba(234, 179, 8, 0.15);
+  background: var(--color-paused-15);
-  color: #eab308;
+  color: var(--color-paused);
 }
 
 .bot-idle-badge {
-  background: rgba(51, 94, 234, 0.12);
+  background: var(--hover-bg);
-  color: var(--color-primary);
+  color: var(--text-secondary);
 }
 
 .bot-offline-badge {
@@ -453,17 +507,47 @@ onUnmounted(() => {
   color: var(--text-tertiary);
 }
 
-.bot-dropdown-divider {
+.bot-card-controls {
-  height: 1px;
+  display: flex;
-  background: var(--border-color);
+  gap: 6px;
-  margin: 4px 0;
 }
 
-.bot-dropdown-hint {
+.bot-ctrl-btn {
-  padding: 4px 12px 6px;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--hover-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
   font-size: 11px;
-  color: var(--text-tertiary);
+  font-weight: 500;
-  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all var(--transition-fast);
+
+  &:hover:not(:disabled) {
+    background: var(--bg-card);
+    border-color: var(--color-primary);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &.primary {
+    background: var(--color-primary);
+    color: #fff;
+    border-color: var(--color-primary);
+  }
+
+  &.danger {
+    color: #ef4444;
+  }
 }
 
 .settings-btn {
@@ -471,12 +555,16 @@ onUnmounted(() => {
   opacity: 0.6;
   transition: opacity var(--transition-fast);
   &:hover { opacity: 1; }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .link-dialog-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.55);
+  background: var(--bg-modal-scrim);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -490,7 +578,7 @@ onUnmounted(() => {
   padding: 20px;
   min-width: 360px;
   max-width: 90vw;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--shadow-modal);
 }
 
 .link-dialog-title {

web/src/components/Player.vue

@@ -206,6 +206,10 @@ function cycleMode() {
   left: 0;
   right: 0;
   z-index: 100;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
 .player-bar {
@@ -326,12 +330,12 @@ function cycleMode() {
 
 .bot-badge {
   display: inline-block;
-  font-size: 10px;
+  font-size: var(--fs-micro);
-  font-weight: 600;
+  font-weight: var(--fw-semi);
   padding: 0 5px;
-  background: rgba(51, 94, 234, 0.15);
+  background: var(--color-primary-15);
   color: var(--color-primary);
-  border-radius: 3px;
+  border-radius: var(--radius-xs);
   line-height: 16px;
   white-space: nowrap;
   flex-shrink: 0;

web/src/components/Queue.vue

@@ -171,7 +171,7 @@ async function clearAndStop() {
   }
 
   &.active {
-    background: rgba(51, 94, 234, 0.1);
+    background: var(--color-primary-10);
   }
 }
 

web/src/components/SongCard.vue

@@ -18,6 +18,9 @@
       <button class="action-btn" @click.stop="$emit('play')" title="播放">
         <Icon icon="mdi:play" />
       </button>
+      <button class="action-btn" @click.stop="$emit('playNext')" title="下一首播放">
+        <Icon icon="mdi:playlist-play" />
+      </button>
       <button class="action-btn" @click.stop="$emit('add')" title="添加到队列">
         <Icon icon="mdi:playlist-plus" />
       </button>
@@ -38,6 +41,7 @@ defineProps<{
 
 defineEmits<{
   play: [];
+  playNext: [];
   add: [];
 }>();
 
@@ -64,7 +68,7 @@ function formatDuration(seconds: number): string {
   }
 
   &.active {
-    background: rgba(51, 94, 234, 0.1);
+    background: var(--color-primary-10);
   }
 }
 
@@ -97,31 +101,31 @@ function formatDuration(seconds: number): string {
 
 .platform-badge {
   flex-shrink: 0;
-  font-size: 10px;
+  font-size: var(--fs-micro);
-  font-weight: 600;
+  font-weight: var(--fw-semi);
   padding: 1px 5px;
-  border-radius: 3px;
+  border-radius: var(--radius-xs);
   line-height: 1.4;
 }
 
 .badge-netease {
-  background: rgba(232, 17, 35, 0.15);
+  background: var(--brand-netease-15);
-  color: #e81123;
+  color: var(--brand-netease);
 }
 
 .badge-qq {
-  background: rgba(18, 183, 106, 0.15);
+  background: var(--brand-qq-15);
-  color: #12b76a;
+  color: var(--brand-qq);
 }
 
 .badge-bilibili {
-  background: rgba(0, 161, 214, 0.15);
+  background: var(--brand-bilibili-15);
-  color: #00a1d6;
+  color: var(--brand-bilibili);
 }
 
 .badge-youtube {
-  background: rgba(255, 0, 0, 0.12);
+  background: var(--brand-youtube-12);
-  color: #ff0000;
+  color: var(--brand-youtube);
 }
 
 .song-artist {
@@ -152,6 +156,15 @@ function formatDuration(seconds: number): string {
   transition: opacity var(--transition-fast);
 }
 
+// Touch devices have no :hover, so the parent-hover-reveals-actions
+// pattern leaves all action buttons invisible. Always show on coarse-
+// pointer (touch) inputs — this is also where bigger tap targets matter.
+@media (pointer: coarse) {
+  .song-actions {
+    opacity: 1;
+  }
+}
+
 .action-btn {
   font-size: 18px;
   padding: 4px;

web/src/components/SourceTabs.vue

@@ -0,0 +1,94 @@
+<template>
+  <div v-if="sources.length > 0" class="source-tabs">
+    <template v-if="sources.length >= 2">
+      <button
+        v-for="src in sources"
+        :key="src"
+        type="button"
+        class="source-tab"
+        :class="{ active: src === modelValue }"
+        @click="$emit('update:modelValue', src)"
+      >
+        {{ LABELS[src] }}
+      </button>
+    </template>
+    <span v-else class="source-tab-label" :title="`数据来自${LABELS[sources[0]]}`">
+      {{ LABELS[sources[0]] }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Source } from '../stores/player.js';
+
+const LABELS: Record<Source, string> = {
+  netease: '网易云',
+  qq: 'QQ',
+};
+
+defineProps<{
+  modelValue: Source;
+  sources: Source[];
+}>();
+
+defineEmits<{
+  'update:modelValue': [value: Source];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.source-tabs {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: 12px;
+  align-items: center;
+}
+
+.source-tab {
+  padding: 4px 10px;
+  min-height: 28px;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: color var(--transition-fast), background var(--transition-fast);
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--hover-bg);
+  }
+
+  &.active {
+    color: var(--color-primary);
+    background: var(--color-primary-12);
+    font-weight: var(--fw-semi);
+  }
+}
+
+// Single-source mode: not interactive, but tells the user which platform
+// they're looking at instead of leaving them guessing.
+.source-tab-label {
+  padding: 4px 10px;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-medium);
+  color: var(--text-tertiary);
+  background: var(--hover-bg);
+  border-radius: var(--radius-sm);
+}
+
+@media (max-width: 768px) {
+  .source-tabs {
+    margin-left: 8px;
+    gap: 2px;
+  }
+
+  .source-tab {
+    padding: 6px 10px;
+    min-height: 36px; // larger touch target on mobile
+    font-size: var(--fs-xs);
+  }
+}
+</style>

web/src/components/Toast.vue

@@ -0,0 +1,106 @@
+<template>
+  <Transition name="toast">
+    <div v-if="visible && current" class="toast" :class="`toast--${current.type}`">
+      <Icon :icon="current.type === 'error' ? 'mdi:alert-circle' : 'mdi:information'" class="toast-icon" />
+      <span class="toast-msg">{{ current.message }}</span>
+      <button class="toast-close" @click="visible = false" aria-label="关闭">
+        <Icon icon="mdi:close" />
+      </button>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onUnmounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import { usePlayerStore } from '../stores/player.js';
+
+const store = usePlayerStore();
+const visible = ref(false);
+const current = ref<{ id: number; message: string; type: 'error' | 'info' } | null>(null);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+  () => store.notification?.id,
+  () => {
+    if (!store.notification) return;
+    current.value = store.notification;
+    visible.value = true;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      visible.value = false;
+    }, current.value.type === 'error' ? 5000 : 3000);
+  }
+);
+
+onUnmounted(() => {
+  if (timer) clearTimeout(timer);
+});
+</script>
+
+<style lang="scss" scoped>
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: calc(var(--player-height) + 24px);
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  max-width: min(90vw, 480px);
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-dropdown);
+  font-size: var(--fs-body);
+  color: var(--text-primary);
+  z-index: 1000;
+
+  @media (max-width: 768px) {
+    bottom: calc(var(--player-height) + 60px);  // sit above mobile tabbar
+  }
+}
+
+.toast--error {
+  border-color: var(--brand-netease);
+  .toast-icon { color: var(--brand-netease); }
+}
+
+.toast--info {
+  border-color: var(--color-primary);
+  .toast-icon { color: var(--color-primary); }
+}
+
+.toast-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.toast-msg {
+  flex: 1;
+  line-height: 1.4;
+}
+
+.toast-close {
+  flex-shrink: 0;
+  font-size: 18px;
+  color: var(--text-tertiary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  &:hover { color: var(--text-primary); }
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(8px);
+}
+</style>

web/src/router/index.ts

@@ -13,6 +13,11 @@ const router = createRouter({
       name: 'search',
       component: () => import('../views/Search.vue'),
     },
+    {
+      path: '/library',
+      name: 'library',
+      component: () => import('../views/Library.vue'),
+    },
     {
       path: '/playlist/:id',
       name: 'playlist',

web/src/stores/player.ts

@@ -11,6 +11,8 @@ export interface Song {
   platform: 'netease' | 'qq' | 'bilibili' | 'youtube';
 }
 
+export type Source = 'netease' | 'qq';
+
 export interface BotStatus {
   id: string;
   name: string;
@@ -54,12 +56,17 @@ export const usePlayerStore = defineStore('player', {
     timings: {} as Record<string, TimingState>,
     theme: 'dark' as 'dark' | 'light',
 
-    // Home page cache
+    // Home page cache, split by source
-    recommendPlaylists: [] as PlaylistItem[],
+    recommendPlaylists: { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
-    dailySongs: [] as Song[],
+    dailySongs:         { netease: [] as Song[],         qq: [] as Song[] },
-    userPlaylists: [] as PlaylistItem[],
+    userPlaylists:      { netease: [] as PlaylistItem[], qq: [] as PlaylistItem[] },
     bilibiliPopular: [] as Song[],
+    authStatus: { netease: false, qq: false },
     lastFetchTime: 0,
+
+    // Transient notification for surfacing failures (e.g., "song not playable")
+    // to a global Toast. Bumped `id` triggers re-render of the same message.
+    notification: null as { id: number; message: string; type: 'error' | 'info' } | null,
   }),
 
   getters: {
@@ -91,6 +98,13 @@ export const usePlayerStore = defineStore('player', {
       if (this.isPaused) return Math.min(timing.serverElapsed, maxDuration);
       return Math.min(timing.serverElapsed + (Date.now() - timing.serverSyncTime) / 1000, maxDuration);
     },
+    /** Sources that are currently logged in. Order: netease before qq. */
+    availableSources(): Source[] {
+      const s: Source[] = [];
+      if (this.authStatus.netease) s.push('netease');
+      if (this.authStatus.qq) s.push('qq');
+      return s;
+    },
   },
 
   actions: {
@@ -259,13 +273,30 @@ export const usePlayerStore = defineStore('player', {
       this._syncAfterAction();
     },
 
+    notify(message: string, type: 'error' | 'info' = 'info') {
+      this.notification = { id: Date.now(), message, type };
+    },
+
     async playSong(song: Song) {
       if (!this.activeBotId) return;
-      await axios.post(`/api/player/${this.activeBotId}/play-song`, { song });
+      const res = await axios.post(`/api/player/${this.activeBotId}/play-song`, { song });
+      if (res.data?.ok === false && res.data?.message) {
+        this.notify(res.data.message, 'error');
+      }
       this._setTiming(this.activeBotId, { serverElapsed: 0 });
       this._syncAfterAction();
     },
 
+    async playNextSong(song: Song) {
+      if (!this.activeBotId) return;
+      const res = await axios.post(`/api/player/${this.activeBotId}/play-next-song`, { song });
+      if (res.data?.message) {
+        this.notify(res.data.message, res.data.ok === false ? 'error' : 'info');
+      }
+      // Refresh queue so the inserted item shows up in the side panel
+      this.fetchQueue();
+    },
+
     async addToQueue(query: string, platform = 'netease') {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/add`, { query, platform });
@@ -283,7 +314,10 @@ export const usePlayerStore = defineStore('player', {
 
     async playPlaylist(playlistId: string, platform = 'netease') {
       if (!this.activeBotId) return;
-      await axios.post(`/api/player/${this.activeBotId}/play-playlist`, { playlistId, platform });
+      const res = await axios.post(`/api/player/${this.activeBotId}/play-playlist`, { playlistId, platform });
+      if (res.data?.message) {
+        this.notify(res.data.message, res.data.ok === false ? 'error' : 'info');
+      }
       this._setTiming(this.activeBotId, { serverElapsed: 0 });
       this._syncAfterAction();
     },
@@ -350,31 +384,92 @@ export const usePlayerStore = defineStore('player', {
     },
 
     async fetchHomeData() {
-      if (this.lastFetchTime > 0 && Date.now() - this.lastFetchTime < HOME_CACHE_TTL) {
+      // Always check auth status first — if it changed since the cached
+      // fetch (e.g., user logged in/out as a different account), the
+      // cached playlists belong to a different user and we MUST refetch.
+      const [neAuthRes, qqAuthRes] = await Promise.allSettled([
+        axios.get('/api/auth/status', { params: { platform: 'netease' } }),
+        axios.get('/api/auth/status', { params: { platform: 'qq' } }),
+      ]);
+      const newAuth = {
+        netease: neAuthRes.status === 'fulfilled' && !!neAuthRes.value.data?.loggedIn,
+        qq:      qqAuthRes.status === 'fulfilled' && !!qqAuthRes.value.data?.loggedIn,
+      };
+      const authChanged =
+        newAuth.netease !== this.authStatus.netease || newAuth.qq !== this.authStatus.qq;
+      this.authStatus.netease = newAuth.netease;
+      this.authStatus.qq = newAuth.qq;
+
+      // Cache hit only if auth is unchanged AND within TTL.
+      if (
+        !authChanged &&
+        this.lastFetchTime > 0 &&
+        Date.now() - this.lastFetchTime < HOME_CACHE_TTL
+      ) {
         return;
       }
 
-      const [playlistRes, dailyRes, userRes, biliRes] = await Promise.allSettled([
+      // 2. NetEase data: recommend playlists work anonymously; daily/user
-        axios.get('/api/music/recommend/playlists'),
+      // playlists need login but Promise.allSettled isolates failures.
-        axios.get('/api/music/recommend/songs'),
+      const neteasePromises = [
-        axios.get('/api/music/user/playlists'),
+        axios.get('/api/music/recommend/playlists', { params: { platform: 'netease' } }),
-        axios.get('/api/music/bilibili/popular?limit=12'),
+        axios.get('/api/music/recommend/songs',     { params: { platform: 'netease' } }),
+        axios.get('/api/music/user/playlists',      { params: { platform: 'netease' } }),
+      ];
+
+      // 3. QQ data: only fetch when QQ is logged in. When not logged in,
+      // resolve to empty payloads so the same indexed handling works.
+      const emptyPlaylists = { data: { playlists: [] } };
+      const emptySongs     = { data: { songs: [] } };
+      const qqPromises = this.authStatus.qq
+        ? [
+            axios.get('/api/music/recommend/playlists', { params: { platform: 'qq' } }),
+            axios.get('/api/music/recommend/songs',     { params: { platform: 'qq' } }),
+            axios.get('/api/music/user/playlists',      { params: { platform: 'qq' } }),
+          ]
+        : [
+            Promise.resolve(emptyPlaylists),
+            Promise.resolve(emptySongs),
+            Promise.resolve(emptyPlaylists),
+          ];
+
+      const biliPromise = axios.get('/api/music/bilibili/popular?limit=12');
+
+      const results = await Promise.allSettled([
+        ...neteasePromises,
+        ...qqPromises,
+        biliPromise,
       ]);
 
-      if (playlistRes.status === 'fulfilled') {
+      const [neRecPL, neDaily, neUserPL, qqRecPL, qqDaily, qqUserPL, bili] = results;
-        this.recommendPlaylists = playlistRes.value.data.playlists;
+
-      }
+      this.recommendPlaylists.netease =
-      if (dailyRes.status === 'fulfilled') {
+        neRecPL.status === 'fulfilled' ? (neRecPL.value.data.playlists ?? []) : [];
-        this.dailySongs = dailyRes.value.data.songs;
+      this.dailySongs.netease =
-      }
+        neDaily.status === 'fulfilled' ? (neDaily.value.data.songs ?? []) : [];
-      if (userRes.status === 'fulfilled') {
+      this.userPlaylists.netease =
-        this.userPlaylists = userRes.value.data.playlists;
+        neUserPL.status === 'fulfilled' ? (neUserPL.value.data.playlists ?? []) : [];
-      }
+      this.recommendPlaylists.qq =
-      if (biliRes.status === 'fulfilled') {
+        qqRecPL.status === 'fulfilled' ? (qqRecPL.value.data.playlists ?? []) : [];
-        this.bilibiliPopular = biliRes.value.data.songs;
+      this.dailySongs.qq =
+        qqDaily.status === 'fulfilled' ? (qqDaily.value.data.songs ?? []) : [];
+      this.userPlaylists.qq =
+        qqUserPL.status === 'fulfilled' ? (qqUserPL.value.data.playlists ?? []) : [];
+      // bilibili popular: keep previous value on failure (it's an anonymous endpoint
+      // unrelated to user auth state, and stale popular results are harmless)
+      if (bili.status === 'fulfilled') {
+        this.bilibiliPopular = bili.value.data.songs ?? [];
       }
 
+      // Only mark as fetched if at least the auth-status calls succeeded —
+      // a fully failed fetch (network blip / server down) should NOT be
+      // cached for 5 minutes, otherwise the user has to hard-reload to
+      // recover when connectivity returns.
+      const authOk =
+        neAuthRes.status === 'fulfilled' || qqAuthRes.status === 'fulfilled';
+      if (authOk) {
         this.lastFetchTime = Date.now();
+      }
     },
   },
 });

web/src/stores/sourceTabs.ts

@@ -0,0 +1,42 @@
+import type { Source } from './player.js';
+
+const STORAGE_KEY = 'source-tabs';
+
+export type TabKey =
+  | 'home.recommend'
+  | 'home.daily'
+  | 'home.user'
+  | 'library.user';
+
+function readAll(): Partial<Record<TabKey, Source>> {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    // typeof null === 'object' and typeof [] === 'object' — both pass a
+    // naive check but neither is a valid record. Reject explicitly so a
+    // corrupted / manipulated value can't smuggle wrong shapes through.
+    if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return {};
+    }
+    return parsed as Partial<Record<TabKey, Source>>;
+  } catch {
+    return {};
+  }
+}
+
+export function loadTabSource(key: TabKey, fallback: Source = 'netease'): Source {
+  const all = readAll();
+  const v = all[key];
+  return v === 'netease' || v === 'qq' ? v : fallback;
+}
+
+export function saveTabSource(key: TabKey, value: Source): void {
+  try {
+    const all = readAll();
+    all[key] = value;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
+  } catch {
+    // localStorage may be unavailable (private browsing); silently no-op
+  }
+}

web/src/styles/variables.scss

@@ -1,33 +1,95 @@
-// YesPlayMusic-inspired design tokens
+// TSMusicBot Design System — canonical tokens
 
 :root {
-  // Fonts
+  // Typography
   --font-primary: 'Barlow', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace;
+
+  --fs-hero:  22px;
+  --fs-h1:    20px;
+  --fs-h2:    17px;
+  --fs-h3:    16px;
+  --fs-body:  14px;
+  --fs-sm:    13px;
+  --fs-xs:    12px;
+  --fs-2xs:   11px;
+  --fs-micro: 10px;
+
+  --fw-regular: 400;
+  --fw-medium:  500;
+  --fw-semi:    600;
+  --fw-bold:    700;
+  --fw-black:   800;
+
+  --lh-tight:  1.2;
+  --lh-normal: 1.4;
+  --lh-body:   1.5;
 
   // Spacing
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  36px;
+  --space-10: 80px;
+
+  // Layout
   --navbar-height: 56px;
   --player-height: 56px;
+  --page-gutter: 10vw;
 
   // Radius
+  --radius-xs: 3px;
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 14px;
   --radius-xl: 20px;
+  --radius-full: 9999px;
 
   // Transitions
   --transition-fast: 0.2s ease;
   --transition-normal: 0.3s ease;
+  --ease-cinematic: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+  // Shadows
+  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.35);
 
   // Accent
   --color-primary: #335eea;
   --color-primary-bg: #eaeffd;
+  --color-primary-15: rgba(51, 94, 234, 0.15);
+  --color-primary-10: rgba(51, 94, 234, 0.10);
+  --color-primary-12: rgba(51, 94, 234, 0.12);
+  --gradient-fm: linear-gradient(135deg, #335eea, #6366f1);
+
+  // Semantic (theme-invariant)
+  --color-online: #22c55e;
+  --color-online-15: rgba(34, 197, 94, 0.15);
+  --color-paused: #eab308;
+  --color-paused-15: rgba(234, 179, 8, 0.15);
+
+  // Platform brand
+  --brand-netease: #e81123;
+  --brand-netease-15: rgba(232, 17, 35, 0.15);
+  --brand-qq: #12b76a;
+  --brand-qq-15: rgba(18, 183, 106, 0.15);
+  --brand-bilibili: #00a1d6;
+  --brand-bilibili-15: rgba(0, 161, 214, 0.15);
+  --brand-youtube: #ff0000;
+  --brand-youtube-12: rgba(255, 0, 0, 0.12);
 }
 
+// Dark theme (default)
+:root,
 [data-theme='dark'] {
   --bg-primary: #222222;
   --bg-secondary: #323232;
   --bg-card: rgba(255, 255, 255, 0.04);
   --bg-navbar: rgba(34, 34, 34, 0.86);
+  --bg-modal-scrim: rgba(0, 0, 0, 0.55);
   --text-primary: #ffffff;
   --text-secondary: rgba(255, 255, 255, 0.58);
   --text-tertiary: rgba(255, 255, 255, 0.38);
@@ -40,6 +102,7 @@
   --bg-secondary: #f5f5f7;
   --bg-card: rgba(0, 0, 0, 0.02);
   --bg-navbar: rgba(255, 255, 255, 0.86);
+  --bg-modal-scrim: rgba(0, 0, 0, 0.35);
   --text-primary: #000000;
   --text-secondary: rgba(0, 0, 0, 0.58);
   --text-tertiary: rgba(0, 0, 0, 0.38);

web/src/views/History.vue

@@ -20,6 +20,7 @@
         :index="i + 1"
         :active="store.currentSong?.id === song.id"
         @play="store.playSong(song)"
+        @playNext="store.playNextSong(song)"
         @add="store.addSong(song)"
       />
     </div>

web/src/views/Home.vue

@@ -34,11 +34,14 @@
     </section>
 
     <!-- 每日推荐 -->
-    <section class="section" v-if="store.dailySongs.length > 0">
+    <section class="section" v-if="dailyAvailable.length > 0">
-      <h2 class="section-title">每日推荐</h2>
+      <h2 class="section-title">
+        每日推荐
+        <SourceTabs v-model="dailySource" :sources="dailyAvailable" />
+      </h2>
       <div class="daily-grid">
         <div
-          v-for="song in store.dailySongs.slice(0, 12)"
+          v-for="song in (store.dailySongs[dailySourceSafe] ?? []).slice(0, 12)"
           :key="song.id"
           class="daily-card hover-scale"
           @click="store.playSong(song)"
@@ -51,11 +54,14 @@
     </section>
 
     <!-- 推荐歌单 -->
-    <section class="section" v-if="store.recommendPlaylists.length > 0">
+    <section class="section" v-if="recommendAvailable.length > 0">
-      <h2 class="section-title">推荐歌单</h2>
+      <h2 class="section-title">
+        推荐歌单
+        <SourceTabs v-model="recommendSource" :sources="recommendAvailable" />
+      </h2>
       <div class="playlist-grid">
         <RouterLink
-          v-for="playlist in store.recommendPlaylists"
+          v-for="playlist in (store.recommendPlaylists[recommendSourceSafe] ?? [])"
           :key="playlist.id"
           :to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
           class="playlist-card hover-scale"
@@ -67,10 +73,11 @@
     </section>
 
     <!-- 我的歌单 -->
-    <section class="section" v-if="store.userPlaylists.length > 0">
+    <section class="section" v-if="userAvailable.length > 0">
       <h2 class="section-title">
         我的歌单
-        <span class="section-count">{{ store.userPlaylists.length }}</span>
+        <span v-if="currentUserPlaylists.length > 0" class="section-count">{{ currentUserPlaylists.length }}</span>
+        <SourceTabs v-model="userSource" :sources="userAvailable" />
       </h2>
       <div class="playlist-grid">
         <RouterLink
@@ -85,12 +92,12 @@
         </RouterLink>
       </div>
       <button
-        v-if="store.userPlaylists.length > USER_PLAYLIST_LIMIT"
+        v-if="currentUserPlaylists.length > USER_PLAYLIST_LIMIT"
         class="expand-btn"
         @click="userPlaylistsExpanded = !userPlaylistsExpanded"
       >
         <Icon :icon="userPlaylistsExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
-        {{ userPlaylistsExpanded ? '收起' : `展开全部 ${store.userPlaylists.length} 个歌单` }}
+        {{ userPlaylistsExpanded ? '收起' : `展开全部 ${currentUserPlaylists.length} 个歌单` }}
       </button>
     </section>
 
@@ -117,19 +124,60 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
-import { usePlayerStore, type Song } from '../stores/player.js';
+import { usePlayerStore, type Song, type Source } from '../stores/player.js';
+import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
 import CoverArt from '../components/CoverArt.vue';
+import SourceTabs from '../components/SourceTabs.vue';
 
 const store = usePlayerStore();
 const USER_PLAYLIST_LIMIT = 20;
 const userPlaylistsExpanded = ref(false);
+
+// Available sources per section.
+// Recommend playlists work anonymously on netease, so it's always available;
+// QQ requires login. This intentionally differs from dailyAvailable/userAvailable.
+const recommendAvailable = computed<Source[]>(() => {
+  const s: Source[] = ['netease'];
+  if (store.authStatus.qq) s.push('qq');
+  return s;
+});
+const dailyAvailable = computed<Source[]>(() => store.availableSources);
+const userAvailable = computed<Source[]>(() => store.availableSources);
+
+// Persisted active source per section.
+const recommendSource = ref<Source>(loadTabSource('home.recommend'));
+const dailySource     = ref<Source>(loadTabSource('home.daily'));
+const userSource      = ref<Source>(loadTabSource('home.user'));
+
+watch(recommendSource, (v) => saveTabSource('home.recommend', v));
+watch(dailySource,     (v) => saveTabSource('home.daily',     v));
+watch(userSource,      (v) => saveTabSource('home.user',      v));
+
+// Fallback when persisted source is no longer available.
+const recommendSourceSafe = computed<Source>(() =>
+  recommendAvailable.value.includes(recommendSource.value)
+    ? recommendSource.value
+    : recommendAvailable.value[0] ?? 'netease'
+);
+const dailySourceSafe = computed<Source>(() =>
+  dailyAvailable.value.includes(dailySource.value)
+    ? dailySource.value
+    : dailyAvailable.value[0] ?? 'netease'
+);
+const userSourceSafe = computed<Source>(() =>
+  userAvailable.value.includes(userSource.value)
+    ? userSource.value
+    : userAvailable.value[0] ?? 'netease'
+);
+
+const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
 const visibleUserPlaylists = computed(() =>
   userPlaylistsExpanded.value
-    ? store.userPlaylists
+    ? currentUserPlaylists.value
-    : store.userPlaylists.slice(0, USER_PLAYLIST_LIMIT)
+    : currentUserPlaylists.value.slice(0, USER_PLAYLIST_LIMIT)
 );
 
 async function playFm() {
@@ -179,6 +227,10 @@ onMounted(() => {
 
 .section {
   margin-bottom: 36px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 28px;
+  }
 }
 
 .section-title {
@@ -188,6 +240,11 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 8px;
+
+  @media (max-width: 768px) {
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
 }
 
 .section-count {
@@ -223,7 +280,7 @@ onMounted(() => {
   justify-content: center;
   width: 24px;
   height: 24px;
-  background: #00a1d6;
+  background: var(--brand-bilibili);
   color: white;
   border-radius: 4px;
   font-size: 14px;
@@ -317,6 +374,7 @@ onMounted(() => {
 
   @media (max-width: 1200px) { grid-template-columns: repeat(4, 1fr); }
   @media (max-width: 900px) { grid-template-columns: repeat(3, 1fr); }
+  @media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); gap: 14px; }
 }
 
 .daily-card {
@@ -348,6 +406,7 @@ onMounted(() => {
 
   @media (max-width: 1200px) { grid-template-columns: repeat(4, 1fr); }
   @media (max-width: 900px) { grid-template-columns: repeat(3, 1fr); }
+  @media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); gap: 14px; }
 }
 
 .playlist-card {

web/src/views/Library.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="library-page">
+    <h1 class="page-title">音乐库</h1>
+
+    <!-- 我的歌单 -->
+    <section class="section" v-if="userAvailable.length > 0">
+      <h2 class="section-title">
+        我的歌单
+        <span v-if="currentUserPlaylists.length > 0" class="section-count">{{ currentUserPlaylists.length }}</span>
+        <SourceTabs v-model="userSource" :sources="userAvailable" />
+      </h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="pl in currentUserPlaylists"
+          :key="pl.id"
+          :to="`/playlist/${pl.id}?platform=${pl.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ pl.name }}</div>
+          <div class="playlist-count">{{ pl.songCount }} 首</div>
+        </RouterLink>
+      </div>
+    </section>
+
+    <!-- 最近播放 -->
+    <section class="section">
+      <h2 class="section-title">最近播放</h2>
+      <div v-if="historyLoading" class="loading">加载中...</div>
+      <div v-else-if="history.length === 0" class="empty">暂无播放记录</div>
+      <div v-else class="song-list">
+        <SongCard
+          v-for="(song, i) in history.slice(0, 10)"
+          :key="`hist-${song.id}-${i}`"
+          :song="song"
+          :index="i + 1"
+          :active="store.currentSong?.id === song.id"
+          @play="store.play(song.name, song.platform)"
+          @playNext="store.playNextSong(song)"
+          @add="store.addToQueue(song.name, song.platform)"
+        />
+      </div>
+    </section>
+
+    <div v-if="!historyLoading && userAvailable.length === 0 && history.length === 0" class="empty-state">
+      <Icon icon="mdi:music-box-outline" class="empty-icon" />
+      <div>登录网易云或QQ音乐后，这里将显示你的歌单和播放记录</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { Icon } from '@iconify/vue';
+import axios from 'axios';
+import { usePlayerStore, type Song, type Source } from '../stores/player.js';
+import { loadTabSource, saveTabSource } from '../stores/sourceTabs.js';
+import CoverArt from '../components/CoverArt.vue';
+import SongCard from '../components/SongCard.vue';
+import SourceTabs from '../components/SourceTabs.vue';
+
+const store = usePlayerStore();
+
+const history = ref<Song[]>([]);
+const historyLoading = ref(true);
+
+const userAvailable = computed<Source[]>(() => store.availableSources);
+
+const userSource = ref<Source>(loadTabSource('library.user'));
+watch(userSource, (v) => saveTabSource('library.user', v));
+
+const userSourceSafe = computed<Source>(() =>
+  userAvailable.value.includes(userSource.value)
+    ? userSource.value
+    : userAvailable.value[0] ?? 'netease'
+);
+
+const currentUserPlaylists = computed(() => store.userPlaylists[userSourceSafe.value] ?? []);
+
+onMounted(async () => {
+  if (!store.activeBotId) {
+    await store.fetchBots();
+  }
+
+  store.fetchHomeData();
+
+  if (store.activeBotId) {
+    try {
+      const res = await axios.get(`/api/player/${store.activeBotId}/history`);
+      history.value = res.data.history ?? [];
+    } catch {
+      // API may not be ready
+    }
+  }
+
+  historyLoading.value = false;
+});
+</script>
+
+<style lang="scss" scoped>
+.page-title {
+  font-size: var(--fs-hero);
+  font-weight: var(--fw-bold);
+  margin-bottom: 24px;
+}
+
+.section {
+  margin-bottom: 36px;
+}
+
+.section-title {
+  font-size: var(--fs-hero);
+  font-weight: var(--fw-bold);
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-count {
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
+  color: var(--text-tertiary);
+}
+
+.playlist-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 24px;
+
+  @media (max-width: 1200px) { grid-template-columns: repeat(4, 1fr); }
+  @media (max-width: 900px) { grid-template-columns: repeat(3, 1fr); }
+}
+
+.playlist-card {
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.playlist-name {
+  margin-top: 8px;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.playlist-count {
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+  margin-top: 2px;
+}
+
+.song-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-secondary);
+}
+
+.empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--text-tertiary);
+  font-size: var(--fs-body);
+}
+
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: var(--text-tertiary);
+  font-size: var(--fs-body);
+}
+
+.empty-icon {
+  font-size: 48px;
+  opacity: 0.3;
+  margin-bottom: 16px;
+}
+</style>

web/src/views/Playlist.vue

@@ -32,6 +32,7 @@
           :index="i + 1"
           :active="store.currentSong?.id === song.id"
           @play="store.playSong(song)"
+          @playNext="store.playNextSong(song)"
           @add="store.addSong(song)"
         />
       </div>
@@ -77,20 +78,37 @@ onMounted(async () => {
   const id = route.params.id as string;
   const platform = (route.query.platform as string) || 'netease';
 
-  try {
+  // allSettled, not Promise.all — if detail 404s but songs is fine
-    const [detailRes, songsRes] = await Promise.all([
+  // (e.g., a QQ playlist whose detail endpoint flaked but the song
+  // list resolved), we still want to show the songs rather than
+  // the "歌单不存在" empty state.
+  const [detailRes, songsRes] = await Promise.allSettled([
     axios.get(`/api/music/playlist/${id}/detail`, { params: { platform } }),
     axios.get(`/api/music/playlist/${id}`, { params: { platform } }),
   ]);
-    playlist.value = detailRes.data.playlist;
+
-    songs.value = songsRes.data.songs;
+  const detail = detailRes.status === 'fulfilled' ? detailRes.value.data?.playlist : null;
-  } catch (err: any) {
+  const songList = songsRes.status === 'fulfilled' ? (songsRes.value.data?.songs ?? []) : [];
-    console.error('Failed to load playlist:', err?.response?.status, err?.message);
+
+  if (detail) {
+    playlist.value = detail;
+  } else if (songList.length > 0) {
+    // Fall back to a stub built from the route + first song's cover.
+    playlist.value = {
+      id,
+      name: '歌单',
+      description: '',
+      coverUrl: songList[0]?.coverUrl ?? '',
+      songCount: songList.length,
+    };
+  } else {
     playlist.value = null;
-    songs.value = [];
+    if (detailRes.status === 'rejected') {
-  } finally {
+      console.error('Failed to load playlist detail:', (detailRes.reason as any)?.response?.status, (detailRes.reason as any)?.message);
-    loading.value = false;
     }
+  }
+  songs.value = songList;
+  loading.value = false;
 });
 </script>
 

web/src/views/Search.vue

@@ -28,6 +28,7 @@
         :index="i + 1"
         :active="store.currentSong?.id === song.id"
         @play="store.playSong(song)"
+        @playNext="store.playNextSong(song)"
         @add="store.addSong(song)"
       />
     </div>

web/src/views/Settings.vue

@@ -397,6 +397,52 @@
         </div>
       </div>
     </section>
+
+    <!-- Bot Profile (TeamSpeak Behavior) -->
+    <section class="settings-section">
+      <h2 class="section-title">机器人 Profile（TeamSpeak 行为）</h2>
+      <p class="profile-section-hint">控制 bot 在 TeamSpeak 上自动同步歌曲信息的方式。⚠️ 标记的项会触发频道里所有人的提示音。</p>
+      <div v-if="store.bots.length === 0" class="empty-hint">还没有机器人，先在上面创建一个。</div>
+      <div v-else class="profile-bot-list">
+        <div v-for="bot in store.bots" :key="bot.id" class="profile-bot">
+          <button
+            class="profile-bot-header"
+            :class="{ expanded: profileExpanded[bot.id] }"
+            @click="toggleProfileExpanded(bot.id)"
+          >
+            <Icon :icon="profileExpanded[bot.id] ? 'mdi:chevron-down' : 'mdi:chevron-right'" />
+            <span class="profile-bot-name">{{ bot.name }}</span>
+          </button>
+          <div v-if="profileExpanded[bot.id]" class="profile-toggles">
+            <div v-if="profileLoadError[bot.id]" class="profile-loading profile-error">
+              {{ profileLoadError[bot.id] }}
+              <button class="btn-link" @click="loadProfileConfig(bot.id)">重试</button>
+            </div>
+            <div v-else-if="!profileConfigs[bot.id]" class="profile-loading">加载中...</div>
+            <label
+              v-else
+              v-for="t in PROFILE_TOGGLES"
+              :key="t.key"
+              class="profile-toggle"
+            >
+              <div class="profile-toggle-text">
+                <div class="profile-toggle-label">
+                  {{ t.label }}
+                  <span v-if="t.warning" class="profile-warn-tag">⚠️ {{ t.warning }}</span>
+                </div>
+                <div class="profile-toggle-hint">{{ t.hint }}</div>
+              </div>
+              <input
+                type="checkbox"
+                class="profile-toggle-switch"
+                :checked="profileConfigs[bot.id][t.key]"
+                @change="updateProfile(bot.id, t.key, ($event.target as HTMLInputElement).checked)"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -703,6 +749,72 @@ async function saveIdleTimeout() {
   } catch { /* ignore */ }
 }
 
+// --- Bot Profile config ---
+interface ProfileConfig {
+  avatarEnabled: boolean;
+  descriptionEnabled: boolean;
+  nicknameEnabled: boolean;
+  awayStatusEnabled: boolean;
+  channelDescEnabled: boolean;
+  nowPlayingMsgEnabled: boolean;
+}
+
+const PROFILE_TOGGLES: ReadonlyArray<{
+  key: keyof ProfileConfig;
+  label: string;
+  hint: string;
+  warning: string | null;
+}> = [
+  { key: 'avatarEnabled',       label: '同步头像',           hint: '使用专辑封面作为 bot 头像',                  warning: null },
+  { key: 'descriptionEnabled',  label: '同步个人描述',       hint: '在 bot 简介里显示当前播放的歌曲',            warning: null },
+  { key: 'nicknameEnabled',     label: '同步昵称',           hint: 'bot 昵称跟着歌名变化',                       warning: null },
+  { key: 'awayStatusEnabled',   label: '走开状态',           hint: '停止播放时把 bot 设为"走开"',               warning: null },
+  { key: 'channelDescEnabled',  label: '更新频道描述',       hint: '把"正在播放"信息写入频道描述',             warning: '频道编辑提示音' },
+  { key: 'nowPlayingMsgEnabled',label: '推送"正在播放"消息', hint: '切歌时在频道里发一条文字消息',               warning: '新消息提示音' },
+];
+
+const profileConfigs = reactive<Record<string, ProfileConfig>>({});
+const profileExpanded = reactive<Record<string, boolean>>({});
+const profileLoadError = reactive<Record<string, string | null>>({});
+
+async function loadProfileConfig(botId: string) {
+  if (profileConfigs[botId]) return;
+  profileLoadError[botId] = null;
+  try {
+    const res = await axios.get(`/api/player/${botId}/profile`);
+    // Defensive: a 200 response with non-object body (empty / proxy
+    // injection / etc.) would otherwise leave the row stuck on
+    // "加载中..." because profileConfigs[botId] would be falsy.
+    if (!res.data || typeof res.data !== 'object' || typeof res.data.avatarEnabled !== 'boolean') {
+      profileLoadError[botId] = '响应格式异常';
+      return;
+    }
+    profileConfigs[botId] = res.data;
+  } catch (err: any) {
+    profileLoadError[botId] = err?.response?.status === 404
+      ? '机器人未加载'
+      : '加载失败，请重试';
+  }
+}
+
+function toggleProfileExpanded(botId: string) {
+  profileExpanded[botId] = !profileExpanded[botId];
+  if (profileExpanded[botId]) loadProfileConfig(botId);
+}
+
+async function updateProfile(botId: string, key: keyof ProfileConfig, value: boolean) {
+  const cfg = profileConfigs[botId];
+  if (!cfg) return;
+  const prev = cfg[key];
+  cfg[key] = value; // optimistic
+  try {
+    const res = await axios.put(`/api/player/${botId}/profile`, { [key]: value });
+    profileConfigs[botId] = res.data;
+  } catch {
+    cfg[key] = prev; // revert
+  }
+}
+
 onMounted(() => {
   store.fetchBots(); // Refresh bot status on page visit
   checkAuthStatus();
@@ -820,16 +932,16 @@ onUnmounted(() => {
   background: var(--border-color);
   color: var(--text-tertiary);
   &.online {
-    background: rgba(51, 94, 234, 0.15);
+    background: var(--color-primary-15);
     color: var(--color-primary);
   }
   &.playing {
-    background: rgba(76, 175, 80, 0.15);
+    background: var(--color-online-15);
-    color: #4caf50;
+    color: var(--color-online);
   }
   &.paused {
-    background: rgba(255, 152, 0, 0.15);
+    background: var(--color-paused-15);
-    color: #ff9800;
+    color: var(--color-paused);
   }
 }
 
@@ -853,7 +965,7 @@ onUnmounted(() => {
   color: var(--color-primary);
 
   &.bilibili-icon {
-    color: #00a1d6;
+    color: var(--brand-bilibili);
   }
 }
 
@@ -865,7 +977,7 @@ onUnmounted(() => {
 .account-status {
   font-size: 12px;
   color: var(--text-tertiary);
-  &.logged { color: #4caf50; }
+  &.logged { color: var(--color-online); }
 }
 
 .login-methods {
@@ -888,7 +1000,7 @@ onUnmounted(() => {
 
   &:hover { border-color: var(--color-primary); color: var(--color-primary); }
   &.active {
-    background: rgba(51, 94, 234, 0.1);
+    background: var(--color-primary-10);
     border-color: var(--color-primary);
     color: var(--color-primary);
   }
@@ -1012,7 +1124,7 @@ onUnmounted(() => {
   &:hover { border-color: var(--border-color); }
   &.active {
     border-color: var(--color-primary);
-    background: rgba(51, 94, 234, 0.1);
+    background: var(--color-primary-10);
   }
 }
 
@@ -1139,4 +1251,189 @@ onUnmounted(() => {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+// --- Bot Profile section ---
+.profile-section-hint {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: -8px 0 16px;
+  line-height: 1.5;
+}
+
+.empty-hint {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  padding: 12px;
+}
+
+.profile-bot-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.profile-bot {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.profile-bot-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+
+  &:hover { background: var(--hover-bg); }
+  &.expanded { background: var(--hover-bg); }
+}
+
+.profile-bot-name {
+  flex: 1;
+  text-align: left;
+}
+
+.profile-toggles {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px 8px;
+  border-top: 1px solid var(--border-color);
+}
+
+.profile-loading {
+  padding: 16px 0;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+.profile-error {
+  color: var(--brand-netease); // re-uses red brand color for error state
+
+  .btn-link {
+    margin-left: 8px;
+    font-size: 13px;
+    color: var(--color-primary);
+    text-decoration: underline;
+    background: transparent;
+    cursor: pointer;
+  }
+}
+
+.profile-toggle {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+
+  &:last-child { border-bottom: none; }
+}
+
+.profile-toggle-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.profile-toggle-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  line-height: 1.3;
+}
+
+.profile-warn-tag {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 6px;
+  background: var(--color-paused-15);
+  color: var(--color-paused);
+  border-radius: var(--radius-xs);
+  white-space: nowrap;
+}
+
+.profile-toggle-hint {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.profile-toggle-switch {
+  flex-shrink: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 40px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  position: relative;
+  cursor: pointer;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+  margin: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--text-secondary);
+    transition: transform var(--transition-fast), background var(--transition-fast);
+  }
+
+  &:checked {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+
+    &::before {
+      transform: translateX(18px);
+      background: white;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .profile-bot-header {
+    padding: 14px 12px;
+    font-size: 15px;
+  }
+
+  .profile-toggles {
+    padding: 0 12px 6px;
+  }
+
+  .profile-toggle {
+    gap: 12px;
+    padding: 14px 0;
+  }
+
+  .profile-toggle-switch {
+    width: 44px;
+    height: 24px;
+
+    &::before {
+      width: 18px;
+      height: 18px;
+    }
+    &:checked::before {
+      transform: translateX(20px);
+    }
+  }
+}
 </style>