雨霖铃
c61b599287
- 新增 .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>
64 lines
1.8 KiB
Markdown
64 lines
1.8 KiB
Markdown
# 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`
|