From e415c1ef4256cd492cad6ad401e65a68a7b36674 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sat, 24 May 2025 15:15:47 +1000
Subject: [PATCH] =?UTF-8?q?feat(AlbumDetail):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E4=B8=93=E8=BE=91=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加了专辑详情页面的数据获取逻辑和布局，包括专辑封面、名称、艺术家、简介和曲目列表的展示。同时，更新了路由参数和 API 请求路径，以支持专辑详情的动态加载。
---
 src/App.vue               |  2 +-
 src/apis/index.ts         | 10 +++++--
 src/main.ts               |  2 +-
 src/pages/AlbumDetail.vue | 61 ++++++++++++++++++++++++++++++++++++++-
 src/vite-env.d.ts         |  5 ++--
 5 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9337f7c..800e0c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@ const route = useRoute()
 <template>
 	<div class="w-screen h-screen overflow-hidden bg-[#191919]">
 		<div class="flex flex-col w-full h-full overflow-y-auto pb-24">
-			<div class="py-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent">
+			<div class="py-8 px-4 md:px-8 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent z-10">
 				<div class="flex justify-between align-center"  v-if="(() => {
 					if (route.path === '/lucky' || route.path === '/library' || route.path === '/') { return true }
 					else { return false }
diff --git a/src/apis/index.ts b/src/apis/index.ts
index 9d5f66b..af56f46 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -29,8 +29,14 @@ export default {
 	async getAlbum(cid: string) {
 		const album: {
 			data: ApiResponse
-		} = await msrInstance.get(`album/${cid}/data`)
+		} = await msrInstance.get(`album/${cid}/detail`)
 		if (album.data.code!== 0) { throw new Error(`Cannot get album: ${album.data.msg}`) }
-		return album.data.data as Album
+		const albumMeta: {
+			data: ApiResponse
+		} = await msrInstance.get(`album/${cid}/data`)
+		let data = album.data.data as Album
+		data.artistes = (albumMeta.data.data as Album).artistes
+		console.log(albumMeta)
+		return data
 	}
 }
diff --git a/src/main.ts b/src/main.ts
index c692b5e..3face27 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,7 +7,7 @@ import AlbumDetailView from './pages/AlbumDetail.vue'
 
 const routes = [
   { path: '/', component: HomePage },
-  { path: '/albums/:id', component: AlbumDetailView },
+  { path: '/albums/:albumId', component: AlbumDetailView },
 ]
 
 const router = createRouter({
diff --git a/src/pages/AlbumDetail.vue b/src/pages/AlbumDetail.vue
index bf0bbb4..387d901 100644
--- a/src/pages/AlbumDetail.vue
+++ b/src/pages/AlbumDetail.vue
@@ -1,3 +1,62 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import apis from '../apis'
+import { useRoute } from 'vue-router'
+
+const album = ref<Album>()
+
+const route = useRoute()
+const albumId = route.params.albumId
+
+onMounted(async () => {
+	try {
+		const res = await apis.getAlbum(albumId as string)
+		album.value = res
+		console.log(res)
+	} catch (error) {
+		console.log(error)
+	}
+})
+
+function artistsOrganize(list: string[]) {
+	if (list.length === 0) { return '未知音乐人' }
+	return list.map((artist) => {
+		return artist
+	}).join(' / ')
+}
+</script>
+
 <template>
-	<div>album</div>
+	<div class="px-4 md:px-8 flex gap-8">
+		<div class="mx-auto w-48 md:mx-0 md:w-72">
+			<div class="sticky top-[6.625rem] flex flex-col gap-8">
+				<div class="border border-[#5b5b5b] rounded-md overflow-hidden shadow-2xl bg-neutral-800 sticky">
+					<img :src="album?.coverUrl" class="md:w-72 md:h-72 w-48 h-48 object-contain" />
+				</div>
+				<div class="flex flex-col gap-2">
+					<div class="text-white text-2xl font-semibold">{{ album?.name }}</div>
+					<div class="text-sky-200 text-xl">{{ artistsOrganize(album?.artistes ?? []) }}</div>
+					<div class="text-white/50 text-sm">{{ album?.intro }}</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="flex-1 flex flex-col gap-8">
+			<div class="flex flex-col gap-2">
+				<button v-for="(track, index) in album?.songs" :key="track.cid" class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 py-1 rounded-md hover:bg-neutral-800">
+					<div class="w-8 flex justify-center items-center">
+						<span class="text-2xl text-white">{{ index + 1 }}</span>
+					</div>
+					<div>
+						<div class="text-white text-base">{{ track.name }}</div>
+						<div class="text-white/50 text-sm">{{ artistsOrganize(track.artistes) }}</div>
+					</div>
+				</button>
+			</div>
+
+			<div v-if="album?.songs?.length" class="text-white/50 text-base mb-4">
+				共 {{ album?.songs?.length }} 首曲目
+			</div>
+		</div>
+	</div>
 </template>
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index b3b9c63..7da5ed1 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -7,12 +7,12 @@ type SongList = {
 type Song = {
   cid: string
   name: string
-  albumCid: string
+  albumCid?: string
   sourceUrl?: string
   lyricUrl?: string | null
   mvUrl?: string | null
   mvCoverUrl?: string | null
-  artists: string[]
+  artistes: string[]
 }
 
 type Album = {
@@ -23,6 +23,7 @@ type Album = {
   coverUrl: string
   coverDeUrl?: string
   artistes: string[]
+  songs?: Song[]
 }
 
 type AlbumList = Album[]