refactor: 简化 TextInputArea，移除 showMessage 和 MUI 样式，改用 shadcn 样式和 sonner toast

components/TopBar.tsx

@@ -1,101 +1,96 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Settings,
-  ExternalLink,
   ArrowLeft,
-  Search,
-  History,
-  X,
+  ExternalLink,
   Globe,
-  Sun,
-  Moon,
+  History,
   Monitor,
+  Moon,
+  Search,
+  Settings,
+  Sun,
+  X,
 } from 'lucide-react';
 import { useRouter } from '@/providers/RouterProvider';
 import { useThemeMode } from '@/providers/ThemeModeProvider';
-import { FEATURES, FeatureConfig } from '@/config/features';
+import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
-import { openExtensionPage } from '@/utils/chromeTabs';
 import { useTranslation } from 'react-i18next';
-import { SUPPORTED_LANGUAGES, normalizeLanguage } from '@/i18n';
+import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
+import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
 
-const topBarStyles = {
-  SEARCH_MAX_WIDTH: 400,
-  DROPDOWN_MAX_HEIGHT: 300,
-  Z_INDEX: 1100,
-  DROPDOWN_Z_INDEX: 1200,
-  SEARCH_HISTORY_LIMIT: 10,
-  SEARCH_HISTORY_DISPLAY: 5,
-};
+// 常量配置抽取（无需写在全局变量或 styles 对象里）
+const SEARCH_HISTORY_LIMIT = 10;
+const SEARCH_HISTORY_DISPLAY = 5;
 
 export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
   const { currentPage, goBack, navigateTo } = useRouter();
   const { mode, setMode } = useThemeMode();
   const { t, i18n } = useTranslation(['common', 'features']);
+
   const [searchQuery, setSearchQuery] = useState('');
   const [showResults, setShowResults] = useState(false);
   const [searchHistory, setSearchHistory] = useState<string[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // 加载搜索历史
-  useEffect(() => {
-    storageUtil
-      .get('app/searchHistory', [])
-      .then((history) => {
-        setSearchHistory(history || []);
-      })
-      .catch((error) => {
-        console.error('加载搜索历史失败:', error);
-      });
-  }, []);
-
-  // 模糊搜索逻辑
-  const searchResults = useMemo(() => {
-    if (!searchQuery.trim()) return [];
-    const query = searchQuery.toLowerCase();
-    return FEATURES.filter((f) => {
-      if (f.key === 'dashboard') return false;
-      const label = t(f.labelKey).toLowerCase();
-      const desc = t(f.descriptionKey).toLowerCase();
-      return label.includes(query) || desc.includes(query);
-    });
-  }, [searchQuery, t]);
-
-  const displayedHistory = useMemo(() => {
-    if (searchQuery.trim()) return [];
-    return searchHistory.slice(0, topBarStyles.SEARCH_HISTORY_DISPLAY);
-  }, [searchHistory, searchQuery]);
-
   const handleOpenInTab = async () => {
     await openExtensionPage('popup.html', { mode: 'tab' });
     window.close();
   };
 
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-    setShowResults(true);
-    setSelectedIndex(-1);
+  // 2. 健壮的 Click Outside 逻辑：点击空白处收起搜索框
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setShowResults(false);
+      }
     };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
