Develop (#20)

* docs: 添加组件文档注释和类型导入

refactor: 统一使用 SnackbarOptions 类型
style: 优化导入语句顺序和格式

* refactor: 简化假数据生成器中的faker导入和使用

Co-authored-by: Copilot <copilot@github.com>

* feat(form-recognizer): 增强表单识别功能并优化UI交互

- 新增字段类型偏好设置功能，支持按域名保存字段类型
- 重构FieldList组件，改进字段选择和类型修改体验
- 添加字段定位闪烁功能，便于在页面上快速找到对应字段
- 优化表单填充逻辑，支持单个字段覆盖默认填充模式
- 移除独立的侧边栏页面，统一使用主页面组件
- 改进useStorageState钩子，增加加载状态管理和防抖处理

* refactor: 移除未使用的组件文件

* refactor(页面头部): 提取通用 PageHeader 组件并替换各页面头部实现

重构各页面头部为统一的 PageHeader 组件，提高代码复用性和维护性

* style(组件): 调整自动刷新开关和存储选项网格的样式

优化自动刷新开关的文本内边距，重构存储选项网格的布局结构，调整间距和边框样式

* style(ui): 调整时间戳页面和结果视图的样式

- 为时区选择器添加圆角
- 优化结果视图的布局和对齐方式
- 调整结果项的内边距和文本样式

* ci(workflow): 移除Firefox测试以简化CI流程

仅保留Chrome浏览器的构建步骤，减少CI运行时间和资源消耗

* refactor(qrcode): 重构二维码解析功能并提取为独立模块

* style(页面样式): 统一页面头部图标颜色并优化表单样式

更新各页面头部组件的图标颜色配置，移除冗余的表单标签属性，优化输入框样式和按钮悬停效果

* feat(formMapping): 添加表单映射功能

- 创建 FormMappingPage 页面组件
- 实现表单扫描器 scanner.ts
- 实现高亮器 highlighter.ts
- 更新路由配置 routes.ts
- 更新内容脚本 content.ts
- 更新类型定义 storage.d.ts
- 添加 formMappingPageStyles 样式配置

* feat(表单映射): 添加配置导出功能及状态提示

添加配置导出为JSON文件的功能，包含导出按钮和错误处理。新增Snackbar组件用于显示导出成功和错误状态。优化页面布局结构，将状态提示移至全局容器外。

* feat(表单填充): 新增智能表单填充功能

添加智能表单填充功能，包括：
1. 新增表单填充页面和路由配置
2. 实现模糊匹配引擎和智能注入引擎
3. 添加Mock数据生成器和视觉反馈渲染器
4. 扩展消息接口支持填充操作

* ci: 精简触发CI的工作流分支

移除对develop分支及其变体的触发，仅保留main分支的触发

* test: 更新路由测试以匹配新增的路由数量

* test: 将测试文件中的描述和断言翻译为中文

* test(PageHeader): 添加组件测试用例验证渲染逻辑和样式

* refactor(theme): 重构主题样式并优化仪表盘卡片组件

将页面样式配置集中管理，移除各页面中硬编码的背景色
新增 DashboardCard 组件封装通用卡片逻辑
添加 dashboardCards 配置文件统一管理卡片数据

* refactor(Button): 统一按钮样式并移除重复样式定义

将按钮样式统一封装到 Button 组件中，移除各页面重复的样式定义
更新组件文档说明，提供更清晰的用法示例

* docs: 更新 README 文件中的目录结构说明

添加新组件和配置文件的说明，保持文档与代码同步

* refactor: 优化代码类型声明和UI布局

修复类型声明从any改为never以提高类型安全性
调整TimestampPage页面布局间距
移除DashboardPage中不必要的实时时钟状态
更新ESLint配置以使用推荐配置
添加选项页面打开的错误处理

* refactor(消息通信): 使用 @webext-core/messaging 重构消息处理逻辑

将原有的 chrome.runtime.onMessage 和 chrome.tabs.sendMessage 替换为类型安全的 @webext-core/messaging 实现
添加 ProtocolMap 类型定义确保消息类型安全
更新相关页面和后台脚本使用新的消息通信方式

* fix: 修复依赖项缺失导致的潜在问题

修复 useStorageState 中缺少 defaultValue 依赖的问题
重构 RouterProvider 的初始化逻辑，使用 useCallback 优化性能

* refactor: 重构表单识别和消息处理逻辑

将表单映射UI逻辑提取到独立文件
将消息处理器提取到独立文件
将表单识别页面逻辑提取到自定义hook
优化代码结构和可维护性

* feat(侧边栏): 添加侧边栏状态变化通知功能

- 在消息类型中新增侧边栏状态变化枚举和字段
- 侧边栏打开和关闭时发送状态通知
- 替换轮询检查方式为消息监听机制

* refactor: 优化高亮组件渲染逻辑并添加防抖处理

重构高亮组件渲染逻辑，使用 requestAnimationFrame 进行节流优化
在 useStorageCleaner 中添加防抖处理以避免频繁加载

* refactor: 统一组件导出方式为默认导出

* refactor: 重构样式系统并迁移至 MUI 主题

删除冗余的 CSS 文件，统一使用 MUI 主题管理样式
新增 useActiveTabDomain 和 useSidePanelState 自定义 Hook
优化各入口点的主题集成和布局处理

* docs: 更新项目文档以反映新增功能和技术栈细节

更新 AGENTS.md 文档，详细描述新增的功能模块（存储管理、URL 管理、二维码生成、表单工具套件等）和更新的技术栈信息

* feat: 添加错误边界组件以捕获子组件错误

在 popup、sidepanel 和 options 入口点添加 ErrorBoundary 组件，用于捕获并处理子组件中的 JavaScript 错误。当错误发生时，显示友好的错误界面并提供刷新功能。

* refactor(ui): 使用全局 snackbar 替换本地通知组件

重构表单页面中的通知系统，移除本地 Snackbar 和 Alert 组件，改用全局 GlobalSnackbar 组件统一管理通知
标准化主题配置中的 CSS 属性命名，移除带前缀的样式属性

* refactor(snackbar): 重构全局消息提示为 SnackbarProvider 组件

将原本分散在各页面的 GlobalSnackbar 组件重构为集中管理的 SnackbarProvider，通过 Context 提供统一的消息提示功能。主要变更包括：

1. 创建新的 SnackbarProvider 组件作为全局消息提示容器
2. 提供 useSnackbar hook 供子组件调用
3. 移除各页面中独立的 GlobalSnackbar 实例
4. 在 App 根组件中统一集成 SnackbarProvider
5. 优化消息提示样式和交互行为

* refactor(Snackbar): 重构消息提示组件并优化样式

重构 Snackbar 组件，将状态管理逻辑提取到 GlobalSnackbar 中复用
优化消息提示样式，调整阴影效果和最小尺寸
统一各页面使用 Snackbar 的方式，移除冗余配置

* refactor: 重构路由和功能配置系统

- 将路由配置和仪表盘卡片配置合并为统一的 features 配置
- 重构 RouterProvider 增加数据校验和本地快照功能
- 优化表单字段识别和填充逻辑，提取公共方法
- 更新相关组件和文档以适配新的配置系统
- 删除废弃的 dashboardCards 和 routes 配置文件

* refactor(GlobalSnackbar): 合并SnackbarProvider到GlobalSnackbar组件

重构Snackbar相关代码，将SnackbarProvider合并到GlobalSnackbar组件中，简化代码结构
更新相关组件引用路径，从SnackbarProvider改为GlobalSnackbar
修复StorageCleanerPage禁用状态逻辑问题

* feat(表单映射): 增强高亮器功能并优化元素定位

- 新增高亮器闪烁功能，支持自定义持续时间
- 改进元素定位算法，支持 Shadow DOM 穿透
- 优化拾取模式，支持连续拾取和悬停预览
- 增强错误处理和信息反馈
- 添加测试用例确保核心功能稳定性

* refactor: 移除表单映射相关功能

删除表单映射相关的UI、逻辑和测试代码，包括表单识别、智能填充和高亮功能
简化消息处理逻辑和配置文件，保留核心功能

* feat: 实现页面组件懒加载并优化加载状态显示

refactor: 移除未使用的数据生成和验证工具类

chore: 更新应用图标文件

* refactor(qrcode): 替换二维码生成和解析库以减小体积

使用 qr-scanner 替代 jsqr 进行二维码解析，使用 qrious 替代 qrcode 进行二维码生成
新的库体积更小且性能更好，同时移除了不再使用的 @faker-js/faker 依赖

* feat: 添加在标签页打开功能并优化错误处理

修复测试中的加载状态检查
将控制台日志改为错误捕获
添加全局消息提示组件

* feat: 支持独立标签页模式并重构路由配置

重构路由系统以支持独立标签页模式，替换原有的独立窗口模式
- 新增标签页路由、可见页面列表和页面顺序的存储键
- 修改 RouterProvider 以支持不同窗口类型的独立配置
- 更新选项页面以支持为不同窗口类型单独配置
- 添加相关单元测试

* feat(ui): 优化响应式布局和样式设计

重构选项页面布局，增强移动端适配性
更新主题配置和组件样式，提升用户体验

* refactor: 移除URL工具相关代码

移除不再需要的URL工具功能，包括组件、页面、样式和类型定义

* refactor: 简化页面标题和存储选项网格的响应式布局

* refactor: 优化样式和错误处理

- 简化 chrome.runtime.openOptionsPage 的错误处理
- 拆分 html, body, #root 的样式定义，使用 minHeight 替代 height

* refactor: 重构页面组件结构
- 将页面组件从 entrypoints/popup/pages 移动到 pages 目录
- 更新文档中的路径引用

* style(DashboardPage): 优化仪表盘布局为响应式网格

refactor(ToolCard): 重构工具卡片组件并添加详细注释

* feat: 新增文本统计功能

添加文本统计工具页面及相关功能，包括：
- 文本统计工具页面组件
- 文本统计计算工具函数
- 相关类型定义和样式配置
- 单元测试覆盖核心功能

* feat(jwt): 添加 JWT 解析工具功能

新增 JWT 解析工具页面，包含以下内容：
- 添加 JWT 类型定义和页面样式配置
- 实现 JWT 解析核心功能及测试用例
- 创建 JWT 解析页面组件
- 在功能配置中注册 JWT 工具

* docs: 更新 README 以更清晰地描述项目功能和结构

- 重构功能描述部分，使用更简洁的列表形式展示
- 更新技术栈和项目结构说明
- 优化开发流程部分的描述
- 移除冗余的权限和依赖说明

* docs: 更新AGENTS.md文档以反映项目最新状态

- 重写项目概述和核心命令部分，使其更简洁准确
- 重构目录结构描述，采用更清晰的树状格式
- 移除过时的功能模块描述，聚焦当前核心功能
- 更新AI代理开发准则和权限管理说明
- 优化文档整体结构和可读性

* test: 更新特征计数测试以匹配新增 textStatistics 和 jwt 工具

* style: 统一导入语句顺序

* refactor(pages): 重构工具页面组件结构并优化功能实现

- 将各工具页面组件迁移至独立目录并重构为模块化结构
- 新增存储清理工具相关组件及状态管理逻辑
- 实现时间戳转换工具的自定义hook和UI组件
- 优化JWT解析工具的代码结构和样式
- 更新文本统计工具的性能计算逻辑
- 调整配置文件中的页面引用路径
- 删除无用文件和过时文档

* feat(顶部栏): 添加搜索功能和历史记录

实现顶部栏搜索框功能，支持模糊搜索工具并显示搜索结果列表
添加搜索历史记录功能，自动保存最近搜索并显示
支持键盘导航和选择搜索结果

* feat: 添加多语言支持(i18n)

实现应用的多语言功能，支持中英文切换
添加i18next和相关依赖
创建语言资源文件
更新组件以使用翻译功能
重构文本统计工具页面
完善测试和构建配置

* feat(顶部栏): 添加语言切换功能并优化国际化支持
feat(i18n): 增加语言归一化和同步功能
fix(剪贴板): 使用国际化文本替换剪贴板消息
test(顶部栏): 更新测试以匹配国际化标题

* refactor: 重构组件目录结构，将组件移动到对应功能页面目录

将多个组件从通用组件目录移动到各自功能页面目录下，包括 ToolCard、StorageCleanerConfirm、UrlToQrCodeSection 和 QrCodeToUrlSection。同时新增 Dashboard 页面相关组件 DashboardCard 和 ToolCard，并优化了组件导入路径。

重构旨在提高代码组织性，使组件与其所属功能页面更紧密关联，便于维护和理解代码结构。所有组件功能保持不变，仅调整文件位置和导入路径。

* refactor(Dashboard): 优化卡片组件结构并移除无用属性

重构 DashboardCard 组件接口，直接传递属性而非配置对象
移除 ToolCard 中无用的 hasAI 属性
使用 useMemo 优化可见性判断性能
统一使用 alpha 函数处理颜色透明度

* refactor(timestamp): 合并输入处理函数并优化样式结构

重构时间戳转换器的输入处理逻辑，将 setTsInput 和 setDtInput 合并为统一的 setInput 函数
将组件样式提取到 pageTheme 配置中统一管理
使用 ToggleButtonGroup 替换自定义模式切换器实现
移除不必要的 showMessage 属性传递，改用 useSnackbar 钩子

* refactor(dashboard): 重构仪表盘卡片组件并优化布局

- 删除冗余的 DashboardCard 组件，直接使用 ToolCard
- 将网格布局样式移至主题配置
- 使用 CardActionArea 增强可访问性
- 简化点击事件处理逻辑
- 更新相关测试用例

* refactor(storageCleaner): 重构样式代码并优化国际化处理

将分散的样式代码集中到pageTheme.ts中统一管理
优化组件中的国际化文本引用
修复useStorageCleaner中的状态同步问题
更新测试用例以匹配国际化文本

* refactor(StorageCleaner): 优化条件判断和清理未使用的代码

简化禁用按钮的条件判断逻辑
移除未使用的 resultTimeoutRef 及相关清理代码

* refactor(QrCode): 重构二维码页面样式和组件结构

将内联样式提取到主题配置文件中
移除未使用的全局消息提示依赖
优化组件结构和代码复用
删除未使用的QrCodeUploader组件

* refactor(ErrorBoundary): 移除冗余状态更新并调整错误背景色

移除 componentDidCatch 中的冗余 setState 调用
将错误背景色从 'error.shortest' 改为 rgba 格式

* feat(TopBar): 优化顶部导航栏功能并添加样式配置

- 新增 openExtensionPage 工具函数用于打开扩展页面
- 将顶部导航栏样式配置提取到 pageTheme 中统一管理
- 改进搜索历史功能，增加错误处理和配置化限制
- 优化键盘导航和搜索结果的交互逻辑

---------

Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: yll <mtmtchb@outlook.com>

components/TopBar.tsx

@@ -1,18 +1,146 @@
-import { Box, IconButton, Typography, Stack, Tooltip } from '@mui/material';
+import { useState, useEffect, useRef, useMemo } 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 { useRouter } from '@/providers/RouterProvider';
+import { FEATURES, FeatureConfig } 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 { topBarStyles } from '@/config/pageTheme';
 
 export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
-  const { currentPage, goBack } = useRouter();
+  const { currentPage, goBack, navigateTo } = useRouter();
+  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 inputRef = useRef<HTMLInputElement>(null);
 
-  const handleOpenInTab = () => {
-    // 在新标签页中打开扩展页面
-    chrome.tabs.create({ url: chrome.runtime.getURL('popup.html?mode=tab') }).catch(console.error);
+  // 加载搜索历史
+  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);
+  };
+
+  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,
+      );
+      storageUtil.set('app/searchHistory', newHistory).catch((error) => {
+        console.error('保存搜索历史失败:', error);
+      });
+      return newHistory;
+    });
+  };
+
+  const handleSelectFeature = (feature: FeatureConfig) => {
+    navigateTo(feature.key);
+    saveToHistory(t(feature.labelKey));
+    setSearchQuery('');
+    setShowResults(false);
+  };
+
+  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 handleKeyDown = (e: React.KeyboardEvent) => {
+    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+    } else if (e.key === 'Enter') {
+      if (selectedIndex >= 0) {
+        if (searchQuery.trim()) {
+          handleSelectFeature(searchResults[selectedIndex]);
+        } else {
+          const selectedQuery = displayedHistory[selectedIndex];
+          setSearchQuery(selectedQuery);
+          setSelectedIndex(-1);
+          // 触发搜索：如果匹配到功能则跳转，否则保持搜索词展示结果
+          const matchedFeature = FEATURES.find(
+            (f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
+          );
+          if (matchedFeature) {
+            handleSelectFeature(matchedFeature);
+          }
+        }
+      } else if (searchQuery.trim() && searchResults.length > 0) {
+        handleSelectFeature(searchResults[0]);
+      }
+    } else if (e.key === 'Escape') {
+      setShowResults(false);
+      inputRef.current?.blur();
+    }
+  };
+
   const isDashboard = currentPage === 'dashboard';
 
   return (
@@ -21,12 +149,13 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
       justifyContent="space-between"
       alignItems="center"
       sx={{
-        px: { xs: 1.5, sm: 2 },
+        px: { xs: 1, sm: 2 },
         py: 1.5,
         borderBottom: '1px solid',
         borderColor: 'grey.100',
         bgcolor: 'background.paper',
-        zIndex: 1100,
+        zIndex: topBarStyles.Z_INDEX,
+        position: 'relative',
       }}
     >
       <Box sx={{ width: { xs: 32, sm: 40 } }}>
@@ -34,6 +163,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           <IconButton
             size="small"
             onClick={goBack}
+            aria-label={t('common:buttons.back')}
             sx={{
               bgcolor: 'grey.50',
               '&:hover': { bgcolor: 'grey.200' },
@@ -52,23 +182,165 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           textTransform: 'uppercase',
           fontSize: '0.75rem',
           color: 'text.secondary',
+          ml: 1,
+          display: { xs: 'none', md: 'block' },
         }}
       >
-        Testing Tools
+        {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: 'grey.50',
+                px: 1.5,
+                py: 0.5,
+                borderRadius: 2,
+                fontSize: '0.875rem',
+                border: '1px solid transparent',
+                transition: 'all 0.2s',
+                '&:hover': { bgcolor: 'grey.100' },
+                '&.Mui-focused': {
+                  bgcolor: 'background.paper',
+                  borderColor: 'primary.main',
+                  boxShadow: '0 0 0 2px rgba(25, 118, 210, 0.1)',
+                },
+              }}
+            />
+
+            {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}</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>
+
       <Stack
         direction="row"
         spacing={0.5}
-        sx={{ width: { xs: 80, sm: 120 }, justifyContent: 'flex-end' }}
+        sx={{ width: { xs: 100, sm: 150 }, justifyContent: 'flex-end' }}
       >
-        <Tooltip title="在标签页打开">
-          <IconButton size="small" onClick={handleOpenInTab}>
+        <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.openInTab')}>
+          <IconButton
+            size="small"
+            onClick={handleOpenInTab}
+            aria-label={t('common:buttons.openInTab')}
+          >
             <OpenInNewIcon sx={{ fontSize: 18 }} />
           </IconButton>
         </Tooltip>
-        <Tooltip title="设置">
-          <IconButton size="small" onClick={onOpenOptions}>
+        <Tooltip title={t('common:buttons.settings')}>
+          <IconButton
+            size="small"
+            onClick={onOpenOptions}
+            aria-label={t('common:buttons.settings')}
+          >
             <SettingsIcon sx={{ fontSize: 18 }} />
           </IconButton>
         </Tooltip>