From c88b29702d557014858db2d620fbe139eeaa439c Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sat, 24 May 2025 11:34:45 +1000
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 `input` 元素中添加 `focus:outline-none` 样式，去除聚焦时的默认轮廓
- 在 `App.vue` 中为 `Sidebar` 添加外层 `div`，以便更好地控制布局
- 在 `Home.vue` 中调整 `gap` 间距，使页面元素更加整齐
- 在 `Sidebar.vue` 中添加搜索框，并调整布局和样式，提升用户交互体验
---
 src/App.vue                | 4 +++-
 src/components/Sidebar.vue | 6 +++++-
 src/pages/Home.vue         | 2 +-
 src/style.css              | 4 ++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 558ce82..fc95ef4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,9 @@ import Playing from './components/Playing.vue'
 <template>
 	<div class="w-screen h-screen overflow-hidden">
 		<div class="flex flex-1 w-full h-full">
-			<Sidebar />
+			<div class="">
+				<Sidebar />
+			</div>
 			<div class="flex-1 bg-[#070909] w-full overflow-y-auto">
 				<RouterView />
 			</div>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index aaa68f2..f20b4cc 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -3,7 +3,11 @@
 </script>
 
 <template>
-	<div class="bg-[#0c1112] w-56 text-white p-4">
+	<div class="bg-[#0c1112] w-56 text-white p-4 h-full flex flex-col gap-6">
+		<div class="w-full bg-white/10 px-2 py-1 rounded-md">
+			<input placeholder="搜索..." class="w-full text-xs" />
+		</div>
+
 		<div>
 			<div class="font-semibold text-white/50 text-xs mb-2">音乐库</div>
 			<ul class="flex flex-col gap-1">
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index a72cb58..4495711 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -11,7 +11,7 @@ onMounted(async () => {
 </script>
 
 <template>
-	<div class="text-white flex flex-col gap-4 mb-16">
+	<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 v-for="album in albums" :key="album.cid">
diff --git a/src/style.css b/src/style.css
index b3ea482..f5d6ce2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -13,4 +13,8 @@
 
 button {
 	@apply cursor-pointer;
+}
+
+input {
+	@apply focus:outline-none;
 }
\ No newline at end of file