rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance form recognition, optimize UI, and unify components (#19)

Browse Source 
- **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**: 更新单元测试以覆盖新增的工具函数及功能特性。
This commit is contained in:
LingandRX
2026-05-03 17:06:32 +08:00
committed by GitHub
parent 8d36f21f1b
commit 57ea4d9858
80 changed files with 1909 additions and 15265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/DashboardPage.tsx
+59
View File
@@ -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>
);
}
pages/JwtPage.tsx
+171
View File
@@ -0,0 +1,171 @@
import { useState, useMemo } from 'react';
import { TextField, Stack, Box, Container, Typography, Paper } from '@mui/material';
import { useSnackbar } from '@/components/GlobalSnackbar';
import VpnKeyIcon from '@mui/icons-material/VpnKey';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import PageHeader from '@/components/PageHeader';
import { jwtPageStyles } from '@/config/pageTheme';
import { parseJwt, formatJson } from '@/utils/jwt';
import CopyButton from '@/components/CopyButton';
interface SectionProps {
title: string;
content: unknown;
raw: string;
color: string;
}
const Section = ({ title, content, color }: SectionProps) => (
<Paper
variant="outlined"
sx={{
p: 2,
borderRadius: 3,
borderColor: `${color}40`,
bgcolor: `${color}05`,
position: 'relative',
}}
>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 800, color: color, letterSpacing: 0.5 }}>
{title}
</Typography>
<Box sx={{ display: 'flex', gap: 0.5 }}>
<CopyButton text={JSON.stringify(content)} size="small" />
</Box>
</Box>
<Box
component="pre"
sx={{
m: 0,
p: 1.5,
bgcolor: 'rgba(255,255,255,0.6)',
borderRadius: 2,
fontSize: '0.8rem',
fontFamily: 'monospace',
overflowX: 'auto',
whiteSpace: 'pre-wrap',
wordBreak: 'break-all',
border: '1px solid rgba(0,0,0,0.05)',
}}
>
{content ? formatJson(content) : '无法解析'}
</Box>
</Paper>
);
export default function JwtPage() {
useSnackbar();
const [jwtInput, setJwtInput] = useState('');
const result = useMemo(() => {
if (!jwtInput.trim()) {
return null;
}
return parseJwt(jwtInput);
}, [jwtInput]);
return (
<Box>
<Container sx={{ p: 2 }}>
<PageHeader title="JWT 解析" subtitle="JSON Web Token 解码与查看" icon={<VpnKeyIcon />} />
<Stack spacing={2.5}>
{/* Input Area */}
<TextField
multiline
rows={4}
placeholder="在此粘贴 JWT 令牌 (Encoded JWT)..."
value={jwtInput}
onChange={(e) => {
// 自动去除 Bearer 前缀及首尾空白字符/换行
const val = e.target.value.replace(/^Bearer\s*/i, '').trim();
setJwtInput(val);
}}
fullWidth
sx={jwtPageStyles.INPUT_STYLE}
/>
{result?.error && (
<Paper
sx={{
p: 2,
bgcolor: 'error.lighter',
color: 'error.main',
borderRadius: 3,
display: 'flex',
alignItems: 'flex-start',
gap: 1.5,
border: '1px solid',
borderColor: 'error.light',
}}
>
<ErrorOutlineIcon sx={{ mt: 0.2 }} fontSize="small" />
<Typography variant="body2" sx={{ fontWeight: 600 }}>
{result.error}
</Typography>
</Paper>
)}
{result && !result.error && (
<Stack spacing={2}>
<Section
title="HEADER: 算法 & 令牌类型"
content={result.header}
raw={result.raw.header}
color="#fb015b" // JWT.io Header Color
/>
<Section
title="PAYLOAD: 数据"
content={result.payload}
raw={result.raw.payload}
color="#d63aff" // JWT.io Payload Color
/>
<Paper
variant="outlined"
sx={{
p: 2,
borderRadius: 3,
borderColor: 'primary.light',
bgcolor: 'primary.lighter',
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mb: 1,
}}
>
<Typography
variant="subtitle2"
sx={{ fontWeight: 800, color: '#00b9f1', letterSpacing: 0.5 }}
>
签名
</Typography>
<CopyButton text={JSON.stringify(result.raw.signature)} size="small" />
</Box>
<Typography
variant="body2"
sx={{
fontFamily: 'monospace',
fontSize: '0.8rem',
wordBreak: 'break-all',
color: 'text.secondary',
bgcolor: 'rgba(255,255,255,0.6)',
p: 1.5,
borderRadius: 2,
border: '1px solid rgba(0,0,0,0.05)',
}}
>
{result.signature || 'No Signature'}
</Typography>
</Paper>
</Stack>
)}
</Stack>
</Container>
</Box>
);
}
pages/QrCodePage.tsx
+62
View File
@@ -0,0 +1,62 @@
import { Box, Stack, Container, CircularProgress } from '@mui/material';
import QrCodeIcon from '@mui/icons-material/QrCode';
import { useSnackbar as useGlobalSnackbar } from '@/components/GlobalSnackbar';
import UrlToQrCodeSection from '@/components/UrlToQrCodeSection';
import QrCodeToUrlSection from '@/components/QrCodeToUrlSection';
import { useStorageState } from '@/utils/useStorageState';
import { qrCodePageStyles } from '@/config/pageTheme';
import PageHeader from '@/components/PageHeader';
export default function QrCodePage() {
const { showMessage } = useGlobalSnackbar();
// 使用自定义钩子管理展开状态
const [urlExpanded, setUrlExpanded, urlInitialized] = useStorageState('qrCode/urlExpanded', true);
const [qrExpanded, setQrExpanded, qrInitialized] = useStorageState('qrCode/qrExpanded', false);
// 初始化未完成时显示加载状态
if (!urlInitialized || !qrInitialized) {
return (
<Container
sx={{
py: 4,
maxWidth: 400,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 200,
}}
>
<CircularProgress />
</Container>
);
}
return (
<Box>
<Container sx={{ py: 2, maxWidth: 400 }}>
<PageHeader
title="二维码工具"
subtitle="生成和解析二维码"
icon={<QrCodeIcon />}
iconColor={qrCodePageStyles.primaryColor}
sx={{ mb: 2.5 }}
/>
<Stack spacing={3}>
<UrlToQrCodeSection
expanded={urlExpanded}
onExpandedChange={setUrlExpanded}
showMessage={showMessage}
/>
<QrCodeToUrlSection
expanded={qrExpanded}
onExpandedChange={setQrExpanded}
showMessage={showMessage}
/>
</Stack>
</Container>
</Box>
);
}
pages/StorageCleanerPage.tsx
+91
View File
@@ -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>
);
}
pages/TextStatisticsPage.tsx
+125
View File
@@ -0,0 +1,125 @@
import { useState, useMemo } from 'react';
import { Box, Container, TextField, Grid, Paper, Typography, alpha } from '@mui/material';
import PageHeader from '@/components/PageHeader';
import DescriptionIcon from '@mui/icons-material/Description';
import { getTextStats, formatByteSize } from '@/utils/textStatistics';
import { textStatisticsPageStyles } from '@/config/pageTheme';
/**
* 文本统计页面组件
*
* 提供实时的文本分析功能，包括字符数、单词数、行数和字节大小。
*/
export default function TextStatisticsPage() {
const [text, setText] = useState('');
// 实时计算统计信息，使用 useMemo 优化性能
// 对于 10,000 字符以上的文本，Intl.Segmenter 也能保持良好的性能
const stats = useMemo(() => getTextStats(text), [text]);
const statItems = [
{ label: '字符数', value: stats.characters },
{ label: '单词数', value: stats.words },
{ label: '行数', value: stats.lines },
{ label: '字节大小', value: formatByteSize(stats.bytes) },
];
return (
<Box>
<Container sx={{ p: 2 }}>
{/* 头部区域 */}
<PageHeader
title="文本统计"
subtitle="实时分析文本的字符、单词、行数及字节大小"
icon={<DescriptionIcon />}
iconColor={textStatisticsPageStyles.primaryColor}
/>
{/* 文本输入区域 */}
<TextField
multiline
fullWidth
minRows={8}
maxRows={15}
placeholder="在此输入或粘贴文本..."
value={text}
onChange={(e) => setText(e.target.value)}
sx={{
mb: 3,
'& .MuiOutlinedInput-root': {
borderRadius: 4,
bgcolor: 'grey.50',
transition: 'all 0.2s',
'& fieldset': {
borderColor: 'grey.200',
},
'&:hover fieldset': {
borderColor: 'grey.300',
},
'&.Mui-focused fieldset': {
borderColor: textStatisticsPageStyles.primaryColor,
},
},
'& .MuiInputBase-input': {
fontSize: '0.9rem',
lineHeight: 1.6,
},
}}
/>
{/* 统计结果展示区域 */}
<Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center' }}>
{statItems.map((item) => (
<Grid sx={{ xs: 12, md: 3 }} key={item.label}>
<Paper
elevation={0}
sx={{
p: 2,
textAlign: 'center',
borderRadius: 4,
bgcolor: textStatisticsPageStyles.cardBg,
border: '1px solid',
borderColor: textStatisticsPageStyles.cardBorder,
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', // 平滑的切换动画
minHeight: { xs: '64px', md: '90px' },
display: 'flex',
flexDirection: { xs: 'row', md: 'column' }, // 小屏幕横向排列提高空间利用率
alignItems: 'center',
justifyContent: { xs: 'space-between', md: 'center' },
px: { xs: 3, md: 2 },
'&:hover': {
transform: 'translateY(-2px)',
boxShadow: () =>
`0 4px 12px ${alpha(textStatisticsPageStyles.primaryColor, 0.15)}`,
borderColor: textStatisticsPageStyles.primaryColor,
},
lineHeight: 1.6,
fontSize: '0.9rem',
fontWeight: 600,
}}
>
<Typography
color="text.secondary"
sx={{
mb: { xs: 0, md: 0.5 },
whiteSpace: 'nowrap',
}}
>
{item.label}
</Typography>
<Typography
sx={{
color: textStatisticsPageStyles.primaryColor, // 高亮显示核心数值
wordBreak: 'break-all',
}}
>
{item.value}
</Typography>
</Paper>
</Grid>
))}
</Grid>
</Container>
</Box>
);
}
pages/TimestampPage.tsx
+182
View File
@@ -0,0 +1,182 @@
import { TextField, Select, MenuItem, Stack, Box, Container } from '@mui/material';
import { useSnackbar } from '@/components/GlobalSnackbar';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import Button from '@/components/Button';
import PageHeader from '@/components/PageHeader';
import { ZONES, timestampPageStyles } from '@/config/pageTheme';
import LiveClock from './components/LiveClock';
import ResultView from './components/ResultView';
import { useTimestampConverter } from './hooks/useTimestampConverter';
export default function TimestampPage() {
const { showMessage } = useSnackbar();
const {
mode,
tsInput,
dtInput,
unit,
zone,
result,
error,
setMode,
setTsInput,
setDtInput,
setUnit,
setZone,
handleUseNow,
convert,
} = useTimestampConverter();
return (
<Box>
<Container sx={{ p: 2 }}>
{/* Header */}
<PageHeader
title="时间戳转换"
subtitle="Unix 毫秒数转换与格式化"
icon={<AccessTimeIcon />}
/>
{/* Live Clock Card */}
<LiveClock
unit={unit}
onUseNow={handleUseNow}
onUnitChange={setUnit}
showMessage={showMessage}
/>
{/* Mode Switcher */}
<Box
sx={{
position: 'relative',
display: 'flex',
p: 0.6,
bgcolor: 'grey.100',
borderRadius: 4,
mb: 2.5,
border: '1px solid',
borderColor: 'grey.200',
}}
>
<Box
sx={{
position: 'absolute',
height: 'calc(100% - 10px)',
width: 'calc(50% - 5px)',
bgcolor: '#fff',
borderRadius: 3.5,
boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
transform: mode === 'ts2dt' ? 'translateX(0)' : 'translateX(100%)',
top: 5,
left: 5,
}}
/>
{(['ts2dt', 'dt2ts'] as const).map((m) => (
<Box
key={m}
onClick={() => setMode(m)}
sx={{
flex: 1,
py: 1,
textAlign: 'center',
position: 'relative',
zIndex: 1,
cursor: 'pointer',
fontWeight: 800,
fontSize: '0.75rem',
color: mode === m ? 'primary.main' : 'text.secondary',
transition: 'color 0.3s',
}}
>
{m === 'ts2dt' ? '时间戳 → 日期' : '日期 → 时间戳'}
</Box>
))}
</Box>
{/* Input Area */}
<Stack spacing={2} sx={{ mb: 3 }}>
<TextField
placeholder={mode === 'ts2dt' ? '输入时间戳...' : 'YYYY-MM-DD HH:mm:ss'}
value={mode === 'ts2dt' ? tsInput : dtInput}
onChange={(e) => {
const val = e.target.value;
if (mode === 'ts2dt') {
setTsInput(val);
} else {
setDtInput(val);
}
}}
error={!!error}
helperText={error}
fullWidth
sx={timestampPageStyles.INPUT_STYLE}
/>
<Stack direction="row" spacing={1.5}>
{/* 优化后的单位选择按钮组 */}
<Box
sx={{
flex: 1,
display: 'flex',
bgcolor: 'grey.50',
p: 0.5,
borderRadius: 3.5,
border: '1px solid',
borderColor: 'grey.100',
}}
>
{(['ms', 's'] as const).map((u) => (
<Box
key={u}
onClick={() => setUnit(u)}
sx={{
flex: 1,
py: 0.8,
textAlign: 'center',
borderRadius: 3,
cursor: 'pointer',
fontSize: '0.75rem',
fontWeight: 800,
transition: 'all 0.2s',
bgcolor: unit === u ? '#fff' : 'transparent',
color: unit === u ? 'primary.main' : 'text.disabled',
boxShadow: unit === u ? '0 2px 8px rgba(0,0,0,0.05)' : 'none',
}}
>
{u === 'ms' ? '毫秒 (ms)' : '秒 (s)'}
</Box>
))}
</Box>
<Select
fullWidth
value={zone}
onChange={(e) => setZone(e.target.value as typeof zone)}
sx={{ ...timestampPageStyles.INPUT_STYLE, flex: 1, borderRadius: 4 }}
MenuProps={{
PaperProps: {
sx: { borderRadius: 3, mt: 1, boxShadow: '0 12px 32px rgba(0,0,0,0.1)' },
},
}}
>
{ZONES.map((z) => (
<MenuItem key={z} value={z} sx={{ fontSize: '0.8rem', fontWeight: 600 }}>
{z}
</MenuItem>
))}
</Select>
</Stack>
</Stack>
{/* Main Action */}
<Button fullWidth variant="contained" onClick={convert}>
立即转换
</Button>
{/* Result View */}
<ResultView result={result} mode={mode} unit={unit} zone={zone} showMessage={showMessage} />
</Container>
</Box>
);
}
pages/components/AutoRefreshToggle.tsx
+51
View File
@@ -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>
);
}
pages/components/CleaningResult.tsx
+36
View File
@@ -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>
);
}
pages/components/DomainHeader.tsx
+84
View File
@@ -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 }}
/>
);
}
pages/components/ErrorDisplay.tsx
+62
View File
@@ -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>
);
}
pages/components/LiveClock.tsx
+155
View File
@@ -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;
pages/components/OptionItem.tsx
+107
View File
@@ -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>
);
}
pages/components/ResultView.tsx
+145
View File
@@ -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;
pages/components/StorageOptionsGrid.tsx
+136
View File
@@ -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>
);
}
pages/hooks/useActiveTabDomain.ts
+29
View File
@@ -0,0 +1,29 @@
import { useState, useEffect } from 'react';
import { getActiveTabDomain } from '@/utils/chromeTabs';
/**
* 自动获取并维护当前活动标签页域名的 Hook
*/
export function useActiveTabDomain() {
const [domain, setDomain] = useState<string>('');
useEffect(() => {
getActiveTabDomain().then(setDomain);
// 如果需要实时同步（如切换标签页），可以监听 chrome.tabs.onActivated
const handleActivated = () => getActiveTabDomain().then(setDomain);
const handleUpdated = (_: number, changeInfo: { url?: string }) => {
if (changeInfo.url) getActiveTabDomain().then(setDomain);
};
chrome.tabs.onActivated.addListener(handleActivated);
chrome.tabs.onUpdated.addListener(handleUpdated);
return () => {
chrome.tabs.onActivated.removeListener(handleActivated);
chrome.tabs.onUpdated.removeListener(handleUpdated);
};
}, []);
return domain;
}
pages/hooks/useSidePanelState.ts
+60
View File
@@ -0,0 +1,60 @@
import { useState, useEffect, useCallback } from 'react';
import { MessageAction, onMessage } from '@/utils/messages';
import { useSnackbar } from '@/components/GlobalSnackbar';
/**
* 管理侧边栏状态检测与开启逻辑的 Hook
*/
export function useSidePanelState() {
const [sidePanelOpen, setSidePanelOpen] = useState(false);
const { showMessage } = useSnackbar();
const checkSidePanelState = useCallback(async () => {
try {
if (typeof chrome.runtime.getContexts === 'function') {
const contexts = await chrome.runtime.getContexts({
contextTypes: ['SIDE_PANEL'],
});
setSidePanelOpen(contexts.length > 0);
} else {
setSidePanelOpen(false);
}
} catch (error) {
console.error('检测侧边栏状态失败:', error);
setSidePanelOpen(false);
}
}, []);
useEffect(() => {
// 使用 requestAnimationFrame 避免同步调用 setState
requestAnimationFrame(() => {
checkSidePanelState().catch(console.error);
});
// 监听侧边栏状态变化消息
const removeListener = onMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, (message) => {
setSidePanelOpen(message.data.isOpen);
});
return () => {
removeListener();
};
}, [checkSidePanelState]);
const handleOpenSidePanel = useCallback(async () => {
try {
await chrome.sidePanel.open({ windowId: chrome.windows.WINDOW_ID_CURRENT });
setSidePanelOpen(true);
showMessage('侧边栏已打开', { severity: 'success' });
} catch (error) {
console.error('打开侧边栏失败:', error);
showMessage('打开侧边栏失败', { severity: 'error' });
}
}, [showMessage]);
return {
sidePanelOpen,
handleOpenSidePanel,
checkSidePanelState,
};
}
pages/hooks/useTimestampConverter.ts
+113
View File
@@ -0,0 +1,113 @@
import { useState, useEffect, useCallback } from 'react';
import dayjs from '@/utils/dayjs';
import { DATE_FORMAT } from '@/config/pageTheme';
import type { UnitType, ZoneType } from '@/config/pageTheme';
export interface UseTimestampConverterReturn {
// State
mode: 'ts2dt' | 'dt2ts';
tsInput: string;
dtInput: string;
unit: UnitType;
zone: ZoneType;
result: string;
error: string;
// Actions
setMode: (mode: 'ts2dt' | 'dt2ts') => void;
setTsInput: (value: string) => void;
setDtInput: (value: string) => void;
setUnit: (unit: UnitType) => void;
setZone: (zone: ZoneType) => void;
handleUseNow: (now: number) => void;
convert: () => void;
}
export function useTimestampConverter(): UseTimestampConverterReturn {
const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
const [tsInput, setTsInput] = useState(() => String(Date.now()));
const [dtInput, setDtInput] = useState(() => dayjs().format(DATE_FORMAT));
const [unit, setUnit] = useState<UnitType>('ms');
const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
const [result, setResult] = useState('');
const [error, setError] = useState('');
const convert = useCallback(() => {
if (mode === 'ts2dt') {
const rawInput = tsInput.trim();
if (!rawInput) return;
const num = Number(rawInput);
if (isNaN(num)) {
setError('无效数字');
return;
}
const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
if (!d.isValid()) {
setError('无效时间戳');
return;
}
setError('');
setResult(d.tz(zone).format(DATE_FORMAT));
} else {
const rawInput = dtInput.trim();
if (!rawInput) return;
const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
if (!d.isValid()) {
setError('格式错误');
return;
}
setError('');
const ms = d.valueOf();
setResult(unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000)));
}
}, [mode, tsInput, dtInput, unit, zone]);
useEffect(() => {
const timer = setTimeout(convert, 400);
return () => clearTimeout(timer);
}, [convert]);
const handleUseNow = useCallback(
(now: number) => {
if (mode === 'ts2dt') {
setTsInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
} else {
setDtInput(dayjs(now).tz(zone).format(DATE_FORMAT));
}
},
[mode, unit, zone],
);
const handleSetMode = useCallback((newMode: 'ts2dt' | 'dt2ts') => {
setMode(newMode);
setError('');
setResult('');
}, []);
const handleSetTsInput = useCallback((value: string) => {
setTsInput(value);
setError('');
}, []);
const handleSetDtInput = useCallback((value: string) => {
setDtInput(value);
setError('');
}, []);
return {
mode,
tsInput,
dtInput,
unit,
zone,
result,
error,
setMode: handleSetMode,
setTsInput: handleSetTsInput,
setDtInput: handleSetDtInput,
setUnit,
setZone,
handleUseNow,
convert,
};
}
pages/useStorageCleaner.ts
+274
View File
@@ -0,0 +1,274 @@
import { useState, useEffect, useCallback, useRef } from 'react';
import { storageUtil } from '@/utils/chromeStorage';
import type { SnackbarOptions } from '@/components/GlobalSnackbar';
import type {
StorageCleanerOptions,
CleaningResult,
StorageCleanerPreferences,
} from '@/types/storage';
import {
getCurrentTab,
isRestrictedUrl,
clearStorage,
getCookieSize,
getLocalStorageSize,
getSessionStorageSize,
getIndexedDBSize,
getCacheStorageSize,
getServiceWorkerCount,
} from '@/utils/storageCleaner';
import { MessageAction, sendMessage } from '@/utils/messages';
const DEFAULT_OPTIONS: StorageCleanerOptions = {
localStorage: true,
sessionStorage: true,
indexedDB: true,
cookies: true,
cacheStorage: true,
serviceWorkers: true,
};
const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
autoRefresh: true,
selectedTypes: DEFAULT_OPTIONS,
};
export interface UseStorageCleanerReturn {
// State
domain: string;
error: string;
isInitializing: boolean;
options: StorageCleanerOptions;
sizes: Record<string, number>;
autoRefresh: boolean;
loading: boolean;
result: CleaningResult | null;
showConfirm: boolean;
setShowConfirm: (show: boolean) => void;
// Computed
totalSize: number;
allSelected: boolean;
someSelected: boolean;
// Handlers
handleAutoRefreshChange: (checked: boolean) => Promise<void>;
handleOptionChange: (key: keyof StorageCleanerOptions) => Promise<void>;
handleSelectAll: (checked: boolean) => Promise<void>;
handleClean: () => Promise<void>;
}
export interface UseStorageCleanerOptions {
showMessage: (message: string, options?: SnackbarOptions) => void;
}
export function useStorageCleaner({
showMessage,
}: UseStorageCleanerOptions): UseStorageCleanerReturn {
const [domain, setDomain] = useState<string>('');
const [error, setError] = useState<string>('');
const [isInitializing, setIsInitializing] = useState<boolean>(true);
const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
const [sizes, setSizes] = useState<Record<string, number>>({});
const [autoRefresh, setAutoRefresh] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(false);
const [result, setResult] = useState<CleaningResult | null>(null);
const [showConfirm, setShowConfirm] = useState<boolean>(false);
const resultTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const requestIdRef = useRef<number>(0);
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
const resultTimeout = resultTimeoutRef.current;
return () => {
if (resultTimeout) clearTimeout(resultTimeout);
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
};
}, []);
const loadInfo = useCallback(async () => {
const currentRequestId = ++requestIdRef.current;
try {
const tab = await getCurrentTab();
if (currentRequestId !== requestIdRef.current) return;
if (!tab || !tab.url) {
setError('无法获取当前标签页');
return;
}
if (isRestrictedUrl(tab.url)) {
setError('存储清理功能不支持此页面');
return;
}
setError('');
const url = tab.url;
const tabId = tab.id!;
setDomain(new URL(url).hostname);
const [savedPrefs, cSize, lsSize, ssSize, idbSize, cacheCount, swCount] = await Promise.all([
storageUtil.get('storageCleaner/preferences', DEFAULT_PREFERENCES),
getCookieSize(url),
getLocalStorageSize(tabId),
getSessionStorageSize(tabId),
getIndexedDBSize(tabId),
getCacheStorageSize(tabId),
getServiceWorkerCount(tabId),
]);
if (currentRequestId !== requestIdRef.current) return;
if (savedPrefs) {
setAutoRefresh(savedPrefs.autoRefresh ?? DEFAULT_PREFERENCES.autoRefresh);
setOptions(savedPrefs.selectedTypes ?? DEFAULT_PREFERENCES.selectedTypes);
}
setSizes({
cookies: cSize,
localStorage: lsSize,
sessionStorage: ssSize,
indexedDB: idbSize,
cacheStorage: cacheCount,
serviceWorkers: swCount,
});
} finally {
if (currentRequestId === requestIdRef.current) {
setIsInitializing(false);
}
}
}, []);
const loadInfoRef = useRef(loadInfo);
loadInfoRef.current = loadInfo;
const debouncedLoadInfo = useCallback(() => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
debounceTimerRef.current = setTimeout(() => {
loadInfoRef.current().catch(console.error);
}, 300);
}, []);
useEffect(() => {
// 首次加载不防抖
loadInfoRef.current().catch(console.error);
const handleTabChange = () => debouncedLoadInfo();
const handleTabUpdated = (_tabId: number, changeInfo: { status?: string; url?: string }) => {
if (changeInfo.status === 'complete' || changeInfo.url) {
debouncedLoadInfo();
}
};
chrome.tabs.onActivated.addListener(handleTabChange);
chrome.tabs.onUpdated.addListener(handleTabUpdated);
chrome.windows.onFocusChanged.addListener(handleTabChange);
return () => {
chrome.tabs.onActivated.removeListener(handleTabChange);
chrome.tabs.onUpdated.removeListener(handleTabUpdated);
chrome.windows.onFocusChanged.removeListener(handleTabChange);
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
};
}, [debouncedLoadInfo]);
const handleAutoRefreshChange = useCallback(
async (checked: boolean) => {
setAutoRefresh(checked);
await storageUtil.set('storageCleaner/preferences', {
autoRefresh: checked,
selectedTypes: options,
});
},
[options],
);
const handleOptionChange = useCallback(
async (key: keyof StorageCleanerOptions) => {
setOptions((prev) => {
const newOptions = { ...prev, [key]: !prev[key] };
storageUtil.set('storageCleaner/preferences', {
autoRefresh,
selectedTypes: newOptions,
});
return newOptions;
});
},
[autoRefresh],
);
const handleSelectAll = useCallback(
async (checked: boolean) => {
const newOptions = {
localStorage: checked,
sessionStorage: checked,
indexedDB: checked,
cookies: checked,
cacheStorage: checked,
serviceWorkers: checked,
};
setOptions(newOptions);
await storageUtil.set('storageCleaner/preferences', {
autoRefresh,
selectedTypes: newOptions,
});
},
[autoRefresh],
);
const handleClean = useCallback(async () => {
if (loading) {
return;
}
const tab = await getCurrentTab();
if (!tab || !tab.id || !tab.url) {
showMessage('无法获取当前标签页', { severity: 'warning' });
return;
}
setLoading(true);
try {
const cleaningResult = await clearStorage(tab.id, tab.url, options);
setResult(cleaningResult);
if (autoRefresh && cleaningResult.success) {
showMessage('清理成功，即将刷新页面', { severity: 'success' });
await sendMessage(MessageAction.RELOAD_TAB, { tabId: tab.id, delay: 1000 });
} else {
await loadInfo();
}
} catch (err) {
showMessage(`清理失败: ${String(err)}`, { severity: 'error' });
} finally {
setLoading(false);
setShowConfirm(false);
}
}, [loading, options, autoRefresh, showMessage, loadInfo]);
const totalSize = (sizes.cookies || 0) + (sizes.indexedDB || 0);
const allSelected = Object.values(options).every(Boolean);
const someSelected = Object.values(options).some(Boolean) && !allSelected;
return {
domain,
error,
isInitializing,
options,
sizes,
autoRefresh,
loading,
result,
showConfirm,
setShowConfirm,
totalSize,
allSelected,
someSelected,
handleAutoRefreshChange,
handleOptionChange,
handleSelectAll,
handleClean,
};
}