feat: add QQ Music API integration, Pinia home cache, and unified search

- Start @sansenjian/qq-music-api server via dynamic import in api-server.ts
- Rewrite QQ Music provider to use real API endpoints (getSearchByKey,
  getMusicPlay, getSongListDetail, getAlbumInfo, getLyric, etc.)
- Cache home page data (recommend playlists, daily songs, user playlists)
  in Pinia store with 5-minute TTL to avoid refetching on every mount
- Add unified /api/music/search/all endpoint that queries both Netease
  and QQ providers in parallel and returns merged results
- Remove platform toggle from Search.vue; search both platforms at once
- Add platform badge (网易云 / QQ) to SongCard component

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/src/views/Home.vue

@@ -47,11 +47,11 @@
     </section>
 
     <!-- 每日推荐 -->
-    <section class="section" v-if="dailySongs.length > 0">
+    <section class="section" v-if="store.dailySongs.length > 0">
       <h2 class="section-title">每日推荐</h2>
       <div class="daily-grid">
         <div
-          v-for="song in dailySongs.slice(0, 12)"
+          v-for="song in store.dailySongs.slice(0, 12)"
           :key="song.id"
           class="daily-card hover-scale"
           @click="store.play(song.name, song.platform)"
@@ -64,11 +64,11 @@
     </section>
 
     <!-- 推荐歌单 -->
-    <section class="section" v-if="playlists.length > 0">
+    <section class="section" v-if="store.recommendPlaylists.length > 0">
       <h2 class="section-title">推荐歌单</h2>
       <div class="playlist-grid">
         <RouterLink
-          v-for="playlist in playlists"
+          v-for="playlist in store.recommendPlaylists"
           :key="playlist.id"
           :to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
           class="playlist-card hover-scale"
@@ -80,11 +80,11 @@
     </section>
 
     <!-- 我的歌单 -->
-    <section class="section" v-if="userPlaylists.length > 0">
+    <section class="section" v-if="store.userPlaylists.length > 0">
       <h2 class="section-title">我的歌单</h2>
       <div class="playlist-grid">
         <RouterLink
-          v-for="pl in userPlaylists"
+          v-for="pl in store.userPlaylists"
           :key="pl.id"
           :to="`/playlist/${pl.id}?platform=${pl.platform}`"
           class="playlist-card hover-scale"
@@ -99,40 +99,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
-import { usePlayerStore } from '../stores/player.js';
+import { usePlayerStore, type Song } from '../stores/player.js';
 import CoverArt from '../components/CoverArt.vue';
 
 const store = usePlayerStore();
 
-interface PlaylistItem {
-  id: string;
-  name: string;
-  coverUrl: string;
-  songCount: number;
-  platform: string;
-}
-
-interface SongItem {
-  id: string;
-  name: string;
-  artist: string;
-  album: string;
-  duration: number;
-  coverUrl: string;
-  platform: string;
-}
-
-const playlists = ref<PlaylistItem[]>([]);
-const dailySongs = ref<SongItem[]>([]);
-const userPlaylists = ref<PlaylistItem[]>([]);
-
 async function playFm() {
   try {
     const res = await axios.get('/api/music/personal/fm');
-    const songs: SongItem[] = res.data.songs;
+    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++) {
@@ -144,23 +122,8 @@ async function playFm() {
   }
 }
 
-onMounted(async () => {
-  // Fetch all data in parallel
-  const [playlistRes, dailyRes, userRes] = await Promise.allSettled([
-    axios.get('/api/music/recommend/playlists'),
-    axios.get('/api/music/recommend/songs'),
-    axios.get('/api/music/user/playlists'),
-  ]);
-
-  if (playlistRes.status === 'fulfilled') {
-    playlists.value = playlistRes.value.data.playlists;
-  }
-  if (dailyRes.status === 'fulfilled') {
-    dailySongs.value = dailyRes.value.data.songs;
-  }
-  if (userRes.status === 'fulfilled') {
-    userPlaylists.value = userRes.value.data.playlists;
-  }
+onMounted(() => {
+  store.fetchHomeData();
 });
 </script>
 

web/src/views/Search.vue

@@ -16,22 +16,6 @@
           autofocus
         />
       </div>
-      <div class="platform-toggle">
-        <button
-          class="platform-btn"
-          :class="{ active: platform === 'netease' }"
-          @click="platform = 'netease'; doSearch()"
-        >
-          网易云
-        </button>
-        <button
-          class="platform-btn"
-          :class="{ active: platform === 'qq' }"
-          @click="platform = 'qq'; doSearch()"
-        >
-          QQ音乐
-        </button>
-      </div>
     </div>
 
     <div v-if="loading" class="loading">搜索中...</div>
@@ -39,7 +23,7 @@
     <div v-else-if="results.length > 0" class="results">
       <SongCard
         v-for="(song, i) in results"
-        :key="song.id"
+        :key="`${song.platform}-${song.id}`"
         :song="song"
         :index="i + 1"
         :active="store.currentSong?.id === song.id"
@@ -66,7 +50,6 @@ const store = usePlayerStore();
 const route = useRoute();
 
 const query = ref((route.query.q as string) || '');
-const platform = ref<'netease' | 'qq'>('netease');
 const results = ref<Array<{ id: string; name: string; artist: string; album: string; duration: number; coverUrl: string; platform: string }>>([]);
 const loading = ref(false);
 const searched = ref(false);
@@ -76,8 +59,8 @@ async function doSearch() {
   loading.value = true;
   searched.value = true;
   try {
-    const res = await axios.get('/api/music/search', {
-      params: { q: query.value, platform: platform.value },
+    const res = await axios.get('/api/music/search/all', {
+      params: { q: query.value },
     });
     results.value = res.data.songs;
   } catch {
@@ -137,27 +120,6 @@ onMounted(() => {
   }
 }
 
-.platform-toggle {
-  display: flex;
-  gap: 8px;
-}
-
-.platform-btn {
-  padding: 6px 18px;
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-  font-weight: 600;
-  background: var(--hover-bg);
-  opacity: 0.6;
-  transition: all var(--transition-fast);
-
-  &.active {
-    background: var(--color-primary);
-    color: white;
-    opacity: 1;
-  }
-}
-
 .loading {
   text-align: center;
   padding: 40px;