From 2ee428500d663864b388ef6b07e44a7856ed206f Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sat, 24 May 2025 13:18:43 +1000
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=B9=B6=E6=B7=BB=E5=8A=A0=E6=90=9C=E7=B4=A2=E6=A0=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 `Home.vue` 中调整了网格布局并添加了专辑链接
- 在 `Playing.vue` 中增加了底部播放栏的高度
- 新增 `SearchBar.vue` 组件，用于搜索功能
- 在 `App.vue` 中重构了顶部导航栏并集成了搜索栏
---
 src/App.vue                  | 37 ++++++++++++++++++++++++++++--------
 src/components/Playing.vue   |  2 +-
 src/components/SearchBar.vue | 20 +++++++++++++++++++
 src/pages/Home.vue           |  9 +++++----
 4 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 src/components/SearchBar.vue

diff --git a/src/App.vue b/src/App.vue
index fc95ef4..4c8ccd8 100644
--- a/src/App.vue
+++ b/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="flex flex-1 w-full h-full">
-			<div class="">
-				<Sidebar />
-			</div>
-			<div class="flex-1 bg-[#070909] w-full overflow-y-auto">
-				<RouterView />
+	<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>
+					<SearchBar />
+				</div>
 			</div>
+			<RouterView />
 		</div>
 		
 		<Playing />
diff --git a/src/components/Playing.vue b/src/components/Playing.vue
index 7dc79d0..505d232 100644
--- a/src/components/Playing.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
new file mode 100644
index 0000000..bcf8069
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 4495711..f490fbc 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -11,11 +11,12 @@ onMounted(async () => {
 </script>
 
 <template>
-	<div class="text-white flex flex-col gap-8 mb-16">
-		<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 grid-cols-5">
+	<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">
-				<img :src="album.coverUrl" />
+				<RouterLink :to="`/album/${album.cid}`">
+					<img :src="album.coverUrl" />
+				</RouterLink>
 			</div>
 		</div>
 	</div>