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

entrypoints/options/App.tsx

@@ -3,21 +3,17 @@ import {
   Box,
   Typography,
   Paper,
-  FormControlLabel,
   Switch,
   Button,
   Snackbar,
   Alert,
   CircularProgress,
+  Stack,
 } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import type { PageType } from '@/types/storage';
 import { storageUtil } from '@/utils/chromeStorage';
-
-const PAGE_CONFIG = {
-  timestamp: { label: '时间戳', defaultVisible: true },
-  storageCleaner: { label: '存储清理', defaultVisible: true },
-} as const satisfies Record<PageType, { label: string; defaultVisible: boolean }>;
+import { ROUTES } from '@/config/routes';
 
 function App() {
   const [visiblePages, setVisiblePages] = useState<PageType[]>([]);
@@ -34,12 +30,12 @@ function App() {
       const saved = await storageUtil.get('app/visiblePages', [
         'timestamp',
         'storageCleaner',
+        'openUrl',
       ] as PageType[]);
-      // Ensure we always have an array
-      setVisiblePages(saved ?? ['timestamp', 'storageCleaner']);
+      setVisiblePages(saved ?? ['timestamp', 'storageCleaner', 'openUrl']);
     } catch (error) {
       console.error('Failed to load config:', error);
-      setVisiblePages(['timestamp', 'storageCleaner']);
+      setVisiblePages(['timestamp', 'storageCleaner', 'openUrl']);
     } finally {
       setIsLoaded(true);
     }
@@ -50,7 +46,6 @@ function App() {
     let newPages: PageType[];
 
     if (isCurrentlyVisible) {
-      // 尝试隐藏，但至少保留一个
       if (visiblePages.length <= 1) {
         showToast('至少需要保留一个可见页面', 'warning');
         return;
@@ -63,27 +58,23 @@ function App() {
     try {
       await storageUtil.set('app/visiblePages', newPages);
       setVisiblePages(newPages);
-      showToast(
-        `已${isCurrentlyVisible ? '隐藏' : '显示'} ${PAGE_CONFIG[page].label}`,
-        'success',
-      );
+      const route = ROUTES.find((r) => r.key === page);
+      showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${route?.label || page}`, 'success');
     } catch (error) {
       console.error('Failed to save config:', error);
-      showToast('保存失败，请重试', 'warning');
+      showToast('保存失败', 'warning');
     }
   };
 
   const handleRestoreDefaults = async () => {
     try {
-      const defaults = (Object.keys(PAGE_CONFIG) as PageType[]).filter(
-        (key) => PAGE_CONFIG[key].defaultVisible,
-      );
+      const defaults = ROUTES.filter((route) => route.defaultVisible).map((route) => route.key);
       await storageUtil.set('app/visiblePages', defaults);
       setVisiblePages(defaults);
-      showToast('已恢复默认设置', 'success');
+      showToast('已恢复默认', 'success');
     } catch (error) {
       console.error('Failed to restore defaults:', error);
-      showToast('恢复失败，请重试', 'warning');
+      showToast('恢复失败', 'warning');
     }
   };
 
@@ -92,82 +83,82 @@ function App() {
     setToastSeverity(severity);
   };
 
-  const handleCloseToast = () => {
-    setToast(null);
-  };
+  const handleCloseToast = () => setToast(null);
 
   if (!isLoaded) {
     return (
       <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: '100vh',
-        }}
+        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}
       >
-        <CircularProgress />
+        <CircularProgress size={24} />
       </Box>
     );
   }
 
   return (
-    <Box sx={{ p: 3, maxWidth: 600, mx: 'auto' }}>
-      <Typography variant="h5" gutterBottom fontWeight="bold">
-        ⚙️ 扩展设置
-      </Typography>
-
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        paragraph
-        sx={{ mb: 3 }}
-      >
-        自定义 popup 弹窗中显示的功能页面。更改将立即生效，无需保存。
-      </Typography>
-
-      <Paper elevation={0} sx={{ p: 3, border: '1px solid', borderColor: 'divider', mb: 2 }}>
-        <Typography variant="subtitle1" gutterBottom fontWeight="medium" sx={{ mb: 2 }}>
-          可见页面设置
-        </Typography>
-
-        {(Object.keys(PAGE_CONFIG) as PageType[]).map((pageKey) => {
-          const config = PAGE_CONFIG[pageKey];
-          const isChecked = visiblePages.includes(pageKey);
-          const isDisabled = !isChecked && visiblePages.length === 1;
-
-          return (
-            <FormControlLabel
-              key={pageKey}
-              control={
-                <Switch
-                  checked={isChecked}
-                  onChange={() => handlePageToggle(pageKey)}
-                  disabled={isDisabled}
-                  color="primary"
-                />
-              }
-              label={config.label}
-              sx={{
-                width: '100%',
-                mb: 1,
-                '&:last-child': { mb: 0 },
-              }}
-            />
-          );
-        })}
-      </Paper>
-
-      <Box display="flex" justifyContent="flex-start" sx={{ mb: 3 }}>
+    <Box sx={{ p: 4, maxWidth: 600, mx: 'auto', minHeight: '100vh', bgcolor: 'grey.50' }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 4 }}>
         <Button
-          variant="outlined"
-          onClick={handleRestoreDefaults}
-          startIcon={<RefreshIcon />}
+          variant="text"
           size="small"
+          onClick={handleRestoreDefaults}
+          startIcon={<RefreshIcon sx={{ fontSize: 16 }} />}
+          sx={{ color: 'text.secondary', fontWeight: 600 }}
         >
           恢复默认
         </Button>
-      </Box>
+      </Stack>
+
+      <Paper
+        elevation={0}
+        sx={{
+          borderRadius: 4,
+          border: '1px solid',
+          borderColor: 'grey.200',
+          overflow: 'hidden',
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          {ROUTES.filter((route) => route.key !== 'dashboard' && route.key !== 'openUrlViewer').map(
+            (route, index, array) => {
+              const isChecked = visiblePages.includes(route.key);
+              const isDisabled = isChecked && visiblePages.length === 1;
+
+              return (
+                <Box
+                  key={route.key}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    p: 2.5,
+                    borderBottom: index === array.length - 1 ? 'none' : '1px solid',
+                    borderColor: 'grey.100',
+                    transition: 'all 0.2s',
+                    '&:hover': { bgcolor: 'grey.50' },
+                  }}
+                >
+                  <Box>
+                    <Typography variant="body1" sx={{ fontWeight: 700, color: 'text.primary' }}>
+                      {route.label}
+                    </Typography>
+                    <Typography variant="caption" color="text.secondary">
+                      {isChecked ? '已在 Dashboard 启用' : '已在 Dashboard 隐藏'}
+                    </Typography>
+                  </Box>
+                  <Switch
+                    size="small"
+                    checked={isChecked}
+                    onChange={() => handlePageToggle(route.key)}
+                    disabled={isDisabled}
+                  />
+                </Box>
+              );
+            },
+          )}
+        </Box>
+      </Paper>
 
       <Snackbar
         open={!!toast}
@@ -179,17 +170,11 @@ function App() {
           onClose={handleCloseToast}
           severity={toastSeverity}
           variant="filled"
-          sx={{ width: '100%' }}
+          sx={{ borderRadius: 2, fontWeight: 600 }}
         >
           {toast}
         </Alert>
       </Snackbar>
-
-      <Box mt={4} pt={2} borderTop={1} borderColor="divider">
-        <Typography variant="caption" color="text.secondary">
-          提示：更改将立即应用到 popup 弹窗。如需查看效果,请关闭并重新打开扩展弹窗。
-        </Typography>
-      </Box>
     </Box>
   );
 }