LingandRX
84ffd2a132
* feat: add side panel with navigation and storage cleaner functionality * feat: add OpenUrlPage and integrate into app navigation * feat: 添加 GlobalSnackbar 组件并在多个页面中集成，替换原有 Snackbar 实现 * feat: fix OpenUrl sidebar issue with architecture refactor - 修复原问题：不再直接替换侧边栏 URL，保持插件导航可见 - 采用配置页 + 查看页分离架构：OpenUrlPage (配置) + OpenUrlViewerPage (查看) - 支持多个 URL 快捷方式管理（添加/删除） - 每个 URL 提供两种打开方式：在侧边栏打开 / 在新标签页打开 - 侧边栏查看页使用 iframe 占满全部剩余空间 - 更新 TypeScript 类型定义 - 保留原有混合内容警告检查 - 数据持久化到 Chrome Storage * refactor: centralized route management - consolidate routing config into single source * feat: 更换logo * refactor: code review fixes - security and race condition improvements Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Changes: - wxt.config.ts: Remove unused `debugger` permission (no code uses it) - OpenUrlPage.tsx: Fix unreachable showMessage after window.close() - OpenUrlPage.tsx: Replace unnecessary div wrapper with Fragment to reduce DOM nesting - OpenUrlViewerPage.tsx: Add URL validation to prevent XSS via javascript:/data: URLs - OpenUrlViewerPage.tsx: Add sandbox attribute to iframe for security isolation - OpenUrlViewerPage.tsx: Add error handling for invalid URLs - StorageCleanerPage.tsx: Fix race condition in handleOptionChange preference saving - StorageCleanerPage.tsx: Remove unnecessary storage reads when saving preferences (use state directly) - StorageCleanerPage.tsx: Add timeout cleanup for setTimeout to follow React best practices * feat: implement drill-down navigation with master-detail dashboard * feat: enhance dashboard dynamism and refine options UI * feat: overhaul storage cleaner UI with real-time size estimation and modern aesthetics * feat: overhaul TimestampPage UI/UX and fix GlobalSnackbar positioning * fix: decouple popup routing from storage sync and enhance OpenUrlPage UI * fix: avoid closing sidepanel when opening URL preview from within sidepanel
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 handleDetach = () => {
|
|
// 弹出脱离窗口 (以独立面板形式打开当前 URL)
|
|
chrome.windows.create({
|
|
url: window.location.href,
|
|
type: 'panel',
|
|
width: 420,
|
|
height: 600
|
|
});
|
|
};
|
|
|
|
const isDashboard = currentPage === 'dashboard';
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
sx={{
|
|
px: 2,
|
|
py: 1.5,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'grey.100',
|
|
bgcolor: 'background.paper',
|
|
zIndex: 1100
|
|
}}
|
|
>
|
|
<Box sx={{ width: 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={1} sx={{ width: 80, justifyContent: 'flex-end' }}>
|
|
<Tooltip title="独立窗口模式">
|
|
<IconButton size="small" onClick={handleDetach}>
|
|
<OpenInNewIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="设置">
|
|
<IconButton size="small" onClick={onOpenOptions}>
|
|
<SettingsIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|