feat: Tailwind CSS/shadcn/ui 迁移 & 右键菜单功能 (#42)

* feat: 添加 contextMenus 权限和消息类型定义 * feat: 实现右键菜单注册与点击分流逻辑 - 新增 utils/contextMenu.ts 封装菜单配置和解析函数 - 在 background.ts 监听 onInstalled 初始化菜单 - 实现 contextMenus.onClicked 点击事件处理 - 分流逻辑：优先发送到侧边栏，否则打开 options 页面 - 添加 contextMenu 单元测试（15个测试用例） - 更新 vitest.setup.ts 添加 contextMenus mock * feat: 实现 Content Script 原位轻量提示 UI - 新增 uiPopover.ts 实现原位弹窗组件（深色主题、自动定位、自动隐藏） - 新增 contextMenuHandler.ts 处理右键菜单消息 - 时间戳转换：在点击位置显示转换结果 - 文本统计：显示字符/单词/行数/字节统计 - 更新 messageHandler.ts 挂载右键菜单消息监听 * feat: 实现 React 页面层右键菜单数据联动 - 新增 useContextMenuData Hook 处理右键菜单数据传递 - 重构 Jwt/Base64Converter/TextStatistics/QrCode 页面接收右键数据 - RouterProvider 支持从 URL 参数解析右键菜单数据 - 添加 contextMenu/pendingData 存储键到 StorageSchema - 添加 useContextMenuData 单元测试（12个测试用例） * test: 添加 background 单元测试与边界情况处理 - 新增 entrypoints/__tests__/background.test.ts (12个测试用例) - 超长文本截断限制 (>10000字符) - Base64 内联图片拦截并返回错误提示 - 更新 parseContextMenuClick 返回 ParseResult 格式 - 更新测试匹配新的返回格式 - lint/typecheck/test 全部通过 (579个测试) * fix: 修复右键菜单跳转到错误页面的问题 - 将 options 页面路径从 '/entrypoints/options/index.html' 修正为 '/options.html' - WXT 构建后 entrypoints/options/index.html 会输出为根目录的 options.html * fix: 修复右键菜单跳转目标为 popup 页面 - 将 fallback 页面从 options.html 改为 popup.html - popup 页面使用 RouterProvider，可以正确处理 URL 参数并跳转到对应功能页面 - options 页面是独立设置页，不支持 URL 参数路由 * fix: 使用 openPopup() 替代 tabs.create() 打开弹窗 - background.ts: 使用 browser.action.openPopup() 打开 popup 弹窗 - 先保存数据到 storage，然后打开 popup - RouterProvider.tsx: 初始化时检查 storage 中的 pendingData 并跳转到对应页面 - 移除之前错误的 tabs.create() 方式 * fix: 修复右键菜单数据未传递到目标页面的问题 - RouterProvider 不再提前清除 pendingData - 让目标页面的 useContextMenuData 来消费和清除数据 - 这样确保 TextStatistics 等页面能正确接收选中的文本 * fix: 修复 popup 已打开时右键菜单不生效的问题 - 在 RouterProvider 中添加对 contextMenu/pendingData 的 storage 变化监听 - 当 pendingData 变化时，自动跳转到对应功能页面 - 解决了 openPopup() 只聚焦已有窗口而不触发重新挂载的问题 * feat: 支持右键菜单图片二维码识别 - 在 qrCodeParser.ts 中添加 parseQrCodeFromUrl 函数，支持从图片 URL 解析二维码 - 在 QrCodeToUrlSection 中使用 useContextMenuData 接收右键菜单传递的图片 URL - 自动下载图片并解析二维码，显示解析结果 * refactor: 暂时移除图片二维码识别功能 - 删除 qrCode-image 右键菜单配置 - 删除 parseQrCodeFromUrl 函数 - 删除 QrCodeToUrlSection 中的 useContextMenuData 相关代码 - 更新相关测试用例 * feat: 支持右键菜单时间戳转换 - 在 useTimestampConverter 中添加 useContextMenuData hook - 智能识别输入是时间戳还是日期时间字符串 - 自动切换到对应模式并执行转换 - 时间戳自动识别秒/毫秒单位 * fix: 修复右键菜单功能的多个逻辑漏洞 1. 修复时区硬编码问题 - 使用用户选择的时区而非固定 Asia/Shanghai 2. 修复 openPopup() 失败后数据残留 - 失败时清除 storage 中的待处理数据 3. 统一数据过期时间常量 - 导出 CONTEXT_MENU_DATA_EXPIRY_MS 并统一使用 4. 修复 featureKey 类型断言不安全 - 使用映射表处理非常规菜单 ID * refactor(qrcode): 提取独立组件并添加单元测试 - 创建 pages/QrCode/types.ts 定义状态类型接口 - 提取 QrCodePreview 组件用于二维码预览和操作 - 提取 ImageUploader 组件封装图片上传、拖拽、粘贴逻辑 - 重构 UrlToQrCodeSection 状态提升到父组件 - 重构 QrCodeToUrlSection 通过回调传递解析结果 - 更新主页面 index.tsx 集中管理所有状态 - 为 QrCodePreview 和 ImageUploader 添加单元测试 (23 个用例) * refactor(qrcode): 引入通用组件并重构双栏布局 - 引入 SwitchButtonGroup 用于模式切换 - 引入 TextInputArea 用于文本输入和结果展示 - 使用 MUI Grid 构建响应式双栏布局 - 实现 generate/parse 模式下的左右面板内容切换 - 修复 iconColor 颜色格式错误，使用 qrCodePageStyles.primaryColor * refactor(qrcode): 国际化补充、质量保障与错误处理优化 - 补充 i18n 翻译键（generateMode, parseMode, pasteHint 等） - 创建 useDebounce Hook 实现输入防抖 (200ms) - 使用 useRef 解决 useEffect 无限循环问题 - 编写 pages/QrCode 单元测试 (7 个用例) - 优化右键菜单错误处理，改进用户提示 - 运行 603 个测试全部通过 * refactor(qrcode): 组件化重构，采用 Context + Hook 模式 - 创建 QrCodeContext 和 QrCodeProvider 管理共享状态 - 提取 useQrCode Hook 封装所有状态和业务逻辑 - 创建 GeneratePanel 组件处理二维码生成模式 - 创建 ParsePanel 组件处理二维码解析模式 - 简化 index.tsx 为容器组件 (340行 → 47行) - 删除未使用的旧组件文件 (QrCodeToUrlSection, UrlToQrCodeSection) - 清理 types.ts 中未使用的类型定义 - 603 个测试全部通过 * fix(qrcode): 固定二维码预览图片尺寸，避免布局抖动 - 设置 QR_PREVIEW_IMAGE 固定尺寸 250x250 - 与 QRious 生成的二维码大小保持一致 - 解决输入内容变化时预览窗口大小跳动问题 * fix(qrcode): 修复切换 tab 后二维码图片失效问题 - 移除 ImageUploader 组件卸载时的预览 URL 释放逻辑 - 在 useQrCode hook 中统一管理预览 URL 生命周期 - 创建新预览 URL 前释放旧的，避免内存泄漏 * fix(qrcode): 固定图片上传区域高度，避免布局抖动 - 将 DROPZONE 的 minHeight: 200 改为 height: 250 - 与二维码预览图片高度保持一致 - 解决上传图片时 div 高度变化问题 * refactor(qrCode): 优化二维码解析功能 - 将'二维码转 URL'改为'二维码转文本' - 将解析结果的文本预览框的 placeholder 置为空 - 去除手动解析二维码功能，只保留自动解析 * fix(pageHeader): 使用 MUI 主题色替代硬编码颜色，支持暗色模式 * feat(pageHeader): popup 模式下隐藏 PageHeader 组件 * fix(i18n): 统一使用 useLazyTranslation 避免翻译 key 闪烁 * perf: 配置 manualChunks 拆分 vendor chunk，优化打包体积 - 使用 Vite 插件 manualChunksForHtmlOnly 仅对 HTML 多入口构建生效 - 跳过 background/content-script 的 IIFE 构建（不支持 manualChunks） - 拆分 vendor-react (193KB)、vendor-mui (326KB)、vendor-i18n (55KB) - 按需加载 vendor-qr (78KB)、vendor-dnd (45KB)、vendor-markdown (41KB) - PageErrorBoundary chunk 从 454KB 降至 36KB * chore: upgrade wxt to v0.20.26 and @wxt-dev/module-react to v1.2.2 * chore: upgrade low-risk dependencies - react: 19.2.3 → 19.2.6 - react-dom: 19.2.3 → 19.2.6 - dayjs: 1.11.19 → 1.11.20 - marked: 18.0.3 → 18.0.4 - prettier: 3.8.1 → 3.8.3 - terser: 5.46.0 → 5.47.1 - i18next: 26.0.8 → 26.2.0 - react-i18next: 17.0.6 → 17.0.8 - globals: 17.2.0 → 17.6.0 - eslint-plugin-react-hooks: 7.0.1 → 7.1.1 - @typescript-eslint/*: 8.54.0 → 8.59.4 - typescript-eslint: 8.54.0 → 8.59.4 - @testing-library/jest-dom: 6.6.0 → 6.9.1 - @testing-library/react: 16.0.0 → 16.3.2 - @testing-library/user-event: 14.5.2 → 14.6.1 - @testing-library/dom: added as peer dependency - @types/react: 19.2.7 → 19.2.15 - @types/chrome: 0.1.36 → 0.1.42 - @types/webextension-polyfill: 0.12.4 → 0.12.5 * chore: upgrade medium-risk dependencies - lint-staged: 16.2.7 → 17.0.5 - jsdom: 25.0.0 → 29.1.1 - @vitejs/plugin-react: 4.3.4 → 6.0.2 - vitest: 2.0.0 → 4.1.7 - @vitest/coverage-v8: upgraded to match vitest - @webext-core/messaging: 2.3.0 → 3.0.1 - eslint: 9.39.2 → 10.4.0 - @eslint/js: added as new dependency - @types/marked: removed (marked now provides its own types) Fixes: - Fix ref update during render in useQrCode.ts - Fix ref update during render in useStorageCleaner.ts - Add error cause in jwt.ts decode function - Add type assertion for mock functions in htmlToMarkdown.test.ts * chore(deps): 降级 eslint 版本并移除 @eslint/js * docs: 精简 AGENTS.md，聚焦高信号信息 * test: 修复测试中的 act() 警告和 clipboard mock 问题 - TextInputArea: 使用 userEvent 替代 fireEvent，用 vi.spyOn 替代 Object.assign mock clipboard - ImageMode/FileMode: 添加 waitForStorageReady() 等待 useStorageState 异步初始化 * perf: 优化首屏加载，快照有效时跳过骨架屏 - isLoaded 初始值根据 localStorage 快照是否存在决定 - 后续访问直接渲染真实 DOM，无需等待 chrome.storage 异步加载 - loadInitialData 仍在后台静默执行确保数据同步 * 引入 Tailwind CSS 和 shadcn/ui * 替换 Timestamp 页面图标为 lucide-react 的 Clock 图标 * 用 Tailwind CSS 重写 Timestamp 页面的 MUI 基础排版组件 * 用 Tailwind CSS 重构 ResultView 和 LiveClock 组件 * 用 Tailwind CSS 重写 Dashboard/index.tsx 和 ToolCard.tsx * 用 Tailwind CSS 重写 TextStatistics 页面 * 用 Tailwind CSS 重写 Base64Converter 页面 * 用 Tailwind CSS 重写 QrCode 页面及相关组件 * 用 Tailwind CSS 重写 Jwt 页面 * 用 Tailwind CSS 重写 StorageCleaner 页面，创建 shadcn/ui Dialog 组件 * 用 Tailwind CSS 重写 JsonTools 页面 * 用 Tailwind CSS 重构所有共享组件 * 修复 TypeScript 类型错误：将 MUI sx 语法改成标准 CSS 属性 * 重写基础骨架组件：用纯 Tailwind CSS 替换 MUI Box 组件 * 重写所有页面和组件：用纯 Tailwind CSS 替换 MUI 组件和图标 * 移除 MUI 依赖，简化配置文件，重写 ThemeModeProvider * 移除 wxt.config.ts 中残留的 MUI chunk 配置 * 为 Dialog 组件添加暗黑模式背景色支持 * fix: 修复暗黑模式样式兼容性 - 在 tailwind.config.js 中启用 darkMode: 'class' 并扩展语义化颜色变量 - 将全项目硬编码颜色（bg-white、text-gray-*、border-gray-* 等）替换为语义化类名 - 修复 popup/index.html 硬编码浅色背景色 - 同步更新相关单元测试中的类名断言 * fix: 修复输入框和按钮在暗色模式下的样式问题 - 为 :root 和 .dark 添加 color-scheme，使浏览器表单控件默认样式适配暗色模式 - 将 bg-primary 搭配 text-white 的按钮改为 text-primary-foreground - 替换残留的 hover:bg-blue-700、text-blue-500、bg-gray-200 等硬编码颜色 - 同步更新 TextInputArea 单元测试 * fix: 增强 SwitchButtonGroup 和立即转换按钮的视觉层级 - SwitchButtonGroup 选中按钮阴影从 shadow-sm 升级到 shadow-md - 同步更新单元测试中断言 - Timestamp 立即转换按钮添加 shadow-md 增强边界感 * style: 隐藏所有窗口的滚动条 - 在全局 CSS 中为 html 添加 scrollbar-width: none（Firefox） - 添加 ::-webkit-scrollbar { display: none }（Chrome/Safari/Opera） * feat: add sonner dependency for toast notifications * refactor: remove DomainHeader component and its usage * refactor: 使用 className 替换 sx/buttonSx 并优化 SwitchButtonGroup 选中动画 * refactor: 简化 TextInputArea，移除 showMessage 和 MUI 样式，改用 shadcn 样式和 sonner toast * refactor: 简化 TextInputArea，移除 showMessage 和 MUI 样式，改用 shadcn 样式和 sonner toast * refactor: 重构 QrCodePreview 组件，继承 HTMLDiv 属性并统一 shadcn 样式 - 组件改为继承 `React.HTMLAttributes<HTMLDivElement>`，支持外部传入 className 和事件 - 使用 `cn()` 函数合并外部类名 - 空白状态改用 `border border-dashed` 和更浅的 `bg-muted/40` 背景 - 正常状态改为纯白背景柔边圆角容器包裹二维码，确保暗黑模式下黑白对比度 - 下载/复制按钮完全对齐 shadcn 的 Outline 与 Default 样式规范 - 更新测试用例中的 alt 文本为 "QR Code Preview" * refactor: 将 PageHeader 组件样式从 MUI sx 迁移至 Tailwind 类名，并更新测试 * refactor: 更新PageErrorBoundary的文案和样式以对齐shadcn主题 - 错误提示从“该页面加载失败”改为“该功能运行异常” - 重试按钮文字从“重试”改为“重新尝试” - 使用border-destructive, bg-destructive等语义化类名替换硬编码颜色 - 更新对应测试断言 * refactor: 重构 CopyButton 与 RouterContainer 组件，移除 GlobalSnackbar 并统一使用 sonner toast 和 cn 工具函数 * refactor: 移除 MUI sx 样式和未使用的 GlobalSnackbar 引用 * feat: add @radix-ui/react-select dependency * feat: add Input and Select shadcn UI components * refactor: 重构 Timestamp 页面使用响应式 Hook 统一状态并全面迁移至 shadcn 样式 * refactor: 将 TextStatistics 页面和 TextInputArea 组件全面迁移至 shadcn 样式并优化布局 * feat: add Badge, Checkbox, Label, and Switch shadcn UI components * refactor: 全面迁移 StorageCleaner 页面至 shadcn 样式并移除 GlobalSnackbar 依赖 * refactor: 全面重构 JsonTools 页面，采用声明式响应架构并统一 shadcn 样式 * refactor: 全面重构 Jwt 页面，采用防抖输入并统一 shadcn 样式 * refactor: 重构 Dashboard 页面和 ToolCard 组件，全面迁移至 shadcn 样式并优化布局 * refactor: 重构 HtmlToMarkdown 和 MarkdownToHtml 页面，统一 shadcn 样式并优化打印与暗色模式 * refactor: 抽离 useBase64Converter hook 并新增 Base64ConverterSection 组件，统一 Base64 转换页面的 shadcn 样式 * refactor: 重构 QrCode 页面为声明式响应架构并统一 shadcn 样式 * refactor: 优化 Dashboard 布局及 ToolCard 描述文本截断处理 * refactor: 优化 MarkdownToHtml 预览样式，剥离 CSS 变量回退值并增强 iframe 暗色模式自适应 * refactor: 优化 Popover 安全性和交互体验，修复 Context Menu 数据持久化问题并添加 i18n 支持 * refactor: strengthen i18n type safety and fix async Promise handling in language detection * refactor: extend vitest setup with full chrome/browser mocks and i18n utility mock * refactor: migrate storage listeners to wxt/browser and refactor provider state management * refactor: restructure CI/CD pipelines with cached dependencies, separate setup job, and multi-browser builds * refactor: remove tsc check from lint-staged and reorder lint commands * refactor: migrate eslint config to tseslint.config with projectService and upgrade React rules * refactor: use __MSG_ placeholders for i18n and remove postcss config * refactor: replace __MSG_ placeholders with static strings for extension name and description * refactor: add React version detection and disable prop-types in eslint; refactor lazy translation tests with proper mock isolation and Chrome/browser stubs * refactor: use regex matchers in StorageCleanerConfirm tests and add chrome/browser mocks * refactor: use regex matchers for i18n text and add uniform mocks in test files * ci: add wxt prepare step to generate .wxt types for typecheck and tests --------- Co-authored-by: Ubuntu <ubuntu@localhost.localdomain>
2026-05-23 00:02:43 +08:00
parent 689c3faf16
commit efbed7cf53
114 changed files with 7621 additions and 7262 deletions
@@ -1,114 +1,96 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Box,
-  IconButton,
-  Stack,
-  Tooltip,
-  Typography,
-  InputBase,
-  Paper,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  ClickAwayListener,
-} from '@mui/material';
-import SettingsIcon from '@mui/icons-material/Settings';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import SearchIcon from '@mui/icons-material/Search';
-import HistoryIcon from '@mui/icons-material/History';
-import CloseIcon from '@mui/icons-material/Close';
-import LanguageIcon from '@mui/icons-material/Language';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
+  ArrowLeft,
+  ExternalLink,
+  Globe,
+  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 { alpha } from '@mui/material/styles';
-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(
-        0,
-        topBarStyles.SEARCH_HISTORY_LIMIT,
-      );
-      return newHistory;
-    });
+    const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
+      0,
+      SEARCH_HISTORY_LIMIT,
+    );
+    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));
@@ -119,20 +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' ? LightModeIcon : mode === 'dark' ? DarkModeIcon : SettingsBrightnessIcon;
+  const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;

+  // 4. 健壮的键盘导航交互
  const handleKeyDown = (e: React.KeyboardEvent) => {
    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;

@@ -143,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]);
@@ -150,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]);
@@ -170,224 +149,162 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
  const isDashboard = currentPage === 'dashboard';

  return (
-    <Stack
-      direction="row"
-      justifyContent="space-between"
-      alignItems="center"
-      sx={{
-        px: { xs: 1, sm: 2 },
-        py: 1.5,
-        borderBottom: '1px solid',
-        borderColor: 'divider',
-        bgcolor: 'background.paper',
-        zIndex: topBarStyles.Z_INDEX,
-        position: 'relative',
-      }}
-    >
-      <Box sx={{ width: { xs: 32, sm: 40 } }}>
+    <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 && (
-          <IconButton
-            size="small"
+          <button
+            type="button"
            onClick={goBack}
            aria-label={t('common:buttons.back')}
-            sx={{
-              bgcolor: (theme) =>
-                theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'grey.50',
-              '&:hover': {
-                bgcolor: (theme) =>
-                  theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'grey.200',
-              },
-            }}
+            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"
          >
-            <ArrowBackIosNewIcon sx={{ fontSize: 14 }} />
-          </IconButton>
+            <ArrowLeft className="h-4 w-4" />
+          </button>
        )}
-      </Box>
+      </div>

-      <Typography
-        variant="subtitle2"
-        sx={{
-          fontWeight: 800,
-          letterSpacing: '0.5px',
-          textTransform: 'uppercase',
-          fontSize: '0.75rem',
-          color: 'text.secondary',
-          ml: 1,
-          display: { xs: 'none', md: 'block' },
-        }}
-      >
-        {t('common:appName')}
-      </Typography>
-
-      <Box sx={{ flex: 1, mx: { xs: 1, sm: 2 }, position: 'relative', maxWidth: 400 }}>
-        <ClickAwayListener onClickAway={() => setShowResults(false)}>
-          <Box>
-            <InputBase
-              ref={inputRef}
-              placeholder={t('common:buttons.search')}
-              value={searchQuery}
-              onChange={handleSearchChange}
-              onFocus={() => setShowResults(true)}
-              onKeyDown={handleKeyDown}
-              inputProps={{ 'aria-label': t('common:buttons.search') }}
-              startAdornment={<SearchIcon sx={{ color: 'text.disabled', mr: 1, fontSize: 20 }} />}
-              endAdornment={
-                searchQuery && (
-                  <IconButton
-                    size="small"
-                    onClick={() => {
-                      setSearchQuery('');
-                      setSelectedIndex(-1);
-                    }}
-                    aria-label={t('common:buttons.clearSearch')}
-                  >
-                    <CloseIcon sx={{ fontSize: 16 }} />
-                  </IconButton>
-                )
-              }
-              sx={{
-                width: '100%',
-                bgcolor: (theme) =>
-                  theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'grey.50',
-                px: 1.5,
-                py: 0.5,
-                borderRadius: 2,
-                fontSize: '0.875rem',
-                border: '1px solid',
-                borderColor: (theme) =>
-                  theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'transparent',
-                transition: 'all 0.2s',
-                '&:hover': {
-                  bgcolor: (theme) =>
-                    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'grey.100',
-                },
-                '&.Mui-focused': {
-                  bgcolor: 'background.paper',
-                  borderColor: 'primary.main',
-                  boxShadow: (theme) => `0 0 0 2px ${alpha(theme.palette.primary.main, 0.15)}`,
-                },
+      {/* 中间：搜索容器 */}
+      <div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
+        <div className="relative">
+          <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={(e) => {
+              setSearchQuery(e.target.value);
+              setShowResults(true);
+              setSelectedIndex(-1);
+            }}
+            onFocus={() => setShowResults(true)}
+            onKeyDown={handleKeyDown}
+            aria-label={t('common:buttons.search')}
+            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
+              type="button"
+              onClick={() => {
+                setSearchQuery('');
+                setSelectedIndex(-1);
              }}
