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,91 @@
+import { Box, Container, CircularProgress } from '@mui/material';
+import Button from '@/components/Button';
+import { useSnackbar as useGlobalSnackbar } from '@/components/GlobalSnackbar';
+import StorageCleanerConfirm from '@/components/StorageCleanerConfirm';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+import { useStorageCleaner } from './useStorageCleaner';
+import DomainHeader from './components/DomainHeader';
+import StorageOptionsGrid from './components/StorageOptionsGrid';
+import AutoRefreshToggle from './components/AutoRefreshToggle';
+import ErrorDisplay from './components/ErrorDisplay';
+import CleaningResult from './components/CleaningResult';
+
+export default function StorageCleanerPage() {
+  const { showMessage } = useGlobalSnackbar();
+  const {
+    domain,
+    error,
+    isInitializing,
+    options,
+    sizes,
+    autoRefresh,
+    loading,
+    result,
+    showConfirm,
+    setShowConfirm,
+    totalSize,
+    allSelected,
+    someSelected,
+    handleAutoRefreshChange,
+    handleOptionChange,
+    handleSelectAll,
+    handleClean,
+  } = useStorageCleaner({ showMessage });
+
+  const isDisabled = (!someSelected && !allSelected) || loading;
+
+  if (isInitializing) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+        <CircularProgress size={24} color="warning" />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return <ErrorDisplay error={error} />;
+  }
+
+  return (
+    <Box>
+      <Container sx={{ py: 2 }}>
+        <DomainHeader domain={domain} totalSize={totalSize} />
+
+        <StorageOptionsGrid
+          options={options}
+          sizes={sizes}
+          allSelected={allSelected}
+          someSelected={someSelected}
+          onOptionChange={handleOptionChange}
+          onSelectAll={handleSelectAll}
+        />
+
+        <AutoRefreshToggle autoRefresh={autoRefresh} onChange={handleAutoRefreshChange} />
+
+        <Button
+          variant="contained"
+          onClick={() => setShowConfirm(true)}
+          sx={{
+            bgcolor: storageCleanerPageStyles.warningColor,
+            '&:hover': {
+              bgcolor: storageCleanerPageStyles.warningDark,
+            },
+          }}
+          disabled={isDisabled}
+          fullWidth
+        >
+          {loading ? '正在清理...' : '立即清理'}
+        </Button>
+
+        <CleaningResult result={result} />
+      </Container>
+
+      <StorageCleanerConfirm
+        open={showConfirm}
+        onClose={() => setShowConfirm(false)}
+        onConfirm={handleClean}
+        options={options}
+      />
+    </Box>
+  );
+}