refactor：添加搜索框

Author: yyyCode

vue/src/assets/blog.css

@@ -1896,6 +1896,55 @@ body {
   display: inline-block;
 }
 
+.site-search-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 220px;
+  max-width: 320px;
+  min-width: 140px;
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 999px;
+  background: #f0f0f0;
+  border: 1px solid transparent;
+  color: var(--muted);
+  cursor: text;
+  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+[data-theme='dark'] .site-search-bar {
+  background: #1e1e22;
+  border-color: #2a2a2e;
+}
+
+.site-search-bar:hover {
+  background: #e8e8e8;
+  border-color: #d0d0d0;
+}
+
+[data-theme='dark'] .site-search-bar:hover {
+  background: #26262b;
+  border-color: #3a3a3e;
+}
+
+.site-search-bar-icon {
+  flex-shrink: 0;
+  display: block;
+  opacity: 0.5;
+}
+
+.site-search-bar-placeholder {
+  font-size: 13px;
+  color: inherit;
+  opacity: 0.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1;
+}
+
 .site-nav {
   display: inline-flex;
   align-items: center;

vue/src/components/BlogHeader.vue

@@ -6,6 +6,14 @@
         <span class="site-brand-text">{{ (siteConfig && siteConfig.blog_name) || '烧仙草冰室' }}</span>
       </router-link>
 
+      <div class="site-search-bar" aria-label="搜索">
+        <svg class="site-search-bar-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8" />
+          <path d="M21 21l-4.35-4.35" />
+        </svg>
+        <span class="site-search-bar-placeholder">搜索文章...</span>
+      </div>
+
       <nav class="site-nav" aria-label="站点导航">
         <router-link to="/" class="site-nav-link" active-class="active">
           <span class="site-nav-ico" aria-hidden="true">
@@ -26,16 +34,6 @@
           文章
         </router-link>
 
-        <router-link to="/search" class="site-nav-link" active-class="active">
-          <span class="site-nav-ico" aria-hidden="true">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="11" cy="11" r="8" />
-              <path d="M21 21l-4.35-4.35" />
-            </svg>
-          </span>
-          搜索
-        </router-link>
-
         <router-link to="/feedback" class="site-nav-link" active-class="active">
           <span class="site-nav-ico" aria-hidden="true">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">