diff --git a/packages/frontend/src/components/SearchBox.svelte b/packages/frontend/src/components/SearchBox.svelte
index 4fb563b..c9ecb1d 100644
--- a/packages/frontend/src/components/SearchBox.svelte
+++ b/packages/frontend/src/components/SearchBox.svelte
@@ -2,15 +2,16 @@
 	import SearchIcon from "src/components/icon/SearchIcon.svelte";
 	import CloseIcon from "src/components/icon/CloseIcon.svelte";
 
-	let inputBox: HTMLInputElement | null = null;
-	export let close = () => {};
+	let inputValue = ""; // 使用一个变量来绑定 input 的值
+	export let close = () => {
+	};
 
 	export function changeFocusState(target: boolean) {
-		if (!inputBox) return;
+		if (!inputElement) return; // 使用 inputElement 而不是 inputBox
 		if (target) {
-			inputBox.focus();
+			inputElement.focus();
 		} else {
-			inputBox.blur();
+			inputElement.blur();
 		}
 	}
 
@@ -21,12 +22,13 @@
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === "Enter") {
 			event.preventDefault();
-			const input = event.target as HTMLInputElement;
-			const value = input.value.trim();
+			const value = inputValue.trim(); // 使用绑定的变量
 			if (!value) return;
 			search(value);
 		}
 	}
+
+	let inputElement: HTMLInputElement; // 引用 input 元素
 </script>
 
 <style>
@@ -37,18 +39,17 @@
     }
 </style>
 
-<!-- svelte-ignore a11y_autofocus -->
 <div class="absolute md:relative left-0 h-full mr-0 inline-flex items-center w-full px-4 md:px-0
-	md:w-full xl:max-w-[50rem] md:mx-4">
+    md:w-full xl:max-w-[50rem] md:mx-4">
 	<div class="w-full h-10 lg:h-12 px-4 rounded-full bg-surface-container-high dark:bg-zinc-800/70
-			backdrop-blur-lg flex justify-between md:px-5">
-		<button class="w-6" on:click={() => search(inputBox?.value ?? "")}>
+          backdrop-blur-lg flex justify-between md:px-5">
+		<button class="w-6" on:click={() => search(inputValue)}>
 			<SearchIcon className="h-full inline-flex items-center text-[1.5rem]
-			text-on-surface-variant dark:text-dark-on-surface-variant" />
+          text-on-surface-variant dark:text-dark-on-surface-variant"/>
 		</button>
-		<!--suppress HtmlUnknownAttribute -->
 		<input
-				bind:this={inputBox}
+				bind:this={inputElement}
+				bind:value={inputValue}
 				type="search"
 				placeholder="搜索"
 				autocomplete="off"
@@ -57,9 +58,9 @@
 				class="top-0 h-full bg-transparent flex-grow px-4 focus:outline-none"
 				on:keydown={handleKeydown}
 		/>
-		<button class="w-6" on:click={() => {inputBox.value = ""; close();}}>
+		<button class={"w-6 duration-100 " + (inputValue ? "md:opacity-100" : "md:opacity-0") } on:click={() => {inputValue = ""; close();}}>
 			<CloseIcon className="h-full w-6 inline-flex items-center text-[1.5rem]
-			text-on-surface-variant dark:text-dark-on-surface-variant"/>
+	  text-on-surface-variant dark:text-dark-on-surface-variant"/>
 		</button>
 	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/packages/frontend/src/pages/song/[id]/info.astro b/packages/frontend/src/pages/song/[id]/info.astro
index 0839769..427dd6f 100644
--- a/packages/frontend/src/pages/song/[id]/info.astro
+++ b/packages/frontend/src/pages/song/[id]/info.astro
@@ -5,11 +5,12 @@ import pg from "pg";
 import { format } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 
-const databaseHost = process.env.DB_HOST
-const databaseName = process.env.DB_NAME
-const databaseUser = process.env.DB_USER
-const databasePassword = process.env.DB_PASSWORD
-const databasePort = process.env.DB_PORT
+const databaseHost = import.meta.env.DB_HOST
+const databaseName = import.meta.env.DB_NAME
+const databaseUser = import.meta.env.DB_USER
+const databasePassword = import.meta.env.DB_PASSWORD
+const databasePort = import.meta.env.DB_PORT
+
 
 const postgresConfig = {
 	hostname: databaseHost,
@@ -121,47 +122,47 @@ interface Snapshot {
                     <table class="table-fixed">
                         <tbody>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">ID</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">ID</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.id}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">AID</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">AID</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.aid}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">BVID</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">BVID</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.bvid}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标题</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标题</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.title}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">描述</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">描述</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.description}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">UID</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-semibold">UID</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.uid}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标签</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">标签</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.tags}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">发布时间</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">发布时间</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.published_at ? format(new Date(videoInfo.published_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">时长 (秒)</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">时长 (秒)</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.duration}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">创建时间</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">创建时间</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.created_at ? format(new Date(videoInfo.created_at), 'yyyy-MM-dd HH:mm:ss', { locale: zhCN }) : '-'}</td>
                             </tr>
                             <tr>
-                                <td class="max-w-14 min-w-14 border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">封面</td>
+                                <td class="max-w-14 min-w-14 md:max-w-none md:min-w-none border dark:border-zinc-500 px-2 md:px-4 py-2 font-[470]">封面</td>
                                 <td class="break-all max-w-[calc(100vw-4.5rem)] border dark:border-zinc-500 px-4 py-2">{videoInfo?.cover_url ? videoInfo.cover_url : '-'}</td>
                             </tr>
                         </tbody>