+  // 从 Chrome Storage 异步初始化历史记录
+  useEffect(() => {
+    storageUtil
+      .get('app/searchHistory', [])
+      .then((history) => {
+        if (history) setSearchHistory(history);
+      })
+      .catch((err) => console.error('加载搜索历史失败:', err));
+  }, []);
+
+  // 3. 模糊搜索匹配（移除了无意义的 dashboard 干扰项）
+  const searchResults = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return [];
+    return FEATURES.filter((f) => {
+      if (f.key === 'dashboard') return false;
+      return (
+        t(f.labelKey).toLowerCase().includes(query) ||
+        t(f.descriptionKey).toLowerCase().includes(query)
+      );
+    });
+  }, [searchQuery, t]);
+
+  const displayedHistory = useMemo(() => {
+    if (searchQuery.trim()) return [];
+    return searchHistory.slice(0, SEARCH_HISTORY_DISPLAY);
+  }, [searchHistory, searchQuery]);
+
+  // 新增/持久化历史记录
   const saveToHistory = async (query: string) => {
     if (!query.trim()) return;
-    setSearchHistory((prev) => {
-      const newHistory = [query, ...prev.filter((h) => h !== query)].slice(
+    const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
       0,
-        topBarStyles.SEARCH_HISTORY_LIMIT,
+      SEARCH_HISTORY_LIMIT,
     );
-      return newHistory;
-    });
+    setSearchHistory(nextHistory);
+    await storageUtil.set('app/searchHistory', nextHistory).catch((err) => console.error(err));
   };
 
-  // 副作用：搜索历史变化后持久化到 storage
-  useEffect(() => {
-    storageUtil.set('app/searchHistory', searchHistory).catch((error) => {
-      console.error('保存搜索历史失败:', error);
-    });
-  }, [searchHistory]);
-
   const handleSelectFeature = (feature: FeatureConfig) => {
     navigateTo(feature.key);
     saveToHistory(t(feature.labelKey));
@@ -106,19 +101,19 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
   const toggleLanguage = async () => {
     const currentLng = normalizeLanguage(i18n.language);
     const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLng);
-    const nextIndex = (currentIndex + 1) % SUPPORTED_LANGUAGES.length;
-    const newLng = SUPPORTED_LANGUAGES[nextIndex];
-    await i18n.changeLanguage(newLng);
-    await storageUtil.set('app/language', newLng);
+    const nextLng = SUPPORTED_LANGUAGES[(currentIndex + 1) % SUPPORTED_LANGUAGES.length];
+    await i18n.changeLanguage(nextLng);
+    await storageUtil.set('app/language', nextLng);
   };
 
   const cycleThemeMode = () => {
-    const next = { light: 'dark', dark: 'system', system: 'light' } as const;
-    setMode(next[mode]);
+    const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
+    setMode(nextMap[mode]);
   };
 
   const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
 
+  // 4. 健壮的键盘导航交互
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
 
