From 442db6d4f74c929e9d673d21a8884d0e449c8d54 Mon Sep 17 00:00:00 2001
From: MoYingJi <moyingjiaw@outlook.com>
Date: Tue, 17 Mar 2026 07:43:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(SongWiki):=20ID=20=E5=8F=98=E5=8C=96?=
 =?UTF-8?q?=E6=97=B6=E6=95=B0=E6=8D=AE=E4=B8=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在「音乐百科」界面，通过下方的「相似歌曲」打开其它歌曲的「音乐百科」，那么页面将不会更新
---
 src/views/Song/wiki.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/views/Song/wiki.vue b/src/views/Song/wiki.vue
index 30158427d..f8c8b5167 100644
--- a/src/views/Song/wiki.vue
+++ b/src/views/Song/wiki.vue
@@ -324,6 +324,7 @@ const currentSong = ref<SongType | null>(null);
 const viewModel = ref<WikiViewModel | null>(null);
 const similarSongsList = ref<SongType[]>([]);
 const sheetLoading = ref<Record<number, boolean>>({});
+const currentRequestToken = ref(0);
 
 const publishTime = computed(() => {
   const createTime = currentSong.value?.createTime;
@@ -423,9 +424,10 @@ const normalizeWikiData = (
 };
 
 // 获取歌曲信息
-const fetchData = async () => {
-  const id = Number(route.query.id);
+const fetchData = async (id?: number) => {
+  id = id ?? Number(route.query.id);
   if (!id || id === currentSongId.value) return;
+  const token = ++currentRequestToken.value;
   loading.value = true;
   currentSongId.value = id;
   viewModel.value = null;
@@ -434,12 +436,14 @@ const fetchData = async () => {
   try {
     const detailRes = await songDetail(id);
     if (!detailRes.songs?.[0]) throw new Error("Song not found");
+    if (token !== currentRequestToken.value) return;
     currentSong.value = formatSongsList(detailRes.songs)[0];
     const [wikiRes, listenRes, sheetRes] = await Promise.allSettled([
       songWikiSummary(id),
       songFirstListenInfo(id),
       songSheetList(id),
     ]);
+    if (token !== currentRequestToken.value) return;
     // 获取歌曲信息
     const wikiData = wikiRes.status === "fulfilled" ? wikiRes.value.data || wikiRes.value : {};
     const listenData =
@@ -453,6 +457,7 @@ const fetchData = async () => {
     if (viewModel.value.similarSongs.length > 0) {
       try {
         const sims = await songDetail(viewModel.value.similarSongs);
+        if (token !== currentRequestToken.value) return;
         if (sims.songs) similarSongsList.value = formatSongsList(sims.songs);
       } catch (e) {
         console.warn("Failed to load similar songs", e);
@@ -462,7 +467,9 @@ const fetchData = async () => {
     console.error("Fetch wiki failed", error);
     window.$message.error("加载信息失败");
   } finally {
-    loading.value = false;
+    if (token === currentRequestToken.value) {
+      loading.value = false;
+    }
   }
 };
 
@@ -491,11 +498,11 @@ const handlePlay = () => {
   if (currentSong.value) player.addNextSong(currentSong.value, true);
 };
 
-onActivated(() => {
-  const id = Number(route.query.id);
-  if (id && id !== currentSongId.value) {
-    fetchData();
-  }
+onActivated(() => fetchData());
+
+// 监听路由更新
+onBeforeRouteUpdate((to) => {
+  fetchData(Number(to.query.id));
 });
 </script>