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

Develop (#74)

Browse Source 
* feat: 生成成功改为 toast 提示
* refactor: 数据预览改为显示示例数据，简化组件逻辑
* fix: 非必填字段预览显示 null
* fix: 修复空值率与必填状态的逻辑
* fix: 切换为非必填时默认空值率 100%
* feat: 字段编辑弹窗添加「完成」按钮 去除关闭按钮，添加取消按钮
* refactor: 删除未使用的 defaultNullRate 功能
* feat: 优化规则管理功能
* fix: 更新 features 测试断言以匹配新增的 testDataGenerator
* refactor: 将 formatFileSize 重命名为 formatBytes 并移至通用工具模块
* refactor: 使用 Label 组件替换原生 label 元素，并在 DecodeResultPaper 中引入 Input 组件
* refactor: 规范化页面组件目录结构
* refactor(JsonTools): 规范化页面组件目录结构
* refactor(StorageCleaner): 规范化页面组件目录结构
* refactor(Timestamp): 规范化页面组件目录结构
* refactor(i18n): 移除 chrome.i18n 国际化，统一使用中文硬编码
* refactor(AppRoot): 移除 RouterProvider 组件，直接渲染子组件
* fix(RouterProvider): 将 goBack 重命名为 goHome，修复跨窗同步 merge 不一致
* fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题
* refactor: 将 UI 文案改为中文并优化相关逻辑
* refactor: 清理代码注释并优化组件结构
* feat(Dashboard): 重构仪表板功能组件和逻辑
* refactor: 更新功能键名称并移除 README 文件
* refactor: 重构 TopBar 组件并更新项目结构
* feat(TopBar): 添加搜索功能组件并优化结构
* refactor: 统一使用 Button 组件替换原有 button 元素
* feat: 添加 EmptyPlaceholder 组件并更新相关页面
* feat(TextStatistics): 引入 StatCard 组件以优化统计信息展示
* feat(Timestamp): 重构时间戳转换功能，新增 ConverterForm 组件
* feat(Jwt): 重构 JWT 组件，新增常量和结果视图
* refactor(RightClickRestorer): 用状态配置表简化页面 UI 结构
* fix(business): 修复 skewedRandom 函数中的数学计算错误
* refactor(ImageUploader): 移除预览 URL 相关逻辑并简化粘贴事件处理
* feat(TestDataGenerator): 更新规则编辑提示和警告显示逻辑
* refactor(CopyButton.test): 移除冗余测试用例
* refactor(RouterProvider, chromeStorage, useContextMenuData): 更新存储获取逻辑以移除默认值参数
* refactor(代码重复): 抽取共享工具函数与 UI 组件，消除多处重复实现
* fix(RouterProvider): 修复初始加载状态逻辑，确保在加载前不覆盖 chrome.storage
* feat(TopBar): 添加搜索框快捷键提示功能及相关测试
* refactor(StorageCleaner): 移动 isRestrictedUrl 函数到独立模块并更新相关引用
* fix(StorageCleaner): 修复 IndexedDB 清理竞态、部分成功计数与刷新后状态同步
* fix: 修复路由初始化竞态、存储状态静默覆盖与存储清理误删
* refactor: 统一中文文案并简化组件结构，提升代码可读性
* refactor: 更新 Worker 消息类型以支持生成任务 ID
* fix: 修复 ruleStorage 写入失败处理与 CopyButton 成功态样式
This commit is contained in:
LingandRX
2026-06-27 17:58:59 +08:00
committed by GitHub
parent 4b38133cf8
commit 36b6bfd20d
182 changed files with 5395 additions and 4961 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CopyButton.tsx
+11 -16
View File
@@ -1,10 +1,9 @@
import React, { useEffect, useRef, useState } from 'react';
import { Check, Copy } from 'lucide-react';
import { copyTextToClipboard } from '@/utils/clipboard';
import { Button, type ButtonProps } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { buttonVariants, type ButtonProps } from '@/components/ui/button';
import { toast } from 'sonner';
import { useI18n } from '@/utils/chromeI18n';
interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
text: string;
@@ -19,7 +18,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
className,
...props
}) => {
const { t } = useI18n('common');
const [copied, setCopied] = useState(false);
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -33,33 +31,30 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
e.stopPropagation();
if (!text) {
toast.error(t('messages.copyEmpty'));
toast.error('无内容可复制');
return;
}
const success = await copyTextToClipboard(text);
if (success) {
toast.success(t('messages.copySuccess'));
toast.success('已复制到剪贴板');
setCopied(true);
if (timerRef.current) clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => setCopied(false), 1500);
} else {
toast.error(t('messages.copyError'));
toast.error('复制失败');
}
};
return (
<button
<Button
type="button"
onClick={handleCopy}
title={tooltip ?? t('buttons.copy')}
aria-label={tooltip ?? t('buttons.copy')}
className={cn(
buttonVariants({ variant, size }),
copied &&
'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10',
className,
)}
title={tooltip ?? '复制'}
aria-label={tooltip ?? '复制'}
variant={variant}
size={size}
className={cn(className, copied && 'text-emerald-500')}
{...props}
>
{copied ? (
@@ -67,7 +62,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
) : (
<Copy className="h-[1.2em] w-[1.2em]" />
)}
</button>
</Button>
);
};
src/components/DecodeResultPaper.tsx
-86
View File
@@ -1,86 +0,0 @@
/**
* DecodeResultPaper
*
* FileMode 与 ImageMode 通用的 decode 结果展示组件。
* 提取了二者 decode 输出区完全一致的结构：
* 标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
*
* FileMode 直接使用，ImageMode 通过 children 传入图片预览。
*/
import { Download } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { formatFileSize } from '@/utils/base64Converter';
import { useI18n } from '@/utils/chromeI18n';
interface DecodeResultPaperProps {
/** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
title: string;
/** 解码后推断的 MIME 类型 */
mimeType: string;
/** 解码后 Blob 的大小（字节） */
blobSize: number;
/** 当前文件名 */
fileName: string;
/** 文件名变更回调 */
onFileNameChange: (name: string) => void;
/** 下载按钮点击回调 */
onDownload: () => void;
/** 可选的预览内容，ImageMode 用于渲染图片预览 */
children?: React.ReactNode;
}
export default function DecodeResultPaper({
title,
mimeType,
blobSize,
fileName,
onFileNameChange,
onDownload,
children,
}: DecodeResultPaperProps) {
const { t } = useI18n('base64Converter');
return (
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
{/* 标题 */}
<span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
{/* 可选预览内容（ImageMode 的图片） */}
{children}
{/* 文件信息 */}
<div className="flex gap-4 mb-3">
<span className="text-xs text-muted-foreground">
{t('inferredMimeType')}: {mimeType}
</span>
<span className="text-xs text-muted-foreground">
{t('decodedSize')}: {formatFileSize(blobSize)}
</span>
</div>
{/* 文件名输入 */}
<div className="mb-3">
<label className="block text-xs font-medium text-muted-foreground mb-1">
{t('decodedFileName')}
</label>
<input
type="text"
value={fileName}
onChange={(e) => onFileNameChange(e.target.value)}
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
{/* 下载按钮 */}
<Button
variant="default"
onClick={onDownload}
disabled={!fileName.trim()}
className="w-full rounded-lg font-bold"
>
<Download className="mr-2 h-4 w-4" />
{t('download')}
</Button>
</div>
);
}
src/components/EmptyPlaceholder.tsx
+30
View File
@@ -0,0 +1,30 @@
import React from 'react';
import { cn } from '@/lib/utils';
export interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
messageClassName?: string;
}
const CONTAINER_CLASSES =
'rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center select-none p-8 min-h-[120px]';
const MESSAGE_CLASSES =
'text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed';
export default function EmptyPlaceholder({
children,
className,
messageClassName,
...props
}: EmptyPlaceholderProps) {
return (
<div className={cn(CONTAINER_CLASSES, className)} {...props}>
{typeof children === 'string' || typeof children === 'number' ? (
<p className={cn(MESSAGE_CLASSES, messageClassName)}>{children}</p>
) : (
children
)}
</div>
);
}
src/components/ErrorBoundary.tsx
+9 -31
View File
@@ -1,7 +1,5 @@
import { Component, ErrorInfo, ReactNode } from 'react';
import { AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { getMessage } from '@/utils/chromeI18n';
import { ErrorFallback } from '@/components/ErrorFallback';
interface Props {
children: ReactNode;
@@ -39,34 +37,14 @@ class ErrorBoundary extends Component<Props, State> {
render() {
if (this.state.hasError) {
return (
<div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
<div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
<AlertCircle className="h-8 w-8" />
</div>
<h2 className="text-xl font-extrabold text-destructive mb-2">
{getMessage('errorBoundary_title')}
</h2>
<p className="text-sm text-muted-foreground mb-6">
{getMessage('errorBoundary_description')}
</p>
{this.state.error && (
<div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
<pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
{this.state.error.toString()}
</pre>
</div>
)}
<Button
variant="destructive"
onClick={this.handleReset}
className="rounded-lg font-bold shadow-sm"
>
<RefreshCw className="mr-2 h-4 w-4" />
{getMessage('errorBoundary_refresh')}
</Button>
</div>
</div>
<ErrorFallback
variant="app"
title="糟糕，出了点问题"
description="应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。"
error={this.state.error}
actionLabel="刷新应用"
onAction={this.handleReset}
/>
);
}
src/components/ErrorFallback.tsx
+94
View File
@@ -0,0 +1,94 @@
import { AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
export interface ErrorFallbackProps {
title: string;
description: string;
error: Error | null;
actionLabel: string;
onAction: () => void;
variant?: 'app' | 'page';
showStack?: boolean;
className?: string;
}
export function ErrorFallback({
title,
description,
error,
actionLabel,
onAction,
variant = 'page',
showStack = false,
className,
}: ErrorFallbackProps) {
const isApp = variant === 'app';
const errorText = error ? (showStack ? error.stack || error.toString() : error.toString()) : null;
return (
<div
className={cn(
'flex flex-col items-center justify-center',
isApp
? 'mt-16 mx-auto max-w-md'
: 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
className,
)}
>
<div
className={cn(
'p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm',
!isApp && 'max-w-md w-full',
)}
>
<div
className={cn(
'flex items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4',
isApp ? 'h-16 w-16' : 'h-12 w-12',
)}
>
<AlertCircle className={isApp ? 'h-8 w-8' : 'h-6 w-6'} />
</div>
{isApp ? (
<h2 className="text-xl font-extrabold text-destructive mb-2">{title}</h2>
) : (
<h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
)}
<p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
{description}
</p>
{errorText && (
<div
className={cn(
'rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left border border-border/40',
isApp ? 'mb-6 p-4 max-h-[200px] overflow-auto' : 'mb-5 p-3 max-h-40 overflow-y-auto',
)}
>
<pre
className={cn(
'font-mono whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700',
isApp ? 'text-xs' : 'text-[11px] leading-relaxed',
)}
>
{errorText}
</pre>
</div>
)}
<Button
variant="destructive"
size={isApp ? 'default' : 'sm'}
onClick={onAction}
className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
>
<RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
{actionLabel}
</Button>
</div>
</div>
);
}
src/components/ImageUploader.tsx
-171
View File
@@ -1,171 +0,0 @@
import { useCallback, useEffect, useRef } from 'react';
import { Image, X } from 'lucide-react';
import { toast } from 'sonner';
import { useI18n } from '@/utils/chromeI18n';
interface ImageUploaderProps {
/** 选中的文件 */
selectedFile: File | null;
/** 文件变更回调 */
onFileChange: (file: File) => void;
/** 清除文件回调 */
onClearFile: () => void;
/** 文件预览 URL */
previewUrl: string;
/** 预览 URL 变更回调 */
onPreviewUrlChange: (url: string) => void;
/** 是否正在拖拽 */
dragging: boolean;
/** 拖拽状态变更回调 */
onDraggingChange: (dragging: boolean) => void;
}
const ImageUploader = ({
selectedFile,
onFileChange,
onClearFile,
previewUrl,
onPreviewUrlChange,
dragging,
onDraggingChange,
}: ImageUploaderProps) => {
const { t } = useI18n('qrCode');
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileChange = useCallback(
(file: File) => {
onFileChange(file);
onPreviewUrlChange(URL.createObjectURL(file));
},
[onFileChange, onPreviewUrlChange],
);
const handleClearFile = useCallback(() => {
if (previewUrl) {
URL.revokeObjectURL(previewUrl);
}
onClearFile();
toast.success(t('qrCode:imageCleared'));
}, [previewUrl, onClearFile, t]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
handleFileChange(e.target.files[0]);
}
};
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
onDraggingChange(true);
};
const handleDragLeave = () => {
onDraggingChange(false);
};
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
onDraggingChange(false);
const droppedFile = e.dataTransfer.files?.[0];
if (droppedFile) {
handleFileChange(droppedFile);
}
};
// 监听粘贴事件
useEffect(() => {
const handlePaste = async (e: ClipboardEvent) => {
const items = e.clipboardData?.items;
if (!items) return;
for (let i = 0; i < items.length; i++) {
if (items[i].type.startsWith('image/')) {
e.preventDefault();
const file = items[i].getAsFile();
if (file) {
try {
handleFileChange(file);
toast.success(t('qrCode:imagePasted'));
} catch (error) {
console.error('处理粘贴图片失败:', error);
toast.error(t('qrCode:imagePasteError'));
}
}
break;
}
}
};
document.addEventListener('paste', handlePaste);
return () => {
document.removeEventListener('paste', handlePaste);
};
}, [handleFileChange, t]);
return (
<div
className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${
dragging
? 'border-green-600 bg-green-50'
: selectedFile
? 'border-green-600 bg-green-50/50'
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10/50'
}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<input
ref={fileInputRef}
type="file"
accept="image/*"
onChange={handleInputChange}
className="hidden"
id="qr-code-upload"
/>
<label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
{selectedFile ? (
<div className="text-center w-full relative">
<div className="relative inline-block">
<img
src={previewUrl}
alt="QR Code Preview"
className="max-w-full max-h-40 rounded-lg object-contain"
/>
<button
type="button"
data-testid="ClearIcon"
onClick={(e) => {
e.stopPropagation();
handleClearFile();
}}
className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
>
<X className="w-3 h-3" />
</button>
</div>
<span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
<span className="block text-xs text-muted-foreground">{t('qrCode:clickToChange')}</span>
</div>
) : (
<>
<Image
data-testid="ImageIcon"
className="w-12 h-12 text-muted-foreground mx-auto mb-2"
/>
<span className="block text-sm text-muted-foreground mb-1">
{t('qrCode:clickToUpload')}
</span>
<span className="block text-xs text-muted-foreground">
{t('qrCode:supportFormats')}
</span>
</>
)}
</label>
</div>
);
};
export default ImageUploader;
src/components/PageErrorBoundary.tsx
+10 -35
View File
@@ -1,7 +1,5 @@
import { Component, ErrorInfo, ReactNode } from 'react';
import { AlertCircle, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { getMessage } from '@/utils/chromeI18n';
import { ErrorFallback } from '@/components/ErrorFallback';
interface Props {
children: ReactNode;
@@ -40,38 +38,15 @@ class PageErrorBoundary extends Component<Props, State> {
render() {
if (this.state.hasError) {
return (
<div className="flex flex-col items-center justify-center flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200">
<div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 max-w-md w-full shadow-sm">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
<AlertCircle className="h-6 w-6" />
</div>
<h3 className="text-base font-semibold text-foreground mb-1.5">
{getMessage('pageErrorBoundary_title')}
</h3>
<p className="text-xs text-muted-foreground mb-5">
{getMessage('pageErrorBoundary_description')}
</p>
{this.state.error && (
<div className="mb-5 p-3 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-40 overflow-y-auto border border-border/40">
<pre className="font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
{this.state.error.stack || this.state.error.toString()}
</pre>
</div>
)}
<Button
variant="destructive"
size="sm"
onClick={this.handleRetry}
className="font-medium shadow-sm"
>
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
{getMessage('errorBoundary_retry')}
</Button>
</div>
</div>
<ErrorFallback
variant="page"
title="该功能运行异常"
description="该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
error={this.state.error}
actionLabel="重新尝试"
onAction={this.handleRetry}
showStack
/>
);
}
src/components/QrCodePreview.tsx
-84
View File
@@ -1,84 +0,0 @@
import React from 'react';
import { Copy, Download } from 'lucide-react';
import { useI18n } from '@/utils/chromeI18n';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
// 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
/** 二维码 Data URL */
qrCodeDataUrl: string;
/** 下载回调 */
onDownload: () => void;
/** 复制回调 */
onCopy: () => void;
/** 自定义占位文本，用于空状态提示 */
placeholderText?: string;
}
const QrCodePreview = ({
qrCodeDataUrl,
onDownload,
onCopy,
placeholderText,
className,
...props
}: QrCodePreviewProps) => {
const { t } = useI18n('qrCode');
// 空状态下的虚线骨架屏
if (!qrCodeDataUrl) {
return (
<div
className={cn(
'flex flex-col justify-center items-center min-h-[200px] border border-dashed border-input rounded-xl p-4 bg-muted/40',
className,
)}
{...props}
>
<p className="text-sm text-muted-foreground text-center">
{placeholderText || t('qrCode:qrCodeWillShow')}
</p>
</div>
);
}
return (
<div
className={cn(
'flex flex-col justify-center items-center border border-input rounded-xl p-4 bg-muted/40',
className,
)}
{...props}
>
<div className="flex flex-col items-center w-full max-w-xs">
{/*
二维码容器适配：
在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
通过裹一层 bg-white 和 p-2，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
*/}
<div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
<img
src={qrCodeDataUrl}
alt="QR Code Preview"
className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
/>
</div>
<div className="flex w-full gap-2 mt-3">
<Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
<Download className="w-3.5 h-3.5 text-muted-foreground" />
<span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
</Button>
<Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
<Copy className="w-3.5 h-3.5" />
<span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
</Button>
</div>
</div>
</div>
);
};
export default QrCodePreview;
src/components/README.md
+1 -1
View File
@@ -6,9 +6,9 @@
| 组件 | 用途 |
| ----------------------- | ------------------------------------------------------------------------------ |
| `TopBar.tsx` | 顶部导航栏，集成搜索（含历史记录）、主题切换、语言切换、返回导航 |
| `RouterContainer.tsx` | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏 |
| `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换 |
| `EmptyPlaceholder.tsx` | 虚线边框空状态占位，统一工具页「暂无结果」提示样式 |
| `TextInputArea.tsx` | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空 |
| `CopyButton.tsx` | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
| `ImageUploader.tsx` | 图片上传组件，支持拖拽上传、文件选择和预览 |
src/components/RouterContainer.tsx
+2 -4
View File
@@ -1,7 +1,6 @@
import { FEATURES, getEntryPointType } from '@/config/features';
import { useRouter } from '@/providers/RouterProvider';
import { Suspense } from 'react';
import { useI18n } from '@/utils/chromeI18n';
import PageErrorBoundary from '@/components/PageErrorBoundary';
import PageSkeleton from '@/components/PageSkeleton';
import { cn } from '@/lib/utils';
@@ -11,7 +10,6 @@ const entryPointType = getEntryPointType();
export default function RouterContainer() {
const { currentPage, isLoaded } = useRouter();
const { t } = useI18n('common');
const animationClass =
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
@@ -43,9 +41,9 @@ export default function RouterContainer() {
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
<AlertTriangle className="h-6 w-6" />
</div>
<h3 className="text-sm font-semibold text-foreground">{t('router.notFound')}</h3>
<h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
{t('router.notFoundDescription', { entryPointType })}
{`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
</p>
</div>
)}
src/components/SwitchButtonGroup.tsx
+27 -29
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
export interface SwitchOption<T extends string | number = string> {
@@ -17,6 +18,16 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
buttonClassName?: string;
}
const SIZE_CLASSES = {
small: 'text-xs h-8 px-2 py-1 rounded-md',
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
large: 'text-base h-11 px-4 py-2 rounded-lg',
} as const;
const SELECTED_CLASSES =
'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
export default function SwitchButtonGroup<T extends string | number = string>({
value,
options,
@@ -26,12 +37,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
buttonClassName,
...props
}: SwitchButtonGroupProps<T>) {
const sizeClasses = {
small: 'text-xs h-8 px-2 py-1 rounded-md',
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
large: 'text-base h-11 px-4 py-2 rounded-lg',
};
return (
<div
className={cn(
@@ -40,29 +45,22 @@ export default function SwitchButtonGroup<T extends string | number = string>({
)}
{...props}
>
{options.map((option) => {
const isSelected = value === option.value;
return (
<button
key={option.value}
type="button"
onClick={() => onChange(option.value)}
className={cn(
'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
'disabled:pointer-events-none disabled:opacity-50',
sizeClasses[size],
isSelected
? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
: 'hover:bg-background/50 hover:text-foreground/80',
buttonClassName,
)}
>
{option.label}
</button>
);
})}
{options.map((option) => (
<Button
key={option.value}
type="button"
variant="ghost"
onClick={() => onChange(option.value)}
className={cn(
'flex-1 transition-all',
SIZE_CLASSES[size],
value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
buttonClassName,
)}
>
{option.label}
</Button>
))}
</div>
);
}
src/components/TextInputArea.tsx
+13 -22
View File
@@ -1,9 +1,9 @@
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
import { X } from 'lucide-react';
import { useI18n } from '@/utils/chromeI18n';
import { cn } from '@/lib/utils';
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
import { toast } from 'sonner';
import { CopyButton } from '@/components/CopyButton';
import { Button } from './ui/button';
export type ValidateRule = {
validator: (value: string) => boolean;
@@ -44,7 +44,6 @@ export interface TextInputAreaProps extends Omit<
onClear?: () => void;
}
// 提炼基础的 ActionButton，全面向 shadcn 核心 Button 样式对齐
function ActionButton({
action,
value,
@@ -114,8 +113,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
const [internalValue, setInternalValue] = useState(defaultValue);
const [error, setError] = useState<string>('');
const { t } = useI18n('common');
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
const placeholder = placeholderProp ?? '请输入文本';
const isControlled = controlledValue !== undefined;
const value = isControlled ? controlledValue : internalValue;
@@ -127,7 +125,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
const textArea = internalRef.current;
if (!textArea) return;
// 重置高度计算
textArea.style.height = 'auto';
const computedMin = minRows * 24;
@@ -159,7 +156,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const newVal = e.target.value;
if (maxLength && newVal.length > maxLength) {
const msg = t('charCount', { count: maxLength });
const msg = `内容不能超过 ${maxLength} 个字符`;
setError(msg);
toast.warning(msg);
return;
@@ -181,9 +178,9 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
onChange?.('');
setError('');
internalRef.current?.focus();
toast.success(t('textInputArea.cleared'));
toast.success('已清空');
onClear?.();
}, [isControlled, onChange, onClear, t]);
}, [isControlled, onChange, onClear]);
const handleAction = useCallback(
(action: ToolbarAction) => {
@@ -256,7 +253,6 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
{hasBottomBar && (
<div className="flex h-10 items-center justify-between px-4 bg-muted/30 border-t border-border/50">
{/* 左侧自定义动作 */}
<div className="flex items-center gap-1.5 min-w-0">
{bottomActions.map((action) => (
<ActionButton
@@ -269,32 +265,27 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
))}
</div>
{/* 右侧系统按钮组 */}
<div className="flex items-center gap-1.5 ml-auto shrink-0">
{allowCopy && value && (
<CopyButton
text={value}
tooltip={t('textInputArea.copyContent')}
size="sm"
className="h-7 w-7 p-1"
/>
<CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
)}
{showClear && value && !disabled && !readOnly && (
<button
<Button
type="button"
onClick={handleClear}
aria-label={t('textInputArea.clear')}
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
aria-label="清空"
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
>
<X className="h-4 w-4" />
</button>
</Button>
)}
</div>
</div>
)}
</div>
{/* 错误提示 */}
{displayError && (
<p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
{displayError}
src/components/TopBar.tsx
-313
View File
@@ -1,313 +0,0 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Sun, X } from 'lucide-react';
import { useRouter } from '@/providers/RouterProvider';
import { useThemeMode } from '@/providers/ThemeModeProvider';
import { FeatureConfig, FEATURES } from '@/config/features';
import { storageUtil } from '@/utils/chromeStorage';
import { openExtensionPage } from '@/utils/chromeTabs';
import { useI18n } from '@/utils/chromeI18n';
import { cn } from '@/lib/utils';
const SEARCH_HISTORY_LIMIT = 10;
const SEARCH_HISTORY_DISPLAY = 5;
export default function TopBar() {
const { currentPage, goBack, navigateTo } = useRouter();
const { mode, setMode } = useThemeMode();
const { t } = useI18n(['common', 'features']);
const [searchQuery, setSearchQuery] = useState('');
const [showResults, setShowResults] = useState(false);
const [searchHistory, setSearchHistory] = useState<string[]>([]);
const [selectedIndex, setSelectedIndex] = useState(-1);
const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const handleOpenInTab = async () => {
await openExtensionPage('popup.html', { mode: 'tab' });
window.close();
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
setShowResults(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Cmd/Ctrl+K 快捷键聚焦搜索框
useEffect(() => {
const handleGlobalKeyDown = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
inputRef.current?.focus();
setShowResults(true);
}
};
document.addEventListener('keydown', handleGlobalKeyDown);
return () => document.removeEventListener('keydown', handleGlobalKeyDown);
}, []);
useEffect(() => {
storageUtil
.get('app/searchHistory', [])
.then((history) => {
if (history) setSearchHistory(history);
})
.catch((err) => console.error('加载搜索历史失败:', err));
}, []);
const searchResults = useMemo(() => {
const query = searchQuery.trim().toLowerCase();
if (!query) return [];
return FEATURES.filter((f) => {
if (f.key === 'dashboard') return false;
return (
t(f.labelKey).toLowerCase().includes(query) ||
t(f.descriptionKey).toLowerCase().includes(query)
);
});
}, [searchQuery, t]);
const displayedHistory = useMemo(() => {
if (searchQuery.trim()) return [];
return searchHistory
.slice(0, SEARCH_HISTORY_DISPLAY)
.map((key) => ({ key, feature: FEATURES.find((f) => f.key === key) }))
.filter((item) => item.feature && item.feature.key !== 'dashboard');
}, [searchHistory, searchQuery]);
const saveToHistory = async (featureKey: string) => {
if (!featureKey.trim()) return;
const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
0,
SEARCH_HISTORY_LIMIT,
);
setSearchHistory(nextHistory);
await storageUtil.set('app/searchHistory', nextHistory).catch((err) => console.error(err));
};
const handleSelectFeature = (feature: FeatureConfig) => {
navigateTo(feature.key);
saveToHistory(feature.key);
setSearchQuery('');
setShowResults(false);
};
const cycleThemeMode = () => {
const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
setMode(nextMap[mode]);
};
const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
const handleKeyDown = (e: React.KeyboardEvent) => {
const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
if (e.key === 'ArrowDown') {
e.preventDefault();
setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
} else if (e.key === 'Enter') {
e.preventDefault();
if (selectedIndex >= 0 && selectedIndex < totalItems) {
if (searchQuery.trim()) {
handleSelectFeature(searchResults[selectedIndex]);
} else {
const selected = displayedHistory[selectedIndex];
if (selected?.feature) {
handleSelectFeature(selected.feature);
}
}
} else if (searchQuery.trim() && searchResults.length > 0) {
handleSelectFeature(searchResults[0]);
}
} else if (e.key === 'Escape') {
setShowResults(false);
inputRef.current?.blur();
}
};
const isDashboard = currentPage === 'dashboard';
return (
<header className="flex h-14 items-center justify-between border-b border-border bg-background px-4 relative z-50">
{/* 左侧：返回按钮区 */}
<div className="flex w-10 items-center justify-start">
{!isDashboard && (
<button
type="button"
onClick={goBack}
aria-label={t('common_buttons_back')}
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
>
<ArrowLeft className="h-4 w-4" />
</button>
)}
</div>
{/* 中间：搜索容器 */}
<div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
<div className="relative group">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 group-focus-within:text-muted-foreground transition-colors pointer-events-none" />
<input
ref={inputRef}
type="text"
placeholder={t('common_buttons_search')}
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
setShowResults(true);
setSelectedIndex(-1);
}}
onFocus={() => setShowResults(true)}
onKeyDown={handleKeyDown}
aria-label={t('common_buttons_search')}
className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
/>
{!searchQuery && (
<kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex h-5 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 pointer-events-none">
⌘K
</kbd>
)}
{searchQuery && (
<button
type="button"
onClick={() => {
setSearchQuery('');
setSelectedIndex(-1);
}}
aria-label={t('common:buttons.clearSearch')}
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
>
<X className="h-3 w-3" />
</button>
)}
</div>
{/* 动态联想结果卡片 */}
{showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
<div className="absolute top-full left-0 right-0 mt-1.5 bg-popover text-popover-foreground rounded-lg shadow-lg border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-2 duration-150">
<ul role="listbox" className="p-1.5">
{searchQuery.trim() ? (
searchResults.length > 0 ? (
searchResults.map((feature, index) => (
<li
key={feature.key}
role="option"
aria-selected={selectedIndex === index}
onClick={() => handleSelectFeature(feature)}
className={cn(
'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
selectedIndex === index
? 'bg-accent text-accent-foreground'
: 'hover:bg-muted/60',
)}
>
<div
className={cn(
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
'bg-muted/80 text-muted-foreground',
)}
>
{feature.icon && <feature.icon className="h-4 w-4" />}
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-foreground truncate">
{t(feature.labelKey)}
</p>
<p className="text-xs text-muted-foreground truncate mt-0.5">
{t(feature.descriptionKey)}
</p>
</div>
</li>
))
) : (
<li className="px-4 py-6 text-center text-sm text-muted-foreground">
{t('common:buttons.noResults')}
</li>
)
) : (
<>
<div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
{t('common:buttons.recentSearch')}
</div>
{displayedHistory.map((item, index) => (
<li
key={item.key}
role="option"
aria-selected={selectedIndex === index}
onClick={() => item.feature && handleSelectFeature(item.feature)}
className={cn(
'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
selectedIndex === index
? 'bg-accent text-accent-foreground'
: 'hover:bg-muted/60',
)}
>
<div
className={cn(
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
'bg-muted/80 text-muted-foreground',
)}
>
{item.feature?.icon && <item.feature.icon className="h-4 w-4" />}
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-foreground truncate">
{item.feature && t(item.feature.labelKey)}
</p>
<p className="text-xs text-muted-foreground truncate mt-0.5">
{item.feature && t(item.feature.descriptionKey)}
</p>
</div>
</li>
))}
</>
)}
</ul>
</div>
)}
</div>
{/* 右侧：操作区 */}
<div className="flex items-center gap-1 shrink-0">
<IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
<ThemeIcon className="h-4 w-4" />
</IconButton>
<IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
<ExternalLink className="h-4 w-4" />
</IconButton>
</div>
</header>
);
}
// 5. 提炼出高度复用的原子按钮，大幅精简 Tailwind 冗余，符合 shadcn 的灵巧风格
function IconButton({
children,
onClick,
title,
}: {
children: React.ReactNode;
onClick: () => void;
title: string;
}) {
return (
<button
type="button"
onClick={onClick}
title={title}
aria-label={title}
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
>
{children}
</button>
);
}
src/components/__tests__/CopyButton.test.tsx
+3 -42
View File
@@ -1,5 +1,5 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { act, render, screen, waitFor } from '@testing-library/react';
import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// unmock the globally-mocked component so we test the real implementation
@@ -45,29 +45,6 @@ describe('CopyButton', () => {
expect(mockedToast.success).toHaveBeenCalled();
});
it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
mockedCopy.mockResolvedValue(true);
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
render(<CopyButton text="test" />);
// 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
await user.click(screen.getByRole('button'));
await waitFor(() => {
expect(screen.getByRole('button').className).toContain('text-emerald');
});
// 1.5 秒后样式恢复
act(() => {
vi.advanceTimersByTime(1500);
});
await waitFor(() => {
expect(screen.getByRole('button').className).not.toContain('text-emerald');
});
});
it('复制空文本时弹出 error toast', async () => {
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
@@ -91,15 +68,10 @@ describe('CopyButton', () => {
expect(mockedToast.error).toHaveBeenCalled();
});
// ==================== 新增测试 ====================
it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
it('初始渲染时带有默认 aria-label', () => {
render(<CopyButton text="initial" />);
const button = screen.getByRole('button');
expect(button.className).not.toContain('text-emerald');
// 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
expect(button).toHaveAttribute('aria-label');
expect(screen.getByRole('button')).toHaveAttribute('aria-label', '复制');
});
it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
@@ -142,15 +114,12 @@ describe('CopyButton', () => {
await user.click(screen.getByRole('button'));
// 在 1.5 秒超时到期前卸载组件
act(() => {
vi.advanceTimersByTime(500);
});
// 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
expect(() => unmount()).not.toThrow();
// 前进剩余时间，确认没有异常
act(() => {
vi.advanceTimersByTime(2000);
});
@@ -164,23 +133,15 @@ describe('CopyButton', () => {
const button = screen.getByRole('button');
// 快速点击 3 次
await user.click(button);
await user.click(button);
await user.click(button);
// copyTextToClipboard 应该被调用 3 次（每次点击都执行）
expect(mockedCopy).toHaveBeenCalledTimes(3);
// 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
// advance 1.5 秒后，copied 状态应恢复为 false
act(() => {
vi.advanceTimersByTime(1500);
});
await waitFor(() => {
expect(button.className).not.toContain('text-emerald');
});
});
it('其他 button props 通过 ...props 透传', () => {
src/components/__tests__/DecodeResultPaper.test.tsx
-83
View File
@@ -1,83 +0,0 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import DecodeResultPaper from '@/components/DecodeResultPaper';
describe('DecodeResultPaper 组件', () => {
const defaultProps = {
title: 'decodedFileOutput',
mimeType: 'image/png',
blobSize: 1024,
fileName: 'decoded.png',
onFileNameChange: vi.fn(),
onDownload: vi.fn(),
};
beforeEach(() => {
vi.clearAllMocks();
});
describe('渲染测试', () => {
it('应渲染标题', () => {
render(<DecodeResultPaper {...defaultProps} />);
expect(screen.getByText('decodedFileOutput')).toBeInTheDocument();
});
it('应渲染 MIME 类型信息', () => {
render(<DecodeResultPaper {...defaultProps} />);
expect(screen.getByText(/image\/png/)).toBeInTheDocument();
});
it('应通过 formatFileSize 渲染文件大小', () => {
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
});
it('应渲染文件名输入框', () => {
render(<DecodeResultPaper {...defaultProps} />);
const input = screen.getByDisplayValue('decoded.png');
expect(input).toBeInTheDocument();
});
it('应渲染下载按钮', () => {
render(<DecodeResultPaper {...defaultProps} />);
expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
});
it('应渲染 children 内容', () => {
render(
<DecodeResultPaper {...defaultProps}>
<div data-testid="preview">预览内容</div>
</DecodeResultPaper>,
);
expect(screen.getByTestId('preview')).toBeInTheDocument();
expect(screen.getByText('预览内容')).toBeInTheDocument();
});
});
describe('交互测试', () => {
it('修改文件名时应调用 onFileNameChange', () => {
render(<DecodeResultPaper {...defaultProps} />);
const input = screen.getByDisplayValue('decoded.png');
fireEvent.change(input, { target: { value: 'new-name.png' } });
expect(defaultProps.onFileNameChange).toHaveBeenCalledWith('new-name.png');
});
it('点击下载按钮时应调用 onDownload', () => {
render(<DecodeResultPaper {...defaultProps} />);
fireEvent.click(screen.getByRole('button', { name: '下载' }));
expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
});
});
describe('按钮状态', () => {
it('文件名为空时下载按钮应禁用', () => {
render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
});
it('文件名不为空时下载按钮应启用', () => {
render(<DecodeResultPaper {...defaultProps} />);
expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
});
});
});
src/components/__tests__/EmptyPlaceholder.test.tsx
+48
View File
@@ -0,0 +1,48 @@
import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
describe('EmptyPlaceholder 组件', () => {
it('应渲染字符串提示文本', () => {
render(<EmptyPlaceholder>请输入内容</EmptyPlaceholder>);
expect(screen.getByText('请输入内容')).toBeInTheDocument();
});
it('应应用规范空状态容器样式', () => {
const { container } = render(<EmptyPlaceholder>提示</EmptyPlaceholder>);
const placeholder = container.firstChild;
expect(placeholder).toHaveClass(
'rounded-xl',
'bg-muted/30',
'border-dashed',
'border-border/80',
'min-h-[120px]',
);
});
it('应支持 className 自定义容器样式', () => {
const { container } = render(
<EmptyPlaceholder className="flex-1 min-h-[320px]">提示</EmptyPlaceholder>,
);
expect(container.firstChild).toHaveClass('flex-1', 'min-h-[320px]');
});
it('应支持 messageClassName 自定义文本样式', () => {
render(<EmptyPlaceholder messageClassName="text-sm max-w-none">提示</EmptyPlaceholder>);
expect(screen.getByText('提示')).toHaveClass('text-sm', 'max-w-none');
});
it('应支持 ReactNode 类型的 children', () => {
render(
<EmptyPlaceholder>
<span data-testid="custom-content">自定义内容</span>
</EmptyPlaceholder>,
);
expect(screen.getByTestId('custom-content')).toBeInTheDocument();
});
});
src/components/__tests__/ImageUploader.test.tsx
-201
View File
@@ -1,201 +0,0 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { act, fireEvent, render, screen } from '@testing-library/react';
import ImageUploader from '@/components/ImageUploader';
// 配置多端一致性常驻桩（WXT 规范）
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
// 模拟 URL API
const mockCreateObjectURL = vi.fn();
const mockRevokeObjectURL = vi.fn();
Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
vi.mock('sonner', () => ({
toast: {
success: vi.fn(),
error: vi.fn(),
},
}));
describe('ImageUploader 组件', () => {
const mockOnFileChange = vi.fn();
const mockOnClearFile = vi.fn();
const mockOnPreviewUrlChange = vi.fn();
const mockOnDraggingChange = vi.fn();
const defaultProps = {
selectedFile: null,
onFileChange: mockOnFileChange,
onClearFile: mockOnClearFile,
previewUrl: '',
onPreviewUrlChange: mockOnPreviewUrlChange,
dragging: false,
onDraggingChange: mockOnDraggingChange,
};
beforeEach(() => {
vi.clearAllMocks();
mockCreateObjectURL.mockReturnValue('blob:test-url');
});
afterEach(() => {
vi.restoreAllMocks();
vi.resetAllMocks();
});
describe('渲染测试', () => {
it('当没有选中文件时应显示上传提示', () => {
render(<ImageUploader {...defaultProps} />);
expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
expect(screen.getByText(/格式/)).toBeInTheDocument();
});
it('当没有选中文件时应显示 ImageIcon', () => {
render(<ImageUploader {...defaultProps} />);
expect(screen.getByTestId('ImageIcon')).toBeInTheDocument();
});
it('当选中文件时应显示文件预览', () => {
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
render(
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
);
expect(screen.getByText('test.png')).toBeInTheDocument();
expect(screen.getByText(/点击更换/)).toBeInTheDocument();
});
it('当选中文件时应显示预览图片', () => {
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
render(
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
);
const img = screen.getByAltText('QR Code Preview');
expect(img).toBeInTheDocument();
expect(img).toHaveAttribute('src', 'blob:test-url');
});
it('当选中文件时应显示清除按钮', () => {
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
render(
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
);
expect(screen.getByTestId('ClearIcon')).toBeInTheDocument();
});
it('应包含隐藏的文件输入框', () => {
render(<ImageUploader {...defaultProps} />);
const input = document.getElementById('qr-code-upload') as HTMLInputElement;
expect(input).toBeInTheDocument();
expect(input).toHaveAttribute('type', 'file');
expect(input).toHaveAttribute('accept', 'image/*');
});
});
describe('文件选择交互', () => {
it('选择文件时应调用 onFileChange 和 onPreviewUrlChange', async () => {
render(<ImageUploader {...defaultProps} />);
const input = document.getElementById('qr-code-upload') as HTMLInputElement;
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
await act(async () => {
fireEvent.change(input, { target: { files: [mockFile] } });
});
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
expect(mockCreateObjectURL).toHaveBeenCalledWith(mockFile);
expect(mockOnPreviewUrlChange).toHaveBeenCalledWith('blob:test-url');
});
});
describe('拖拽交互', () => {
it('拖拽进入时应调用 onDraggingChange(true)', () => {
const { container } = render(<ImageUploader {...defaultProps} />);
const dropzone = container.firstChild as HTMLElement;
fireEvent.dragOver(dropzone);
expect(mockOnDraggingChange).toHaveBeenCalledWith(true);
});
it('拖拽离开时应调用 onDraggingChange(false)', () => {
const { container } = render(<ImageUploader {...defaultProps} />);
const dropzone = container.firstChild as HTMLElement;
fireEvent.dragLeave(dropzone);
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
});
it('放置文件时应调用 onFileChange 和 onPreviewUrlChange', () => {
const { container } = render(<ImageUploader {...defaultProps} />);
const dropzone = container.firstChild as HTMLElement;
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
const dropEvent = new Event('drop', { bubbles: true });
Object.defineProperty(dropEvent, 'dataTransfer', {
value: {
files: [mockFile],
},
});
Object.defineProperty(dropEvent, 'preventDefault', {
value: vi.fn(),
});
fireEvent(dropzone, dropEvent);
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
});
});
describe('清除文件功能', () => {
it('点击清除按钮时应调用 onClearFile', () => {
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
render(
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
);
const clearButton = screen.getByTestId('ClearIcon').closest('button')!;
fireEvent.click(clearButton);
expect(mockRevokeObjectURL).toHaveBeenCalledWith('blob:test-url');
expect(mockOnClearFile).toHaveBeenCalledTimes(1);
});
});
describe('粘贴功能', () => {
it('监听粘贴事件', () => {
const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
render(<ImageUploader {...defaultProps} />);
expect(addEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
});
it('组件卸载时应移除粘贴事件监听', () => {
const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
const { unmount } = render(<ImageUploader {...defaultProps} />);
unmount();
expect(removeEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
});
});
describe('样式测试', () => {
it('拖拽状态时应应用拖拽样式', () => {
const { container } = render(<ImageUploader {...defaultProps} dragging={true} />);
const dropzone = container.firstChild as HTMLElement;
expect(dropzone).toBeInTheDocument();
});
it('有文件时应应用有文件样式', () => {
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
const { container } = render(
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
);
const dropzone = container.firstChild as HTMLElement;
expect(dropzone).toBeInTheDocument();
});
});
});
src/components/__tests__/QrCodePreview.test.tsx
-92
View File
@@ -1,92 +0,0 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import QrCodePreview from '@/components/QrCodePreview';
describe('QrCodePreview 组件', () => {
const mockOnDownload = vi.fn();
const mockOnCopy = vi.fn();
beforeEach(() => {
vi.clearAllMocks();
});
afterEach(() => {
vi.restoreAllMocks();
vi.resetAllMocks();
});
describe('渲染测试', () => {
it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
});
it('当 qrCodeDataUrl 有值时应显示二维码图片', () => {
const testDataUrl = 'data:image/png;base64,test123';
render(
<QrCodePreview
qrCodeDataUrl={testDataUrl}
onDownload={mockOnDownload}
onCopy={mockOnCopy}
/>,
);
const img = screen.getByAltText('QR Code Preview');
expect(img).toBeInTheDocument();
expect(img).toHaveAttribute('src', testDataUrl);
});
it('当 qrCodeDataUrl 有值时应显示下载按钮', () => {
render(
<QrCodePreview
qrCodeDataUrl="data:image/png;base64,test"
onDownload={mockOnDownload}
onCopy={mockOnCopy}
/>,
);
expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
});
it('当 qrCodeDataUrl 有值时应显示复制按钮', () => {
render(
<QrCodePreview
qrCodeDataUrl="data:image/png;base64,test"
onDownload={mockOnDownload}
onCopy={mockOnCopy}
/>,
);
expect(screen.getByText(/复制二维码/)).toBeInTheDocument();
});
it('当 qrCodeDataUrl 为空时不应显示操作按钮', () => {
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
expect(screen.queryByText(/下载二维码/)).not.toBeInTheDocument();
expect(screen.queryByText(/复制二维码/)).not.toBeInTheDocument();
});
});
describe('交互测试', () => {
it('点击下载按钮时应调用 onDownload 回调', () => {
render(
<QrCodePreview
qrCodeDataUrl="data:image/png;base64,test"
onDownload={mockOnDownload}
onCopy={mockOnCopy}
/>,
);
fireEvent.click(screen.getByText(/下载二维码/));
expect(mockOnDownload).toHaveBeenCalledTimes(1);
});
it('点击复制按钮时应调用 onCopy 回调', () => {
render(
<QrCodePreview
qrCodeDataUrl="data:image/png;base64,test"
onDownload={mockOnDownload}
onCopy={mockOnCopy}
/>,
);
fireEvent.click(screen.getByText(/复制二维码/));
expect(mockOnCopy).toHaveBeenCalledTimes(1);
});
});
});
src/components/__tests__/RouterContainer.test.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const mockRouterValue = {
isLoaded: true,
navigateTo: vi.fn(),
syncNavigation: vi.fn(),
goBack: vi.fn(),
goHome: vi.fn(),
setVisiblePages: vi.fn(),
setPageOrder: vi.fn(),
};
src/components/__tests__/StorageCleanerConfirm.test.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/components/StorageCleanerConfirm';
import type { StorageCleanerOptions } from '@/types/storage';
import React from 'react';
@@ -94,7 +94,7 @@ describe('StorageCleanerConfirm 组件', () => {
renderComponent({ options: partialOptions });
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
expect(screen.getByText(/站点存储/)).toBeInTheDocument();
expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
});
src/components/__tests__/TextInputArea.test.tsx
+12 -13
View File
@@ -18,12 +18,12 @@ describe('TextInputArea 组件', () => {
it('默认显示清空按钮', () => {
render(<TextInputArea value="有内容" onChange={() => {}} />);
expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '清空' })).toBeInTheDocument();
});
it('无内容时清空按钮应隐藏', () => {
render(<TextInputArea value="" onChange={() => {}} />);
expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: '清空' })).not.toBeInTheDocument();
});
it('disabled 时清空按钮应隐藏', () => {
@@ -57,7 +57,7 @@ describe('TextInputArea 组件', () => {
const handleChange = vi.fn();
render(<TextInputArea value="内容" onChange={handleChange} />);
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
fireEvent.click(screen.getByRole('button', { name: '清空' }));
expect(handleChange).toHaveBeenCalledWith('');
});
@@ -81,7 +81,7 @@ describe('TextInputArea 组件', () => {
it('清空按钮应清空内容', () => {
render(<TextInputArea defaultValue="内容" />);
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
fireEvent.click(screen.getByRole('button', { name: '清空' }));
expect(screen.getByRole('textbox')).toHaveValue('');
});
@@ -90,14 +90,12 @@ describe('TextInputArea 组件', () => {
describe('allowCopy 复制功能', () => {
it('allowCopy 且有内容时显示复制按钮', () => {
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '复制内容' })).toBeInTheDocument();
});
it('allowCopy 但无内容时隐藏复制按钮', () => {
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
expect(
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: '复制内容' })).not.toBeInTheDocument();
});
it('allowCopy=false 时不显示复制按钮', () => {
@@ -113,7 +111,7 @@ describe('TextInputArea 组件', () => {
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
await user.click(screen.getByRole('button', { name: '复制内容' }));
expect(writeTextSpy).toHaveBeenCalledWith('测试');
});
@@ -126,7 +124,7 @@ describe('TextInputArea 组件', () => {
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
await user.click(screen.getByRole('button', { name: '复制内容' }));
expect(writeTextSpy).toHaveBeenCalledWith('测试');
});
@@ -158,6 +156,7 @@ describe('TextInputArea 组件', () => {
fireEvent.change(textarea, { target: { value: '123456' } });
expect(handleChange).not.toHaveBeenCalledWith('123456');
expect(screen.getByText('内容不能超过 5 个字符')).toBeInTheDocument();
});
it('未超出 maxLength 的输入应正常触发', () => {
@@ -370,7 +369,7 @@ describe('TextInputArea 组件', () => {
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
await user.click(screen.getByRole('button', { name: '复制内容' }));
expect(writeTextSpy).toHaveBeenCalledWith('测试');
});
@@ -381,7 +380,7 @@ describe('TextInputArea 组件', () => {
const handleClear = vi.fn();
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
fireEvent.click(screen.getByRole('button', { name: '清空' }));
expect(handleClear).toHaveBeenCalledOnce();
});
@@ -389,7 +388,7 @@ describe('TextInputArea 组件', () => {
it('不传 onClear 时清空按钮应正常工作', () => {
render(<TextInputArea defaultValue="内容" />);
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
fireEvent.click(screen.getByRole('button', { name: '清空' }));
expect(screen.getByRole('textbox')).toHaveValue('');
});
src/components/__tests__/TopBar.test.tsx
-76
View File
@@ -1,76 +0,0 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import type { PageType } from '@/types/storage';
import React from 'react';
import TopBar from '@/components/TopBar';
import { RouterProvider } from '@/providers/RouterProvider';
import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation((query: string) => ({
matches: false,
media: query,
onchange: null,
addListener: vi.fn(),
removeListener: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
});
const mockRouterValue = {
currentPage: 'dashboard' as PageType,
visiblePages: ['dashboard', 'timestamp'] as PageType[],
pageOrder: ['timestamp'] as PageType[],
isLoaded: true,
navigateTo: vi.fn(),
syncNavigation: vi.fn(),
goBack: vi.fn(),
setVisiblePages: vi.fn(),
setPageOrder: vi.fn(),
};
vi.mock('@/providers/RouterProvider', () => ({
useRouter: () => mockRouterValue,
RouterProvider: ({ children }: { children: React.ReactNode }) => children,
}));
describe('TopBar 组件', () => {
beforeEach(() => {
vi.clearAllMocks();
});
const renderWithProvider = (ui: React.ReactElement) => {
return render(
<ThemeModeProvider>
<RouterProvider>{ui}</RouterProvider>
</ThemeModeProvider>,
);
};
describe('渲染测试', () => {
it('不在 dashboard 时应渲染返回按钮', () => {
mockRouterValue.currentPage = 'timestamp';
renderWithProvider(<TopBar />);
expect(screen.getByLabelText('返回')).toBeInTheDocument();
});
it('在 dashboard 上不应渲染返回按钮', () => {
mockRouterValue.currentPage = 'dashboard';
renderWithProvider(<TopBar />);
expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
});
});
describe('交互测试', () => {
it('点击返回按钮时应调用 goBack', () => {
mockRouterValue.currentPage = 'timestamp';
renderWithProvider(<TopBar />);
fireEvent.click(screen.getByLabelText('返回'));
expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
});
});
});