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**: 更新单元测试以覆盖新增的工具函数及功能特性。

config/__tests__/features.test.ts

@@ -1,16 +1,16 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import {
   FEATURES,
-  getFeatureByKey,
-  getDefaultVisibleFeatureKeys,
   getAllFeatureKeys,
   getDefaultPageOrder,
+  getDefaultVisibleFeatureKeys,
+  getFeatureByKey,
 } from '../features';
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('should have 9 features defined', () => {
-      expect(FEATURES).toHaveLength(9);
+    it('should have 6 features defined', () => {
+      expect(FEATURES).toHaveLength(6);
     });
 
     it('should have all required properties for each feature', () => {
@@ -27,10 +27,10 @@ describe('features', () => {
         expect(typeof feature.components).toBe('object');
         expect(feature.components).toHaveProperty('popup');
         expect(feature.components).toHaveProperty('sidepanel');
-        expect(feature.components).toHaveProperty('detached');
+        expect(feature.components).toHaveProperty('tab');
 
         // Optional UI properties for non-hidden features
-        if (feature.key !== 'dashboard' && feature.key !== 'openUrlViewer') {
+        if (feature.key !== 'dashboard') {
           expect(feature).toHaveProperty('icon');
           expect(feature).toHaveProperty('themeColor');
           expect(typeof feature.themeColor).toBe('string');
@@ -83,31 +83,25 @@ describe('features', () => {
       });
     });
 
-    it('should include dashboard, timestamp, storageCleaner, openUrl', () => {
+    it('should include dashboard, timestamp, storageCleaner, qrCode', () => {
       const visibleKeys = getDefaultVisibleFeatureKeys();
       expect(visibleKeys).toContain('dashboard');
       expect(visibleKeys).toContain('timestamp');
       expect(visibleKeys).toContain('storageCleaner');
-      expect(visibleKeys).toContain('openUrl');
-    });
-
-    it('should not include openUrlViewer (not visible by default)', () => {
-      const visibleKeys = getDefaultVisibleFeatureKeys();
-      expect(visibleKeys).not.toContain('openUrlViewer');
+      expect(visibleKeys).toContain('qrCode');
     });
   });
 
   describe('getAllFeatureKeys', () => {
     it('should return all feature keys', () => {
       const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(9);
+      expect(allKeys).toHaveLength(6);
       expect(allKeys).toContain('dashboard');
       expect(allKeys).toContain('timestamp');
       expect(allKeys).toContain('storageCleaner');
-      expect(allKeys).toContain('openUrl');
       expect(allKeys).toContain('qrCode');
-      expect(allKeys).toContain('formRecognizer');
-      expect(allKeys).toContain('openUrlViewer');
+      expect(allKeys).toContain('textStatistics');
+      expect(allKeys).toContain('jwt');
     });
   });
 
@@ -117,23 +111,16 @@ describe('features', () => {
       expect(pageOrder).not.toContain('dashboard');
     });
 
-    it('should exclude openUrlViewer from page order', () => {
-      const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).not.toContain('openUrlViewer');
-    });
-
-    it('should include timestamp, storageCleaner, openUrl, qrCode, formRecognizer in page order', () => {
+    it('should include timestamp, storageCleaner, qrCode in page order', () => {
       const pageOrder = getDefaultPageOrder();
       expect(pageOrder).toContain('timestamp');
       expect(pageOrder).toContain('storageCleaner');
-      expect(pageOrder).toContain('openUrl');
       expect(pageOrder).toContain('qrCode');
-      expect(pageOrder).toContain('formRecognizer');
     });
 
-    it('should have 7 items in page order', () => {
+    it('should have 5 items in page order', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(7);
+      expect(pageOrder).toHaveLength(5);
     });
   });
 });

config/features.tsx

@@ -1,23 +1,21 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, lazy } from 'react';
 import type { PageType } from '@/types/storage';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import StorageIcon from '@mui/icons-material/Storage';
-import LanguageIcon from '@mui/icons-material/Language';
 import QrCodeIcon from '@mui/icons-material/QrCode';
 import DescriptionIcon from '@mui/icons-material/Description';
-
-import DashboardPage from '@/entrypoints/popup/pages/DashboardPage';
-import TimestampPage from '@/entrypoints/popup/pages/TimestampPage';
-import StorageCleanerPage from '@/entrypoints/popup/pages/StorageCleanerPage';
-import OpenUrlPage from '@/entrypoints/popup/pages/OpenUrlPage';
-import OpenUrlViewerPage from '@/entrypoints/popup/pages/OpenUrlViewerPage';
-import QrCodePage from '@/entrypoints/popup/pages/QrCodePage';
-import FormRecognizerPage from '@/entrypoints/popup/pages/FormRecognizerPage';
-import FormMappingPage from '@/entrypoints/popup/pages/FormMappingPage';
-import FormFillPage from '@/entrypoints/popup/pages/FormFillPage';
+import VpnKeyIcon from '@mui/icons-material/VpnKey';
 
 import { THEME_COLORS } from './pageTheme';
 
+// 懒加载页面组件
+const DashboardPage = lazy(() => import('@/pages/DashboardPage'));
+const TimestampPage = lazy(() => import('@/pages/TimestampPage'));
+const StorageCleanerPage = lazy(() => import('@/pages/StorageCleanerPage'));
+const QrCodePage = lazy(() => import('@/pages/QrCodePage'));
+const TextStatisticsPage = lazy(() => import('@/pages/TextStatisticsPage'));
+const JwtPage = lazy(() => import('@/pages/JwtPage'));
+
 /**
  * 功能配置接口
  *
@@ -42,8 +40,8 @@ export interface FeatureConfig {
     popup: React.ComponentType;
     /** 侧边栏模式组件 */
     sidepanel: React.ComponentType;
-    /** 独立窗口模式组件 */
-    detached: React.ComponentType;
+    /** 标签页模式组件 */
+    tab: React.ComponentType;
   };
 }
 
@@ -56,7 +54,7 @@ export const FEATURES: FeatureConfig[] = [
     components: {
       popup: DashboardPage,
       sidepanel: DashboardPage,
-      detached: DashboardPage,
+      tab: DashboardPage,
     },
   },
   {
@@ -69,7 +67,7 @@ export const FEATURES: FeatureConfig[] = [
     components: {
       popup: TimestampPage,
       sidepanel: TimestampPage,
-      detached: TimestampPage,
+      tab: TimestampPage,
     },
   },
   {
@@ -82,20 +80,7 @@ export const FEATURES: FeatureConfig[] = [
     components: {
       popup: StorageCleanerPage,
       sidepanel: StorageCleanerPage,
-      detached: StorageCleanerPage,
-    },
-  },
-  {
-    key: 'openUrl',
-    label: 'Open Url',
-    description: '打开当前选中的 URL',
-    themeColor: THEME_COLORS.purple,
-    icon: <LanguageIcon sx={{ fontSize: 20 }} />,
-    defaultVisible: true,
-    components: {
-      popup: OpenUrlPage,
-      sidepanel: OpenUrlPage,
-      detached: OpenUrlPage,
+      tab: StorageCleanerPage,
     },
   },
   {
@@ -108,57 +93,33 @@ export const FEATURES: FeatureConfig[] = [
     components: {
       popup: QrCodePage,
       sidepanel: QrCodePage,
-      detached: QrCodePage,
+      tab: QrCodePage,
     },
   },
   {
-    key: 'formMapping',
-    label: '表单映射',
-    description: '智能识别表单指纹，自定义填充逻辑',
-    themeColor: THEME_COLORS.primary,
+    key: 'textStatistics',
+    label: '文本统计',
+    description: '实时分析文本字符、单词及字节',
+    themeColor: THEME_COLORS.purple,
     icon: <DescriptionIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
     components: {
-      popup: FormMappingPage,
-      sidepanel: FormMappingPage,
-      detached: FormMappingPage,
+      popup: TextStatisticsPage,
+      sidepanel: TextStatisticsPage,
+      tab: TextStatisticsPage,
     },
   },
   {
-    key: 'formFill',
-    label: '智能填充',
-    description: '根据表单指纹填充表单数据',
-    themeColor: THEME_COLORS.primary,
-    icon: <DescriptionIcon sx={{ fontSize: 20 }} />,
+    key: 'jwt',
+    label: 'JWT 解析',
+    description: 'JSON Web Token 解码与查看',
+    themeColor: THEME_COLORS.indigo,
+    icon: <VpnKeyIcon sx={{ fontSize: 20 }} />,
     defaultVisible: true,
     components: {
-      popup: FormFillPage,
-      sidepanel: FormFillPage,
-      detached: FormFillPage,
-    },
-  },
-  {
-    key: 'formRecognizer',
-    label: '表单识别',
-    description: '智能识别表单指纹',
-    themeColor: THEME_COLORS.primary,
-    icon: <DescriptionIcon sx={{ fontSize: 20 }} />,
-    defaultVisible: true,
-    components: {
-      popup: FormRecognizerPage,
-      sidepanel: FormRecognizerPage,
-      detached: FormRecognizerPage,
-    },
-  },
-  {
-    key: 'openUrlViewer',
-    label: '查看',
-    description: '',
-    defaultVisible: false,
-    components: {
-      popup: OpenUrlViewerPage,
-      sidepanel: OpenUrlViewerPage,
-      detached: OpenUrlViewerPage,
+      popup: JwtPage,
+      sidepanel: JwtPage,
+      tab: JwtPage,
     },
   },
 ];
@@ -176,18 +137,16 @@ export function getAllFeatureKeys(): PageType[] {
 }
 
 export function getDefaultPageOrder(): PageType[] {
-  return FEATURES.filter((f) => f.key !== 'dashboard' && f.key !== 'openUrlViewer').map(
-    (f) => f.key,
-  );
+  return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key);
 }
 
-export function getEntryPointType(): 'popup' | 'sidepanel' | 'detached' {
+export function getEntryPointType(): 'popup' | 'sidepanel' | 'tab' {
   const pathname = window.location.pathname;
   if (pathname.includes('sidepanel')) {
     return 'sidepanel';
   }
-  if (new URLSearchParams(window.location.search).get('mode') === 'detached') {
-    return 'detached';
+  if (new URLSearchParams(window.location.search).get('mode') === 'tab') {
+    return 'tab';
   }
   return 'popup';
 }

config/pageTheme.ts

@@ -43,6 +43,12 @@ export const THEME_COLORS = {
   purpleDark: '#4a148c',
   purpleLight: '#9c27b0',
 
+  // 靛蓝色系
+  // #303f9f 在白底对比度 7.01:1 ✓
+  indigo: '#303f9f',
+  indigoDark: '#1a237e',
+  indigoLight: '#7986cb',
+
   // 中性色
   white: '#FFFFFF',
   black: '#000000',
@@ -107,57 +113,6 @@ export const timestampPageStyles = {
   buttonHover: `0 8px 24px ${alpha(THEME_COLORS.primary, 0.2)}`,
 } as const;
 
-/**
- * 打开 URL 页面样式
- */
-export const openUrlPageStyles = {
-  primaryColor: THEME_COLORS.purple,
-  primaryDark: THEME_COLORS.purpleDark,
-  INPUT_STYLE: {
-    '& .MuiOutlinedInput-root': {
-      bgcolor: 'background.paper',
-      borderRadius: 4,
-      transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
-      '&:hover fieldset': {
-        borderColor: 'grey.300',
-      },
-      '&:hover': { bgcolor: 'grey.50' },
-      '&.Mui-focused fieldset': {
-        borderColor: THEME_COLORS.purple,
-      },
-      '&.Mui-focused': {
-        bgcolor: '#fff',
-      },
-    },
-    '& .MuiInputBase-input': {
-      py: '14px',
-      px: 2,
-      fontSize: '0.85rem',
-      fontWeight: 600,
-      lineHeight: 1.4,
-    },
-    '& .MuiInputLabel-root': {
-      fontSize: '0.85rem',
-      fontWeight: 700,
-      color: 'text.secondary',
-      '&.Mui-focused': { color: THEME_COLORS.purple },
-    },
-  },
-  themeColor: THEME_COLORS.purple,
-  themeBg: alpha(THEME_COLORS.purple, 0.1),
-  buttonBg: alpha(THEME_COLORS.purple, 0.85),
-  buttonHover: `0 8px 24px ${alpha(THEME_COLORS.purple, 0.2)}`,
-  errorColor: THEME_COLORS.error,
-  errorBg: alpha(THEME_COLORS.error, 0.05),
-} as const;
-
-/**
- * 查看 URL 页面样式
- */
-export const openUrlViewerPageStyles = {
-  backgroundColor: '#ffffff',
-} as const;
-
 /**
  * 存储清理页面样式
  */
@@ -219,3 +174,32 @@ export const formRecognizerPageStyles = {
 export const formMappingPageStyles = {
   secondaryColor: THEME_COLORS.purple,
 } as const;
+
+/**
+ * 文本统计页面样式
+ */
+export const textStatisticsPageStyles = {
+  primaryColor: THEME_COLORS.purple,
+  cardBg: alpha(THEME_COLORS.purple, 0.04),
+  cardBorder: alpha(THEME_COLORS.purple, 0.1),
+} as const;
+
+/**
+ * JWT 解析工具页面样式
+ */
+export const jwtPageStyles = {
+  primaryColor: THEME_COLORS.indigo,
+  cardBg: alpha(THEME_COLORS.indigo, 0.04),
+  cardBorder: alpha(THEME_COLORS.indigo, 0.1),
+  INPUT_STYLE: {
+    '& .MuiOutlinedInput-root': {
+      bgcolor: 'background.paper',
+      borderRadius: 4,
+      fontSize: '0.85rem',
+      fontFamily: 'monospace',
+      transition: 'all 0.2s',
+      '&:hover': { bgcolor: 'grey.50' },
+      '&.Mui-focused': { bgcolor: '#fff' },
+    },
+  },
+} as const;

config/theme.ts

@@ -56,14 +56,19 @@ const theme = createTheme({
           '--sb-thumb-hover': 'rgba(0, 0, 0, 0.2)',
           '--sb-track-color': 'transparent',
         },
-        'html, body, #root': {
+        html: {
           margin: 0,
           padding: 0,
-          minWidth: '400px',
-          minHeight: '600px',
-          overflow: 'hidden',
+          width: '100%',
+          minHeight: '100%',
           backgroundColor: '#f5f5f5',
         },
+        'body, #root': {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          minHeight: '100%',
+        },
         // 针对 Popup 的特殊处理（如果需要固定宽高，可以在具体入口点或容器中处理，
         // 这里提供全局基础，具体尺寸在 App 容器中限制）
         body: {