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

pages/TextStatisticsPage.tsx

@@ -0,0 +1,125 @@
+import { useState, useMemo } from 'react';
+import { Box, Container, TextField, Grid, Paper, Typography, alpha } from '@mui/material';
+import PageHeader from '@/components/PageHeader';
+import DescriptionIcon from '@mui/icons-material/Description';
+import { getTextStats, formatByteSize } from '@/utils/textStatistics';
+import { textStatisticsPageStyles } from '@/config/pageTheme';
+
+/**
+ * 文本统计页面组件
+ *
+ * 提供实时的文本分析功能，包括字符数、单词数、行数和字节大小。
+ */
+export default function TextStatisticsPage() {
+  const [text, setText] = useState('');
+
+  // 实时计算统计信息，使用 useMemo 优化性能
+  // 对于 10,000 字符以上的文本，Intl.Segmenter 也能保持良好的性能
+  const stats = useMemo(() => getTextStats(text), [text]);
+
+  const statItems = [
+    { label: '字符数', value: stats.characters },
+    { label: '单词数', value: stats.words },
+    { label: '行数', value: stats.lines },
+    { label: '字节大小', value: formatByteSize(stats.bytes) },
+  ];
+
+  return (
+    <Box>
+      <Container sx={{ p: 2 }}>
+        {/* 头部区域 */}
+        <PageHeader
+          title="文本统计"
+          subtitle="实时分析文本的字符、单词、行数及字节大小"
+          icon={<DescriptionIcon />}
+          iconColor={textStatisticsPageStyles.primaryColor}
+        />
+
+        {/* 文本输入区域 */}
+        <TextField
+          multiline
+          fullWidth
+          minRows={8}
+          maxRows={15}
+          placeholder="在此输入或粘贴文本..."
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          sx={{
+            mb: 3,
+            '& .MuiOutlinedInput-root': {
+              borderRadius: 4,
+              bgcolor: 'grey.50',
+              transition: 'all 0.2s',
+              '& fieldset': {
+                borderColor: 'grey.200',
+              },
+              '&:hover fieldset': {
+                borderColor: 'grey.300',
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: textStatisticsPageStyles.primaryColor,
+              },
+            },
+            '& .MuiInputBase-input': {
+              fontSize: '0.9rem',
+              lineHeight: 1.6,
+            },
+          }}
+        />
+
+        {/* 统计结果展示区域 */}
+        <Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center' }}>
+          {statItems.map((item) => (
+            <Grid sx={{ xs: 12, md: 3 }} key={item.label}>
+              <Paper
+                elevation={0}
+                sx={{
+                  p: 2,
+                  textAlign: 'center',
+                  borderRadius: 4,
+                  bgcolor: textStatisticsPageStyles.cardBg,
+                  border: '1px solid',
+                  borderColor: textStatisticsPageStyles.cardBorder,
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', // 平滑的切换动画
+                  minHeight: { xs: '64px', md: '90px' },
+                  display: 'flex',
+                  flexDirection: { xs: 'row', md: 'column' }, // 小屏幕横向排列提高空间利用率
+                  alignItems: 'center',
+                  justifyContent: { xs: 'space-between', md: 'center' },
+                  px: { xs: 3, md: 2 },
+                  '&:hover': {
+                    transform: 'translateY(-2px)',
+                    boxShadow: () =>
+                      `0 4px 12px ${alpha(textStatisticsPageStyles.primaryColor, 0.15)}`,
+                    borderColor: textStatisticsPageStyles.primaryColor,
+                  },
+                  lineHeight: 1.6,
+                  fontSize: '0.9rem',
+                  fontWeight: 600,
+                }}
+              >
+                <Typography
+                  color="text.secondary"
+                  sx={{
+                    mb: { xs: 0, md: 0.5 },
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {item.label}
+                </Typography>
+                <Typography
+                  sx={{
+                    color: textStatisticsPageStyles.primaryColor, // 高亮显示核心数值
+                    wordBreak: 'break-all',
+                  }}
+                >
+                  {item.value}
+                </Typography>
+              </Paper>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </Box>
+  );
+}