@@ -129,6 +124,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
       e.preventDefault();
       setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
     } else if (e.key === 'Enter') {
+      e.preventDefault();
       if (selectedIndex >= 0) {
         if (searchQuery.trim()) {
           handleSelectFeature(searchResults[selectedIndex]);
@@ -136,13 +132,10 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           const selectedQuery = displayedHistory[selectedIndex];
           setSearchQuery(selectedQuery);
           setSelectedIndex(-1);
-          // 触发搜索：如果匹配到功能则跳转，否则保持搜索词展示结果
-          const matchedFeature = FEATURES.find(
+          const matched = FEATURES.find(
             (f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
           );
-          if (matchedFeature) {
-            handleSelectFeature(matchedFeature);
-          }
+          if (matched) handleSelectFeature(matched);
         }
       } else if (searchQuery.trim() && searchResults.length > 0) {
         handleSelectFeature(searchResults[0]);
@@ -156,39 +149,39 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
   const isDashboard = currentPage === 'dashboard';
 
   return (
-    <div className="flex justify-between items-center px-3 sm:px-4 py-3 border-b border-border bg-background relative z-[1100]">
-      <div className="w-8 sm:w-10">
+    <header className="flex h-14 items-center justify-between border-b border-border bg-background px-4 relative z-50">
+      {/* 左侧：返回按钮区 */}
+      <div className="flex w-10 items-center justify-start">
         {!isDashboard && (
           <button
             type="button"
             onClick={goBack}
             aria-label={t('common:buttons.back')}
-            className="p-1.5 rounded-md bg-muted hover:bg-accent transition-colors"
+            className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
           >
-            <ArrowLeft className="h-3.5 w-3.5" />
+            <ArrowLeft className="h-4 w-4" />
           </button>
         )}
       </div>
 
-      <span className="hidden md:block text-xs font-extrabold tracking-wider uppercase text-muted-foreground ml-2">
-        {t('common:appName')}
-      </span>
-
-      <div className="flex-1 mx-2 sm:mx-4 relative max-w-[400px]">
+      {/* 中间：搜索容器 */}
+      <div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
         <div className="relative">
-          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-            <Search className="h-4 w-4" />
-          </div>
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
           <input
             ref={inputRef}
             type="text"
             placeholder={t('common:buttons.search')}
             value={searchQuery}
-            onChange={handleSearchChange}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setShowResults(true);
+              setSelectedIndex(-1);
+            }}
             onFocus={() => setShowResults(true)}
             onKeyDown={handleKeyDown}
             aria-label={t('common:buttons.search')}
-            className="w-full pl-9 pr-8 py-1.5 text-sm rounded-lg border border-transparent bg-muted focus:bg-background focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
+            className="w-full h-9 pl-9 pr-8 text-sm rounded-md border border-input bg-muted/50 transition-all placeholder:text-muted-foreground focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
           />
           {searchQuery && (
             <button
@@ -198,16 +191,17 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                 setSelectedIndex(-1);
               }}
               aria-label={t('common:buttons.clearSearch')}
-              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded-md text-muted-foreground hover:text-foreground"
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
             >
-              <X className="h-3.5 w-3.5" />
+              <X className="h-3 w-3" />
             </button>
           )}
         </div>
 
+        {/* 动态联想结果卡片 */}
         {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
-          <div className="absolute top-full left-0 right-0 mt-2 bg-popover rounded-lg shadow-lg border border-border max-h-[300px] overflow-auto z-[1200]">
-            <ul role="listbox" className="py-1">
+          <div className="absolute top-full left-0 right-0 mt-1 bg-popover text-popover-foreground rounded-md shadow-md border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-1 duration-150">
+            <ul role="listbox" className="p-1">
               {searchQuery.trim() ? (
                 searchResults.length > 0 ? (
                   searchResults.map((feature, index) => (
@@ -216,15 +210,18 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                       role="option"
                       aria-selected={selectedIndex === index}
                       onClick={() => handleSelectFeature(feature)}
-                      className={`flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors ${
-                        selectedIndex === index ? 'bg-primary/10' : 'hover:bg-muted'
-                      }`}
+                      className={cn(
+                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
+                        selectedIndex === index
+                          ? 'bg-accent text-accent-foreground'
+                          : 'hover:bg-muted/60',
+                      )}
                     >
-                      <div className="w-8 h-8 flex items-center justify-center text-muted-foreground">
-                        {feature.icon && <feature.icon className="h-5 w-5" />}
+                      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground">
+                        {feature.icon && <feature.icon className="h-4 w-4" />}
                       </div>
                       <div className="flex-1 min-w-0">
-                        <p className="text-sm font-semibold text-foreground truncate">
+                        <p className="font-medium text-foreground truncate">
                           {t(feature.labelKey)}
                         </p>
                         <p className="text-xs text-muted-foreground truncate">
@@ -234,17 +231,15 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                     </li>
                   ))
                 ) : (
-                  <li className="px-4 py-6 text-center">
-                    <p className="text-sm text-muted-foreground">{t('common:buttons.noResults')}</p>
+                  <li className="px-4 py-6 text-center text-sm text-muted-foreground">
+                    {t('common:buttons.noResults')}
                   </li>
                 )
               ) : (
                 <>
-                  <li className="px-4 py-2">
-                    <span className="text-xs font-bold text-muted-foreground">
+                  <div className="px-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
                     {t('common:buttons.recentSearch')}
-                    </span>
-                  </li>
+                  </div>
                   {displayedHistory.map((item, index) => (
                     <li
                       key={item}
@@ -254,14 +249,15 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                         setSearchQuery(item);
                         setSelectedIndex(-1);
                       }}
-                      className={`flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors ${
-                        selectedIndex === index ? 'bg-primary/10' : 'hover:bg-muted'
-                      }`}
+                      className={cn(
+                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
+                        selectedIndex === index
+                          ? 'bg-accent text-accent-foreground'
+                          : 'hover:bg-muted/60',
+                      )}
                     >
-                      <div className="w-8 h-8 flex items-center justify-center text-muted-foreground">
-                        <History className="h-4 w-4" />
-                      </div>
-                      <span className="text-sm text-foreground">{item}</span>
+                      <History className="h-4 w-4 text-muted-foreground shrink-0" />
+                      <span className="truncate">{item}</span>
                     </li>
                   ))}
                 </>
@@ -271,44 +267,44 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
         )}
       </div>
 
