Files
testing-tool/providers/README.md
雨霖铃 c61b599287 docs: 添加项目文档(copilot-instructions、编码规范、各目录 README)
- 新增 .github/copilot-instructions.md:Copilot 指令文件,涵盖构建命令、CI 流水线、项目架构、关键规范
- 新增 .github/CODING_STANDARDS.md:完整的代码编写规范文档(TypeScript、React、样式、错误处理、命名、测试、Hook、i18n、存储等 12 个章节)
- 新增 11 个目录的 README.md:components、components/ui、config、entrypoints、i18n、lib、pages、providers、public、src、types、utils
- 更新 AGENTS.md:补充页面组件模式说明和 components/ui 目录

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-05-27 11:54:21 +08:00

1.8 KiB
Raw Permalink Blame History

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,管理:

  • 当前页面currentPagePageType
  • 可见页面列表visiblePages
  • 页面排序pageOrder
  • 加载状态isLoaded

核心特性:

  • 通过 chrome.storage 持久化路由状态
  • 使用 localStorage 快照实现首屏 0 闪烁
  • 支持 popup/sidepanel/tab 三种入口的独立路由同步(通过 syncKeyvisiblePagesKeypageOrderKey 配置)
  • 处理右键菜单待处理数据的路由跳转
  • 监听 chrome.storage.onChanged 实现跨端同步

导出:

  • RouterProvider 组件
  • useRouter() Hook — 获取 currentPagevisiblePagespageOrdernavigateTogoBack

ThemeModeProvider.tsx

主题模式 Provider,管理:

  • 主题模式light / dark / system
  • 解析后的主题resolvedThemelight / dark

核心特性:

  • 使用 localStorage 快照实现首屏 0 闪烁
  • 监听系统级暗色模式变化(matchMedia
  • 通过 chrome.storage 跨端同步主题偏好
  • 自动在 document.documentElement 上切换 dark class

导出:

  • ThemeModeProvider 组件
  • useThemeMode() Hook — 获取 themeModeresolvedThemesetThemeMode