本地收藏功能

web/src/stores/player.ts

@@ -34,6 +34,17 @@ export interface PlaylistItem {
   platform: string;
 }
 
+export interface FavoritePlaylist {
+  id: number;
+  userId: string;
+  platform: string;
+  playlistId: string;
+  name: string;
+  coverUrl: string;
+  songCount: number;
+  createdAt: string;
+}
+
 interface TimingState {
   serverElapsed: number;
   serverSyncTime: number;
@@ -64,6 +75,9 @@ export const usePlayerStore = defineStore('player', {
     authStatus: { netease: false, qq: false },
     lastFetchTime: 0,
 
+    // Favorited playlists (fetched from server, isolated per WebUI user)
+    favoritedPlaylists: [] as FavoritePlaylist[],
+
     // 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,
@@ -397,6 +411,31 @@ export const usePlayerStore = defineStore('player', {
       if (bot) bot.playMode = mode;
     },
 
+    async fetchFavorites() {
+      try {
+        const res = await axios.get('/api/favorites');
+        this.favoritedPlaylists = res.data.favorites ?? [];
+      } catch {
+        // not critical
+      }
+    },
+
+    async addFavorite(playlist: { platform: string; playlistId: string; name: string; coverUrl: string; songCount: number }) {
+      await axios.post('/api/favorites', playlist);
+      await this.fetchFavorites();
+      this.notify('已收藏', 'info');
+    },
+
+    async removeFavorite(id: number) {
+      await axios.delete(`/api/favorites/${id}`);
+      await this.fetchFavorites();
+      this.notify('已取消收藏', 'info');
+    },
+
+    isFavorited(playlistId: string, platform: string): boolean {
+      return this.favoritedPlaylists.some((f) => f.playlistId === playlistId && f.platform === platform);
+    },
+
     async fetchHomeData() {
       // Always check auth status first — if it changed since the cached
       // fetch (e.g., user logged in/out as a different account), the
@@ -484,6 +523,9 @@ export const usePlayerStore = defineStore('player', {
       if (authOk) {
         this.lastFetchTime = Date.now();
       }
+
+      // Fetch favorites in parallel — not cached by TTL; always fresh
+      this.fetchFavorites();
     },
   },
 });

web/src/views/Home.vue

@@ -72,6 +72,27 @@
       </div>
     </section>
 
+    <!-- 我的收藏 -->
+    <section class="section" v-if="store.favoritedPlaylists.length > 0">
+      <h2 class="section-title">
+        <Icon icon="mdi:heart" style="color: var(--color-primary)" />
+        我的收藏
+        <span class="section-count">{{ store.favoritedPlaylists.length }}</span>
+      </h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="fav in store.favoritedPlaylists"
+          :key="fav.id"
+          :to="`/playlist/${fav.playlistId}?platform=${fav.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="fav.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ fav.name }}</div>
+          <div class="playlist-count">{{ fav.songCount }} 首</div>
+        </RouterLink>
+      </div>
+    </section>
+
     <!-- 我的歌单 -->
     <section class="section" v-if="userAvailable.length > 0">
       <h2 class="section-title">
@@ -125,6 +146,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
+import { RouterLink } from 'vue-router';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
 import { usePlayerStore, type Song, type Source } from '../stores/player.js';

web/src/views/Library.vue

@@ -2,6 +2,27 @@
   <div class="library-page">
     <h1 class="page-title">音乐库</h1>
 
+    <!-- 我的收藏 -->
+    <section class="section" v-if="store.favoritedPlaylists.length > 0">
+      <h2 class="section-title">
+        <Icon icon="mdi:heart" style="color: var(--color-primary)" />
+        我的收藏
+        <span class="section-count">{{ store.favoritedPlaylists.length }}</span>
+      </h2>
+      <div class="playlist-grid">
+        <RouterLink
+          v-for="fav in store.favoritedPlaylists"
+          :key="fav.id"
+          :to="`/playlist/${fav.playlistId}?platform=${fav.platform}`"
+          class="playlist-card hover-scale"
+        >
+          <CoverArt :url="fav.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+          <div class="playlist-name">{{ fav.name }}</div>
+          <div class="playlist-count">{{ fav.songCount }} 首</div>
+        </RouterLink>
+      </div>
+    </section>
+
     <!-- 我的歌单 -->
     <section class="section" v-if="userAvailable.length > 0">
       <h2 class="section-title">
@@ -51,6 +72,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
+import { RouterLink } from 'vue-router';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
 import { usePlayerStore, type Song, type Source } from '../stores/player.js';

web/src/views/Playlist.vue

@@ -16,10 +16,21 @@
           <div class="playlist-stats">
             {{ songs.length }} 首歌曲
           </div>
-          <button class="play-all-btn" @click="playAll">
-            <Icon icon="mdi:play" />
-            播放全部
-          </button>
+          <div class="playlist-actions">
+            <button class="play-all-btn" @click="playAll">
+              <Icon icon="mdi:play" />
+              播放全部
+            </button>
+            <button
+              v-if="kind === 'playlist'"
+              class="fav-btn"
+              :class="{ favorited }"
+              @click="toggleFavorite"
+            >
+              <Icon :icon="favorited ? 'mdi:heart' : 'mdi:heart-outline'" />
+              {{ favorited ? '已收藏' : '收藏' }}
+            </button>
+          </div>
         </div>
       </div>
 
@@ -69,6 +80,7 @@ const kind = (route.meta.kind as string) ?? 'playlist'; // 'playlist' | 'album'
 const playlist = ref<PlaylistDetail | null>(null);
 const songs = ref<Song[]>([]);
 const loading = ref(true);
+const favorited = ref(false);
 
 async function playAll() {
   const id = route.params.id as string;
@@ -126,8 +138,35 @@ onMounted(async () => {
     }
   }
   songs.value = songList;
+
+  // Check favorite status after songs are resolved
+  if (kind === 'playlist') {
+    favorited.value = store.isFavorited(id, platform);
+  }
+
   loading.value = false;
 });
