From 1d478c3b5de620adb49ee57f0f5b26208747d462 Mon Sep 17 00:00:00 2001
From: kennethcheng <a1478925630@163.com>
Date: Mon, 27 Apr 2026 15:48:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=90=9C=E7=B4=A2=E6=A1=86=20UI=20?=
 =?UTF-8?q?=E6=9E=81=E7=AE=80=E5=8D=87=E7=BB=B4=E4=B8=8E=202026=20?=
 =?UTF-8?q?=E5=AE=A1=E7=BE=8E=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 DEV_LOG.md                  |  4 ++-
 src/components/Search.astro | 67 ++++++++++++++++++++++++++++---------
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/DEV_LOG.md b/DEV_LOG.md
index 2c4a2fd..bec2074 100644
--- a/DEV_LOG.md
+++ b/DEV_LOG.md
@@ -43,6 +43,8 @@
 
 - **Task 26**: 构建 `Search.astro` 搜索框并挂载至全局侧边栏，完成暗黑主题样式覆盖。
 
+- **Task 27**: 彻底重构搜索框 UI，移除默认硬编码样式，引入半透明磨砂玻璃效果，优化图标与聚焦交互，全面适配 2026 审美标准。
+
 ---
 **🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
-**📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。
\ No newline at end of file
+**📝 下一步计划**: 等待分配新需求（如：SEO 优化等）。
\ No newline at end of file
diff --git a/src/components/Search.astro b/src/components/Search.astro
index 978ea34..d139119 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -1,7 +1,7 @@
 ---
 // 动态加载 Pagefind UI 的包装组件
 ---
-<div id="search" class="mb-4"></div>
+<div id="search" class="mb-4 not-prose"></div>
 
 <script is:inline>
   document.addEventListener('astro:page-load', async () => {
@@ -20,11 +20,14 @@
         const script = document.createElement('script');
         script.src = '/pagefind/pagefind-ui.js';
         script.onload = () => {
-          new window.PagefindUI({ 
-            element: "#search", 
+          new window.PagefindUI({
+            element: "#search",
             showSubResults: true,
             showImages: false,
-            bundlePath: "/pagefind/"
+            bundlePath: "/pagefind/",
+            translations: {
+              search: { placeholder: '搜索' } // 将占位符改为中文
+            }
           });
         };
         document.head.appendChild(script);
@@ -38,21 +41,53 @@
 </script>
 
 <style is:global>
-  /* Pagefind 极客暗黑风主题定制 */
+  /* 2026 极简风 Pagefind UI 主题定制 */
   #search {
     --pagefind-ui-scale: 0.8;
-    --pagefind-ui-primary: #3b82f6;
-    --pagefind-ui-text: #4b5563;
-    --pagefind-ui-background: #ffffff;
-    --pagefind-ui-border: #e5e7eb;
-    --pagefind-ui-border-radius: 8px;
+    --pagefind-ui-primary: #3b82f6; /* blue-500 */
+    --pagefind-ui-text: #64748b; /* slate-500 */
+    --pagefind-ui-background: rgba(248, 250, 252, 0.4); /* Very clear slate-50/40% (acrylic effect) */
+    --pagefind-ui-border: transparent; /* No border for seamless integration */
+    --pagefind-ui-border-radius: 10px; /* rounded-lg */
   }
   .dark #search {
-    --pagefind-ui-primary: #60a5fa;
-    --pagefind-ui-text: #d1d5db;
-    --pagefind-ui-background: #1f2937;
-    --pagefind-ui-border: #374151;
+    --pagefind-ui-text: #94a3b8; /* slate-400 */
+    --pagefind-ui-background: rgba(15, 23, 42, 0.3); /* Very clear slate-900/30% */
+    --pagefind-ui-border: transparent;
+  }
+  
+  /* 定制图标: 纤细且低对比度 */
+  .pagefind-ui__search-icon {
+    color: #94a3b8 !important; /* slate-400 */
+    opacity: 0.6;
+    scale: 0.9;
+  }
+  .dark .pagefind-ui__search-icon {
+    color: #64748b !important; /* slate-500 */
+    opacity: 0.8;
+  }
+
+  /* 聚焦状态: 移除默认蓝色轮廓，添加微妙的背景和边框高亮 */
+  .pagefind-ui__search-input:focus {
+    outline: none !important;
+    background-color: rgba(241, 245, 249, 0.6) !important; /* slate-100/60% */
+    border: 1px solid #e2e8f0 !important; /* slate-200 */
+  }
+  .dark .pagefind-ui__search-input:focus {
+    background-color: rgba(30, 41, 59, 0.5) !important; /* slate-800/50% */
+    border: 1px solid #334155 !important; /* slate-700 */
+  }
+  
+  /* 结果抽屉: 保持磨砂效果与圆角 */
+  .pagefind-ui__drawer { 
+    max-height: 400px; 
+    overflow-y: auto; 
+    background: inherit;
+    border-radius: 10px;
+    margin-top: 4px;
+  }
+  .pagefind-ui__result-excerpt { 
+    color: var(--pagefind-ui-text) !important; 
+    opacity: 0.7; 
   }
-  .pagefind-ui__drawer { max-height: 400px; overflow-y: auto; }
-  .pagefind-ui__result-excerpt { color: var(--pagefind-ui-text) !important; opacity: 0.7; }
 </style>