feat: B站首页推荐 — 个性化推荐/音乐区排行/热门视频

- BiliBiliProvider.getDailyRecommendSongs: 个性化推荐（登录后更准确），
  fallback 到音乐区排行榜
- BiliBiliProvider.getPopularVideos: 热门视频列表
- 新增 GET /api/music/bilibili/popular 端点
- 首页新增"B站热门"板块，带B站蓝色徽标
- Store 缓存 bilibiliPopular 数据

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

web/src/stores/player.ts

@@ -50,6 +50,7 @@ export const usePlayerStore = defineStore('player', {
     recommendPlaylists: [] as PlaylistItem[],
     dailySongs: [] as Song[],
     userPlaylists: [] as PlaylistItem[],
+    bilibiliPopular: [] as Song[],
     lastFetchTime: 0,
   }),
 
@@ -270,10 +271,11 @@ export const usePlayerStore = defineStore('player', {
         return;
       }
 
-      const [playlistRes, dailyRes, userRes] = await Promise.allSettled([
+      const [playlistRes, dailyRes, userRes, biliRes] = await Promise.allSettled([
         axios.get('/api/music/recommend/playlists'),
         axios.get('/api/music/recommend/songs'),
         axios.get('/api/music/user/playlists'),
+        axios.get('/api/music/bilibili/popular?limit=12'),
       ]);
 
       if (playlistRes.status === 'fulfilled') {
@@ -285,6 +287,9 @@ export const usePlayerStore = defineStore('player', {
       if (userRes.status === 'fulfilled') {
         this.userPlaylists = userRes.value.data.playlists;
       }
+      if (biliRes.status === 'fulfilled') {
+        this.bilibiliPopular = biliRes.value.data.songs;
+      }
 
       this.lastFetchTime = Date.now();
     },

web/src/views/Home.vue

@@ -95,6 +95,26 @@
         </RouterLink>
       </div>
     </section>
+
+    <!-- B站热门 -->
+    <section class="section" v-if="store.bilibiliPopular.length > 0">
+      <h2 class="section-title">
+        <span class="bili-badge">B</span>
+        B站热门
+      </h2>
+      <div class="daily-grid">
+        <div
+          v-for="song in store.bilibiliPopular.slice(0, 12)"
+          :key="song.id"
+          class="daily-card hover-scale"
+          @click="store.playById(song.id, song.platform)"
+        >
+          <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>
   </div>
 </template>
 
@@ -182,6 +202,22 @@ onMounted(() => {
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bili-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: #00a1d6;
+  color: white;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 800;
 }
 
 // Now Playing