Develop (#15)

* docs: 添加组件文档注释和类型导入 refactor: 统一使用 SnackbarOptions 类型 style: 优化导入语句顺序和格式 * refactor: 简化假数据生成器中的faker导入和使用 Co-authored-by: Copilot <copilot@github.com> * feat(form-recognizer): 增强表单识别功能并优化UI交互 - 新增字段类型偏好设置功能，支持按域名保存字段类型 - 重构FieldList组件，改进字段选择和类型修改体验 - 添加字段定位闪烁功能，便于在页面上快速找到对应字段 - 优化表单填充逻辑，支持单个字段覆盖默认填充模式 - 移除独立的侧边栏页面，统一使用主页面组件 - 改进useStorageState钩子，增加加载状态管理和防抖处理 * refactor: 移除未使用的组件文件 * refactor(页面头部): 提取通用 PageHeader 组件并替换各页面头部实现重构各页面头部为统一的 PageHeader 组件，提高代码复用性和维护性 * style(组件): 调整自动刷新开关和存储选项网格的样式优化自动刷新开关的文本内边距，重构存储选项网格的布局结构，调整间距和边框样式 * style(ui): 调整时间戳页面和结果视图的样式 - 为时区选择器添加圆角 - 优化结果视图的布局和对齐方式 - 调整结果项的内边距和文本样式 * ci(workflow): 移除Firefox测试以简化CI流程仅保留Chrome浏览器的构建步骤，减少CI运行时间和资源消耗
2026-04-28 08:56:47 +08:00
parent fb5f98dd3b
commit c039475119
29 changed files with 908 additions and 1317 deletions
@@ -25,7 +25,7 @@ export default function AutoRefreshToggle({ autoRefresh, onChange }: AutoRefresh
        },
      }}
    >
-      <Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem' }}>
+      <Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem', px: 1.2 }}>
        清理后自动刷新页面
      </Typography>
      <Switch
@@ -1,85 +1,84 @@
-import { Box, Stack, Typography } from '@mui/material';
+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 (
-    <Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 3 }}>
-      <Box
-        sx={{
-          p: 1.2,
-          borderRadius: 3,
-          bgcolor: 'rgba(255, 152, 0, 0.1)',
-          color: storageCleanerPageStyles.warningColor,
-          display: 'flex',
-          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)',
-          },
-        }}
-      >
-        <StorageIcon sx={{ fontSize: 22 }} />
-      </Box>
-      <Box sx={{ flex: 1 }}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center">
-          <Typography
-            variant="h6"
-            fontWeight={900}
+    <PageHeader
+      icon={<StorageIcon sx={{ fontSize: 22 }} />}
+      iconColor={storageCleanerPageStyles.warningColor}
+      title="存储清理"
+      subtitle={domain || '加载中...'}
+      badge={
+        totalSize > 0 ? (
+          <Box
            sx={{
-              letterSpacing: '-0.5px',
-              lineHeight: 1.2,
-              fontSize: '1rem',
-              color: 'text.primary',
+              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)',
+              },
            }}
          >
-            存储清理
-          </Typography>
-          {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>
-          )}
-        </Stack>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          sx={{
-            fontWeight: 600,
-            display: 'block',
-            maxWidth: 240,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            mt: 0.3,
-            fontSize: '0.75rem',
-          }}
-        >
-          {domain || '加载中...'}
-        </Typography>
-      </Box>
-    </Stack>
+            已占用 {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 }}
+    />
  );
 }
@@ -4,12 +4,13 @@ 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?: { severity: 'success' | 'error' }) => void;
+  showMessage?: (message: string, options?: SnackbarOptions) => void;
 }

 const LiveClock = React.memo(({ unit, onUseNow, onUnitChange, showMessage }: LiveClockProps) => {
@@ -4,13 +4,14 @@ 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?: { severity: 'success' | 'error' }) => void;
+  showMessage?: (message: string, options?: SnackbarOptions) => void;
 }

 const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: ResultViewProps) => {
@@ -57,6 +58,9 @@ const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: Result
            mb: 2.5,
            border: '1px solid',
            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
          }}
        >
          <Typography
@@ -77,12 +81,6 @@ const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: Result
            tooltip="复制结果"
            size="small"
            color={timestampPageStyles.primaryColor}
-            style={{
-              position: 'absolute',
-              right: 8,
-              top: '50%',
-              transform: 'translateY(-50%)',
-            }}
            showMessage={showMessage}
          />
        </Box>
@@ -95,7 +93,6 @@ const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: Result
            borderRadius: 4,
            border: '1px solid',
            borderColor: alpha(timestampPageStyles.primaryColor, 0.1),
-            mt: 2,
          }}
        >
          {[
@@ -105,11 +102,11 @@ const ResultView = React.memo(({ result, mode, unit, zone, showMessage }: Result
          ].map((item) => (
            <Box
              key={item.label}
-              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1 }}
+              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
            >
              <Typography
                variant="caption"
-                sx={{ color: 'text.disabled', fontWeight: 700, fontSize: '0.65rem' }}
+                sx={{ color: 'text.disabled', fontWeight: 700, fontSize: '0.65rem', pr: 4 }}
              >
                {item.label}
              </Typography>
@@ -26,77 +26,79 @@ export default function StorageOptionsGrid({
        border: '1px solid',
        borderColor: 'grey.100',
        borderRadius: 4,
-        p: 1.2,
        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)',
        },
      }}
    >
-      <Grid container spacing={1.5}>
-        <Grid size={6}>
-          <OptionItem
-            label="LocalStorage"
-            checked={options.localStorage}
-            size={sizes.localStorage}
-            onChange={() => onOptionChange('localStorage')}
-          />
+      <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>
-        <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>
-      <Divider sx={{ my: 1.2, borderColor: 'grey.100' }} />
+      </Box>
+      <Divider sx={{ mx: 0, borderColor: 'grey.100' }} />
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
-          px: 1.5,
-          py: 0.6,
-          bgcolor: 'rgba(0, 0, 0, 0.02)',
-          borderRadius: 2,
+          px: 2.7,
+          py: 0.8,
+          borderBottomLeftRadius: 4,
+          borderBottomRightRadius: 4,
          transition: 'all 0.2s',
          '&:hover': {
            bgcolor: 'rgba(0, 0, 0, 0.04)',
@@ -106,7 +108,7 @@ export default function StorageOptionsGrid({
        <Typography
          variant="body2"
          fontWeight={700}
-          sx={{ color: 'text.secondary', fontSize: '0.7rem' }}
+          sx={{ color: 'text.secondary', fontSize: '0.7rem', px: 0 }}
        >
          全选所有项
        </Typography>
@@ -118,6 +120,7 @@ export default function StorageOptionsGrid({
          color="warning"
          sx={{
            p: 0.6,
+            mr: 0,
            '& .MuiSvgIcon-root': {
              fontSize: 18,
              transition: 'transform 0.2s',