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

algerkong · algerkong · commit fabcf289dc05 · 2025-06-07T22:47:34.000+08:00
diff --git a/src/renderer/views/artist/detail.vue b/src/renderer/views/artist/detail.vue
@@ -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>
diff --git a/src/renderer/views/music/MusicListPage.vue b/src/renderer/views/music/MusicListPage.vue
@@ -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>
diff --git a/src/renderer/views/user/index.vue b/src/renderer/views/user/index.vue
@@ -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);
       }