-            />
+              aria-label={t('common:buttons.clearSearch')}
+              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 w-3" />
+            </button>
+          )}
+        </div>

-            {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
-              <Paper
-                elevation={8}
-                sx={{
-                  position: 'absolute',
-                  top: '100%',
-                  left: 0,
-                  right: 0,
-                  mt: 1,
-                  maxHeight: topBarStyles.DROPDOWN_MAX_HEIGHT,
-                  overflow: 'auto',
-                  borderRadius: 2,
-                  zIndex: topBarStyles.DROPDOWN_Z_INDEX,
-                }}
-              >
-                <List disablePadding role="listbox">
-                  {searchQuery.trim() ? (
-                    searchResults.length > 0 ? (
-                      searchResults.map((feature, index) => (
-                        <ListItemButton
-                          key={feature.key}
-                          selected={selectedIndex === index}
-                          onClick={() => handleSelectFeature(feature)}
-                          role="option"
-                          aria-selected={selectedIndex === index}
-                          sx={{ py: 1 }}
-                        >
-                          <ListItemIcon sx={{ minWidth: 40 }}>
-                            {feature.icon && <feature.icon sx={{ fontSize: 20 }} />}
-                          </ListItemIcon>
-                          <ListItemText
-                            primary={t(feature.labelKey)}
-                            secondary={t(feature.descriptionKey)}
-                            primaryTypographyProps={{ variant: 'body2', fontWeight: 600 }}
-                            secondaryTypographyProps={{ variant: 'caption', noWrap: true }}
-                          />
-                        </ListItemButton>
-                      ))
-                    ) : (
-                      <Box sx={{ py: 3, textAlign: 'center' }}>
-                        <Typography variant="body2" color="text.secondary">
-                          {t('common:buttons.noResults')}
-                        </Typography>
-                      </Box>
-                    )
-                  ) : (
-                    <>
-                      <Box sx={{ px: 2, py: 1 }}>
-                        <Typography variant="caption" fontWeight={700} color="text.disabled">
-                          {t('common:buttons.recentSearch')}
-                        </Typography>
-                      </Box>
-                      {displayedHistory.map((item, index) => (
-                        <ListItemButton
-                          key={item}
-                          selected={selectedIndex === index}
-                          onClick={() => {
-                            setSearchQuery(item);
-                            setSelectedIndex(-1);
-                          }}
-                          role="option"
-                          aria-selected={selectedIndex === index}
-                        >
-                          <ListItemIcon sx={{ minWidth: 40 }}>
-                            <HistoryIcon sx={{ fontSize: 18, color: 'text.disabled' }} />
-                          </ListItemIcon>
-                          <ListItemText
-                            primary={item}
-                            primaryTypographyProps={{ variant: 'body2' }}
-                          />
-                        </ListItemButton>
-                      ))}
-                    </>
-                  )}
-                </List>
-              </Paper>
-            )}
-          </Box>
-        </ClickAwayListener>
-      </Box>
+        {/* 动态联想结果卡片 */}
+        {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
+          <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) => (
+                    <li
+                      key={feature.key}
+                      role="option"
+                      aria-selected={selectedIndex === index}
+                      onClick={() => handleSelectFeature(feature)}
+                      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="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="font-medium text-foreground truncate">
+                          {t(feature.labelKey)}
+                        </p>
+                        <p className="text-xs text-muted-foreground truncate">
+                          {t(feature.descriptionKey)}
+                        </p>
+                      </div>
+                    </li>
+                  ))
+                ) : (
+                  <li className="px-4 py-6 text-center text-sm text-muted-foreground">
+                    {t('common:buttons.noResults')}
+                  </li>
+                )
+              ) : (
+                <>
+                  <div className="px-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
+                    {t('common:buttons.recentSearch')}
+                  </div>
+                  {displayedHistory.map((item, index) => (
+                    <li
+                      key={item}
+                      role="option"
+                      aria-selected={selectedIndex === index}
+                      onClick={() => {
+                        setSearchQuery(item);
+                        setSelectedIndex(-1);
+                      }}
+                      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',
+                      )}
+                    >
+                      <History className="h-4 w-4 text-muted-foreground shrink-0" />
+                      <span className="truncate">{item}</span>
+                    </li>
+                  ))}
+                </>
+              )}
+            </ul>
+          </div>
+        )}
+      </div>

