From a506fad6fdff416b6b6b4b4af687379b8badbd82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Tue, 6 Jan 2026 14:12:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=B0=E5=9C=A8=E4=BC=9A=E5=9C=A8=E6=AD=8C?=
 =?UTF-8?q?=E6=89=8B=E5=90=8D=E5=90=8E=E9=9D=A2=E6=98=BE=E7=A4=BA=E4=B8=93?=
 =?UTF-8?q?=E8=BE=91=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1eb437b..1c4bca4 100644
--- a/index.html
+++ b/index.html
@@ -231,6 +231,21 @@
                         { id: '6666', name: '飙升榜', cover: 'http://imge.kugou.com/mcommon/400/20150331/20150331161100806437.png' }
                     ]
                 };
+
+                try {
+                    const res = await fetch(`${API_BASE}/api/?source=${source}&type=toplists`);
+                    const data = await res.json();
+                    if (data.code === 200) {
+                        // 兼容多种返回结构：data本身是数组，或者data.list是数组
+                        const list = Array.isArray(data.data) ? data.data : (data.data?.list || data.data?.topList || []);
+                        if (Array.isArray(list) && list.length > 0) {
+                            return list;
+                        }
+                    }
+                } catch (e) {
+                    console.warn("Failed to fetch remote toplists, falling back to local list", e);
+                }
+
                 return predefinedLists[source] || [];
             },
             getTopListSongs: async (id, source) => {
@@ -328,7 +343,7 @@
                         {song.name}
                     </div>
                     <div className="text-xs text-gray-400 truncate">
-                        {song.artist} · {SOURCES.find(s => s.id === (song.platform || song.source))?.name || song.source}
+                        {song.artist} {song.album ? `· ${song.album}` : ''} · {SOURCES.find(s => s.id === (song.platform || song.source))?.name || song.source}
                     </div>
                 </div>
                 <div className="ml-2 flex items-center gap-4 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity">
@@ -459,7 +474,9 @@
                         </div>
                         <div className="ml-3 flex-1 min-w-0">
                             <div className="text-sm font-medium text-white truncate">{currentSong.name}</div>
-                            <div className="text-xs text-gray-400 truncate">{currentSong.artist}</div>
+                            <div className="text-xs text-gray-400 truncate">
+                                {currentSong.artist} {currentSong.album ? `· ${currentSong.album}` : ''}
+                            </div>
                         </div>
                         <div className="flex items-center gap-4 px-2">
                             <div onClick={(e) => { e.stopPropagation(); togglePlay(); }} className="w-10 h-10 flex items-center justify-center rounded-full border border-white/20 hover:bg-white/10 active:scale-95 transition-all">
@@ -540,7 +557,9 @@
                         <div className="w-full mb-2 px-4 flex justify-between items-center">
                             <div className="flex-1 min-w-0 mr-4">
                                 <h2 className="text-2xl font-bold text-white truncate mb-1 text-shadow">{currentSong.name}</h2>
-                                <p className="text-lg text-gray-300 truncate">{currentSong.artist}</p>
+                                <p className="text-lg text-gray-300 truncate">
+                                    {currentSong.artist} {currentSong.album ? `· ${currentSong.album}` : ''}
+                                </p>
                             </div>
                             <Icon 
                                 name="heart" 
@@ -699,7 +718,7 @@
                         排行榜 <span className="text-sm font-normal text-gray-500 ml-2">{SOURCES.find(s=>s.id===source)?.name}</span>
                     </h2>
                     {loading ? <Spinner /> : (
-                        <div className="grid grid-cols-2 gap-4">
+                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                             {Array.isArray(lists) && lists.map(list => (
                                 <div key={list.id} className="group bg-surface rounded-xl overflow-hidden cursor-pointer hover:bg-gray-700 transition-all hover:-translate-y-1 shadow-lg" onClick={() => handleListClick(list)}>
                                     <div className="aspect-square relative overflow-hidden">