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

Develop (#9)

Browse Source 
* feat: optimize popup standalone window layout and enhance storage cleaner synchronization

* docs: 更新README文档并删除过时文件

- 更新README文档，添加项目结构、功能特性和路由系统等详细信息
- 删除不再使用的文档文件，包括CLAUDE.md、GEMINI.md和多个设计规范文档
- 清理项目中的过时配置文件和计划文档

* feat: 添加 Vitest 测试框架和组件测试

- 添加 Vitest 配置 (vitest.config.ts, vitest.setup.ts)
- 创建组件测试: Button, ToolCard, GlobalSnackbar, TopBar, RouterContainer, StorageCleanerConfirm
- 创建工具测试: routes, storageCleaner
- 修复 background.ts 监听器参数问题
- 修复 options/App.tsx 硬编码默认值
- 更新 lint-staged.config.mjs (添加 .mjs 支持, 添加 --no-warn-ignored)
- 更新 tsconfig.json (添加测试类型支持, 移除测试文件排除)
- 更新 package.json (添加测试脚本和依赖)

* fix: 修复 StorageCleanerPage Chrome API 监听器内存泄漏

使用 useRef 模式存储 loadInfo 函数引用，避免依赖数组变化导致的监听器重复注册问题

* refactor(popup): 优化 OpenUrl 页面样式和导航逻辑

重构 OpenUrl 页面输入框样式，改进聚焦状态效果
移除 RouterProvider 依赖，直接通过存储设置侧边栏路由
在 OpenUrlViewer 页面添加加载状态指示器和错误处理
监听存储变化实现 URL 自动更新

* feat(ui): 优化存储清理页面UI和交互效果

重构存储清理页面组件，增强视觉层次和交互体验：
- 使用新的错误提示样式和布局
- 改进选项卡片样式，增加悬停动画和选中状态
- 调整整体间距和排版，提升视觉一致性
- 添加微交互效果如悬停缩放和阴影
- 优化颜色方案和过渡动画
- 统一组件尺寸和字体层级

* feat: 添加二维码工具页面，支持URL转二维码和二维码解析功能

* chore: update package-lock.json (npm audit fix)

* refactor(主题): 将页面样式抽离到统一配置文件

将各页面的颜色和样式配置抽离到config/pageTheme.ts中统一管理
优化测试用例中使用each替代forEach
更新路由测试以包含新的qrCode页面

* feat(二维码页面): 添加复制二维码功能并优化样式

添加复制二维码到剪贴板的功能，并调整按钮布局和样式。同时将 ContentCopyIcon 导入位置调整到其他图标导入之后，并修复缩进问题。在 tsconfig.json 中添加 vitest/globals 类型支持。

* feat(theme): 为所有页面添加统一的背景色和卡片背景色

为应用中的所有页面添加了统一的浅灰色背景(#f5f5f5)和白色卡片背景(#ffffff)，以保持视觉一致性。修改了ToolCard组件以支持自定义卡片背景色，并更新了所有相关页面使用新的主题配置。

* feat: 添加复制按钮组件并优化现有复制功能

refactor(utils): 创建剪贴板工具函数
feat(components): 新增可复用的CopyButton组件
refactor(pages): 在QrCodePage和TimestampPage中使用CopyButton
style: 格式化代码并调整部分样式

* refactor(存储): 统一qrCode相关存储键名

将'qrCode/expanded'重命名为'qrCode/qrExpanded'以保持命名一致性

* feat: 添加二维码工具功能并更新项目配置

- 新增二维码工具页面及相关组件和工具函数
- 添加 MIT 许可证文件
- 更新 package.json 配置为公开项目
- 更新 README 文档说明新功能
This commit is contained in:
LingandRX
2026-04-19 15:31:14 +08:00
committed by GitHub
parent bbd0507bcd
commit be5e2f02ee
43 changed files with 4943 additions and 2483 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entrypoints/popup/App.css
+13 -1
View File
@@ -19,7 +19,7 @@
--sb-track-color: transparent;
}
/* 强制固定视口尺寸 */
/* 默认 Popup 尺寸 */
html,
body,
#root {
@@ -30,6 +30,18 @@ body,
overflow: hidden; /* 禁用外层滚动 */
}
/* 独立窗口全屏自适应 */
@media screen and (min-width: 401px), screen and (min-height: 601px) {
html,
body,
#root {
width: 100vw;
height: 100vh;
min-width: 400px;
min-height: 600px;
}
}
/* 全局极简滚动条定制 */
*::-webkit-scrollbar {
width: var(--sb-width);
entrypoints/popup/App.tsx
+4 -1
View File
@@ -10,7 +10,10 @@ function App() {
return (
<RouterProvider defaultRoute="dashboard" syncRoute={true} syncKey="app/popupRoute">
<div className="app" style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
<div
className="app"
style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}
>
<TopBar onOpenOptions={handleOpenOptions} />
<RouterContainer />
</div>
entrypoints/popup/pages/DashboardPage.tsx
+19 -2
View File
@@ -4,9 +4,11 @@ import ToolCard from '@/components/ToolCard';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import StorageIcon from '@mui/icons-material/Storage';
import LanguageIcon from '@mui/icons-material/Language';
import QrCodeIcon from '@mui/icons-material/QrCode';
import type { PageType } from '@/types/storage';
import { useEffect, useState } from 'react';
import dayjs from '@/utils/dayjs';
import { dashboardPageStyles } from '@/config/pageTheme';
export default function DashboardPage() {
const { navigateTo, visiblePages, pageOrder } = useRouter();
@@ -30,13 +32,14 @@ export default function DashboardPage() {
colorCode="#2196f3"
icon={<AccessTimeIcon sx={{ fontSize: 20 }} />}
onClick={() => navigateTo('timestamp')}
cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
snapshot={
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Typography
sx={{
fontFamily: 'monospace',
fontWeight: 600,
color: '#2196f3',
color: dashboardPageStyles.primaryColor,
fontSize: '0.85rem',
}}
>
@@ -58,6 +61,7 @@ export default function DashboardPage() {
colorCode="#ff9800"
icon={<StorageIcon sx={{ fontSize: 20 }} />}
onClick={() => navigateTo('storageCleaner')}
cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
/>
);
case 'openUrl':
@@ -69,6 +73,19 @@ export default function DashboardPage() {
colorCode="#9c27b0"
icon={<LanguageIcon sx={{ fontSize: 20 }} />}
onClick={() => navigateTo('openUrl')}
cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
/>
);
case 'qrCode':
return (
<ToolCard
key={key}
title="二维码工具"
description="URL 转二维码与二维码解析"
colorCode="#4caf50"
icon={<QrCodeIcon sx={{ fontSize: 20 }} />}
onClick={() => navigateTo('qrCode')}
cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
/>
);
default:
@@ -77,7 +94,7 @@ export default function DashboardPage() {
};
return (
<Box sx={{ bgcolor: 'grey.50', minHeight: '100%', pb: 4 }}>
<Box sx={{ bgcolor: dashboardPageStyles.backgroundColor, minHeight: '100%', pb: 4 }}>
<Container maxWidth="sm" sx={{ py: 3, px: 2 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
{pageOrder.map((key) => (isVisible(key) ? renderCard(key) : null))}
entrypoints/popup/pages/OpenUrlPage.tsx
+20 -42
View File
@@ -11,7 +11,6 @@ import {
Container,
Stack,
alpha,
Theme,
Tooltip,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
@@ -23,40 +22,10 @@ import LinkIcon from '@mui/icons-material/Link';
import Button from '@/components/Button';
import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
import { storageUtil } from '@/utils/chromeStorage';
import { useRouter } from '@/providers/RouterProvider';
import type { OpenUrlPreferences, OpenUrlEntry } from '@/types/storage';
import { openUrlPageStyles, dashboardPageStyles } from '@/config/pageTheme';
const THEME_COLOR = '#9c27b0';
const INPUT_STYLE = {
'& .MuiOutlinedInput-root': {
bgcolor: 'background.paper',
borderRadius: 3.5,
border: '1px solid',
borderColor: 'grey.100',
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
'& fieldset': { border: 'none' },
'&:hover': { borderColor: 'grey.300', bgcolor: 'grey.50' },
'&.Mui-focused': {
bgcolor: '#fff',
borderColor: THEME_COLOR,
boxShadow: (_theme: Theme) => `0 0 0 4px ${alpha(THEME_COLOR, 0.1)}`,
},
},
'& .MuiInputBase-input': {
py: 1.2,
px: 2,
fontSize: '0.85rem',
fontWeight: 600,
},
'& .MuiInputLabel-root': {
fontSize: '0.85rem',
fontWeight: 700,
color: 'text.secondary',
mb: 0.5,
'&.Mui-focused': { color: THEME_COLOR },
},
};
const THEME_COLOR = openUrlPageStyles.themeColor;
const DEFAULT_PREFERENCES: OpenUrlPreferences = {
entries: [],
@@ -68,7 +37,6 @@ export default function OpenUrlPage() {
const [newUrl, setNewUrl] = useState<string>('');
const [isLoaded, setIsLoaded] = useState(false);
const { snackbarProps, showMessage } = useSnackbar();
const { syncNavigation } = useRouter();
const showMixedContentWarning =
newUrl.startsWith('http://') && !newUrl.includes('localhost') && !newUrl.includes('127.0.0.1');
@@ -139,8 +107,10 @@ export default function OpenUrlPage() {
const handleOpenInSidebar = async (entry: OpenUrlEntry) => {
try {
// 存储目标 URL
await storageUtil.set('openUrl/currentUrl', entry.url);
syncNavigation('openUrlViewer');
// 直接设置侧边栏的路由，而不是通过 syncNavigation 影响弹窗路由
await storageUtil.set('app/sidepanelRoute', 'openUrlViewer');
const [currentTab] = await chrome.tabs.query({
active: true,
@@ -175,7 +145,7 @@ export default function OpenUrlPage() {
};
return (
<Box sx={{ pb: 3 }}>
<Box sx={{ bgcolor: dashboardPageStyles.backgroundColor, minHeight: '100%', pb: 3 }}>
<Container sx={{ py: 2 }}>
{/* Header */}
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 2.5 }}>
@@ -196,10 +166,10 @@ export default function OpenUrlPage() {
fontWeight={900}
sx={{ letterSpacing: '-0.5px', lineHeight: 1.2 }}
>
URL 实验室
URL 工具
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
多环境跳转与安全性预检
快速打开 URL 或复制链接
</Typography>
</Box>
</Stack>
@@ -224,8 +194,12 @@ export default function OpenUrlPage() {
onChange={(e) => setNewName(e.target.value)}
fullWidth
variant="outlined"
sx={INPUT_STYLE}
InputLabelProps={{ shrink: true }}
sx={openUrlPageStyles.INPUT_STYLE}
slotProps={{
inputLabel: {
shrink: true,
},
}}
/>
<TextField
label="目标 URL"
@@ -234,8 +208,12 @@ export default function OpenUrlPage() {
onChange={(e) => setNewUrl(e.target.value)}
fullWidth
variant="outlined"
sx={INPUT_STYLE}
InputLabelProps={{ shrink: true }}
sx={openUrlPageStyles.INPUT_STYLE}
slotProps={{
inputLabel: {
shrink: true,
},
}}
/>
{showMixedContentWarning && (
entrypoints/popup/pages/OpenUrlViewerPage.tsx
+94 -27
View File
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { Box, Typography } from '@mui/material';
import { Box, Typography, CircularProgress, Alert } from '@mui/material';
import { storageUtil } from '@/utils/chromeStorage';
import { dashboardPageStyles } from '@/config/pageTheme';
// 只允许 HTTP/HTTPS 协议，阻止危险协议
const ALLOWED_PROTOCOLS = ['http:', 'https:'];
@@ -8,6 +9,7 @@ const ALLOWED_PROTOCOLS = ['http:', 'https:'];
export default function OpenUrlViewerPage() {
const [currentUrl, setCurrentUrl] = useState<string>('');
const [isLoaded, setIsLoaded] = useState(false);
const [iframeLoading, setIframeLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// 验证 URL 是否安全
@@ -24,33 +26,59 @@ export default function OpenUrlViewerPage() {
};
// 从存储加载当前选中的 URL
useEffect(() => {
const loadCurrentUrl = async () => {
try {
const saved = await storageUtil.get('openUrl/currentUrl', '');
if (saved) {
const validationError = validateUrl(saved);
if (validationError) {
setError(validationError);
} else {
setCurrentUrl(saved);
setError(null);
}
const loadCurrentUrl = useCallback(async () => {
try {
const saved = await storageUtil.get('openUrl/currentUrl', '');
if (saved) {
const validationError = validateUrl(saved);
if (validationError) {
setError(validationError);
} else {
setCurrentUrl(saved);
setError(null);
setIframeLoading(true); // 重置 iframe 加载状态
}
} catch (error) {
console.error('Failed to load current URL:', error);
setError('加载 URL 失败');
} finally {
setIsLoaded(true);
} else {
setError(null);
setCurrentUrl('');
}
} catch (error) {
console.error('Failed to load current URL:', error);
setError('加载 URL 失败');
} finally {
setIsLoaded(true);
}
}, []);
// 初始加载
useEffect(() => {
loadCurrentUrl();
}, [loadCurrentUrl]);
// 监听存储变化，确保 URL 变更时能及时更新
useEffect(() => {
const handleStorageChange = (changes: { [key: string]: chrome.storage.StorageChange }) => {
if (changes['openUrl/currentUrl']) {
loadCurrentUrl();
}
};
loadCurrentUrl();
}, []);
chrome.storage.onChanged.addListener(handleStorageChange);
return () => chrome.storage.onChanged.removeListener(handleStorageChange);
}, [loadCurrentUrl]);
if (!isLoaded) {
return (
<Box sx={{ p: 2, flex: 1 }}>
<Typography color="text.secondary">Loading...</Typography>
<Box
sx={{
p: 2,
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CircularProgress size={40} />
</Box>
);
}
@@ -58,7 +86,10 @@ export default function OpenUrlViewerPage() {
if (error) {
return (
<Box sx={{ p: 2, flex: 1 }}>
<Typography color="error">{error}</Typography>
<Alert severity="error" sx={{ mb: 2 }}>
{error}
</Alert>
<Typography color="text.secondary">请返回 OpenUrl 页面选择有效的 URL。</Typography>
</Box>
);
}
@@ -66,15 +97,46 @@ export default function OpenUrlViewerPage() {
if (!currentUrl) {
return (
<Box sx={{ p: 2, flex: 1 }}>
<Typography color="text.secondary">
没有选中的 URL，请先在 OpenUrl 页面选择一个 URL 打开。
</Typography>
<Alert severity="info" sx={{ mb: 2 }}>
没有选中的 URL
</Alert>
<Typography color="text.secondary">请先在 OpenUrl 页面选择一个 URL 打开。</Typography>
</Box>
);
}
return (
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
<Box
sx={{
flex: 1,
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
bgcolor: dashboardPageStyles.backgroundColor,
}}
>
{/* 加载状态指示器 */}
{iframeLoading && (
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
bgcolor: 'rgba(255, 255, 255, 0.8)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1000,
}}
>
<Box sx={{ textAlign: 'center' }}>
<CircularProgress size={60} />
<Typography sx={{ mt: 2 }}>加载中...</Typography>
</Box>
</Box>
)}
<iframe
src={currentUrl}
title="OpenUrl Viewer"
@@ -85,6 +147,11 @@ export default function OpenUrlViewerPage() {
border: 'none',
display: 'block',
}}
onLoad={() => setIframeLoading(false)}
onError={() => {
setIframeLoading(false);
setError('URL 加载失败，请检查网络连接或 URL 是否正确');
}}
/>
</Box>
);
entrypoints/popup/pages/QrCodePage.tsx
+560
View File
@@ -0,0 +1,560 @@
import { useState, useRef, useEffect } from 'react';
import {
Box,
Typography,
TextField,
Button,
Stack,
Alert,
InputAdornment,
CircularProgress,
Accordion,
AccordionSummary,
AccordionDetails,
} from '@mui/material';
import { Container, alpha } from '@mui/system';
import QrCodeIcon from '@mui/icons-material/QrCode';
import ImageIcon from '@mui/icons-material/Image';
import LinkIcon from '@mui/icons-material/Link';
import DownloadIcon from '@mui/icons-material/Download';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import qrcode from 'qrcode';
import jsQR from 'jsqr';
import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
import CopyButton from '@/components/CopyButton';
import { storageUtil } from '@/utils/chromeStorage';
import { qrCodePageStyles, dashboardPageStyles } from '@/config/pageTheme';
const QrCodePage = () => {
const { snackbarProps, showMessage } = useSnackbar({ autoHideDuration: 1500 });
const [isInitialized, setIsInitialized] = useState(false);
// URL 转二维码状态
const [urlInput, setUrlInput] = useState('');
const [urlError, setUrlError] = useState('');
const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
const [generating, setGenerating] = useState(false);
// 二维码转 URL 状态
const [qrCodeFile, setQrCodeFile] = useState<File | null>(null);
const [parsedUrl, setParsedUrl] = useState('');
const [parseError, setParseError] = useState('');
const [parsing, setParsing] = useState(false);
// 卡片展开状态
const [urlExpanded, setUrlExpanded] = useState(true);
const [qrExpanded, setQrExpanded] = useState(false);
// 引用
const qrCodeRef = useRef<HTMLDivElement>(null);
// 从存储加载状态
useEffect(() => {
const loadState = async () => {
try {
const savedUrlExpanded = await storageUtil.get('qrCode/urlExpanded', true);
const savedQrExpanded = await storageUtil.get('qrCode/qrExpanded', false);
setUrlExpanded(savedUrlExpanded ?? true);
setQrExpanded(savedQrExpanded ?? false);
} catch (error) {
console.error('加载状态失败:', error);
} finally {
setIsInitialized(true);
}
};
loadState();
}, []);
// 保存状态到存储（仅在初始化完成后保存）
useEffect(() => {
if (!isInitialized) return;
const saveState = async () => {
try {
await storageUtil.set('qrCode/urlExpanded', urlExpanded);
await storageUtil.set('qrCode/qrExpanded', qrExpanded);
} catch (error) {
console.error('保存状态失败:', error);
}
};
saveState();
}, [urlExpanded, qrExpanded, isInitialized]);
// 初始化未完成时显示加载状态
if (!isInitialized) {
return (
<Container
sx={{
py: 4,
maxWidth: 400,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 200,
}}
>
<CircularProgress />
</Container>
);
}
// 处理 URL 输入变化
const handleUrlInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUrlInput(e.target.value);
setUrlError('');
};
// 处理文件选择
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// 只有当用户实际选择了文件时才更新状态
// 如果用户取消选择，保持原有状态不变
if (e.target.files && e.target.files.length > 0) {
const file = e.target.files[0];
setQrCodeFile(file);
setParseError('');
setParsedUrl('');
}
};
// 生成二维码
const generateQrCode = async () => {
if (!urlInput) {
setUrlError('请输入 URL');
return;
}
try {
setGenerating(true);
setUrlError('');
// 验证 URL 格式
let url = urlInput;
if (!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'https://' + url;
}
// 生成二维码
const dataUrl = await qrcode.toDataURL(url, {
width: 200,
margin: 2,
color: {
dark: qrCodePageStyles.black,
light: qrCodePageStyles.white,
},
});
setQrCodeDataUrl(dataUrl);
showMessage('二维码生成成功', { severity: 'success', autoHideDuration: 1000 });
} catch (error) {
console.error('生成二维码失败:', error);
showMessage('生成二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
} finally {
setGenerating(false);
}
};
// 解析二维码
const parseQrCode = async () => {
if (!qrCodeFile) {
showMessage('请选择二维码图片', { severity: 'error', autoHideDuration: 300 });
return;
}
try {
setParsing(true);
setParseError('');
setParsedUrl('');
// 读取文件并解析
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
throw new Error('无法创建 canvas 上下文');
}
const image = new Image();
image.src = URL.createObjectURL(qrCodeFile);
await new Promise<void>((resolve, reject) => {
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
resolve();
};
image.onerror = () => reject(new Error('图片加载失败'));
});
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
setParsedUrl(code.data);
showMessage('二维码解析成功', { severity: 'success', autoHideDuration: 1000 });
} else {
showMessage('未检测到二维码', { severity: 'error', autoHideDuration: 1000 });
}
} catch (error) {
console.error('解析二维码失败:', error);
showMessage('解析二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
} finally {
setParsing(false);
}
};
// 下载二维码
const downloadQrCode = () => {
if (!qrCodeDataUrl) return;
const link = document.createElement('a');
link.href = qrCodeDataUrl;
link.download = 'qrcode.png';
link.click();
showMessage('二维码下载成功', { severity: 'success', autoHideDuration: 300 });
};
// 复制二维码到剪贴板
const copyQrCode = async () => {
if (!qrCodeDataUrl) return;
try {
// 将 data URL 转换为 Blob
const response = await fetch(qrCodeDataUrl);
const blob = await response.blob();
// 使用 Clipboard API 写入图像
await navigator.clipboard.write([
new ClipboardItem({
'image/png': blob,
}),
]);
showMessage('二维码已复制到剪贴板', { severity: 'success', autoHideDuration: 1000 });
} catch (error) {
console.error('复制二维码失败:', error);
showMessage('复制二维码失败，请重试', { severity: 'error', autoHideDuration: 300 });
}
};
return (
<Box sx={{ bgcolor: dashboardPageStyles.backgroundColor, minHeight: '100%', pb: 3 }}>
<Container sx={{ py: 2, maxWidth: 400 }}>
{/* Header */}
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 2.5 }}>
<Box
sx={{
p: 1,
borderRadius: 2.5,
bgcolor: alpha(qrCodePageStyles.successColor, 0.1),
color: qrCodePageStyles.successColor,
display: 'flex',
}}
>
<QrCodeIcon sx={{ fontSize: 20 }} />
</Box>
<Box sx={{ flex: 1 }}>
<Typography
variant="subtitle1"
fontWeight={900}
sx={{ letterSpacing: '-0.5px', lineHeight: 1.2 }}
>
二维码工具
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
生成和解析二维码
</Typography>
</Box>
</Stack>
<Stack spacing={3}>
{/* URL 转二维码 */}
<Accordion
expanded={urlExpanded}
onChange={(_, isExpanded) => setUrlExpanded(isExpanded)}
sx={{
borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
'&:before': { display: 'none' },
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<QrCodeIcon color="primary" />
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
URL 转二维码
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails>
<Stack spacing={3}>
<TextField
label="输入 URL"
placeholder="https://example.com"
value={urlInput}
onChange={handleUrlInputChange}
fullWidth
variant="outlined"
error={!!urlError}
helperText={urlError}
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: 3,
},
}}
/>
<Button
variant="contained"
startIcon={
generating ? <CircularProgress size={16} color="inherit" /> : <QrCodeIcon />
}
onClick={generateQrCode}
disabled={generating}
sx={{
py: 1.2,
borderRadius: 3,
bgcolor: qrCodePageStyles.successColor,
fontWeight: 700,
'&:hover': {
bgcolor: qrCodePageStyles.successDark,
},
}}
>
{generating ? '生成中...' : '生成二维码'}
</Button>
{/* 二维码显示区域 */}
<Box
ref={qrCodeRef}
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
minHeight: 200,
border: '2px dashed',
borderColor: 'grey.200',
borderRadius: 3,
p: 2,
bgcolor: 'grey.50',
}}
>
{qrCodeDataUrl ? (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
}}
>
<img
src={qrCodeDataUrl}
alt="QR Code"
style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
/>
<Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
<Button
variant="outlined"
startIcon={<DownloadIcon />}
onClick={downloadQrCode}
sx={{
borderRadius: 2,
borderColor: qrCodePageStyles.successColor,
color: qrCodePageStyles.successColor,
'&:hover': {
borderColor: qrCodePageStyles.successDark,
bgcolor: alpha(qrCodePageStyles.successColor, 0.05),
},
}}
>
下载二维码
</Button>
<Button
variant="contained"
startIcon={<ContentCopyIcon />}
onClick={copyQrCode}
sx={{
borderRadius: 2,
bgcolor: qrCodePageStyles.successColor,
'&:hover': {
bgcolor: qrCodePageStyles.successDark,
},
}}
>
复制二维码
</Button>
</Box>
</Box>
) : (
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
二维码将显示在这里
</Typography>
)}
</Box>
</Stack>
</AccordionDetails>
</Accordion>
{/* 二维码转 URL */}
<Accordion
expanded={qrExpanded}
onChange={(_, isExpanded) => setQrExpanded(isExpanded)}
sx={{
borderRadius: 4,
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
'&:before': { display: 'none' },
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ borderBottom: 'none' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<LinkIcon color="success" />
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
二维码转 URL
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails>
<Stack spacing={3}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: 200,
border: '2px dashed',
borderColor: qrCodeFile ? qrCodePageStyles.successColor : 'grey.200',
borderRadius: 3,
p: 4,
bgcolor: qrCodeFile ? alpha(qrCodePageStyles.successColor, 0.05) : 'grey.50',
cursor: 'pointer',
transition: 'all 0.2s',
'&:hover': {
borderColor: qrCodePageStyles.successColor,
bgcolor: alpha(qrCodePageStyles.successColor, 0.05),
},
}}
>
<input
type="file"
accept="image/*"
onChange={handleFileChange}
style={{
display: 'none',
}}
id="qr-code-upload"
/>
<label
htmlFor="qr-code-upload"
style={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
>
{qrCodeFile ? (
<Box sx={{ textAlign: 'center', width: '100%' }}>
<img
src={URL.createObjectURL(qrCodeFile)}
alt="QR Code Preview"
style={{
maxWidth: '100%',
maxHeight: 160,
borderRadius: 8,
objectFit: 'contain',
}}
/>
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
{qrCodeFile.name}
</Typography>
<Typography variant="caption" color="text.secondary">
点击更换图片
</Typography>
</Box>
) : (
<>
<ImageIcon sx={{ fontSize: 48, color: 'grey.300', mb: 2 }} />
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
点击或拖拽上传二维码图片
</Typography>
<Typography variant="caption" color="text.secondary">
支持 PNG、JPG、WEBP 格式
</Typography>
</>
)}
</label>
</Box>
<Button
variant="contained"
startIcon={
parsing ? <CircularProgress size={16} color="inherit" /> : <LinkIcon />
}
onClick={parseQrCode}
disabled={parsing}
sx={{
py: 1.2,
borderRadius: 3,
bgcolor: qrCodePageStyles.successColor,
fontWeight: 700,
'&:hover': {
bgcolor: qrCodePageStyles.successDark,
},
}}
>
{parsing ? '解析中...' : '解析二维码'}
</Button>
{/* 解析结果显示 */}
<Box
sx={{
position: 'relative',
mt: 2,
}}
>
<TextField
label="解析结果"
value={parsedUrl}
fullWidth
variant="outlined"
slotProps={{
input: {
readOnly: true,
endAdornment: (
<InputAdornment position="end">
<CopyButton
text={parsedUrl}
tooltip="复制"
size="small"
color={qrCodePageStyles.primaryColor}
showMessage={showMessage}
/>
</InputAdornment>
),
},
}}
sx={{
'& .MuiOutlinedInput-root': {
borderRadius: 3,
},
}}
/>
</Box>
{parseError && (
<Alert severity="error" sx={{ borderRadius: 3 }}>
{parseError}
</Alert>
)}
</Stack>
</AccordionDetails>
</Accordion>
</Stack>
<GlobalSnackbar {...snackbarProps} />
</Container>
</Box>
);
};
export default QrCodePage;
entrypoints/popup/pages/StorageCleanerPage.tsx
+302 -111
View File
@@ -9,6 +9,7 @@ import {
Stack,
Switch,
Grid,
CircularProgress,
} from '@mui/material';
import WarningIcon from '@mui/icons-material/Warning';
import StorageIcon from '@mui/icons-material/Storage';
@@ -34,6 +35,7 @@ import {
getServiceWorkerCount,
formatSize,
} from '@/utils/storageCleaner';
import { storageCleanerPageStyles } from '@/config/pageTheme';
const DEFAULT_OPTIONS: StorageCleanerOptions = {
localStorage: true,
@@ -52,6 +54,7 @@ const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
export default function StorageCleanerPage() {
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);
@@ -60,51 +63,84 @@ export default function StorageCleanerPage() {
const [showConfirm, setShowConfirm] = useState<boolean>(false);
const { snackbarProps, showMessage } = useSnackbar();
const reloadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const resultTimeoutRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
return () => {
if (reloadTimeoutRef.current) clearTimeout(reloadTimeoutRef.current);
if (resultTimeoutRef.current) clearTimeout(resultTimeoutRef.current);
};
}, []);
const loadInfo = async () => {
const tab = await getCurrentTab();
if (!tab || !tab.url) {
setError('无法获取当前标签页');
return;
}
if (isRestrictedUrl(tab.url)) {
setError('存储清理功能不支持此页面');
return;
}
const url = tab.url;
const tabId = tab.id!;
setDomain(new URL(url).hostname);
const loadInfo = useCallback(async () => {
try {
const tab = await getCurrentTab();
if (!tab || !tab.url) {
setError('无法获取当前标签页');
return;
}
if (isRestrictedUrl(tab.url)) {
setError('存储清理功能不支持此页面');
return;
}
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),
]);
// 重置错误状态
setError('');
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,
});
};
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 (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 {
setIsInitializing(false);
}
}, []);
const loadInfoRef = useRef(loadInfo);
loadInfoRef.current = loadInfo;
useEffect(() => {
loadInfo();
loadInfoRef.current();
const handleTabChange = () => loadInfoRef.current();
const handleTabUpdated = (_tabId: number, changeInfo: { status?: string; url?: string }) => {
if (changeInfo.status === 'complete' || changeInfo.url) {
loadInfoRef.current();
}
};
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);
};
}, []);
const handleAutoRefreshChange = useCallback(
@@ -164,6 +200,13 @@ export default function StorageCleanerPage() {
try {
const cleaningResult = await clearStorage(tab.id, tab.url, options);
setResult(cleaningResult);
// 5秒后自动清除结果提示
if (resultTimeoutRef.current) clearTimeout(resultTimeoutRef.current);
resultTimeoutRef.current = setTimeout(() => {
setResult(null);
}, 5000);
if (autoRefresh && cleaningResult.success && tab.id !== undefined) {
showMessage('清理成功，即将刷新页面');
reloadTimeoutRef.current = setTimeout(() => {
@@ -178,20 +221,78 @@ export default function StorageCleanerPage() {
setLoading(false);
setShowConfirm(false);
}
}, [options, autoRefresh, showMessage]);
}, [options, autoRefresh, showMessage, loadInfo]);
if (isInitializing) {
return (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<CircularProgress size={24} color="warning" />
</Box>
);
}
if (error) {
return (
<Container sx={{ py: 4 }}>
<Alert severity="error" icon={<WarningIcon />} sx={{ borderRadius: 3 }}>
{error}
</Alert>
<Container
sx={{
py: 8,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '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>
);
}
// 这里的总大小仅包含以字节计算的项
const totalSize = (sizes.cookies || 0) + (sizes.localStorage || 0) + (sizes.sessionStorage || 0) + (sizes.indexedDB || 0);
const totalSize =
(sizes.cookies || 0) +
(sizes.localStorage || 0) +
(sizes.sessionStorage || 0) +
(sizes.indexedDB || 0);
const OptionItem = ({
label,
@@ -211,25 +312,32 @@ export default function StorageCleanerPage() {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
py: 0.8,
px: 1.2,
borderRadius: 2.5,
transition: 'all 0.2s',
'&:hover': { bgcolor: 'grey.50' },
py: 1,
px: 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 }}>
<Box sx={{ flex: 1, minWidth: 0, mr: 1.5 }}>
<Typography
variant="caption"
fontWeight={800}
color="text.primary"
sx={{
fontSize: '0.7rem',
display: 'block',
lineHeight: 1.1,
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'
textOverflow: 'ellipsis',
transition: 'color 0.2s',
}}
>
{label}
@@ -237,14 +345,15 @@ export default function StorageCleanerPage() {
{size !== undefined && size > 0 ? (
<Typography
variant="caption"
sx={{
color: 'text.disabled',
fontSize: '0.6rem',
fontWeight: 700,
sx={{
color: 'text.secondary',
fontSize: '0.65rem',
fontWeight: 600,
display: 'block',
mt: 0.2,
mt: 0.3,
lineHeight: 1,
whiteSpace: 'nowrap'
whiteSpace: 'nowrap',
opacity: 0.8,
}}
>
{isCount ? `${size} 个` : formatSize(size)}
@@ -252,13 +361,14 @@ export default function StorageCleanerPage() {
) : (
<Typography
variant="caption"
sx={{
color: 'grey.300',
fontSize: '0.6rem',
sx={{
color: 'grey.400',
fontSize: '0.65rem',
fontWeight: 500,
display: 'block',
mt: 0.2,
lineHeight: 1
mt: 0.3,
lineHeight: 1,
fontStyle: 'italic',
}}
>
无数据
@@ -270,63 +380,89 @@ export default function StorageCleanerPage() {
checked={checked}
onChange={onChange}
color="warning"
sx={{ p: 0.5 }}
sx={{
p: 0.6,
'& .MuiSvgIcon-root': {
fontSize: 18,
transition: 'transform 0.2s',
},
'&:hover .MuiSvgIcon-root': {
transform: 'scale(1.1)',
},
}}
/>
</Box>
);
return (
<Box sx={{ pb: 2 }}>
<Box sx={{ bgcolor: '#f5f5f5', minHeight: '100%', pb: 2 }}>
<Container sx={{ py: 2 }}>
{/* Domain Header */}
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 2 }}>
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 3 }}>
<Box
sx={{
p: 1,
borderRadius: 2.5,
bgcolor: '#fff4e5',
color: '#ff9800',
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: 20 }} />
<StorageIcon sx={{ fontSize: 22 }} />
</Box>
<Box sx={{ flex: 1 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography
variant="subtitle1"
variant="h6"
fontWeight={900}
sx={{ letterSpacing: '-0.5px', lineHeight: 1.2 }}
sx={{
letterSpacing: '-0.5px',
lineHeight: 1.2,
fontSize: '1rem',
color: 'text.primary',
}}
>
存储清理
</Typography>
{totalSize > 0 && (
<Typography
variant="caption"
<Box
sx={{
bgcolor: '#fff4e5',
color: '#ff9800',
px: 1,
py: 0.2,
borderRadius: 1.5,
bgcolor: 'rgba(255, 152, 0, 0.15)',
color: storageCleanerPageStyles.warningColor,
px: 1.5,
py: 0.3,
borderRadius: 2,
fontWeight: 800,
fontSize: '0.65rem',
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)}
</Typography>
</Box>
)}
</Stack>
<Typography
variant="caption"
variant="body2"
color="text.secondary"
sx={{
fontWeight: 600,
display: 'block',
maxWidth: 220,
maxWidth: 240,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
mt: 0.3,
fontSize: '0.75rem',
}}
>
{domain || '加载中...'}
@@ -337,15 +473,20 @@ export default function StorageCleanerPage() {
{/* Storage Options Grid */}
<Box
sx={{
mb: 2,
mb: 3,
border: '1px solid',
borderColor: 'grey.100',
borderRadius: 4,
p: 0.8,
p: 1.2,
bgcolor: 'background.paper',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
transition: 'all 0.2s',
'&:hover': {
boxShadow: '0 6px 16px rgba(0, 0, 0, 0.08)',
},
}}
>
<Grid container spacing={0}>
<Grid container spacing={1.5}>
<Grid size={6}>
<OptionItem
label="LocalStorage"
@@ -356,7 +497,7 @@ export default function StorageCleanerPage() {
</Grid>
<Grid size={6}>
<OptionItem
label="Session"
label="Session Storage"
checked={options.sessionStorage}
size={sizes.sessionStorage}
onChange={() => handleOptionChange('sessionStorage')}
@@ -380,7 +521,7 @@ export default function StorageCleanerPage() {
</Grid>
<Grid size={6}>
<OptionItem
label="Cache"
label="Cache Storage"
checked={options.cacheStorage}
size={sizes.cacheStorage}
isCount
@@ -389,28 +530,34 @@ export default function StorageCleanerPage() {
</Grid>
<Grid size={6}>
<OptionItem
label="Workers"
label="Service Workers"
checked={options.serviceWorkers}
size={sizes.serviceWorkers}
isCount
onChange={() => handleOptionChange('serviceWorkers')}
onChange={() => handleOptionChange('serviceWorkers')}
/>
</Grid>
</Grid>
<Divider sx={{ my: 0.8, borderColor: 'grey.50' }} />
<Divider sx={{ my: 1.2, borderColor: 'grey.100' }} />
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
px: 1.2,
py: 0.4,
px: 1.5,
py: 0.6,
bgcolor: 'rgba(0, 0, 0, 0.02)',
borderRadius: 2,
transition: 'all 0.2s',
'&:hover': {
bgcolor: 'rgba(0, 0, 0, 0.04)',
},
}}
>
<Typography
variant="caption"
fontWeight={800}
sx={{ color: 'text.secondary', fontSize: '0.65rem' }}
variant="body2"
fontWeight={700}
sx={{ color: 'text.secondary', fontSize: '0.7rem' }}
>
全选所有项
</Typography>
@@ -420,7 +567,16 @@ export default function StorageCleanerPage() {
indeterminate={someSelected}
onChange={(e) => handleSelectAll(e.target.checked)}
color="warning"
sx={{ p: 0.5 }}
sx={{
p: 0.6,
'& .MuiSvgIcon-root': {
fontSize: 18,
transition: 'transform 0.2s',
},
'&:hover .MuiSvgIcon-root': {
transform: 'scale(1.1)',
},
}}
/>
</Box>
</Box>
@@ -428,8 +584,8 @@ export default function StorageCleanerPage() {
{/* Auto Refresh Toggle */}
<Box
sx={{
mb: 2,
p: 1.2,
mb: 3,
p: 1.5,
borderRadius: 4,
bgcolor: 'background.paper',
border: '1px solid',
@@ -437,9 +593,14 @@ export default function StorageCleanerPage() {
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="caption" fontWeight={700}>
<Typography variant="body2" fontWeight={700} sx={{ fontSize: '0.8rem' }}>
清理后自动刷新页面
</Typography>
<Switch
@@ -447,6 +608,18 @@ export default function StorageCleanerPage() {
checked={autoRefresh}
onChange={(e) => handleAutoRefreshChange(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>
@@ -455,13 +628,21 @@ export default function StorageCleanerPage() {
variant="contained"
onClick={() => setShowConfirm(true)}
sx={{
py: 1.2,
py: 1.3,
borderRadius: 4,
bgcolor: '#ff9800',
bgcolor: storageCleanerPageStyles.warningColor,
fontWeight: 800,
fontSize: '0.85rem',
boxShadow: 'none',
'&:hover': { bgcolor: '#f57c00', boxShadow: '0 8px 16px rgba(255, 152, 0, 0.2)' },
boxShadow: '0 4px 12px rgba(255, 152, 0, 0.25)',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
bgcolor: storageCleanerPageStyles.warningDark,
boxShadow: '0 8px 20px rgba(255, 152, 0, 0.35)',
transform: 'translateY(-2px)',
},
'&:active': {
transform: 'translateY(0)',
},
}}
disabled={loading}
fullWidth
@@ -471,13 +652,23 @@ export default function StorageCleanerPage() {
{/* Result & Refresh Secondary Action */}
{result && (
<Box sx={{ mt: 2 }}>
<Box sx={{ mt: 3, animation: 'fadeIn 0.3s ease-in-out' }}>
<Alert
severity={result.success ? 'success' : 'error'}
sx={{
borderRadius: 2.5,
py: 0,
'& .MuiAlert-message': { fontSize: '0.75rem', fontWeight: 600 },
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 || '清理失败'}
entrypoints/popup/pages/TimestampPage.tsx
+289 -230
View File
@@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import dayjs from '@/utils/dayjs';
import {
TextField,
@@ -8,120 +8,115 @@ import {
Typography,
Box,
IconButton,
alpha,
Tooltip,
Theme,
Container,
Fade,
Divider,
alpha,
} from '@mui/material';
import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CheckIcon from '@mui/icons-material/Check';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import Button from '@/components/Button';
// ================= 常量配置 =================
const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
type UnitType = 'ms' | 's';
type ZoneType = (typeof ZONES)[number];
const INPUT_STYLE = {
'& .MuiOutlinedInput-root': {
bgcolor: 'background.paper',
borderRadius: 3.5,
border: '1px solid',
borderColor: 'grey.100',
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
'& fieldset': { border: 'none' },
'&:hover': { borderColor: 'grey.300', bgcolor: 'grey.50' },
'&.Mui-focused': {
bgcolor: '#fff',
borderColor: 'primary.main',
boxShadow: (theme: Theme) => `0 0 0 4px ${alpha(theme.palette.primary.main, 0.1)}`,
},
'&.Mui-error': {
borderColor: 'error.main',
boxShadow: (theme: Theme) => `0 0 0 4px ${alpha(theme.palette.error.main, 0.1)}`,
},
},
'& .MuiInputBase-input': {
py: 1.4,
px: 2,
fontSize: '0.9rem',
fontFamily: 'monospace',
fontWeight: 600
},
};
import CopyButton from '@/components/CopyButton';
import { DATE_FORMAT, ZONES, timestampPageStyles } from '@/config/pageTheme';
import type { UnitType, ZoneType } from '@/config/pageTheme';
// ================= 子组件：实时时钟 (优化交互) =================
interface LiveClockProps {
unit: UnitType;
onCopy: (val: string) => void;
onUseNow: (val: number) => void;
onUnitChange: (u: UnitType) => void;
showMessage?: (message: string, options?: { severity: 'success' | 'error' }) => void;
}
const LiveClock = React.memo(({
unit,
onCopy,
onUseNow,
onUnitChange
}: LiveClockProps) => {
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 displayVal = useMemo(
() => String(Math.floor(now / (unit === 'ms' ? 1 : 1000))),
[now, unit],
);
const handleUseNow = useCallback(() => {
onUseNowRef.current(now);
}, [now]);
return (
<Box sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
p: 1.8,
mb: 2.5,
bgcolor: alpha('#2196f3', 0.04),
borderRadius: 4,
border: '1px solid',
borderColor: alpha('#2196f3', 0.1)
}}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
p: 1.8,
mb: 2.5,
bgcolor: alpha('#2196f3', 0.04),
borderRadius: 4,
border: '1px solid',
borderColor: alpha('#2196f3', 0.1),
}}
>
<Stack spacing={0.5}>
<Typography variant="caption" sx={{ color: 'primary.main', fontWeight: 800, fontSize: '0.6rem', textTransform: 'uppercase', letterSpacing: 1 }}>
<Typography
variant="caption"
sx={{
color: 'primary.main',
fontWeight: 800,
fontSize: '0.6rem',
textTransform: 'uppercase',
letterSpacing: 1,
}}
>
当前时间戳
</Typography>
<Typography variant="subtitle2" sx={{ fontWeight: 800, color: 'text.primary', fontFamily: 'monospace', fontSize: '1.2rem', letterSpacing: '-0.5px', lineHeight: 1.2 }}>
<Typography
variant="subtitle2"
sx={{
fontWeight: 800,
color: 'text.primary',
fontFamily: 'monospace',
fontSize: '1.2rem',
letterSpacing: '-0.5px',
lineHeight: 1.2,
}}
>
{displayVal}
</Typography>
</Stack>
<Stack direction="row" spacing={1} alignItems="center">
{/* 胶囊式单位切换器 */}
<Box sx={{
display: 'flex',
p: 0.4,
bgcolor: alpha('#2196f3', 0.08),
borderRadius: 2.5,
border: '1px solid',
borderColor: alpha('#2196f3', 0.1)
}}>
<Box
sx={{
display: 'flex',
p: 0.4,
bgcolor: alpha('#2196f3', 0.08),
borderRadius: 2.5,
border: '1px solid',
borderColor: alpha('#2196f3', 0.1),
}}
>
{(['ms', 's'] as const).map((u) => (
<Box
key={u}
onClick={() => onUnitChange(u)}
sx={{
px: 1.2,
py: 0.35,
borderRadius: 2,
sx={{
px: 1.2,
py: 0.35,
borderRadius: 2,
cursor: 'pointer',
fontSize: '0.65rem',
fontSize: '0.65rem',
fontWeight: 900,
transition: 'all 0.2s',
bgcolor: unit === u ? '#fff' : 'transparent',
@@ -133,26 +128,35 @@ const LiveClock = React.memo(({
</Box>
))}
</Box>
<Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 1, borderColor: alpha('#2196f3', 0.1) }} />
<Divider
orientation="vertical"
flexItem
sx={{ mx: 0.5, my: 1, borderColor: alpha('#2196f3', 0.1) }}
/>
<Stack direction="row" spacing={0.5}>
<Tooltip title="填充到下方">
<IconButton
size="small"
onClick={() => onUseNow(now)}
sx={{ color: 'primary.main', bgcolor: '#fff', boxShadow: '0 2px 4px rgba(0,0,0,0.05)', '&:hover': { bgcolor: 'primary.main', color: '#fff' } }}
<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>
<IconButton
size="small"
onClick={() => onCopy(displayVal)}
sx={{ color: 'grey.400', '&:hover': { color: 'primary.main' } }}
>
<ContentCopyIcon fontSize="small" />
</IconButton>
<CopyButton
text={displayVal}
tooltip="复制时间戳"
size="small"
color={timestampPageStyles.primaryColor}
showMessage={showMessage}
/>
</Stack>
</Stack>
</Box>
@@ -167,28 +171,19 @@ interface ResultViewProps {
mode: 'ts2dt' | 'dt2ts';
unit: UnitType;
zone: string;
onCopy: (val: string) => void;
showMessage?: (message: string, options?: { severity: 'success' | 'error' }) => void;
}
const ResultView = React.memo(({
result,
mode,
unit,
zone,
onCopy
}: ResultViewProps) => {
const [copied, setCopied] = useState(false);
const handleCopy = useCallback(() => {
onCopy(result);
setCopied(true);
setTimeout(() => setCopied(false), 1500);
}, [onCopy, result]);
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)));
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(),
@@ -201,72 +196,95 @@ const ResultView = React.memo(({
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
variant="caption"
sx={{
color: 'text.secondary',
mb: 1.2,
display: 'block',
fontWeight: 800,
fontSize: '0.7rem',
}}
>
转换结果
</Typography>
<Box sx={{
bgcolor: alpha('#2196f3', 0.05),
p: 2,
borderRadius: 4,
position: 'relative',
mb: 2.5,
border: '1px solid',
borderColor: alpha('#2196f3', 0.1)
}}>
<Typography
variant="body1"
sx={{
fontFamily: 'monospace',
fontWeight: 700,
<Box
sx={{
bgcolor: alpha('#2196f3', 0.05),
p: 2,
borderRadius: 4,
position: 'relative',
mb: 2.5,
border: '1px solid',
borderColor: alpha('#2196f3', 0.1),
}}
>
<Typography
variant="body1"
sx={{
fontFamily: 'monospace',
fontWeight: 700,
color: 'primary.main',
wordBreak: 'break-all',
pr: 4,
fontSize: '1rem'
fontSize: '1rem',
}}
>
{result}
</Typography>
<IconButton
size="small"
onClick={handleCopy}
sx={{
position: 'absolute',
right: 8,
top: '50%',
<CopyButton
text={result}
tooltip="复制结果"
size="small"
color={timestampPageStyles.primaryColor}
style={{
position: 'absolute',
right: 8,
top: '50%',
transform: 'translateY(-50%)',
color: copied ? 'success.main' : 'primary.main',
bgcolor: '#fff',
boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
'&:hover': { bgcolor: copied ? 'success.main' : 'primary.main', color: '#fff' }
}}
>
{copied ? <CheckIcon fontSize="small" /> : <ContentCopyIcon fontSize="small" />}
</IconButton>
/>
</Box>
<Stack spacing={1.2}>
{[
{ 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', px: 1 }}>
<Typography variant="caption" sx={{ color: 'text.disabled', fontWeight: 700, fontSize: '0.65rem' }}>{item.label}</Typography>
<Typography
variant="caption"
onClick={() => { if (item.value) onCopy(item.value); }}
sx={{
fontFamily: 'monospace',
color: 'text.secondary',
fontWeight: 600,
fontSize: '0.65rem',
cursor: 'pointer',
'&:hover': { color: 'primary.main' }
}}
<Box
key={item.label}
sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1 }}
>
<Typography
variant="caption"
sx={{ color: 'text.disabled', fontWeight: 700, fontSize: '0.65rem' }}
>
{item.value}
{item.label}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography
variant="caption"
sx={{
fontFamily: 'monospace',
color: 'text.secondary',
fontWeight: 600,
fontSize: '0.65rem',
}}
>
{item.value}
</Typography>
{item.value && (
<CopyButton
text={item.value}
tooltip="复制"
size="small"
color="primary"
showMessage={showMessage}
/>
)}
</Box>
</Box>
))}
</Stack>
@@ -288,30 +306,30 @@ export default function TimestampPage() {
const [error, setError] = useState('');
const { snackbarProps, showMessage } = useSnackbar({ autoHideDuration: 1500 });
const copy = useCallback(async (text: string) => {
try {
await navigator.clipboard.writeText(text);
showMessage('已复制', { severity: 'success' });
} catch {
showMessage('复制失败', { severity: 'error' });
}
}, [showMessage]);
const convert = useCallback(() => {
if (mode === 'ts2dt') {
const rawInput = tsInput.trim();
if (!rawInput) return;
const num = Number(rawInput);
if (isNaN(num)) { setError('无效数字'); return; }
if (isNaN(num)) {
setError('无效数字');
return;
}
const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
if (!d.isValid()) { setError('无效时间戳'); return; }
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; }
if (!d.isValid()) {
setError('格式错误');
return;
}
setError('');
const ms = d.valueOf();
setResult(unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000)));
@@ -323,24 +341,39 @@ export default function TimestampPage() {
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 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],
);
return (
<Box sx={{ pb: 3 }}>
<Box sx={{ bgcolor: '#f5f5f5', minHeight: '100%', pb: 3 }}>
<Container sx={{ py: 2 }}>
{/* Header with Icon */}
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mb: 2.5 }}>
<Box sx={{ p: 1, borderRadius: 2.5, bgcolor: alpha('#2196f3', 0.1), color: 'primary.main', display: 'flex' }}>
<Box
sx={{
p: 1,
borderRadius: 2.5,
bgcolor: alpha('#2196f3', 0.1),
color: 'primary.main',
display: 'flex',
}}
>
<AccessTimeIcon sx={{ fontSize: 20 }} />
</Box>
<Box sx={{ flex: 1 }}>
<Typography variant="subtitle1" fontWeight={900} sx={{ letterSpacing: '-0.5px', lineHeight: 1.2 }}>
<Typography
variant="subtitle1"
fontWeight={900}
sx={{ letterSpacing: '-0.5px', lineHeight: 1.2 }}
>
时间戳转换
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
@@ -350,45 +383,59 @@ export default function TimestampPage() {
</Stack>
{/* Live Clock Card */}
<LiveClock unit={unit} onCopy={copy} onUseNow={handleUseNow} onUnitChange={setUnit} />
<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.08)',
transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
transform: mode === 'ts2dt' ? 'translateX(0)' : 'translateX(100%)',
top: 5, left: 5,
}} />
<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.08)',
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); setError(''); setResult(''); }}
sx={{
flex: 1,
py: 1,
textAlign: 'center',
position: 'relative',
zIndex: 1,
onClick={() => {
setMode(m);
setError('');
setResult('');
}}
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'
transition: 'color 0.3s',
}}
>
{m === 'ts2dt' ? '时间戳 → 日期' : '日期 → 时间戳'}
@@ -399,7 +446,7 @@ export default function TimestampPage() {
{/* Input Area */}
<Stack spacing={2} sx={{ mb: 3 }}>
<TextField
placeholder={mode === 'ts2dt' ? "输入时间戳..." : DATE_FORMAT}
placeholder={mode === 'ts2dt' ? '输入时间戳...' : DATE_FORMAT}
value={mode === 'ts2dt' ? tsInput : dtInput}
onChange={(e) => {
const val = e.target.value;
@@ -413,31 +460,33 @@ export default function TimestampPage() {
error={!!error}
helperText={error}
fullWidth
sx={INPUT_STYLE}
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'
}}>
<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,
sx={{
flex: 1,
py: 0.8,
textAlign: 'center',
borderRadius: 3,
cursor: 'pointer',
fontSize: '0.75rem',
fontSize: '0.75rem',
fontWeight: 800,
transition: 'all 0.2s',
bgcolor: unit === u ? '#fff' : 'transparent',
@@ -451,13 +500,20 @@ export default function TimestampPage() {
</Box>
<Select
fullWidth value={zone}
fullWidth
value={zone}
onChange={(e) => setZone(e.target.value as ZoneType)}
sx={{ ...INPUT_STYLE, flex: 1 }}
MenuProps={{ PaperProps: { sx: { borderRadius: 3, mt: 1, boxShadow: '0 12px 32px rgba(0,0,0,0.1)' } } }}
sx={{ ...timestampPageStyles.INPUT_STYLE, flex: 1 }}
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>
<MenuItem key={z} value={z} sx={{ fontSize: '0.8rem', fontWeight: 600 }}>
{z}
</MenuItem>
))}
</Select>
</Stack>
@@ -465,8 +521,8 @@ export default function TimestampPage() {
{/* Main Action */}
<Button
fullWidth
variant="contained"
fullWidth
variant="contained"
onClick={convert}
sx={{
py: 1.4,
@@ -475,14 +531,17 @@ export default function TimestampPage() {
fontWeight: 800,
fontSize: '0.9rem',
boxShadow: 'none',
'&:hover': { bgcolor: 'primary.dark', boxShadow: `0 8px 24px ${alpha('#2196f3', 0.2)}` }
'&:hover': {
bgcolor: 'primary.dark',
boxShadow: `0 8px 24px ${alpha('#2196f3', 0.2)}`,
},
}}
>
立即转换
</Button>
{/* Result View */}
<ResultView result={result} mode={mode} unit={unit} zone={zone} onCopy={copy} />
<ResultView result={result} mode={mode} unit={unit} zone={zone} showMessage={showMessage} />
</Container>
<GlobalSnackbar {...snackbarProps} />