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

config/routes.ts

@@ -56,3 +56,7 @@ export function getDefaultVisibleRoutes(): PageType[] {
 export function getAllRouteKeys(): PageType[] {
   return ROUTES.map(route => route.key);
 }
+
+export function getDefaultPageOrder(): PageType[] {
+  return ROUTES.filter(route => route.key !== 'dashboard' && route.key !== 'openUrlViewer').map(route => route.key);
+}

entrypoints/options/App.tsx

@@ -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', [
+      const [savedVisible, savedOrder] = await Promise.all([
+        storageUtil.get('app/visiblePages', [
           'timestamp',
           'storageCleaner',
           'openUrl',
-      ] as PageType[]);
+        ] as PageType[]),
-      setVisiblePages(saved ?? ['timestamp', 'storageCleaner', 'openUrl']);
+        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);
+      const { getDefaultVisibleRoutes } = await import('@/config/routes');
-      await storageUtil.set('app/visiblePages', defaults);
+      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,14 +154,16 @@ function App() {
         }}
       >
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          {ROUTES.filter((route) => route.key !== 'dashboard' && route.key !== 'openUrlViewer').map(
+          {pageOrder.map((key, index, array) => {
-            (route, index, array) => {
+            const route = getRouteByKey(key);
-              const isChecked = visiblePages.includes(route.key);
+            if (!route) return null;
+
+            const isChecked = visiblePages.includes(key);
             const isDisabled = isChecked && visiblePages.length === 1;
 
             return (
               <Box
-                  key={route.key}
+                key={key}
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
@@ -147,16 +183,33 @@ function App() {
                     {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>
 

entrypoints/popup/App.tsx

@@ -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 />

entrypoints/popup/index.html

@@ -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>

entrypoints/popup/pages/DashboardPage.tsx

@@ -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,21 +19,19 @@ export default function DashboardPage() {
 
   const isVisible = (key: string) => visiblePages.includes(key as PageType);
 
+  const renderCard = (key: PageType) => {
+    switch (key) {
+      case 'timestamp':
         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
+            key={key}
             title="时间戳"
             description="Unix 毫秒数转换与格式化"
             colorCode="#2196f3"
             icon={<AccessTimeIcon sx={{ fontSize: 20 }} />}
             onClick={() => navigateTo('timestamp')}
             snapshot={
-                <Box
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-                >
                 <Typography
                   sx={{
                     fontFamily: 'monospace',
@@ -50,27 +48,39 @@ export default function DashboardPage() {
               </Box>
             }
           />
-          )}
+        );
-
+      case 'storageCleaner':
-          {isVisible('storageCleaner') && (
+        return (
           <ToolCard
+            key={key}
             title="存储管理"
             description="清理缓存、Cookies 及本地存储"
             colorCode="#ff9800"
             icon={<StorageIcon sx={{ fontSize: 20 }} />}
             onClick={() => navigateTo('storageCleaner')}
           />
-          )}
+        );
-
+      case 'openUrl':
-          {isVisible('openUrl') && (
+        return (
           <ToolCard
-              title="URL 实验室"
+            key={key}
-              description="多环境跳转与安全性预检"
+            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 }}>
+          {pageOrder.map((key) => (isVisible(key) ? renderCard(key) : null))}
         </Box>
       </Container>
     </Box>

entrypoints/sidepanel/App.tsx

@@ -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 />

providers/RouterProvider.tsx

@@ -1,17 +1,19 @@
 import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import type { PageType } from '@/types/storage';
+import type { PageType, StorageSchema } from '@/types/storage';
 import { storageUtil } from '@/utils/chromeStorage';
-import { getDefaultVisibleRoutes } from '@/config/routes';
+import { getDefaultVisibleRoutes, getDefaultPageOrder } from '@/config/routes';
 
 interface RouterContextType {
   currentPage: PageType;
   visiblePages: PageType[];
+  pageOrder: PageType[];
   isLoaded: boolean;
   navigateTo: (page: PageType) => void;
   navigateLocal: (page: PageType) => void;
   syncNavigation: (page: PageType) => void;
   goBack: () => void;
   setVisiblePages: (pages: PageType[]) => void;
+  setPageOrder: (pages: PageType[]) => void;
 }
 
 const RouterContext = createContext<RouterContextType | null>(null);
@@ -20,34 +22,37 @@ interface RouterProviderProps {
   children: ReactNode;
   defaultRoute?: PageType;
   syncRoute?: boolean;
+  syncKey?: keyof StorageSchema;
 }
 
 export function RouterProvider({
   children,
   defaultRoute = 'dashboard',
-  syncRoute = true
+  syncRoute = true,
+  syncKey = 'app/currentRoute'
 }: RouterProviderProps) {
   const [currentPage, setCurrentPage] = useState<PageType>(defaultRoute);
   const [visiblePages, setVisiblePages] = useState<PageType[]>(getDefaultVisibleRoutes());
+  const [pageOrder, setPageOrder] = useState<PageType[]>(getDefaultPageOrder());
   const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     loadInitialData();
-  }, []);
+  }, [syncKey]);
 
   useEffect(() => {
     if (isLoaded && syncRoute) {
-      storageUtil.set('app/currentRoute', currentPage);
+      storageUtil.set(syncKey, currentPage as any);
     }
-  }, [currentPage, isLoaded, syncRoute]);
+  }, [currentPage, isLoaded, syncRoute, syncKey]);
 
   // Listen for storage changes if sync is enabled
   useEffect(() => {
     if (!syncRoute) return;
 
     const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => {
-      if (changes['app/currentRoute']) {
+      if (changes[syncKey as string]) {
-        const newRoute = changes['app/currentRoute'].newValue as PageType;
+        const newRoute = changes[syncKey as string].newValue as PageType;
         if (newRoute && newRoute !== currentPage) {
           setCurrentPage(newRoute);
         }
@@ -56,21 +61,25 @@ export function RouterProvider({
 
     chrome.storage.onChanged.addListener(handleStorageChange);
     return () => chrome.storage.onChanged.removeListener(handleStorageChange);
-  }, [syncRoute, currentPage]);
+  }, [syncRoute, currentPage, syncKey]);
 
   const loadInitialData = async () => {
     try {
-      const [savedRoute, savedVisiblePages] = await Promise.all([
+      const [savedRoute, savedVisiblePages, savedPageOrder] = await Promise.all([
-        storageUtil.get('app/currentRoute', defaultRoute),
+        storageUtil.get(syncKey, defaultRoute),
         storageUtil.get('app/visiblePages', getDefaultVisibleRoutes()),
+        storageUtil.get('app/pageOrder', getDefaultPageOrder()),
       ]);
 
       if (savedRoute && syncRoute) {
-        setCurrentPage(savedRoute);
+        setCurrentPage(savedRoute as PageType);
       }
       if (savedVisiblePages) {
         setVisiblePages(savedVisiblePages);
       }
+      if (savedPageOrder && savedPageOrder.length > 0) {
+        setPageOrder(savedPageOrder);
+      }
     } catch (error) {
       console.error('Failed to load initial routing data:', error);
     } finally {
@@ -87,7 +96,7 @@ export function RouterProvider({
   };
 
   const syncNavigation = (page: PageType) => {
-    storageUtil.set('app/currentRoute', page);
+    storageUtil.set(syncKey, page as any);
   };
 
   const goBack = () => {
@@ -99,12 +108,14 @@ export function RouterProvider({
       value={{
         currentPage,
         visiblePages,
+        pageOrder,
         isLoaded,
         navigateTo,
         navigateLocal,
         syncNavigation,
         goBack,
-        setVisiblePages
+        setVisiblePages,
+        setPageOrder
       }}
     >
       {children}

types/storage.d.ts

@@ -2,7 +2,10 @@ export type PageType = 'dashboard' | 'timestamp' | 'storageCleaner' | 'openUrl'
 
 export interface StorageSchema {
   'app/currentRoute': PageType;
+  'app/popupRoute': PageType;
+  'app/sidepanelRoute': PageType;
   'app/visiblePages': PageType[];
+  'app/pageOrder': PageType[];
   'app/lastRoute': string;
   'app/theme': string;
   'storageCleaner/preferences': StorageCleanerPreferences;

utils/storageCleaner.ts

@@ -11,9 +11,26 @@ const RESTRICTED_PROTOCOLS = [
 ] as const;
 
 export async function getCurrentTab() {
-  // 使用 lastFocusedWindow: true 确保在 Side Panel 或 Popup 中都能获取到用户正在查看的标签页
+  // First, try the active tab in the last focused window (works for standard popups and side panels)
-  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  const [lastFocusedTab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
-  return tab;
+
+  // If the tab is valid and NOT an extension page/restricted URL, use it
+  if (lastFocusedTab && !isRestrictedUrl(lastFocusedTab.url)) {
+    return lastFocusedTab;
+  }
+
+  // Fallback: If we're in a standalone extension window (which is focused),
+  // find the active tab in the most recently focused 'normal' browser window.
+  const [normalTab] = await chrome.tabs.query({
+    active: true,
+    windowType: 'normal',
+    lastFocusedWindow: true,
+  });
+  if (normalTab) return normalTab;
+
+  // Final fallback: any active normal tab (if multiple windows exist, it returns all active tabs)
+  const normalTabs = await chrome.tabs.query({ active: true, windowType: 'normal' });
+  return normalTabs[0];
 }
 
 export function isRestrictedUrl(url?: string): boolean {