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
2026-04-16 08:54:23 +08:00
parent 2cd21973f3
commit 84ffd2a132
34 changed files with 11680 additions and 739 deletions
@@ -0,0 +1,123 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import type { PageType } from '@/types/storage';
+import { storageUtil } from '@/utils/chromeStorage';
+import { getDefaultVisibleRoutes } from '@/config/routes';
+
+interface RouterContextType {
+  currentPage: PageType;
+  visiblePages: PageType[];
+  isLoaded: boolean;
+  navigateTo: (page: PageType) => void;
+  navigateLocal: (page: PageType) => void;
+  syncNavigation: (page: PageType) => void;
+  goBack: () => void;
+  setVisiblePages: (pages: PageType[]) => void;
+}
+
+const RouterContext = createContext<RouterContextType | null>(null);
+
+interface RouterProviderProps {
+  children: ReactNode;
+  defaultRoute?: PageType;
+  syncRoute?: boolean;
+}
+
+export function RouterProvider({
+  children,
+  defaultRoute = 'dashboard',
+  syncRoute = true
+}: RouterProviderProps) {
+  const [currentPage, setCurrentPage] = useState<PageType>(defaultRoute);
+  const [visiblePages, setVisiblePages] = useState<PageType[]>(getDefaultVisibleRoutes());
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    loadInitialData();
+  }, []);
+
+  useEffect(() => {
+    if (isLoaded && syncRoute) {
+      storageUtil.set('app/currentRoute', currentPage);
+    }
+  }, [currentPage, isLoaded, syncRoute]);
+
+  // Listen for storage changes if sync is enabled
+  useEffect(() => {
+    if (!syncRoute) return;
+
+    const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => {
+      if (changes['app/currentRoute']) {
+        const newRoute = changes['app/currentRoute'].newValue as PageType;
+        if (newRoute && newRoute !== currentPage) {
+          setCurrentPage(newRoute);
+        }
+      }
+    };
+
+    chrome.storage.onChanged.addListener(handleStorageChange);
+    return () => chrome.storage.onChanged.removeListener(handleStorageChange);
+  }, [syncRoute, currentPage]);
+
+  const loadInitialData = async () => {
+    try {
+      const [savedRoute, savedVisiblePages] = await Promise.all([
+        storageUtil.get('app/currentRoute', defaultRoute),
+        storageUtil.get('app/visiblePages', getDefaultVisibleRoutes()),
+      ]);
+
+      if (savedRoute && syncRoute) {
+        setCurrentPage(savedRoute);
+      }
+      if (savedVisiblePages) {
+        setVisiblePages(savedVisiblePages);
+      }
+    } catch (error) {
+      console.error('Failed to load initial routing data:', error);
+    } finally {
+      setIsLoaded(true);
+    }
+  };
+
+  const navigateTo = (page: PageType) => {
+    setCurrentPage(page);
+  };
+
+  const navigateLocal = (page: PageType) => {
+    setCurrentPage(page);
+  };
+
+  const syncNavigation = (page: PageType) => {
+    storageUtil.set('app/currentRoute', page);
+  };
+
+  const goBack = () => {
+    setCurrentPage('dashboard');
+  };
+
+  return (
+    <RouterContext.Provider
+      value={{
+        currentPage,
+        visiblePages,
+        isLoaded,
+        navigateTo,
+        navigateLocal,
+        syncNavigation,
+        goBack,
+        setVisiblePages
+      }}
+    >
+      {children}
+    </RouterContext.Provider>
+  );
+}
+
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error('useRouter must be used within a RouterProvider');
+  }
+  return context;
+}
+
+export default RouterProvider;