[+] Songs

src/components/SongInfo.svelte

@@ -6,10 +6,10 @@
 
 <div class="hbox gap-16px">
   <img class="rounded-16px size-68px" src={info.albumPic} alt="Album Art" />
-  <div class="vbox">
-    <div class="m3-font-title-large">{info.name}</div>
+  <div class="vbox flex-1 min-w-0">
+    <div class="m3-font-title-large truncate">{info.name}</div>
     <div class="hbox w-full">
-      <div class="m3-font-body-medium m3-color-on-surface-variant">{info.artists.map(a => a.name).join(", ")} - {info.album}</div>
+      <div class="m3-font-body-medium m3-color-on-surface-variant truncate">{info.artists.map(a => a.name).join(", ")} - {info.album}</div>
     </div>
   </div>
 </div>

src/routes/playlist/[slug]/+page.svelte

@@ -2,6 +2,7 @@
 import type { PageProps } from "./$types"
 import AppBar from "../../../components/appbar/AppBar.svelte";
 import Button from "../../../components/Button.svelte";
+  import SongInfo from "../../../components/SongInfo.svelte";
 
 let { data }: PageProps = $props()
 
@@ -25,4 +26,16 @@ let {meta, songs} = data.playlist
       <Button>开始练习</Button>
     </div>
   </div>
+</div>
+
+<div class="vbox gap-12px">
+  <div class="hbox gap-12px items-end! h-48px p-content">
+    <div class="m3-font-headline-small">歌曲列表</div>
+    <div class="m3-font-label-small pb-3px">{songs.length} 首歌曲</div>
+  </div>
+  {#each songs as song, index}
+    <a href="/song/{song.id}" class="p-content">
+      <SongInfo info={song} />
+    </a>
+  {/each}
 </div>