Develop (#21)
docs: 添加组件文档注释和类型导入 refactor: 统一使用 SnackbarOptions 类型 style: 优化导入语句顺序和格式 refactor: 简化假数据生成器中的faker导入和使用 feat(form-recognizer): 增强表单识别功能并优化UI交互 refactor: 移除未使用的组件文件 refactor(页面头部): 提取通用 PageHeader 组件 style(组件): 调整自动刷新开关和存储选项网格的样式 style(ui): 调整时间戳页面和结果视图的样式 ci(workflow): 移除Firefox测试以简化CI流程 refactor(qrcode): 重构二维码解析功能并提取为独立模块 style(页面样式): 统一页面头部图标颜色并优化表单样式 feat(formMapping): 添加表单映射功能 feat(表单映射): 添加配置导出功能及状态提示 feat(表单填充): 新增智能表单填充功能 ci: 精简触发CI的工作流分支 test: 更新路由测试以匹配新增的路由数量 test: 将测试文件中的描述和断言翻译为中文 test(PageHeader): 添加组件测试用例 refactor(theme): 重构主题样式并优化仪表盘卡片组件 refactor(Button): 统一按钮样式并移除重复样式定义 docs: 更新 README 文件中的目录结构说明 refactor: 优化代码类型声明和UI布局 refactor(消息通信): 使用 @webext-core/messaging 重构消息处理逻辑 fix: 修复依赖项缺失导致的潜在问题 refactor: 重构表单识别和消息处理逻辑 feat(侧边栏): 添加侧边栏状态变化通知功能 refactor: 优化高亮组件渲染逻辑并添加防抖处理 refactor: 统一组件导出方式为默认导出 refactor: 重构样式系统并迁移至 MUI 主题 docs: 更新项目文档以反映新增功能和技术栈细节 feat: 添加错误边界组件以捕获子组件错误 refactor(ui): 使用全局 snackbar 替换本地通知组件 refactor(snackbar): 重构全局消息提示为 SnackbarProvider 组件 refactor(Snackbar): 重构消息提示组件并优化样式 refactor: 重构路由和功能配置系统 refactor(GlobalSnackbar): 合并SnackbarProvider到GlobalSnackbar组件 feat(表单映射): 增强高亮器功能并优化元素定位 refactor: 移除表单映射相关功能 feat: 实现页面组件懒加载并优化加载状态显示 refactor: 移除未使用的数据生成和验证工具类 chore: 更新应用图标文件 refactor(qrcode): 替换二维码生成和解析库以减小体积 feat: 添加在标签页打开功能并优化错误处理 feat: 支持独立标签页模式并重构路由配置 feat(ui): 优化响应式布局和样式设计 refactor: 移除URL工具相关代码 refactor: 简化页面标题和存储选项网格的响应式布局 refactor: 优化样式和错误处理 refactor: 重构页面组件结构 style(DashboardPage): 优化仪表盘布局为响应式网格 refactor(ToolCard): 重构工具卡片组件并添加详细注释 feat: 新增文本统计功能 feat(jwt): 添加 JWT 解析工具功能 docs: 更新 README 以更清晰地描述项目功能和结构 docs: 更新AGENTS.md文档以反映项目最新状态 test: 更新特征计数测试以匹配新增工具 style: 统一导入语句顺序 refactor(pages): 重构工具页面组件结构并优化功能实现 feat(顶部栏): 添加搜索功能和历史记录 feat: 添加多语言支持(i18n) feat(顶部栏): 添加语言切换功能并优化国际化支持 feat(i18n): 增加语言归一化和同步功能 fix(剪贴板): 使用国际化文本替换剪贴板消息 test(顶部栏): 更新测试以匹配国际化标题 refactor: 重构组件目录结构 refactor(Dashboard): 优化卡片组件结构并移除无用属性 refactor(timestamp): 合并输入处理函数并优化样式结构 refactor(dashboard): 重构仪表盘卡片组件并优化布局 refactor(storageCleaner): 重构样式代码并优化国际化处理 refactor(StorageCleaner): 优化条件判断和清理未使用的代码 refactor(QrCode): 重构二维码页面样式和组件结构 refactor(ErrorBoundary): 移除冗余状态更新并调整错误背景色 feat(TopBar): 优化顶部导航栏功能并添加样式配置 chore: 在.gitignore中添加docs目录 feat(JsonDiff): 添加差异引擎类型定义 feat: 新增 JSON 差异比较工具功能 feat(主题): 添加暗色模式支持并重构主题系统
This commit is contained in:
LingandRX
@@ -0,0 +1,141 @@
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import { getTheme } from '@/config/theme';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
|
||||
export type ThemeMode = 'light' | 'dark' | 'system';
|
||||
export type ResolvedThemeMode = 'light' | 'dark';
|
||||
|
||||
interface ThemeModeContextType {
|
||||
/** 用户显式选择的模式（含 system） */
|
||||
mode: ThemeMode;
|
||||
/** 实际解析后的模式（不含 system） */
|
||||
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);
|
||||
|
||||
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 [, setIsLoaded] = useState(false);
|
||||
|
||||
const muiTheme = useMemo(() => getTheme(resolvedMode), [resolvedMode]);
|
||||
|
||||
const updateResolved = useCallback((nextMode: ThemeMode) => {
|
||||
setResolvedMode(nextMode === 'system' ? getSystemMode() : nextMode);
|
||||
}, []);
|
||||
|
||||
const setMode = useCallback(
|
||||
(next: ThemeMode) => {
|
||||
setModeState(next);
|
||||
updateResolved(next);
|
||||
storageUtil.set(THEME_MODE_KEY, next).catch(console.error);
|
||||
localStorage.setItem(SNAPSHOT_KEY, JSON.stringify(next));
|
||||
},
|
||||
[updateResolved],
|
||||
);
|
||||
|
||||
// 异步校准：从 chrome.storage 读取持久化值
|
||||
useEffect(() => {
|
||||
storageUtil
|
||||
.get(THEME_MODE_KEY, 'system')
|
||||
.then((saved) => {
|
||||
if (isValidMode(saved)) {
|
||||
setModeState(saved);
|
||||
updateResolved(saved);
|
||||
}
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setIsLoaded(true));
|
||||
}, [updateResolved]);
|
||||
|
||||
// 监听系统主题变化（仅在 system 模式下生效）
|
||||
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]);
|
||||
|
||||
// 跨入口同步：监听 chrome.storage.onChanged
|
||||
useEffect(() => {
|
||||
const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => {
|
||||
if (changes[THEME_MODE_KEY]) {
|
||||
const next = changes[THEME_MODE_KEY].newValue as unknown;
|
||||
if (isValidMode(next) && next !== mode) {
|
||||
setModeState(next);
|
||||
updateResolved(next);
|
||||
}
|
||||
}
|
||||
};
|
||||
chrome.storage.onChanged.addListener(handleStorageChange);
|
||||
return () => chrome.storage.onChanged.removeListener(handleStorageChange);
|
||||
}, [mode, updateResolved]);
|
||||
|
||||
const contextValue = useMemo(
|
||||
() => ({ mode, resolvedMode, setMode }),
|
||||
[mode, resolvedMode, setMode],
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemeModeContext.Provider value={contextValue}>
|
||||
<ThemeProvider theme={muiTheme}>
|
||||
<CssBaseline />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</ThemeModeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useThemeMode(): ThemeModeContextType {
|
||||
const ctx = useContext(ThemeModeContext);
|
||||
if (!ctx) {
|
||||
throw new Error('useThemeMode must be used within a ThemeModeProvider');
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export default ThemeModeProvider;
|
||||
Reference in New Issue
Block a user