perf: improve the performance of long lists

src/components/AddToSonglist.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { storeToRefs } from 'pinia'
 import { Image } from 'components'
@@ -13,6 +13,10 @@ const { updateSonglists } = useSonglistsStore()
 const { createdSonglists } = storeToRefs(useSonglistsStore())
 const songIdToAdd = ref(0)
 
+onMounted(() => {
+    console.log('mounted')
+})
+
 async function onClick(songlistId: number) {
     if (!songIdToAdd.value || !songlistId) return
     await post<ApiPlaylistTracks>('/playlist/tracks', {

src/components/ContextMenu/ContextMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, ref, watch } from 'vue'
 import { Tippy } from 'vue-tippy'
-import { useDeviceType, useIsHovering } from 'services'
+import { useDeviceType } from 'services'
 import type { Instance, Placement } from 'tippy.js'
 import Button from '../Button.vue'
 
@@ -26,7 +26,6 @@ const { isPc } = useDeviceType()
 const tippy = ref<Instance | null>(null)
 const body = document.body
 const visible = ref(false)
-const { isHovering, onMouseEnter, onMouseLeave } = useIsHovering()
 const initialized = ref(false)
 
 function showMenu() {
@@ -49,21 +48,13 @@ watch(visible, (val) => {
 
 provide('ContextMenu', { hideMenu, visible })
 
-const unwatch = watch(isHovering, (val) => {
-    if (val) {
-        initialized.value = true
-        unwatch()
-    }
-})
-
 defineExpose({ showMenu, hideMenu })
 </script>
 
 <template>
     <div
         class="context-menu"
-        @mouseenter="onMouseEnter"
-        @mouseleave="onMouseLeave"
+        @mouseenter="() => (initialized = true)"
     >
         <Tippy
             v-if="isPc && initialized"

src/components/SongItem/SongItem.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useDeviceType, useIsHovering } from 'services'
 import { usePlaylistStore } from 'src/stores'
 import Image from '../Image.vue'
 import SongItemOption from './SongItemOption.vue'
 
 defineProps<{ song: Song }>()
-const { isHovering, onMouseEnter, onMouseLeave } = useIsHovering()
-const { isPc } = useDeviceType()
 const { currentSong } = storeToRefs(usePlaylistStore())
+const shouldRenderOption = ref(false)
 </script>
 
 <template>
     <li
-        class="song-item my-2 flex h-14 w-full items-center rounded-lg p-2 transition-all duration-500 @container contain-strict content-auto intrinsic-w-auto-20 intrinsic-h-auto-14 hover:bg-base-200/50"
-        @mouseenter="onMouseEnter"
-        @mouseleave="onMouseLeave"
+        class="song-item group my-2 flex h-14 w-full items-center rounded-lg p-2 transition-all duration-500 @container contain-strict content-auto intrinsic-w-auto-20 intrinsic-h-auto-14 hover:bg-base-200/50"
+        @mouseenter="() => (shouldRenderOption = true)"
     >
         <div class="image-container relative mr-2 h-10 w-10 flex-fixed">
             <Image
@@ -27,8 +25,7 @@ const { currentSong } = storeToRefs(usePlaylistStore())
                     'h-full',
                     'w-full',
                     'flex-fixed',
-                    'rounded-lg',
-                    { hovering: isHovering }
+                    'rounded-lg'
                 ]"
                 loading="lazy"
                 :size="40"
@@ -101,10 +98,12 @@ const { currentSong } = storeToRefs(usePlaylistStore())
             </RouterLink>
         </div>
         <slot />
-        <SongItemOption
-            :song="song"
-            :class="['ml-2', 'transition-all', { 'opacity-0': !isHovering && isPc }]"
-        />
+        <div class="ml-2 h-8 w-8 flex-shrink-0 opacity-0 transition-all md:group-hover:opacity-100">
+            <SongItemOption
+                v-if="shouldRenderOption"
+                :song="song"
+            />
+        </div>
     </li>
 </template>
 

src/pages/Home/components/NewSongList.vue

@@ -13,7 +13,7 @@ const {
     list: visibleList,
     containerProps,
     wrapperProps
-} = useVirtualList(listRef, { itemHeight: 72 })
+} = useVirtualList(listRef, { itemHeight: 72, overscan: 15 })
 </script>
 
 <template>

src/pages/UserCenter/components/FavoriteSongs.vue

@@ -9,7 +9,10 @@ const props = defineProps<{ id: number }>()
 
 const { songlist, onFullLoad, initSonglist } = useSonglist()
 const { switchToThisList } = usePlaylistStore()
-const { list, containerProps, wrapperProps } = useVirtualList(songlist, { itemHeight: 72 })
+const { list, containerProps, wrapperProps } = useVirtualList(songlist, {
+    itemHeight: 72,
+    overscan: 15
+})
 
 async function onPlayAll() {
     if (songlist.value.length) {

src/pages/UserCenter/components/RecentSongs.vue

@@ -32,15 +32,17 @@ const {
     containerProps: weekContainerProps,
     wrapperProps: weekWrapperProps
 } = useVirtualList<RecentSong>(weekList, {
-    itemHeight: 72
+    itemHeight: 72,
+    overscan: 20
 })
 
 const {
     list: visibleAllList,
     containerProps: allContainerProps,
     wrapperProps: allWrapperProps
 } = useVirtualList<RecentSong>(allList, {
-    itemHeight: 72
+    itemHeight: 72,
+    overscan: 15
 })
 
 async function getData(type: 0 | 1) {

src/pages/UserCenter/components/SonglistsList/SonglistsList.vue

@@ -20,7 +20,10 @@ const songlistArr = computed(() => {
         }
     })
 })
-const { list, containerProps, wrapperProps } = useVirtualList(songlistArr, { itemHeight: 72 })
+const { list, containerProps, wrapperProps } = useVirtualList(songlistArr, {
+    itemHeight: 72,
+    overscan: 15
+})
 
 async function onTabChange() {
     currentTab.value = currentTab.value === 'created-list' ? 'collected-list' : 'created-list'