-      <div className="flex items-center gap-1 flex-shrink-0">
-        <button
-          type="button"
-          onClick={toggleLanguage}
-          aria-label={t('common:buttons.toggleLanguage')}
-          title={t('common:buttons.toggleLanguage')}
-          className="p-1.5 rounded-md hover:bg-accent transition-colors"
-        >
+      {/* 右侧：操作区 */}
+      <div className="flex items-center gap-1 shrink-0">
+        <IconButton onClick={toggleLanguage} title={t('common:buttons.toggleLanguage')}>
           <Globe className="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          onClick={cycleThemeMode}
-          aria-label={t('common:buttons.toggleTheme')}
-          title={t(`common:buttons.themeMode.${mode}`)}
-          className="p-1.5 rounded-md hover:bg-accent transition-colors"
-        >
+        </IconButton>
+        <IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
           <ThemeIcon className="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          onClick={handleOpenInTab}
-          aria-label={t('common:buttons.openInTab')}
-          title={t('common:buttons.openInTab')}
-          className="p-1.5 rounded-md hover:bg-accent transition-colors"
-        >
+        </IconButton>
+        <IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
           <ExternalLink className="h-4 w-4" />
-        </button>
-        <button
-          type="button"
-          onClick={onOpenOptions}
-          aria-label={t('common:buttons.settings')}
-          title={t('common:buttons.settings')}
-          className="p-1.5 rounded-md hover:bg-accent transition-colors"
-        >
+        </IconButton>
+        <IconButton onClick={onOpenOptions} title={t('common:buttons.settings')}>
           <Settings className="h-4 w-4" />
-        </button>
-      </div>
+        </IconButton>
       </div>
+    </header>
+  );
+}
+
+// 5. 提炼出高度复用的原子按钮，大幅精简 Tailwind 冗余，符合 shadcn 的灵巧风格
+function IconButton({
+  children,
+  onClick,
+  title,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  title: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+    >
+      {children}
+    </button>
   );
 }

components/__tests__/TopBar.test.tsx

@@ -2,6 +2,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import type { PageType } from '@/types/storage';
 import React from 'react';
+import TopBar from '@/components/TopBar';
+import { RouterProvider } from '@/providers/RouterProvider';
+import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
 
 // matchMedia must be mocked before ThemeModeProvider is imported
 Object.defineProperty(window, 'matchMedia', {
@@ -18,10 +21,6 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
-import TopBar from '@/components/TopBar';
-import { RouterProvider } from '@/providers/RouterProvider';
-import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
-
 const mockRouterValue = {
   currentPage: 'dashboard' as PageType,
   visiblePages: ['dashboard', 'timestamp'] as PageType[],
@@ -53,11 +52,6 @@ describe('TopBar 组件', () => {
   };
 
   describe('渲染测试', () => {
-    it('应使用默认标题渲染', () => {
-      renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
-      expect(screen.getByText('common:appName')).toBeInTheDocument();
-    });
-
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);