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,51 @@
+import { Box, Switch, Typography } from '@mui/material';
+
+interface AutoRefreshToggleProps {
+  autoRefresh: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export default function AutoRefreshToggle({ autoRefresh, onChange }: AutoRefreshToggleProps) {
+  return (
+    <Box
+      sx={{
+        mb: 3,
+        p: 1.5,
+        borderRadius: 4,
+        bgcolor: 'background.paper',
+        border: '1px solid',
+        borderColor: 'grey.100',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
+        transition: 'all 0.2s',
+        '&:hover': {
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+        },
+      }}
+    >
+      <Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem', px: 1.2 }}>
+        清理后自动刷新页面
+      </Typography>
+      <Switch
+        size="small"
+        checked={autoRefresh}
+        onChange={(e) => onChange(e.target.checked)}
+        color="warning"
+        sx={{
+          '& .MuiSwitch-track': {
+            borderRadius: 20,
+          },
+          '& .MuiSwitch-thumb': {
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+            transition: 'all 0.2s',
+          },
+          '&:hover .MuiSwitch-thumb': {
+            transform: 'scale(1.1)',
+          },
+        }}
+      />
+    </Box>
+  );
+}
@@ -0,0 +1,36 @@
+import { Box, Alert } from '@mui/material';
+import type { CleaningResult } from '@/types/storage';
+import { formatCleaningResult } from '@/utils/storageCleaner';
+
+interface CleaningResultProps {
+  result: CleaningResult | null;
+}
+
+export default function CleaningResult({ result }: CleaningResultProps) {
+  if (!result) return null;
+
+  return (
+    <Box sx={{ mt: 3, animation: 'fadeIn 0.3s ease-in-out' }}>
+      <Alert
+        severity={result.success ? 'success' : 'error'}
+        sx={{
+          borderRadius: 3,
+          py: 1,
+          px: 2,
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+          '& .MuiAlert-message': {
+            fontSize: '0.8rem',
+            fontWeight: 600,
+            lineHeight: 1.4,
+          },
+          '& .MuiAlert-icon': {
+            fontSize: '1.2rem',
+            mr: 1,
+          },
+        }}
+      >
+        {result.success ? formatCleaningResult(result) : result.error || '清理失败'}
+      </Alert>
+    </Box>
+  );
+}
@@ -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 }}
+    />
+  );
+}
@@ -0,0 +1,62 @@
+import { Box, Container, Typography } from '@mui/material';
+import WarningIcon from '@mui/icons-material/Warning';
+
+interface ErrorDisplayProps {
+  error: string;
+}
+
+export default function ErrorDisplay({ error }: ErrorDisplayProps) {
+  return (
+    <Container
+      sx={{
+        py: 8,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: { xs: 'auto', sm: '400px' },
+        textAlign: 'center',
+      }}
+    >
+      <Box sx={{ width: '100%', maxWidth: 320 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 4,
+            p: 4,
+            boxShadow: '0 8px 24px rgba(244, 67, 54, 0.15)',
+            border: '1px solid rgba(244, 67, 54, 0.2)',
+            bgcolor: 'rgba(244, 67, 54, 0.05)',
+          }}
+        >
+          <WarningIcon sx={{ fontSize: 36, color: 'error.main', mb: 2 }} />
+          <Typography
+            variant="body1"
+            color="error.main"
+            sx={{
+              fontSize: '0.9rem',
+              fontWeight: 700,
+              lineHeight: 1.4,
+              mb: 3,
+            }}
+          >
+            {error}
+          </Typography>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              fontSize: '0.75rem',
+              fontWeight: 500,
+              lineHeight: 1.4,
+            }}
+          >
+            存储清理功能仅适用于标准网页
+          </Typography>
+        </Box>
+      </Box>
+    </Container>
+  );
+}
@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { Stack, Typography, Box, IconButton, Tooltip, Divider, alpha } from '@mui/material';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import CopyButton from '@/components/CopyButton';
+import { timestampPageStyles } from '@/config/pageTheme';
+import type { UnitType } from '@/config/pageTheme';
+import type { SnackbarOptions } from '@/components/GlobalSnackbar';
+
+interface LiveClockProps {
+  unit: UnitType;
+  onUseNow: (val: number) => void;
+  onUnitChange: (u: UnitType) => void;
+  showMessage?: (message: string, options?: SnackbarOptions) => void;
+}
+
+const LiveClock = React.memo(({ unit, onUseNow, onUnitChange, showMessage }: LiveClockProps) => {
+  const [now, setNow] = useState(() => Date.now());
+  const onUseNowRef = useRef(onUseNow);
+  const showMessageRef = useRef(showMessage);
+
+  useEffect(() => {
+    onUseNowRef.current = onUseNow;
+    showMessageRef.current = showMessage;
+  }, [onUseNow, showMessage]);
+
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, []);
+
+  const displayVal = useMemo(
+    () => String(Math.floor(now / (unit === 'ms' ? 1 : 1000))),
+    [now, unit],
+  );
+
+  const handleUseNow = useCallback(() => {
+    onUseNowRef.current(now);
+    showMessageRef.current?.('已使用当前时间戳', { severity: 'success' });
+  }, [now, showMessageRef]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        gap: 1.5,
+        p: 1.8,
+        mb: 2.5,
+        bgcolor: alpha(timestampPageStyles.primaryColor, 0.04),
+        borderRadius: 4,
+        border: '1px solid',
+        borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
+      }}
+    >
+      <Stack spacing={0.5} sx={{ minWidth: { xs: 100, sm: 120 } }}>
+        <Typography
+          variant="caption"
+          sx={{
+            color: timestampPageStyles.primaryColor,
+            fontWeight: 800,
+            fontSize: '0.6rem',
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+          }}
+        >
+          当前时间戳
+        </Typography>
+        <Typography
+          variant="subtitle2"
+          sx={{
+            fontWeight: 800,
+            color: timestampPageStyles.primaryColor,
+            fontFamily: 'monospace',
+            fontSize: { xs: '1.1rem', sm: '1.2rem' },
+            letterSpacing: '-0.5px',
+            lineHeight: 1.2,
+          }}
+        >
+          {displayVal}
+        </Typography>
+      </Stack>
+
+      <Stack direction="row" spacing={1} alignItems="center" sx={{ flexShrink: 0 }}>
+        {/* 胶囊式单位切换器 */}
+        <Box
+          sx={{
+            display: 'flex',
+            p: 0.4,
+            bgcolor: alpha(timestampPageStyles.primaryColor, 0.08),
+            borderRadius: 2.5,
+            border: '1px solid',
+            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
+          }}
+        >
+          {(['ms', 's'] as const).map((u) => (
+            <Box
+              key={u}
+              onClick={() => onUnitChange(u)}
+              sx={{
+                px: { xs: 1, sm: 1.2 },
+                py: 0.35,
+                borderRadius: 2,
+                cursor: 'pointer',
+                fontSize: '0.65rem',
+                fontWeight: 900,
+                transition: 'all 0.2s',
+                bgcolor: unit === u ? '#fff' : 'transparent',
+                color: unit === u ? 'primary.main' : alpha(timestampPageStyles.primaryColor, 0.4),
+                boxShadow: unit === u ? '0 2px 6px rgba(33, 150, 243, 0.2)' : 'none',
+              }}
+            >
+              {u.toUpperCase()}
+            </Box>
+          ))}
+        </Box>
+
+        <Divider
+          orientation="vertical"
+          flexItem
+          sx={{ mx: 0.5, my: 1, borderColor: alpha(timestampPageStyles.primaryColor, 0.1) }}
+        />
+
+        <Stack direction="row" spacing={0.5}>
+          <Tooltip title="填充到下方">
+            <IconButton
+              size="small"
+              onClick={handleUseNow}
+              sx={{
+                color: timestampPageStyles.primaryColor,
+                bgcolor: '#fff',
+                boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+                '&:hover': { bgcolor: timestampPageStyles.primaryColor, color: '#fff' },
+              }}
+            >
+              <AccessTimeIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          <CopyButton
+            text={displayVal}
+            tooltip="复制时间戳"
+            size="small"
+            color={timestampPageStyles.primaryColor}
+            showMessage={showMessage}
+          />
+        </Stack>
+      </Stack>
+    </Box>
+  );
+});
+
+LiveClock.displayName = 'LiveClock';
+
+export default LiveClock;
@@ -0,0 +1,107 @@
+import { Box, Checkbox, Typography } from '@mui/material';
+import { formatSize } from '@/utils/storageCleaner';
+import { storageCleanerPageStyles } from '@/config/pageTheme';
+
+interface OptionItemProps {
+  label: string;
+  checked: boolean;
+  size?: number;
+  isCount?: boolean;
+  onChange: () => void;
+}
+
+export default function OptionItem({
+  label,
+  checked,
+  size,
+  isCount = false,
+  onChange,
+}: OptionItemProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        py: 1,
+        px: { xs: 1, sm: 1.5 },
+        borderRadius: 3,
+        transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+        bgcolor: checked ? 'rgba(255, 152, 0, 0.05)' : 'transparent',
+        border: `1px solid ${checked ? 'rgba(255, 152, 0, 0.2)' : 'transparent'}`,
+        '&:hover': {
+          bgcolor: checked ? 'rgba(255, 152, 0, 0.1)' : 'rgba(0, 0, 0, 0.02)',
+          transform: 'translateY(-1px)',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+        },
+      }}
+    >
+      <Box sx={{ flex: 1, minWidth: 0, mr: 1.5 }}>
+        <Typography
+          variant="body2"
+          fontWeight={700}
+          color={checked ? storageCleanerPageStyles.warningColor : 'text.primary'}
+          sx={{
+            fontSize: '0.75rem',
+            display: 'block',
+            lineHeight: 1.2,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            transition: 'color 0.2s',
+          }}
+        >
+          {label}
+        </Typography>
+        {size !== undefined && size > 0 ? (
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'text.secondary',
+              fontSize: '0.65rem',
+              fontWeight: 600,
+              display: 'block',
+              mt: 0.3,
+              lineHeight: 1,
+              whiteSpace: 'nowrap',
+              opacity: 0.8,
+            }}
+          >
+            {isCount ? `${size} 个` : formatSize(size)}
+          </Typography>
+        ) : (
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'grey.400',
+              fontSize: '0.65rem',
+              fontWeight: 500,
+              display: 'block',
+              mt: 0.3,
+              lineHeight: 1,
+              fontStyle: 'italic',
+            }}
+          >
+            无数据
+          </Typography>
+        )}
+      </Box>
+      <Checkbox
+        size="small"
+        checked={checked}
+        onChange={onChange}
+        color="warning"
+        sx={{
+          p: 0.6,
+          '& .MuiSvgIcon-root': {
+            fontSize: 18,
+            transition: 'transform 0.2s',
+          },
+          '&:hover .MuiSvgIcon-root': {
+            transform: 'scale(1.1)',
+          },
+        }}
+      />
+    </Box>
+  );
+}
@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react';
+import { Typography, Box, Fade, Stack, alpha } from '@mui/material';
+import dayjs from '@/utils/dayjs';
+import CopyButton from '@/components/CopyButton';
+import { DATE_FORMAT, timestampPageStyles } from '@/config/pageTheme';
+import type { UnitType } from '@/config/pageTheme';
+import type { SnackbarOptions } from '@/components/GlobalSnackbar';
+
+interface ResultViewProps {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  unit: UnitType;
+  zone: string;
+  showMessage?: (message: string, options?: SnackbarOptions) => void;
+}
+
+const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: ResultViewProps) => {
+  const extraInfo = useMemo(() => {
+    if (!result) return null;
+    const d =
+      mode === 'ts2dt'
+        ? dayjs(result, DATE_FORMAT).tz(zone)
+        : unit === 'ms'
+          ? dayjs(Number(result))
+          : dayjs.unix(Number(result));
+
+    return {
+      relative: d.fromNow(),
+      iso: d.toISOString(),
+      utc: d.utc().format(DATE_FORMAT) + ' UTC',
+    };
+  }, [result, mode, zone, unit]);
+
+  if (!result) return null;
+
+  return (
+    <Fade in={!!result}>
+      <Box sx={{ mt: 3, pt: 2.5, borderTop: '1px solid', borderColor: 'grey.50' }}>
+        <Typography
+          variant="caption"
+          sx={{
+            color: 'text.secondary',
+            mb: 1.2,
+            display: 'block',
+            fontWeight: 800,
+            fontSize: '0.7rem',
+          }}
+        >
+          转换结果
+        </Typography>
+
+        <Box
+          sx={{
+            bgcolor: alpha(timestampPageStyles.primaryColor, 0.05),
+            p: 2,
+            borderRadius: 4,
+            position: 'relative',
+            mb: 2.5,
+            border: '1px solid',
+            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Typography
+            variant="body1"
+            sx={{
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              color: timestampPageStyles.primaryColor,
+              wordBreak: 'break-all',
+              pr: 4,
+              fontSize: '1rem',
+            }}
+          >
+            {result}
+          </Typography>
+          <CopyButton
+            text={result}
+            tooltip="复制结果"
+            size="small"
+            color={timestampPageStyles.primaryColor}
+            showMessage={showMessage}
+          />
+        </Box>
+
+        <Stack
+          spacing={1.2}
+          sx={{
+            bgcolor: alpha(timestampPageStyles.primaryColor, 0.05),
+            p: 2,
+            borderRadius: 4,
+            border: '1px solid',
+            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
+          }}
+        >
+          {[
+            { label: '相对时间', value: extraInfo?.relative },
+            { label: 'ISO 8601', value: extraInfo?.iso },
+            { label: 'UTC 时间', value: extraInfo?.utc },
+          ].map((item) => (
+            <Box
+              key={item.label}
+              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+            >
+              <Typography
+                variant="caption"
+                sx={{ color: 'text.disabled', fontWeight: 700, fontSize: '0.65rem', pr: 4 }}
+              >
+                {item.label}
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    fontFamily: 'monospace',
+                    color: timestampPageStyles.primaryColor,
+                    fontWeight: 600,
+                    fontSize: '0.65rem',
+                  }}
+                >
+                  {item.value}
+                </Typography>
+                {item.value && (
+                  <CopyButton
+                    text={item.value}
+                    tooltip="复制"
+                    size="small"
+                    color={timestampPageStyles.primaryColor}
+                    showMessage={showMessage}
+                  />
+                )}
+              </Box>
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </Fade>
+  );
+});
+
+ResultView.displayName = 'ResultView';
+
+export default ResultView;
@@ -0,0 +1,136 @@
+import { Box, Checkbox, Divider, Grid, Typography } from '@mui/material';
+import type { StorageCleanerOptions } from '@/types/storage';
+import OptionItem from './OptionItem';
+
+interface StorageOptionsGridProps {
+  options: StorageCleanerOptions;
+  sizes: Record<string, number>;
+  allSelected: boolean;
+  someSelected: boolean;
+  onOptionChange: (key: keyof StorageCleanerOptions) => void;
+  onSelectAll: (checked: boolean) => void;
+}
+
+export default function StorageOptionsGrid({
+  options,
+  sizes,
+  allSelected,
+  someSelected,
+  onOptionChange,
+  onSelectAll,
+}: StorageOptionsGridProps) {
+  return (
+    <Box
+      sx={{
+        mb: 3,
+        border: '1px solid',
+        borderColor: 'grey.100',
+        borderRadius: 4,
+        bgcolor: 'background.paper',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
+        transition: 'all 0.2s',
+        overflow: 'hidden',
+        '&:hover': {
+          boxShadow: '0 6px 16px rgba(0, 0, 0, 0.08)',
+        },
+      }}
+    >
+      <Box sx={{ p: 1.2 }}>
+        <Grid container spacing={1.5}>
+          <Grid size={6}>
+            <OptionItem
+              label="LocalStorage"
+              checked={options.localStorage}
+              size={sizes.localStorage}
+              onChange={() => onOptionChange('localStorage')}
+            />
+          </Grid>
+          <Grid size={6}>
+            <OptionItem
+              label="Session Storage"
+              checked={options.sessionStorage}
+              size={sizes.sessionStorage}
+              onChange={() => onOptionChange('sessionStorage')}
+            />
+          </Grid>
+          <Grid size={6}>
+            <OptionItem
+              label="IndexedDB"
+              checked={options.indexedDB}
+              size={sizes.indexedDB}
+              onChange={() => onOptionChange('indexedDB')}
+            />
+          </Grid>
+          <Grid size={6}>
+            <OptionItem
+              label="Cookies"
+              checked={options.cookies}
+              size={sizes.cookies}
+              onChange={() => onOptionChange('cookies')}
+            />
+          </Grid>
+          <Grid size={6}>
+            <OptionItem
+              label="Cache Storage"
+              checked={options.cacheStorage}
+              size={sizes.cacheStorage}
+              isCount
+              onChange={() => onOptionChange('cacheStorage')}
+            />
+          </Grid>
+          <Grid size={6}>
+            <OptionItem
+              label="Service Workers"
+              checked={options.serviceWorkers}
+              size={sizes.serviceWorkers}
+              isCount
+              onChange={() => onOptionChange('serviceWorkers')}
+            />
+          </Grid>
+        </Grid>
+      </Box>
+      <Divider sx={{ mx: 0, borderColor: 'grey.100' }} />
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          px: 2.7,
+          py: 0.8,
+          borderBottomLeftRadius: 4,
+          borderBottomRightRadius: 4,
+          transition: 'all 0.2s',
+          '&:hover': {
+            bgcolor: 'rgba(0, 0, 0, 0.04)',
+          },
+        }}
+      >
+        <Typography
+          variant="body2"
+          fontWeight={700}
+          sx={{ color: 'text.secondary', fontSize: '0.7rem', px: 0 }}
+        >
+          全选所有项
+        </Typography>
+        <Checkbox
+          size="small"
+          checked={allSelected}
+          indeterminate={someSelected}
+          onChange={(e) => onSelectAll(e.target.checked)}
+          color="warning"
+          sx={{
+            p: 0.6,
+            mr: 0,
+            '& .MuiSvgIcon-root': {
+              fontSize: 18,
+              transition: 'transform 0.2s',
+            },
+            '&:hover .MuiSvgIcon-root': {
+              transform: 'scale(1.1)',
+            },
+          }}
+        />
+      </Box>
+    </Box>
+  );
+}