Develop fastapi (#6)

* 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

components/TopBar.tsx

@@ -0,0 +1,78 @@
+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>
+  );
+}