feat: 优化歌曲列表组件布局,添加底部间距以提升视觉效果

This commit is contained in:
alger
2025-06-07 22:47:34 +08:00
parent 934580552d
commit fabcf289dc
3 changed files with 27 additions and 22 deletions

View File

@@ -109,14 +109,16 @@
@scroll="handleVirtualScroll"
>
<template #default="{ item, index }">
<div class="double-item">
<song-item
:index="index"
:compact="isCompactLayout"
:item="formatSong(item)"
@play="handlePlay"
:style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
/>
<div>
<div class="double-item">
<song-item
:index="index"
:compact="isCompactLayout"
:item="formatSong(item)"
@play="handlePlay"
/>
</div>
<div v-if="index === filteredSongs.length - 1" class="h-36"></div>
</div>
</template>
</n-virtual-list>

View File

@@ -168,19 +168,21 @@
@scroll="handleVirtualScroll"
>
<template #default="{ item, index }">
<div class="double-item">
<song-item
:index="index"
:compact="isCompactLayout"
:item="formatSong(item)"
:can-remove="canRemove"
:selectable="isSelecting"
:selected="selectedSongs.includes(item.id as number)"
@play="handlePlay"
@remove-song="handleRemoveSong"
@select="(id, selected) => handleSelect(id, selected)"
:style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
/>
<div>
<div class="double-item">
<song-item
:index="index"
:compact="isCompactLayout"
:item="formatSong(item)"
:can-remove="canRemove"
:selectable="isSelecting"
:selected="selectedSongs.includes(item.id as number)"
@play="handlePlay"
@remove-song="handleRemoveSong"
@select="(id, selected) => handleSelect(id, selected)"
/>
</div>
<div v-if="index === filteredSongs.length - 1" class="h-36"></div>
</div>
</template>
</n-virtual-list>

View File

@@ -47,7 +47,7 @@
/>
<div class="play-list-item-info">
<div class="play-list-item-name">
{{ item.name }}
<n-ellipsis :line-clamp="1">{{ item.name }}</n-ellipsis>
<div v-if="item.creator.userId === user.userId" class="playlist-creator-tag">
{{ t('user.playlist.mine') }}
</div>
@@ -396,6 +396,7 @@ const isLoggedIn = computed(() => userStore.user);
height: 18px;
font-size: 10px;
font-weight: 500;
min-width: 60px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}