Fix search box layout: add margin-top, 90% width, and compact height

static/index.html

@@ -25,12 +25,6 @@
                 <button class="btn btn-primary" id="btn-upload" title="上传文件">📤 上传</button>
                 <button class="btn btn-secondary" id="btn-new-dir" title="新建文件夹">📁 新建文件夹</button>
             </div>
-            <div class="toolbar-center">
-                <div class="search-box">
-                    <input type="text" id="search-input" placeholder="搜索文件...">
-                    <button class="search-btn" id="search-btn">🔍</button>
-                </div>
-            </div>
             <div class="toolbar-right">
                 <button class="btn btn-secondary" id="btn-download" disabled title="下载选中文件">📥 下载</button>
                 <button class="btn btn-secondary" id="btn-move" disabled title="移动选中文件">✂️ 移动</button>
@@ -39,6 +33,13 @@
             </div>
         </div>
 
+        <div class="search-toolbar">
+            <div class="search-box">
+                <input type="text" id="search-input" placeholder="搜索文件...">
+                <button class="search-btn" id="search-btn">🔍</button>
+            </div>
+        </div>
+
         <div class="file-list-container">
             <table class="file-list" id="file-list">
                 <thead>

static/style.css

@@ -107,38 +107,51 @@ body {
     padding: 15px;
     background: #fff;
     border-radius: 8px;
-    margin-bottom: 15px;
+    margin-bottom: 0;
     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 
 .toolbar-left,
-.toolbar-right,
-.toolbar-center {
+.toolbar-right {
     display: flex;
     gap: 10px;
 }
 
-.toolbar-center {
-    flex: 1;
+.search-toolbar {
+    display: flex;
     justify-content: center;
-    min-width: 300px;
+    padding: 12px 15px;
+    background: #fff;
+    border-radius: 8px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    width: 100%;
 }
 
 .search-box {
     display: flex;
     align-items: center;
-    background: #f5f5f5;
+    background: #f8f8f8;
+    border: 2px solid #e8e8e8;
     border-radius: 8px;
-    padding: 5px 10px;
-    width: 100%;
-    max-width: 400px;
+    padding: 6px 12px;
+    width: 90%;
+    max-width: 90%;
+    transition: all 0.2s;
+}
+
+.search-box:focus-within {
+    border-color: #2196f3;
+    background: #fff;
+    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
 }
 
 .search-box input {
     flex: 1;
     border: none;
     background: transparent;
-    padding: 8px;
+    padding: 6px;
     font-size: 14px;
     outline: none;
 }
@@ -152,7 +165,14 @@ body {
     border: none;
     cursor: pointer;
     font-size: 16px;
-    padding: 5px;
+    padding: 4px 6px;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.search-btn:hover {
+    opacity: 1;
+}
     opacity: 0.7;
     transition: opacity 0.2s;
 }
@@ -597,15 +617,14 @@ body {
     }
 
     .toolbar-left,
-    .toolbar-right,
-    .toolbar-center {
+    .toolbar-right {
         justify-content: center;
         width: 100%;
     }
 
-    .toolbar-center {
+    .search-toolbar {
         order: -1;
-        margin-bottom: 10px;
+        width: 100%;
     }
 
     .search-box {