style: 搜索框 UI 极简升维与 2026 审美适配

DEV_LOG.md

@@ -43,6 +43,8 @@
 
 - **Task 26**: 构建 `Search.astro` 搜索框并挂载至全局侧边栏，完成暗黑主题样式覆盖。
 
+- **Task 27**: 彻底重构搜索框 UI，移除默认硬编码样式，引入半透明磨砂玻璃效果，优化图标与聚焦交互，全面适配 2026 审美标准。
+
 ---
 **🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
-**📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。
+**📝 下一步计划**: 等待分配新需求（如：SEO 优化等）。

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({ 
+          new window.PagefindUI({
-            element: "#search", 
+            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-primary: #3b82f6; /* blue-500 */
-    --pagefind-ui-text: #4b5563;
+    --pagefind-ui-text: #64748b; /* slate-500 */
-    --pagefind-ui-background: #ffffff;
+    --pagefind-ui-background: rgba(248, 250, 252, 0.4); /* Very clear slate-50/40% (acrylic effect) */
-    --pagefind-ui-border: #e5e7eb;
+    --pagefind-ui-border: transparent; /* No border for seamless integration */
-    --pagefind-ui-border-radius: 8px;
+    --pagefind-ui-border-radius: 10px; /* rounded-lg */
   }
   .dark #search {
-    --pagefind-ui-primary: #60a5fa;
+    --pagefind-ui-text: #94a3b8; /* slate-400 */
-    --pagefind-ui-text: #d1d5db;
+    --pagefind-ui-background: rgba(15, 23, 42, 0.3); /* Very clear slate-900/30% */
-    --pagefind-ui-background: #1f2937;
+    --pagefind-ui-border: transparent;
-    --pagefind-ui-border: #374151;
+  }
+  
+  /* 定制图标: 纤细且低对比度 */
+  .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>