Enhance form recognition, optimize UI, and unify components (#19)

- **docs**: 完善组件注释、README 目录结构及 AGENTS.md 文档。
- **refactor**:
  - 提取通用 `PageHeader`、`Button`、`DashboardCard` 及 `ErrorBoundary` 组件。
  - 重构消息通信机制，采用 `@webext-core/messaging` 实现类型安全。
  - 将全局通知系统重构为 `SnackbarProvider` (后合并至 `GlobalSnackbar`)。
  - 迁移样式系统至 MUI 主题，移除冗余 CSS。
  - 优化路由配置，支持独立标签页模式及页面懒加载。
  - 移除未使用文件、URL 工具及表单映射相关功能。
- **feat**:
  - 新增配置导出功能（JSON）及状态提示。
  - 新增侧边栏状态变化通知机制。
  - 新增文本统计及 JWT 解析工具。
  - 优化二维码生成与解析逻辑，换用更轻量的 `qrious` 和 `qr-scanner`。
  - 增强高亮器功能，支持闪烁效果及 Shadow DOM 穿透。
- **style**: 优化仪表盘响应式网格布局及 UI 细节。
- **fix**: 修复 `useStorageState` 依赖缺失及路由初始化性能问题。
- **test**: 更新单元测试以覆盖新增的工具函数及功能特性。

components/__tests__/GlobalSnackbar.test.tsx

@@ -1,6 +1,13 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, act, renderHook } from '@testing-library/react';
-import { GlobalSnackbar, useSnackbarState, type GlobalSnackbarProps } from '../GlobalSnackbar';
+import React from 'react';
+import {
+  GlobalSnackbar,
+  useSnackbarState,
+  useSnackbar,
+  SnackbarProvider,
+  type GlobalSnackbarProps,
+} from '../GlobalSnackbar';
 
 describe('GlobalSnackbar 组件系统', () => {
   const mockOnClose = vi.fn();
@@ -105,4 +112,51 @@ describe('GlobalSnackbar 组件系统', () => {
       // 源码中 handleClose 拦截了 clickaway，所以 open 不会变为 false。
     });
   });
+
+  describe('useSnackbar Context Hook 优先级', () => {
+    it('优先级验证: Call Options > Hook Options > Provider Options', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <SnackbarProvider initialOptions={{ severity: 'error', autoHideDuration: 1000 }}>
+          {children}
+        </SnackbarProvider>
+      );
+
+      // 1. 测试 Hook Options 覆盖 Provider Options
+      const { result: hookResult } = renderHook(() => useSnackbar({ severity: 'warning' }), {
+        wrapper,
+      });
+
+      act(() => {
+        hookResult.current.showMessage('消息 1');
+      });
+
+      // 我们需要通过某种方式检查当前活跃的 Snackbar 属性
+      // 由于 GlobalSnackbar 是在 Provider 内部渲染的，我们可以检查 DOM
+      expect(screen.getByText('消息 1')).toBeInTheDocument();
+      const alert1 = document.querySelector('.MuiAlert-filledWarning');
+      expect(alert1).toBeInTheDocument(); // Hook 配置 (warning) 覆盖了 Provider 配置 (error)
+
+      // 2. 测试 Call Options 覆盖 Hook Options
+      act(() => {
+        hookResult.current.showMessage('消息 2', { severity: 'success' });
+      });
+
+      expect(screen.getByText('消息 2')).toBeInTheDocument();
+      const alert2 = document.querySelector('.MuiAlert-filledSuccess');
+      expect(alert2).toBeInTheDocument(); // Call 配置 (success) 覆盖了 Hook 配置 (warning)
+    });
+
+    it('防御性测试: 当 options 为 undefined 时不应崩溃', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <SnackbarProvider>{children}</SnackbarProvider>
+      );
+
+      const { result } = renderHook(() => useSnackbar(), { wrapper });
+
+      act(() => {
+        expect(() => result.current.showMessage('测试')).not.toThrow();
+      });
+      expect(screen.getByText('测试')).toBeInTheDocument();
+    });
+  });
 });