feat: 调整布局并添加搜索栏组件

- 在 `Home.vue` 中调整了网格布局并添加了专辑链接
- 在 `Playing.vue` 中增加了底部播放栏的高度
- 新增 `SearchBar.vue` 组件，用于搜索功能
- 在 `App.vue` 中重构了顶部导航栏并集成了搜索栏

src/App.vue

@@ -1,17 +1,38 @@
 <script setup lang="ts">
-import Sidebar from './components/Sidebar.vue'
 import Playing from './components/Playing.vue'
+import { useRoute } from 'vue-router'
+import SearchBar from './components/SearchBar.vue'
+
+const route = useRoute()
 </script>
 
 <template>
-	<div class="w-screen h-screen overflow-hidden">
+	<div class="w-screen h-screen overflow-hidden bg-[#191919]">
-		<div class="flex flex-1 w-full h-full">
+		<div class="flex flex-col w-full h-full overflow-y-auto pb-24">
-			<div class="">
+			<div class="py-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent flex justify-between align-center">
-				<Sidebar />
+				<ul class="flex gap-4">
-			</div>
+					<li>
-			<div class="flex-1 bg-[#070909] w-full overflow-y-auto">
+						<RouterLink to="/">
-				<RouterView />
+							<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>
 			</div>
+			<RouterView />
 		</div>
 		
 		<Playing />

src/components/Playing.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="bg-[#070909a7] backdrop-blur-3xl h-16 shadow-[0px_-1px_1rem_0px_rgba(0,0,0,0.1)] border-t border-t-[#1c1c1c] sticky bottom-0 w-full">
+	<div class="bg-[#070909a7] backdrop-blur-3xl h-24 shadow-[0px_-1px_1rem_0px_rgba(0,0,0,0.1)] border-t border-t-[#1c1c1c] sticky bottom-0 w-full">
 		
 	</div>
 </template>

src/components/SearchBar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const inputFocused = ref(false)
+
+</script>
+
+<template>
+	<div class="px-4 py-2 rounded-full backdrop-blur-3xl border"
+		:class="inputFocused ? 'bg-white/50 border-[#c9c9c9]' : 'border-[#383838] bg-neutral-900/50'"
+	>
+		<input
+			placeholder="搜索歌曲、专辑或音乐人..." 
+			class="placeholder:italic w-96 text-base font-[MiSans] text-black" 
+			:class="inputFocused? 'placeholder:text-neutral-900/50' : 'placeholder:text-white/50'"
+			@focus="inputFocused = true"
+			@blur="inputFocused = false"
+		/>
+	</div>
+</template>

src/pages/Home.vue

@@ -11,11 +11,12 @@ onMounted(async () => {
 </script>
 
 <template>
-	<div class="text-white flex flex-col gap-8 mb-16">
+	<div class="text-white flex flex-col gap-8">
-		<h1 class="text-4xl font-semibold pt-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent">浏览</h1>
+		<div class="grid xl:grid-cols-6 grid-cols-3 lg:grid-cols-4">
-		<div class="grid grid-cols-5">
 			<div v-for="album in albums" :key="album.cid">
-				<img :src="album.coverUrl" />
+				<RouterLink :to="`/album/${album.cid}`">
+					<img :src="album.coverUrl" />
+				</RouterLink>
 			</div>
 		</div>
 	</div>