From 02aafabc472724c2c4e5b7f7dfaff62d5297d7ea Mon Sep 17 00:00:00 2001
From: admin <admin@ncaca.cn>
Date: Fri, 23 Jan 2026 00:15:59 +0800
Subject: [PATCH] Fix search box layout: add margin-top, 90% width, and compact
 height

---
 static/index.html | 13 ++++++------
 static/style.css  | 51 ++++++++++++++++++++++++++++++++---------------
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/static/index.html b/static/index.html
index f202ee4..0097f3f 100644
--- a/static/index.html
+++ b/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>
diff --git a/static/style.css b/static/style.css
index 05bdbab..7c58e4b 100644
--- a/static/style.css
+++ b/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 {