Develop fastapi (#8)

* 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 * fix: enhance storage cleaner size detection and optimize UI layout * feat: implement independent route persistence and fix standalone window tab identification * feat(options): add card sorting functionality to dashboard tools
2026-04-16 23:59:11 +08:00
parent 9a947d7431
commit bbd0507bcd
9 changed files with 207 additions and 109 deletions
@@ -9,14 +9,18 @@ import {
  Alert,
  CircularProgress,
  Stack,
+  IconButton,
 } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import type { PageType } from '@/types/storage';
 import { storageUtil } from '@/utils/chromeStorage';
-import { ROUTES } from '@/config/routes';
+import { getRouteByKey, getDefaultPageOrder } from '@/config/routes';

 function App() {
  const [visiblePages, setVisiblePages] = useState<PageType[]>([]);
+  const [pageOrder, setPageOrder] = useState<PageType[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [toast, setToast] = useState<string | null>(null);
  const [toastSeverity, setToastSeverity] = useState<'success' | 'info' | 'warning'>('info');
@@ -27,15 +31,20 @@ function App() {

  const loadConfig = async () => {
    try {
-      const saved = await storageUtil.get('app/visiblePages', [
-        'timestamp',
-        'storageCleaner',
-        'openUrl',
-      ] as PageType[]);
-      setVisiblePages(saved ?? ['timestamp', 'storageCleaner', 'openUrl']);
+      const [savedVisible, savedOrder] = await Promise.all([
+        storageUtil.get('app/visiblePages', [
+          'timestamp',
+          'storageCleaner',
+          'openUrl',
+        ] as PageType[]),
+        storageUtil.get('app/pageOrder', getDefaultPageOrder()),
+      ]);
+      setVisiblePages(savedVisible ?? ['timestamp', 'storageCleaner', 'openUrl']);
+      setPageOrder(savedOrder && savedOrder.length > 0 ? savedOrder : getDefaultPageOrder());
    } catch (error) {
      console.error('Failed to load config:', error);
      setVisiblePages(['timestamp', 'storageCleaner', 'openUrl']);
+      setPageOrder(getDefaultPageOrder());
    } finally {
      setIsLoaded(true);
    }
@@ -58,7 +67,7 @@ function App() {
    try {
      await storageUtil.set('app/visiblePages', newPages);
      setVisiblePages(newPages);
-      const route = ROUTES.find((r) => r.key === page);
+      const route = getRouteByKey(page);
      showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${route?.label || page}`, 'success');
    } catch (error) {
      console.error('Failed to save config:', error);
@@ -66,11 +75,36 @@ function App() {
    }
  };

+  const handleMove = async (index: number, direction: 'up' | 'down') => {
+    if (direction === 'up' && index === 0) return;
+    if (direction === 'down' && index === pageOrder.length - 1) return;
+
+    const newOrder = [...pageOrder];
+    const swapIndex = direction === 'up' ? index - 1 : index + 1;
+    [newOrder[index], newOrder[swapIndex]] = [newOrder[swapIndex], newOrder[index]];
+
+    try {
+      await storageUtil.set('app/pageOrder', newOrder);
+      setPageOrder(newOrder);
+    } catch (error) {
+      console.error('Failed to save order:', error);
+      showToast('排序保存失败', 'warning');
+    }
+  };
+
  const handleRestoreDefaults = async () => {
    try {
-      const defaults = ROUTES.filter((route) => route.defaultVisible).map((route) => route.key);
-      await storageUtil.set('app/visiblePages', defaults);
+      const { getDefaultVisibleRoutes } = await import('@/config/routes');
+      const defaults = getDefaultVisibleRoutes();
+      const defaultOrder = getDefaultPageOrder();
+
+      await Promise.all([
+        storageUtil.set('app/visiblePages', defaults),
+        storageUtil.set('app/pageOrder', defaultOrder),
+      ]);
+
      setVisiblePages(defaults);
+      setPageOrder(defaultOrder);
      showToast('已恢复默认', 'success');
    } catch (error) {
      console.error('Failed to restore defaults:', error);
@@ -120,43 +154,62 @@ function App() {
        }}
      >
        <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;
+          {pageOrder.map((key, index, array) => {
+            const route = getRouteByKey(key);
+            if (!route) return null;

-              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>
+            const isChecked = visiblePages.includes(key);
+            const isDisabled = isChecked && visiblePages.length === 1;
+
+            return (
+              <Box
+                key={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>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <IconButton
+                    size="small"
+                    onClick={() => handleMove(index, 'up')}
+                    disabled={index === 0}
+                    sx={{ color: 'text.secondary' }}
+                  >
+                    <KeyboardArrowUpIcon fontSize="small" />
+                  </IconButton>
+                  <IconButton
+                    size="small"
+                    onClick={() => handleMove(index, 'down')}
+                    disabled={index === array.length - 1}
+                    sx={{ color: 'text.secondary' }}
+                  >
+                    <KeyboardArrowDownIcon fontSize="small" />
+                  </IconButton>
                  <Switch
                    size="small"
                    checked={isChecked}
-                    onChange={() => handlePageToggle(route.key)}
+                    onChange={() => handlePageToggle(key)}
                    disabled={isDisabled}
                  />
                </Box>
-              );
-            },
-          )}
+              </Box>
+            );
+          })}
        </Box>
      </Paper>

@@ -9,7 +9,7 @@ function App() {
  };

  return (
-    <RouterProvider defaultRoute="dashboard" syncRoute={false}>
+    <RouterProvider defaultRoute="dashboard" syncRoute={true} syncKey="app/popupRoute">
      <div className="app" style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
        <TopBar onOpenOptions={handleOpenOptions} />
        <RouterContainer />
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Default Popup Title</title>
+    <title>我是独立窗口</title>
    <meta name="manifest.type" content="browser_action" />
  </head>
  <body>
@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 import dayjs from '@/utils/dayjs';

 export default function DashboardPage() {
-  const { navigateTo, visiblePages } = useRouter();
+  const { navigateTo, visiblePages, pageOrder } = useRouter();
  const [now, setNow] = useState(dayjs());

  useEffect(() => {
@@ -19,58 +19,68 @@ export default function DashboardPage() {

  const isVisible = (key: string) => visiblePages.includes(key as PageType);

+  const renderCard = (key: PageType) => {
+    switch (key) {
+      case 'timestamp':
+        return (
+          <ToolCard
+            key={key}
+            title="时间戳"
+            description="Unix 毫秒数转换与格式化"
+            colorCode="#2196f3"
+            icon={<AccessTimeIcon sx={{ fontSize: 20 }} />}
+            onClick={() => navigateTo('timestamp')}
+            snapshot={
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography
+                  sx={{
+                    fontFamily: 'monospace',
+                    fontWeight: 600,
+                    color: '#2196f3',
+                    fontSize: '0.85rem',
+                  }}
+                >
+                  {now.valueOf()}
+                </Typography>
+                <Typography sx={{ fontSize: '0.7rem', color: 'text.secondary' }}>
+                  {now.format('HH:mm:ss')}
+                </Typography>
+              </Box>
+            }
+          />
+        );
+      case 'storageCleaner':
+        return (
+          <ToolCard
+            key={key}
+            title="存储管理"
+            description="清理缓存、Cookies 及本地存储"
+            colorCode="#ff9800"
+            icon={<StorageIcon sx={{ fontSize: 20 }} />}
+            onClick={() => navigateTo('storageCleaner')}
+          />
+        );
+      case 'openUrl':
+        return (
+          <ToolCard
+            key={key}
+            title="URL 工具"
+            description="快速打开 URL 或复制链接"
+            colorCode="#9c27b0"
+            icon={<LanguageIcon sx={{ fontSize: 20 }} />}
+            onClick={() => navigateTo('openUrl')}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
  return (
    <Box sx={{ bgcolor: 'grey.50', minHeight: '100%', pb: 4 }}>
      <Container maxWidth="sm" sx={{ py: 3, px: 2 }}>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {isVisible('timestamp') && (
-            <ToolCard
-              title="时间戳"
-              description="Unix 毫秒数转换与格式化"
-              colorCode="#2196f3"
-              icon={<AccessTimeIcon sx={{ fontSize: 20 }} />}
-              onClick={() => navigateTo('timestamp')}
-              snapshot={
-                <Box
-                  sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-                >
-                  <Typography
-                    sx={{
-                      fontFamily: 'monospace',
-                      fontWeight: 600,
-                      color: '#2196f3',
-                      fontSize: '0.85rem',
-                    }}
-                  >
-                    {now.valueOf()}
-                  </Typography>
-                  <Typography sx={{ fontSize: '0.7rem', color: 'text.secondary' }}>
-                    {now.format('HH:mm:ss')}
-                  </Typography>
-                </Box>
-              }
-            />
-          )}
-
-          {isVisible('storageCleaner') && (
-            <ToolCard
-              title="存储管理"
-              description="清理缓存、Cookies 及本地存储"
-              colorCode="#ff9800"
-              icon={<StorageIcon sx={{ fontSize: 20 }} />}
-              onClick={() => navigateTo('storageCleaner')}
-            />
-          )}
-
-          {isVisible('openUrl') && (
-            <ToolCard
-              title="URL 实验室"
-              description="多环境跳转与安全性预检"
-              colorCode="#9c27b0"
-              icon={<LanguageIcon sx={{ fontSize: 20 }} />}
-              onClick={() => navigateTo('openUrl')}
-            />
-          )}
+          {pageOrder.map((key) => (isVisible(key) ? renderCard(key) : null))}
        </Box>
      </Container>
    </Box>
@@ -9,7 +9,7 @@ function App() {
  };

  return (
-    <RouterProvider defaultRoute="dashboard">
+    <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
      <div className="app" style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
        <TopBar onOpenOptions={handleOpenOptions} />
        <RouterContainer />