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**: 更新单元测试以覆盖新增的工具函数及功能特性。
2026-05-03 17:06:32 +08:00
parent 8d36f21f1b
commit 57ea4d9858
80 changed files with 1909 additions and 15265 deletions
@@ -0,0 +1,59 @@
+import { Box } from '@mui/material';
+import { useRouter } from '@/providers/RouterProvider';
+import DashboardCard from '@/components/DashboardCard';
+import { getFeatureByKey } from '@/config/features';
+import type { PageType } from '@/types/storage';
+import { useCallback } from 'react';
+
+import { dashboardPageStyles } from '@/config/pageTheme';
+
+export default function DashboardPage() {
+  const { navigateTo, visiblePages, pageOrder } = useRouter();
+
+  const isVisible = (key: string) => visiblePages.includes(key as PageType);
+
+  const handleCardClick = useCallback(
+    (page: PageType) => {
+      navigateTo(page);
+    },
+    [navigateTo],
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: '1fr', // 弹出窗口或小屏幕保持单列
+          sm: 'repeat(auto-fill, minmax(300px, 1fr))', // 标签页大屏幕自适应多列
+        },
+        gap: 2,
+        p: 2,
+      }}
+    >
+      {pageOrder.map((key) => {
+        if (!isVisible(key)) return null;
+
+        const feature = getFeatureByKey(key);
+        if (!feature || !feature.icon || !feature.themeColor) return null;
+
+        // 适配 DashboardCard 组件，将 themeColor 映射到 colorCode
+        const cardConfig = {
+          title: feature.label,
+          description: feature.description,
+          colorCode: feature.themeColor,
+          icon: feature.icon,
+        };
+
+        return (
+          <DashboardCard
+            key={key}
+            config={cardConfig}
+            onClick={() => handleCardClick(key)}
+            cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
+          />
+        );
+      })}
+    </Box>
+  );
+}