+
+async function toggleFavorite() {
+  const id = route.params.id as string;
+  const platform = (route.query.platform as string) || 'netease';
+  if (favorited.value) {
+    const fav = store.favoritedPlaylists.find((f) => f.playlistId === id && f.platform === platform);
+    if (fav) {
+      await store.removeFavorite(fav.id);
+      favorited.value = false;
+    }
+  } else {
+    await store.addFavorite({
+      platform,
+      playlistId: id,
+      name: playlist.value?.name ?? '未知歌单',
+      coverUrl: playlist.value?.coverUrl ?? '',
+      songCount: songs.value.length,
+    });
+    favorited.value = true;
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -193,6 +232,43 @@ onMounted(async () => {
   &:active { transform: scale(0.96); }
 }
 
+.playlist-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.fav-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  font-size: 14px;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+    background: var(--color-primary-8);
+  }
+
+  &.favorited {
+    color: #e74c3c;
+    border-color: #e74c3c;
+    background: rgba(231, 76, 60, 0.08);
+
+    &:hover {
+      background: rgba(231, 76, 60, 0.15);
+    }
+  }
+}
+
 .song-list {
   display: flex;
   flex-direction: column;

web/src/views/Search.vue

@@ -92,6 +92,13 @@
             class="card hover-scale"
           >
             <CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
+            <button
+              class="fav-badge"
+              :class="{ favorited: isFav(pl) }"
+              @click.prevent.stop="toggleFavPlaylist(pl)"
+            >
+              <Icon :icon="isFav(pl) ? 'mdi:heart' : 'mdi:heart-outline'" />
+            </button>
             <div class="card-name">
               {{ pl.name }}
               <span class="platform-badge" :class="badgeClass(pl.platform)">{{ badgeLabel(pl.platform) }}</span>
@@ -179,6 +186,25 @@ watch(selectedSource, (src) => {
   }
 });
 
+function isFav(pl: { id: string; platform: string }): boolean {
+  return store.isFavorited(pl.id, pl.platform);
+}
+
+async function toggleFavPlaylist(pl: { id: string; platform: string; name: string; coverUrl: string; songCount?: number }) {
+  if (isFav(pl)) {
+    const fav = store.favoritedPlaylists.find((f) => f.playlistId === pl.id && f.platform === pl.platform);
+    if (fav) await store.removeFavorite(fav.id);
+  } else {
+    await store.addFavorite({
+      platform: pl.platform,
+      playlistId: pl.id,
+      name: pl.name,
+      coverUrl: pl.coverUrl,
+      songCount: pl.songCount ?? 0,
+    });
+  }
+}
+
 async function doSearch() {
   if (!query.value.trim()) return;
   loading.value = true;
@@ -356,6 +382,7 @@ onMounted(() => {
   gap: 16px 28px;
 }
 .card {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -394,4 +421,39 @@ onMounted(() => {
   background: var(--brand-youtube-12);
   color: var(--brand-youtube);
 }
+
+.fav-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--transition-fast), color var(--transition-fast);
+  z-index: 2;
+
+  .card:hover & {
+    opacity: 1;
+  }
+
+  &.favorited {
+    color: #e74c3c;
+    opacity: 1;
+  }
+
+  &:hover {
+    color: #e74c3c;
+    background: rgba(0, 0, 0, 0.7);
+  }
+}
 </style>