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,84 @@
+import { Box } from '@mui/material';
+import StorageIcon from '@mui/icons-material/Storage';
+import PageHeader from '@/components/PageHeader';
+import { formatSize } from '@/utils/storageCleaner';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+
+/**
+ * DomainHeader 组件属性接口
+ */
+interface DomainHeaderProps {
+  /** 当前域名 */
+  domain: string;
+  /** 已占用的存储大小（字节） */
+  totalSize: number;
+}
+
+/**
+ * DomainHeader - 存储清理页面标题栏组件
+ *
+ * 使用 PageHeader 组件构建，显示域名和已占用存储空间大小
+ *
+ * @example
+ * ```tsx
+ * <DomainHeader
+ *   domain="example.com"
+ *   totalSize={1048576}
+ * />
+ * ```
+ */
+export default function DomainHeader({ domain, totalSize }: DomainHeaderProps) {
+  return (
+    <PageHeader
+      icon={<StorageIcon sx={{ fontSize: 22 }} />}
+      iconColor={storageCleanerPageStyles.warningColor}
+      title="存储清理"
+      subtitle={domain || '加载中...'}
+      badge={
+        totalSize > 0 ? (
+          <Box
+            sx={{
+              bgcolor: 'rgba(255, 152, 0, 0.15)',
+              color: storageCleanerPageStyles.warningColor,
+              px: 1.5,
+              py: 0.3,
+              borderRadius: 2,
+              fontWeight: 800,
+              fontSize: '0.7rem',
+              boxShadow: '0 2px 4px rgba(255, 152, 0, 0.2)',
+              transition: 'all 0.2s',
+              '&:hover': {
+                bgcolor: 'rgba(255, 152, 0, 0.25)',
+              },
+            }}
+          >
+            已占用 {formatSize(totalSize)}
+          </Box>
+        ) : null
+      }
+      iconSx={{
+        p: 1.2,
+        borderRadius: 3,
+        boxShadow: '0 2px 8px rgba(255, 152, 0, 0.15)',
+        transition: 'all 0.2s',
+        '&:hover': {
+          bgcolor: 'rgba(255, 152, 0, 0.15)',
+          transform: 'scale(1.05)',
+        },
+      }}
+      titleSx={{
+        fontSize: '1rem',
+      }}
+      subtitleSx={{
+        display: 'block',
+        maxWidth: 240,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        mt: 0.3,
+        fontSize: '0.75rem',
+      }}
+      sx={{ mb: 3 }}
+    />
+  );
+}