# 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`