lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-24 08:07:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/artist/detail.vue
+10 -8
View File
@@ -109,14 +109,16 @@
@scroll="handleVirtualScroll" @scroll="handleVirtualScroll"
> >
<template #default="{ item, index }"> <template #default="{ item, index }">
<div class="double-item"> <div>
<song-item <div class="double-item">
:index="index" <song-item
:compact="isCompactLayout" :index="index"
:item="formatSong(item)" :compact="isCompactLayout"
@play="handlePlay" :item="formatSong(item)"
:style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}" @play="handlePlay"
/> />
</div>
<div v-if="index === filteredSongs.length - 1" class="h-36"></div>
</div> </div>
</template> </template>
</n-virtual-list> </n-virtual-list>
src/renderer/views/music/MusicListPage.vue
+15 -13
View File
@@ -168,19 +168,21 @@
@scroll="handleVirtualScroll" @scroll="handleVirtualScroll"
> >
<template #default="{ item, index }"> <template #default="{ item, index }">
<div class="double-item"> <div>
<song-item <div class="double-item">
:index="index" <song-item
:compact="isCompactLayout" :index="index"
:item="formatSong(item)" :compact="isCompactLayout"
:can-remove="canRemove" :item="formatSong(item)"
:selectable="isSelecting" :can-remove="canRemove"
:selected="selectedSongs.includes(item.id as number)" :selectable="isSelecting"
@play="handlePlay" :selected="selectedSongs.includes(item.id as number)"
@remove-song="handleRemoveSong" @play="handlePlay"
@select="(id, selected) => handleSelect(id, selected)" @remove-song="handleRemoveSong"
:style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}" @select="(id, selected) => handleSelect(id, selected)"
/> />
</div>
<div v-if="index === filteredSongs.length - 1" class="h-36"></div>
</div> </div>
</template> </template>
</n-virtual-list> </n-virtual-list>
src/renderer/views/user/index.vue
+2 -1
View File
@@ -47,7 +47,7 @@
/> />
<div class="play-list-item-info"> <div class="play-list-item-info">
<div class="play-list-item-name"> <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"> <div v-if="item.creator.userId === user.userId" class="playlist-creator-tag">
{{ t('user.playlist.mine') }} {{ t('user.playlist.mine') }}
</div> </div>
@@ -396,6 +396,7 @@ const isLoggedIn = computed(() => userStore.user);
height: 18px; height: 18px;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
min-width: 60px;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
} }