feat: 注入静态全文搜索组件并优化暗黑样式

DEV_LOG.md

@@ -41,6 +41,8 @@
 
 - **Task 25**: 引入 Pagefind 依赖，并重构 build 工作流实现自动建立本地离线搜索索引。
 
+- **Task 26**: 构建 `Search.astro` 搜索框并挂载至全局侧边栏，完成暗黑主题样式覆盖。
+
 ---
 **🔄 当前状态**: 系统架构稳定，UI 交互流畅。所有功能模块已固化至 Git 版本控制。
 **📝 下一步计划**: 等待分配新需求（如：全文搜索、SEO 优化等）。

src/components/Search.astro

@@ -0,0 +1,58 @@
+---
+// 动态加载 Pagefind UI 的包装组件
+---
+<div id="search" class="mb-4"></div>
+
+<script is:inline>
+  document.addEventListener('astro:page-load', async () => {
+    const searchDiv = document.getElementById('search');
+    if (!searchDiv || searchDiv.innerHTML.trim() !== '') return;
+
+    try {
+      // 尝试拉取 Pagefind 资源 (仅在 build/preview 模式下存在)
+      const response = await fetch('/pagefind/pagefind-ui.js');
+      if (response.ok) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = '/pagefind/pagefind-ui.css';
+        document.head.appendChild(link);
+
+        const script = document.createElement('script');
+        script.src = '/pagefind/pagefind-ui.js';
+        script.onload = () => {
+          new window.PagefindUI({ 
+            element: "#search", 
+            showSubResults: true,
+            showImages: false,
+            bundlePath: "/pagefind/"
+          });
+        };
+        document.head.appendChild(script);
+      } else {
+        searchDiv.innerHTML = '<div class="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800/50 p-2 text-center rounded-lg border border-gray-200 dark:border-gray-700">🔍 搜索功能将在 Build 后激活</div>';
+      }
+    } catch (e) {
+      console.warn('Pagefind 尚未初始化');
+    }
+  });
+</script>
+
+<style is:global>
+  /* Pagefind 极客暗黑风主题定制 */
+  #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;
+  }
+  .dark #search {
+    --pagefind-ui-primary: #60a5fa;
+    --pagefind-ui-text: #d1d5db;
+    --pagefind-ui-background: #1f2937;
+    --pagefind-ui-border: #374151;
+  }
+  .pagefind-ui__drawer { max-height: 400px; overflow-y: auto; }
+  .pagefind-ui__result-excerpt { color: var(--pagefind-ui-text) !important; opacity: 0.7; }
+</style>

src/components/Sidebar.astro

@@ -1,10 +1,12 @@
 ---
 import { getCollection } from 'astro:content';
+import Search from './Search.astro';
 // Astro v6 中获取所有文档
 const docs = await getCollection('docs');
 ---
 <aside class="w-64 bg-gray-50 dark:bg-gray-800/30 border-r border-gray-200 dark:border-gray-800 h-screen sticky top-0 overflow-y-auto p-6 flex-shrink-0 hidden md:flex flex-col">
   <div class="font-extrabold text-lg mb-6 text-gray-900 dark:text-white tracking-tight">📚 知识库导航</div>
+  <Search />
   <nav class="flex flex-col gap-1.5">
     <a href="/" class="text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors px-2 py-1.5">
       🏠 返回首页