feat: 添加 TrackItem 组件并优化专辑详情页

- 新增 TrackItem 组件，用于展示专辑曲目信息
- 将 artistsOrganize 函数提取到 utils 模块中
- 添加 DIN Alternate 字体并应用于曲目编号

src/components/TrackItem.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { artistsOrganize } from '../utils'
+
+defineProps<{
+	album?: Album,
+	track: Song,
+	index: number
+}>()
+</script>
+
+<template>
+	<button
+		class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 h-[2.75rem] rounded-md hover:bg-neutral-800 align-center relative overflow-hidden">
+		
+		<span class="text-[3.7rem] text-white/20 absolute right-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>
+
+		<div class="flex flex-col justify-center">
+			<div class="text-white text-base">{{ track.name }}</div>
+			<div class="text-white/50 text-sm"
+				v-if="artistsOrganize(track.artists ?? []) !== artistsOrganize(album?.artistes ?? [])">
+				{{ artistsOrganize(track.artists ?? []) }}
+			</div>
+		</div>
+
+		
+	</button>
+</template>

src/pages/AlbumDetail.vue

@@ -3,6 +3,8 @@ import { ref, onMounted } from 'vue'
 import apis from '../apis'
 import { useRoute } from 'vue-router'
 import { usePlayQueueStore } from '../stores/usePlayQueueStore'
+import { artistsOrganize } from '../utils'
+import TrackItem from '../components/TrackItem.vue'
 
 const album = ref<Album>()
 
@@ -24,13 +26,6 @@ onMounted(async () => {
 	}
 })
 
-function artistsOrganize(list: string[]) {
-	if (list.length === 0) { return '未知音乐人' }
-	return list.map((artist) => {
-		return artist
-	}).join(' / ')
-}
-
 function playTheAlbum() {
 	if (playQueue.queueReplaceLock) {
 		if (!confirm("当前操作会将你的待播列表清空、放入这张专辑所有曲目，并从新待播清单的开头播放。继续吗？")) { return }
@@ -112,19 +107,7 @@ function playTheAlbum() {
 				</div>
 			</div>
 			<div class="flex flex-col gap-2">
-				<button v-for="(track, index) in album?.songs" :key="track.cid"
+				<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track" :index="index" />
-					class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 h-[2.75rem] rounded-md hover:bg-neutral-800 align-center">
-					<div class="w-8 flex justify-center items-center">
-						<span class="text-2xl text-white">{{ index + 1 }}</span>
-					</div>
-					<div class="flex flex-col justify-center">
-						<div class="text-white text-base">{{ track.name }}</div>
-						<div class="text-white/50 text-sm"
-							v-if="artistsOrganize(track.artists ?? []) !== artistsOrganize(album?.artistes ?? [])">
-							{{ artistsOrganize(track.artists ?? []) }}
-						</div>
-					</div>
-				</button>
 			</div>
 		</div>
 	</div>

src/style.css

@@ -7,6 +7,13 @@
 	font-display: swap;
 }
 
+@font-face {
+	font-family: 'Alte DIN';
+	src: url('/assets/din1451alt.ttf') format('truetype-variations');
+	font-weight: 1 999;
+	font-display: swap;
+}
+
 * {
 	@apply font-[MiSans];
 }
@@ -17,4 +24,8 @@ button {
 
 input {
 	@apply focus:outline-none;
+}
+
+.track_num {
+	font-family: 'DIN Alternate', 'Alte DIN' !important;
 }

src/utils/artistsOrganize.ts

@@ -0,0 +1,6 @@
+export default (list: string[]) => {
+	if (list.length === 0) { return '未知音乐人' }
+	return list.map((artist) => {
+		return artist
+	}).join(' / ')
+}

src/utils/index.ts

@@ -0,0 +1,3 @@
+import artistsOrganize from "./artistsOrganize"
+
+export { artistsOrganize }