Develop (#55)
feat: optimize dashboard/search UX and simplify extension architecture Redesign Dashboard with compact tool grid and recently used tools Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation Reorganize project structure into src/ Migrate i18n from react-i18next to chrome.i18n Remove runtime language switch and settings page Remove HTML/Markdown conversion tools Clean up unused code, dead animations, redundant comments, and imports Improve component consistency with shadcn/ui patterns Replace hardcoded strings/colors with i18n tokens and theme tokens Add comprehensive project documentation and coding standards Fix CI artifact upload workflow and multiple TypeScript/test issues Includes various refactors, UI polish, i18n cleanup, CI improvements, and maintenance updates across the codebase.
This commit is contained in:
LingandRX
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { ThemeModeProvider } from './ThemeModeProvider';
|
||||
import { RouterProvider } from './RouterProvider';
|
||||
|
||||
interface AppRootProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function AppRoot({ children }: AppRootProps) {
|
||||
return (
|
||||
<React.StrictMode>
|
||||
<ThemeModeProvider>
|
||||
<RouterProvider>{children}</RouterProvider>
|
||||
</ThemeModeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
# providers/
|
||||
|
||||
React Context Provider 目录，为整个应用提供全局共享状态。
|
||||
|
||||
## 文件说明
|
||||
|
||||
| 文件 | 用途 |
|
||||
| ----------------------- | ---------------------- |
|
||||
| `AppRoot.tsx` | 应用根 Provider 组合器 |
|
||||
| `RouterProvider.tsx` | 路由 Context Provider |
|
||||
| `ThemeModeProvider.tsx` | 主题模式 Provider |
|
||||
|
||||
## AppRoot.tsx
|
||||
|
||||
应用根 Provider 组合器，按顺序包裹：
|
||||
|
||||
```
|
||||
React.StrictMode
|
||||
└── ThemeModeProvider
|
||||
└── RouterProvider
|
||||
└── children
|
||||
```
|
||||
|
||||
## RouterProvider.tsx
|
||||
|
||||
路由 Context Provider，管理：
|
||||
|
||||
- **当前页面**：`currentPage`（`PageType`）
|
||||
- **可见页面列表**：`visiblePages`
|
||||
- **页面排序**：`pageOrder`
|
||||
- **加载状态**：`isLoaded`
|
||||
|
||||
核心特性：
|
||||
|
||||
- 通过 `chrome.storage` 持久化路由状态
|
||||
- 使用 `localStorage` 快照实现首屏 0 闪烁
|
||||
- 支持 popup/sidepanel/tab 三种入口的独立路由同步（通过 `syncKey`、`visiblePagesKey`、`pageOrderKey` 配置）
|
||||
- 处理右键菜单待处理数据的路由跳转
|
||||
- 监听 `chrome.storage.onChanged` 实现跨端同步
|
||||
|
||||
导出：
|
||||
|
||||
- `RouterProvider` 组件
|
||||
- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goBack` 等
|
||||
|
||||
## ThemeModeProvider.tsx
|
||||
|
||||
主题模式 Provider，管理：
|
||||
|
||||
- **主题模式**：`light` / `dark` / `system`
|
||||
- **解析后的主题**：`resolvedTheme`（`light` / `dark`）
|
||||
|
||||
核心特性：
|
||||
|
||||
- 使用 `localStorage` 快照实现首屏 0 闪烁
|
||||
- 监听系统级暗色模式变化（`matchMedia`）
|
||||
- 通过 `chrome.storage` 跨端同步主题偏好
|
||||
- 自动在 `document.documentElement` 上切换 `dark` class
|
||||
|
||||
导出：
|
||||
|
||||
- `ThemeModeProvider` 组件
|
||||
- `useThemeMode()` Hook — 获取 `themeMode`、`resolvedTheme`、`setThemeMode`
|
||||
@@ -0,0 +1,350 @@
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { browser } from 'wxt/browser';
|
||||
import type { ContextMenuPendingData, PageType, StorageSchema } from '@/types/storage';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import {
|
||||
getAllFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getDefaultVisibleFeatureKeys,
|
||||
} from '@/config/features';
|
||||
import { CONTEXT_MENU_DATA_EXPIRY_MS, saveContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
const MAX_RECENTLY_USED = 3;
|
||||
|
||||
/**
|
||||
* 校验是否为合法的页面类型
|
||||
*/
|
||||
const isValidPage = (page: unknown): page is PageType => {
|
||||
return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
|
||||
};
|
||||
|
||||
/**
|
||||
* 校验页面列表是否合法
|
||||
*/
|
||||
const isValidPageList = (pages: unknown): pages is PageType[] => {
|
||||
return Array.isArray(pages) && pages.every(isValidPage);
|
||||
};
|
||||
|
||||
/**
|
||||
* 将已保存的列表与默认列表合并，确保新增的功能特性被自动包含
|
||||
*/
|
||||
const mergeWithDefaults = (saved: PageType[], defaults: PageType[]): PageType[] => {
|
||||
const savedSet = new Set(saved);
|
||||
const defaultSet = new Set(defaults);
|
||||
|
||||
const preserved = saved.filter((page) => defaultSet.has(page));
|
||||
const newItems = defaults.filter((page) => !savedSet.has(page));
|
||||
|
||||
return [...preserved, ...newItems];
|
||||
};
|
||||
|
||||
interface RouterContextType {
|
||||
currentPage: PageType;
|
||||
visiblePages: PageType[];
|
||||
pageOrder: PageType[];
|
||||
recentlyUsedTools: PageType[];
|
||||
isLoaded: boolean;
|
||||
navigateTo: (page: PageType) => void;
|
||||
goBack: () => void;
|
||||
setVisiblePages: (pages: PageType[]) => void;
|
||||
setPageOrder: (pages: PageType[]) => void;
|
||||
}
|
||||
|
||||
const RouterContext = createContext<RouterContextType | null>(null);
|
||||
|
||||
interface RouterProviderProps {
|
||||
children: ReactNode;
|
||||
defaultRoute?: PageType;
|
||||
syncRoute?: boolean;
|
||||
syncKey?: keyof StorageSchema;
|
||||
visiblePagesKey?: keyof StorageSchema;
|
||||
pageOrderKey?: keyof StorageSchema;
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步从 localStorage 获取存储快照（首屏 0 闪烁核心防线）
|
||||
*/
|
||||
const getSyncSnapshot = <T,>(
|
||||
key: string,
|
||||
defaultValue: T,
|
||||
validator?: (val: unknown) => val is T,
|
||||
): T => {
|
||||
try {
|
||||
const val = localStorage.getItem(`snapshot/${key}`);
|
||||
if (!val) return defaultValue;
|
||||
const parsed = JSON.parse(val) as unknown;
|
||||
if (validator) {
|
||||
return validator(parsed) ? parsed : defaultValue;
|
||||
}
|
||||
return (parsed as T) ?? defaultValue;
|
||||
} catch (error) {
|
||||
console.error('[Router Snapshot Error] Failed to read sync cache:', error);
|
||||
return defaultValue;
|
||||
}
|
||||
};
|
||||
|
||||
export function RouterProvider({
|
||||
children,
|
||||
defaultRoute = 'dashboard',
|
||||
syncRoute = true,
|
||||
syncKey = 'app/currentRoute',
|
||||
visiblePagesKey = 'app/visiblePages',
|
||||
pageOrderKey = 'app/pageOrder',
|
||||
}: RouterProviderProps) {
|
||||
const [currentPage, setCurrentPage] = useState<PageType>(() =>
|
||||
getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
|
||||
);
|
||||
|
||||
const [visiblePages, setVisiblePages] = useState<PageType[]>(() => {
|
||||
const snapshot = getSyncSnapshot(
|
||||
visiblePagesKey as string,
|
||||
getDefaultVisibleFeatureKeys(),
|
||||
isValidPageList,
|
||||
);
|
||||
return mergeWithDefaults(snapshot, getDefaultVisibleFeatureKeys());
|
||||
});
|
||||
|
||||
const [pageOrder, setPageOrder] = useState<PageType[]>(() => {
|
||||
const snapshot = getSyncSnapshot(
|
||||
pageOrderKey as string,
|
||||
getDefaultPageOrder(),
|
||||
isValidPageList,
|
||||
);
|
||||
return mergeWithDefaults(snapshot, getDefaultPageOrder());
|
||||
});
|
||||
|
||||
const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(() =>
|
||||
getSyncSnapshot('app/recentlyUsedTools', [], isValidPageList),
|
||||
);
|
||||
|
||||
const [isLoaded, setIsLoaded] = useState(() => {
|
||||
const snapshotKey = localStorage.getItem(`snapshot/${syncKey as string}`);
|
||||
const snapshotVisible = localStorage.getItem(`snapshot/${visiblePagesKey as string}`);
|
||||
const snapshotOrder = localStorage.getItem(`snapshot/${pageOrderKey as string}`);
|
||||
return !!(snapshotKey && snapshotVisible && snapshotOrder);
|
||||
});
|
||||
|
||||
/**
|
||||
* 从异步存储中安全溯源初始数据
|
||||
*/
|
||||
const loadInitialData = useCallback(async () => {
|
||||
try {
|
||||
const savedRoute = await storageUtil.get(syncKey, defaultRoute);
|
||||
const savedVisiblePages = await storageUtil.get(
|
||||
visiblePagesKey,
|
||||
getDefaultVisibleFeatureKeys(),
|
||||
);
|
||||
const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
|
||||
const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []);
|
||||
|
||||
if (isValidPage(savedRoute) && syncRoute) {
|
||||
setCurrentPage(savedRoute);
|
||||
}
|
||||
if (isValidPageList(savedVisiblePages)) {
|
||||
setVisiblePages(mergeWithDefaults(savedVisiblePages, getDefaultVisibleFeatureKeys()));
|
||||
}
|
||||
if (isValidPageList(savedPageOrder) && savedPageOrder.length > 0) {
|
||||
setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
|
||||
}
|
||||
if (isValidPageList(savedRecentTools)) {
|
||||
setRecentlyUsedTools(savedRecentTools);
|
||||
}
|
||||
setIsLoaded(true);
|
||||
} catch (error) {
|
||||
console.error('[Router Init Error] Core data fetch failed:', error);
|
||||
}
|
||||
}, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- Valid async data loading pattern on mount
|
||||
loadInitialData()
|
||||
.then(() => {
|
||||
if (cancelled) return;
|
||||
|
||||
// Check URL params for context menu data
|
||||
if (typeof window !== 'undefined') {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const feature = params.get('feature') as PageType | null;
|
||||
const payload = params.get('payload');
|
||||
|
||||
if (feature && payload && isValidPage(feature)) {
|
||||
void saveContextMenuData({ featureKey: feature, payload }).catch((err) => {
|
||||
console.error('[Router Context Handler Error]', err);
|
||||
});
|
||||
setCurrentPage(feature);
|
||||
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete('feature');
|
||||
url.searchParams.delete('payload');
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Check storage for pending context menu data
|
||||
storageUtil
|
||||
.get('contextMenu/pendingData', undefined)
|
||||
.then((pendingData) => {
|
||||
if (
|
||||
pendingData &&
|
||||
isValidPage(pendingData.featureKey) &&
|
||||
Date.now() - pendingData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS
|
||||
) {
|
||||
setCurrentPage(pendingData.featureKey as PageType);
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
})
|
||||
.catch(console.error);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [loadInitialData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded && syncRoute) {
|
||||
void storageUtil.set(syncKey, currentPage as PageType).catch(console.error);
|
||||
try {
|
||||
localStorage.setItem(`snapshot/${syncKey}`, JSON.stringify(currentPage));
|
||||
} catch (err) {
|
||||
console.error('[Router LocalStorage Error]', err);
|
||||
}
|
||||
}
|
||||
}, [currentPage, isLoaded, syncRoute, syncKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded) {
|
||||
void storageUtil.set(visiblePagesKey, visiblePages).catch(console.error);
|
||||
try {
|
||||
localStorage.setItem(`snapshot/${visiblePagesKey}`, JSON.stringify(visiblePages));
|
||||
} catch (err) {
|
||||
console.error('[Router LocalStorage Error]', err);
|
||||
}
|
||||
}
|
||||
}, [visiblePages, isLoaded, visiblePagesKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded) {
|
||||
void storageUtil.set(pageOrderKey, pageOrder).catch(console.error);
|
||||
try {
|
||||
localStorage.setItem(`snapshot/${pageOrderKey}`, JSON.stringify(pageOrder));
|
||||
} catch (err) {
|
||||
console.error('[Router LocalStorage Error]', err);
|
||||
}
|
||||
}
|
||||
}, [pageOrder, isLoaded, pageOrderKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded) {
|
||||
void storageUtil.set('app/recentlyUsedTools', recentlyUsedTools).catch(console.error);
|
||||
try {
|
||||
localStorage.setItem('snapshot/app/recentlyUsedTools', JSON.stringify(recentlyUsedTools));
|
||||
} catch (err) {
|
||||
console.error('[Router LocalStorage Error]', err);
|
||||
}
|
||||
}
|
||||
}, [recentlyUsedTools, isLoaded]);
|
||||
|
||||
const currentPageRef = useRef(currentPage);
|
||||
useEffect(() => {
|
||||
currentPageRef.current = currentPage;
|
||||
}, [currentPage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!syncRoute) return;
|
||||
|
||||
const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
|
||||
if (syncRoute && changes[syncKey as string]) {
|
||||
const newRoute = changes[syncKey as string].newValue as PageType;
|
||||
if (newRoute && newRoute !== currentPageRef.current && isValidPage(newRoute)) {
|
||||
setCurrentPage(newRoute);
|
||||
}
|
||||
}
|
||||
if (changes[visiblePagesKey as string]) {
|
||||
const newPages = changes[visiblePagesKey as string].newValue;
|
||||
if (isValidPageList(newPages)) {
|
||||
setVisiblePages(newPages);
|
||||
}
|
||||
}
|
||||
if (changes[pageOrderKey as string]) {
|
||||
const newOrder = changes[pageOrderKey as string].newValue;
|
||||
if (isValidPageList(newOrder)) {
|
||||
setPageOrder(newOrder);
|
||||
}
|
||||
}
|
||||
if (changes['app/recentlyUsedTools']) {
|
||||
const newRecent = changes['app/recentlyUsedTools'].newValue;
|
||||
if (isValidPageList(newRecent)) {
|
||||
setRecentlyUsedTools(newRecent);
|
||||
}
|
||||
}
|
||||
if (changes['contextMenu/pendingData']) {
|
||||
const newData = changes['contextMenu/pendingData']
|
||||
.newValue as ContextMenuPendingData | null;
|
||||
if (
|
||||
newData &&
|
||||
isValidPage(newData.featureKey) &&
|
||||
Date.now() - newData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS
|
||||
) {
|
||||
setCurrentPage(newData.featureKey as PageType);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
browser.storage.onChanged.addListener(handleStorageChange);
|
||||
return () => {
|
||||
browser.storage.onChanged.removeListener(handleStorageChange);
|
||||
};
|
||||
}, [syncRoute, syncKey, visiblePagesKey, pageOrderKey]);
|
||||
|
||||
const navigateTo = (page: PageType) => {
|
||||
setCurrentPage(page);
|
||||
setRecentlyUsedTools((prev) => {
|
||||
const filtered = prev.filter((p) => p !== page);
|
||||
return [page, ...filtered].slice(0, MAX_RECENTLY_USED);
|
||||
});
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
setCurrentPage('dashboard');
|
||||
};
|
||||
|
||||
return (
|
||||
<RouterContext.Provider
|
||||
value={{
|
||||
currentPage,
|
||||
visiblePages,
|
||||
pageOrder,
|
||||
recentlyUsedTools,
|
||||
isLoaded,
|
||||
navigateTo,
|
||||
goBack,
|
||||
setVisiblePages,
|
||||
setPageOrder,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RouterContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useRouter() {
|
||||
const context = useContext(RouterContext);
|
||||
if (!context) {
|
||||
throw new Error('useRouter must be used within a valid RouterProvider context wrapper');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export default RouterProvider;
|
||||
@@ -0,0 +1,162 @@
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { browser } from 'wxt/browser';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
|
||||
export type ThemeMode = 'light' | 'dark' | 'system';
|
||||
export type ResolvedThemeMode = 'light' | 'dark';
|
||||
|
||||
interface ThemeModeContextType {
|
||||
mode: ThemeMode;
|
||||
resolvedMode: ResolvedThemeMode;
|
||||
setMode: (mode: ThemeMode) => void;
|
||||
}
|
||||
|
||||
const ThemeModeContext = createContext<ThemeModeContextType | null>(null);
|
||||
|
||||
const THEME_MODE_KEY = 'app/themeMode' as const;
|
||||
const SNAPSHOT_KEY = 'snapshot/app/themeMode';
|
||||
|
||||
const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
|
||||
const isValidMode = (v: unknown): v is ThemeMode => VALID_MODES.includes(v as ThemeMode);
|
||||
|
||||
/**
|
||||
* 同步追溯 localStorage 级快照（首屏 0 闪烁核心防线）
|
||||
*/
|
||||
const getSyncSnapshot = (): ThemeMode => {
|
||||
try {
|
||||
const raw = localStorage.getItem(SNAPSHOT_KEY);
|
||||
if (!raw) return 'system';
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
return isValidMode(parsed) ? parsed : 'system';
|
||||
} catch {
|
||||
return 'system';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 实时嗅探系统底层操作系统的明暗色轴
|
||||
*/
|
||||
const getSystemMode = (): ResolvedThemeMode => {
|
||||
if (typeof window === 'undefined') return 'light';
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
};
|
||||
|
||||
interface ThemeModeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
|
||||
const [mode, setModeState] = useState<ThemeMode>(getSyncSnapshot);
|
||||
const [resolvedMode, setResolvedMode] = useState<ResolvedThemeMode>(
|
||||
mode === 'system' ? getSystemMode() : mode,
|
||||
);
|
||||
|
||||
const updateResolved = useCallback((nextMode: ThemeMode) => {
|
||||
setResolvedMode(nextMode === 'system' ? getSystemMode() : nextMode);
|
||||
}, []);
|
||||
|
||||
const setMode = useCallback(
|
||||
(next: ThemeMode) => {
|
||||
setModeState(next);
|
||||
updateResolved(next);
|
||||
|
||||
void storageUtil.set(THEME_MODE_KEY, next).catch((err) => {
|
||||
console.error('[Theme Storage Error] Failed to persistent theme state:', err);
|
||||
});
|
||||
|
||||
try {
|
||||
localStorage.setItem(SNAPSHOT_KEY, JSON.stringify(next));
|
||||
} catch (err) {
|
||||
console.error('[Theme Snapshot Error] LocalStorage quota exceeded:', err);
|
||||
}
|
||||
},
|
||||
[updateResolved],
|
||||
);
|
||||
|
||||
// Sync theme from storage on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
storageUtil
|
||||
.get(THEME_MODE_KEY, 'system')
|
||||
.then((saved) => {
|
||||
if (cancelled) return;
|
||||
if (isValidMode(saved)) {
|
||||
setModeState(saved);
|
||||
updateResolved(saved);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[Theme Restore Thread Failed]', err);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [updateResolved]);
|
||||
|
||||
// Listen for system theme changes when in system mode
|
||||
useEffect(() => {
|
||||
if (mode !== 'system') return;
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handler = (e: MediaQueryListEvent) => {
|
||||
setResolvedMode(e.matches ? 'dark' : 'light');
|
||||
};
|
||||
mq.addEventListener('change', handler);
|
||||
return () => mq.removeEventListener('change', handler);
|
||||
}, [mode]);
|
||||
|
||||
// Sync theme across extension contexts (popup <-> sidepanel)
|
||||
useEffect(() => {
|
||||
const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
|
||||
if (changes[THEME_MODE_KEY]) {
|
||||
const next = changes[THEME_MODE_KEY].newValue;
|
||||
if (isValidMode(next)) {
|
||||
setModeState((currentMode) => {
|
||||
if (next !== currentMode) {
|
||||
updateResolved(next);
|
||||
return next;
|
||||
}
|
||||
return currentMode;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
browser.storage.onChanged.addListener(handleStorageChange);
|
||||
return () => {
|
||||
browser.storage.onChanged.removeListener(handleStorageChange);
|
||||
};
|
||||
}, [updateResolved]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document !== 'undefined') {
|
||||
document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
|
||||
}
|
||||
}, [resolvedMode]);
|
||||
|
||||
const contextValue = useMemo(
|
||||
() => ({ mode, resolvedMode, setMode }),
|
||||
[mode, resolvedMode, setMode],
|
||||
);
|
||||
|
||||
return <ThemeModeContext.Provider value={contextValue}>{children}</ThemeModeContext.Provider>;
|
||||
}
|
||||
|
||||
export function useThemeMode(): ThemeModeContextType {
|
||||
const ctx = useContext(ThemeModeContext);
|
||||
if (!ctx) {
|
||||
throw new Error(
|
||||
'useThemeMode must be used within a valid ThemeModeProvider sandboxed container',
|
||||
);
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export default ThemeModeProvider;
|
||||
@@ -0,0 +1,248 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import { RouterProvider, useRouter } from '@/providers/RouterProvider';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn(),
|
||||
set: vi.fn(() => Promise.resolve()),
|
||||
},
|
||||
}));
|
||||
|
||||
const TestComponent = () => {
|
||||
const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter();
|
||||
return (
|
||||
<div>
|
||||
<div data-testid="current-page">{currentPage}</div>
|
||||
<div data-testid="visible-pages">{visiblePages.join(',')}</div>
|
||||
<div data-testid="page-order">{pageOrder.join(',')}</div>
|
||||
<button onClick={() => navigateTo('timestamp')} data-testid="navigate-btn">
|
||||
Navigate
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
describe('RouterProvider', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
localStorage.clear();
|
||||
|
||||
const storageOnChangedMock = {
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
};
|
||||
|
||||
const extensionMock = {
|
||||
storage: {
|
||||
onChanged: storageOnChangedMock,
|
||||
},
|
||||
};
|
||||
|
||||
(globalThis as any).chrome = extensionMock;
|
||||
(globalThis as any).browser = extensionMock;
|
||||
});
|
||||
|
||||
it('应该使用默认值初始化路由', async () => {
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider defaultRoute="dashboard">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该从指定的 syncKey 加载路由', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/sidepanelRoute') return Promise.resolve('timestamp');
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/sidepanelRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
});
|
||||
});
|
||||
|
||||
it('导航时应该更新指定的 syncKey', async () => {
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/popupRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
|
||||
});
|
||||
|
||||
const btn = screen.getByTestId('navigate-btn');
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(btn);
|
||||
});
|
||||
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
expect(storageUtil.set).toHaveBeenCalledWith('app/popupRoute', 'timestamp');
|
||||
});
|
||||
|
||||
it('应该支持独立的标签页路由同步', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/tabRoute') return Promise.resolve('qrCode');
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/tabRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('qrCode');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该独立支持 visiblePagesKey 和 pageOrderKey，并合并缺失的新功能', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/sidepanelVisiblePages')
|
||||
return Promise.resolve(['timestamp', 'storageCleaner']);
|
||||
if (key === 'app/sidepanelPageOrder') return Promise.resolve(['storageCleaner', 'timestamp']);
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider
|
||||
visiblePagesKey="app/sidepanelVisiblePages"
|
||||
pageOrderKey="app/sidepanelPageOrder"
|
||||
>
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent;
|
||||
expect(visiblePages).toContain('timestamp');
|
||||
expect(visiblePages).toContain('storageCleaner');
|
||||
|
||||
const pageOrder = screen.getByTestId('page-order').textContent;
|
||||
expect(pageOrder).toContain('storageCleaner');
|
||||
expect(pageOrder).toContain('timestamp');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
|
||||
const oldVisiblePages = [
|
||||
'dashboard',
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
const oldPageOrder = [
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/popupVisiblePages') return Promise.resolve(oldVisiblePages);
|
||||
if (key === 'app/popupPageOrder') return Promise.resolve(oldPageOrder);
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
|
||||
expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
|
||||
expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('应该从 localStorage 快照合并缺失的新功能', async () => {
|
||||
const oldVisiblePages = [
|
||||
'dashboard',
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
const oldPageOrder = [
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
localStorage.setItem('snapshot/app/visiblePages', JSON.stringify(oldVisiblePages));
|
||||
localStorage.setItem('snapshot/app/pageOrder', JSON.stringify(oldPageOrder));
|
||||
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider>
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
expect(visiblePages).toBeDefined();
|
||||
expect(pageOrder).toBeDefined();
|
||||
});
|
||||
|
||||
it('组件卸载时不应设置 isLoaded 状态（竞态条件防护）', async () => {
|
||||
let resolveStorage: (value: unknown) => void;
|
||||
const storagePromise = new Promise((resolve) => {
|
||||
resolveStorage = resolve;
|
||||
});
|
||||
|
||||
(storageUtil.get as any).mockImplementation(() => storagePromise);
|
||||
|
||||
const { unmount } = render(
|
||||
<RouterProvider>
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
unmount();
|
||||
resolveStorage!('dashboard');
|
||||
|
||||
await act(async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user