feat(profile): 为个人简介添加动态一言显示效果

- 在 Profile 组件中集成 hitokoto API，实现打字机动画效果显示随机一言
- 优化导航栏搜索框交互逻辑，改进焦点和悬停状态处理
- 移除冗余的显示设置面板悬停控制代码，简化 DOM 事件绑定
- 添加打字机光标动画样式，增强视觉反馈
- 保留原有 bio 作为备用内容，确保 API 调用失败时的优雅降级

Author: CMSZ

src/components/Navbar.astro

@@ -47,13 +47,13 @@ const themeIcons = [
         </div>
         <div class="flex">
             <!-- Search bar for desktop - instant display with Astro icons -->
-            <div id="search-bar" class="hidden lg:flex transition-all items-center h-11 mr-2 rounded-lg
+            <div id="search-bar" class="hidden lg:flex transition-colors items-center h-11 mr-2 rounded-lg
                 bg-black/[0.04] hover:bg-black/[0.06] focus-within:bg-black/[0.06]
                 dark:bg-white/5 dark:hover:bg-white/10 dark:focus-within:bg-white/10
             ">
                 <Icon name="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30" />
                 <input id="search-input-desktop" placeholder={i18n(I18nKey.search)}
-                    class="transition-all pl-10 text-sm bg-transparent outline-0
+                    class="transition-all pl-10 text-sm bg-transparent outline-none border-0 ring-0 focus:ring-0
                     h-full w-40 text-black/50 dark:text-white/50"
                 />
             </div>
@@ -79,6 +79,7 @@ const themeIcons = [
                         </div>
                     ))}
                 </button>
+                {/* @ts-ignore */}
                 <LightDarkSwitch client:idle></LightDarkSwitch>
             </div>
             <button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden" id="nav-menu-switch">
@@ -102,53 +103,7 @@ function loadButtonScript() {
             }
         };
 
-        if (settingBtn.dataset.hoverBound !== "1") {
-            settingBtn.dataset.hoverBound = "1";
-
-            let closeTimer = 0;
-
-            const getPanel = () => document.getElementById("display-setting");
-            const open = () => {
-                const panel = getPanel();
-                if (panel) panel.classList.remove("float-panel-closed");
-            };
-            const close = () => {
-                const panel = getPanel();
-                if (panel) panel.classList.add("float-panel-closed");
-            };
-            const cancelClose = () => {
-                window.clearTimeout(closeTimer);
-            };
-            const scheduleClose = () => {
-                window.clearTimeout(closeTimer);
-                closeTimer = window.setTimeout(close, 120);
-            };
-
-            const bindPanelHover = (panel) => {
-                if (panel.dataset.hoverBound === "1") return;
-                panel.dataset.hoverBound = "1";
-                panel.addEventListener("mouseenter", cancelClose);
-                panel.addEventListener("mouseleave", (e) => {
-                    const to = e.relatedTarget;
-                    if (to instanceof Node && settingBtn.contains(to)) return;
-                    scheduleClose();
-                });
-            };
-
-            settingBtn.addEventListener("mouseenter", () => {
-                cancelClose();
-                open();
-                const panel = getPanel();
-                if (panel) bindPanelHover(panel);
-            });
-
-            settingBtn.addEventListener("mouseleave", (e) => {
-                const panel = getPanel();
-                const to = e.relatedTarget;
-                if (panel && to instanceof Node && panel.contains(to)) return;
-                scheduleClose();
-            });
-        }
+
     }
 
     let menuBtn = document.getElementById("nav-menu-switch");
@@ -167,19 +122,30 @@ loadButtonScript();
 function setupSearchBar() {
     const bar = document.getElementById("search-bar");
     const input = document.getElementById("search-input-desktop");
-    if (!bar || !input) return;
+    if (!bar || !input || !(input instanceof HTMLInputElement)) return;
+
     const expand = () => input.classList.add("w-60");
     const collapse = () => input.classList.remove("w-60");
+
     bar.addEventListener("mouseenter", () => {
         expand();
         input.focus();
     });
     bar.addEventListener("mouseleave", () => {
-        input.blur();
-        collapse();
+        if (document.activeElement === input && input.value.trim() === "") {
+            input.blur();
+        } else if (document.activeElement !== input) {
+            collapse();
+        }
+    });
+    input.addEventListener("focus", () => {
+        expand();
+    });
+    input.addEventListener("blur", () => {
+        if (!bar.matches(':hover')) {
+            collapse();
+        }
     });
-    input.addEventListener("focus", expand);
-    // keep expanded while typing; collapse only on mouseleave
 }
 
 setupSearchBar();

src/components/widget/Profile.astro

@@ -21,7 +21,7 @@ const config = profileConfig;
     <div class="px-2">
         <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
         <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
-        <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
+        <div class="text-center text-neutral-400 mb-2.5 transition" id="hitokoto"></div>
         <div class="flex flex-wrap gap-2 justify-center mb-1">
             {config.links.length > 1 && config.links.map(item =>
                     <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
@@ -110,3 +110,59 @@ const config = profileConfig;
     // 监听 Swup 内容替换事件，确保页面切换后重新获取数据
     document.addEventListener('content:replace', loadSiteStats);
 </script>
+
+<script define:vars={{ config }}>
+/** @param {HTMLElement} element @param {string} text */
+function typewriter(element, text) {
+  element.classList.add("typewriter-cursor");
+  element.textContent = "";
+  let index = 0;
+  const speed = 150;
+  function step() {
+    if (index < text.length) {
+      element.textContent += text.charAt(index);
+      index += 1;
+      window.setTimeout(step, speed);
+    } else {
+      element.classList.remove("typewriter-cursor");
+    }
+  }
+  step();
+}
+
+async function loadHitokoto() {
+  const el = document.getElementById("hitokoto");
+  if (!el) return;
+  try {
+    const response = await fetch("https://v1.hitokoto.cn/?c=k");
+    const data = await response.json();
+    const text = data?.hitokoto || "";
+    if (!text) return;
+    typewriter(el, text);
+  } catch (error) {
+    console.error("获取一言失败：", error);
+    const fallback = config.bio;
+    typewriter(el, fallback);
+  }
+}
+
+document.addEventListener("DOMContentLoaded", loadHitokoto);
+</script>
+
+<style>
+  :global(.typewriter-cursor)::after {
+    content: "";
+    width: 2px;
+    height: 1.5em;
+    vertical-align: text-bottom;
+    display: inline-block;
+    background-color: var(--primary);
+    animation: cursor-blink 1.2s step-end infinite;
+    margin-left: 4px;
+    opacity: 0.8;
+  }
+  @keyframes cursor-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+  }
+</style>