From ac2677abc773802e1f309d1b7523cc561b8e9689 Mon Sep 17 00:00:00 2001
From: qing <1776177662@qq.com>
Date: Wed, 5 Aug 2026 01:58:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(dnfs):=20=E9=A1=B6=E9=83=A8=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A1=86=E5=8D=A1=E7=89=87=E5=8C=96=E7=BE=8E=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E6=95=B4=E4=BD=93=E8=A7=86=E8=A7=89=E5=92=8C=E8=B0=90?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- dnfs.html：去掉内联样式，重构为「放大镜图标 + 输入框 + 搜索按钮」结构；按钮改 <button> 避免意外提交
- theme.css：新增 .searchbox 胶囊卡片样式，与 .card/.userpanel 统一设计语言（圆角 20px、
  半透明卡片底色、浅阴影、1px 细边、橙色主按钮）
- focus-within 态：边框变橙 + 图标变橙 + 发光阴影，焦点反馈清晰
- 输入框无边框全透明，视觉焦点集中在胶囊容器
- 480px 以下移动端缩紧内边距与字号
---
 static/public/css/theme.css | 63 +++++++++++++++++++++++++++++++++++++
 static/public/dnfs.html     | 10 ++++--
 2 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/static/public/css/theme.css b/static/public/css/theme.css
index 4bd5697..4de6d16 100644
--- a/static/public/css/theme.css
+++ b/static/public/css/theme.css
@@ -238,6 +238,69 @@ input[type="button"]:disabled {
 .article-stats span { font-weight: 600; color: var(--fg-secondary); }
 #article-content { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; }
 
+/* ===== Search Box (dnfs 顶部搜索) ===== */
+.searchbox {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.45rem 0.55rem 0.45rem 0.9rem;
+    background: var(--card);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    margin-bottom: 1rem;
+    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+}
+.searchbox:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-md);
+}
+.searchbox-icon {
+    width: 18px;
+    height: 18px;
+    flex: none;
+    color: var(--muted);
+    transition: color 0.2s;
+}
+.searchbox:focus-within .searchbox-icon {
+    color: var(--accent);
+}
+.searchbox-input {
+    flex: 1;
+    min-width: 0;
+    border: none !important;
+    background: transparent !important;
+    padding: 0.45rem 0.25rem !important;
+    font-size: 0.92rem !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+}
+.searchbox-input:focus {
+    box-shadow: none !important;
+}
+.searchbox-btn {
+    flex: none;
+    padding: 0.5rem 1rem !important;
+    font-size: 0.85rem !important;
+    font-weight: 600;
+    background: var(--accent) !important;
+    color: #fff !important;
+    border: none !important;
+    border-radius: var(--radius-sm) !important;
+    cursor: pointer;
+    transition: opacity 0.15s, transform 0.1s, background 0.2s;
+    line-height: 1.2;
+}
+.searchbox-btn:hover { opacity: 0.88; }
+.searchbox-btn:active { transform: scale(0.96); }
+@media (max-width: 480px) {
+    .searchbox { padding: 0.35rem 0.4rem 0.35rem 0.75rem; gap: 0.35rem; }
+    .searchbox-icon { width: 16px; height: 16px; }
+    .searchbox-input { font-size: 0.88rem !important; }
+    .searchbox-btn { padding: 0.45rem 0.75rem !important; font-size: 0.82rem !important; }
+}
+
 /* ===== Recommend List (dnfs) ===== */
 /* 卡片尺寸随内容自适应：宽度包裹内容（fit-content），上限为容器宽度；高度天然随内容伸缩 */
 .recommend-list {
diff --git a/static/public/dnfs.html b/static/public/dnfs.html
index 53c1aa4..9becaf2 100644
--- a/static/public/dnfs.html
+++ b/static/public/dnfs.html
@@ -10,9 +10,13 @@
 	</head>
 	<body>
 		<div class="box">
-			<div id="searchbox">
-				<input type="text" placeholder="输入你想搜索的内容......" id="searchtext" style="display: inline-block; width: 89%;">
-				<input type="submit" value="搜索" id="searchsubmit" style="display: inline-block;">
+			<div id="searchbox" class="searchbox">
+				<svg class="searchbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+					<circle cx="11" cy="11" r="7"/>
+					<line x1="21" y1="21" x2="16.65" y2="16.65"/>
+				</svg>
+				<input type="text" placeholder="在当前节点内搜索..." id="searchtext" class="searchbox-input" autocomplete="off">
+				<button type="button" id="searchsubmit" class="searchbox-btn" aria-label="搜索">搜索</button>
 			</div>
 			<div id="userpanel" class="userpanel"></div>
 			<div id="minimap" class="minimap"></div>