From b73748c084545955018bc27b0d439413caf2502f Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sat, 24 May 2025 13:39:53 +1000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=93=E8=BE=91?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B9=B6=E8=B0=83=E6=95=B4=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E5=92=8C=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 AlbumDetail.vue 页面，用于展示专辑详情。调整 Home.vue 中的路由链接，将 `/album` 改为 `/albums`。在 main.ts 中添加新的路由配置 `/albums/:id`。移除 remixicon 依赖，并优化 App.vue 中的导航栏逻辑，添加返回按钮。
---
 package-lock.json         |  7 ------
 package.json              |  1 -
 src/App.vue               | 52 ++++++++++++++++++++++++---------------
 src/main.ts               |  5 ++--
 src/pages/AlbumDetail.vue |  3 +++
 src/pages/Home.vue        |  2 +-
 6 files changed, 39 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/AlbumDetail.vue

diff --git a/package-lock.json b/package-lock.json
index 8410092..cd18b9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
 			"dependencies": {
 				"@tailwindcss/vite": "^4.1.7",
 				"axios": "^1.9.0",
-				"remixicon": "^4.6.0",
 				"tailwindcss": "^4.1.7",
 				"vue": "^3.5.13",
 				"vue-router": "^4.5.1"
@@ -2254,12 +2253,6 @@
 			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
 			"license": "MIT"
 		},
-		"node_modules/remixicon": {
-			"version": "4.6.0",
-			"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.6.0.tgz",
-			"integrity": "sha512-bKM5odjqE1yzVxEZGJE7F79WHhNrJFIKHXR+GG+P1IWXn8AnJZhl8SbIRDJsNAvIqx4VPkNwjuHfc42tutMDpQ==",
-			"license": "Apache-2.0"
-		},
 		"node_modules/rollup": {
 			"version": "4.41.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.0.tgz",
diff --git a/package.json b/package.json
index 88a2983..83df4a4 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
 	"dependencies": {
 		"@tailwindcss/vite": "^4.1.7",
 		"axios": "^1.9.0",
-		"remixicon": "^4.6.0",
 		"tailwindcss": "^4.1.7",
 		"vue": "^3.5.13",
 		"vue-router": "^4.5.1"
diff --git a/src/App.vue b/src/App.vue
index 4c8ccd8..9337f7c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,27 +9,39 @@ 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 flex justify-between align-center">
-				<ul class="flex gap-4">
-					<li>
-						<RouterLink to="/">
-							<span class="text-4xl" :class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span>
-						</RouterLink>
-					</li>
-					<li>
-						<RouterLink to="/lucky" :class="route.path === '/lucky'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
-							<span class="text-4xl">手气不错</span>
-						</RouterLink>
-					</li>
-					<li>
-						<RouterLink to="/library" :class="route.path === '/library'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
-							<span class="text-4xl">收藏库</span>
-						</RouterLink>
-					</li>
-				</ul>
+			<div class="py-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent">
+				<div class="flex justify-between align-center"  v-if="(() => {
+					if (route.path === '/lucky' || route.path === '/library' || route.path === '/') { return true }
+					else { return false }
+				})()">
+					<ul class="flex gap-4">
+						<li>
+							<RouterLink to="/">
+								<span class="text-4xl" :class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span>
+							</RouterLink>
+						</li>
+						<li>
+							<RouterLink to="/lucky" :class="route.path === '/lucky'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
+								<span class="text-4xl">手气不错</span>
+							</RouterLink>
+						</li>
+						<li>
+							<RouterLink to="/library" :class="route.path === '/library'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
+								<span class="text-4xl">收藏库</span>
+							</RouterLink>
+						</li>
+					</ul>
 
-				<div>
-					<SearchBar />
+					<div>
+						<SearchBar />
+					</div>
+				</div>
+				<div class="flex justify-between align-center h-[2.625rem] items-center" v-else>
+					<button class="text-white w-8 h-8 bg-white/5 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl" @click="$router.back()">
+						<div class="w-4 h-4 mx-auto my-auto">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path></svg>
+						</div>
+					</button>
 				</div>
 			</div>
 			<RouterView />
diff --git a/src/main.ts b/src/main.ts
index 09757ec..c692b5e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,10 +3,11 @@ import { createWebHashHistory, createRouter } from 'vue-router'
 import './style.css'
 import App from './App.vue'
 import HomePage from './pages/Home.vue'
-import 'remixicon/fonts/remixicon.css'
+import AlbumDetailView from './pages/AlbumDetail.vue'
 
 const routes = [
-  { path: '/', component: HomePage }
+  { path: '/', component: HomePage },
+  { path: '/albums/:id', component: AlbumDetailView },
 ]
 
 const router = createRouter({
diff --git a/src/pages/AlbumDetail.vue b/src/pages/AlbumDetail.vue
new file mode 100644
index 0000000..bf0bbb4
--- /dev/null
+++ b/src/pages/AlbumDetail.vue
@@ -0,0 +1,3 @@
+<template>
+	<div>album</div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index f490fbc..1b4d20c 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -14,7 +14,7 @@ onMounted(async () => {
 	<div class="text-white flex flex-col gap-8">
 		<div class="grid xl:grid-cols-6 grid-cols-3 lg:grid-cols-4">
 			<div v-for="album in albums" :key="album.cid">
-				<RouterLink :to="`/album/${album.cid}`">
+				<RouterLink :to="`/albums/${album.cid}`">
 					<img :src="album.coverUrl" />
 				</RouterLink>
 			</div>