style: 调整样式以提升用户体验

- 在 `input` 元素中添加 `focus:outline-none` 样式，去除聚焦时的默认轮廓
- 在 `App.vue` 中为 `Sidebar` 添加外层 `div`，以便更好地控制布局
- 在 `Home.vue` 中调整 `gap` 间距，使页面元素更加整齐
- 在 `Sidebar.vue` 中添加搜索框，并调整布局和样式，提升用户交互体验

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>

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

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

src/style.css

@@ -13,4 +13,8 @@
 
 button {
 	@apply cursor-pointer;
+}
+
+input {
+	@apply focus:outline-none;
 }