feat: 添加专辑详情页并调整路由和导航

新增 AlbumDetail.vue 页面，用于展示专辑详情。调整 Home.vue 中的路由链接，将 `/album` 改为 `/albums`。在 main.ts 中添加新的路由配置 `/albums/:id`。移除 remixicon 依赖，并优化 App.vue 中的导航栏逻辑，添加返回按钮。

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",

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"

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">
+			<div class="py-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent">
-				<ul class="flex gap-4">
+				<div class="flex justify-between align-center"  v-if="(() => {
-					<li>
+					if (route.path === '/lucky' || route.path === '/library' || route.path === '/') { return true }
-						<RouterLink to="/">
+					else { return false }
-							<span class="text-4xl" :class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span>
+				})()">
-						</RouterLink>
+					<ul class="flex gap-4">
-					</li>
+						<li>
-					<li>
+							<RouterLink to="/">
-						<RouterLink to="/lucky" :class="route.path === '/lucky'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
+								<span class="text-4xl" :class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span>
-							<span class="text-4xl">手气不错</span>
+							</RouterLink>
-						</RouterLink>
+						</li>
-					</li>
+						<li>
-					<li>
+							<RouterLink to="/lucky" :class="route.path === '/lucky'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
-						<RouterLink to="/library" :class="route.path === '/library'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
+								<span class="text-4xl">手气不错</span>
-							<span class="text-4xl">收藏库</span>
+							</RouterLink>
-						</RouterLink>
+						</li>
-					</li>
+						<li>
-				</ul>
+							<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>
+					<div>
-					<SearchBar />
+						<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 />

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({

src/pages/AlbumDetail.vue

@@ -0,0 +1,3 @@
+<template>
+	<div>album</div>
+</template>

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>