-      <Stack direction="row" spacing={0.5} sx={{ justifyContent: 'flex-end', flexShrink: 0 }}>
-        <Tooltip title={t('common:buttons.toggleLanguage')}>
-          <IconButton
-            size="small"
-            onClick={toggleLanguage}
-            aria-label={t('common:buttons.toggleLanguage')}
-          >
-            <LanguageIcon sx={{ fontSize: 18 }} />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title={t(`common:buttons.themeMode.${mode}`)}>
-          <IconButton
-            size="small"
-            onClick={cycleThemeMode}
-            aria-label={t('common:buttons.toggleTheme')}
-          >
-            <ThemeIcon sx={{ fontSize: 18 }} />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title={t('common:buttons.openInTab')}>
-          <IconButton
-            size="small"
-            onClick={handleOpenInTab}
-            aria-label={t('common:buttons.openInTab')}
-          >
-            <OpenInNewIcon sx={{ fontSize: 18 }} />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title={t('common:buttons.settings')}>
-          <IconButton
-            size="small"
-            onClick={onOpenOptions}
-            aria-label={t('common:buttons.settings')}
-          >
-            <SettingsIcon sx={{ fontSize: 18 }} />
-          </IconButton>
-        </Tooltip>
-      </Stack>
-    </Stack>
+      {/* 右侧：操作区 */}
+      <div className="flex items-center gap-1 shrink-0">
+        <IconButton onClick={toggleLanguage} title={t('common:buttons.toggleLanguage')}>
+          <Globe className="h-4 w-4" />
+        </IconButton>
+        <IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
+          <ThemeIcon className="h-4 w-4" />
+        </IconButton>
+        <IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
+          <ExternalLink className="h-4 w-4" />
+        </IconButton>
+        <IconButton onClick={onOpenOptions} title={t('common:buttons.settings')}>
+          <Settings className="h-4 w-4" />
+        </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>
  );
 }