LingandRX
57ea4d9858
- **docs**: 完善组件注释、README 目录结构及 AGENTS.md 文档。 - **refactor**: - 提取通用 `PageHeader`、`Button`、`DashboardCard` 及 `ErrorBoundary` 组件。 - 重构消息通信机制，采用 `@webext-core/messaging` 实现类型安全。 - 将全局通知系统重构为 `SnackbarProvider` (后合并至 `GlobalSnackbar`)。 - 迁移样式系统至 MUI 主题，移除冗余 CSS。 - 优化路由配置，支持独立标签页模式及页面懒加载。 - 移除未使用文件、URL 工具及表单映射相关功能。 - **feat**: - 新增配置导出功能（JSON）及状态提示。 - 新增侧边栏状态变化通知机制。 - 新增文本统计及 JWT 解析工具。 - 优化二维码生成与解析逻辑，换用更轻量的 `qrious` 和 `qr-scanner`。 - 增强高亮器功能，支持闪烁效果及 Shadow DOM 穿透。 - **style**: 优化仪表盘响应式网格布局及 UI 细节。 - **fix**: 修复 `useStorageState` 依赖缺失及路由初始化性能问题。 - **test**: 更新单元测试以覆盖新增的工具函数及功能特性。
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { Box, IconButton, Typography, Stack, Tooltip } 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 { useRouter } from '@/providers/RouterProvider';
|
|
|
|
export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
|
|
const { currentPage, goBack } = useRouter();
|
|
|
|
const handleOpenInTab = () => {
|
|
// 在新标签页中打开扩展页面
|
|
chrome.tabs.create({ url: chrome.runtime.getURL('popup.html?mode=tab') }).catch(console.error);
|
|
window.close();
|
|
};
|
|
|
|
const isDashboard = currentPage === 'dashboard';
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
sx={{
|
|
px: { xs: 1.5, sm: 2 },
|
|
py: 1.5,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'grey.100',
|
|
bgcolor: 'background.paper',
|
|
zIndex: 1100,
|
|
}}
|
|
>
|
|
<Box sx={{ width: { xs: 32, sm: 40 } }}>
|
|
{!isDashboard && (
|
|
<IconButton
|
|
size="small"
|
|
onClick={goBack}
|
|
sx={{
|
|
bgcolor: 'grey.50',
|
|
'&:hover': { bgcolor: 'grey.200' },
|
|
}}
|
|
>
|
|
<ArrowBackIosNewIcon sx={{ fontSize: 14 }} />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{
|
|
fontWeight: 800,
|
|
letterSpacing: '0.5px',
|
|
textTransform: 'uppercase',
|
|
fontSize: '0.75rem',
|
|
color: 'text.secondary',
|
|
}}
|
|
>
|
|
Testing Tools
|
|
</Typography>
|
|
|
|
<Stack
|
|
direction="row"
|
|
spacing={0.5}
|
|
sx={{ width: { xs: 80, sm: 120 }, justifyContent: 'flex-end' }}
|
|
>
|
|
<Tooltip title="在标签页打开">
|
|
<IconButton size="small" onClick={handleOpenInTab}>
|
|
<OpenInNewIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="设置">
|
|
<IconButton size="small" onClick={onOpenOptions}>
|
|
<SettingsIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|