修复列表问题 #569 #568

Author: imsyy

src/components/List/SongList.vue

@@ -234,10 +234,13 @@ const listData = computed<SongType[]>(() => {
 const listKey = computed(() => {
   // 每日推荐
   if (props.isDailyRecommend) {
-    return musicStore.dailySongsData.timestamp || 0;
+    return `daily-${musicStore.dailySongsData.timestamp || 0}`;
   }
-  // 其他列表长度（检测增删操作）
-  return listData.value?.length || 0;
+  // 使用 playListId 作为主要 key
+  if (props.playListId) {
+    return `playlist-${props.playListId}`;
+  }
+  return `type-${props.type}`;
 });
 
 // 列表是否具有播放歌曲
@@ -261,7 +264,9 @@ const sortMenuOptions = computed<DropdownOption[]>(() =>
 // 列表滚动
 const onScroll = (e: Event) => {
   emit("scroll", e);
-  scrollTop.value = (e.target as HTMLElement).scrollTop;
+  const top = (e.target as HTMLElement).scrollTop;
+  scrollTop.value = top;
+  offset.value = top;
 };
 
 // 列表触底

src/components/Player/MainLyric.vue

@@ -205,7 +205,7 @@ const lyricsScroll = (index: number) => {
     const container = lrcItemDom.parentElement;
     if (!container) return;
     // 调整滚动的距离
-    const scrollDistance = lrcItemDom.offsetTop - container.offsetTop - 80;
+    const scrollDistance = lrcItemDom.offsetTop - container.offsetTop - 100;
     // 开始滚动
     if (settingStore.lyricsScrollPosition === "center") {
       lrcItemDom?.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -399,8 +399,8 @@ onBeforeUnmount(() => {
           top: 0;
           transform: none;
           will-change: -webkit-mask-position-x, transform, opacity;
-          // padding: 2px 8px;
-          // margin: -2px -8px;
+          padding: 0.3em 0;
+          margin: -0.3em 0;
           mask-image: linear-gradient(
             to right,
             rgb(0, 0, 0) 45.4545454545%,

src/views/Search/layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="searchKeyword" class="search">
+  <div class="search">
     <div class="title">
       <n-text class="keyword">{{ searchKeyword }}</n-text>
       <n-text depth="3">的相关搜索</n-text>
@@ -17,9 +17,20 @@
     <RouterView v-slot="{ Component }">
       <Transition :name="`router-${settingStore.routeAnimation}`" mode="out-in">
         <KeepAlive v-if="settingStore.useKeepAlive">
-          <component :is="Component" :keyword="searchKeyword" class="router-view" />
+          <component
+            :is="Component"
+            :key="route.fullPath"
+            :keyword="searchKeyword"
+            class="router-view"
+          />
         </KeepAlive>
-        <component v-else :is="Component" :keyword="searchKeyword" class="router-view" />
+        <component
+          v-else
+          :is="Component"
+          :key="route.fullPath"
+          :keyword="searchKeyword"
+          class="router-view"
+        />
       </Transition>
     </RouterView>
   </div>
@@ -28,14 +39,15 @@
 <script setup lang="ts">
 import { useSettingStore } from "@/stores";
 
+const route = useRoute();
 const router = useRouter();
 const settingStore = useSettingStore();
 
 // 搜索关键词
-const searchKeyword = computed(() => router.currentRoute.value.query.keyword as string);
+const searchKeyword = computed(() => route.query.keyword as string);
 
 // 搜索分类
-const searchType = ref<string>((router.currentRoute.value?.name as string) || "search-songs");
+const searchType = ref<string>("search-songs");
 
 // Tabs 改变
 const tabChange = (value: string) => {
@@ -47,10 +59,16 @@ const tabChange = (value: string) => {
   });
 };
 
-onBeforeRouteUpdate((to) => {
-  if (to.matched[0].name !== "search") return;
-  searchType.value = to.name as string;
-});
+// 监听路由变化，同步 Tab 状态
+watch(
+  () => route.name,
+  (name) => {
+    if (name && name.toString().startsWith("search-")) {
+      searchType.value = name as string;
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <style lang="scss" scoped>